/* =========================================================
   공통 부품 (여러 페이지가 함께 쓰는 것)
   모든 값은 tokens.css에서 옵니다. html.rl-ds = 새 디자인이 켜져 있을 때.
   ========================================================= */

/* ---------- 머리글: 사진 위에 떠 있는 유리 캡슐 (원래 메뉴 그대로) ---------- */
html.rl-ds { scroll-padding-top: 96px; }
html.rl-ds #app .header {
  position: fixed; z-index: 45;
  top: calc(env(safe-area-inset-top, 0px) + var(--rl-cap-top)) !important; left: var(--rl-cap-m); right: var(--rl-cap-m);
  height: var(--rl-cap-h); padding: 0 214px 0 26px; border-radius: var(--rl-r-pill);
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none;
}
/* 유리는 머리글 자신이 아니라 뒤쪽 층에 — 그래야 안에서 열리는 메뉴 패널도 따로 흐림을 가질 수 있음 */
html.rl-ds #app .header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--rl-glass-cap-bg);
  -webkit-backdrop-filter: var(--rl-glass-cap-blur); backdrop-filter: var(--rl-glass-cap-blur);
  border: 1px solid var(--rl-glass-cap-line); box-shadow: var(--rl-glass-cap-shadow);
}
html.rl-ds #app .header .brand { width: 176px; }
html.rl-ds #app .header [data-slot="navigation-menu-trigger"] { background: transparent !important; height: var(--rl-cap-h); }
html.rl-ds #app .desktop-mega button { font-size: var(--rl-fs-ui); font-weight: var(--rl-fw-ui); letter-spacing: var(--rl-tracking-ui); }
/* 원본의 '본문으로 바로가기'는 캡슐 위로 비치지 않게 (키보드로 가면 캡슐 아래에 나타남) */
html.rl-ds #app .header .skip-link { top: -140px; }
html.rl-ds #app .header .skip-link:focus { top: calc(var(--rl-cap-h) + 10px); }

/* 캡슐 오른쪽: 전화, 예약·상담 (원본 앱 바깥에 붙인 요소) */
html:not(.rl-ds) .rl-cap-tools { display: none !important; }
.rl-cap-tools {
  position: fixed; z-index: 46; display: flex; align-items: center; gap: 6px;
  top: calc(env(safe-area-inset-top, 0px) + var(--rl-cap-top) + (var(--rl-cap-h) - 40px) / 2);
  right: calc(var(--rl-cap-m) + var(--rl-cap-tools-offset));
}
.rl-cap-tools a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: var(--rl-r-pill); text-decoration: none; font: 600 14.5px/1 var(--rl-font); letter-spacing: -.01em; }
.rl-cap-tools .rl-tel { width: 40px; color: var(--rl-ink); }
.rl-cap-tools .rl-tel:hover { background: rgba(23, 54, 82, .06); }
.rl-cap-tools .rl-cta { padding: 0 18px 0 14px; background: var(--rl-ink); color: var(--rl-white); }
.rl-cap-tools .rl-cta:hover { background: var(--rl-ink-hover); }
.rl-cap-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rl-cap-tools .rl-s { display: none; }
.rl-cap-tools :focus-visible { outline: 2px solid var(--rl-ink); outline-offset: 3px; }

/* ---------- 메뉴 패널: 원래 구성 그대로, 캡슐 아래 둥근 서리 유리 ---------- */
html.rl-ds #app .header .mega-panel {
  top: calc(100% + 10px) !important; left: 0 !important; right: 0 !important; width: auto !important;
  border-radius: var(--rl-r-panel) !important;
  background: var(--rl-glass-sheet-bg) !important;
  -webkit-backdrop-filter: var(--rl-glass-sheet-blur); backdrop-filter: var(--rl-glass-sheet-blur);
  border: 1px solid var(--rl-glass-sheet-line);
  box-shadow: var(--rl-glass-sheet-shadow);
  overflow: visible !important;
}
/* 유리 위에 바로 얹힌 작은 글은 조금 진하게 — 대비 4.5:1 이상 */
html.rl-ds #app .header .mega-panel .mega-intro *:not(h2):not(h3),
html.rl-ds #app .header .mega-panel .mega-bottom *:not(button):not(svg):not(path) { color: var(--rl-ink-on-glass); }
/* 캡슐과 패널 사이 틈을 지나갈 때 메뉴가 닫히지 않게 */
html.rl-ds #app .header .mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* ---------- 섹션 머리: 라벨 · 제목 · 보조 문장을 한 가는 선에 매달기 ---------- */
#app .section-label { position: relative; font-size: var(--rl-fs-label); font-weight: var(--rl-fw-label); letter-spacing: var(--rl-tracking-label); }
#app .editorial-heading { align-items: start; }
#app .editorial-heading > .editorial-note { align-self: start; margin-top: 0; }
#app .side-note, #app .editorial-note { font-size: var(--rl-fs-note); line-height: var(--rl-lh-note); padding-left: 0; }
#app .editorial-count { font-weight: var(--rl-fw-title); letter-spacing: -0.02em; }

/* ---------- 제목 ---------- */
#app .display { font-weight: var(--rl-fw-display); letter-spacing: var(--rl-tracking-display); }
#app .section-title { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }
#app .visit-copy h3 { font-weight: var(--rl-fw-subheading); letter-spacing: var(--rl-tracking-subheading); }

/* ---------- 알약 버튼 ---------- */
#app .pill { font-size: var(--rl-fs-pill); font-weight: var(--rl-fw-ui); letter-spacing: var(--rl-tracking-label); }

/* ---------- 진료 설명 목록 (펼치는 목록) ---------- */
#app .service-title { font-size: var(--rl-fs-service); font-weight: var(--rl-fw-subheading); letter-spacing: var(--rl-tracking-subheading); }
#app .service-index { letter-spacing: 0.02em; }
#app .service-description p { font-size: 16px; line-height: 1.75; }
#app .tags span { font-weight: var(--rl-fw-ui); }

/* ---------- 자주 묻는 질문 ---------- */
#app .questions button { font-size: var(--rl-fs-faq); font-weight: var(--rl-fw-subheading); letter-spacing: -0.025em; }

/* ---------- 원장 칼럼 카드: 카드 폭 사진, 화살표는 사진 위 ---------- */
#app .column-card { min-height: 0; height: auto; }
#app .column-card-top { position: relative; }
#app .column-card-top img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rl-r-media); }
#app .column-card-top > span { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; }
#app .column-card-copy { margin-top: 22px; }
#app .column-card h3 { font-size: var(--rl-fs-card-title); font-weight: var(--rl-fw-title); letter-spacing: var(--rl-tracking-title); line-height: 1.42; }
#app .column-card p { font-size: var(--rl-fs-note); line-height: 1.65; }

/* ---------- 사진 위 둥근 화살표 버튼: 유리 (마우스를 올리면 파랑으로 채워지고 45도 회전) ---------- */
html.rl-ds #app .round-arrow,
html.rl-ds #app .film-link > span,
html.rl-ds #app .column-card-top > span,
html.rl-ds #app .journal-card-top > svg,
html.rl-ds #app .journal-cover > svg {
  background-color: var(--rl-glass-btn-bg);
  -webkit-backdrop-filter: var(--rl-glass-btn-blur); backdrop-filter: var(--rl-glass-btn-blur);
  border: 1px solid var(--rl-glass-btn-line);
  box-shadow: none;
  color: var(--rl-ink);
  transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--rl-ease-btn);
}
/* 어두운 사진 위 버튼은 흰 화살표 */
html.rl-ds #app .film-link > span, html.rl-ds #app .journal-cover > svg { color: var(--rl-white); }
html.rl-ds #app .column-card-top > span { width: 38px; height: 38px; }
html.rl-ds #app .journal-card-top > svg { width: 36px; height: 36px; padding: 10px; box-sizing: border-box; border-radius: 50%; }
html.rl-ds #app .journal-cover > svg { width: 44px; height: 44px; padding: 12px; box-sizing: border-box; border-radius: 50%; }
html.rl-ds #app .care-card:hover .round-arrow,
html.rl-ds #app .film-link:hover > span,
html.rl-ds #app .column-card:hover .column-card-top > span,
html.rl-ds #app .journal-text-card:hover .journal-card-top > svg,
html.rl-ds #app .journal-cover:hover > svg {
  background-color: var(--rl-accent); color: var(--rl-white); border-color: transparent; transform: rotate(45deg);
}

/* ---------- 글 링크와 사진 카드의 마우스 반응 ---------- */
#app .column-read, #app .hero-scroll, #app .team-note > div > span {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  padding-bottom: 2px; transition: background-size .55s var(--rl-ease);
}
#app .column-card:hover .column-read, #app .hero-scroll:hover, #app .team-note:hover > div > span { background-size: 100% 1px; }
#app .team-tile img, #app .column-card-top img, #app .journal-card-top img, #app .journal-cover img { transition: scale 1.3s var(--rl-ease), filter .6s; }
#app .team-tile:hover img, #app .column-card:hover .column-card-top img,
#app .journal-text-card:hover .journal-card-top img, #app .journal-cover:hover img { scale: var(--rl-hover-zoom); }

/* =========================================================
   하위 페이지 공통 (36개 페이지)
   ========================================================= */
/* 첫 화면: 사진 패널 위 큰 제목과 옆 카드들 */
#app .canvas-copy h1 { font-weight: var(--rl-fw-photo); letter-spacing: var(--rl-tracking-photo); line-height: 1.22; }
#app .opening-card h2, #app .opening-person-card h2 { font-weight: var(--rl-fw-subheading); letter-spacing: var(--rl-tracking-subheading); }
#app .opening-card p { font-size: 15.5px; line-height: 1.65; }
#app .opening-facts h2 { font-size: var(--rl-fs-small-title); font-weight: var(--rl-fw-title); letter-spacing: -0.035em; }

/* 섹션 큰 제목 (두 줄 제목) */
#app .statement-heading h2, #app .guide-directory-heading h2 { font-weight: var(--rl-fw-heading); letter-spacing: var(--rl-tracking-heading); }

/* 안내 카드 (임플란트 묶음): 반복되던 작은 썸네일을 빼고 문장에 집중, 화살표는 오른쪽 위 */
#app .guide-topic { position: relative; min-height: 250px; }
#app .guide-topic-top { display: contents; }
#app .guide-topic-top img { display: none; }
#app .guide-topic .guide-plus { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; background: var(--rl-ink); transition: background-color .35s, transform .45s var(--rl-ease-btn); }
#app .guide-topic:hover .guide-plus { background: var(--rl-accent); transform: rotate(45deg); }
#app .guide-topic-en { margin-top: 4px; margin-bottom: 0; font-size: 13px; font-weight: var(--rl-fw-label); letter-spacing: -0.01em; }
#app .guide-topic > div:last-child { margin-top: 40px; flex: 1; display: flex; flex-direction: column; }   /* 제목은 같은 높이에서 시작 */
#app .guide-topic .guide-topic-name { margin-top: auto; padding-top: 18px; }                    /* 링크는 카드 아래에 맞춤 */
#app .guide-topic h3 { font-size: var(--rl-fs-card-title); font-weight: var(--rl-fw-title); letter-spacing: var(--rl-tracking-title); line-height: 1.4; }
#app .guide-topic p { font-size: var(--rl-fs-note); line-height: 1.65; }

/* 다음 페이지 카드: 카드 안에서는 섹션 머리선을 쓰지 않음 (카드 테두리와 겹침) */
.rl-motion #app .next-page .section-label::before { display: none; }

/* ---------- 페이지 위 여백 ---------- */
/* 원본의 '스크롤하면 첫 화면이 살짝 작아지는' 계산은 머리글 64px 기준이라 그 자리를 남겨 둠 */
html.rl-ds #app main::before { content: ""; display: block; height: var(--rl-header-space); }
/* 하위 페이지: 밝은 바탕에서 시작하므로 캡슐과 경로 표시(Home / …) 사이를 띄움 */
html.rl-ds #app main.subpage::before { height: var(--rl-subpage-top); }

/* ---------- 태블릿·모바일 ---------- */
@media (max-width: 1100px) {
  html.rl-ds #app .header { padding: 0 10px 0 26px; }   /* 메뉴 버튼(☰)은 맨 오른쪽 */
  .rl-cap-tools .rl-l { display: none; }
  .rl-cap-tools .rl-s { display: inline; }
}
@media (max-width: 700px) {
  html.rl-ds #app .header { padding: 0 8px 0 18px; }
  html.rl-ds #app .header .brand { width: 150px; }
  .rl-cap-tools .rl-tel { display: none; }
  .rl-cap-tools .rl-cta { height: 36px; padding: 0 14px 0 12px; font-size: 13.5px; }
  .rl-cap-tools { top: calc(env(safe-area-inset-top, 0px) + var(--rl-cap-top) + (var(--rl-cap-h) - 36px) / 2); }
}

/* ---------- 흐림을 지원하지 않거나 '투명도 줄이기'를 켠 경우: 불투명하게 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.rl-ds #app .header::before { background: var(--rl-white); }
  html.rl-ds #app .header .mega-panel { background: var(--rl-page) !important; }
  html.rl-ds #app .round-arrow, html.rl-ds #app .film-link > span, html.rl-ds #app .column-card-top > span,
  html.rl-ds #app .journal-card-top > svg, html.rl-ds #app .journal-cover > svg { background-color: var(--rl-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  html.rl-ds #app .header::before { background: var(--rl-white); }
  html.rl-ds #app .header .mega-panel { background: var(--rl-page) !important; }
  html.rl-ds #app .round-arrow, html.rl-ds #app .film-link > span, html.rl-ds #app .column-card-top > span,
  html.rl-ds #app .journal-card-top > svg, html.rl-ds #app .journal-cover > svg { background-color: var(--rl-glass-solid); }
}