/* 콘텐츠클리닉 3차 시안 · 1F 홈 페이지 전용(4차 담당 C)
   공통 클래스는 덮어쓰지 않고 .home-* 범위에서 배치만 정한다. 글자 크기는 6단계 클래스만. */

/* ---------------- 1. 첫 화면 ---------------- */
.home-lobby { position: relative; display: grid; background: var(--cc-paper); }
.lobby-copy { order: 0; padding-block: var(--cc-s6) var(--cc-s5); }
.lobby-art { order: 1; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lobby-art picture, .lobby-art img { display: block; width: 100%; height: 100%; }
.lobby-art img { object-fit: cover; }
/* 그림 아래 56px를 바탕색으로 페이드: 바닥이 다음 구역과 직선으로 끊기지 않게(N 11/07, 독립 검토 하-1) */
.lobby-art {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
}
.lobby-head { margin-bottom: var(--cc-s5); }

/* 제목 첫 줄은 끊지 않음. 작은 줄(.kicker) 글자 크기는 p-home.js가 첫 줄 오른쪽 끝에 맞춰 정함(JS 없으면 L 크기) */
.lobby-head .t-d > span { white-space: nowrap; }
.lobby-head .kicker { font-size: var(--cc-fs-l); line-height: 1.3; white-space: nowrap; }
.lobby-head .kicker { gap: 0.4em; }
.lobby-head .kicker::before { width: 0.36em; height: 0.36em; }   /* 글자가 커진 만큼 점도 같이 */

/* 대기 번호 화면 위 "접수중" — 화면 칸을 채우도록 그림 폭(cqw) 기준 크기.
   lobby-pc.webp 화면 칸 x 74.5~87.3% · y 11.5~24.3% */
.lobby-art { container-type: inline-size; }
.lobby-now {
  position: absolute; left: 80.9%; top: 17.9%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
  margin: 0; white-space: nowrap; color: var(--cc-white);
  font-family: var(--cc-font-head); font-weight: var(--cc-w-head); line-height: 1; letter-spacing: 0.02em;
  font-size: 2.7cqw;   /* 화면 칸 폭 12.8cqw의 약 80% */
}
.lobby-now-dot { width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--cc-rose); flex: none; }

@media (max-width: 767px) {
  /* 모바일 그림(4:5) 위 20%는 빈 천장이라 1:1 상자에 아래 맞춤 → 글과 그림 사이 빈 벽이 줄어듦 */
  .lobby-art { aspect-ratio: 1 / 1; }
  .lobby-art img { object-position: center bottom; }
  .lobby-copy { padding-bottom: var(--cc-s4); }
  .lobby-copy .actions { justify-content: center; }   /* 의장 지시: 모바일 상담 신청·1분 문진 시작 가운데 */
  /* lobby-mobile.webp 화면 칸 x 41.1~60.7% · y 33.6~40.9% → 1:1 상자 기준 y 17.0~26.1%. 칸이 작아 점은 뺌 */
  .lobby-now { left: 50.9%; top: 21.6%; font-size: 5cqw; }
  .lobby-now-dot { display: none; }
}

/* PC(1200 이상): 글 칸(컨테이너 왼쪽 선 ~ 560px, 제목 첫 줄 한 줄)은 종이색, 그림은 그 오른쪽부터 화면 끝까지.
   그림 상자 비율 1.45(16:9보다 좁음) → 오른쪽 맞춤 cover라 왼쪽 빈 벽만 잘리고 사람·접수대·닥터 큐는 그대로(왼쪽 약 18% 잘림) */
@media (min-width: 1200px) {
  .home-lobby { --lobby-edge: max(var(--cc-gutter), calc((100% - var(--cc-max)) / 2)); --lobby-copy: 560px; }
  .lobby-copy, .lobby-art { grid-area: 1 / 1; }
  .lobby-art {
    align-self: start; aspect-ratio: 1.45; margin-left: calc(var(--lobby-edge) + var(--lobby-copy) - 56px);
    /* 왼쪽 160px + 아래 56px 페이드를 겹쳐(교집합) 적용 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 160px), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .lobby-art img { object-position: right center; }
  /* 화면 칸 중심(그림 x 80.9%)을 잘린 상자 기준으로 다시 계산: 100 - 19.1 × (16/9 ÷ 1.45) = 76.6% */
  .lobby-now { left: 76.6%; font-size: 3.4cqw; }   /* 잘린 상자에서 화면 칸 폭 = 15.7cqw */
  .lobby-copy {
    position: relative; z-index: 1; align-self: center;
    width: var(--lobby-copy); margin-left: var(--lobby-edge); padding: var(--cc-s6) 0;
  }
  .lobby-copy-in { padding: 0; max-width: none; }
  .lobby-head { margin-bottom: var(--cc-s6); }
}

/* ---------------- 공통 배치 ---------------- */
/* 구역 머리 두 줄이 될 때 한 단어만 떨어지지 않게(문진 구역은 담당 D라 뺌) */
:is(#doors, #clinics, #refs, #process, #lift) .sec-head > :is(h2, .t-l) { word-break: keep-all; text-wrap: balance; }
.home-after { margin-top: var(--cc-s6); }

/* ---------------- 2. 진료과 문 2×2 ---------------- */
.home-doors { display: grid; gap: var(--cc-s6); grid-template-columns: minmax(0, 560px); justify-content: center; }
/* 명패 칸(문 폭의 31.5%)에 "03 SNS 광고 영상"이 한 줄로 들도록 모바일·태블릿은 문을 여백 쪽으로 조금 넓힘 */
@media (max-width: 767px) { .home-doors { margin-inline: calc(var(--cc-s3) * -1); } }
@media (min-width: 768px) { .home-doors { grid-template-columns: repeat(2, minmax(0, 560px)); gap: var(--cc-s7) var(--cc-s4); } }
@media (min-width: 768px) and (max-width: 1023px) { .home-doors { margin-inline: calc(var(--cc-s4) * -1); } }
@media (min-width: 1024px) { .home-doors { gap: var(--cc-s7) var(--cc-s6); } }
/* 문짝: 같은 그림에서 문 판(doorPanel x 29.8 · y 25.8 · w 40.8 · h 65.8)만 잘라 경첩(왼쪽) 기준으로 돌림 */
.home-doors .door-leaf { clip-path: inset(25.8% 29.4% 8.4% 29.8%); }
.door-room {
  position: absolute; z-index: 0; left: 29.8%; top: 25.8%; width: 40.8%; height: 65.8%;
  background: linear-gradient(90deg, var(--cc-navy-deep), var(--cc-navy) 70%, #2C3A5C);
}
.home-doors .door-info { padding-top: var(--cc-s4); }
.door-price s { margin-right: var(--cc-s1); font-weight: var(--cc-w-body); }
.door-price strong { color: var(--cc-navy); }

/* ---------------- 3. 1분 문진 (4차 담당 D) ----------------
   닥터 큐는 문진표 머리에 맞춰 고정: 말풍선은 두 줄 높이로, 그림은 3:4 상자 안 아래 맞춤이라 단계·포즈가 바뀌어도 자리가 그대로 */
.home-quiz { display: grid; align-items: start; }
.home-quiz-main { display: contents; }
.home-quiz-main > .sec-head { grid-area: head; }
.home-quiz-mount { grid-area: card; min-width: 0; }
.home-quiz-mount .rx { margin-inline: 0; }
.home-quiz-cue { grid-area: cue; display: grid; justify-items: center; gap: var(--cc-s4); text-align: center; }
.home-quiz-pose { position: relative; width: 160px; aspect-ratio: 3 / 4; }
.home-quiz-pose img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cue-say {
  position: relative; display: grid; place-items: center; box-sizing: border-box; width: 100%; max-width: 300px; margin: 0;
  min-height: calc(var(--cc-lh-b) * 2em + var(--cc-s4) * 2); padding: var(--cc-s4) var(--cc-s5);
  border-radius: var(--cc-r-card); background: var(--cc-white); box-shadow: var(--cc-shadow);
}
.cue-say::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px;
  transform: translateX(-50%) rotate(45deg); background: var(--cc-white); border-radius: 0 0 4px 0;
}
/* 태블릿·모바일: 머리 → 닥터 큐(작게, 말풍선 오른쪽) → 문진표 */
@media (max-width: 1023px) {
  .home-quiz { grid-template-areas: "head" "cue" "card"; }
  .home-quiz-cue { margin-bottom: var(--cc-s5); grid-template-columns: 84px minmax(0, 1fr); justify-items: stretch; align-items: center; text-align: left; }
  .home-quiz-pose { grid-row: 1; grid-column: 1; width: 84px; }
  .home-quiz-cue .cue-say { grid-row: 1; grid-column: 2; max-width: none; place-items: center start; padding: var(--cc-s3) var(--cc-s4); min-height: calc(var(--cc-lh-b) * 2em + var(--cc-s3) * 2); }
  .home-quiz-cue .cue-say::after { left: -6px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); border-radius: 0 0 0 4px; }
}
/* PC: 문진표·처방전 칸(560, 공통 .rx와 같은 폭)과 닥터 큐 칸(300)을 한 묶음으로 가운데. 닥터 큐는 문진표 윗선에 고정(따라 내려오지 않음) */
@media (min-width: 1024px) {
  .home-quiz { grid-template-columns: minmax(0, 560px) 300px; grid-template-areas: "head ." "card cue"; gap: 0 var(--cc-s7); justify-content: center; }
  .home-quiz-pose { width: 220px; }
}

/* ---------------- 4. 업종 전문 클리닉 ---------------- */
.home-clinics { display: grid; gap: var(--cc-s7); }
.clinic-row { display: grid; gap: var(--cc-s4); justify-items: center; }
.clinic-grid { display: grid; width: 100%; gap: var(--cc-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .clinic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-s4); } }
@media (min-width: 1024px) { .clinic-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.clinic-grid > li { display: grid; }
.clinic-cell {
  display: grid; justify-items: center; align-content: center; gap: var(--cc-s2);
  padding: var(--cc-s5) var(--cc-s3); text-align: center; color: var(--cc-navy); text-decoration: none;
  transition: transform var(--cc-dur) var(--cc-ease);
}
a.clinic-cell:hover { transform: translateY(-3px); }
.clinic-icon { position: relative; width: 88px; aspect-ratio: 1; margin-bottom: var(--cc-s1); }
.clinic-icon > img { width: 100%; height: 100%; object-fit: contain; }   /* 아이콘 원본이 정사각이 아니어도 비율 유지 */
/* 숙소 칸: 패키지 이름 + 취소선 정가 → 전용가(4F 허브와 같은 틀) */
.clinic-pk { color: var(--cc-rose-deep); }
.clinic-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 var(--cc-s2); }
.clinic-price s { color: var(--cc-navy-soft); font-weight: var(--cc-w-body); }
.clinic-price strong { font-weight: var(--cc-w-strong); color: var(--cc-navy); }
@media (max-width: 599px) { .clinic-icon { width: 72px; } .clinic-cell { padding: var(--cc-s4) var(--cc-s2); } }

/* ---------------- 5. 레퍼런스 맛보기 ---------------- */
.ref-row { display: grid; gap: var(--cc-s5); align-items: center; justify-content: center; }
.ref-item { margin: 0; min-width: 0; }
/* 01: 노트북 큰 것 1 + 작은 것 2(세로로 쌓아 같은 높이) */
.ref-row--sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-row--sites .ref-item--main { grid-column: 1 / -1; }
@media (min-width: 900px) {
  /* 큰 것 높이 = 작은 것 2개 + 글줄 1개 + 틈 → 폭 비율 2.27 : 1 */
  .ref-row--sites { grid-template-columns: minmax(0, 2.27fr) minmax(0, 1fr); column-gap: var(--cc-s6); row-gap: var(--cc-s5); align-items: start; }
  .ref-row--sites .ref-item--main { grid-column: 1; grid-row: 1 / span 2; }
}
/* 02: 가로 16:9 상자 + 휴대폰 */
.ref-wide { aspect-ratio: 16 / 9; border-radius: var(--cc-r-card); overflow: hidden; background: var(--cc-line); box-shadow: var(--cc-shadow); }
.ref-wide > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref-row--film { grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* 글줄(업종 · 서비스)이 한 높이에 오도록 아래 맞춤 */
.ref-row--film, .ref-row--phones { align-items: end; }
.ref-row--film .ref-item--main { width: 100%; }
.ref-row--film .ref-item:not(.ref-item--main) { width: 200px; }
@media (min-width: 900px) {
  .ref-row--film { grid-template-columns: minmax(0, 800px) 252px; column-gap: var(--cc-s6); }
  .ref-row--film .ref-item:not(.ref-item--main) { width: 100%; }
}
/* 03: 휴대폰 하나 */
.ref-row--single { grid-template-columns: minmax(0, 240px); }
@media (min-width: 900px) { .ref-row--single { grid-template-columns: 252px; } }
/* 04: 가운데 큰 휴대폰 + 양옆 작은 휴대폰 */
.ref-row--phones { grid-template-columns: repeat(2, minmax(0, 160px)); column-gap: var(--cc-s5); }
.ref-row--phones .ref-item--main { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 220px; }
@media (min-width: 768px) {
  .ref-row--phones { grid-template-columns: 200px 252px 200px; column-gap: var(--cc-s7); }
  .ref-row--phones .ref-item--main { grid-column: 2; width: 100%; }
}

/* ---------------- 6. 진료 과정 + 안심 처방 ---------------- */
.home-steps { display: grid; gap: var(--cc-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .home-steps { gap: var(--cc-s5); } }
@media (min-width: 1024px) { .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-step { padding: var(--cc-s6) var(--cc-s5); }
/* 같은 줄 카드의 제목 위치·위아래 여백이 같도록 설명 칸 높이를 줄 수로 맞춤(PC·모바일 모두 2줄) */
.home-step > p { min-height: calc(var(--cc-fs-b) * var(--cc-lh-b) * 2); }
.home-step > img { width: auto; height: 112px; margin-bottom: var(--cc-s2); }
/* 설명이 두 줄일 때 한 단어만 떨어지지 않게("…먼저 / 연락드려요" → 고르게) */
.home-step > p, .door-info > p { word-break: keep-all; text-wrap: balance; }
@media (max-width: 599px) { .home-step { padding: var(--cc-s5) var(--cc-s3); } .home-step > img { height: 88px; } .home-step > p { min-height: calc(var(--cc-fs-b) * var(--cc-lh-b) * 2); } }
/* 진료 과정과 안심 처방을 작은 머리줄로 나눔 */
.home-safe-head { margin-top: var(--cc-s7); }
ul.home-safe {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--cc-s4); border-top: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line);
}
.home-safe > li {
  display: grid; align-content: start; justify-items: center; gap: var(--cc-s1);
  padding: var(--cc-s5) var(--cc-s4); text-align: center;
}
.home-safe > li:nth-child(odd) { border-right: 1px solid var(--cc-line); padding-right: calc(var(--cc-s4) - 1px); }
.home-safe > li:nth-child(-n+2) { border-bottom: 1px solid var(--cc-line); padding-bottom: calc(var(--cc-s5) - 1px); }
@media (min-width: 1024px) {
  ul.home-safe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-safe > li { padding: var(--cc-s6) var(--cc-s5); }
  .home-safe > li:nth-child(-n+2) { border-bottom: 0; padding-bottom: var(--cc-s6); }
  .home-safe > li:not(:last-child) { border-right: 1px solid var(--cc-line); padding-right: calc(var(--cc-s5) - 1px); }
}

/* ---------------- 7. 엘리베이터 ---------------- */
/* 닥터 큐 키 = 버튼판 높이(--key 5개 + 틈 4개 + 위아래 안쪽 여백) */
.home-lift { --key: 52px; --key-gap: var(--cc-s2); --board-pad: var(--cc-s4); }
@media (min-width: 768px) { .home-lift { --key: 64px; --key-gap: var(--cc-s3); --board-pad: var(--cc-s5); } }
.home-lift-in { display: grid; gap: var(--cc-s7); justify-items: center; }
.home-lift .sec-head { margin-bottom: var(--cc-s5); }
.home-lift .sec-head > .t-l { color: rgba(255, 255, 255, 0.84); }
.home-lift-panel { display: flex; align-items: flex-end; justify-content: center; gap: var(--cc-s5); }
.home-lift-cue { width: auto; height: calc(var(--key) * 5 + var(--key-gap) * 4 + var(--board-pad) * 2); flex: none; }
.lift-board {
  display: grid; gap: var(--key-gap); padding: var(--board-pad) calc(var(--board-pad) + var(--cc-s2));
  border-radius: var(--cc-r-card); background: linear-gradient(160deg, #3A4766, #1E2A47);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--cc-shadow);
}
.lift-key {
  display: grid; grid-template-columns: var(--key) auto; align-items: center; gap: var(--cc-s4);
  min-height: var(--key); padding-right: var(--cc-s2); color: var(--cc-white); text-decoration: none; text-align: left;
}
.lift-key-btn {
  display: grid; place-items: center; width: var(--key); height: var(--key); border-radius: 50%; padding-top: 1px;
  background: radial-gradient(circle at 50% 35%, #56627F, #2A3554); color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22), 0 2px 0 rgba(0, 0, 0, 0.25);
  font-variant-numeric: tabular-nums; transition: box-shadow var(--cc-dur) var(--cc-ease), background-color var(--cc-dur) var(--cc-ease);
}
.lift-key > .t-s { color: rgba(255, 255, 255, 0.84); white-space: nowrap; }
.lift-key:hover .lift-key-btn, .lift-key:focus-visible .lift-key-btn { box-shadow: inset 0 0 0 2px var(--cc-rose-tint), 0 2px 0 rgba(0, 0, 0, 0.25); }
.lift-key.is-here .lift-key-btn {
  background: radial-gradient(circle at 50% 35%, #FF7FA8, var(--cc-rose-deep)); color: var(--cc-white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(240, 67, 127, 0.28);
}
.lift-key.is-here > .t-s { color: var(--cc-white); }
/* 모바일: 폭 350 안에 닥터 큐 + 버튼판이 들도록 닥터 큐는 버튼판보다 작게, 아래 맞춤 */
@media (max-width: 599px) { .home-lift { --board-pad: var(--cc-s3); } .home-lift-panel { gap: var(--cc-s2); } .home-lift-cue { height: 192px; } .lift-key { gap: var(--cc-s3); } }
@media (min-width: 1024px) { .home-lift-panel { gap: var(--cc-s7); } }

/* 6-1 진료 과정 영상(M-02, 11/09): 구역 머리 아래 · 단계 카드 위. 768 이상 16:9 · 미만 1:1(하나만 보임 → 안 보이는 쪽은 받지 않음) */
.home-process-film {
  max-width: 880px; margin: 0 auto var(--cc-s6); border-radius: var(--cc-r-card); overflow: hidden;
  background: var(--cc-paper); box-shadow: var(--cc-shadow);
}
.home-process-film > video { display: block; width: 100%; height: auto; }
.home-process-film > .home-vid-sq { display: none; }
@media (max-width: 767px) {
  .home-process-film > .home-vid-wide { display: none; }
  .home-process-film > .home-vid-sq { display: block; }
}
@media (min-width: 1024px) { .home-process-film { margin-bottom: var(--cc-s7); } }