@charset "utf-8";
/* 도입 문의 폼 — 시안 구현
   정본(동작·계약): canon/consultation-form-porting-spec-v1.md (차의현)
   정본(겉모습)   : Figma DdVopQlTpFvPwDL2mtSOLB
                    A안 882:5683  → /consult.html      (사이트 내 페이지)
                    B안 896:58548 → /consult.html(B안)   (독립 랜딩형)

   모든 수치는 1920 기준 실측값이고, 사이트 규약대로 폭에 비례 축소한다
   — S(1920 기준 px) → clamp(S*0.625, S/19.2 vw, S). 글자만 하한을 높인다(읽기 어려움 방지).
     A안: 컨테이너 1200 @좌우 360 · 좌 548 / 간격 232 / 우 420 · 상단 188
     B안: 좌우 960/960 · 폼 480 @패널 좌우 240 · 상단 224 · 헤더 80 */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 폼 공통 (A·B 공유) ───────────────────────────────────────────────── */
.cf-form{display:flex;flex-direction:column;gap:clamp(14px,1.0417vw,20px)}

.cf-field{display:flex;flex-direction:column;min-width:0}
/* 라벨 12/18 */
.cf-field label{display:flex;align-items:center;font-size:clamp(11px,.625vw,12px);line-height:18px;
  font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cf-field label i{font-style:normal;color:#FF3B30;margin-left:2px}

/* 입력칸 48 높이 · 좌우 16 · 글자 16/24 */
.cf-in{margin-top:6px;width:100%;height:clamp(44px,2.5vw,48px);
  padding-inline:clamp(12px,.8333vw,16px);border:1px solid transparent;border-radius:8px;
  background:#F5F5F5;color:var(--ink);font:inherit;
  font-size:clamp(14px,.8333vw,16px);line-height:24px;
  transition:background-color .16s var(--ease),border-color .16s var(--ease)}
.cf-in::placeholder{color:#AEAEAE}
.cf-in:hover{background:#F0F0F0}
.cf-in:focus{outline:none;background:#fff;border-color:var(--brand)}
.cf-field.is-err .cf-in{background:#FEF2F1;border-color:#FF3B30}
.cf-err{margin:6px 0 0;font-size:clamp(11px,.625vw,12px);line-height:1.5;color:#FF3B30}

/* 드롭다운 캐럿 20 */
.cf-sel{position:relative}
.cf-sel select{appearance:none;-webkit-appearance:none;padding-right:clamp(34px,2.2917vw,44px);cursor:pointer}
.cf-sel::after{content:"";position:absolute;right:clamp(14px,.9375vw,18px);
  bottom:calc(clamp(44px,2.5vw,48px)/2 - 3px);
  width:8px;height:8px;border-right:1.6px solid #6B6B6B;border-bottom:1.6px solid #6B6B6B;
  rotate:45deg;pointer-events:none}

/* ── 약관 (블록 136 = 전체동의 24 + 6 + 박스 106) ─────────────────────── */
.cf-terms{margin-top:clamp(6px,.4167vw,8px)}
.cf-all{display:inline-flex;align-items:center;gap:clamp(6px,.2083vw,4px);cursor:pointer;
  font-size:clamp(13px,.7292vw,14px);line-height:24px;font-weight:700;letter-spacing:-.01em}
.cf-all input{margin-right:4px}
.cf-box{margin-top:6px;background:#F5F5F5;border-radius:8px;
  padding:12px clamp(12px,.8333vw,16px);display:flex;flex-direction:column;gap:8px}
.cf-term{display:flex;align-items:center;gap:0}
.cf-term label{display:inline-flex;align-items:center;gap:4px;cursor:pointer;flex:1;min-width:0;
  font-size:clamp(11px,.625vw,12px);line-height:22px;color:#5B5B5B;letter-spacing:-.01em}
.cf-term label > input{margin-right:4px}
.cf-term .tag{flex:0 0 auto;font-weight:700;color:var(--brand)}
.cf-term .tag.is-opt{color:#9A9A9A}
.cf-term a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin-right:-8px;color:#9A9A9A}
.cf-term a::after{content:"";width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;rotate:45deg;margin-left:-3px}
.cf-term a:hover{color:var(--ink)}

/* 체크박스 22 */
.cf-check{appearance:none;-webkit-appearance:none;flex:0 0 auto;position:relative;
  width:22px;height:22px;margin:0;border:1.5px solid #D4D4D4;border-radius:5px;background:#fff;
  cursor:pointer;transition:background-color .14s var(--ease),border-color .14s var(--ease)}
.cf-check:checked{background:var(--brand);border-color:var(--brand)}
.cf-check:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;rotate:45deg}
.cf-check:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── 제출 (46 높이 · 글자 14/24) ──────────────────────────────────────── */
.cf-submit{width:100%;height:clamp(42px,2.3958vw,46px);margin-top:clamp(14px,1.0417vw,20px);
  border:0;border-radius:8px;background:var(--ink);color:#fff;cursor:pointer;
  font:inherit;font-size:clamp(13px,.7292vw,14px);line-height:24px;font-weight:700;letter-spacing:-.01em;
  transition:background-color .18s var(--ease)}
.cf-submit:hover:not(:disabled){background:var(--brand)}
.cf-submit:disabled{background:#D4D4D4;cursor:not-allowed}

/* ── A안: 사이트 내 페이지 ────────────────────────────────────────────── */
.cf{padding-top:calc(var(--nav-h) + clamp(60px,5.625vw,108px));
  padding-bottom:clamp(72px,7.5vw,144px)}
/* 컨테이너 1200 을 폭에 비례 축소(1920→1200, 1200→750) */
/* .wrap 을 쓰지 않는다 — gutter 패딩이 1200 을 또 깎아 헤드라인이 일찍 줄바꿈된다.
   시안의 좌우 여백 360 은 컨테이너 폭(62.5vw)으로 이미 표현된다. */
.cf-grid{display:grid;grid-template-columns:548fr 232fr 420fr;align-items:start;
  width:min(1200px,62.5vw);min-width:0;margin-inline:auto}
.cf-lead{min-width:0}
.cf-grid > .cf-form,.cf-grid > .cf-done{grid-column:3}

/* 헤드라인 64/76 · 본문 20/30 */
.cf-lead h1{font-size:clamp(34px,3.3333vw,64px);line-height:1.1875;font-weight:700;letter-spacing:-.03em}
.cf-lead h1 b{color:var(--brand);font-weight:700}
.cf-lead p{margin-top:clamp(12px,.7813vw,15px);font-size:clamp(15px,1.0417vw,20px);line-height:1.5;
  color:#5B5B5B;letter-spacing:-.02em}
/* 로고 46 높이 · 슬롯 간격 30 · 오른쪽 페이드 (헤드라인 블록 아래 92)
   홈 overview 와 같은 방식으로 계속 흘러간다(초당 50px 기준, 7종 2벌). */
.cf-logos{margin-top:clamp(40px,4.7917vw,92px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent)}
.cf-logo-track{display:flex;width:max-content;align-items:center;
  gap:clamp(16px,1.5625vw,30px);animation:cf-logo-scroll 22s linear infinite}
.cf-logos:hover .cf-logo-track{animation-play-state:paused}
.cf-logos img{height:clamp(24px,2.3958vw,46px);width:auto;opacity:.4;flex:0 0 auto}
@keyframes cf-logo-scroll{to{transform:translateX(calc(-50% - clamp(8px,.7813vw,15px)))}}
@media (prefers-reduced-motion:reduce){.cf-logo-track{animation:none}}

/* ── B안: 독립 랜딩형 ─────────────────────────────────────────────────── */
.cl-head{position:absolute;inset:0 0 auto;z-index:2;height:clamp(64px,4.1667vw,80px);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(20px,6.25vw,120px)}
.cl-mark{display:flex;align-items:center;min-height:44px;color:#fff}
.cl-mark svg{width:clamp(84px,5.885vw,113px);height:auto}
.cl-mark svg [fill="#FF6000"]{fill:#fff}
.cl-back{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;
  font-size:clamp(13px,.7292vw,14px);line-height:24px;color:#8A8A8A}
.cl-back:hover{color:var(--ink)}

.cl{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
/* 카피 블록은 패널 한가운데 둔다(사용자 지시 2026-08-26 — 시안은 좌하단이나 구석에 박혀 보인다) */
.cl-art{position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:left;
  padding:clamp(28px,2.5vw,48px);
  background:url("consult-art.jpg") center/cover no-repeat,var(--brand);
  color:#fff}
/* 시안은 이 이미지 위에 #E85A04 를 overlay 로 얹어 채도를 올린다 (Figma 896:58724) */
.cl-art::after{content:"";position:absolute;inset:0;background:#E85A04;
  mix-blend-mode:overlay;pointer-events:none}
.cl-copy{position:relative;z-index:1}
/* 헤드라인 48/62 · 본문 14/24 */
.cl-copy{width:100%;max-width:clamp(300px,30.2083vw,580px)}
/* 헤드라인 64/76 · 본문 16/24 — 시안 대조 실측(48/14 는 작았다) */
.cl-art h1{font-size:clamp(34px,3.3333vw,64px);line-height:1.1875;font-weight:700;letter-spacing:-.03em;
  color:rgba(255,255,255,.7)}
.cl-art h1 b{color:#fff;font-weight:700}
.cl-art p{margin-top:clamp(14px,1.0417vw,20px);font-size:clamp(14px,.8333vw,16px);line-height:1.5;
  color:rgba(255,255,255,.92);letter-spacing:-.01em}

/* 우측 패널: 폼 480 을 패널 안에서 50% 로 둔다(좌우 여백 각 240) */
.cl-panel{display:flex;justify-content:center;
  padding-top:clamp(96px,11.6667vw,224px);padding-bottom:clamp(56px,5.2083vw,100px);
  padding-inline:clamp(20px,12.5vw,240px)}
.cl-in{width:100%;max-width:480px}
/* 제목 24/34, 폼까지 36 */
.cl-in h2{margin:0 0 clamp(24px,1.875vw,36px);font-size:clamp(20px,1.25vw,24px);line-height:34px;
  font-weight:700;letter-spacing:-.03em}
/* 2열 — 시안 234 + 12 + 234 */
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,.625vw,12px)}

/* ── 완료 화면 (A·B 공유) ─────────────────────────────────────────────── */
.cf-done[hidden],.cf-form[hidden]{display:none}
.cf-done{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:clamp(40px,4.1667vw,80px)}
.cf-done-badge{display:grid;place-items:center;width:72px;height:72px;border-radius:999px;
  background:#FBEDE2;color:#E37617}
.cf-done h2{margin:clamp(16px,1.4583vw,28px) 0 0;font-size:var(--fs-h3);line-height:var(--lh-h3);
  font-weight:700;letter-spacing:-.03em}
.cf-done p{margin:clamp(10px,.8333vw,16px) 0 0;font-size:var(--fs-sm);line-height:1.7;color:var(--body)}
.cf-done .btn{margin-top:clamp(24px,2.0833vw,40px)}

/* ── 토스트 ───────────────────────────────────────────────────────────── */
.cf-toast{position:fixed;left:50%;bottom:32px;translate:-50% 0;z-index:180;
  max-width:calc(100vw - 40px);padding:14px 20px;border-radius:10px;
  background:rgba(17,17,17,.94);color:#fff;font-size:var(--fs-sm);line-height:1.5;
  box-shadow:0 12px 32px rgba(0,0,0,.24);
  opacity:0;transition:opacity .2s var(--ease),translate .2s var(--ease)}
.cf-toast.is-on{opacity:1;translate:-50% -6px}

@media (max-width:1023px){
  .cf{padding-top:calc(var(--nav-h) + 28px);padding-bottom:72px}
  .cf-grid{grid-template-columns:1fr;width:100%;gap:32px}
  .cf-grid > .cf-form,.cf-grid > .cf-done{grid-column:1}
  .cf-logos{margin-top:24px}
  .cl{grid-template-columns:1fr;min-height:0}
  .cl-art{min-height:clamp(320px,52vw,420px);padding:24px 20px 28px}
  .cl-panel{padding:32px 20px 64px}
  .cl-head{padding-inline:20px}
  .cl-back{color:#fff}
  .cf-row{grid-template-columns:1fr;gap:14px}
}