/* ============================================================
   THEIA DETAIL SKIN — 상세페이지 톤 전환

   상세페이지 53~54장이 인라인 <style>에서 같은 토큰을 정의한다.
     --rose #c47b6a / --rose2 / --rose-p / --rose-p2 / --dark / --mid
     --muted / --line / --bg / --bg2 / --font
   그 토큰만 THEIA(무채색 그레이)로 덮어써서 마크업을 건드리지 않고 톤을 바꾼다.

   ⚠ 스코프가 html[data-theia="detail"] (특이도 0,1,1)이라
     페이지의 :root (0,1,0)보다 높다 → 로드 순서와 무관하게 이긴다.
   ⚠ 되돌리려면 <html>의 data-theia 속성만 지우면 된다.
   ============================================================ */

/* 값은 원인별 다크서클 페이지(ko/pages/darkcircle-causes.html)의 :root 와 정확히 동일하다.
   순수 무채색이 아니라 푸른 기가 살짝 도는 쿨 그레이 계열이다 — 두 페이지를 나란히 놓았을 때
   글자색이 미세하게 달라 보이지 않도록 값을 그대로 가져왔다. */
html[data-theia="detail"] {
  /* --- 글자색: darkcircle의 --ink / --ink-soft / --muted --- */
  --dark: #15181e;          /* 제목·강조 (darkcircle --ink) */
  --mid: #4a505b;           /* 본문 (darkcircle --ink-soft) */
  --muted: #868d99;         /* 캡션·보조 (darkcircle --muted) */

  /* --- 로즈 계열 → darkcircle의 중립 강조 --- */
  --rose: #2a2a2a;          /* 강조·아이콘·밑줄 (darkcircle --coral) */
  --rose2: #868d99;         /* 보조 강조 (darkcircle --accent) */
  --rose-p: #eff2f7;        /* 옅은 면 (darkcircle --mist) */
  --rose-p2: #e3e8f1;       /* 한 단계 진한 면 (darkcircle --mist-2) */

  --line: rgba(22, 32, 52, .13);
  --line-soft: rgba(22, 32, 52, .07);
  --bg: #ffffff;
  --bg2: #ffffff;           /* 섹션 배경은 전부 흰색 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Noto Sans KR", sans-serif;

  --t-disp: "Inter", "Pretendard Variable", Pretendard, sans-serif;
  --t-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- 본문 기본 --- */
html[data-theia="detail"] body {
  font-family: var(--font);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: -.01em;
  color: var(--dark);       /* darkcircle body 와 동일 (본문 단락은 각자 --mid 사용) */
  -webkit-font-smoothing: antialiased;
}

/* --- 배경 통일: 모든 섹션 흰색 ---
   페이지 CSS가 `.alr-page .surg{background:#fff5f2}` 처럼 2-클래스 선택자를 쓴다(특이도 0,2,0).
   여기 선택자는 (0,1,2)라 그냥은 지므로 !important 로 못박는다.
   background-color 만 지정하므로 배경 이미지/그라데이션은 그대로 살아남는다. */
html[data-theia="detail"] body { background-color: #fff; }
html[data-theia="detail"] section { background-color: #fff !important; }

/* ============ STICKY SUB NAV (바로가기) ============
   헤더(.t-hd)가 sticky 높이 84px → 그 바로 아래에 붙는다. */
html[data-theia="detail"] .t-subnav {
  position: sticky; top: 84px; z-index: 90;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
html[data-theia="detail"] .t-subnav-in {
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px);
  display: flex; gap: clamp(16px, 2.8vw, 42px);
  overflow-x: auto; scrollbar-width: none;
}
html[data-theia="detail"] .t-subnav-in::-webkit-scrollbar { display: none; }
html[data-theia="detail"] .t-subnav a {
  position: relative; flex: none;
  padding: 18px 2px; font-size: 13.5px; font-weight: 400;
  color: var(--muted); letter-spacing: -.01em; text-decoration: none;
  white-space: nowrap; transition: color .3s var(--t-ease);
}
html[data-theia="detail"] .t-subnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--dark); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--t-ease);
}
html[data-theia="detail"] .t-subnav a:hover { color: var(--dark); }
html[data-theia="detail"] .t-subnav a.on { color: var(--dark); font-weight: 500; }
html[data-theia="detail"] .t-subnav a.on::after { transform: scaleX(1); }
@media (max-width: 600px) {
  html[data-theia="detail"] .t-subnav a { font-size: 12.5px; padding: 15px 2px; }
}

/* --- 제목: 굵고 좁은 → 가볍고 크게(트래킹 조임) --- */
html[data-theia="detail"] h1,
html[data-theia="detail"] h2 {
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.25;
}
html[data-theia="detail"] h2 { font-size: clamp(25px, 3.3vw, 44px); }
html[data-theia="detail"] h1 { font-size: clamp(32px, 4.4vw, 60px); }
html[data-theia="detail"] h1 b, html[data-theia="detail"] h2 b,
html[data-theia="detail"] h1 strong, html[data-theia="detail"] h2 strong { font-weight: 700; }
/* 원래 로즈로 강조하던 em → 무채색 위계로 */
html[data-theia="detail"] h1 em, html[data-theia="detail"] h2 em {
  font-style: normal; font-weight: 600; color: var(--dark);
}
html[data-theia="detail"] h3 { font-weight: 500; letter-spacing: -.025em; }

/* --- eyebrow(51개 페이지 공통): 레터스페이싱 + 좌측 선 --- */
html[data-theia="detail"] .eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
html[data-theia="detail"] .eyebrow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; flex: none;
}

/* 히어로 영문 라벨도 같은 결로 */
html[data-theia="detail"] .hero-en,
html[data-theia="detail"] .surg-en {
  font-family: var(--t-disp);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* --- 태그 칩: 분홍 배경 → 하드라인 아웃라인 --- */
html[data-theia="detail"] .hero-tag {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mid);
  border-radius: 999px;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* --- 버튼: 알약형 --- */
html[data-theia="detail"] .hero-btn,
html[data-theia="detail"] .btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: .35s var(--t-ease);
}
html[data-theia="detail"] .hero-btn-primary,
html[data-theia="detail"] .btn-primary {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
html[data-theia="detail"] .hero-btn-primary:hover,
html[data-theia="detail"] .btn-primary:hover { background: #000; }
html[data-theia="detail"] .hero-btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dark);
}
html[data-theia="detail"] .hero-btn-secondary:hover {
  background: var(--dark); color: #fff; border-color: var(--dark);
}
/* 버튼 안 SVG 선색이 로즈로 하드코딩된 경우 보정 */
html[data-theia="detail"] .hero-btn-secondary svg [stroke] { stroke: currentColor; }

/* --- 수술정보 바: 카드 느낌 제거, 헤어라인 그리드 --- */
html[data-theia="detail"] .surg { background: var(--bg); }
html[data-theia="detail"] .surg-item {
  border-color: var(--line);
  background: transparent;
}

/* --- FAQ(41개 페이지 공통): 헤어라인 아코디언 --- */
html[data-theia="detail"] .faq-item {
  border-color: var(--line);
  background: transparent;
  border-radius: 0;
}
html[data-theia="detail"] .faq-q {
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--dark);
}

/* --- 분홍 톤 면들을 중립으로 (인라인 하드코딩 대응) --- */
html[data-theia="detail"] [style*="#faf3f1"],
html[data-theia="detail"] [style*="#fffcfb"] { background-color: var(--rose-p) !important; }
html[data-theia="detail"] [style*="color:var(--rose)"],
html[data-theia="detail"] [style*="color: var(--rose)"] { color: var(--dark) !important; }

/* --- 섹션 리듬: 여백을 조금 더 넓게 --- */
html[data-theia="detail"] section { padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: clamp(56px, 6.5vw, 96px); }
html[data-theia="detail"] section.hero,
html[data-theia="detail"] section[class$="-hero"] { padding-top: 0; padding-bottom: 0; }

/* --- 이미지 모서리: 과한 라운드 완화 --- */
html[data-theia="detail"] img { border-radius: 3px; }
html[data-theia="detail"] .hero-img { border-radius: 0; }

/* ============================================================
   PAGE HERO (t-phero) — 시안 darkcircle-theia의 에디토리얼 분할 히어로
   구 .hero 섹션을 이 마크업으로 교체한다(_theia_hero.js).
   ⚠ 위의 `html[data-theia] section{padding}` 규칙보다 특이도가 높아야 하므로
     모든 선택자에 html[data-theia="detail"] 를 붙인다.
   ============================================================ */
/* ⚠ 히어로 이미지는 대부분 1.1~1.25:1의 정사각형에 가까운 비율이다.
   전체 배경(2.8:1)으로 깔면 세로 55~60%가 잘려 확대된 것처럼 보인다.
   그래서 이미지를 우측 패널로 두고 비율 차이를 최소화한다(잘림 5~15%). */
html[data-theia="detail"] section.t-phero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  /* 높이 상한 — 첫 화면에서 헤더(84) + 히어로 + 바로가기(58)가
     하단 고정 빠른상담 바(72)를 침범하지 않아야 한다. 여유 10 포함해 224 를 뺀다.
     ⚠ 상한이 없으면 뷰포트 높이 약 880~950px 대역에서 바로가기 바의 아래쪽이
       빠른상담 바에 잘려 두 바가 겹쳐 보인다(1920×925 기준 19px 침범).
     대부분의 화면에서는 38vw 가 그대로 이기므로 이 상한은 걸리지 않는다. */
  min-height: max(420px, min(max(480px, 38vw), calc(100vh - 224px)));
  padding: clamp(56px, 6.5vw, 88px) 0 clamp(40px, 4.5vw, 66px);
}
/* 하단 고정 빠른상담 바(72px)만큼 문서 끝에 자리를 비운다.
   구 styles.css 는 이 보정을 @media(max-width:768px) 안에만 두어(132px)
   데스크톱에서는 푸터 마지막 줄이 바에 영구히 가려져 있었다. */
@media (min-width: 769px) {
  html[data-theia="detail"] body:has(.floating-consult) { padding-bottom: 76px; }
}
html[data-theia="detail"] .t-phero-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: auto;
  width: min(54%, 780px); z-index: 0;
}
html[data-theia="detail"] .t-phero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%;   /* 인물 상반신이 살아남도록 위쪽 기준 */
  border-radius: 0;
}
/* 패널 왼쪽 경계를 흰색으로 녹여 텍스트 영역과 자연스럽게 이어붙인다 */
html[data-theia="detail"] .t-phero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.82) 20%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 62%);
}
html[data-theia="detail"] .t-phero-in {
  position: relative; z-index: 1; width: 100%;
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px);
}

html[data-theia="detail"] .t-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 11.5px; color: var(--muted); letter-spacing: .04em;
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
html[data-theia="detail"] .t-crumb a { color: inherit; text-decoration: none; }
html[data-theia="detail"] .t-crumb a:hover { color: var(--dark); }
html[data-theia="detail"] .t-crumb i { width: 12px; height: 1px; background: var(--line); display: block; font-style: normal; flex: none; }
html[data-theia="detail"] .t-crumb .on { color: var(--dark); }

html[data-theia="detail"] .t-phero-text { max-width: min(560px, 47%); }
html[data-theia="detail"] .t-phero-kick {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--t-disp); font-size: 11px; font-weight: 500;
  letter-spacing: .38em; text-transform: uppercase; color: var(--muted);
}
html[data-theia="detail"] .t-phero-kick::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; flex: none; }

/* 위계는 원인별 다크서클 페이지와 동일하게 간다.
   kick(영문) → h1(시술명, 가장 큼) → 메인카피 → 서브카피 → 버튼 */
html[data-theia="detail"] .t-phero h1 {
  font-weight: 300; font-size: clamp(31px, 4.3vw, 58px);
  line-height: 1.15; letter-spacing: -.035em; margin: 18px 0 0; color: var(--dark);
}
/* 강조 단어에 밑줄 — darkcircle 의 h1 b 와 같은 처리 */
html[data-theia="detail"] .t-phero h1 b {
  font-weight: 700;
  background: linear-gradient(var(--rose), var(--rose)) 0 94% / 100% 3px no-repeat;
  padding-bottom: .04em;
}
html[data-theia="detail"] .t-phero h1 em { font-style: normal; font-weight: 600; }

/* 메인카피 — h1 보다 작고 서브카피보다 큰 중간 단계 */
html[data-theia="detail"] .t-phero-lead {
  margin-top: 20px;
  font-size: clamp(15.5px, 1.6vw, 20px);
  font-weight: 500; letter-spacing: -.025em;
  color: var(--dark); line-height: 1.5;
}

html[data-theia="detail"] .t-phero-sub {
  margin-top: 14px; font-size: clamp(13px, 1.2vw, 14.5px); line-height: 1.95; color: var(--mid);
}
html[data-theia="detail"] .t-phero-sub strong { font-weight: 600; color: var(--dark); }

html[data-theia="detail"] .t-phero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
html[data-theia="detail"] .t-phero-tags span {
  font-size: 11.5px; color: var(--mid); background: rgba(255,255,255,.62);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; letter-spacing: -.01em;
}

html[data-theia="detail"] .t-phero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html[data-theia="detail"] .t-phero-btns a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  transition: .35s var(--t-ease);
}
html[data-theia="detail"] .t-phero-btns .p { background: var(--dark); color: #fff; border: 1px solid var(--dark); }
html[data-theia="detail"] .t-phero-btns .p:hover { background: #000; }
html[data-theia="detail"] .t-phero-btns .g { background: rgba(255,255,255,.6); color: var(--dark); border: 1px solid var(--line); }
html[data-theia="detail"] .t-phero-btns .g:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

/* 이미지가 없는 페이지(병원소개·약관·예약 등)용 텍스트형 히어로 */
html[data-theia="detail"] section.t-phero.is-plain {
  min-height: 0;
  padding: clamp(48px, 5.5vw, 78px) 0 clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
}
html[data-theia="detail"] .t-phero.is-plain .t-phero-text { max-width: min(760px, 100%); }
html[data-theia="detail"] .t-phero.is-plain h1 { font-size: clamp(28px, 3.6vw, 46px); }

/* 태블릿: 패널 폭을 넓혀 이미지가 더 안 잘리게 */
@media (max-width: 1180px) {
  html[data-theia="detail"] .t-phero-bg { width: min(50%, 560px); }
  html[data-theia="detail"] .t-phero-text { max-width: 52%; }
}

/* 좁은 화면: 좌우 분할이 성립하지 않는다 → 이미지를 위쪽 띠로 올리고 텍스트를 아래로 */
@media (max-width: 860px) {
  html[data-theia="detail"] section.t-phero {
    display: block; min-height: auto; padding: 0 0 clamp(36px, 7vw, 56px);
  }
  html[data-theia="detail"] .t-phero-bg {
    position: relative; width: 100%; height: clamp(230px, 48vw, 340px); right: auto;
  }
  html[data-theia="detail"] .t-phero-bg img { object-position: center 20%; }
  /* 아래쪽만 흰색으로 녹여 텍스트와 이어지게 */
  html[data-theia="detail"] .t-phero-bg::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.75) 82%, #fff 100%);
  }
  html[data-theia="detail"] .t-phero-in { padding-top: clamp(18px, 4vw, 28px); }
  html[data-theia="detail"] .t-phero-text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theia="detail"] * { transition: none !important; }
}
