/* ===================================================================
   제주 웰리스 — 기반 (토큰 / 리셋 / 헤더 / 고정바 / 푸터)
   섹션 스타일은 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; }

/* Cormorant 는 기본이 옛날식(oldstyle) 숫자라 1 이 ı 처럼, 0 이 작게 나온다.
   층 표기(1F)와 수익률(10.33%)이 읽히지 않아 라이닝 숫자로 고정한다. */
[class] { font-variant-numeric: inherit; }
.nav__brand-en, .hero__title, .hero__eyebrow, .shead__en, .flow__item,
.stack__f, .floorpanel__f, .times__val, .bar__num b, .step__n,
.intro__cell .num, .floortable td:first-child, .en {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}

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;
  /* keep-all 은 어절 단위로만 끊어서, 마지막 줄에 한 어절만 남는 일이 잦다.
     pretty 로 줄 끝을 고르게 만든다. 미지원 브라우저는 기존 동작 그대로. */
  text-wrap: pretty;
  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); text-wrap: balance; }
/* keep-all 이라 마지막 어절만 다음 줄로 떨어지는 경우가 있다. 줄 길이를 고르게 나눈다. */
.shead__lead { margin-top: 18px; color: var(--stone); font-size: clamp(15px, 1.5vw, 17.5px); text-wrap: pretty; }
.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) {
  /* 데스크톱은 헤더에 전화 버튼이 있으므로 바를 우측 카드로 축소한다.
     HERO 를 지나기 전에는 조감도를 가리므로 숨겨 둔다. */
  .callbar {
    inset: auto 26px 26px auto;
    width: auto; height: auto;
    grid-template-columns: auto auto;
    border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 40px -12px rgba(33,33,29,.4);
    overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,.68,.32,1), visibility .4s;
  }
  .callbar.is-shown { opacity: 1; visibility: visible; transform: none; }
  .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: 11.5px; line-height: 1.75; color: rgba(239,233,226,.46);
}
.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;
  }
}

/* ===================================================================
   연출 (2026-09-08) — 사용자 요청으로 §5 "하지 말 것" 중
   진입 애니메이션 제한을 완화했다. 다만 방향은 유지한다:
   색을 새로 추가하지 않고, 팔레트 안에서 깊이와 움직임만 더한다.
   =================================================================== */

/* 스크롤 진행 표시 */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 99;
  background: linear-gradient(90deg, var(--clay), var(--forest));
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* 스크롤 연동 진입 연출.
   animation-timeline 을 지원하지 않는 브라우저는 그냥 정상 표시된다.
   JS 로 클래스를 붙이지 않으므로 스크립트가 죽어도 내용이 사라지지 않는다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shead,
    .intro__statement, .intro__note, .intro__cell,
    .flow, .conceptcard, .viewband,
    .floors__grid, .loc__map, .times__row,
    .spec, .floortable, .bars, .returnnote,
    .step, .partner__logos, .partner__note,
    .contact__ch, .form {
      animation: riseIn linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
    /* 카드류는 살짝씩 어긋나게 들어오도록 범위를 달리한다 */
    .intro__cell:nth-child(2), .conceptcard:nth-child(2) { animation-range: entry 8% entry 50%; }
    .intro__cell:nth-child(3), .conceptcard:nth-child(3) { animation-range: entry 12% entry 54%; }
    .conceptcard:nth-child(4) { animation-range: entry 16% entry 58%; }
    .step:nth-child(2) { animation-range: entry 8% entry 50%; }
    .step:nth-child(3) { animation-range: entry 12% entry 54%; }
    .step:nth-child(4) { animation-range: entry 16% entry 58%; }

    /* 이미지는 살짝 확대된 상태에서 제자리로 */
    .viewband img, .loc__map img, .partner__logos img {
      animation: imgIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes imgIn {
  from { transform: scale(1.055); }
  to   { transform: none; }
}

/* 호버 리프트 — 눌리는 느낌만 주고 그림자를 남발하지 않는다 */
@media (hover: hover) and (min-width: 900px) {
  .intro__cell, .conceptcard { transition: transform .4s cubic-bezier(.22,.68,.32,1); }
  .intro__cell:hover, .conceptcard:hover { transform: translateY(-4px); }
  .times__row { transition: background .3s ease, padding-left .3s ease; }
  .times__row:hover { background: #F6F2ED; padding-left: 26px; }
  .btn--solid:hover, .btn--clay:hover { transform: translateY(-2px); }
  .btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .intro__cell:hover, .conceptcard:hover, .btn:hover { transform: none; }
}


/* 가운뎃점으로 이어진 낱말 묶음은 줄 끝에서 갈라지면 다음 줄이 '·' 로 시작한다. */
.nobr { white-space: nowrap; }

/* ---------- 배경음악 토글 ----------
   자동재생하지 않는다. 켜기 전에는 완전히 조용하다. */
.music {
  position: fixed; z-index: 95;
  left: 20px; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  background: rgba(46,58,49,.82); color: var(--paper);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 10px 28px -14px rgba(33,33,29,.5);
  transition: background .25s ease, opacity .3s ease;
}
.music[hidden] { display: none; }
.music:hover { background: rgba(46,58,49,.95); }

.music__eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.music__eq i {
  width: 2px; height: 3px; background: var(--sand); border-radius: 1px;
  transition: height .2s ease;
}
/* 재생 중일 때만 막대가 움직인다 */
.music[aria-pressed="true"] .music__eq i { animation: eq .9s ease-in-out infinite; }
.music[aria-pressed="true"] .music__eq i:nth-child(2) { animation-delay: .15s; }
.music[aria-pressed="true"] .music__eq i:nth-child(3) { animation-delay: .3s; }
.music[aria-pressed="true"] .music__eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%,100% { height: 3px } 50% { height: 12px } }

@media (min-width: 900px) {
  .music { left: 26px; bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .music[aria-pressed="true"] .music__eq i { animation: none; height: 8px; }
}