/* ══════════════════════════════════════════════════════════
   cf-final — 조합본(사장님 지정): cf-3 뼈대(01~04 스크롤 스텝)
   + cf-4(pluuug) 다크 패널·슬라이드 인 모션 + cf-2 자료 다운로드 2종
   좌 = 다크 sticky 패널(목차 클릭 → 폼 단계·부가 섹션으로 즉시 이동 + 다운로드)
   원본 구조: 좌 sticky 타이틀 컬럼 / 우 스크롤 스텝 컬럼(border-l)
   색·카피만 박퇴 토큰으로 치환 · 서브히어로 라이트(순백)
   ══════════════════════════════════════════════════════════ */
html{ scroll-behavior:smooth; }
:root{ --cff-hh:76px; }              /* 정본 GNB 높이 — HD2에서만 62px */
body{ background:#fff; padding-top:var(--cff-hh); }
img,svg{ display:block; }
button,input,select,textarea{ font-family:inherit; }

/* 원본 Tailwind v4 기본 트랜지션 값 */
:root{
  --tdur:.15s;                          /* transition-all 기본 */
  --tfn:cubic-bezier(.4,0,.2,1);        /* 원본 ease */
  --tbase:.3s ease;                     /* 원본 --transition-base */
  --rvfn:cubic-bezier(.4,0,.2,1);
}

/* ── 스크롤 리빌 (원본 AnimateOnScroll 컴포넌트 1:1)
      IntersectionObserver threshold .2 · once(disconnect)
      transition-all duration-700 · opacity-0 translate-y-20(80px) → 0 ── */
.rv{ opacity:0; transform:translateY(80px);
     transition:opacity .7s var(--rvfn) var(--dl,0s), transform .7s var(--rvfn) var(--dl,0s); }
.rv.in{ opacity:1; transform:translateY(0); }

/* ═══ 상단 라이트 히어로 + 2단 레이아웃 ═══ */
.cf3-top{ background:#fff; overflow-x:clip; }
.cf3-flex{ display:block; }
/* 좌 패널이 fixed라 우측 콘텐츠 전체를 그 폭만큼 밀어낸다
   (§4.1 푸터 삭제 — 폼 완료 영역까지만 남는다) */
.cf3-form, .cf3-sec{ margin-left:var(--lw); }

/* ── cf-4(pluuug) 패널 등장 모션 값 ── */
:root{ --e4:cubic-bezier(.15,1,.25,1); --pdur:1.2s;
       --rpad:clamp(40px,4.4vw,88px);  /* 우 컬럼 좌측 여백 */

  /* ★§1·§4.1 공통 그리드 — ux-common.css 기준선을 이 페이지 좌표로 환산.
     --cff-side = (뷰포트 - 1520)/2 . JS(gridSync)가 clientWidth로 정확히 채운다.
     (100vw 는 스크롤바를 포함해 .gnb-in 과 어긋날 수 있어 쓰지 않는다) */
  --cff-side:0px;
  --cff-L:calc(var(--cff-side) + var(--ux-padL, 32px));  /* 로고 좌측 시작점 */
  --cff-R:calc(var(--cff-side) + var(--ux-padR, 45px));  /* 햄버거 3선 우측 끝점 */
  /* ★§4-4·§8 (2026-08-01) 좌 패널 텍스트만 더 왼쪽으로.
     ⛔ux-common.css 의 --ux-padL(32px)은 5개 페이지 공용이라 덮지 않는다.
     이 페이지 안에서만 좌 패널 전용 시작선을 따로 둔다 = 32px → 20px
     (20px = ux-common 의 --ux-gut, 사이트 최소 좌우 여백이라 더는 붙이지 않는다).
     ※우 폼 패널(--rpad / --cff-R)은 "현재가 괜찮다" 지시라 손대지 않는다 */
  /* ★2026-08-04 2차 요청서 §2 — 네 화면(상담문의·견적계산기·셀프진단·진단탭)의
     좌 패널 위계를 견적계산기 기준으로 통일. 20px → --panel-pad-l(16px). */
  --cff-lpad:var(--panel-pad-l);
  --cff-LL:calc(var(--cff-side) + var(--cff-lpad));
  /* ★§4-1 폼 스텝(01~04) 공통 간격 — 실제 적용 지점은 .cf3-live (아래 주석 참조) */
  --cff-stepgap:120px;
  /* 좌 패널 폭 — 넓은 화면에서 여백(side)만큼 같이 넓어져야
     패널 안 콘텐츠 폭이 유지된다.
     ★2차 §2 — 640px → 공통 토큰 --panel-w(468px, 견적계산기 기준).
       네 화면의 좌 패널 전체 너비가 이 한 값으로 결정된다. */
  /* ★★2026-08-04 — 배경 우측 경계도 견적계산기와 맞춘다.
     견적계산기는 컨테이너가 --panel-pad-l(16) 만큼 물러난 뒤 468 폭 패널이라
     다크 배경이 16 → 484 에서 끝난다. 여기는 left:0 에서 468 로 끝나 16px 짧았다.
     → 폭에 --panel-pad-l 을 더해 배경 우측 끝을 484 로 일치시킨다
       (텍스트 시작선 16 은 --cff-LL 이 이미 잡고 있어 그대로다). */
  --lw:calc(var(--panel-w) + var(--panel-pad-l) + var(--cff-side));
}

/* 좌 — 원본 xl:w-[50%] xl:sticky + cf-4 다크 패널 스킨
   ★§4.1 좌 패널 '시작점' = 로고 좌측(--cff-L). 패널 배경은 화면 끝까지 차되
   안쪽 콘텐츠가 로고 시작선에서 시작한다 */
/* ★2차 §2 — 상단 시작 위치·내부 상하좌우 여백·배경을 견적계산기(.spec)와 동일하게.
   구값: padding 상하 clamp(24,3.2vh,44) / 우 clamp(26,2.6vw,46) / 대각 그라데이션
   신값: 72 / 34 / 44 + 공통 --panel-bg (radial glow + navy)
   ⛔px 를 다시 쓰지 말 것 — 네 화면이 같이 어긋난다. */
.cf3-lead{ position:fixed; left:0; top:var(--cff-hh); z-index:5;
  width:var(--lw); height:calc(100vh - var(--cff-hh));
  padding-top:var(--panel-pad-t); padding-bottom:var(--panel-pad-b);
  padding-left:var(--cff-LL); padding-right:var(--panel-pad-r);
  display:flex; flex-direction:column;
  background:var(--panel-bg);
  color:#fff; overflow-y:auto; scrollbar-width:none;
  opacity:0; transform:translateX(-100%);
  transition:opacity var(--pdur) var(--e4), transform var(--pdur) var(--e4); }
.cf3-lead::-webkit-scrollbar{ display:none; }
body.ready .cf3-lead{ opacity:1; transform:translateX(0); }
/* 패널 내부 콘텐츠 — 패널보다 살짝 늦게 떠오름(cf-4 완료 텍스트 top 48→0 리듬) */
.cf3-lead > *{ opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--e4) var(--cd,0s), transform .8s var(--e4) var(--cd,0s); }
body.ready .cf3-lead > *{ opacity:1; transform:none; }
.cf3-top::after{ content:''; position:fixed; left:0; bottom:0; width:var(--lw); height:64px; z-index:6;
  background:linear-gradient(to bottom,rgba(10,25,48,0),#0F2138); pointer-events:none;
  opacity:0; transition:opacity .4s ease; }
body.lead-cut .cf3-top::after{ opacity:1; }
.cf3-lead .glow{ position:absolute; right:-90px; top:-70px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(77,162,255,.20) 0%,rgba(77,162,255,0) 68%); pointer-events:none; }

/* h1 — 좌 패널 최상단 요소(배지 삭제분 만큼 사이즈 상향) */
/* ★2차 §2 — 제목 타이포를 견적계산기 .spec h1 과 동일하게(크기·굵기·자간·행간).
   패널 폭이 640→468 로 좁아졌으므로 clamp 하한도 30px 로 맞춘다. */
.cf3-lead h1{ margin-top:12px; font-size:clamp(30px,3.1vw,46px); font-weight:700; line-height:1.2;
  letter-spacing:-.042em; color:#fff; word-break:keep-all; }
/* 설명 문구도 같은 위계(14.5/1.82) — 좁아진 폭에서 max-width 는 풀어 준다 */
.cf3-lead .sub{ margin-top:20px; font-size:14.5px; line-height:1.82; color:#9DB3D2; max-width:none; word-break:keep-all; }
/* SLA 배지 — h1 위(구 '상담 문의' 배지 자리) */
.cf3-sla{ margin-top:0; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:13px; font-weight:600; color:#DCE9FF; background:rgba(77,162,255,.12); border:1px solid rgba(77,162,255,.3);
  border-radius:999px; padding:7px 15px; word-break:keep-all; }
.cf3-sla i{ width:7px; height:7px; border-radius:50%; background:var(--blue-l); display:block; }

/* 좌 인덱스 — 작성 단계 + 페이지 이동(둘 다 클릭 시 해당 위치로) */
.cf3-idx{ margin-top:16px; display:none; flex-direction:column; gap:0; }
.cf3-idx .gl{ font-size:11px; font-weight:600; letter-spacing:.09em; color:#6E86A8; padding:0 0 8px; }
.cf3-idx .gl.sp{ margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.1); }
.cf3-idx a{ display:flex; align-items:center; gap:14px; padding:4px 0; position:relative;
  transition:color var(--tbase), opacity var(--tbase); opacity:.5; color:#C3D2E8; word-break:keep-all; }
.cf3-idx a .n{ font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1; min-width:30px; }
.cf3-idx a .t{ font-size:14.5px; font-weight:500; }
.cf3-idx a::before{ content:''; position:absolute; left:-14px; top:50%; width:2px; height:0; transform:translateY(-50%);
  background:var(--blue-l); border-radius:2px; transition:height .45s var(--tfn); }
.cf3-idx a:hover{ opacity:.85; color:#fff; }
.cf3-idx a.on{ opacity:1; color:#fff; }
.cf3-idx a.on .n{ color:var(--blue-l); }
.cf3-idx a.on::before{ height:22px; }
/* 바로 가기 행 — 번호를 작게 (활성 시 색은 .on 규칙이 이기도록 특이도 유지) */
.cf3-idx a.sec .n{ min-width:30px; font-size:13px; color:#6E86A8; }
.cf3-idx a.sec.on .n{ color:var(--blue-l); }

/* 좌 하단 자료 다운로드 2종 (cf-2 .cf-dl 다크 이식)
   ★§4-2 (2026-08-01) 다운로드 2종을 아래로 내려 사업자정보와 '하단 그룹'을 이룬다.
   구 구조: .meta 만 margin-top:auto → 다운로드가 목차 바로 밑에 붙어 있었다.
   신 구조: 스페이서를 .cf3-dl 로 옮겨(margin-top:auto) 목차와 다운로드 사이를 벌리고,
           다운로드↔사업자정보는 고정 24px 만 띄워 붙지 않게 한다.
   padding-top 은 세로 여유가 없을 때(짧은 뷰포트) 목차와 닿지 않게 하는 최소 보장선. */
.cf3-dl{ margin-top:auto; padding-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:11px; list-style:none; padding-left:0; padding-right:0; padding-bottom:0; }
/* ★2026-08-07 — 두 카드의 높이를 같게. li 는 그리드가 늘려 주지만 그 안의 a 는
   자기 내용만큼만 커져서 89.1 vs 71.8 로 갈렸다(실측). li 를 flex 로 열어 a 를 채운다. */
.cf3-dl li{ margin:0; display:flex; }
.cf3-dl li > a{ flex:1 1 auto; }
.cf3-dl a{ position:relative; overflow:hidden; display:block; padding:13px 14px 14px; border-radius:16px; min-height:58px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055);
  transition:background .25s ease, border-color .25s ease, transform .45s var(--e4); }
.cf3-dl a:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.32); transform:translateY(-2px); }
.cf3-dl .nm{ display:block; font-size:14.5px; font-weight:600; line-height:1.42; color:#fff; letter-spacing:-.01em; }
.cf3-dl .fm{ display:block; margin-top:5px; padding-right:40px; font-size:11.5px; line-height:1.5; color:#8FA6C4; }
.cf3-dl .ic4{ position:absolute; right:11px; bottom:11px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.cf3-dl a:hover .ic4{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ★§4-2 스페이서를 .cf3-dl 로 넘겼으므로 meta 는 고정 간격(24px)만 갖는다 */
.cf3-lead .meta{ margin-top:24px; padding-top:0; font-size:12px; line-height:1.7; color:#7E93B5; }
.cf3-lead .meta a{ color:#B9C9E0; }
.cf3-lead .meta a:hover{ color:var(--blue-l); }

/* 앵커 이동 시 GNB에 가리지 않게 */
.cf3-step, #channels, #prep, #booking{ scroll-margin-top:calc(var(--cff-hh) + 28px); }

/* 우 — 원본 xl:w-[50%] border-l + gap-[60px]
   ★§4.1 우 패널 '끝점' = 햄버거 3선 우측 끝(--cff-R)

   ★★§4-1 원인 규명 (2026-08-01) — "03↔04 간격이 계속 반영되지 않는다"
   .cf3-form 의 flex `gap` 은 **직계 자식**에게만 걸린다. 그런데 01~04 스텝은
   `.cf3-form > .cf3-live > .cf3-step` 구조라, .cf3-form 의 자식은
   `.cf3-live` 와 `.cf3-sentbox` 둘뿐이다(게다가 sentbox 는 평소 display:none).
   즉 152px → 188px 로 올려온 값은 **어떤 스텝 사이에도 적용된 적이 없다.**
   실제 간격은 `#st2{margin:18px 0}` 뿐이어서 01↔02 = 02↔03 = 18px,
   03↔04 = 0px 였다. 03 이 길어 눈에 먼저 띈 것.
   → 간격 규칙을 스텝의 실제 부모인 `.cf3-live` 로 옮긴다(아래). */
/* ★★2026-08-04 §2 — 우 콘텐츠의 '상단 시작 위치'와 '좌 패널과의 간격'도 통일.
   구값: 상단 92px · 좌 --rpad(clamp 40~88px) → 폭에 따라 첫 글자 위치가 흔들렸다.
   신값: 상단 --panel-pad-t(72) · 좌 --panel-gap(76) = 네 화면 공통 기준선. */
.cf3-form{ padding:var(--panel-pad-t) var(--cff-R) 0 var(--panel-gap); display:flex; flex-direction:column; gap:0; }
/* ★§4-1 스텝 01~04 공통 간격 — 여기가 진짜 적용 지점.
   특정 한 줄 margin 이 아니라 섹션 단위 공통 규칙이라 01↔02·02↔03·03↔04 가 전부 같다. */
.cf3-live{ display:flex; flex-direction:column; gap:var(--cff-stepgap); }
/* 구 `#st2{margin:18px 0}` 삭제 — 공통 gap 이 02 주변까지 균등하게 벌려준다
   (남겨두면 01↔02·02↔03 만 18px 더 넓어져 §4-1 의 "동일한 규칙" 을 깬다) */

/* ═══ 스텝 블록 ═══ */
.cf3-step{ display:flex; flex-direction:column; }
.cf3-step .no{ font-size:20px; font-weight:600; line-height:1.5; letter-spacing:-.02em; color:var(--blue); }
.cf3-step .h{ margin-top:11px; font-size:clamp(19px,1.7vw,24px); font-weight:600; line-height:1.5; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
.cf3-step .d{ margin-top:13px; font-size:15px; line-height:1.75; color:var(--g500); word-break:keep-all; }
.cf3-body{ margin-top:38px; display:flex; flex-direction:column; gap:22px; }
.cf3-lb{ font-size:13.5px; font-weight:600; color:var(--g700); }
.cf3-lb .req{ color:var(--blue); margin-left:3px; }
.cf3-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ═══ 인풋 — 원본 플로팅 라벨(duration-200) 모션 유지,
       규약 §4에 따라 언더라인 대신 4면이 닫힌 박스 ═══ */
.cf3-f{ position:relative; }
.cf3-f > input, .cf3-f > select, .cf3-f > textarea{
  width:100%; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  font-size:16px; font-weight:500; line-height:1.5; padding:25px 16px 9px;
  transition:border-color var(--tdur) var(--tfn), background-color var(--tdur) var(--tfn), box-shadow var(--tdur) var(--tfn);
  -webkit-appearance:none; appearance:none;
}
.cf3-f > textarea{ padding:16px; height:190px; resize:none; line-height:1.6; }
.cf3-f > input:focus, .cf3-f > select:focus, .cf3-f > textarea:focus{
  outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint);
}
/* ★§4.3 플레이스홀더 세로 정렬
   구 코드는 쉬는 위치를 top:18px 로 고정해 라벨 line-height 에 따라
   입력창 중심에서 2px 안팎 위로 떠 있었다.
   → top:50% + translateY(-50%) 로 line-height 와 무관하게 정확히 중앙. */
.cf3-f > label{
  position:absolute; left:16px; top:9px; pointer-events:none;
  font-size:12.5px; font-weight:500; line-height:1.25; color:var(--g500);
  transition:top .2s var(--tfn), font-size .2s var(--tfn), color .2s var(--tfn), transform .2s var(--tfn);
}
.cf3-f > input:placeholder-shown:not(:focus) + label,
.cf3-f.cff-sel:not(.cff-has) > label{ top:50%; transform:translateY(-50%); font-size:16.5px; }
.cf3-f > input:focus + label, .cf3-f > select:focus + label, .cf3-f > textarea:focus + label,
.cf3-f.cff-sel.cff-open > label{ color:var(--blue); }
.cf3-f > select{ padding-right:44px; cursor:pointer; }
.cf3-f .chev{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  pointer-events:none; color:var(--g500); transition:transform .3s var(--tfn), color .2s var(--tfn); }
.cf3-f > select:focus ~ .chev{ color:var(--blue); }
/* ★§4.4 펼치면 아래 화살표 → 위 화살표 (같은 transform 축에서 회전만 더한다) */
.cf3-f.cff-open .chev{ transform:translateY(-50%) rotate(180deg); color:var(--blue); }
.cf3-f.err > input, .cf3-f.err > select, .cf3-f.err > textarea{ border-color:#D9435E; background:#FEF5F6; }
.cf3-f.err > label{ color:#D9435E; }
.cf3-msg{ margin-top:6px; font-size:12.5px; color:#D9435E; display:none; }
.cf3-f.err + .cf3-msg, .cf3-msg.on{ display:block; }

/* 연락처 3분할 — 원본 phone1/2/3 */
.cf3-tel{ display:flex; align-items:center; gap:8px; }
.cf3-tel input{ width:100%; text-align:center; background:var(--bg2); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; font-size:16px; font-weight:500; padding:14px 8px;
  transition:border-color var(--tdur) var(--tfn), background-color var(--tdur) var(--tfn), box-shadow var(--tdur) var(--tfn); }
.cf3-tel input:focus{ outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint); }
.cf3-tel input::placeholder{ color:var(--g500); }
.cf3-tel .dash{ color:var(--g500); flex-shrink:0; }
.cf3-tel.err input{ border-color:#D9435E; background:#FEF5F6; }

/* ═══ 체크박스 — 원본 appearance-none 24px 사각 + checked 악센트 ═══ */
.cf3-ck{ display:flex; align-items:center; gap:12px; }
.cf3-ck .bx{ position:relative; display:flex; flex-shrink:0; }
.cf3-ck input{ appearance:none; -webkit-appearance:none; cursor:pointer; margin:0;
  width:24px; height:24px; border-radius:6px; background:var(--bg2); border:1px solid var(--line);
  transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn); }
.cf3-ck input:checked{ background:var(--blue); border-color:var(--blue); }
.cf3-ck input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--tint); }
.cf3-ck .bx svg{ position:absolute; top:0; left:0; width:24px; height:24px; pointer-events:none;
  opacity:0; color:#fff; }
.cf3-ck input:checked + svg{ opacity:1; }
.cf3-ck label{ font-size:15.5px; font-weight:500; color:var(--ink); cursor:pointer; }
.cf3-ck.err label{ color:#D9435E; }

/* 선택 박스(유형·영역·상담방식) — 4면이 닫힌 완전한 박스 */
.cf3-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf3-opt{ display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:15px 16px;
  transition:border-color var(--tdur) var(--tfn), background-color var(--tdur) var(--tfn); }
.cf3-opt:hover{ border-color:var(--tint-b); background:#fff; }
.cf3-opt .bx{ position:relative; display:flex; flex-shrink:0; }
.cf3-opt input{ appearance:none; -webkit-appearance:none; cursor:pointer; margin:0;
  width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid var(--line);
  transition:background-color var(--tdur) var(--tfn), border-color var(--tdur) var(--tfn); }
.cf3-opt input[type=radio]{ border-radius:50%; }
.cf3-opt input:checked{ background:var(--blue); border-color:var(--blue); }
.cf3-opt input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--tint); }
/* ★2026-08-07 — 체크 아이콘이 22px 원과 같은 크기라 테두리에 딱 붙어 있었다.
   14px 로 줄이고 (22-14)/2 = 4px 씩 밀어 원 안에서 가운데. */
.cf3-opt .bx svg{ position:absolute; top:4px; left:4px; width:14px; height:14px; pointer-events:none; opacity:0; color:#fff; }
.cf3-opt input:checked + svg{ opacity:1; }
.cf3-opt .tx{ min-width:0; display:block; }
.cf3-opt .nm2{ display:block; font-size:15px; font-weight:600; color:var(--ink); line-height:1.45; }
.cf3-opt .ds2{ display:block; margin-top:3px; font-size:12.5px; color:var(--g500); line-height:1.5; }
.cf3-opt.sel{ border-color:var(--blue); background:var(--tint); }
.cf3-opts.err .cf3-opt{ border-color:#E9A9B4; }

/* ═══ '?' 안내 버튼 — 원본 transition-colors hover ═══ */
.cf3-q{ position:relative; display:inline-flex; }
.cf3-q > button{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer;
  font-size:12px; font-weight:600; line-height:1; color:var(--g500);
  transition:border-color var(--tbase), color var(--tbase); }
.cf3-q > button:hover, .cf3-q > button:focus-visible{ border-color:var(--blue); color:var(--blue); outline:none; }
.cf3-q .tip{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:280px; max-width:70vw;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; z-index:30;
  box-shadow:0 12px 28px rgba(10,28,62,.14); font-size:13px; line-height:1.65; color:var(--g700); display:none; }
.cf3-q.open .tip{ display:block; }

/* ═══ 02 파일 첨부 ═══ */
.cf3-filebar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cf3-pick{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  height:50px; padding:0 32px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-size:15.5px; font-weight:600; transition:background-color var(--tbase), border-color var(--tbase); }
.cf3-pick:hover{ background:var(--blue-d); border-color:var(--blue-d); }
.cf3-pick.full{ background:var(--bg2); border-color:var(--line); color:var(--g500); pointer-events:none; }
.cf3-hint{ font-size:13px; color:var(--g500); }
/* ★2026-08-07 사장님 지시 — 위닝피피티 상담문의처럼 첨부 하단에 각주 캡션.
   원본(winningppt.com/contact) = "※ 여러 파일은 ZIP으로 압축해…" 2줄 구조를 그대로 따르되
   문구만 박수칠때퇴근 접수 흐름(대용량 → hello@clapleave.com)에 맞춰 바꿨다. */
.cf3-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px; }
.cf3-note p{ position:relative; padding-left:17px; font-size:13px; line-height:1.72; color:var(--g500); word-break:keep-all; }
.cf3-note p::before{ content:'※'; position:absolute; left:0; top:0; color:var(--g500); }
.cf3-note b{ font-weight:600; color:var(--g700); }
.cf3-note a{ font-weight:600; color:var(--blue-d); border-bottom:1px solid #C7DBFF;
  transition:border-color var(--tbase), color var(--tbase); }
.cf3-note a:hover{ color:var(--blue); border-bottom-color:var(--blue); }
.cf3-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.cf3-chip{ position:relative; overflow:hidden; display:flex; align-items:center; gap:8px;
  height:44px; padding-left:14px; padding-right:8px; max-width:100%;
  border-radius:999px; border:1px solid var(--line); background:var(--bg2); }
.cf3-chip .fill{ position:absolute; inset:0 auto 0 0; background:var(--tint); pointer-events:none;
  transition:width .2s var(--tfn); }           /* 원본 transition-[width] duration-200 */
.cf3-chip .nm3{ position:relative; font-size:13px; font-weight:500; color:var(--ink);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf3-chip .st{ position:relative; font-size:12px; color:var(--g500); white-space:nowrap; }
.cf3-chip .x{ position:relative; width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:50%; cursor:pointer; color:var(--g500);
  transition:background-color var(--tbase), color var(--tbase); }
.cf3-chip .x:hover{ background:var(--line); color:var(--ink); }
.cf3-chip.uploaded .fill{ background:var(--tint); }
.cf3-chip.err{ background:#FEF5F6; border-color:#E9A9B4; }
.cf3-chip.err .st{ color:#D9435E; }
@media(min-width:640px){ .cf3-chip .nm3{ max-width:220px; } }

/* ═══ 동의 · 제출 ═══ */
.cf3-agree{ display:flex; flex-direction:column; gap:18px; }
.cf3-agree .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cf3-submit{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:64px; }
.cf3-sla2{ font-size:13.5px; color:var(--g500); }
.cf3-send{ display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  border:0; border-radius:999px; background:var(--blue); color:#fff;
  padding:16px 34px; font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  transition:background-color var(--tbase), transform .45s var(--ease), box-shadow .45s var(--ease); }
.cf3-send:hover{ background:var(--blue-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(46,111,242,.24); }
.cf3-send:disabled, .cf3-send.busy{ background:var(--g500); cursor:not-allowed; transform:none; box-shadow:none; }

/* 제출 완료 화면 (.sent) — 규약 §4 프론트 데모 */
.cf3-sentbox{ display:none; }
.cf3-wrapform.sent .cf3-live{ display:none; }
.cf3-wrapform.sent .cf3-sentbox{ display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  border:1px solid var(--tint-b); border-radius:18px; background:var(--tint); padding:44px 36px; margin-bottom:64px;
  animation:cf3-sentin .6s cubic-bezier(.34,1.56,.64,1); }   /* 원본 --transition-spring 값 */
@keyframes cf3-sentin{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.cf3-sentbox .ic2{ width:52px; height:52px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.cf3-sentbox h2{ font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.cf3-sentbox p{ font-size:15px; line-height:1.75; color:var(--g700); }
.cf3-sentbox .again{ margin-top:6px; border:1px solid var(--tint-b); background:#fff; color:var(--blue-d);
  border-radius:999px; padding:11px 22px; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color var(--tbase), background-color var(--tbase); }
.cf3-sentbox .again:hover{ border-color:var(--blue); background:var(--tint); }

/* ═══ 우측 플로팅 고정 버튼 ═══ */
.cf3-float{ position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px; }
.cf3-float a{ width:56px; height:56px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  box-shadow:0 10px 24px rgba(10,28,62,.12);
  transition:transform .45s var(--ease), background-color var(--tbase), color var(--tbase), border-color var(--tbase); }
.cf3-float a:hover{ transform:translateY(-3px); background:var(--blue); border-color:var(--blue); color:#fff; }
.cf3-float a.ka{ background:var(--blue); border-color:var(--blue); color:#fff; animation:cf3-pulse 2s ease-in-out infinite; }
.cf3-float a.ka:hover{ background:var(--blue-d); border-color:var(--blue-d); }
/* 원본 ctaPulse 이식(악센트만 치환) */
@keyframes cf3-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(46,111,242,.4); } 50%{ box-shadow:0 0 0 20px rgba(46,111,242,0); } }
.cf3-float .lb2{ display:none; }

/* 하단 고정 바 (<900px) — 원본 md:hidden fixed bottom-0 */
.cf3-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px 14px; }
.cf3-bar .in2{ display:flex; align-items:center; gap:8px; }
.cf3-bar .ico{ width:48px; height:48px; flex-shrink:0; border-radius:999px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink); }
.cf3-bar .ico.ka{ background:var(--blue); border-color:var(--blue); color:#fff; }
.cf3-bar .go2{ flex:1; height:48px; border:0; border-radius:999px; background:var(--blue); color:#fff;
  font-size:15.5px; font-weight:600; cursor:pointer; transition:background-color var(--tbase); }
.cf3-bar .go2:hover{ background:var(--blue-d); }
.cf3-bar .go2:disabled{ background:var(--g500); cursor:not-allowed; }

/* ═══ 부가 섹션 3종 ═══ */
.cf3-sec{ padding:120px 0; }
.cf3-sec.alt{ background:var(--bg2); border-top:1px solid var(--line); }
.sec-head{ text-align:left; margin:0 0 48px; padding-left:var(--rpad); padding-right:var(--cff-R); }
.sec-pill{ display:inline-block; font-size:14px; font-weight:600; color:var(--blue); background:var(--tint);
  border:1px solid var(--tint-b); border-radius:999px; padding:8px 18px; }
.sec-title{ margin-top:20px; font-size:clamp(34px,3vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1.3; color:var(--ink); }
.sec-title .em{ color:var(--blue); }
.sec-sub{ margin-top:16px; font-size:17.5px; line-height:1.72; color:var(--g700); }
.cf3-wrapc{ padding-left:var(--rpad); padding-right:var(--cff-R); }
.cf3-box{ background:#fff; border:1px solid var(--line); border-radius:16px;
  transition:transform .55s var(--ease), border-color .35s; }
.cf3-box:hover{ transform:translateY(-6px); border-color:var(--tint-b); }
/* ── 문의 방법 = 가로 3단 분할(피드백 8) ── */
.cf3-chn{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.cf3-chn .cc2{ position:relative; height:100%; padding:26px 22px 20px;
  display:flex; flex-direction:column; align-items:flex-start; word-break:keep-all; }
.cf3-chn .ict{ width:50px; height:50px; border-radius:15px; background:var(--tint);
  display:flex; align-items:center; justify-content:center; }
.cf3-chn .ict svg{ width:24px; height:24px; }
.cf3-chn .no2{ margin-top:16px; font-size:11.5px; font-weight:600; letter-spacing:.1em; color:var(--blue); }
.cf3-chn h3{ margin-top:6px; font-size:clamp(15.5px,1.3vw,18px); font-weight:600; line-height:1.4; color:var(--ink); }
.cf3-chn p{ margin-top:8px; font-size:13px; line-height:1.65; color:var(--g700); }
/* ★§4.6 액션 텍스트 밑줄(.ux-ul) + 화살표 1~2회(.ux-ar) 중심의 섬세한 호버.
   카드 전체 확대는 하지 않는다(리프트 -6px → -2px) */
.cf3-chn .ar3{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--g500); transition:color .25s var(--tfn); }
.cf3-chn .ar3 svg{ width:15px; height:15px; }
.cf3-chn .cc2:hover .ar3, .cf3-chn .cc2.ux-hv .ar3{ color:var(--blue); }
.cf3-chn .cf3-box:hover{ transform:translateY(-2px); }
.cf3-chn .ict{ transition:background-color .3s var(--tfn), transform .45s var(--e4); }
.cf3-chn .cc2:hover .ict, .cf3-chn .cc2.ux-hv .ict{ background:var(--tint-b); transform:translateY(-3px); }

/* ── 상담 전 준비 = 가로 2단 분할(피드백 9) ── */
.cf3-prep{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.cf3-prep .pc{ height:100%; padding:26px 26px 22px; display:flex; flex-direction:column; word-break:keep-all; }
.cf3-prep h3{ font-size:16.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; }
.cf3-prep h3 .ic3{ width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--tint);
  display:flex; align-items:center; justify-content:center; }
.cf3-prep h3 .ic3 svg{ width:18px; height:18px; }
.cf3-prep ul{ margin:16px 0 0; padding:0; list-style:none; }
.cf3-prep li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--g700); line-height:1.65; margin-top:9px; }
.cf3-prep li:first-child{ margin-top:0; }
.cf3-prep li .c2{ flex-shrink:0; width:16px; text-align:center; color:var(--blue); font-weight:600; line-height:1.65; }
.cf3-prep .nt{ margin-top:auto; padding-top:16px; font-size:12.5px; color:var(--g500); }
.cf3-book .bx2{ border:1.5px dashed var(--tint-b); border-radius:16px; background:var(--tint);
  padding:38px 30px; text-align:center; }
.cf3-book h3{ font-size:19px; font-weight:600; color:var(--blue-d); }
.cf3-book p{ margin-top:8px; font-size:14px; color:var(--blue-d); opacity:.8; }

/* ═══ 푸터 — ★§4.1 지시로 삭제(별도 독립 페이지, 폼 완료 영역까지만)
   법인·사업자 정보는 좌 패널 meta 로 옮겼다 ═══ */
.cf3-lead .meta b{ display:block; font-weight:500; font-size:11.5px; color:#93A9C8; margin-top:5px; }

/* ═══ 반응형 (1280 / 900 / 390) ═══ */
@media(min-width:1240px){ .cf3-idx{ display:flex; } }
/* <1180 : 고정 패널 해제 → 상단 다크 블록으로 흐름 복귀 */
@media(max-width:1239px){
  /* ★2차 §2 — 눕는 방식·여백도 견적계산기와 동일 규칙(상 72 / 하 --section-space-md) */
  .cf3-lead{ position:static; width:auto; height:auto;
    padding:var(--panel-pad-t) var(--cff-R) var(--section-space-md) var(--cff-LL); }
  /* ★§9 (2026-08-01 실측) 좌 패널이 문서 흐름으로 돌아오는 구간에서
     .glow(right:-90px)가 문서 폭을 90px 넘겨 가로 스크롤을 만들고 있었다(구 결함).
     390px 실측: scrollWidth 480 vs clientWidth 390 → glow 를 패널 안쪽으로 넣어 0 으로. */
  .cf3-lead .glow{ right:0; top:-40px; }
  .cf3-idx{ display:flex; }
  .cf3-form, .cf3-sec{ margin-left:0; }
  /* ★§4-1 스텝 간격은 .cf3-live 가 담당 — .cf3-form 의 gap 은 여기서도 무의미하다 */
  /* ★2026-08-04 §2 — 눕는 구간의 상단 여백·좌측선도 네 화면 공통 규칙으로
     (구값 상 64px · 좌 --cff-L(32) → 좌 패널 16 과 어긋났다) */
  .cf3-form{ max-width:900px; margin:0 auto; width:100%;
    padding:var(--section-space-md) var(--cff-R) 0 var(--cff-LL); gap:0; }
  :root{ --cff-stepgap:104px; }
  .cf3-wrapc, .sec-head{ max-width:900px; margin-left:auto; margin-right:auto;
    padding-left:var(--cff-L); padding-right:var(--cff-R); }
  .cf3-sec{ padding:88px 0; }
  .cf3-dl{ max-width:520px; }
}
/* 우 컬럼이 좁아지는 구간 — 3열 카드가 깨지지 않게 압축 */
@media(min-width:1240px) and (max-width:1439px){
  .cf3-chn{ gap:12px; }
  .cf3-chn .cc2{ padding:22px 17px 17px; }
  .cf3-chn .ict{ width:44px; height:44px; border-radius:13px; }
  .cf3-chn p{ font-size:12.5px; }
  .cf3-prep{ gap:12px; }
  .cf3-prep .pc{ padding:22px 20px 18px; }
}
/* 플로팅 버튼과 부가 섹션 카드가 겹치지 않게 */
@media(min-width:900px) and (max-width:1250px){
  .cf3-wrapc{ padding-left:92px; padding-right:92px; }
}
@media(min-width:1240px) and (max-width:1250px){
  .cf3-wrapc{ padding-left:var(--rpad); padding-right:var(--cff-R); }
}
/* 플로팅 버튼이 우측 기준선(--cff-R) 안쪽 콘텐츠를 덜 가리게 */
@media(min-width:1240px) and (max-width:1560px){
  .cf3-float{ right:8px; }
  .cf3-float a{ width:48px; height:48px; }
}
@media(max-width:899px){
  .cf3-float{ display:none; }
  .cf3-bar{ display:block; }
  body{ padding-bottom:78px; }
  .cf3-submit{ display:none; }
  .cf3-sec{ padding:76px 0; }
  .cf3-chn{ grid-template-columns:1fr; }
  .cf3-prep{ grid-template-columns:1fr; }
  .cf3-wrapform.sent .cf3-sentbox{ margin-bottom:40px; }
}
@media(max-width:600px){
  .cf3-dl{ grid-template-columns:1fr; }
  .cf3-dl a{ min-height:0; }
  .cf3-opts{ grid-template-columns:1fr; }
  .cf3-grid2{ grid-template-columns:1fr; }
  /* ★2026-08-04 §2 — 600px 이하도 같은 토큰을 본다(구값 44/8 · 36/32) */
  .cf3-lead{ padding:var(--panel-pad-t) var(--cff-R) 8px var(--cff-LL); }
  .cf3-form{ padding:var(--section-space-md) var(--cff-R) 0 var(--cff-LL); gap:0; }
  /* ★§4-1 모바일 스텝 간격 */
  :root{ --cff-stepgap:84px; }
  .cff-br{ display:none; }
}

/* ══════════════════════════════════════════════════════════
   [cff-] 사장님 피드백 9건 반영분 — 새 클래스는 전부 cff- 접두사
   ══════════════════════════════════════════════════════════ */

/* ── 6. 항목 타이틀 아이소메트릭 아이콘 ── */
.cf3-opt .cff-ic{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }
#cf3Types .cff-ic{ width:42px; height:42px; }
#cf3Types .cff-ic svg{ width:42px; height:42px; }
#cf3Areas .cff-ic{ width:26px; height:26px; }
#cf3Areas .cff-ic svg{ width:26px; height:26px; }
.cf3-opt .cff-ic svg{ transition:transform .35s var(--e4); }
.cf3-opt:hover .cff-ic svg{ transform:translateY(-2px); }
.cf3-opt.sel .cff-ic svg{ transform:translateY(-1px); }
#cf3Types .cf3-opt{ gap:11px; padding:14px 15px; }
#cf3Areas .cf3-opt{ gap:10px; }
#cf3Areas .cf3-opt .nm2{ font-size:14.5px; }

/* ── 5. 자료 다운로드 카드 모션 ── */
.cf3-dl .cff-pb{ position:absolute; left:0; right:0; bottom:0; height:3px; opacity:0;
  background:rgba(255,255,255,.09); pointer-events:none; transition:opacity .2s ease; }
.cf3-dl .cff-pb i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-l)); }
.cf3-dl a.cff-run .cff-pb{ opacity:1; }
.cf3-dl a.cff-run .cff-pb i{ width:100%; transition:width .9s cubic-bezier(.4,0,.2,1); }
/* 호버 = 화살표가 아래로 1~2회만 움직인다
   ★§7 위배 시정 — 구 cff-bob(infinite)을 걷어내고 공통 .ux-ar.ux-ar-y 로 교체 */
.cf3-dl .cff-arw{ display:inline-flex; }
/* 클릭 = 아래로 빨려 들어갔다 위에서 되돌아옴 */
@keyframes cff-suck{ 0%{ transform:translateY(0); opacity:1; } 46%{ transform:translateY(11px); opacity:0; }
  47%{ transform:translateY(-11px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
.cf3-dl a.cff-run .cff-arw{ animation:cff-suck .9s var(--tfn); }
.cf3-dl .cff-ok{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); pointer-events:none;
  transition:opacity .2s var(--tfn), transform .4s cubic-bezier(.34,1.56,.64,1); }
.cf3-dl a.cff-done .cff-arw{ opacity:0; }
.cf3-dl a.cff-done .cff-ok{ opacity:1; transform:none; }
.cf3-dl a.cff-done .ic4{ background:var(--blue); border-color:var(--blue); }
.cf3-dl a.cff-done{ border-color:rgba(77,162,255,.5); background:rgba(77,162,255,.1); }

/* ══ 4. 좌 패널 목차 5안 ══════════════════════════════════ */
/* A1 리스트 강조형 — 번호가 네모 배지 */
.cff-v1 a{ padding:3px 0; }
.cff-v1 a .n{ min-width:0; width:27px; height:27px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:12.5px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:#C3D2E8;
  transition:background-color .3s var(--tfn), border-color .3s var(--tfn), color .3s var(--tfn); }
.cff-v1 a.sec .n{ min-width:0; font-size:12.5px; color:#8FA6C4; }
.cff-v1 a.on .n, .cff-v1 a.sec.on .n{ background:var(--blue); border-color:var(--blue); color:#fff; }
.cff-v1 a .t{ font-size:14.5px; }

/* A2 진행 상태형 — 게이지 + 단계별 체크 */
.cff-pgw{ margin-bottom:14px; }
.cff-pgb{ display:block; height:5px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.cff-pgb i{ display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue-l)); transition:width .55s var(--e4); }
.cff-pgt{ display:flex; justify-content:space-between; margin-top:7px; font-size:11.5px; color:#8FA6C4; }
.cff-pgt b{ color:var(--blue-l); font-weight:600; }
.cff-v2 a{ padding:3px 0; gap:11px; }
.cff-v2 a .ck{ flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
  transition:background-color .3s var(--tfn), border-color .3s var(--tfn); }
.cff-v2 a .ck svg{ width:12px; height:12px; color:#fff; opacity:0; transition:opacity .25s var(--tfn); }
.cff-v2 a.cff-fill .ck{ background:var(--blue); border-color:var(--blue); }
.cff-v2 a.cff-fill .ck svg{ opacity:1; }
.cff-v2 a .t{ flex:1; font-size:14px; }
.cff-v2 a .pc2{ font-size:11.5px; color:#8FA6C4; font-variant-numeric:tabular-nums; }
.cff-v2 a.on .pc2{ color:var(--blue-l); }
.cff-v2 a.sec .n{ min-width:26px; font-size:12.5px; }

/* A3 아코디언형 — 활성 단계만 하위 항목 펼침 */
.cff-v3 a{ padding:3px 0; }
.cff-v3 a .n{ min-width:26px; font-size:14px; }
.cff-v3 a .cv{ margin-left:auto; width:13px; height:13px; color:#6E86A8;
  transition:transform .35s var(--tfn), color .3s var(--tfn); }
.cff-v3 a.on .cv{ transform:rotate(180deg); color:var(--blue-l); }
.cff-v3 .cff-sub{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .4s var(--tfn), opacity .3s var(--tfn); }
.cff-v3 .cff-ac.cff-open .cff-sub{ grid-template-rows:1fr; opacity:1; }
.cff-v3 .cff-sub > span{ overflow:hidden; display:block; }
.cff-v3 .cff-sub em{ display:block; font-style:normal; font-size:12.5px; line-height:1.5; color:#8FA6C4;
  padding:1.5px 0 1.5px 40px; position:relative; }
.cff-v3 .cff-sub em::before{ content:''; position:absolute; left:29px; top:10px; width:5px; height:1px; background:#546C8C; }
.cff-v3 .cff-ac.cff-open{ padding-bottom:3px; }

/* A4 컴팩트 2열 그리드형 */
.cff-g4{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cff-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cff-v4 .cff-g4 a, .cff-v4 .cff-g3 a{ display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045); opacity:.62;
  transition:background-color .3s var(--tfn), border-color .3s var(--tfn), opacity .3s var(--tfn); }
.cff-v4 .cff-g4 a .n{ min-width:0; font-size:12px; color:#8FA6C4; letter-spacing:.06em; }
.cff-v4 .cff-g3 a .n{ min-width:0; font-size:11px; color:#8FA6C4; letter-spacing:.06em; }
.cff-v4 .cff-g4 a .t{ font-size:14px; }
.cff-v4 .cff-g3 a .t{ font-size:12.5px; }
.cff-v4 a::before{ display:none; }
.cff-v4 a:hover{ opacity:.9; background:rgba(255,255,255,.09); }
.cff-v4 a.on{ opacity:1; background:rgba(46,111,242,.24); border-color:rgba(77,162,255,.62); }
.cff-v4 a.on .n, .cff-v4 a.sec.on .n{ color:var(--blue-l); }

/* A5 세로 도트 레일형 */
.cff-v5 .cff-rail{ position:relative; padding-left:22px; }
.cff-v5 .cff-rail::before{ content:''; position:absolute; left:5px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.22),rgba(255,255,255,.05)); }
.cff-v5 a{ padding:5px 0; gap:10px; }
.cff-v5 a::before{ display:none; }
.cff-v5 a .dot{ position:absolute; left:-22px; top:50%; width:11px; height:11px; margin-top:-5.5px;
  border-radius:50%; border:1px solid rgba(255,255,255,.3); background:#0C1D34;
  transition:background-color .3s var(--tfn), border-color .3s var(--tfn), transform .35s var(--e4); }
.cff-v5 a.on .dot{ background:var(--blue-l); border-color:var(--blue-l); transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(77,162,255,.18); }
.cff-v5 a .t{ font-size:14.5px; }
.cff-v5 a .n{ min-width:0; margin-left:auto; font-size:11.5px; color:#6E86A8; letter-spacing:.06em; }
.cff-v5 a.sec .n{ min-width:0; font-size:11.5px; }
.cff-v5 .gl{ padding-bottom:6px; }

/* ── 시안 전환 패널(플로팅, 좌 패널을 가리지 않는 우하단) ── */
.cff-sw{ position:fixed; right:18px; bottom:18px; z-index:80; width:232px;
  font-size:13px; color:var(--ink); }
.cff-swt{ width:100%; display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px;
  box-shadow:0 10px 26px rgba(10,28,62,.16); font-size:12.5px; font-weight:600; color:var(--ink);
  transition:border-color var(--tbase), background-color var(--tbase); }
.cff-swt:hover{ border-color:var(--tint-b); }
.cff-swt .lb3{ color:var(--g500); font-weight:500; }
.cff-swt b{ margin-left:auto; color:var(--blue); font-weight:600; }
.cff-swt .cv2{ width:13px; height:13px; color:var(--g500); transition:transform .3s var(--tfn); }
.cff-sw.open .cff-swt .cv2{ transform:rotate(180deg); }
.cff-swb{ display:none; margin-bottom:9px; border:1px solid var(--line); background:#fff; border-radius:16px;
  padding:8px; box-shadow:0 16px 34px rgba(10,28,62,.18); }
.cff-sw.open .cff-swb{ display:block; animation:cff-swin .3s var(--e4); }
@keyframes cff-swin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.cff-swb button{ width:100%; display:flex; align-items:baseline; gap:8px; cursor:pointer; text-align:left;
  border:0; background:transparent; border-radius:11px; padding:9px 11px; color:var(--g700);
  font-size:13px; transition:background-color var(--tbase), color var(--tbase); }
.cff-swb button .k{ font-size:11.5px; font-weight:600; color:var(--blue); letter-spacing:.04em; }
.cff-swb button:hover{ background:var(--bg2); color:var(--ink); }
.cff-swb button.on{ background:var(--tint); color:var(--ink); font-weight:600; }
.cff-swb .hd{ padding:6px 11px 8px; font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--g500); }
@media(max-width:899px){ .cff-sw{ bottom:82px; right:12px; width:200px; } }

/* ══════════════════════════════════════════════════════════
   [2차] 사장님 UI/UX 수정요청 §1 · §4 · §7 반영분
   ══════════════════════════════════════════════════════════ */

/* ── §4.2 타이틀 이모지 — 친근하되 장난스럽지 않게(작게·기준선 정렬) ── */
.cff-emo{ display:inline-block; margin-right:9px; font-size:.86em; line-height:1;
  transform:translateY(-1px); opacity:.95; }
.cf3-step .h{ display:flex; align-items:baseline; }
.cf3-step .h .cff-emo{ flex-shrink:0; }
.sec-title .cff-emo{ font-size:.72em; margin-right:11px; }

/* ── §7 밑줄은 반드시 좌 → 우.
   ux-common 의 `.ux-ul:not(:hover)` 규칙은 '부모 호버'일 때 커서가 텍스트 위에
   없으면 transform-origin 을 right 로 남겨 우 → 좌로 그어진다.
   부모 호버 구간에서만 origin 을 left 로 되돌린다(빠져나갈 때는 다시 right → 우로 걷힘) */
[data-ux-hover]:hover .ux-ul::after,
[data-ux-hover].ux-hv .ux-ul::after{ transform-origin:left center; }

/* ── §4.4 커스텀 아코디언 드롭다운(예상 예산 · 희망 시작 시기 · 조직 규모 · 알게 된 경로)
      네이티브 select 는 값·검증용으로 DOM에 남기고 화면만 교체한다.
      높이 전환은 grid-template-rows 0fr↔1fr — 끊김 없이 이어진다 ── */
.cf3-f.cff-sel{ position:relative; z-index:1; }
.cf3-f.cff-sel.cff-open{ z-index:30; }
.cf3-f.cff-sel > select{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cff-selbtn{ display:block; width:100%; min-height:60px; text-align:left; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.5;
  background:var(--bg2); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:25px 44px 9px 16px;
  transition:border-color var(--tdur) var(--tfn), background-color var(--tdur) var(--tfn), box-shadow var(--tdur) var(--tfn); }
.cff-selbtn:hover{ border-color:var(--tint-b); }
.cff-selbtn:focus-visible,
.cf3-f.cff-sel.cff-open .cff-selbtn{ outline:none; background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint); }
.cff-selv{ display:block; min-height:24px; }
.cf3-f.cff-sel.err .cff-selbtn{ border-color:#D9435E; background:#FEF5F6; }
.cff-selp{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden;
  transition:grid-template-rows .34s var(--e4), opacity .22s var(--tfn), visibility 0s linear .34s; }
.cf3-f.cff-open .cff-selp{ grid-template-rows:1fr; opacity:1; visibility:visible;
  transition:grid-template-rows .34s var(--e4), opacity .2s var(--tfn), visibility 0s; }
.cff-selin{ overflow:hidden; }
.cff-sellist{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px;
  box-shadow:0 16px 34px rgba(10,28,62,.15); max-height:238px; overflow-y:auto; }
.cff-selo{ display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  border:0; background:transparent; border-radius:10px; padding:11px 13px;
  font-size:14.5px; font-weight:500; color:var(--g700);
  transition:background-color var(--tbase), color var(--tbase); }
.cff-selo:hover, .cff-selo:focus-visible{ outline:none; background:var(--bg2); color:var(--ink); }
.cff-selo.on{ background:var(--tint); color:var(--ink); font-weight:600; }

/* ── §4.1 A6 = A3 아코디언 + A5 도트 레일 결합(사장님 확정 기본값) ── */
.cff-v6 .cff-rail{ position:relative; padding-left:22px; }
.cff-v6 .cff-rail::before{ content:''; position:absolute; left:5px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.22),rgba(255,255,255,.05)); }
.cff-v6 .gl{ padding-bottom:6px; }
.cff-v6 a{ padding:3px 0; gap:9px; }
.cff-v6 a::before{ display:none; }
.cff-v6 a .dot{ position:absolute; left:-22px; top:50%; width:11px; height:11px; margin-top:-5.5px;
  border-radius:50%; border:1px solid rgba(255,255,255,.3); background:#0C1D34;
  transition:background-color .3s var(--tfn), border-color .3s var(--tfn), transform .35s var(--e4); }
.cff-v6 a.on .dot{ background:var(--blue-l); border-color:var(--blue-l); transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(77,162,255,.18); }
.cff-v6 a .n{ min-width:24px; font-size:12px; color:#6E86A8; letter-spacing:.06em; }
.cff-v6 a.on .n, .cff-v6 a.sec.on .n{ color:var(--blue-l); }
.cff-v6 a.sec .n{ min-width:24px; font-size:12px; }
.cff-v6 a .t{ font-size:14.5px; }
.cff-v6 a .cv{ margin-left:auto; width:13px; height:13px; color:#6E86A8;
  transition:transform .35s var(--tfn), color .3s var(--tfn); }
.cff-v6 a.on .cv{ transform:rotate(180deg); color:var(--blue-l); }
.cff-v6 .cff-sub{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .4s var(--tfn), opacity .3s var(--tfn); }
.cff-v6 .cff-ac.cff-open .cff-sub{ grid-template-rows:1fr; opacity:1; }
.cff-v6 .cff-sub > span{ overflow:hidden; display:block; }
.cff-v6 .cff-sub em{ display:block; font-style:normal; font-size:12.5px; line-height:1.5; color:#8FA6C4;
  padding:1.5px 0 1.5px 33px; position:relative; }
.cff-v6 .cff-sub em::before{ content:''; position:absolute; left:22px; top:10px; width:5px; height:1px; background:#546C8C; }
.cff-v6 .cff-ac.cff-open{ padding-bottom:4px; }

/* ── 전환 패널 = 헤더 3안 + 목차 6안 한 곳에 묶음 ── */
.cff-sw{ width:252px; }
/* ★위 규칙이 앞의 @media(max-width:899px) 를 덮으므로 모바일 폭은 여기서 다시 잡는다 */
@media(max-width:899px){ .cff-sw{ width:min(230px, calc(100vw - 24px)); } }
.cff-swt b + b{ margin-left:0; }
.cff-swt .dv{ color:var(--g500); font-weight:500; margin:0 3px; }
.cff-swb{ max-height:min(64vh,470px); overflow-y:auto; }
/* ★§4-3 헤더 3안 전환 칩(.cff-hdrow / .hd.sp2) CSS 삭제 — 마크업과 함께 제거됨 */

/* ── ★★§4-3·§7 헤더 제거 (2026-08-01 확정) — 페이지 쪽 보정 ──
   ux-common.css 의 `body.ux-hd0` 가 로고·GNB 메뉴·CTA·ghost·돌아가기를 전부 감추고
   바를 투명 + pointer-events:none 으로 만든 뒤 햄버거만 살린다.
   여기서는 **헤더가 비워둔 76px 자리를 회수**한다.
   --cff-hh 는 이 페이지의 '상단 헤더 높이' 단일 손잡이라,
     · body padding-top
     · 좌 고정 패널 top / height(=100vh - hh)
     · 앵커 scroll-margin-top
   세 곳이 한꺼번에 따라온다. 헤더가 없으므로 0. */
body.ux-hd0{ --cff-hh:0px; }
/* <1180 에선 좌 다크 패널이 문서 흐름 맨 위로 올라와 햄버거와 겹친다 →
   잉크색 3선이 네이비 위에서 안 보이므로 흰 선으로(navbar.css 의 mode-a 규칙과 동일한 방식).
   ⛔navbar.css 는 건드리지 않고 body 스코프로만 덮는다 */
@media(max-width:1239px){
  body.ux-hd0 .burger .ln{
    background-image:linear-gradient(90deg,var(--blue-l) 0 50%, #fff 50% 100%);
  }
}

/* ═══ ★reduced-motion 전역 가드 ═══ */
@media(prefers-reduced-motion:reduce){
  .cff-selp, .cff-v6 .cff-sub, .cff-v6 a .dot, .cff-v6 a .cv,
  .cf3-chn .ict, .cf3-f .chev{ transition:none !important; }
  .cf3-chn .cc2:hover .ict, .cf3-chn .cf3-box:hover{ transform:none; }
  .cf3-dl a:hover .cff-arw, .cf3-dl a.cff-run .cff-arw{ animation:none !important; }
  .cf3-dl a.cff-run .cff-pb i{ transition:none !important; }
  .cf3-dl .cff-ok, .cf3-opt .cff-ic svg, .cff-v3 .cff-sub, .cff-pgb i,
  .cff-v1 a .n, .cff-v2 a .ck, .cff-v5 a .dot, .cff-swt .cv2{ transition:none !important; }
  .cf3-opt:hover .cff-ic svg{ transform:none; }
  .cff-sw.open .cff-swb{ animation:none; }
}
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cf3-float a.ka{ animation:none; }
  .cf3-wrapform.sent .cf3-sentbox{ animation:none; }
  .cf3-lead, .cf3-lead > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cf3-dl a:hover{ transform:none; }
  .cf3-idx a, .cf3-idx a::before, .cf3-f > label, .cf3-f > input, .cf3-f > select, .cf3-f > textarea,
  .cf3-chip .fill, .cf3-send, .cf3-box, .cf3-float a, .cf3-chn .ar3{ transition:none !important; }
  .cf3-send:hover, .cf3-box:hover, .cf3-float a:hover{ transform:none; }
}

.rv{ opacity:1 !important; transform:none !important; }