/* funnel.css — 퍼널 탭 전용 스타일 (CR-25 분배 6번 · B2 선해제 범위)
   정본: 01_SPEC_funnel_tab.md §9 · 부록 A (가시성 기준 v12)

   규칙
    · 색·간격·폰트·radius 하드코딩 금지 → 1단계 토큰은 css/tokens.css를 상속한다. 여기서 재선언하지 않는다.
    · 이 파일이 새로 정의하는 토큰(--fnl-*)은 아래 :root 한 곳에만 둔다. :root 밖에는 색 리터럴을 쓰지 않는다.
    · components.css는 손대지 않는다(CR-23 공용 클래스 .metric-tile · .ib · .ts-chip · .pane-hd는 그쪽 소관).
    · 3D는 퍼널 설계도 SVG 한 곳의 예외다. 다른 카드·차트에 입체를 쓰지 않는다.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* 단계별 5색 — 색상환을 건너뛰며 배치해 인접 단계 구분 ΔE 27 확보(01_SPEC §3-2-0 · 검증 통과).
     밝은 채움 + 진한 글자 구성이라 11px 보조 문구까지 대비 6.2:1 이상이다. */
  --fnl-s0-side: #38BDF8;  --fnl-s0-cap: #7DD3FC;   /* ① 유입 */
  --fnl-s1-side: #F472B6;  --fnl-s1-cap: #F9A8D4;   /* ② 조회 */
  --fnl-s2-side: #10B981;  --fnl-s2-cap: #5EEAD4;   /* ③ 담기 */
  --fnl-s3-side: #A78BFA;  --fnl-s3-cap: #C4B5FD;   /* ④ 구매 */
  --fnl-s4-side: #F59E0B;  --fnl-s4-cap: #FCD34D;   /* ⑤ 가입 */
  /* 기본값(단계 클래스가 없을 때) */
  --fnl-side: #38BDF8;
  --fnl-cap: #7DD3FC;
  /* 밝은 채움 위에 얹는 진한 글자 — 라이트·다크 양쪽에서 같은 색이어야 대비가 유지된다(다크에서 덮어쓰지 않는다) */
  --fnl-ink-on: #1d1d1f;
  /* 기준 그룹이 달라 비율을 내지 않는 레일(①·⑤)의 회색 막대 */
  --fnl-rail-gray: #9aa3ae;
}

/* 탭 악센트 — #panel-overview·#panel-signup 관례 답습 (고객 여정이므로 --acc-customer 계열) */
#panel-funnel { --panel-acc: var(--acc-customer); }

/* ── 레이아웃 ───────────────────────────────────────────────────────────── */
.fnl-hero {
  display: grid;
  grid-template-columns: minmax(440px, 580px) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  overflow-x: clip;            /* hidden이 아니라 clip이어야 좌측 sticky가 깨지지 않는다 */
  /* ⚠️ 2026-09-30 사용자 피드백 추가 ④ — 위 병목 알럿(.interp)과 간격이 0px였다(실측).
     .interp에는 margin-bottom이 없고 이 블록에도 margin-top이 없어 두 줄이 맞붙어,
     알럿 한 줄 · 단계 선택 칩 한 줄 · 오른쪽 상세 헤더가 세 겹으로 붙어 보였다. */
  margin-top: var(--sp-5);
}
.fnl-main { position: sticky; top: var(--sp-3); }
@media (max-width: 1100px) {
  .fnl-hero { grid-template-columns: 1fr; }
  .fnl-main { position: static; }
}
.fnl-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ── 단계 선택 칩 (어포던스 1) ──────────────────────────────────────────── */
.stage-pick {
  display: flex; gap: var(--sp-2); row-gap: var(--sp-2); flex-wrap: wrap; align-items: center;
  /* 칩 줄 ↔ 아래 도형 간격을 sp-3 → sp-4로 벌리고, 세로 padding을 sp-2 → sp-3으로 올려
     오른쪽 상세 블록(.fnl-detail · padding sp-3)과 첫 줄 높이를 맞춘다 (2026-09-30 피드백 추가 ④). */
  margin-bottom: var(--sp-4); padding: var(--sp-3);
  background: var(--surface-sub); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.stage-pick .sp-l { font-size: var(--fs-caption); font-weight: 800; color: var(--ink-2); margin-right: var(--sp-1); }
.stage-pick .sp-hint { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); }
.sp-b {
  font: 700 var(--fs-caption)/1 var(--font); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 6px 11px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.sp-b:hover { border-color: var(--primary); }
.sp-b[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--surface); }

/* ── 3D 원뿔대 밴드 ─────────────────────────────────────────────────────── */
.fb { cursor: pointer; outline: none; }
.fb .side, .fb .cap-bot { fill: var(--fnl-side); }
.fb .cap-top { fill: var(--fnl-cap); }
.fb.s0 { --fnl-side: var(--fnl-s0-side); --fnl-cap: var(--fnl-s0-cap); }
.fb.s1 { --fnl-side: var(--fnl-s1-side); --fnl-cap: var(--fnl-s1-cap); }
.fb.s2 { --fnl-side: var(--fnl-s2-side); --fnl-cap: var(--fnl-s2-cap); }
.fb.s3 { --fnl-side: var(--fnl-s3-side); --fnl-cap: var(--fnl-s3-cap); }
.fb.s4 { --fnl-side: var(--fnl-s4-side); --fnl-cap: var(--fnl-s4-cap); }
.fb .cap-bot { filter: brightness(.80); }          /* 먼 면은 어둡게 — 겹치는 순서가 곧 입체감이다 */
.fb .shade { fill: url(#fnlShade); pointer-events: none; }
.fb .gloss { fill: url(#fnlGloss); pointer-events: none; }
.fb .hit { fill: transparent; }                    /* 어포던스 5 — 원뿔 바깥 여백까지 클릭 타깃 */
.fb > * { opacity: .55; transition: opacity .2s ease; }
.fb .hit { opacity: 1; }
.fb:hover > * { opacity: .82; }
.fb.on > * { opacity: 1; }
/* 선택 상태 = 외곽선 + 불투명도. scale·그림자 금지(tokens.css "hover만 elevation" 기조 · 정직성 규칙)
   ⚠️ 2026-09-30 사용자 피드백 추가 ① — 예전 규칙 2줄을 아래처럼 바꿨다.
    · `.fb.on { transform: translateX(4px) }` 제거: 글자는 별도 레이어(.fnl-lay)에 있어 함께 움직이지 않는다.
      즉 선택하면 도형만 오른쪽으로 4px 밀려 글자 왼쪽이 도형 밖으로 4px 더 밀려나 테두리가 글자를 덮었다.
      선택 표시는 외곽선 + 불투명도 100% + 칩 aria-selected 3중으로 이미 충분하다.
    · `.fb.on .side, .fb.on .cap-top { stroke }` → `.fb.on .sel`: 면에 직접 걸던 stroke를 도형 바깥
      실루엣(funnel_diagram.js _sel)으로 옮겼다. 안쪽 침범 0 + 윗 타원의 내부 호가 이름 줄을 관통하지 않는다. */
.fb .sel { fill: none; stroke: none; }
.fb.on .sel { stroke: var(--ink); stroke-width: 2; }
.fb:focus-visible .sel { stroke: var(--primary); stroke-width: 3; stroke-dasharray: 5 3; }
/* 다크에서는 미선택 밴드가 배경(거의 검정)과 섞여 어두워진다 → 밝은 채움 위 진한 글자의 대비가 떨어지므로 하한을 올린다 */
[data-theme="dark"] .fb > * { opacity: .74; }
[data-theme="dark"] .fb:hover > * { opacity: .9; }

/* 2패스 라벨 레이어 — 도형 위에 얹고 클릭은 도형으로 통과시킨다 */
.fnl-lay { pointer-events: none; }
.fb-nm { font: 800 18px var(--font); fill: var(--fnl-ink-on); }
.fb-v { font: 800 27px var(--font); fill: var(--fnl-ink-on); font-variant-numeric: tabular-nums; }
.fb-sub { font: 700 11.5px var(--font); fill: var(--fnl-ink-on); opacity: .72; font-variant-numeric: tabular-nums; }
/* 렌즈(기준) 배지 — 퍼널 자체 클래스. CR-23 공용 칩 클래스를 건드리지 않는다 */
.fnl-lens { font: 700 11.5px var(--font); fill: var(--fnl-ink-on); opacity: .62; }
.fnl-bdg-t + .fnl-lens, text.fnl-lens { letter-spacing: 0; }
.fb-ch { font: 800 16px var(--font); fill: var(--fnl-ink-on); opacity: .45; transition: opacity .18s ease; }  /* 어포던스 2 — 셰브론 */
.fb:hover ~ .fnl-lay .fb-ch, .fb-ch.on { opacity: .9; }
/* 어포던스 3(밴드마다 뜨는 '클릭하면 상세가 바뀝니다' 글자)은 2026-09-30에 제거했다 —
   그 자리가 전환율 배지 구간이라 겹쳤고 안내가 한 화면에 5번 중복이었다. 안내는 .stage-pick .sp-hint 하나로 통일. */

/* ── 비율 레일 — 평면 막대가 진짜 수치다(§3-2-1) ───────────────────────── */
.fnl-rail-t { fill: var(--border); }
.fnl-rail-v { fill: var(--fnl-side); }
.fnl-rail-v.s0 { fill: var(--fnl-s0-side); }
.fnl-rail-v.s1 { fill: var(--fnl-s1-side); }
.fnl-rail-v.s2 { fill: var(--fnl-s2-side); }
.fnl-rail-v.s3 { fill: var(--fnl-s3-side); }
.fnl-rail-v.s4 { fill: var(--fnl-s4-side); }
.fnl-rail-v.gray { fill: var(--fnl-rail-gray); }   /* 기준 그룹이 달라 비율을 내지 않는 밴드(①·⑤) */
.fnl-rail-lb { font: 800 12.5px var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.fnl-rail-cap { font: 700 11px var(--font); fill: var(--ink-3); }

/* ── 단계 사이 화살표 + 전환율 배지 ─────────────────────────────────────── */
.fnl-ar { stroke: var(--ink-3); stroke-width: 1.6; opacity: .5; }
.fnl-ar-h { fill: var(--ink-3); opacity: .5; }
.fnl-bdg { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.fnl-bdg.lens { fill: var(--surface-sub); }
.fnl-bdg.dual { fill: var(--primary-bg); stroke: var(--primary); }   /* 매체 리포트 · 앰플리튜드 병기 */
.fnl-bdg.warn { fill: var(--sig-yellow-bg); stroke: var(--sig-yellow); }
.fnl-bdg.bad { fill: var(--sig-red-bg); stroke: var(--sig-red); }
.fnl-bdg-t { font: 800 14.5px var(--font); fill: var(--ink); }
.fnl-bdg-t.warn { fill: var(--sig-yellow); }
.fnl-bdg-t.bad { fill: var(--sig-red); }
.fnl-bdg-s { font: 600 12px var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.fnl-bdg-s.warn { fill: var(--ink); font-weight: 700; }
.fnl-bdg-s.bad { fill: var(--ink); font-weight: 700; }
.fnl-lens.bdg { fill: var(--ink-3); opacity: 1; font-size: 10.5px; }   /* 배지 안 렌즈 문구만 회색 — 밴드 위 렌즈는 진한 글자 유지 */

/* ── 상단 유입 화살표 ───────────────────────────────────────────────────── */
.fnl-in-a { fill: none; stroke-linecap: round; opacity: .9; }
.fnl-in-a.o { stroke: var(--sig-green); }
.fnl-in-a.p { stroke: var(--primary); }
.fnl-in-h.o { fill: var(--sig-green); }
.fnl-in-h.p { fill: var(--primary); }
.fnl-in-nm { font: 800 14px var(--font); }
.fnl-in-nm.o { fill: var(--sig-green); }
.fnl-in-nm.p { fill: var(--primary); }
.fnl-in-v { font: 800 18px var(--font); fill: var(--ink); font-variant-numeric: tabular-nums; }
.fnl-in-sh { font: 700 12.5px var(--font); fill: var(--ink-3); }
.fnl-in-cap { font: 700 10.5px var(--font); fill: var(--ink-3); }

/* ── 범례 — 움직임을 끈 사용자에게도 정보가 남도록 항상 노출한다 ─────────── */
.fnl-legend {
  margin: var(--sp-2) 0 0; padding-left: var(--sp-4);
  font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.6;
}
.fnl-legend li { margin-bottom: 2px; }

/* ── 애니메이션 (§9-1) ──────────────────────────────────────────────────── */
.fb { animation: fnlBandIn .5s cubic-bezier(.22, 1, .36, 1) backwards; }
.fb:nth-of-type(1) { animation-delay: .02s; }
.fb:nth-of-type(2) { animation-delay: .09s; }
.fb:nth-of-type(3) { animation-delay: .16s; }
.fb:nth-of-type(4) { animation-delay: .23s; }
.fb:nth-of-type(5) { animation-delay: .30s; }
@keyframes fnlBandIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
/* 비율 막대가 0에서 자라는 연출 = "폭이 아니라 이 막대가 실제 비율"이라는 말 없는 설명 */
.fnl-rail-v { transform-box: fill-box; transform-origin: left center; animation: fnlGrow .9s .35s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes fnlGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 어포던스 4 — 최초 0.9초 후 미선택 밴드가 2회만 숨쉰다 */
.fb.nudge .side { animation: fnlNudge 1.5s ease-in-out 2; }
@keyframes fnlNudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  .fnl-hero *, .fnl-hero *::before, .fnl-hero *::after,
  .stage-pick *, .fnl-svg * { animation: none !important; transition: none !important; }
}

/* == 탭 배선분 (CR-25 분배 7번 · 2026-09-29) ===============================
   오른쪽 열(기준 설명 · 아직 못 보는 것)과 HTML 문맥의 렌즈 배지.
   .fnl-lens 는 SVG용(fill)이라 HTML 안에서는 색이 먹지 않는다 -> span 전용 규칙을 따로 둔다.
   .ph(보조 문구)는 공용 CSS에 없는 클래스라 이 탭 안으로만 한정한다 — 다른 탭에 영향 0. */
.fnl-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
#panel-funnel .ph { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); }

.fnl-lenstbl { font-size: var(--fs-caption); color: var(--ink-2); }
.fnl-lenstbl > b { display: block; margin-bottom: var(--sp-1); color: var(--ink); }
.fnl-lenstbl table { width: 100%; border-collapse: collapse; }
.fnl-lenstbl th, .fnl-lenstbl td {
  text-align: left; vertical-align: top; padding: 4px var(--sp-2);
  border-bottom: 1px solid var(--border); line-height: 1.5;
}
.fnl-lenstbl th { white-space: nowrap; font-weight: 700; }
.fnl-lenstbl tr:last-child th, .fnl-lenstbl tr:last-child td { border-bottom: 0; }
/* HTML 안의 렌즈 배지 — SVG 규칙(fill)과 달리 color/배경으로 그린다 */
.fnl-lenstbl span.fnl-lens, .fnl-dt-h span.fnl-lens, .fnl-dt-blkh span.fnl-lens {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--ink-2);
  background: var(--info-bg); border-radius: var(--radius-pill); padding: 2px 8px; opacity: 1;
}
#panel-funnel .interp ul, #panel-funnel .howto ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
#panel-funnel .interp li { margin-bottom: 2px; }
#panel-funnel code { font-size: .95em; }

/* == 단계 상세 블록 (CR-25 · 2026-09-30 사용자 피드백 ①) =====================
   도형/칩을 누르면 오른쪽 맨 위가 이 블록으로 바뀐다.
   CR-23 공용 클래스(.metric-tile · .ib · .ib-row · .ts-chip · .pane-hd)를 쓰지 않고
   .fnl-dt-* 자체 클래스만 쓴다 — components.css · 다른 탭 영향 0. */
.fnl-detail {
  border: 1px solid var(--border);
  border-left: 3px solid var(--panel-acc, var(--primary));
  border-radius: var(--radius-sm);
  background: var(--surface);
  /* 위쪽만 sp-4 — 왼쪽 칩 줄은 칩 버튼이 더 높아 라벨이 가운데로 내려가므로(실측 5.8px),
     같은 만큼 헤더를 내려 두 열의 '첫 글자 줄'을 맞춘다. 박스 상단선은 그대로 0px 일치 (피드백 추가 ④). */
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.fnl-dt-h {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-body); font-weight: 800; color: var(--ink); line-height: 1.35;
}
.fnl-dt-band { font-size: var(--fs-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* 해석 한 줄 — 숫자만 두지 않는다는 최상위 룰의 몫. 회색 보조가 아니라 읽히도록 살짝 강조한다. */
.fnl-dt-i {
  font-size: var(--fs-caption); line-height: 1.6; color: var(--ink);
  background: var(--surface-sub); border-radius: var(--radius-sm); padding: var(--sp-2);
}
.fnl-dt-read { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.5; }

.fnl-dt-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.fnl-dt-tbl th {
  text-align: center; font-weight: 800; color: var(--ink-2); white-space: nowrap;
  padding: 5px var(--sp-2); border-bottom: 1px solid var(--border);
}
.fnl-dt-tbl th:first-child { text-align: left; }
.fnl-dt-tbl td { padding: 4px var(--sp-2); border-bottom: 1px solid var(--border-soft); line-height: 1.45; }
.fnl-dt-tbl tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.fnl-dt-t { text-align: left; color: var(--ink); font-weight: 700; }
.fnl-dt-n { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 원본 키(예: promotion · Basic Skincare)를 한국어 라벨 아래에 작게 남긴다 — 시트와 맞춰보려면 원본이 필요하다 */
.fnl-dt-sub { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.fnl-dt-rest td { color: var(--ink-3); font-style: italic; }
.fnl-dt-tbl tfoot td { padding-top: 6px; font-weight: 800; color: var(--ink); }
/* 합계 행 아래 보조 행(지금은 ①의 '지면 외') — 합계와 같은 굵기로 보이면 또 하나의 합계로 읽힌다.
   굵기를 낮추고 윗선을 점선으로 둬서 '합계를 메우는 몫'임을 눈으로 구분한다. */
.fnl-dt-tbl tfoot tr.fnl-dt-etc td {
  font-weight: 700; color: var(--ink-2); padding-top: 4px;
  border-top: 1px dashed var(--border); border-bottom: 0;
}
.fnl-dt-note { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.55; }

/* 다크 — 토큰이 이미 반전되므로 새 토큰은 쓰지 않고 가로선 대비만 낮춘다 */
[data-theme="dark"] .fnl-dt-tbl td { border-bottom-color: var(--border-soft); }

/* == 상세 안의 덧붙임 블록 (⑤ 가입의 첫구매 비중 · 2026-09-30 피드백 추가 ③) ====
   같은 단계라도 소스 시트가 다르면 표를 따로 세운다. 점선 위 구분선으로 "여기서 소스가 바뀐다"를 알린다. */
.fnl-dt-blk {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.fnl-dt-blkh {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-small); font-weight: 800; color: var(--ink); line-height: 1.35;
}
/* 블록 헤더의 렌즈 배지는 위쪽 `.fnl-lenstbl span.fnl-lens, .fnl-dt-h …` 규칙에 셀렉터만 얹어 재사용한다 */
/* 첫구매자를 쪼갠 두 줄 — 들여쓰기로 '합치면 위 줄'임을 보인다 */
.fnl-dt-in .fnl-dt-t { padding-left: var(--sp-3); font-weight: 600; color: var(--ink-2); }
.fnl-dt-key td { background: var(--info-bg); }

/* == ②③④ 상세의 계층 토글 (카테고리 | 브랜드 | 상품 · 2026-10-01) ===========
   사용자 지시로 ②③④ 상세를 같은 3계층으로 통일했다. 세로로 쌓으면 한 단계가 30행이 되므로
   패널 안에서 한 번에 한 계층만 보여 준다.
   CR-23 공용 칩(.ts-chip 등)을 쓰지 않고 .fnl-tier-* 자체 클래스만 쓴다 — 다른 탭 영향 0.
   색·간격·radius는 전부 토큰(css/tokens.css)만 쓴다. */
.fnl-tier {
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  margin: var(--sp-1) 0 0;
}
.fnl-tier-btn {
  font: 700 var(--fs-caption)/1.2 var(--font);
  color: var(--ink-2); background: var(--surface-sub);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px var(--sp-3); cursor: pointer;
}
.fnl-tier-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.fnl-tier-btn.on {
  color: var(--primary); background: var(--primary-bg);
  border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}
.fnl-tier-btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }
/* 토글 옆 한 줄 안내 — '세 계층을 더하거나 나누지 말라'는 경고를 버튼 바로 옆에 둔다 */
.fnl-tier-h { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.4; }
/* 절단된 소스(일별 상위 30 수집) 경고 — 합계·'그 외' 줄이 없는 이유를 표 바로 위에 적는다.
   상단 대형 노란 박스를 없앤 자리를 대신하는, 숫자 옆 짧은 경고다. */
.fnl-dt-trunc {
  font-size: var(--fs-caption); line-height: 1.55; color: var(--sig-yellow);
  background: var(--sig-yellow-bg); border: 1px solid var(--sig-yellow);
  border-radius: var(--radius-sm); padding: var(--sp-2);
}