/* 5F 상담 신청 · 페이지 CSS (담당 I)
   글자 크기·굵기는 클래스(.t-d .t-h3 .t-l .t-b .t-s)로만. 공통 클래스 값을 덮어쓰지 않고 이 페이지 전용 클래스(c- · cx-)를 더한다.
   테두리 상자는 상담 차트(.chart.cx)와 접수증(.cx-rcpt) 둘만. */

/* 키보드로 칸을 옮길 때 붙박이 머리줄(+시안 띠) 아래로 숨지 않게 */
html { scroll-padding-top: calc(var(--cc-header-h) + 64px); }

/* ---------------- 시안 띠에 덧붙이는 글 ---------------- */

/* ---------------- 1. 첫 화면: 왼쪽 글 + 오른쪽 장면(4:3) ---------------- */
/* 장면(2880×1621, 왼쪽 58% 빈 벽)을 첫 화면에 꽉 채우고 글은 왼쪽 빈 벽 위(최대 640px) — 2F 서비스 첫 화면과 같은 방식.
   1023 이하는 글 → 그림, 767 이하는 원본을 1:1 상자에 위·오른쪽 맞춤(모니터가 잘리지 않게). (N 11/07) */
.c-hero { position: relative; padding-top: var(--cc-s7); }
.c-hero-grid { display: grid; gap: var(--cc-s6); }
.c-hero-text { display: grid; gap: var(--cc-s3); justify-items: start; text-align: left; max-width: 640px; }
.c-hero-art { margin: 0 calc(var(--cc-gutter) * -1); }
.c-hero-art img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .c-hero-art img { aspect-ratio: 1; object-fit: cover; object-position: 100% 0; } }
.c-hero + .section--join { padding-top: var(--cc-s7); }   /* 첫 화면이 그림으로 끝나므로 차트 위 여백을 다시 줌 */
@media (min-width: 1024px) {
  .c-hero { padding-top: 0; height: calc(100svh - var(--cc-header-h) - 44px); min-height: 600px; overflow: hidden; }   /* 44px = 시안 띠 */
  .c-hero-grid { height: 100%; align-content: center; }
  .c-hero-text { position: relative; z-index: 1; }
  .c-hero-art { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .c-hero-art img { height: 100%; object-fit: cover; object-position: right center; }
}

/* ---------------- 2. 상담 차트 + 닥터 큐 ---------------- */
.c-desk-grid { display: grid; gap: var(--cc-s4); align-items: stretch; }
@media (min-width: 1024px) {
  .c-desk-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--cc-s6); }
}
.c-main { display: grid; min-width: 0; }
.c-main > * { min-width: 0; }
.c-main > .cx-rcpt { align-self: start; }

.cx { display: flex; flex-direction: column; }
.cx, .cx-rcpt { scroll-margin-top: calc(var(--cc-header-h) + var(--cc-s4)); }

/* 머리: 상담 차트 + 단계 1~4 */
.cx-head {
  display: grid; justify-items: center; gap: var(--cc-s4);
  padding: var(--cc-s5) var(--cc-s5) var(--cc-s4); border-bottom: 1px solid var(--cc-line); text-align: center;
}
.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.cx-steps li { position: relative; display: grid; justify-items: center; }
.cx-steps li + li::before {
  content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--cc-line);
}
.cx-steps li.is-done + li::before, .cx-steps li.is-current::before { background: var(--cc-navy); }
.cx-sb {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: var(--cc-s2);
  min-height: 44px; width: 100%; padding: 0 var(--cc-s1); border: 0; background: none; color: var(--cc-navy-soft);
}
.cx-sb:disabled { cursor: default; }
.cx-sb:not(:disabled):hover .cx-dot { box-shadow: 0 0 0 3px var(--cc-navy-08); }
.cx-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cc-navy-08); color: var(--cc-navy-soft); font-variant-numeric: tabular-nums;
  transition: background-color var(--cc-dur) var(--cc-ease), color var(--cc-dur) var(--cc-ease), box-shadow var(--cc-dur) var(--cc-ease);
}
.cx-dot svg { width: 16px; height: 16px; }
.cx-steps li.is-done .cx-dot { background: var(--cc-navy); color: var(--cc-white); }
.cx-steps li.is-current .cx-dot { background: var(--cc-rose-deep); color: var(--cc-white); box-shadow: 0 0 0 4px rgba(240, 67, 127, 0.2); }
.cx-steps li.is-current .cx-sb, .cx-steps li.is-done .cx-sb { color: var(--cc-navy); }
@media (max-width: 599px) {
  .cx-head { padding: var(--cc-s4); }
  .cx-sb:not([aria-current]) .cx-sl {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* 본문 */
.cx-body { flex: 1 1 auto; padding: var(--cc-s5); }
@media (max-width: 599px) { .cx-body { padding: var(--cc-s4); } }
.cx-h { margin: 0 0 var(--cc-s5); }
.cx-h:focus { outline: none; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--cc-s5) var(--cc-s4); }
.cx-stack { display: grid; gap: var(--cc-s5); }
.cx-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.cx-fs > legend { padding: 0; margin-bottom: var(--cc-s2); }
.req { margin-left: var(--cc-s1); color: var(--cc-navy-soft); }
.cx-inds { margin-top: var(--cc-s4); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--cc-rose-deep); box-shadow: 0 0 0 1px var(--cc-rose-deep); }
.cx-err { display: flex; align-items: flex-start; gap: var(--cc-s2); margin: 0; }
.cx-err svg { flex: none; width: 16px; height: 16px; margin-top: 4px; }
.cx-err[hidden] { display: none; }

.cx-foot #cx-next { margin-left: auto; }

/* 미리 채움 알림 */
.cx-prefill {
  display: flex; align-items: center; gap: var(--cc-s3); margin: 0 0 var(--cc-s5);
  padding: var(--cc-s3) var(--cc-s4); border-radius: var(--cc-r-control); background: var(--cc-navy-04);
}
.cx-prefill svg { flex: none; width: 20px; height: 20px; color: var(--cc-rose-deep); }

/* 3단계 서비스 칸 */
.cx-opt-t { display: grid; gap: 2px; min-width: 0; }
.opts .opt--sub { margin-left: 36px; }
.opts .opt > input:disabled + span { cursor: not-allowed; opacity: 0.5; }
@media (max-width: 599px) { .opts .opt--sub { margin-left: var(--cc-s5); } }

/* 4단계 요약(문서형 표) + 동의 */
.cx-sum { margin: 0 0 var(--cc-s5); border-top: 1px solid var(--cc-line); }
.cx-sum-row {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--cc-s4); align-items: baseline;
  padding: var(--cc-s3) 0; border-bottom: 1px dashed var(--cc-line);
}
.cx-sum-row > dt { color: var(--cc-navy-soft); }
.cx-sum-row > dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 599px) { .cx-sum-row { grid-template-columns: minmax(0, 1fr); gap: var(--cc-s1); } }
.cx-consent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-s2) var(--cc-s4); }
.cx-consent .opt { flex: 1 1 320px; }
.cx-consent a.link { display: inline-flex; align-items: center; min-height: 44px; }
.cx-consent + .cx-err { margin-top: var(--cc-s3); }
.cx-news { margin-top: var(--cc-s3); }   /* 뉴스레터 선택 동의(숙소 패키지일 때만) */

/* ---------------- 문진 처방 요약(문진을 마치고 온 경우, 4차 담당 D) ----------------
   차트 안 옅은 면(테두리 없음). 머리 왼쪽 제목·오른쪽 "문진 다시 하기", 칸은 이름 | 값 */
.cx-rx { margin: 0 0 var(--cc-s5); padding: var(--cc-s4) var(--cc-s5); border-radius: var(--cc-r-control); background: var(--cc-navy-04); }
.cx-rx-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-s3); }
.cx-rx-head h3 { margin: 0; }
.cx-rx-head a.link { display: inline-flex; align-items: center; min-height: 44px; }
.cx-rx-rows { margin: var(--cc-s2) 0 0; }
.cx-rx-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--cc-s3); align-items: baseline;
  padding: var(--cc-s2) 0; border-top: 1px dashed var(--cc-line);
}
.cx-rx-row > dt { color: var(--cc-navy-soft); }
.cx-rx-row > dd { margin: 0; overflow-wrap: anywhere; }
.cx-rx-row s { text-decoration-thickness: 1px; }
@media (max-width: 599px) { .cx-rx { padding: var(--cc-s3) var(--cc-s4); } }
/* 두 단계(기본 정보 → 확인)만 보일 때 단계 띠도 두 칸 */
.cx.is-rx .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-steps li[hidden] { display: none; }

/* ---------------- 접수증: 번호표 모양 ---------------- */
.cx-rcpt {
  position: relative; width: 100%; max-width: 560px; margin-inline: auto; text-align: left;
  background: var(--cc-white); border: 1px solid var(--cc-line); border-radius: var(--cc-r-card);
}
.cx-rcpt:focus { outline: none; }
.cx-rcpt-head {
  display: flex; align-items: center; justify-content: center; gap: var(--cc-s3);
  padding: var(--cc-s4) var(--cc-s5); background: var(--cc-paper); border-bottom: 1px solid var(--cc-line);
  border-radius: 13px 13px 0 0; text-align: center;
}
.cx-rcpt-head img { width: 34px; height: auto; flex: none; }
.cx-rcpt-head h2:focus { outline: none; }
.cx-rcpt-rows { margin: 0; padding: var(--cc-s2) var(--cc-s5) var(--cc-s4); }
.cx-rcpt-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cc-s4); align-items: baseline;
  padding: var(--cc-s3) 0; border-bottom: 1px dashed var(--cc-line);
}
.cx-rcpt-row:last-child { border-bottom: 0; }
.cx-rcpt-row > dt { color: var(--cc-navy-soft); white-space: nowrap; }
.cx-rcpt-row > dd { margin: 0; text-align: right; white-space: pre-line; overflow-wrap: anywhere; }
.cx-rcpt-cut { position: relative; height: 0; border-top: 2px dashed var(--cc-line); }
.cx-rcpt-cut::before, .cx-rcpt-cut::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cc-paper); border: 1px solid var(--cc-line);
}
.cx-rcpt-cut::before { left: -13px; clip-path: inset(0 0 0 50%); }
.cx-rcpt-cut::after { right: -13px; clip-path: inset(0 50% 0 0); }
.cx-rcpt-stub { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-s4); padding: var(--cc-s5); }
.cx-rcpt-stub p { margin: 0; }
.cx-rcpt-act { display: grid; justify-items: center; gap: var(--cc-s2); padding: 0 var(--cc-s5) var(--cc-s5); text-align: center; }
.cx-rcpt-act a.link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 599px) {
  .cx-rcpt-head, .cx-rcpt-stub { padding-inline: var(--cc-s4); }
  .cx-rcpt-rows { padding-inline: var(--cc-s4); }
  .cx-rcpt-act { padding-inline: var(--cc-s4); }
}

/* ---------------- 닥터 큐(차트 옆, 모바일은 차트 위 작게) ---------------- */
.c-cue {
  order: -1; display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: var(--cc-s4);
  padding: var(--cc-s3) var(--cc-s4); text-align: center;
  background: var(--cc-white); border-radius: var(--cc-r-card); box-shadow: var(--cc-shadow);
}
.c-cue-say {
  position: relative; display: grid; place-items: center; min-height: 56px; margin: 0;
  padding: var(--cc-s2) var(--cc-s4); border-radius: 12px; background: var(--cc-navy-04);
}
.c-cue-say::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%) rotate(45deg); background: var(--cc-navy-04); border-radius: 2px;
}
.c-cue-img { display: block; width: 72px; height: auto; aspect-ratio: 595 / 800; justify-self: center; }
@media (min-width: 768px) {
  .c-cue { grid-template-columns: minmax(0, 1fr) 88px; }
  .c-cue-img { width: 88px; }
}
/* PC: 흰 상자 없이 말풍선 + 닥터 큐만, 내용 높이로, 차트를 따라 내려옴 */
@media (min-width: 1024px) {
  .c-cue {
    order: 0; align-self: start; position: sticky; top: calc(var(--cc-header-h) + var(--cc-s5));
    grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--cc-s4);
    padding: 0; background: none; border-radius: 0; box-shadow: none;
  }
  .c-cue-say { width: min(100%, 288px); min-height: calc(var(--cc-lh-b) * 2em + var(--cc-s5)); }
  .c-cue-say::after { right: auto; left: 50%; top: auto; bottom: -5px; transform: translateX(-50%) rotate(45deg); }
  .c-cue-img { width: min(100%, 256px); }
}

/* ---------------- 6. 진료 과정 · 안심 처방 ---------------- */
.c-flow { padding-top: 0; padding-bottom: var(--cc-section); }
.c-flow-in { display: grid; gap: var(--cc-s7); }
.c-flow-group { display: grid; gap: var(--cc-s5); justify-items: center; }
.c-cards { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: var(--cc-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-cards > li { min-width: 0; }
@media (min-width: 900px) { .c-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-s5); } }
.c-cards .num svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .c-cards .card--short { padding-inline: var(--cc-s3); } }