/* ============================================================
   4F 업종 클리닉 (/clinic/ · /clinic/stay/) · p-clinic.css (4차: 담당 E만 고침)
   공통 클래스(.card .btn .rx .chart .frame-* …)는 덮어쓰지 않고, 이 페이지 전용 .cl-* 클래스만 쓴다.
   글자 크기는 쓰지 않는다(마크업의 .t-* 클래스가 정한다). 안쪽 여백은 4px 격자.
   ============================================================ */

/* ---------------- /clinic/ 모음: 첫 화면 머리 + 업종 패키지 판 ---------------- */
.cl-top-head { display: grid; justify-items: start; justify-self: stretch; gap: var(--cc-s3); }
.cl-top-head > .t-l { max-width: var(--cc-max-text); }
.cl-top { display: grid; gap: var(--cc-s5); justify-items: start; align-items: center; }
.cl-top-cue { width: 200px; height: auto; justify-self: center; }
@media (min-width: 900px) {
  .cl-top { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--cc-s8); }
  .cl-top-cue { width: 300px; justify-self: end; }
}
.cl-board { display: grid; gap: var(--cc-s8); }
.cl-group-head {
  display: flex; align-items: center; justify-content: center; gap: var(--cc-s5);
  margin-bottom: var(--cc-s6); color: var(--cc-white); text-align: center;
}
.cl-group-head::before, .cl-group-head::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.24); }
.cl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cl-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cl-row > li { display: flex; }
.cl-ind {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; align-items: start;
  gap: var(--cc-s2); width: 100%; padding: var(--cc-s5) var(--cc-s3);
  color: var(--cc-navy); text-align: center; text-decoration: none;
  transition: transform 260ms var(--cc-ease);
}
.cl-ind-art { position: relative; width: 112px; height: 112px; margin-bottom: var(--cc-s1); }
.cl-ind-art > img { width: 100%; height: 100%; object-fit: contain; }
.cl-ind-sub { color: var(--cc-navy-soft); }
.cl-ind > .badge, .cl-ind-price { align-self: end; margin-top: var(--cc-s2); }
/* 패키지 칸: 정가 줄 + 전용가(판에서 하나뿐인 강조색) */
.cl-ind-price { display: grid; justify-items: center; gap: 0; font-variant-numeric: tabular-nums; }
.cl-ind-price > s { color: var(--cc-navy-soft); text-decoration-thickness: 1px; }
.cl-ind-price > strong { color: var(--cc-rose-deep); font-weight: var(--cc-w-strong); }
a.cl-ind { cursor: pointer; }
a.cl-ind:focus-visible { outline: 3px solid var(--cc-white); outline-offset: 3px; border-radius: var(--cc-r-card); }
@media (hover: hover) {
  a.cl-ind:hover { transform: translateY(-6px); }
}
a.cl-ind.is-opening { transform: translateY(-6px) scale(1.04); }
a.cl-ind.is-opening .cl-ind-art { transform: scale(1.12); transition: transform 360ms var(--cc-ease); }
.cl-ind-art { transition: transform 260ms var(--cc-ease); }
@media (hover: hover) { a.cl-ind:hover .cl-ind-art { transform: scale(1.06); } }

.cl-more {
  display: grid; justify-items: center; gap: var(--cc-s3); max-width: 640px; margin-inline: auto;
  padding: var(--cc-s7) var(--cc-s5); text-align: center;
}
.cl-more .actions { margin-top: var(--cc-s3); justify-content: center; }

/* ================= /clinic/stay (6차 · 기획 개정 3, S1~S14) =================
   글자 크기는 쓰지 않는다(.t-* 클래스). 여백은 4px 격자 토큰만. 테두리 상자는 처방전(.rx)·문진표만,
   나머지는 흰 면 + 그림자(.card) 또는 종이색 면. */

/* ---- 그림·영상 자리(data-slot): 비율을 미리 잡아 파일을 바꿔도 자리가 그대로 ---- */
.cl-slot { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: inherit; background: var(--cc-line); }
.cl-slot > img, .cl-slot > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fit-pos, center); }

/* ---------------- S1 첫 화면 ---------------- */
.cl-hero { display: grid; gap: var(--cc-s6); grid-template-areas: "text" "media" "actions"; }
.cl-hero-text { grid-area: text; margin-bottom: 0; }
.cl-hero-media { grid-area: media; position: relative; margin: 0; min-width: 0; }
.cl-hero-actions { grid-area: actions; }
.cl-hero-price strong { font-weight: var(--cc-w-strong); white-space: nowrap; }
.cl-hero-wide { display: none; position: relative; padding-bottom: var(--cc-s7); }
.cl-hero-phone { position: absolute; right: 0; bottom: 0; width: 22%; z-index: 2; }
@media (min-width: 1024px) {
  .cl-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". media" "text media" "actions media" ". media"; column-gap: var(--cc-s8); row-gap: 0;
  }
  .cl-hero-actions { margin-top: var(--cc-s6); }
  .cl-hero-wide { display: block; }
  .cl-hero-tall { display: none; }
}

/* ---------------- S2 증상 ---------------- */
.cl-stats { display: grid; gap: var(--cc-s4); max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 600px) { .cl-stats { grid-template-columns: 1fr 1fr; gap: var(--cc-s5); } }
.cl-stats > li { align-content: start; }
.cl-stats > li > strong { color: var(--cc-rose-deep); }
.cl-stats p { margin: 0; max-width: 24em; word-break: keep-all; }
.cl-source { margin-top: var(--cc-s4); }
.cl-story { display: grid; gap: var(--cc-s6); align-items: center; margin-top: var(--cc-s8); }
.cl-story-img { margin: 0; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cc-r-card); justify-self: center; }
.cl-story-img > img { width: 100%; height: 100%; object-fit: cover; }
.cl-story-text { display: grid; gap: var(--cc-s3); text-align: left; }
.cl-story-text > * { margin: 0; }
@media (min-width: 900px) {
  .cl-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--cc-s8); max-width: 1000px; margin-inline: auto; }
  .cl-story-img { justify-self: stretch; }
}
.cl-bridge { margin-top: var(--cc-s8); }

/* ---------------- S3 숙소 문진 (유지) ----------------
   닥터 큐는 문진표 윗선에 고정: 말풍선은 두 줄 높이, 그림은 3:4 상자 안 아래 맞춤 → 단계·포즈가 바뀌어도 x·y 그대로 */
.cl-quiz { display: grid; gap: var(--cc-s5); grid-template-areas: "head" "cue" "quiz"; align-items: start; }
.cl-quiz-head { grid-area: head; }
.cl-quiz-head .sec-head { margin-bottom: 0; }
.cl-quiz-main { grid-area: quiz; min-width: 0; display: grid; gap: var(--cc-s4); align-content: start; }
.cl-quiz-cue { grid-area: cue; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--cc-s4); }
.cl-quiz-pose { position: relative; width: 84px; aspect-ratio: 3 / 4; }
.cl-quiz-pose img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cl-bubble {
  position: relative; display: grid; place-items: center start; box-sizing: border-box; margin: 0;
  min-height: calc(var(--cc-lh-b) * 2em + var(--cc-s3) * 2); padding: var(--cc-s3) var(--cc-s4);
  border-radius: var(--cc-r-card); background: var(--cc-white); box-shadow: var(--cc-shadow); text-align: left;
}
.cl-bubble::after {
  content: ""; position: absolute; left: -6px; top: 50%; width: 16px; height: 16px;
  background: var(--cc-white); transform: translateY(-50%) rotate(45deg); border-radius: 0 0 0 4px;
}
@media (min-width: 1024px) {
  .cl-quiz { grid-template-columns: minmax(0, 560px) 300px; grid-template-areas: "head ." "quiz cue"; justify-content: center; column-gap: var(--cc-s7); row-gap: var(--cc-s6); }
  .cl-quiz-cue { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--cc-s4); }
  .cl-quiz-pose { grid-row: 2; width: 220px; }
  .cl-bubble { grid-row: 1; width: 100%; max-width: 300px; place-items: center; text-align: center; padding: var(--cc-s4) var(--cc-s5); min-height: calc(var(--cc-lh-b) * 2em + var(--cc-s4) * 2); }
  .cl-bubble::after { left: 50%; top: auto; bottom: -8px; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; }
}
.cl-quiz-slot { min-width: 0; }

/* ---------------- S4 촬영 없는 처방: 짧은 카드 2 ---------------- */
.cl-duo { display: grid; gap: var(--cc-s4); max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 600px) { .cl-duo { grid-template-columns: 1fr 1fr; gap: var(--cc-s5); } }
.cl-duo > li { align-content: start; padding: var(--cc-s6) var(--cc-s5); }
.cl-duo > li > * { margin: 0; }

/* ---------------- S5 14일 일정: 문서형(흰 면 + 그림자). PC = 4열 표, 모바일 = 단계 카드 ---------------- */
.cl-sched-wrap { display: grid; gap: var(--cc-s6); }
.cl-sched-main { min-width: 0; }
.cl-sched { padding: var(--cc-s4); }
.cl-sched-head { display: none; }
.cl-sched-list { display: grid; gap: var(--cc-s3); margin: 0; padding: 0; list-style: none; }
.cl-sched-row { display: grid; gap: var(--cc-s3); padding: var(--cc-s4); border-radius: var(--cc-r-control); background: var(--cc-paper); }
.cl-sched-day { display: flex; justify-content: center; align-items: baseline; gap: var(--cc-s2); margin: 0; text-align: center; }
.cl-sched-day > span::before { content: "·"; margin-right: var(--cc-s2); color: var(--cc-navy-soft); }
.cl-sched-ours, .cl-sched-yours { display: grid; gap: 2px; text-align: left; }
.cl-sched-ours p, .cl-sched-yours p { margin: 0; }
.cl-sched-label { color: var(--cc-navy-soft); }
.cl-sched-yours { padding-left: var(--cc-s3); border-left: 2px solid var(--cc-rose); }
.cl-sched-note { margin: var(--cc-s4) 0 0; text-align: center; }
.cl-sched-side { display: grid; justify-items: center; margin: 0; }
.cl-sched-side .frame-phone { max-width: 220px; }
@media (min-width: 900px) {
  .cl-sched { padding: var(--cc-s5) var(--cc-s6); }
  .cl-sched-head, .cl-sched-row { grid-template-columns: 112px 88px minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cc-s4); }
  .cl-sched-head { display: grid; padding-bottom: var(--cc-s3); border-bottom: 1px solid var(--cc-line); color: var(--cc-navy-soft); text-align: left; }
  .cl-sched-head > span:last-child { padding-left: var(--cc-s3); }
  .cl-sched-list { gap: 0; }
  .cl-sched-row { align-items: start; padding: var(--cc-s4) 0; border-radius: 0; background: none; border-bottom: 1px solid var(--cc-navy-04); }
  .cl-sched-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .cl-sched-day { display: contents; }
  .cl-sched-day > * { text-align: left; }
  .cl-sched-day > span::before { content: none; }
  .cl-sched-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cl-sched-note { text-align: left; }
}
@media (min-width: 1024px) {
  .cl-sched-wrap { grid-template-columns: minmax(0, 1fr) 240px; column-gap: var(--cc-s7); align-items: start; }
  .cl-sched-side .frame-phone { max-width: 240px; }
}

/* ---------------- S6 활판재가 받은 처방(탭 5) ---------------- */
.cl-cases .tab-panel { padding-top: var(--cc-s7); }
.cl-stage { display: grid; gap: var(--cc-s6); align-items: center; }
.cl-stage-text { display: grid; justify-items: start; gap: var(--cc-s3); text-align: left; }
.cl-stage-text > * { margin: 0; }
.cl-stage-media { min-width: 0; }
@media (min-width: 900px) {
  .cl-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--cc-s8); min-height: 520px; }
}

/* 01 전후 비교 슬라이더 (노트북 틀 안, 16:10) */
.cl-ba {
  --p: 58%;
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: inherit;
  background: var(--cc-paper); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.cl-ba > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; pointer-events: none; -webkit-user-drag: none; }
.cl-ba-before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cl-ba-legend { display: flex; justify-content: space-between; margin: var(--cc-s3) 7.6% 0; }   /* 전후 이름은 그림 밖 아래에(그림 위 글 금지) */
.cl-ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 3; width: 48px; margin-left: -24px;
  display: grid; place-items: center; cursor: ew-resize; outline: none;
}
.cl-ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--cc-white); box-shadow: 0 0 0 1px rgba(14, 24, 48, 0.18); }
.cl-ba-knob {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cc-white); color: var(--cc-navy); box-shadow: var(--cc-shadow);
  transition: transform 160ms var(--cc-ease);
}
.cl-ba-knob svg { width: 24px; height: 24px; }
.cl-ba.is-drag .cl-ba-knob, .cl-ba-handle:focus-visible .cl-ba-knob { transform: scale(1.12); }
.cl-ba-handle:focus-visible .cl-ba-knob { outline: 3px solid var(--cc-rose-deep); outline-offset: 2px; }

/* 02 메인 영상 자리: 노트북 틀 화면(16:10) 안에 16:9 슬라이드. 점·멈춤은 틀 아래 */
.cl-film-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: inherit; background: var(--cc-navy-deep); }
.cl-film-stage { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 16 / 9; transform: translateY(-50%); overflow: hidden; isolation: isolate; background: var(--cc-paper); }
.cl-film-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.cl-film-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1100ms var(--cc-ease); }
.cl-film-slide.is-on { opacity: 1; animation: clZoom 7s linear both; z-index: 1; }
@keyframes clZoom { from { transform: scale(1); } to { transform: scale(1.04); } }
.cl-film-bar { position: relative; display: flex; align-items: center; justify-content: center; margin-top: var(--cc-s3); min-height: 44px; }
.cl-film-ctrl { display: flex; align-items: center; justify-content: center; }
.cl-film-dot { position: relative; width: 36px; height: 44px; padding: 0; border: 0; background: none; flex: none; }
.cl-film-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--cc-navy-08); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.28);
  transition: width 240ms var(--cc-ease), margin 240ms var(--cc-ease), background-color 240ms var(--cc-ease), border-radius 240ms var(--cc-ease);
}
.cl-film-dot[aria-current="true"]::before { width: 28px; margin-left: -14px; border-radius: 5px; background: var(--cc-navy); box-shadow: none; }
.cl-film-dot:focus-visible { outline: 2px solid var(--cc-navy); outline-offset: -4px; }
.cl-film-pause {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cc-navy);
}
.cl-film-pause svg { width: 20px; height: 20px; }
.cl-film-pause .i-play { display: none; }
.cl-film-pause[aria-pressed="true"] .i-play { display: block; }
.cl-film-pause[aria-pressed="true"] .i-pause { display: none; }
.cl-film-pause:hover { background: var(--cc-navy-04); }

/* 03 객실 영상: 객실 이름 칩(틀 아래, 가운데) */
.cl-rooms { display: grid; justify-items: center; gap: var(--cc-s3); margin-top: var(--cc-s4); text-align: center; }
.cl-rooms > p { margin: 0; }
.cl-rooms .chips { justify-content: center; }

/* 04·05 휴대폰 틀 */
.cl-phone { display: grid; justify-items: center; }

/* 05 피드 9칸: 휴대폰 틀 화면(9:16) = 위 프로필 줄(글자 없음) + 아래 3×3 정사각 격자 */
.cl-feed {
  display: flex; flex-direction: column; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: inherit; background: var(--cc-white);
}
.cl-feed-head { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; padding: 10cqi 4.5cqi 2cqi; }
.cl-feed-profile { display: flex; align-items: center; gap: 5cqi; }
.cl-feed-avatar { flex: none; width: 20cqi; height: 20cqi; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 0.6cqi var(--cc-white), 0 0 0 1.2cqi var(--cc-navy-08); }
.cl-feed-avatar > img, .cl-hl > img { width: 100%; height: 100%; object-fit: cover; }
.cl-feed-stats { flex: 1; display: flex; justify-content: space-around; align-items: center; }
.cl-feed-stats > i { display: block; width: 9cqi; height: 3cqi; border-radius: 3cqi; background: var(--cc-navy); }
.cl-feed-bio { display: grid; gap: 1.6cqi; }
.cl-feed-bio > i { display: block; height: 2.4cqi; border-radius: 2.4cqi; background: var(--cc-navy-08); }
.cl-feed-bio > i:first-child { width: 58%; }
.cl-feed-bio > i:last-child { width: 38%; }
.cl-feed-hls { display: flex; justify-content: space-between; padding-inline: 1cqi; }
.cl-hl { width: 14cqi; height: 14cqi; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 0.6cqi var(--cc-white), 0 0 0 1.2cqi var(--cc-navy-08); }
.cl-feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; flex: none; }
.cl-feed-grid > img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; background: var(--cc-paper); }
.cl-short-btn { margin-top: var(--cc-s4); }   /* 숏폼 A 재생 글자 버튼(휴대폰 틀 아래 가운데) */

/* ---------------- S7 받는 것 ---------------- */
.cl-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-s3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cl-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-s4); } }
.cl-counts > li > strong { color: var(--cc-navy); }
.cl-docs { display: grid; gap: var(--cc-s4); margin-top: var(--cc-s7); }
@media (min-width: 900px) { .cl-docs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cc-s5); align-items: start; } }
.cl-docs-side { display: grid; gap: var(--cc-s4); align-content: start; }
@media (min-width: 900px) { .cl-docs-side { gap: var(--cc-s5); } }
.cl-doc { padding: 0; overflow: hidden; }
.cl-doc-head {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px;
  padding: var(--cc-s4) var(--cc-s8); cursor: pointer; list-style: none; text-align: center;
}
.cl-doc-head::-webkit-details-marker { display: none; }
.cl-doc-head::after {
  content: ""; position: absolute; right: var(--cc-s5); top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--cc-navy); border-bottom: 2px solid var(--cc-navy); transform: rotate(45deg);
  transition: transform 200ms var(--cc-ease);
}
.cl-doc[open] > .cl-doc-head::after { transform: translateY(4px) rotate(225deg); }
.cl-doc[open] > .cl-doc-head { border-bottom: 1px solid var(--cc-line); }
.cl-doc-head:focus-visible { outline: 2px solid var(--cc-navy); outline-offset: -4px; }
.cl-doc-body { padding: var(--cc-s3) var(--cc-s5) var(--cc-s5); }
.cl-doc-foot { margin: var(--cc-s4) 0 0; }
.cl-table { width: 100%; border-collapse: collapse; text-align: left; }
.cl-table th, .cl-table td { padding: var(--cc-s3) var(--cc-s2); vertical-align: top; border-bottom: 1px dashed var(--cc-line); word-break: keep-all; }
.cl-table th:first-child, .cl-table td:first-child { padding-left: 0; }
.cl-table tbody tr:last-child > * { border-bottom: 0; }
.cl-table thead th { color: var(--cc-navy-soft); border-bottom-style: solid; }
.cl-table tbody th { white-space: nowrap; }
.cl-table td.t-num { white-space: nowrap; }
.cl-room-note { display: grid; justify-items: center; gap: var(--cc-s3); padding: var(--cc-s5); }
.cl-room-note > * { margin: 0; }
.cl-room-note > p { text-align: left; }
@media (max-width: 599px) { .cl-table tbody th { white-space: normal; } }

/* ---------------- S8 지도·예약 세팅 ---------------- */
.cl-trio { display: grid; gap: var(--cc-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cl-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-s5); } }
.cl-setcard { display: grid; grid-template-rows: auto 1fr; gap: var(--cc-s4); padding: var(--cc-s5); }
.cl-setcard > h3 { margin: 0; padding-bottom: var(--cc-s3); border-bottom: 1px solid var(--cc-line); text-align: center; }
.cl-dots { display: grid; align-content: start; gap: var(--cc-s2); margin: 0; padding: 0; list-style: none; text-align: left; }
.cl-dots > li { position: relative; padding-left: var(--cc-s5); word-break: keep-all; }
.cl-dots > li::before { content: ""; position: absolute; left: var(--cc-s1); top: calc(var(--cc-lh-b) * 0.5em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--cc-navy-soft); }
.cl-band { max-width: var(--cc-max-text); margin: var(--cc-s5) auto 0; padding: var(--cc-s4) var(--cc-s5); border-radius: var(--cc-r-card); background: var(--cc-paper); text-align: center; }
.cl-setup-row { display: grid; gap: var(--cc-s6); margin-top: var(--cc-s7); }
@media (min-width: 900px) { .cl-setup-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cc-s7); align-items: center; } }
.cl-check { display: grid; gap: var(--cc-s4); padding: var(--cc-s5); }
@media (min-width: 1024px) { .cl-check { padding: var(--cc-s6); } }
.cl-check > h3 { margin: 0; padding-bottom: var(--cc-s3); border-bottom: 1px solid var(--cc-line); text-align: center; }
.cl-check-list { display: grid; gap: var(--cc-s3); margin: 0; padding: 0; list-style: none; text-align: left; }
.cl-check-list > li { position: relative; display: grid; gap: 2px; padding-left: var(--cc-s6); word-break: keep-all; }
.cl-check-list > li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--cc-lh-b) * 0.5em - 10px); width: 20px; height: 20px; box-sizing: border-box;
  border: 1.5px solid var(--cc-navy-soft); border-radius: 6px;
}
.cl-check-list > li::after {
  content: ""; position: absolute; left: 7px; top: calc(var(--cc-lh-b) * 0.5em - 6px); width: 5px; height: 9px;
  border-right: 2px solid var(--cc-navy); border-bottom: 2px solid var(--cc-navy); transform: rotate(45deg);
}
.cl-setup-side { display: grid; gap: var(--cc-s5); justify-items: center; }
.cl-setup-phone { margin: 0; width: 100%; }
.cl-setup-text { display: grid; gap: var(--cc-s2); text-align: left; }
.cl-setup-text > * { margin: 0; }
.cl-setup-side { grid-template-columns: 136px minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--cc-s4); }
@media (min-width: 600px) { .cl-setup-side { grid-template-columns: 220px minmax(0, 1fr); gap: var(--cc-s6); } }
/* 카드뉴스 게시물 화면: 휴대폰 9:16 안에 위 프로필 줄 · 4:5 카드 · 아래 줄(글자 없음) */
.cl-post { display: flex; flex-direction: column; aspect-ratio: 9 / 16; overflow: hidden; border-radius: inherit; background: var(--cc-white); }
.cl-post-head { display: flex; align-items: center; gap: 4cqi; padding: 12cqi 5cqi 4cqi; }
.cl-post-head .cl-feed-avatar { width: 11cqi; height: 11cqi; }
.cl-post-head > i, .cl-post-foot > i { display: block; height: 2.6cqi; border-radius: 2.6cqi; background: var(--cc-navy-08); }
.cl-post-head > i { width: 40%; }
.cl-post > .cl-slot { flex: none; border-radius: 0; }
.cl-post-foot { display: grid; gap: 2.4cqi; padding: 5cqi; }
.cl-post-foot > i:first-child { width: 70%; }
.cl-post-foot > i:last-child { width: 45%; }

/* ---------------- S9 검색·AI 검색 준비: 카드 4(머리 가운데 · 본문 왼쪽) ---------------- */
.cl-quad { display: grid; gap: var(--cc-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .cl-quad { grid-template-columns: 1fr 1fr; gap: var(--cc-s5); } }
.cl-qcard { display: grid; grid-template-rows: auto 1fr; gap: var(--cc-s3); padding: var(--cc-s5); }
.cl-qcard > p { margin: 0; text-align: left; }
.cl-qhead { display: grid; justify-items: center; gap: var(--cc-s2); text-align: center; }
.cl-qhead > h3 { margin: 0; }

/* ---------------- S10 처방전: 비교 → 구성 블록(리뉴얼 페이지와 같은 형식) → 합계 ---------------- */
.cl-pkg { display: grid; gap: var(--cc-s6); justify-items: center; grid-template-columns: minmax(0, 1fr); }
.cl-pkg > .cl-cmp { width: 100%; max-width: 640px; }
.cl-rx { width: 100%; max-width: 760px; margin: 0; }
/* 비교: 머리 가운데, 표는 숫자 가운데 */
.cl-cmp { display: grid; justify-items: center; gap: var(--cc-s4); padding: var(--cc-s5); text-align: center; }
.cl-cmp > * { margin: 0; }
.cl-cmp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cl-cmp-table th, .cl-cmp-table td { padding: var(--cc-s2) var(--cc-s2); border-bottom: 1px solid var(--cc-line); text-align: center; vertical-align: middle; }
.cl-cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cl-cmp-table th { font-weight: var(--cc-w-strong); }
.cl-cmp-table thead th { color: var(--cc-navy-soft); }
.cl-cmp-table tbody th { color: var(--cc-navy-soft); text-align: left; white-space: nowrap; }
.cl-cmp-table td { color: var(--cc-navy-soft); }
.cl-cmp-table .is-pick { background: var(--cc-paper); color: var(--cc-navy); }
.cl-cmp-table strong { font-weight: var(--cc-w-strong); }
.cl-cmp-table thead .is-pick { border-radius: var(--cc-r-control) var(--cc-r-control) 0 0; }
.cl-cmp-table tbody tr:last-child .is-pick { border-radius: 0 0 var(--cc-r-control) var(--cc-r-control); }
/* 구성 블록: 종이색 면, 머리 가운데 · 줄 왼쪽 + 오른쪽 값 */
.cl-pack { display: grid; gap: var(--cc-s4); padding-top: var(--cc-s4); }
.cl-pack-group { display: block; padding: var(--cc-s4); border-radius: var(--cc-r-card); background: var(--cc-paper); }
/* 묶음 머리 = 접기 단추(모바일은 접힘, 폭 900 이상은 펼침 — p-clinic.js) */
.cl-pack-head { position: relative; cursor: pointer; list-style: none; padding-inline: var(--cc-s7); }
.cl-pack-head::-webkit-details-marker { display: none; }
.cl-pack-head::after {
  content: ""; position: absolute; right: var(--cc-s2); top: 50%; width: 10px; height: 10px; margin-top: -9px;
  border-right: 2px solid var(--cc-navy); border-bottom: 2px solid var(--cc-navy); transform: rotate(45deg); transition: transform 200ms var(--cc-ease);
}
.cl-pack-group[open] > .cl-pack-head::after { transform: translateY(4px) rotate(225deg); }
.cl-pack-group:not([open]) > .cl-pack-head { padding-bottom: 0; border-bottom: 0; }
.cl-pack-head:focus-visible { outline: 2px solid var(--cc-navy); outline-offset: 4px; border-radius: var(--cc-r-control); }
@media (min-width: 600px) { .cl-pack-group { padding: var(--cc-s5); } }
.cl-pack-head { display: grid; justify-items: center; gap: var(--cc-s1); padding-bottom: var(--cc-s4); border-bottom: 1px solid var(--cc-line); text-align: center; }
.cl-pack-head > * { margin: 0; }
.cl-pack-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-pack-list > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--cc-s3);
  padding: var(--cc-s4) 0; border-bottom: 1px solid var(--cc-navy-04);
}
.cl-pack-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-pack-name { display: grid; gap: 2px; min-width: 0; text-align: left; word-break: keep-all; }
.cl-pack-val { white-space: nowrap; color: var(--cc-navy); text-align: right; }
.cl-pack-val--in { color: var(--cc-navy-soft); }
@media (max-width: 599px) { .cl-pack-val { max-width: 6.5em; white-space: normal; word-break: keep-all; } }
.cl-pack-more { margin: var(--cc-s4) 0 0; text-align: center; }
/* 합계: 숫자 가운데. 왼쪽 따로 맡기면(줄 긋기) · 오른쪽 패키지(남색) */
.cl-total { display: grid; margin: var(--cc-s5) 0 0; border-radius: var(--cc-r-card); background: var(--cc-paper); overflow: hidden; }
@media (min-width: 600px) { .cl-total { grid-template-columns: 1fr 1fr; } }
.cl-total-cell { display: grid; justify-items: center; align-content: center; gap: var(--cc-s1); padding: var(--cc-s5) var(--cc-s4); text-align: center; word-break: keep-all; }
.cl-total-cell dd, .cl-total-cell dt { margin: 0; }
.cl-total-cell s { color: var(--cc-navy-soft); text-decoration-thickness: 2px; }
.cl-total-cell--pack { background: var(--cc-navy); color: var(--cc-white); }
.cl-total-cell--pack > dt { font-weight: var(--cc-w-strong); }
.cl-total-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: var(--cc-s2); }
.cl-total-sub { color: var(--cc-rose-tint); }

/* ---------------- S11 미리 알려 드려요: 문서형 두 상자 ---------------- */
.cl-terms { display: grid; gap: var(--cc-s4); }
@media (min-width: 900px) { .cl-terms { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--cc-s5); } }
.cl-box { display: grid; grid-template-rows: auto 1fr; gap: var(--cc-s4); padding: var(--cc-s5); }
@media (min-width: 1024px) { .cl-box { padding: var(--cc-s6); } }
.cl-box-head { margin: 0; padding-bottom: var(--cc-s3); border-bottom: 1px solid var(--cc-line); text-align: center; }
.cl-box .cl-dots { gap: var(--cc-s3); }
.cl-box-rows { display: grid; align-content: start; gap: var(--cc-s3); margin: 0; text-align: left; }
.cl-box-rows > div { display: grid; gap: 2px; }
.cl-box-rows dt { color: var(--cc-navy); }
.cl-box-rows dd { margin: 0; word-break: keep-all; }
@media (min-width: 600px) {
  .cl-box-rows > div { grid-template-columns: 88px minmax(0, 1fr); gap: var(--cc-s4); align-items: baseline; }
}

/* ---------------- S12 상담 선물: 카드 2(머리 가운데 · 목차 왼쪽) ---------------- */
.cl-gifts { display: grid; gap: var(--cc-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cl-gifts { grid-template-columns: 1fr 1fr; gap: var(--cc-s5); } }
.cl-gift { display: grid; grid-template-rows: auto 1fr; gap: var(--cc-s4); padding: var(--cc-s5); }
.cl-gift-head { margin: 0; padding-bottom: var(--cc-s3); border-bottom: 1px solid var(--cc-line); text-align: center; word-break: keep-all; }
.cl-gift-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--cc-s4); align-items: start; }
@media (min-width: 600px) { .cl-gift-body { grid-template-columns: 152px minmax(0, 1fr); gap: var(--cc-s5); } }
.cl-gift-cover { border-radius: var(--cc-r-control); box-shadow: var(--cc-shadow); }
.cl-gift-text { display: grid; gap: var(--cc-s3); text-align: left; }
.cl-gift-text > p { margin: 0; }
.cl-toc { display: grid; gap: var(--cc-s1); margin: 0; padding: 0; list-style: none; counter-reset: toc; word-break: keep-all; }
.cl-toc > li { position: relative; padding-left: var(--cc-s5); counter-increment: toc; }
.cl-toc > li::before { content: counter(toc); position: absolute; left: 0; color: var(--cc-navy-soft); font-variant-numeric: tabular-nums; }
.cl-toc--plain > li::before { content: ""; position: absolute; left: var(--cc-s1); top: calc(var(--cc-lh-b) * 0.5em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--cc-navy-soft); }
.cl-gift-how { margin-top: var(--cc-s5); }

/* ---------------- S14 신청 뒤 흐름 ---------------- */
.cl-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-s3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cl-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-s4); } }
.cl-steps > li { align-content: start; gap: var(--cc-s1); padding: var(--cc-s5) var(--cc-s4); word-break: keep-all; }
.cl-steps > li > .t-h3 { color: var(--cc-rose-deep); margin-bottom: var(--cc-s1); }
.cl-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cc-s4) var(--cc-s6); margin-top: var(--cc-s7); }
.cl-end-cue { width: 96px; height: auto; flex: none; }
.cl-end-act { display: grid; justify-items: center; gap: var(--cc-s3); text-align: center; }
.cl-end-act > p { margin: 0; }

/* ---------------- 좁은 화면 ---------------- */
@media (max-width: 599px) {
  .cl-ind-art { width: 96px; height: 96px; }
}