/* ==========================================================================
   D 합본형 · 「해설 있는 사례」 본보기(P-30) 전용 — 합본.css 위에 얹음(합본.css 는 고치지 않음)     D_합본형/사례.css
   - 값은 합본.css 의 토큰(--navy · --copper · --gold · --warm · --paper · --line · --ink-soft · --film)만. 가장 작은 글자 16px · 누르는 자리 48px↑.
   - 사진 위 지시선 · 번호의 파랑(#2f6db5)은 그림 전용 색(원장님 2026-09-26 「지시선 색은 그림 선과 다르게」 — 남자 코 영상과 같은 색) · 화면 UI 토큰은 늘리지 않음.
   ========================================================================== */

/* ---------- 페이지 틀: 글 페이지(dx-textpage)와 같은 머리줄 · 꼬리줄 · 휴대폰 아래 두 칸, PC 는 왼쪽 차례 + 가운데 + 오른쪽 연락(3단) ---------- */
.cs-page { background: var(--paper); }
.cs-main { padding: calc(var(--top-h) + env(safe-area-inset-top) + 10px) 16px 8px; }
.cs-in { max-width: 760px; margin: 0 auto; }
.cs-page [id] { scroll-margin-top: calc(var(--top-h) + env(safe-area-inset-top) + 10px); }
/* 연락 카드는 다른 페이지 것을 그대로 옮김 — 릴스 페이지용 「한 화면 높이 · 스냅」만 풂 */
.cs-page .dx-card.cs-contact { min-height: 0; scroll-snap-align: none; padding: 20px 16px 24px; }
.cs-page .dx-card__in { padding-right: 0; }
.cs-page > .dx-foot { margin: 0; }

.cs-card { margin: 12px 0; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); }
.cs-card h2 { margin: 0 0 6px; font-size: 1.375rem; line-height: 1.35; color: var(--navy); letter-spacing: -.01em; word-break: keep-all; }
.cs-card h2 b { color: var(--copper); }
.cs-head { position: relative; background: var(--warm); border-color: var(--warm); }
.cs-head h1 { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.35; color: var(--navy); letter-spacing: -.01em; word-break: keep-all; }
.cs-head h1 b { color: var(--copper); }
.cs-lead { margin: 0; color: var(--ink-soft); word-break: keep-all; }
.cs-hint { margin: 0 0 10px; color: var(--ink-soft); word-break: keep-all; }
.cs-fixed { margin: 12px 0 0; font-weight: 800; color: var(--navy); }
.cs-soon { margin: 8px 0 0; font-size: 1rem; font-weight: 700; color: var(--copper); }
.cs-fail { font-weight: 700; color: var(--copper); }
.cs-draft { margin: 12px 0 18px; }
.cs-ends { margin-top: 14px; }

/* 키노트 꼬리표 — 원장님만 알아보는 옅은 표시(나중에 이 한 덩이 + 사례_본보기.js 의 showSrc 한 곳을 지우면 끝) */
.cs-src { position: absolute; top: 10px; right: 12px; margin: 0; padding: 0 10px; border-radius: 999px; background: #ebe6dc; color: var(--ink-soft); font-size: 1rem; font-weight: 600; line-height: 1.75; }
.cs-src[hidden] { display: none; }
.cs-head:has(.cs-src:not([hidden])) h1 { padding-right: 96px; }

/* ---------- 눈 뜬 / 감은 전환 ---------- */
.cs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.cs-seg button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 4px 10px; border-radius: 14px;
  border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 800 1.0625rem/1.2 var(--font); cursor: pointer; word-break: keep-all;
}
.cs-seg button small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cs-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.cs-seg button[aria-pressed="true"] small { color: #dfe6f0; }

/* ---------- 밀기 비교 ---------- */
.cs-cmp {
  position: relative; width: 100%; border-radius: 12px; background: #e2dacb;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: ew-resize;
}
.cs-l { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
/* 휴대폰 · 좁은 폭: 틀 위에 이름표가 올라설 여백(사진은 틀 안에서만 잘림 · 이름표 · 지시선만 여백으로 나감) */
@media (max-width: 719.98px) { .cs-cmp { margin-top: 34px; } }
.cs-l img { position: absolute; display: block; max-width: none; transform-origin: 0 0; pointer-events: none; }
.cs-l--a { clip-path: inset(0 0 0 50%); }
.cs-tag { position: absolute; z-index: 3; bottom: 8px; padding: 0 10px; border-radius: 999px; background: rgba(13,22,38,.72); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.75; pointer-events: none; }
.cs-tag--b { left: 8px; }
.cs-tag--a { right: 8px; }
.cs-handle { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 48px; margin-left: -24px; cursor: ew-resize; outline: none; touch-action: none; }
.cs-handle__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(13,22,38,.35); }
.cs-handle__knob {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--navy); border: 2px solid var(--navy); font-size: 1rem; font-weight: 800; letter-spacing: -2px; box-shadow: 0 2px 10px rgba(13,22,38,.35);
}
.cs-handle:focus-visible .cs-handle__knob { outline: 3px solid var(--navy); outline-offset: 2px; }

/* 볼 곳: 점 · 지시선(svg) · 번호 이름표(단추 48px · 안의 알약이 보이는 부분) */
.cs-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.cs-dot { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid #2f6db5; pointer-events: none; }
.cs-dot[hidden], .cs-pt[hidden] { display: none; }
.cs-pt { position: absolute; z-index: 6; left: 0; top: 0; min-height: 48px; padding: 6px; border: 0; background: none; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.cs-pt__in {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 4px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.94); color: var(--navy); border: 2px solid #2f6db5; font-size: 1rem; font-weight: 800; box-shadow: 0 2px 8px rgba(13,22,38,.25);
}
.cs-pt__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2f6db5; color: #fff; font-size: 1.125rem; line-height: 1; }
.cs-pt.is-on .cs-pt__in { background: var(--navy); color: #fff; border-color: var(--navy); }
.cs-pt.is-on .cs-pt__n { background: var(--gold); color: var(--navy); }
.cs-pt.is-dim .cs-pt__in { opacity: .72; }
.cs-pt:focus-visible { outline: none; }
.cs-pt:focus-visible .cs-pt__in { outline: 3px solid var(--navy); outline-offset: 2px; }
.cs-desc { min-height: 3.3em; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--warm); word-break: keep-all; }
.cs-desc b { color: var(--navy); }

/* ---------- 시간 흐름 ---------- */
.cs-time { margin-top: 14px; }
.cs-time__h { margin: 0 0 4px; font-weight: 800; color: var(--navy); }
.cs-time__h small { display: block; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cs-time__row { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
.cs-time__row::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 3px; background: var(--line); }
.cs-time__row li { position: relative; flex: 0 0 auto; }
.cs-tdot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; min-height: 48px; padding: 12px 8px 4px; border: 0; border-radius: 12px;
  background: transparent; color: var(--navy); font: 800 1.0625rem/1.25 var(--font); cursor: pointer;
}
.cs-tdot i { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); }
.cs-tdot small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cs-tdot[aria-pressed="true"] i { background: var(--copper); border-color: var(--copper); box-shadow: 0 0 0 4px rgba(143,82,24,.2); }
.cs-tdot[aria-pressed="true"] span { color: var(--copper); }
.cs-time__note { margin: 6px 0 0; font-size: 1rem; color: var(--ink-soft); word-break: keep-all; }

/* ---------- 원장님 해설 듣기(C-07 과 같은 결 — 어두운 띠 · ▶ → ❚❚ · 진행 막대) ---------- */
.cs-listen { margin: 6px 0 0; padding: 8px 10px 10px; }
.cs-listen .cs-play { width: 100%; justify-content: flex-start; gap: 12px; min-height: 60px; white-space: normal; text-align: left; }
.cs-play__i { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); }
.cs-play__i svg { width: 26px; height: 26px; }
.cs-play__t { display: flex; flex-direction: column; align-items: flex-start; }
.cs-play__t small { font-size: 1rem; font-weight: 600; opacity: .9; }
.cs-play[aria-disabled="true"] { background: #2a3b5c; }
.cs-prog { height: 6px; margin: 10px 4px 0; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.cs-prog i { display: block; width: 0; height: 100%; background: var(--gold); }
.cs-listen__st { min-height: 1.6em; margin: 6px 0 0; font-size: 1rem; font-weight: 700; color: var(--copper); }
.cs-script .dx-fold__body p { margin: 0 0 8px; }

/* ---------- 사례 정보 ---------- */
.cs-info .dx-facts > div { grid-template-columns: 5.4em 1fr; }
.cs-risk { margin: 4px 0 0; padding-left: 1.2em; }
.cs-risk li { margin: 0 0 4px; }
.cs-from { white-space: nowrap; }

/* ---------- 비회원 화면 ---------- */
.cs-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-thumb { margin: 0; width: 160px; }
.cs-thumb img { display: block; width: 160px; height: 90px; object-fit: cover; border-radius: 10px; }
.cs-thumb figcaption { margin-top: 4px; font-weight: 800; color: var(--navy); }
.cs-lockbox { width: 160px; height: 90px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #e2dacb; color: var(--ink-soft); border: 2px dashed #a79f91; text-align: center; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.cs-lockbox svg { width: 26px; height: 26px; }
.cs-guest__info { margin: 10px 0 0; font-weight: 700; }
/* C-05 가림막 카드 */
.dx-veil { background: var(--warm); border: 2px solid var(--navy); }
.dx-veil__h { font-size: 1.1875rem !important; font-weight: 800; }
.dx-veil__p { margin: 0 0 4px; font-size: 1.125rem; word-break: keep-all; }
.dx-veil__acts .dx-b { min-height: 52px; }
.dx-veil__s { margin: 10px 0 0; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 479.98px) { .dx-veil__acts { grid-template-columns: 1fr; } }

/* ---------- 스크립트 꺼짐(no-js): 사진 두 장 위아래 ---------- */
.cs-nj { margin: 10px 0; }
.cs-nj img { display: block; width: 100%; height: auto; border-radius: 12px; }
.cs-nj figcaption { margin-top: 4px; font-weight: 700; color: var(--navy); }
.cs-nj-pts { list-style: none; padding-left: 0; }

/* ---------- PC(1024px↑): 3단 — 가운데는 차례 · 연락 칸 사이 ---------- */
@media (min-width: 1024px) and (min-height: 600px) {
  .cs-main, .cs-page .dx-card.cs-contact, .cs-page > .dx-foot { padding-left: calc(var(--toc-w) + 44px); padding-right: calc(var(--side-w) + 44px); }
  .cs-page > .dx-foot { position: relative; z-index: 46; }
  .cs-page .dx-toc, .cs-page .dx-side { bottom: auto; max-height: calc(100vh - var(--top-h) - 28px); }
  #dx-toc-list > li > a {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 56px; padding: 6px 12px; border-radius: 12px;
    border: 2px solid transparent; background: rgba(22,41,74,.06); color: inherit; text-decoration: none;
  }
  .cs-card { padding: 18px 20px; }
}

/* ---------- 마우스가 있는 기기: 올리면 색이 바뀜(합본.css 끝 절과 같은 규칙) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cs-seg button, .cs-pt__in, .cs-tdot, .cs-tdot i, .cs-handle__knob, #dx-toc-list > li > a { transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
  .cs-seg button[aria-pressed="false"]:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .cs-seg button[aria-pressed="true"]:hover { background: #22375e; }
  .cs-pt:hover .cs-pt__in { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .cs-pt.is-on:hover .cs-pt__in { background: #22375e; color: #fff; }
  .cs-tdot:hover { background: rgba(246,200,147,.35); }
  .cs-tdot:hover i { border-color: var(--copper); }
  .cs-handle:hover .cs-handle__knob { background: var(--gold); border-color: var(--gold); }
  #dx-toc-list > li > a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .cs-play[aria-disabled="true"]:hover { background: #22375e; color: #fff; }
  .cs-seg button:active, .cs-tdot:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) { .cs-seg button, .cs-pt__in, .cs-tdot, .cs-handle__knob { transition: none; } }
/* W-163 완료 */

/* ==========================================================================
   W-166 — 여러 사례 · 보기 3개 · 목록 화면(사례_목록.html). 위의 규칙은 건드리지 않고 새 이름만 더함(사례46 화면 그대로).
   ========================================================================== */
.cs-seg--3 { grid-template-columns: repeat(3, 1fr); }
.cs-lsec h2 { margin-bottom: 10px; }
.cs-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-case { margin: 0; }
.cs-case__a {
  display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; align-items: center; min-height: 48px; padding: 8px; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff; color: inherit; text-decoration: none;
}
.cs-case__pic img { display: block; width: 160px; height: 90px; object-fit: cover; border-radius: 10px; }
.cs-case__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; word-break: keep-all; }
.cs-case__t b { color: var(--navy); font-size: 1.0625rem; line-height: 1.35; }
.cs-case__t small { font-size: 1rem; color: var(--ink-soft); }
.cs-case__src { margin-top: 2px; padding: 0 10px; border-radius: 999px; background: #ebe6dc; color: var(--ink-soft); font-size: 1rem; font-weight: 600; line-height: 1.75; }
.cs-case__go { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800; }
.cs-case > .cs-thumbs { margin-bottom: 6px; }
.cs-lsec .cs-case:not(:has(.cs-case__a)) { padding: 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; }
.cs-lnote { margin: 12px 0 18px; }
@media (min-width: 720px) { .cs-case__a { grid-template-columns: 160px 1fr auto; } .cs-case__go { grid-column: auto; } }
@media (hover: hover) and (pointer: fine) {
  .cs-case__a, .cs-case__go { transition: background-color .15s, border-color .15s, color .15s; }
  .cs-case__a:hover { border-color: var(--gold); background: rgba(246,200,147,.25); }
  .cs-case__a:hover .cs-case__go { background: var(--gold); color: var(--navy); }
}
.cs-case__a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* W-166 완료 */

/* ==========================================================================
   W-168 — 「나란히」 보기(수술 전 · 후 각도가 다른 사진): 밀기 대신 두 장을 나란히 · 좁은 폭(한 장 200px 아래)은 위 · 아래.
   위의 규칙은 건드리지 않고 새 이름만 더함(밀기 화면 · 사례46 그대로). 볼 곳 점 · 이름표 · 지시선은 위의 .cs-dot · .cs-pt · .cs-lines 를 그대로 씀.
   ========================================================================== */
.cs-pair { display: flex; justify-content: center; gap: 12px; }
.cs-pair[hidden], .cs-pairnote[hidden] { display: none; }
.cs-pair--stack { flex-direction: column; align-items: center; }
.cs-pair__f { margin: 0; flex: none; }
.cs-pair__box { position: relative; width: 100%; overflow: hidden; border-radius: 12px; background: #e2dacb; }
.cs-pair__box img { position: absolute; display: block; max-width: none; transform-origin: 0 0; pointer-events: none; }
.cs-pairnote { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); word-break: keep-all; }
/* W-168 완료 */

/* ==========================================================================
   W-170 — 수술 갈래로 들어가기: 첫 화면 갈래 카드 셋(눈 · 코 · 안면거상) · 갈래 목록 위 단추 줄.
   시안 사례.css 와 시험장 case.css 에 글자 그대로 같은 덩이입니다(한쪽을 고치면 다른 쪽도). 위의 규칙은 건드리지 않음.
   ========================================================================== */
.cs-kinds__row { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.cs-kinds__row > li { margin: 0; }
.cs-kind {
  display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px 14px; box-sizing: border-box; height: 100%; min-height: 48px; padding: 14px 16px;
  border-radius: 16px; border: 1.5px solid var(--line); background: #fff; color: inherit; text-decoration: none;
}
.cs-kind__pic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--warm); color: var(--navy); }
.cs-kind__pic svg { width: 48px; height: 48px; }
.cs-kind__t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; word-break: keep-all; }
.cs-kind__n { font-size: 1.5rem; line-height: 1.3; font-weight: 800; color: var(--navy); }
.cs-kind__s { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--ink-soft); }
.cs-kind__c { font-size: 1rem; line-height: 1.5; font-weight: 800; color: var(--copper); }
.cs-kind__go {
  grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; background: var(--navy); color: #fff; font-size: 1.0625rem; font-weight: 800;
}
.cs-kind[aria-disabled="true"] { opacity: .6; background: #f4f1ea; border-style: dashed; cursor: default; }
.cs-kind[aria-disabled="true"] .cs-kind__c { color: var(--ink-soft); }
@media (min-width: 720px) {
  .cs-kinds__row { grid-template-columns: repeat(3, 1fr); }
  .cs-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .cs-kind__go { margin-top: auto; align-self: stretch; }
}

.cs-kindbar { margin: 0 0 12px; }
.cs-kindbar__row { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-kindbar__row > li { margin: 0; }
.cs-kindbar__b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; min-height: 56px; padding: 4px 8px;
  border-radius: 14px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font-size: 1.0625rem; font-weight: 800; line-height: 1.25;
  text-align: center; text-decoration: none; word-break: keep-all;
}
.cs-kindbar__b small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cs-kindbar__b[aria-current="page"] { background: var(--navy); color: #fff; }
.cs-kindbar__b[aria-current="page"] small { color: #dfe6f0; }
.cs-kindbar__b[aria-disabled="true"] { opacity: .55; border-style: dashed; cursor: default; }
.cs-kindnone { font-weight: 700; color: var(--ink-soft); }
.cs-kind:focus-visible, .cs-kindbar__b:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cs-kind, .cs-kind__go, .cs-kindbar__b { transition: background-color .15s, border-color .15s, color .15s; }
  .cs-kind[href]:hover { border-color: var(--gold); background: rgba(246,200,147,.25); }
  .cs-kind[href]:hover .cs-kind__go { background: var(--gold); color: var(--navy); }
  .cs-kindbar__b[href]:not([aria-current]):hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .cs-kindbar__b[aria-current="page"]:hover { background: #22375e; }
}
@media (prefers-reduced-motion: reduce) { .cs-kind, .cs-kind__go, .cs-kindbar__b { transition: none; } }
/* W-170 완료 */

/* ==========================================================================
   W-171 — 부위의 문 → 수술 이름 단추 → 사례: 문 카드 다섯(좁으면 줄바꿈) · 문을 오가는 단추 줄 · 수술 이름 단추 · 「이런 고민이시라면」 · 카드 꼬리표.
   시안 사례.css 와 시험장 case.css 에 글자 그대로 같은 덩이입니다(한쪽을 고치면 다른 쪽도). 위(W-170 포함)의 규칙은 지우지 않고 둠.
   ========================================================================== */
@media (min-width: 720px) {
  .cs-kinds__row.cs-doors__row { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.cs-doorbar .cs-kindbar__row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.cs-opbar { margin: 4px 0 12px; }
.cs-ops { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-ops > li { margin: 0; }
.cs-op {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 48px; padding: 6px 16px;
  border-radius: 24px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font-size: 1.0625rem; font-weight: 800; line-height: 1.3;
  text-decoration: none; word-break: keep-all;
}
.cs-op small { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.cs-op[aria-current="page"] { background: var(--navy); color: #fff; }
.cs-op[aria-current="page"] small { color: #dfe6f0; }
.cs-op--worry { border-color: var(--copper); color: var(--copper); }
.cs-worry { margin: 0 0 12px; }
.cs-worry h3 { margin: 0; font-size: 1.0625rem; color: var(--ink-soft); }
.cs-optags { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-optags > * { margin: 0; padding: 2px 10px; border-radius: 999px; background: var(--warm); border: 1px solid var(--line); color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.cs-op:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cs-op { transition: background-color .15s, border-color .15s, color .15s; }
  .cs-op:not([aria-current]):hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .cs-op[aria-current="page"]:hover { background: #22375e; }
}
@media (prefers-reduced-motion: reduce) { .cs-op { transition: none; } }
/* W-171 완료 */

/* ==========================================================================
   W-174 — 원장님 갈래 여덟(첫 화면 · 갈래 단추 줄) · 사례 카드의 작은 사진은 통째로(세로 사진도 잘리지 않게).
   (시험장 case.css 에는 아직 없음 — 시험장으로 옮길 때 같은 덩이를 더함) 위의 규칙은 건드리지 않음.
   ========================================================================== */
.cs-kinds--s .cs-kind { grid-template-columns: 1fr auto; }
.cs-kinds--s .cs-kind__go { grid-column: auto; }
.cs-kinds--s .cs-kind__n { font-size: 1.25rem; overflow-wrap: anywhere; }
@media (min-width: 720px) { .cs-kinds--s .cs-kinds__row { grid-template-columns: repeat(4, 1fr); } }
.cs-kindbar--s .cs-kindbar__row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cs-kindbar--s .cs-kindbar__b { overflow-wrap: anywhere; }
.cs-lsec--s .cs-case__pic { display: grid; place-items: center; width: 160px; height: 120px; border-radius: 10px; background: var(--warm); }
.cs-lsec--s .cs-case__pic img, .cs-lsec--s .cs-thumb img { width: auto; height: auto; max-width: 160px; max-height: 120px; object-fit: contain; }
.cs-lsec--s .cs-thumb:first-child { display: grid; justify-items: center; }
/* W-174 완료 */
/* W-205: 연락 카드 · 끝 화면의 채널 링크(네이버 블로그 · 유튜브 · 인스타그램) — 작은 글(16px) · 누르는 자리 48px */
.dx-sns { margin: 10px 0 0; font-size: 1rem; color: var(--ink-soft); }
.dx-sns a { display: inline-flex; align-items: center; min-height: 48px; color: var(--navy); font-weight: 700; }
/* W-205 완료 */