/* =========================================================
   페이지: 메인 (index)
   메인에만 있는 부품의 다듬기. 값은 tokens.css를 씁니다.
   ========================================================= */

/* ---------- 첫 화면 ---------- */
#app .hero-image { filter: var(--rl-tone-hero); }
#app .hero-shade { background: var(--rl-hero-shade); }
#app .hero-word span { font-weight: 600; letter-spacing: -0.078em; }
#app .hero-word sup { font-size: 0.24em; font-weight: 400; letter-spacing: 0; margin-left: 0.04em; }
#app .hero-word em { font-weight: var(--rl-fw-display); letter-spacing: -0.05em; }
#app .hero-services a { font-size: 17px; font-weight: var(--rl-fw-ui); letter-spacing: var(--rl-tracking-ui); }
#app .hero-services span { letter-spacing: 0.08em; opacity: 0.75; }
#app .hero-crosses { opacity: 0.4; }
#app .hero-kicker { font-size: 14.5px; font-weight: var(--rl-fw-ui); opacity: 0.86; }
#app .hero-bottom h1 { font-size: var(--rl-fs-hero-title); font-weight: var(--rl-fw-display); letter-spacing: -0.035em; line-height: 1.36; }
#app .hero-scroll { font-weight: var(--rl-fw-ui); }
#app .hero-copyright { letter-spacing: 0.06em; opacity: 0.7; }

/* 첫 화면 사진을 맨 위까지 올려 캡슐이 사진 위에 뜨도록 */
html.rl-ds #app .hero-stage { display: flow-root; }
html.rl-ds #app .home-hero { top: 6px; margin-top: -58px; }
@media (min-width: 701px) {
  html.rl-ds #app .hero-stage { height: calc(115svh - 6px); min-height: 928px; }
  html.rl-ds #app .home-hero { height: calc(100svh - 12px); min-height: 818px; }
}
@media (max-width: 700px) {
  html.rl-ds #app .home-hero { padding-top: 116px; }
}

/* 대표원장 카드: 사진 상자와 이름 상자를 한 장으로 */
#app .mini-doctor { background: var(--rl-white); border-radius: var(--rl-r-card); padding: 6px; gap: 0; box-shadow: none; }
#app .mini-doctor img { border: 0; border-radius: var(--rl-r-media); box-shadow: none; }
#app .mini-doctor div { background: transparent; border-radius: 0; padding: 18px 16px 16px 20px; box-shadow: none; }
#app .mini-doctor small { font-size: 12.5px; font-weight: var(--rl-fw-ui); letter-spacing: -0.01em; }
#app .mini-doctor strong { font-size: 25px; font-weight: var(--rl-fw-title); letter-spacing: -0.04em; }
#app .mini-cta { font-size: 12px; font-weight: var(--rl-fw-ui); padding: 8px 12px; }

/* ---------- 진료 기준 문장 ---------- */
#app .intro-statement { font-size: var(--rl-fs-statement); font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); line-height: 1.34; }

/* ---------- 진료 분야 카드: 흰 캡션 상자를 걷어내고 사진과 한 몸으로 ---------- */
#app .care-section .editorial-heading { margin-bottom: var(--rl-head-gap-lg); }
#app .care-caption { background: transparent; border-radius: 0; padding: 2px 4px 16px; box-shadow: none; }
#app .care-caption h3 { font-size: var(--rl-fs-caption-title); font-weight: var(--rl-fw-title); letter-spacing: -0.035em; }
#app .care-caption span { font-size: var(--rl-fs-note); letter-spacing: var(--rl-tracking-label); }
#app .image-word { font-weight: var(--rl-fw-display); letter-spacing: -0.06em; }
#app .care-image-note { font-weight: var(--rl-fw-ui); letter-spacing: -0.03em; }
#app .care-wide .care-picture img { filter: var(--rl-tone-concept); }
#app .care-wide .care-picture { background: var(--rl-tone-concept-bg); }

/* ---------- 진료 설명 (남색 패널) ---------- */
#app .principles .editorial-heading { margin-bottom: var(--rl-head-gap-md); }

/* ---------- 네 가지 약속: 작은 썸네일을 빼고 문장에 집중 ---------- */
#app .promise-section .editorial-heading { margin-bottom: var(--rl-head-gap-sm); }
#app .signal-card img { display: none; }
#app .signal-card h3 { font-size: 19px; font-weight: var(--rl-fw-display); letter-spacing: -0.035em; line-height: 1.45; }
#app .promise-film-copy h2 { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }

/* ---------- 의료진 ---------- */
#app .team-editorial h2 { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }
#app .team-eyebrow { font-weight: var(--rl-fw-title); letter-spacing: -0.02em; }
#app .team-crosses { opacity: 0.45; }
#app .team-tile h3 { font-weight: var(--rl-fw-title); letter-spacing: -0.04em; }
#app .team-manifesto { letter-spacing: -0.035em; }

/* ---------- 원장 칼럼 미리보기 ---------- */
#app .column-preview-intro { padding-top: 0; }
#app .column-preview-intro h2 { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }
#app .column-preview .column-card:nth-of-type(2) .column-card-top img { filter: var(--rl-tone-concept); }

/* ---------- 운정 이야기 미리보기 ---------- */
#app .journal-heading { align-items: start; margin-bottom: var(--rl-head-gap-row); }
#app .journal-heading > p { padding-top: 2px; }
#app .journal-heading h2 { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }
#app .journal-text-card { min-height: 0; height: auto; }
#app .journal-text-card > div:last-child { margin-top: 22px; }
#app .journal-text-card h3 { font-weight: var(--rl-fw-title); letter-spacing: var(--rl-tracking-title); }
#app .journal-cover h3 { font-weight: var(--rl-fw-display); letter-spacing: -0.058em; }
#app .journal-card-top { position: relative; }
#app .journal-card-top > img { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rl-r-media-sm); }
#app .journal-card-top > svg { position: absolute; top: 12px; right: 12px; }

/* ---------- 자주 묻는 질문 (메인) ---------- */
#app #guide { padding-top: 16px; }

/* ---------- 모바일 ---------- */
@media (max-width: 700px) {
  #app .image-word { letter-spacing: -0.068em; }           /* Pretendard 폭에 맞춰 원본처럼 두 줄 */
  #app .care-wide .image-word { font-size: min(55px, 12.4vw); }
  #app .journal-text-card br { display: inline; }           /* 원본에서 붙어 버리던 단어(예: 메뉴와잠시) */
  #app #guide { padding-top: 14px; }
}

/* ================= 메인의 움직임 ================= */
/* 첫 화면은 준비될 때까지 감춰 둠 (스크립트가 최대 2.5초 안에 풉니다) */
.rl-preload #app .hero-word, .rl-preload #app .hero-services, .rl-preload #app .hero-crosses,
.rl-preload #app .hero-bottom > div, .rl-preload #app .hero-copyright, .rl-preload #app .mini-doctor { opacity: 0; }
.rl-motion #app .hero-word { animation: none; }
/* 첫 화면 사진: 살짝 열리며 확대가 풀림 */
.rl-motion #app .home-hero { transition: clip-path 1.4s var(--rl-ease); }
.rl-motion.rl-hero-pre #app .home-hero { clip-path: inset(2.2% 1.4% 2.2% 1.4% round var(--rl-r-panel)); }
.rl-motion:not(.rl-hero-pre):not(.rl-hero-done) #app .home-hero { clip-path: inset(0 0 0 0 round var(--rl-r-panel)); }
.rl-motion #app .hero-image { transition: scale 2.6s var(--rl-ease), filter .6s; }
.rl-motion.rl-hero-pre #app .hero-image { scale: 1.1; }

/* 첫 화면·의료진 패널의 + 표시를 잇는 선 */
.rl-motion #app .hero-crosses::before, .rl-motion #app .team-crosses::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; pointer-events: none;
  background: currentColor; opacity: .3; transform: scaleX(0); transform-origin: 0 50%;
}
.rl-motion #app .team-crosses { color: var(--rl-ink); }
.rl-motion #app .team-crosses::before { opacity: .14; }
.rl-motion #app .hero-crosses[data-rl-in]::before, .rl-motion #app .team-crosses[data-rl-in]::before { transform: scaleX(1); transition: transform 1.8s var(--rl-ease-io) var(--d, 0ms); }

/* 진료 설명 패널의 구분선: 왼쪽에서 그어짐 */
.rl-motion #app .principles [data-slot="accordion-item"] {
  border-color: transparent; background-repeat: no-repeat;
  background-image: linear-gradient(var(--rl-line-on-dark), var(--rl-line-on-dark));
  background-position: 0 100%; background-size: 0% 1px;
}
.rl-motion #app .principles [data-slot="accordion-item"]:first-child {
  background-image: linear-gradient(var(--rl-line-on-dark), var(--rl-line-on-dark)), linear-gradient(var(--rl-line-on-dark), var(--rl-line-on-dark));
  background-position: 0 0, 0 100%; background-size: 0% 1px, 0% 1px;
}
.rl-motion #app .principles [data-slot="accordion-item"]:last-child { background-image: none; }
.rl-motion #app .principles [data-slot="accordion-item"][data-rl-in] { background-size: 100% 1px; transition: background-size var(--rl-dur-draw) var(--rl-ease-io) var(--d, 0ms); }
.rl-motion #app .principles [data-slot="accordion-item"]:first-child[data-rl-in] { background-size: 100% 1px, 100% 1px; }

/* 제목이 줄 단위로 움직이는 묶음은 통째로 미끄러지지 않게 */
.rl-motion #app #about > div[data-reveal], .rl-motion #app .team-editorial { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rl-preload #app .hero-word, .rl-preload #app .hero-services, .rl-preload #app .hero-crosses,
  .rl-preload #app .hero-bottom > div, .rl-preload #app .hero-copyright, .rl-preload #app .mini-doctor { opacity: 1; }
}