/* ==========================================================================
   사례 노트 W1-v6 — 프로필(tax-detail) 사례 구역 (D-1006, 사용자 승인 2026-10-20)
   시안: /semtalk-share/case-note-display-v6 (W1-final 큰 글씨 v5 + 결론 연한 초록 상자 c1)
   · 왼쪽 목차(세로 세 칸) | 오른쪽 읽기 판(상황 · 이렇게 처리했어요 · 결론) → 아래 전폭 상담 띠
   · 상담 띠는 Y2안(큰 글자 세 줄 + 가는 선 + 둥근 화살표) — 파랑은 화살표·눌림 하나. 결론 강조는 초록 한 계열(--tint-green-*)만 — 결과 체크와 같은 색
   · 13px 아래 글자 없음. 크기는 이 구역 토큰(--fs-cn-*) 한 벌 — 타이포 스케일 12단에 없는 읽기 크기(17·18·19·30)라
     tax-card.css의 카드 토큰과 같은 방식으로 구역 안에 둔다(값을 선언마다 흩지 않는다).
   · 폰(≤ 900): 목차가 한 줄 탭(번호 + 결과 라벨) · 칸 이름은 본문 위로 · 띠는 세 줄로 쌓음
   ========================================================================== */
.cn {
  --fs-cn-no: 14px;      --lh-cn-no: 26px;      /* 목차 번호 600 */
  --fs-cn-tab-rl: 18px;  --lh-cn-tab-rl: 26px;  /* 목차 결과 라벨 600 */
  --fs-cn-tab-t: 17px;   --lh-cn-tab-t: 26px;   /* 목차 제목 500 */
  --fs-cn-meta: 14px;    --lh-cn-meta: 22px;    /* 분야 · 날짜 · 작은 머리 */
  --fs-cn-rl: 24px;      --lh-cn-rl: 32px;      /* 판 결과 라벨 600 */
  --fs-cn-title: 30px;   --lh-cn-title: 40px;   /* 판 제목 600 */
  --fs-cn-dt: 15px;      --lh-cn-dt: 22px;      /* 칸 이름 600 */
  --fs-cn-body: 18px;    --lh-cn-body: 32px;    /* 칸 본문 400 — 1.75 */
  --fs-cn-con: 19px;     --lh-cn-con: 32px;     /* 결론 본문 600 */
  --fs-cn-con-rl: 15px;  --lh-cn-con-rl: 22px;  /* 결론 위 결과 라벨 600 */
  --fs-cn-act: 16px;     --lh-cn-act: 24px;     /* 사례 전체 읽기 · 다음 사례 */
  --fs-cn-sp: 17px;      --lh-cn-sp: 26px;      /* 고민 문구 600 */
  --fs-cn-band: 22px;    --lh-cn-band: 30px;    /* 띠 제목 600 — 사용자 «더 잘 보이게» */
  --fs-cn-band-s: 16px;  --lh-cn-band-s: 24px;  /* 띠 설명 · 방식 설명 400 */
  --fs-cn-way: 22px;     --lh-cn-way: 30px;     /* 방식 이름 600 (Y2) */
  --cn-toc: 340px;       /* 목차 열 — 판 본문 줄 폭(32em ≈ 540px)이 남는 폭 */
}

.cn-grid { display: grid; grid-template-columns: var(--cn-toc) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cn-grid > .cn-pw { grid-column: 2; grid-row: 1; }
.cn-grid > .cn-toc, .cn-grid > .cn-side { grid-column: 1; grid-row: 1; }
/* 0·1건인데 고민 목록도 없으면(문구표에 없는 옛 분야만) 판이 전폭 */
.cn-grid:not(:has(> .cn-toc, > .cn-side)) { grid-template-columns: minmax(0, 1fr); }
.cn-grid:not(:has(> .cn-toc, > .cn-side)) > .cn-pw { grid-column: 1; }

/* ── 결과 라벨(✓ + 이름) — 초록 체크는 결과의 색, 글자는 본문 색 ── */
.cn-rl { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.cn-rl svg { flex: none; width: 18px; height: 18px; color: var(--success); }

/* ── 목차 ── */
.cn-toc { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.cn-tab { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; width: 100%; padding: 22px 24px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-lg);
  background: var(--grey50); transition: background .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.cn-tab:hover { background: var(--grey100); }
.cn-tab.on { background: var(--surface); border-color: var(--grey900); box-shadow: var(--shadow-card); }
.cn-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cn-no { font-size: var(--fs-cn-no); line-height: var(--lh-cn-no); font-weight: var(--fw-semibold); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums; letter-spacing: var(--ls-14); }
.cn-tab-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cn-tab .cn-rl, .cn-tab-k { font-size: var(--fs-cn-tab-rl); line-height: var(--lh-cn-tab-rl); letter-spacing: var(--ls-18); }
.cn-tab-k { display: none; font-weight: var(--fw-semibold); }
.cn-tab-t { font-size: var(--fs-cn-tab-t); line-height: var(--lh-cn-tab-t); font-weight: var(--fw-medium); color: var(--text-secondary);
  letter-spacing: var(--ls-18); word-break: keep-all; overflow-wrap: anywhere; }
.cn-tab.on .cn-tab-t { color: var(--text-primary); }
.cn-tab-c, .cn-tab-h { margin-top: auto; font-size: var(--fs-cn-meta); line-height: var(--lh-cn-meta); color: var(--text-tertiary); letter-spacing: var(--ls-14); }
/* 2건일 때 셋째 칸 — 점선 칸에 고민 한 줄 */
.cn-more { background: var(--surface); border: 1px dashed var(--grey300); text-decoration: none; }
.cn-more .cn-tab-h { margin-top: 0; font-weight: var(--fw-semibold); }
a.cn-more:hover { background: var(--grey50); }
div.cn-more { cursor: default; }

/* ── 읽기 판 ── */
.cn-pw { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.cn-p { flex: 1; display: flex; flex-direction: column; padding: 44px 48px 36px; animation: cn-in .35s cubic-bezier(.2, .8, .2, 1); }
.cn-p[hidden] { display: none; }
.cn-intro { animation: none; } /* 사례 0건 판 — 바뀌는 판이 아니라 움직임 없음 */
.cn-ph { min-width: 0; word-break: keep-all; }
@keyframes cn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cn-meta { font-size: var(--fs-cn-meta); line-height: var(--lh-cn-meta); color: var(--text-tertiary); letter-spacing: var(--ls-14); }
.cn-rl-lg { display: flex; margin-top: 16px; gap: 8px; font-size: var(--fs-cn-rl); line-height: var(--lh-cn-rl); letter-spacing: var(--ls-22); }
.cn-rl-lg svg { width: 23px; height: 23px; }
.cn-title { margin: 8px 0 0; font-size: var(--fs-cn-title); line-height: var(--lh-cn-title); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-36); word-break: keep-all; overflow-wrap: anywhere; max-width: 26em; }
.cn-meta + .cn-title { margin-top: 12px; }
.cn-f { margin: 32px 0 0; padding-top: 4px; border-top: 1px solid var(--grey900); }
.cn-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 24px; padding: 24px 0; }
.cn-row + .cn-row { border-top: 1px solid var(--divider); }
.cn-f dt { padding-top: 5px; font-size: var(--fs-cn-dt); line-height: var(--lh-cn-dt); font-weight: var(--fw-semibold); color: var(--text-secondary); letter-spacing: var(--ls-14); }
.cn-f dd { margin: 0; font-size: var(--fs-cn-body); line-height: var(--lh-cn-body); color: var(--text-secondary); letter-spacing: var(--ls-18);
  word-break: keep-all; overflow-wrap: anywhere; max-width: 32em; }
.cn-f dd p, .cn-free p { margin: 0; }
.cn-f dd p + p, .cn-free p + p { margin-top: 12px; }
/* 결론 — 연한 초록 상자(시안 c1 채택) · 본문 19 semibold · 결과 라벨은 본문 위 */
.cn-row.cn-con { margin: 8px -20px 0; padding: 22px 20px 24px; border-top: 0; border-radius: var(--r-md); background: var(--tint-green-bg); }
.cn-con dt { color: var(--tint-green-ink); }
.cn-con dd { font-size: var(--fs-cn-con); line-height: var(--lh-cn-con); font-weight: var(--fw-semibold); color: var(--text-primary); }
.cn-con-rl { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--fs-cn-con-rl); line-height: var(--lh-cn-con-rl);
  font-weight: var(--fw-semibold); color: var(--tint-green-ink); letter-spacing: var(--ls-14); }
.cn-con-rl svg { flex: none; width: 15px; height: 15px; color: var(--success); }
/* 자유 원고 · 상황 칸만 있는 옛 글 — 칸 이름 없이 앞 여덟 줄(전문은 [사례 전체 읽기]) */
.cn-free { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--grey900); font-size: var(--fs-cn-body); line-height: var(--lh-cn-body);
  color: var(--text-secondary); letter-spacing: var(--ls-18); word-break: keep-all; overflow-wrap: anywhere; max-width: 32em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.cn-free h4 { margin: 0 0 4px; font-size: var(--fs-cn-body); line-height: var(--lh-cn-body); font-weight: var(--fw-semibold); color: var(--text-primary); }
.cn-free * + h4 { margin-top: 16px; }
.cn-free blockquote { margin: 12px 0; padding-left: 14px; border-left: 3px solid var(--grey300); }
.cn-free ul { margin: 8px 0; padding-left: 20px; }
/* 판 바닥 — 사례 전체 읽기 · 다음 사례 */
.cn-ft { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 16px; }
.cn-go { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-cn-act); line-height: var(--lh-cn-act); font-weight: var(--fw-semibold);
  color: var(--text-secondary); letter-spacing: var(--ls-14); text-decoration: none; }
.cn-go svg { width: 17px; height: 17px; transition: transform .2s; }
.cn-go:hover { color: var(--text-primary); }
.cn-go:hover svg { transform: translateX(3px); }
.cn-nx { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px; border: 1px solid var(--grey300);
  border-radius: var(--r-md); background: var(--surface); font: inherit; color: inherit; cursor: pointer; transition: background .2s; }
.cn-nx:hover { background: var(--grey50); }
.cn-nx-m { font-size: var(--fs-cn-meta); line-height: var(--lh-cn-meta); color: var(--text-tertiary); white-space: nowrap; letter-spacing: var(--ls-14); }
.cn-nx b { font-size: var(--fs-cn-act); line-height: var(--lh-cn-act); font-weight: var(--fw-semibold); white-space: nowrap; letter-spacing: var(--ls-14); }
.cn-nx svg { flex: none; width: 17px; height: 17px; }

/* ── 이런 고민도 상담해요(사례 0·1건) ── */
.cn-side { align-self: start; padding: 24px 24px 10px; border-radius: var(--r-lg); background: var(--grey50); }
.cn-side-h { margin: 0; font-size: var(--fs-cn-meta); line-height: var(--lh-cn-meta); font-weight: var(--fw-semibold); color: var(--text-tertiary); letter-spacing: var(--ls-14); }
.cn-sp { list-style: none; margin: 8px 0 0; padding: 0; }
.cn-sp li + li { border-top: 1px solid var(--divider); }
.cn-sp a, .cn-sp-i { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: 12px; padding: 16px 0; align-items: center; color: inherit; text-decoration: none; }
.cn-sp-k { grid-column: 1; font-size: var(--fs-cn-meta); line-height: var(--lh-cn-meta); color: var(--text-tertiary); letter-spacing: var(--ls-14); }
.cn-sp b { grid-column: 1; font-size: var(--fs-cn-sp); line-height: var(--lh-cn-sp); font-weight: var(--fw-semibold); letter-spacing: var(--ls-18); word-break: keep-all; overflow-wrap: anywhere; }
.cn-sp svg { grid-column: 2; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--text-tertiary); transition: transform .2s; }
.cn-sp a:hover svg { transform: translateX(3px); color: var(--text-primary); }

/* ── 상담 띠 — Y2안: 머리 + 큰 글자 세 줄 + 가는 선 + 둥근 화살표 (D-1006 고침) ──
   줄 전체가 링크. 눌림 = 이름 파랑(--primary-pressed 4.5:1↑) + 화살표 원 채움. 키보드는 줄 둘레 파랑 고리. */
.cn-band { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--grey900); }
.cn-band-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.cn-band-t { margin: 0; font-size: var(--fs-cn-band); line-height: var(--lh-cn-band); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: var(--ls-22); word-break: keep-all; }
.cn-band-s { margin: 0; font-size: var(--fs-cn-band-s); line-height: var(--lh-cn-band-s); color: var(--text-tertiary); letter-spacing: var(--ls-14); }
.cn-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-ways li { min-width: 0; }
.cn-ways li + li { border-left: 1px solid var(--grey200); }
.cn-w { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 18px 24px 20px; border-radius: var(--r-md);
  color: var(--text-primary); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.cn-ways li:first-child .cn-w { padding-left: 0; }
.cn-w b { grid-column: 1; font-size: var(--fs-cn-way); line-height: var(--lh-cn-way); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); white-space: nowrap; transition: color .2s; }
.cn-w-d { grid-column: 1; font-size: var(--fs-cn-band-s); line-height: var(--lh-cn-band-s); color: var(--text-secondary); letter-spacing: var(--ls-14); }
.cn-w-go { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--primary); color: var(--primary-pressed); transition: background .2s, color .2s, transform .2s; }
.cn-w-go svg { width: 18px; height: 18px; }
a.cn-w { cursor: pointer; }
a.cn-w:hover b { color: var(--primary-pressed); }
a.cn-w:hover .cn-w-go { background: var(--primary-pressed); border-color: var(--primary-pressed); color: #fff; transform: translateX(2px); }
a.cn-w:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cn-w.is-off { cursor: not-allowed; }
.cn-w.is-off b, .cn-w.is-off .cn-w-d { color: var(--text-disabled); }
.cn-ways.is-preview .cn-w { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .cn-p { animation: none; }
  .cn-tab, .cn-go svg, .cn-sp svg, .cn-w, .cn-w b, .cn-w-go { transition: none; }
  a.cn-w:hover .cn-w-go { transform: none; }
}

/* ── 폰 · 좁은 창(≤ 900) ── */
@media (max-width: 900px) {
  .cn {
    --fs-cn-no: 13px;    --lh-cn-no: 20px;
    --fs-cn-tab-rl: 15px; --lh-cn-tab-rl: 22px;
    --fs-cn-meta: 13px;  --lh-cn-meta: 20px;
    --fs-cn-rl: 20px;    --lh-cn-rl: 28px;
    --fs-cn-title: 22px; --lh-cn-title: 30px;
    --fs-cn-dt: 14px;    --lh-cn-dt: 20px;
    --fs-cn-body: 17px;  --lh-cn-body: 28px;
    --fs-cn-con: 18px;   --lh-cn-con: 30px;
    --fs-cn-act: 15px;   --lh-cn-act: 22px;
    --fs-cn-sp: 16px;    --lh-cn-sp: 24px;
    --fs-cn-band: 20px;  --lh-cn-band: 28px;
    --fs-cn-band-s: 15px; --lh-cn-band-s: 22px;
    --fs-cn-way: 19px;   --lh-cn-way: 26px;
  }
  .cn-grid { display: flex; flex-direction: column; gap: 12px; }
  /* 목차 → 한 줄 탭(번호 + 결과 라벨 · 없으면 분야). 2건 셋째 칸(고민)은 폰에 없다. */
  .cn-toc { display: grid; grid-auto-rows: auto; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
  .cn-tab { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 10px 14px; border-radius: var(--r-md); }
  .cn-tab-t, .cn-tab-c, .cn-toc .cn-more { display: none; }
  .cn-tab-k { display: block; word-break: keep-all; overflow-wrap: break-word; }
  .cn-tab .cn-rl { display: block; word-break: keep-all; overflow-wrap: break-word; }
  .cn-tab .cn-rl svg { display: none; } /* 좁은 칸에선 체크를 빼고 라벨 낱말을 지켜요 — 판 제목엔 그대로 */
  .cn-p { padding: 26px 22px 24px; }
  .cn-rl-lg { margin-top: 12px; }
  .cn-rl-lg svg { width: 20px; height: 20px; }
  .cn-f { margin-top: 22px; }
  .cn-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .cn-f dt { padding-top: 0; }
  .cn-f dd, .cn-free { max-width: none; }
  .cn-row.cn-con { margin: 6px -10px 0; padding: 16px 14px 18px; }
  .cn-free { margin-top: 20px; padding-top: 18px; }
  .cn-ft { padding-top: 20px; flex-wrap: wrap; gap: 14px; }
  .cn-nx { width: 100%; margin-left: 0; justify-content: flex-start; }
  .cn-nx svg { margin-left: auto; }
  .cn-side { padding: 18px 18px 6px; }
  .cn-band { margin-top: 24px; padding-top: 20px; }
  .cn-band-h { display: block; margin-bottom: 4px; }
  .cn-band-s { margin-top: 4px; }
  .cn-ways { grid-template-columns: minmax(0, 1fr); }
  .cn-ways li + li { border-left: 0; border-top: 1px solid var(--grey200); }
  .cn-w, .cn-ways li:first-child .cn-w { padding: 16px 0 18px; border-radius: 0; }
  .cn-w-go { width: 40px; height: 40px; }
}