/* ===================================================================
   제주 웰리스 — 기반 (토큰 / 리셋 / 헤더 / 고정바 / 푸터)
   섹션 스타일은 css/sections.css
   =================================================================== */

:root {
  /* 카탈로그 원본 팔레트. 여기에 색을 추가하지 않는다. */
  --paper:  #EFE9E2;
  --ink:    #21211D;
  --stone:  #675E5C;
  --clay:   #9A7A65;
  --sand:   #D2C4B9;
  --forest: #2E3A31;

  /* 위 색에서 파생한 알파 변형만 허용 */
  --ink-08: rgba(33, 33, 29, .08);
  --ink-14: rgba(33, 33, 29, .14);
  --paper-70: rgba(239, 233, 226, .70);
  --paper-55: rgba(239, 233, 226, .55);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Baskerville, serif;
  --font-body: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 132px);

  --nav-h: 60px;
  --bar-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 앵커 이동 시 고정 헤더에 제목이 가리지 않게 */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.32; font-weight: 600; letter-spacing: -.02em; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ---------- 레이아웃 ---------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--forest); color: var(--paper); }
.section--sand { background: #E7DFD6; }

/* 섹션 머리 — ALL CAPS 트래킹 라벨을 제목마다 붙이지 않는다.
   영문 표기는 디스플레이 세리프로 크게 한 번만 쓴다. */
.shead { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.shead__en {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  font-style: italic;
  color: var(--clay);
  margin-bottom: 10px;
}
.section--dark .shead__en { color: var(--sand); }
.shead__title { font-size: clamp(26px, 3.6vw, 42px); }
.shead__lead { margin-top: 18px; color: var(--stone); font-size: clamp(15px, 1.5vw, 17.5px); }
.section--dark .shead__lead { color: var(--sand); }

/* ---------- 헤더 / 메뉴 ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  background: rgba(239, 233, 226, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--ink-14); background: rgba(239, 233, 226, .95); }

.nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }

.nav__brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; margin-right: auto; }
.nav__brand-en {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; letter-spacing: .06em;
}
.nav__brand-ko { font-size: 12.5px; color: var(--stone); }

.nav__menu { display: none; gap: 26px; }
.nav__menu a {
  position: relative;
  text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--stone);
  transition: color .2s ease;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--clay); transform: scaleX(0); transition: transform .25s ease;
}
.nav__menu a:hover { color: var(--ink); }
.nav__menu a.is-active { color: var(--ink); }
.nav__menu a.is-active::after { transform: scaleX(1); }

.nav__tel {
  display: none; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--forest); color: var(--paper);
  text-decoration: none; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 모바일 햄버거 */
.nav__toggle {
  width: 40px; height: 40px; margin-right: -8px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .28s ease, opacity .2s ease;
}
.nav__toggle span + span { margin-top: 6px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* 모바일 전체화면 메뉴 */
.navdrawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 85;
  background: var(--paper);
  padding: 8px var(--gutter) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.navdrawer.is-open { opacity: 1; visibility: visible; transform: none; }
.navdrawer a {
  display: block; padding: 16px 0;
  border-bottom: 1px solid var(--ink-08);
  text-decoration: none; font-size: 18px; font-weight: 500;
}
.navdrawer a .en {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: 12px; color: var(--clay); letter-spacing: .04em;
}
body.is-menu-open { overflow: hidden; }

@media (min-width: 900px) {
  :root { --nav-h: 74px; }
  .nav__menu { display: flex; }
  .nav__tel { display: inline-flex; }
  .nav__toggle { display: none; }
  .navdrawer { display: none; }
}

/* ---------- 하단 고정 상담 바 ----------
   전환 목표가 전화 연결이므로 항상 노출한다. */

.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--forest);
  border-top: 1px solid rgba(255,255,255,.1);
}
.callbar__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--paper);
}
.callbar__btn + .callbar__btn { border-left: 1px solid rgba(255,255,255,.12); }
.callbar__num { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.callbar__btn svg { width: 17px; height: 17px; flex: none; }

@media (min-width: 900px) {
  /* 데스크톱은 헤더에 전화 버튼이 있으므로 바를 우측 카드로 축소한다 */
  .callbar {
    inset: auto 24px 24px auto;
    width: auto; height: auto;
    grid-template-columns: auto auto;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(33,33,29,.22);
    overflow: hidden;
  }
  .callbar__btn { padding: 15px 26px; }
  body { padding-bottom: 0; }
}

/* ---------- 푸터 ---------- */

.bizinfo { display: grid; gap: 7px 40px; font-size: 14px; color: var(--sand); }
.bizinfo > div { display: flex; gap: 12px; }
.bizinfo dt { flex: 0 0 auto; min-width: 96px; color: var(--paper-55); font-weight: 400; }
.bizinfo dd { margin: 0; }
.bizinfo a { text-decoration: none; border-bottom: 1px solid rgba(210,196,185,.4); }
@media (min-width: 760px) { .bizinfo { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.disclaimer {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; line-height: 1.8; color: rgba(239,233,226,.62);
}
.footer__links { margin-top: 22px; font-size: 13px; display: flex; gap: 20px; }
.footer__links a { color: var(--sand); text-decoration: none; border-bottom: 1px solid rgba(210,196,185,.4); }
.footer__copy { margin-top: 26px; font-size: 12.5px; color: rgba(239,233,226,.45); }

/* ---------- 모션 ----------
   HERO만 로드 시 연출. 나머지는 스크롤에 맞춰 조용히 나타난다. */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}