:root {
    --sienna:  #9F6036;
    --pine:    #3B4B3B;
    --sage:    #7A826C;
    --eggshell:#FAF4E7;
    --stone:   #CAC4B9;

    /* 기본(라이트) = Eggshell 바탕 + Pine 글자 — 히어로 아래 모든 섹션 (2026-09-24)
       다크 스코프(.on-dark: 상단 바·모바일 메뉴·히어로)는 아래에서 같은 이름으로 재정의 */
    --bg:    var(--eggshell);
    --fg:    var(--pine);
    --fg-2:  rgba(59, 75, 59, 0.74);
    --fg-3:  rgba(59, 75, 59, 0.52);
    --line:  rgba(59, 75, 59, 0.14);
    --line-2:rgba(59, 75, 59, 0.32);
    --tint:  rgba(59, 75, 59, 0.05);
    --hair:  rgba(59, 75, 59, 0.07);

    /* 상단 바 — 모바일: 화면 맨 위에 붙은 전폭 바(모바일 레퍼런스 Screenshot_2), PC: 떠 있는 바(아래 미디어쿼리) */
    --bar-top:  0px;
    --bar-side: 0px;
    --bar-h:    56px;   /* 모바일 레퍼런스 바 높이 29.5/206 → 56px (393 폭) */
    /* 모바일 히어로 단위: 레퍼런스 화면(393×849) 1px을 실제 화면 높이에 맞춰 환산 → 어느 폰에서도 같은 구도 */
    --r: calc(100svh / 849);
    --page-top: calc(var(--bar-top) + var(--bar-h) + 30px); /* 고정 바 아래 본문 시작 */
    /* 풀블리드 폭 = 스크롤바를 뺀 화면 폭 (100vw는 스크롤바 포함이라 절반만큼 왼쪽으로 밀림). --sbw는 JS가 측정 */
    --full: calc(100vw - var(--sbw, 0px));

    /* 큰 글씨: 라틴 Instrument Serif / 한글 Pretendard (도시명은 언어 무관 영문 세리프)
       작은 글씨: 라틴 Instrument Sans / 한글 Pretendard */
    --serif: 'Instrument Serif', 'Pretendard Variable', serif; /* 한글은 Pretendard (2026-09-25 Noto Serif KR 폐기) */
    --sans:  'Instrument Sans', 'Pretendard Variable', sans-serif;

    /* 대문자 소형 텍스트 자간 2단계 (2026-09-23 통일)
       라벨(아이브로우·태그·행 라벨·표 머리·소제목) = 10.5px / 0.18em
       액션(버튼·메뉴) = 11.5–12px / 0.12em */
    --label-size:  10.5px;
    --track-label: 0.18em;
    --track-btn:   0.12em;
  }

  .on-dark {
    --bg:    var(--pine);
    --fg:    var(--eggshell);
    --fg-2:  rgba(250, 244, 231, 0.64);
    --fg-3:  rgba(250, 244, 231, 0.42);
    --line:  rgba(250, 244, 231, 0.16);
    --line-2:rgba(250, 244, 231, 0.34);
    --tint:  rgba(250, 244, 231, 0.06);
    --hair:  rgba(250, 244, 231, 0.08);
    color: var(--fg);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  [hidden] { display: none !important; }

  body {
    /* 종이 그레인: SVG feTurbulence 대신 미리 래스터한 PNG 타일 (Pine 반점, Eggshell 바탕).
       히어로는 자체 Pine 배경 + Eggshell 반점 그레인, 히어로 끝에서 Eggshell로 그라디언트 전환 */
    background: url("/img/grain-mix.png") repeat, var(--eggshell);
    color: var(--fg);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
  }

  /* 글자 긁어 복사 막기 (2026-09-30 사용자 지시): 기본은 선택 불가, 복사가 필요한 정보만 허용
     — 이메일·전화·인스타 계정·주소·영업시간/연락처 값, 입력칸 */
  body { -webkit-user-select: none; user-select: none; }
  a[href^="mailto:"], a[href^="tel:"], a[href*="instagram.com"], .person .ig, .addr, .addr a, .row .v, .row .v a,
  input, textarea { -webkit-user-select: text; user-select: text; }
  a.person, a.tg-photo, a.tg-ig { -webkit-user-select: none; user-select: none; } /* 카드·사진·아이콘 링크는 제외(카드 안 인스타 계정 글자만 선택 가능) */
  .person .ig { -webkit-user-select: text; user-select: text; }
  a { color: inherit; }
  /* 한국어는 단어 중간에서 줄바꿈 금지 (예: "취향 / 을" 방지) */
  html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
  ::selection { background: var(--fg); color: var(--bg); }

  .page {
    width: 100%;
    max-width: 440px;
    padding: var(--page-top) 24px 48px; /* 고정 바 높이만큼 비움 */
    display: flex;
    flex-direction: column;
  }

  /* ── Top bar (floating) ─────────────────────────────────
     화면 가장자리에서 떨어진 Pine 바, 구분선 없음. 좌 워드마크 → 가운데 메뉴(호버 시 메가메뉴) → 지구본 → Book now */
  header.bar {
    position: fixed;
    top: var(--bar-top); left: var(--bar-side); right: var(--bar-side);
    z-index: 50;
    background: var(--pine);
    padding-top: env(safe-area-inset-top); /* 홈 화면 앱으로 열 때 상태 표시줄 아래로 */
    animation: rise 0.7s ease both;
  }
  /* 모바일 바 안쪽 여백: 레퍼런스 로고 왼쪽 30px, 메뉴 버튼 오른쪽 32px (393px 폭 기준) */
  .bar-inner {
    width: 100%;
    padding: 0 32px 0 30px;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .brand { text-decoration: none; margin-right: auto; display: flex; align-items: center; }
  .brand:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

  .wordmark {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px; /* 모바일 19px (30px 시도 → "너무 크다"로 롤백, 2026-09-24). PC는 21px */
    letter-spacing: 0;
    color: var(--fg);
    line-height: 1;
  }

  /* 데스크탑 메뉴 */
  .menu { display: none; list-style: none; align-items: center; gap: 2px; }
  .menu-item { position: static; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 13px;
    background: none; border: none; border-radius: 2px;
    font-family: var(--sans); font-size: 11.5px; letter-spacing: var(--track-btn); text-transform: uppercase;
    color: var(--fg-2); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .menu-btn:hover, .menu-item.open > .menu-btn { color: var(--fg); background: var(--tint); }
  .menu-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

  .plus {
    position: relative; flex: none; width: 14px; height: 14px;
    border: 1px solid var(--line-2); border-radius: 2px;
    transition: border-color 0.2s ease;
  }
  .plus::before, .plus::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    background: currentColor; transform: translate(-50%, -50%);
  }
  .plus::before { width: 7px; height: 1px; }
  .plus::after  { width: 1px; height: 7px; transition: transform 0.3s ease; }
  .menu-item.open .plus { border-color: var(--fg); }
  .menu-item.open .plus::after { transform: translate(-50%, -50%) rotate(90deg); } /* + → − */

  /* 메가메뉴 패널: 떠 있는 바와 같은 폭으로 바로 아래 붙음 */
  .panel {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--pine);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.28);
  }
  .menu-item.open > .panel { display: block; }
  .panel-inner {
    max-width: 1120px; margin: 0 auto; padding: 30px 56px 38px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
  }
  .panel h5 {
    font-size: var(--label-size); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--fg-3); padding-bottom: 12px; border-bottom: 1px solid var(--line);
  }
  .panel .p-title { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.05; color: var(--fg); }
  html[lang="ko"] .panel .p-title:not(.p-city) { font-family: var(--sans); font-weight: 400; font-size: 19px; line-height: 1.25; }
  .panel .p-sub { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--fg-2); }
  .panel .p-sub .hk { display: inline-block; min-width: 5.4em; padding-right: 0.6em; color: var(--fg-3); }
  html[lang="ko"] .panel .p-sub .hk { min-width: 4em; }
  html[lang="en"] .panel .p-sub .hk { min-width: 4.6em; }
  .panel .p-sub .ir { display: flex; align-items: baseline; line-height: 1.4; } /* 주소 두 줄은 줄 간격 1.4로 붙여서 */
  .panel .p-sub .ir + .ir { margin-top: 7px; } /* 항목 사이는 7px 더 띄움 */
  /* 메뉴 칸 간격 = 글자 잉크 기준 24px (목록 항목 간격 24.3과 통일, 2026-09-30 사용자 지시): 도시명 기준선 → 주소 대문자 윗선, 휴무 기준선 → Google Maps 대문자 윗선 */
  .panel .p-city + .p-sub { margin-top: 22.33px; } /* 제목 아래만 잉크 32px (2026-10-01 A안) */ /* 잉크 24px (2026-09-30 "다 24px"; 정보 글자 14.5px/23px 변경 뒤 26px로 벌어진 것 재보정 2026-10-01) */
  .panel .p-city + .p-sub + ul { margin-top: 6px; } /* 잉크 24px (같은 재보정) */
  .panel .p-title.p-city { margin-top: 21px; } /* 칸 제목 선 → 도시명 대문자 윗선 24 */
  .panel .p-title:not(.p-city) { margin-top: 20px; } /* 칸 제목 선 → 제목 24 */
  .panel .p-title:not(.p-city) + .p-sub { margin-top: 13.2px; }
  .panel .p-title:not(.p-city) + .p-sub + ul { margin-top: 5.6px; }
  /* 영어·독일어 칸 제목은 세리프 24px라 잉크 위치가 달라 따로 보정 */
  html:not([lang="ko"]) .panel .p-title:not(.p-city) { margin-top: 21px; }
  html:not([lang="ko"]) .panel .p-title:not(.p-city) + .p-sub { margin-top: 14.8px; }
  .panel .p-sub a { color: var(--fg-2); text-decoration: none; transition: color 0.2s ease; }
  .panel .p-sub a:hover { color: var(--fg); } /* 영업일/휴무 라벨 칸: 값 시작 위치 맞춤 (2026-09-30) */
  .panel ul { list-style: none; margin-top: 12px; }
  .panel li a, .panel li span {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; font-size: 14px; line-height: 1.45;
    color: var(--fg-2); text-decoration: none; transition: color 0.2s ease;
  }
  .panel li span { color: var(--fg-2); font-size: 13px; }
  .panel li a:hover { color: var(--fg); }
  .panel li a .ext { font-size: 10px; line-height: 1; height: 1em; display: inline-flex; align-items: center; overflow: visible; color: var(--fg-3); } /* ↗ 기호가 줄 높이를 43px로 늘리던 것 고정 → 모든 메뉴 항목 간격 = 가격표 간격 34px (2026-09-30) */
  .panel li span { line-height: 20.3px; } /* 13px 안내 문구도 항목 간격 34px에 맞춤 */

  /* 우측 그룹: 지구본 · Book now */
  .bar-right { display: flex; align-items: center; gap: 4px; }

  /* 모바일 바 오른쪽은 지구본 + 메뉴 버튼만 (예약은 메뉴 안에) — PC에서 다시 표시 */
  .book { display: none; position: relative; margin-left: 6px; }
  .book-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 36px; padding: 0 14px;
    background: var(--eggshell); border: 1px solid var(--eggshell); border-radius: 2px;
    font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: var(--track-btn); text-transform: uppercase;
    color: var(--pine); cursor: pointer; white-space: nowrap;
    transition: transform 0.2s ease;
  }
  /* 상단 바 글자 = 레퍼런스 11.5px (13 → 12.5 → 12 시도 후 2026-09-25 사용자 지시로 레퍼런스 복귀, 한글도 동일) */
  .book-btn .long { display: none; }
  .book-btn .arrow { display: inline-block; transition: transform 0.25s ease; }
  .book-btn:hover .arrow, .book.open .book-btn .arrow { transform: translateX(3px); }
  .book-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .book-panel {
    display: none;
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 272px; padding: 8px;
    background: var(--eggshell); border-radius: 2px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
    z-index: 60;
  }
  .book.open .book-panel { display: block; }
  .book-panel a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 14px; border-radius: 2px;
    text-decoration: none; color: var(--pine);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .book-panel a:hover { background: var(--pine); color: var(--eggshell); }
  /* 예약 팝업 도시명: 언어 무관 영문 + Instrument Serif */
  .book-panel a .city { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 21px; line-height: 1; }
  .book-panel a .who { font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sage); transition: color 0.2s ease; }
  .book-panel a:hover .who { color: rgba(250, 244, 231, 0.6); }

  /* 햄버거 + 모바일 전체화면 메뉴 */
  /* 메뉴 버튼: 레퍼런스 실측 — 옅은 사각 36×36, 두 줄 17px 폭·중심 간격 5.5px */
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 36px; height: 36px; padding: 0 9.5px; margin-left: 6px;
    background: rgba(250, 244, 231, 0.08); border: none; border-radius: 2px; cursor: pointer; color: var(--fg);
  }
  .burger span { display: block; height: 1.5px; background: currentColor; transition: transform 0.3s ease, opacity 0.2s ease; }
  html.mnav-open .burger span:first-child { transform: translateY(2.75px) rotate(45deg); }
  html.mnav-open .burger span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }
  .burger:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

  .mnav {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    padding-top: calc(var(--bar-top) + var(--bar-h) + 10px) !important; /* 떠 있는 바 아래부터 */
    background: var(--pine);
    z-index: 45; overflow-y: auto;
    padding: 10px 24px 48px;
  }
  html.mnav-open .mnav { display: block; }
  html.mnav-open { overflow: hidden; }
  .mnav .big {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer;
    padding: 17px 0; border-bottom: 1px solid var(--line);
    font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--fg); text-decoration: none;
  }
  .mnav .big::after { content: "→"; font-family: var(--sans); font-size: 14px; color: var(--fg-3); }
  html[lang="ko"] .mnav .big { font-family: var(--sans); font-weight: 400; font-size: 22px; }
  .mnav .m-cta { margin-top: 28px; display: grid; gap: 10px; }
  .mnav .m-links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
  .mnav .m-links a { color: var(--fg-2); text-decoration: none; }

  .lang { position: relative; }
  .lang-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 6px;
    background: none; border: none; border-radius: 2px;
    color: var(--fg-2); cursor: pointer;
    transition: color 0.25s ease;
  }
  .lang-btn svg { width: 20px; height: 20px; display: block; }
  .lang-btn:hover { color: var(--fg); }
  .lang-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

  .lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 136px;
    background: var(--eggshell);
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    z-index: 20;
    display: none;
  }
  .lang-menu.open { display: block; }
  .lang-menu button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 14px;
    background: none; border: none;
    font-family: var(--sans);
    font-size: 13.5px; letter-spacing: 0.02em;
    color: var(--pine); cursor: pointer; text-align: left;
  }
  .lang-menu button:hover { background: var(--pine); color: var(--eggshell); }
  .lang-menu button[aria-current="true"]::after {
    content: "·"; font-size: 20px; line-height: 0; color: var(--sienna);
  }
  .lang-menu button:hover[aria-current="true"]::after { color: var(--eggshell); }

  /* ── Hero: 한 줄 중앙 타이틀 + 커서 근접 블러(글자 단위, JS) ── */
  /* 인트로(히어로 + 사진 밴드)를 하나로 감싸 그라디언트 한 장으로 Pine → Eggshell 전환.
     --fs 지점까지 Pine, 이후 smoothstep 곡선(9단)으로 밝아져 인트로 맨 아래(100%)에서 정확히 Eggshell → 이음새 없음.
     그레인은 body와 같은 혼합 타일(밝은 점+어두운 점)·같은 원점이라 질감도 끊기지 않음 */
  .intro {
    --fs: 70svh;
    --fx: calc(100% - var(--fs));
    width: var(--full);
    margin: calc(-1 * var(--page-top)) 0 0 calc(50% - var(--full) / 2); /* .page 상단 여백 상쇄 + 풀블리드 */
    background:
      url("/img/grain-mix.png") repeat,
      linear-gradient(180deg,
        var(--pine) 0,
        var(--pine) var(--fs),
        color-mix(in srgb, var(--pine), var(--eggshell)  4.3%) calc(var(--fs) + var(--fx) * 0.125),
        color-mix(in srgb, var(--pine), var(--eggshell) 15.6%) calc(var(--fs) + var(--fx) * 0.25),
        color-mix(in srgb, var(--pine), var(--eggshell) 31.6%) calc(var(--fs) + var(--fx) * 0.375),
        color-mix(in srgb, var(--pine), var(--eggshell) 50%)   calc(var(--fs) + var(--fx) * 0.5),
        color-mix(in srgb, var(--pine), var(--eggshell) 68.4%) calc(var(--fs) + var(--fx) * 0.625),
        color-mix(in srgb, var(--pine), var(--eggshell) 84.4%) calc(var(--fs) + var(--fx) * 0.75),
        color-mix(in srgb, var(--pine), var(--eggshell) 95.7%) calc(var(--fs) + var(--fx) * 0.875),
        var(--eggshell) 100%);
  }
  /* 히어로(모바일) = 모바일 레퍼런스(Screenshot_2) 정밀 실측 (393×849 환산, 크기는 --r 단위):
     타이틀 단어별 3줄 — 첫 줄 어센더 위 26.1% · 마지막 줄 베이스라인 55.3%, 글자 높이 74.4 · 줄 간격 87.8
     서브 2줄 14/21, 첫 줄 위 76.2% / 버튼 붙은 한 쌍 48 높이·좌우 28·글자 15, 86.7~92.1% (하단 7.9%) */
  .hero {
    position: relative;
    height: 100svh;
    min-height: 480px;
    text-align: center;
  }
  .hero-mid {
    position: absolute; left: 0; right: 0;
    top: 41.1svh; /* 레퍼런스 블록 중심 40.7% + 글꼴 박스↔글자 차이 보정 0.4% (실측) */
    transform: translateY(-50%);
  }
  /* 서브 문장 위 = 레퍼런스 76.2%, 버튼 아래 = 92.1% 에 각각 고정 (서브가 한 줄이어도 위치 유지) */
  .hero-low {
    position: absolute; left: 0; right: 0; top: 75.7svh; bottom: 7.9svh; padding: 0 24px; /* 글자 위가 76.2%에 오도록 줄 박스 여백 0.5% 보정 (실측) */
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  }
  /* transform 대신 개별 translate 속성으로 등장 — transform을 쓰면 fill 이후 transform:none이 남아
     .hero-mid의 translateY(-50%) 세로 중앙 정렬을 덮어씀 */
  .hero-mid, .hero-low { animation: rise-t 0.7s 0.12s ease both; }
  @keyframes rise-t {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: none; }
  }

  .hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: calc(var(--r) * 100.5); /* 레퍼런스 글자 높이 74.4 ÷ 라틴 어센더 0.74em */
    line-height: 0.874;                /* 줄 간격 87.8 ÷ 100.5 */
    letter-spacing: -0.01em;
    color: var(--fg);
    padding: 0.08em 0; /* 블러 번짐이 위아래로 잘리지 않게 */
    /* 드래그 선택 막기 — 글자별 박스(.ch)라 선택 하이라이트가 조각조각 보임 (2026-09-25) */
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: default;
  }
  /* 한글: 글자 높이 74.4 ÷ 한글 높이 0.854em → 87.1, 줄 간격 87.8 ÷ 87.1 */
  /* 타이틀은 3개 언어 모두 영어 "Hair, Beyond Trends." (2026-09-24) — 한글 전용 크기 규칙 없음 */
  .hero-title .w { display: block; white-space: nowrap; } /* 모바일: 단어마다 한 줄 */
  .hero-title .ch {
    display: inline-block;
    /* 블러(filter) 적용 시 사파리가 글자 박스 밖(y 꼬리·쉼표 아래)을 잘라 그림 → 박스를 위아래로 넓히고
       같은 크기의 음수 마진으로 상쇄해 레이아웃은 그대로 */
    padding: 0.12em 0.04em 0.32em;
    margin: -0.12em -0.04em -0.32em;
    /* will-change 없음 — 글자별 합성 레이어가 블러 값이 바뀔 때 옛 그림을 늘려 그려 'o'가 세로로 늘어나는 현상(2026-09-24) 제거.
       transition 없음 — 프레임 간 보간은 JS lerp가 담당 */
  }

  .hero-sub {
    margin: 0 auto;
    font-family: var(--sans);
    font-size: max(13px, calc(var(--r) * 14));
    line-height: 1.5;
    letter-spacing: 0;
    color: rgba(250, 244, 231, 0.82);
    max-width: 90vw;
  }
  /* 서브 문장: PC·모바일 모두 두 줄(sub-1 / sub-2), 각 줄은 줄바꿈 없이 */
  .hero-sub .sub-1, .hero-sub .sub-2 { white-space: nowrap; }

  /* 히어로 버튼 2개 — 레퍼런스(Sui)처럼 간격 없이 붙인 한 쌍, 대문자 아닌 문장형 라벨 */
  .hero-cta { display: flex; justify-content: center; }
  .hbtn {
    display: inline-flex; align-items: center; justify-content: center;
    height: max(44px, calc(var(--r) * 48)); padding: 0 calc(var(--r) * 28);
    font-family: var(--sans); font-size: max(13px, calc(var(--r) * 15)); font-weight: 400; letter-spacing: 0; white-space: nowrap; /* 모바일 = 레퍼런스 15r (16.5r 시도 → 위 문장보다 커져 위계 뒤집힘, 2026-09-25 복귀). PC는 1.15u 유지 */
    text-decoration: none; color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--line-2);
    transition: background 0.25s ease, color 0.25s ease;
  }
  .hbtn:first-child { border-radius: 2px 0 0 2px; }
  .hbtn:last-child  { border-radius: 0 2px 2px 0; }
  .hbtn.solid { background: var(--eggshell); color: var(--pine); box-shadow: none; }
  @media (hover: hover) {
    .hbtn:hover { background: rgba(250, 244, 231, 0.1); }
    .hbtn.solid:hover { background: var(--stone); }
  }
  .hbtn:focus-visible { outline: 2px solid var(--eggshell); outline-offset: 3px; }

  /* ── Buttons ────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 50px; padding: 0 22px;
    border: 1px solid var(--line-2); border-radius: 2px;
    background: transparent; color: var(--fg);
    font-family: var(--sans); font-size: 11.5px; letter-spacing: var(--track-btn); text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  }
  .btn small { font-size: 10px; letter-spacing: var(--track-label); color: var(--fg-3); transition: color 0.25s ease; }
  /* solid = 글자색 바탕 반전 (라이트: Pine 버튼 / 다크: Eggshell 버튼) */
  .btn.solid { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .btn.solid small { color: var(--bg); opacity: 0.6; }
  @media (hover: hover) {
    .btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); transform: translateY(-1px); }
    .btn:hover small { color: var(--bg); opacity: 0.6; }
    .btn.solid:hover { background: transparent; color: var(--fg); }
    .btn.solid:hover small { color: var(--fg-3); opacity: 1; }
  }
  .btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
  .btn:disabled { opacity: 0.5; cursor: default; }

  /* ── Photo band ─────────────────────────────────────── */
  .band {
    position: relative;
    width: 100%;
    margin: 80px 0 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .band img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); }

  /* ── Sections ───────────────────────────────────────── */
  section.block { margin-top: 96px; scroll-margin-top: calc(var(--bar-top) + var(--bar-h) + 24px); } /* 떠 있는 바만큼 앵커 여백 */

  .eyebrow {
    font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--fg-3);
    display: flex; align-items: center; gap: 14px;
  }
  .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  .h2 {
    margin-top: 18px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--fg);
  }
  html[lang="ko"] .h2 { font-family: var(--sans); font-weight: 400; letter-spacing: -0.01em; line-height: 1.28; font-size: 30px; }
  /* 도시명 제목은 언어 무관 영문 세리프 */
  html[lang="ko"] .h2.h2-city { font-family: var(--serif); letter-spacing: -0.005em; line-height: 1.08; font-size: 36px; }

  .lede {
    margin-top: 18px;
    font-size: 15px; line-height: 1.75; letter-spacing: 0.01em;
    color: var(--fg-2);
    max-width: 58ch;
  }

  /* ── Salons ─────────────────────────────────────────── */
  .salons { margin-top: 34px; display: grid; gap: 14px; }

  .salon {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 26px 22px 24px;
    display: flex; flex-direction: column;
  }
  .salon .tag { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  .salon .city {
    margin-top: 8px;
    font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.02; color: var(--fg);
  }
  .salon .addr { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
  .salon .addr a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
  .salon .addr a:hover { color: var(--fg); }

  .rows { margin-top: 18px; border-top: 1px solid var(--line); }
  .row { display: flex; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .row .k { flex: none; width: 92px; font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); line-height: 1.5; }
  .row .v { font-size: 14.5px; color: var(--fg); font-variant-numeric: tabular-nums; }
  .row .v small { display: block; color: var(--fg-3); font-size: 12.5px; margin-top: 1px; }
  .row .v a { text-decoration: none; }
  .row .v a:hover { border-bottom: 1px solid var(--line-2); }

  .salon .actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
  .salon .actions .btn { flex: 1 1 auto; }

  /* ── Services / price list ──────────────────────────── */
  .price-groups { margin-top: 30px; border-top: 1px solid var(--line); }

  details.svc { border-bottom: 1px solid var(--line); }
  details.svc summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 2px;
    font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--fg);
    transition: color 0.25s ease;
  }
  html[lang="ko"] details.svc summary { font-family: var(--sans); font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
  details.svc summary::-webkit-details-marker { display: none; }
  details.svc summary .count { font-family: var(--sans); font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  details.svc summary .plus {
    flex: none; width: 14px; height: 14px; position: relative; color: var(--fg-2);
  }
  details.svc summary .plus::before, details.svc summary .plus::after {
    content: ""; position: absolute; background: currentColor; left: 0; top: 50%;
    width: 100%; height: 1px; transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  details.svc summary .plus::after { transform: translateY(-50%) rotate(90deg); }
  details.svc[open] summary .plus::after { transform: translateY(-50%) rotate(0deg); }
  details.svc summary .right { display: flex; align-items: center; gap: 18px; }

  table.prices { width: 100%; border-collapse: collapse; margin: 2px 0 22px; }
  table.prices th, table.prices td { padding: 9px 4px; vertical-align: top; }
  table.prices th {
    font-size: var(--label-size); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--fg-3); text-align: right; border-bottom: 1px solid var(--line);
  }
  table.prices th:first-child { text-align: left; }
  table.prices td { font-size: 14px; color: var(--fg); border-bottom: 1px solid var(--hair); }
  table.prices tr:last-child td { border-bottom: none; }
  table.prices td.n { color: var(--fg-2); padding-left: 2px; }
  table.prices td.p { text-align: right; width: 54px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  table.prices td.p.dash { color: var(--fg-3); }
  table.prices td.span { text-align: right; color: var(--fg); white-space: nowrap; }

  .notes { margin-top: 26px; display: grid; gap: 8px; }
  .notes p { font-size: 13px; line-height: 1.65; color: var(--fg-2); padding-left: 16px; position: relative; }
  .notes p .sq { position: absolute; left: 0; top: 8px; /* 사각 중심 = 첫 줄 대문자·한글 잉크 중심 (기준선 15 − 높이 10 ÷ 2) */ width: 4px; height: 4px; background: var(--pine); } /* "—" → 작은 Pine 사각형 (B 마크·+ 버튼 사각형 문법, 2026-10-01) */

  /* ── Head Spa ───────────────────────────────────────── */
  .spa-photo { margin-top: 34px; border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; }
  .spa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92); }

  .steps { margin-top: 34px; border-top: 1px solid var(--line); }
  .step { display: flex; gap: 18px; padding: 20px 2px; border-bottom: 1px solid var(--line); }
  .step .num { flex: none; width: 28px; font-family: var(--serif); font-size: 18px; color: var(--fg-3); padding-top: 2px; }
  .step h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--fg); }
  html[lang="ko"] .step h3 { font-family: var(--sans); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; }
  .step p { margin-top: 8px; font-size: 14.5px; line-height: 1.7; color: var(--fg-2); }

  .spa-facts { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fact { min-width: 0; border: 1px solid var(--line); border-radius: 2px; padding: 16px 12px; }
  .fact .k { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  /* 모바일에선 "Premium Head Spa"가 두 줄로 접히게 (nowrap이면 3칸 그리드가 오른쪽 여백을 넘침) */
  .fact .v { margin-top: 6px; font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--fg); }
  html[lang="ko"] .fact .v { font-family: var(--sans); font-size: 18px; font-weight: 400; }

  .spa-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
  .spa-cta .btn { flex: 1 1 auto; }

  /* ── Team ───────────────────────────────────────────── */
  .team-group { margin-top: 30px; }
  .team-group + .team-group { margin-top: 38px; }
  .team-group h3 { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  .people { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .person { display: block; text-decoration: none; color: var(--fg); }
  .person .photo {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 3 / 4; border-radius: 2px;
    background: var(--tint); /* 로딩 전 자리 표시 */
  }
  .person .photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .person .meta { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
  .person .name { font-family: var(--serif); font-size: 24px; line-height: 1; }
  .person .role { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  .person .ig { font-size: 12px; color: var(--fg-2); word-break: break-all; transition: color 0.25s ease; }
  @media (hover: hover) {
    .person:hover .photo img { transform: scale(1.035); }
    .person:hover .ig { color: var(--fg); }
  }
  .person:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

  /* ── FAQ ────────────────────────────────────────────── */
  .faq { margin-top: 30px; border-top: 1px solid var(--line); }
  details.q { border-bottom: 1px solid var(--line); }
  details.q summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding: 18px 2px;
    font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--fg);
  }
  html[lang="ko"] details.q summary { font-family: var(--sans); font-weight: 400; font-size: 17px; letter-spacing: -0.01em; }
  details.q summary::-webkit-details-marker { display: none; }
  details.q summary .plus { flex: none; width: 12px; height: 12px; position: relative; color: var(--fg-2); top: -1px; }
  details.q summary .plus::before, details.q summary .plus::after {
    content: ""; position: absolute; background: currentColor; left: 0; top: 50%;
    width: 100%; height: 1px; transform: translateY(-50%); transition: transform 0.3s ease;
  }
  details.q summary .plus::after { transform: translateY(-50%) rotate(90deg); }
  details.q[open] summary .plus::after { transform: translateY(-50%) rotate(0); }
  details.q p { padding: 0 2px 20px; font-size: 14.5px; line-height: 1.75; color: var(--fg-2); max-width: 60ch; }

  /* ── Newsletter ─────────────────────────────────────── */
  .nl-form { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field label { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  .field input[type="email"] {
    height: 50px; padding: 0 16px;
    background: transparent; border: 1px solid var(--line-2); border-radius: 2px;
    font-family: var(--sans); font-size: 16px; color: var(--fg);
    transition: border-color 0.25s ease;
  }
  .field input::placeholder { color: var(--fg-3); }
  .field input:focus { outline: none; border-color: var(--fg); }
  .field input:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }

  .consent { display: flex; gap: 14px; align-items: flex-start; }
  .consent input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: none; width: 20px; height: 20px; margin-top: 2px;
    border: 1px solid var(--line-2); border-radius: 2px; background: transparent;
    cursor: pointer; position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .consent input[type="checkbox"]:checked { background: var(--fg); border-color: var(--fg); }
  .consent input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  }
  .consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
  .consent label { font-size: 13px; line-height: 1.7; color: var(--fg-2); cursor: pointer; }
  .consent label a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-2); }

  .nl-note { font-size: 12px; line-height: 1.7; color: var(--fg-3); }
  .nl-note a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--line); }

  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .nl-note { font-size: 13px; line-height: 1.7; color: var(--fg-2); padding-left: 34px; } /* 동의 문구와 같은 글자, 체크박스 옆 글자 시작점에 맞춤 */
  .status { min-height: 1.5em; font-size: 13.5px; }
  .status.ok { color: var(--fg); }
  .status.error { color: var(--sienna); }

  /* ── Footer ─────────────────────────────────────────── */
  footer { margin-top: 110px; padding-top: 28px; border-top: 1px solid var(--line); }
  .foot-grid { display: grid; gap: 28px; }
  .foot-col h4 { font-size: var(--label-size); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); }
  .foot-col ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
  .foot-col a { font-size: 14px; color: var(--fg-2); text-decoration: none; transition: color 0.25s ease; }
  .foot-col a:hover { color: var(--fg); }
  .foot-brand { font-family: var(--serif); font-size: 26px; color: var(--fg); }
  .foot-brand small { display: block; margin-top: 8px; font-family: var(--sans); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
  .foot-legal { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 11px; letter-spacing: 0.08em; color: var(--fg-3); }
  .foot-legal a { color: var(--fg-3); text-decoration: none; }
  .foot-legal a:hover { color: var(--fg); }

  /* ── Desktop ────────────────────────────────────────── */
  @media (min-width: 900px) {
    /* ── 16:10 틀 단위 --u (2026-09-24 사용자 결정) ──
       레퍼런스는 16:10(1440×900) 화면 캡처. 화면 안에 들어가는 16:10 틀의 폭 1% = min(1vw, 1.6svh).
       16:10 화면에선 1vw와 같고, 가로로 긴 모니터(예: 2.1:1)에선 높이 기준으로 줄어 레퍼런스 구도를 유지.
       히어로와 상단 바의 크기는 전부 이 단위로 */
    :root {
      --u: min(1vw, 1.6svh); /* 히어로 전용 16:10 틀 단위 (상단 바에는 쓰지 않음) */
      /* 떠 있는 바 — PC에선 화면 비율과 무관하게 고정 (2026-09-24 사용자 지시, 틀 단위 가변 롤백).
         값은 1440×900에서 레퍼런스와 맞춘 것 */
      --bar-top:  12px;
      --bar-side: 19px;
      --bar-h:    64px;
      --page-top: calc(var(--bar-top) + var(--bar-h) + 40px);
    }
    .page { max-width: 1120px; padding: var(--page-top) 56px 72px; }
    header.bar { border-radius: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); padding-top: 0; }
    .book { display: block; }
    .hero-title .w { display: inline-block; } /* PC: 한 줄 */
    .hero-low { padding: 0; }

    /* 좌 워드마크 / 가운데 메뉴 / 우 지구본·Book now (레퍼런스 배치) */
    .bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 var(--bar-side); gap: 10px; }
    .wordmark { font-size: 21px; }
    .brand { margin-right: 0; justify-self: start; }
    .menu { display: flex; }
    .bar-right { justify-self: end; }
    .burger { display: none; }
    .mnav { display: none !important; }
    .book-btn { height: 38px; padding: 0 18px; }
    .book-btn .long { display: inline; }
    .book-btn .short { display: none; }

    /* 히어로 = 레퍼런스(Sui, 1440×900 캡처) 실측 비율 그대로 — 2026-09-24
       타이틀 글자 폭 = 틀 폭 79% / 글자(어센더~베이스라인) 세로 중심 = 화면 높이 47.3%
       서브 20px@1440(1.389u) 줄높이 1.2, 2줄 / 버튼 46px(3.19u) 높이·붙은 한 쌍
       서브 첫 줄 위 = 화면 높이 78.7%, 버튼 위 89.1%, 버튼 아래 94.1% (하단 여백 5.9%) */
    .hero {
      height: 100svh;      /* 화면 맨 위(떠 있는 바 뒤)부터 화면 끝까지 */
      min-height: 560px;
      padding: 0;
    }
    .hero-mid {
      position: absolute; left: 0; right: 0;
      top: 47.3svh;
      transform: translateY(-50%);
    }
    /* 글자(어센더~베이스라인) 중심을 박스 중심에 맞추는 보정 — 글꼴 수치로 계산(캔버스 measureText):
       라틴 Instrument Serif는 글자 중심이 박스 중심보다 0.0295em 위, 한글(Noto Serif KR, 줄높이 1.2)은 0.0876em 위 → 그만큼 내림 */
    .hero-title { position: relative; top: 0.0295em; }
    /* 글자 폭/글자 크기 실측: EN·DE 6.895, KO 7.368 → 폭 79u가 되는 크기 */
    .hero-title { font-size: calc(var(--u) * 11.46); letter-spacing: -0.015em; white-space: nowrap; line-height: 1.05; }
    .hero-low { position: absolute; left: 0; right: 0; top: auto; bottom: 5.9svh; display: block; }
    .hero-sub { margin: 0 auto; font-size: calc(var(--u) * 1.389); line-height: 1.2; max-width: none; }
    .hero-cta { margin-top: calc(var(--u) * 3.4); }
    .hbtn { height: calc(var(--u) * 3.19); padding: 0 calc(var(--u) * 2.08); font-size: calc(var(--u) * 1.15); } /* 레퍼런스 1.04u → 1.11u → 1.15u (1440에서 15→16→16.6px, 2026-09-25) */
    /* PC 히어로 버튼은 화면 크기와 무관하게 고정 (2026-10-01): 1920×1080 최대화 창(u ≈ 15.1)에서의 크기 그대로 */
    .hero-cta .hbtn { height: 48px; padding: 0 31.5px; font-size: 17.4px; }
    .intro { --fs: 70svh; } /* 서브·버튼(79~94%)까지는 거의 Pine 유지, 그 아래부터 밝아짐 */
    .band { width: min(100% - 112px, 1008px); margin: 112px auto 0; aspect-ratio: 21 / 9; border-radius: 2px; }

    section.block { margin-top: 150px; }
    .block-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
    .h2 { font-size: 56px; }
    html[lang="ko"] .h2 { font-size: 44px; }
    html[lang="ko"] .h2.h2-city { font-size: 56px; }
    .lede { margin-top: 0; font-size: 16px; }

    .salons { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
    .salon { padding: 34px 32px 32px; }
    .salon .city { font-size: 44px; }

    .price-groups { margin-top: 48px; }
    details.svc summary { padding: 26px 2px; font-size: 32px; }
    html[lang="ko"] details.svc summary { font-size: 24px; }
    table.prices { margin: 4px 0 30px; }
    table.prices td { font-size: 15px; padding: 11px 8px; }
    table.prices th { padding: 10px 8px; }
    table.prices td.p { width: 96px; }
    .notes { grid-template-columns: 1fr 1fr; gap: 10px 40px; margin-top: 34px; }

    .spa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 48px; }
    .spa-photo { margin-top: 0; aspect-ratio: 4 / 5; position: sticky; top: 40px; }
    .steps { margin-top: 0; }
    .step { padding: 24px 2px; }
    .step h3 { font-size: 26px; }
    .spa-facts { margin-top: 32px; }
    .fact { padding: 16px 14px; }
    .fact .v { font-size: 26px; white-space: nowrap; }
    .spa-cta .btn { flex: 0 0 auto; }

    .team-group { margin-top: 48px; }
    .people { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
    .person .name { font-size: 28px; }

    .faq { margin-top: 48px; }
    details.q summary { font-size: 24px; padding: 22px 2px; }
    html[lang="ko"] details.q summary { font-size: 19px; }

    .nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 8px; }
    .nl-form { margin-top: 0; }

    footer { margin-top: 170px; padding-top: 40px; }
    .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  }

  /* ── Motion ─────────────────────────────────────────── */
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  html.anim .rv {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--d, 0s);
  }
  html.anim .rv.on { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    header.bar, .hero-mid, .hero-low { animation: none; }
    html.anim .rv { opacity: 1; transform: none; transition: none; }
    .btn, .person .photo img, .lang-btn { transition: none; }
  }

  /* ════ 2026-09-24 홈 재구성: 히어로 → 큰 문장 → 살롱 사진 → 팀 → FAQ → 뉴스레터 → 푸터 ════ */

  /* 히어로 Booking: 상단 Book now와 같은 매장 선택 창, 버튼 위로 열림 */
  .hbook { position: relative; display: flex; }
  button.hbtn { border: 0; cursor: pointer; }
  .hbook-panel { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; text-align: left; }
  .hbook.open .hbook-panel { display: block; }

  /* 히어로 아래 전환 구간: 그라디언트가 버튼(92~94%) 아래부터 시작해 이 구간 끝에서 Eggshell */
  .intro { --fs: 93svh; }
  .intro-fade { height: 40svh; }

  /* 큰 문장 (레퍼런스 Screenshot_4: 산세리프 단락 + 앞 사각 마크) — 모바일 기본값 */
  .statement { padding-top: 64px; }
  /* 문장 끝 → 다음 섹션: 레퍼런스 비율(글자 크기의 5.8배) 그대로 → 28px × 5.8 */
  .statement + section.block { margin-top: 136px; } /* 선언문 → 직원 소개 (96 → 136, "여백 좀 늘리고" 2026-09-30) */
  .stmt {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fg);
  }
  /* 사각 마크: 파비콘과 같은 세리프 B (Pine 사각 + Eggshell 글자).
     레퍼런스 실측: 사각 높이 1.01em, 글자와 간격 0.2em. 세로 위치는 글자 중앙 맞춤(기준선 아래 0.145em ~ 위 0.865em).
     inline-block + overflow:hidden → 세로 정렬 기준이 사각 밑변이 됨 (inline-flex는 안쪽 B 기준선에 맞춰져 처졌음).
     B = 사각 높이의 68%(Instrument Serif 대문자 0.70em → 0.98em), 줄높이로 대문자 잉크 세로 중앙, 왼쪽으로 2.4% 광학 보정 */
  .stmt-mark {
    /* 아래 em 값은 마크 자신의 글자 크기(0.94em) 기준 → 문장 글자 기준으로 환산해 둔 값 (실측 B 높이 68%) */
    display: inline-block; overflow: hidden;
    width: 1.0745em; height: 1.0745em;    /* = 문장 1.01em */
    margin-right: 0.2128em;               /* = 문장 0.2em */
    vertical-align: -0.1543em;            /* = 문장 -0.145em: 사각 중심 0.36em = 글자 잉크 중심(한글 0.354 / 라틴 0.364) */
    background: var(--pine); color: var(--eggshell);
    border-radius: 2px;
    font-family: var(--serif); font-size: 0.94em;
    line-height: 1.1133em;   /* 사각 높이 + 2×0.0194em → B를 0.0194em 내려 대문자 잉크 세로 중앙 (위아래 여백 각 0.178em) */
    text-align: center; text-indent: -0.026em;   /* 사각 폭의 2.4% 왼쪽 */
  }

  /* 첫 문장 하이라이트: 스크롤 진행도(--hl, 0→1)에 따라 Pine 배경이 왼쪽부터 차오르고
     채워진 부분 글자만 Eggshell로. 여러 줄이면 줄을 이어 붙인 한 띠로 계산(slice) → 줄 순서대로 차오름.
     바깥 span = 배경 띠, 안쪽 span = 같은 폭의 Eggshell 층을 글자 모양으로 잘라(background-clip: text) 겹침 (2026-09-25) */
  .stmt .hl {
    --hl: 0;
    background: linear-gradient(var(--pine), var(--pine)) no-repeat 0 0 / calc(var(--hl) * 100%) 100%;
    box-decoration-break: slice; -webkit-box-decoration-break: slice;
    border-radius: 1px;
    padding: 0 0.08em; margin: 0 -0.08em; /* 한 단어 칠: 글자 양옆 살짝 여유, 줄 간격·자간은 그대로 */
  }
  .stmt .hl > span {
    background-image: linear-gradient(var(--eggshell), var(--eggshell)), linear-gradient(var(--pine), var(--pine));
    background-repeat: no-repeat;
    background-size: calc(var(--hl) * 100%) 100%, 100% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    box-decoration-break: slice; -webkit-box-decoration-break: slice;
  }
  /* 하위 페이지(/salons, /services, /head-spa): Pine 배경 + 홈과 같은 그레인 */
  body.page-dark { background: url("/img/grain-mix.png") repeat, var(--pine); }
  body.page-dark .page > section.block:first-child { margin-top: 40px; }

  @media (min-width: 900px) {
    .intro { --fs: 95svh; }

    /* 1440 기준 실측: 글자 60px(4.17u)·줄 간격 1.1, 왼쪽 = 상단 바 가장자리 + 4px, 최대 폭 84u,
       위 여백 82px(5.7u), 마지막 줄 → 다음 콘텐츠 348px(24.2u) */
    .statement {
      width: var(--full);
      margin-left: calc(50% - var(--full) / 2);
      padding: calc(var(--u) * 5.7) calc(var(--bar-side) + 4px) 0;
    }
    .stmt { font-size: calc(var(--u) * 4.17); line-height: 1.1; max-width: calc(var(--u) * 84); }

    /* 살롱 사진: 큰 문장과 같은 좌우 기준선(풀블리드 - 양옆 여백) */
    .band {
      width: calc(var(--full) - 2 * (var(--bar-side) + 4px));
      margin: calc(var(--u) * 24.2) 0 0 calc(50% - var(--full) / 2 + var(--bar-side) + 4px);
    }
    body.page-dark .page > section.block:first-child { margin-top: 64px; }

    /* 선언문 → 직원 소개: FAQ 전환보다 좁은 여백 */
    .statement + section.block { margin-top: 224px; } /* 160 → 224 */

    /* 홈: 문장 아래 섹션(팀·FAQ·뉴스레터·푸터)도 문장과 같은 좌우 기준선(바 가장자리 + 4px)
       — 가운데 1120px로 갑자기 몰리지 않게 (2026-09-25) */
    body.home .page { max-width: none; padding-left: calc(var(--bar-side) + 4px); padding-right: calc(var(--bar-side) + 4px); }
  }

  /* ── 홈 섹션(팀·FAQ·뉴스레터): 위 문장과 같은 디자인 언어로 미니멀하게 (2026-09-25)
     라벨·구분선 없음, 제목 = 산세리프 한 줄, 설명 = 작은 회색 한 단락, 팀 카드 = 작은 사진 + 이름/직급 ── */
  body.home .eyebrow { display: none; }
  body.home .block-head { display: block; }
  body.home .h2 {
    margin-top: 0; font-family: var(--sans); font-weight: 400;
    font-size: 24px; line-height: 1.2; letter-spacing: -0.01em;
  }
  body.home .lede { margin-top: 10px; font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--fg-3); max-width: 52ch; }
  body.home .team-group { margin-top: 36px; }
  body.home .team-group + .team-group { margin-top: 64px; } /* Frankfurt 카드 → Oberursel 라벨: 24px는 "너무 붙었다" (2026-09-30) */
  body.home #team .team-group:first-child { margin-top: 0; } /* 팀 제목·설명 삭제 → 첫 매장 라벨이 섹션 시작 */
  /* 매장 라벨 = 예약 팝업과 같은 형식: 세리프 도시명 + 옆에 산세리프 대문자 매장명(Sage) */
  body.home .team-group h3.tg-head, body.home h2.faq-head {
    display: flex; align-items: baseline; gap: 12px;
    font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg);
  }
  body.home .tg-city { font-family: var(--serif); font-size: 24px; line-height: 1; }
  body.home .tg-who { font-family: var(--sans); font-size: var(--label-size); line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sage); } /* line-height 1: 옆 작은 글자가 제목 줄 아래로 삐져나와 머리 높이를 늘리지 않게 (모바일 1.8px 차) */
  /* ── 팀 카드 = 레퍼런스 Screenshot_5 실측 (2026-09-25) ──────────────────
     레퍼런스 단위(원본 px, 경계 소수점 보간 실측): 카드 84.25×83.0 · 카드 간격 4.57 (3장 + 2간격 = 콘텐츠 폭 261.9)
     카드 안: 좌우 여백 3.5 · 사진 윗선 22.95 · 사진 77.27×56.25(1.374:1) · 아래 여백 3.8
     글자(해상도 한계 ±1단위): 라벨 중심 4.3 · 설명 첫 줄 중심 9.6 · 줄 간격 3.05 · 제목 대문자 높이 ≈4.7 · 제목 기준선 → 카드 4.2 · 카드 → 다음 제목 윗선 5.0
     → 카드 안쪽은 카드 폭 기준 cqw로 환산(1단위 = 1.19cqw), 작은 화면에선 글자 최소 크기 보장
     매장별 한 줄 + 좌우 화살표로 넘기기(스크롤 스냅, 모바일은 스와이프도 가능) */
  body.home .car { position: relative; margin-top: 18px; }
  body.home .people {
    display: flex; gap: 15px; margin-top: 0; /* 고정 카드 270px × 4.57/84.25 */
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  body.home .people::-webkit-scrollbar { display: none; }
  body.home .person {
    flex: 0 0 calc(100% - 36px); scroll-snap-align: start; container-type: inline-size; /* 모바일: 화면 폭에 맞춰 크게(393px 폰에서 309px), 다음 카드가 살짝 보임 — 270px 고정은 "너무 작다" (2026-09-30). PC는 아래에서 270px 고정 */
    display: flex; flex-direction: column;
    background: var(--pine); color: var(--eggshell); border-radius: 2px;
  }
  /* cqw는 컨테이너 자신이 아닌 자식에서만 카드 폭 기준 → 여백을 자식(.meta·.photo)에 둠 */
  body.home .person .meta { display: block; margin: 0; padding: 3.57cqw 4.15cqw 0; min-height: 27.24cqw; } /* 카드 윗변 → 사진 윗선 22.95단위 */
  body.home .person .name {
    display: block; font-family: var(--sans); font-weight: 500;
    font-size: max(10.5px, 2.65cqw); line-height: 1.2;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--eggshell);
  }
  body.home .person .role, body.home .person .ig {
    display: block; font-size: max(11px, 2.4cqw); line-height: max(15px, 3.62cqw); /* 줄 간격 3.05단위 */
    letter-spacing: 0; text-transform: none; color: rgba(250, 244, 231, 0.55); word-break: normal;
  }
  body.home .person .role { margin-top: max(6px, 2.87cqw); } /* 라벨 중심 4.3 → 첫 줄 중심 9.6단위 */
  body.home .person:hover .ig { color: var(--eggshell); }
  body.home .person .photo { margin: 0 4.15cqw 4.51cqw; aspect-ratio: 77.27 / 56.25; border-radius: 0; background: transparent; } /* 폭 77.27단위, 아래 여백 3.8 */
  /* 가로 확장본의 머리·어깨를 온전히 표시. 호버 확대는 사용자 지시로 유지(2026-09-25). */
  body.home .person .photo img { object-position: center; }
  body.home .person .photo-wide img { object-fit: cover; } /* contain이면 비율 차(≤0.05%)로 위아래 1px 미만 틈 → 폰에서 검은 줄. cover로 꽉 채움 (2026-09-25) */
  body.home .person:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

  /* 좌우 화살표: 사진 높이 가운데, 끝에 닿으면 숨김 */
  body.home .car-btn {
    position: absolute; top: 60%; z-index: 2;
    width: 30px; height: 30px; border: 0; border-radius: 2px; /* 36 → 30 (2026-10-02) */
    display: flex; align-items: center; justify-content: center;
    background: var(--eggshell); color: var(--pine);
    font-family: var(--sans); font-size: 14px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%); transition: opacity 0.2s ease;
  }
  /* 화살표 = 글자(←→) 대신 도형으로 그림 → 글꼴 위아래 여백과 무관하게 상자 정중앙 (2026-10-02) */
  body.home .car .car-btn { font-size: 0; }
  body.home .car-btn::before {
    content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12M8 2l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.home .car-btn.prev::before { transform: scaleX(-1); }
  @media (max-width: 899px) { body.home .car-btn::before { width: 12px; height: 12px; } }
  body.home .car-btn.prev { left: 8px; }
  body.home .car-btn.next { right: 8px; }
  body.home .car-btn[disabled] { opacity: 0; pointer-events: none; }
  body.home .car-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
  body.home details.q summary { font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: -0.005em; }
  body.home #faq { margin-top: 256px; } /* 팀 카드 → FAQ (96 → 144 → 192 → 256, 2026-09-25) */
  body.home #faq + #newsletter { margin-top: 256px; } /* FAQ → 뉴스레터 = 직원 카드 → FAQ (2026-09-30) */
  /* ── FAQ 아코디언 = 레퍼런스 Screenshot_6 실측 (폰 화면 102px = 393pt, 1px = 3.85pt) ──
     항목: 옅은 박스, 간격 5 · 머리 높이 76 · 왼쪽 여백 16 / 오른쪽 15
     번호 칸 35×35(1px 테두리) → 질문까지 12 · 질문 15px 500 · 오른쪽 사각 버튼 44×44(+)
     열림: 박스 Pine, 글자 Eggshell, 번호 칸 테두리 Eggshell, 버튼 Eggshell 바탕 + Pine(−)
     답: 왼쪽 16 · 위 18 · 아래 24, 14px/1.4 · 제목 → 설명 24 · 설명 → 첫 항목 36 (2026-09-25) */
  body.home #faq .lede { margin-top: 24px; }
  body.home .faq { margin-top: 18px; border-top: 0; /* = 팀 제목 → 카드 간격 */ display: flex; flex-direction: column; gap: 7px; } /* Screenshot_7: 카드 간격 2.0px = 7pt */
  body.home details.q { border-bottom: 0; background: var(--eggshell); box-shadow: 0 1px 2px rgba(59, 75, 59, 0.06), 0 6px 18px rgba(59, 75, 59, 0.07); transition: background 0.25s ease; } /* 단색 Eggshell(그레인 없음) + 옅은 그림자 (2026-09-25) */
  /* Screenshot_7 실측 (폰 화면 106.1px = 393pt, 1px = 3.70pt): 번호 없음 · 왼쪽 14 · 오른쪽 17.5 · 위아래 17 · +박스 33 (질문 줄과 세로 중앙) · 닫힌 높이 67
     답: 질문 중심 → 첫 줄 중심 39 · 줄 간격 18 · 아래 13 */
  body.home details.q summary {
    display: flex; align-items: center; gap: 14px;
    min-height: 67px; padding: 17px 17.5px 17px 14px;
    font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; color: var(--pine);
  }
  body.home details.q .q-num {
    flex: none; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(59, 75, 59, 0.28); font-size: 14px; font-weight: 400; color: var(--pine);
  }
  body.home details.q .q-text { flex: 1; }
  body.home details.q summary .plus {
    flex: none; position: relative; top: 0; width: 33px; height: 33px;
    border: 1px solid rgba(59, 75, 59, 0.28); border-radius: 0; background: transparent; color: var(--pine); /* 닫힘 = 번호 칸과 같은 얇은 테두리 + Pine (+), 열림만 꽉 찬 버튼 (2026-09-25) */
  }
  body.home details.q summary .plus::before, body.home details.q summary .plus::after {
    left: 50%; top: 50%; width: 11px; height: 1.5px; transform: translate(-50%, -50%);
  }
  body.home details.q summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  body.home details.q[open] { background: var(--pine); }
  body.home details.q[open] summary { color: var(--eggshell); }
  body.home details.q[open] .q-num { border-color: rgba(250, 244, 231, 0.7); color: var(--eggshell); }
  body.home details.q[open] summary .plus { background: var(--eggshell); border-color: var(--eggshell); color: var(--pine); }
  body.home details.q[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0); } /* + → − */
  body.home details.q p { margin-top: -4px; padding: 0 17.5px 13px 14px; max-width: none; font-size: 14px; line-height: 18px; color: rgba(250, 244, 231, 0.82); }
  /* FAQ 제목 = 영문 세리프, 섹션 제목이라 매장 라벨(24px/2.39u)보다 크게 — 모바일 36px, PC 3.47u(1440에서 50px) */
  body.home #faq .h2, html[lang="ko"] body.home #faq .h2 { font-family: var(--serif); font-size: 46px; line-height: 1; letter-spacing: 0; } /* 모바일 = 레퍼런스 Screenshot_6 제목 대문자 높이 ≈33pt ÷ 0.719 */

  @media (min-width: 900px) {
    body.home .h2 { font-size: calc(var(--u) * 2.22); }      /* 1440에서 32px */
    body.home .lede { margin-top: 12px; font-size: 15px; }
    body.home .team-group { margin-top: calc(var(--u) * 3.3); }
    body.home .team-group + .team-group { margin-top: calc(var(--u) * 2.56); } /* 7단위 */
    body.home .tg-city { font-size: calc(var(--u) * 2.22); }  /* 1440에서 32px (FAQ·뉴스레터 제목과 같은 크기) */
    body.home .tg-who { font-size: 11px; }
    body.home .team-group h3.tg-head, body.home h2.faq-head { gap: 14px; }
    /* 1440 기준 레퍼런스 1단위 = 5.265px = 0.3656u (콘텐츠 1379px ÷ 261.9) · 한 화면 3장 */
    body.home .tg-city { font-size: calc(var(--u) * 2.39); }  /* 대문자 높이 4.7단위 ÷ Instrument Serif 0.719 */
    body.home .person { flex-basis: 270px; } /* PC: 화면 폭과 무관하게 고정 (900px 창의 3장 배치 크기) */
    body.home .car { margin-top: calc(var(--u) * 1.153); }     /* 제목 기준선 → 카드 4.2단위 (줄 상자 아래 0.16em 빼고) */
    body.home .team-group + .team-group { margin-top: calc(var(--u) * 5.5); } /* 1440에서 79px (22px → 79px) */
    body.home .car-btn { width: 36px; height: 36px; font-size: 15px; } /* 44 → 36 (2026-10-02) */
    body.home .car-btn.prev { left: 14px; }
    body.home .car-btn.next { right: 14px; }
    body.home details.q summary { font-size: 19px; padding: 20px 2px; }
    body.home #faq { margin-top: calc(var(--u) * 28); } /* 1440에서 403px (150 → 230 → 317 → 403) */
    body.home #faq + #newsletter { margin-top: calc(var(--u) * 28); }
    body.home #faq .h2, html[lang="ko"] body.home #faq .h2 { font-size: calc(var(--u) * 3.47); }
    /* FAQ 아코디언 PC: 모바일 레퍼런스 치수 × 1.15 */
    body.home #faq .lede { margin-top: 28px; }
    body.home .faq { margin-top: calc(var(--u) * 1.153); gap: 8px; } /* = 팀 제목 → 카드 (레퍼런스 4.2단위) */
    body.home details.q summary { min-height: 77px; padding: 20px 20px 20px 16px; gap: 16px; font-size: 18px; } /* PC = 모바일 레퍼런스 × 1.15 */
    body.home details.q .q-num { width: 40px; height: 40px; font-size: 15px; }
    body.home details.q summary .plus { width: 38px; height: 38px; }
    body.home details.q summary .plus::before, body.home details.q summary .plus::after { width: 12px; }
    body.home details.q p { margin-top: -4px; padding: 0 20px 15px 16px; font-size: 16px; line-height: 21px; max-width: none; }
  }

  /* FAQ 큰 제목 (레퍼런스 Screenshot_7 방식, 2026-09-25): 모바일 46px 두 줄, PC = 위 큰 문장과 같은 크기(4.17u, 1440에서 60px)
     제목 마지막 줄 기준선 → 첫 질문 = 레퍼런스 88pt ÷ 46 = 1.9em */
  body.home .faq-title {
    font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 0.95; letter-spacing: -0.005em;
    color: var(--fg); max-width: 8em;
  }
  body.home .faq-title + .lede { margin-top: 22px; } /* 뉴스레터: FAQ와 같은 큰 세리프 제목 아래 설명 */
  body.home .faq-title + .faq { margin-top: 81px; } /* 기준선 → 첫 질문 88 (줄 상자 아래 0.145em = 6.7px 제외) */
  @media (min-width: 900px) {
    body.home .faq-title { font-size: calc(var(--u) * 4.17); max-width: none; }
    body.home .faq-title + .faq { margin-top: calc(var(--u) * 7.37); } /* 1.768em × 4.17u */
  }
  /* 매장 라벨 옆 인스타그램 아이콘 (Pine): 공식 글리프 비율 — 16 격자에서 바깥 둥근 사각 선 두께 1.44·바깥 모서리 반경 4.7,
     가운데 원 바깥 반지름 4.11/안 2.67, 오른쪽 위 점 중심 (12.27, 3.73)·반지름 0.96. 아이콘 아랫선을 도시명·매장명 글자 기준선에 맞춤 */
  /* 아이콘은 매장명 글자 줄 안에 인라인으로 둠 → SVG 아랫변이 글자 기준선(잉크 아랫선)에 정확히 놓임 (flex baseline에 의존하지 않음) */
  body.home .tg-ig { display: inline; margin-left: 0.95em; color: var(--pine); text-decoration: none; letter-spacing: 0; transition: opacity 0.2s ease; }
  body.home .tg-ig svg { display: inline-block; vertical-align: -2.5px; width: 13px; height: 13px; } /* 크기 13/14px 유지, 기준선보다 2.5px 아래(1.5 → 1px 더) (2026-09-30: 기준선 맞춤 → "살짝만 더 밑으로") */
  @media (min-width: 900px) { body.home .tg-ig svg { width: 14px; height: 14px; } }
  body.home .tg-ig:hover { opacity: 0.6; }
  body.home .tg-ig:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

  /* 홈: 매장 라벨과 직원 카드 사이 매장 사진 — 라벨 → 사진은 라벨 → 카드와 같은 간격, 사진 → 카드는 카드 사이 간격(15px) */
  body.home .tg-photo { display: block; margin-top: 18px; border-radius: 2px; overflow: hidden; } /* 크롭 없음: 폭에 맞춰 사진 전체가 비율 그대로 커지고 줄어듦 (사용자 지시 2026-09-30) */
  body.home .tg-photo img { width: 100%; height: auto; display: block; }
  body.home .tg-photo + .car { margin-top: 15px; }
  @media (min-width: 900px) {
    body.home .tg-photo { margin-top: calc(var(--u) * 1.153); }
    body.home .tg-photo + .car { margin-top: 15px; }
  }
  /* 매장 사진 3장 줄 (2026-10-02): 직원 카드와 같은 넘기기, 한 번에 한 장 = 줄 전체 폭, 원본 비율(크롭 없음) */
  body.home .photo-car .shot { flex: 0 0 100%; scroll-snap-align: start; display: block; border-radius: 2px; overflow: hidden; }
  body.home .photo-car .shot img { width: 100%; height: auto; display: block; }
  /* 인스타그램 캐러셀 방식 (2026-10-02): 아래 가운데 점 3개(현재 = Pine, 나머지 = Stone),
     오른쪽 위 "1/3" 알약은 넘길 때 잠깐 나타났다 사라짐. 모바일은 손가락으로, PC는 마우스를 올리면 사진 위 작은 원형 화살표 */
  body.home .photo-car .car-btn { top: calc(50% - 9px); } /* 네모 화살표 그대로, 점 줄 높이만큼 위로 = 사진 세로 가운데 */
  @media (hover: none) { body.home .photo-car .car-btn { display: none; } } /* 모바일은 손가락으로 넘김 */
  body.home .photo-car .shot-dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
  body.home .photo-car .shot-dots button {
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
    background: var(--stone); cursor: pointer; transition: background 0.2s ease;
  }
  body.home .photo-car .shot-dots button.on { background: var(--pine); }
  body.home .photo-car + .car { margin-top: 15px; } /* 사진 → 직원 카드 = 카드 사이 간격 */
  /* 매장 카드 사진 (/salons) */
  .salon-photo { margin: 0 0 22px; overflow: hidden; border-radius: 2px; }
  .salon-photo img { width: 100%; height: auto; display: block; } /* 크롭 없음 */
  /* FAQ 두 묶음: 좁은 화면에선 한 줄로 이어 보이게(묶음 사이도 같은 5px), 1200px 이상에선 좌우 두 줄(간격 = 직원 카드 간격), 각 줄 독립 */
  body.home .faq-col { display: flex; flex-direction: column; gap: 7px; }
  @media (min-width: 900px) { body.home .faq-col { gap: 8px; } }
  @media (min-width: 1200px) {
    body.home .faq { flex-direction: row; align-items: flex-start; gap: calc(var(--u) * 1.671); }
    body.home .faq-col { flex: 1 1 0; min-width: 0; }
  }
  /* 최소 푸터 (2026-09-30): 구분선·로고·목록 없이 작은 회색 한 줄 */
  footer { border-top: 0; padding-top: 0; }
  footer .foot-legal { margin-top: 0; }
  /* 푸터 아래 여백 = 푸터 왼쪽 여백 (2026-09-30 사용자 지시)
     모바일: 페이지 좌우 24px / PC 홈: 바 가장자리 + 4px / PC 하위 페이지: 가운데 정렬 상자의 안쪽 여백 56px */
  /* 잉크 기준: 푸터 글자 밑선 → 바닥 = 글자 왼쪽 → 화면 가장자리. 줄 상자 아래 여유 5.6px(11px 글자)를 빼 줌 */
  .page { --foot-desc: 5.6px; padding-bottom: calc(24px - var(--foot-desc)); }
  @media (min-width: 900px) {
    .page { padding-bottom: calc(56px - var(--foot-desc)); }
    body.home .page { padding-bottom: calc(var(--bar-side) + 4px - var(--foot-desc)); }
  }  /* 좁은 PC 창(900~1099px): 13px 메뉴에서 독일어가 바 밖으로 밀림 → 메뉴 좌우 여백 축소 + 예약 버튼 짧은 라벨 */
  @media (min-width: 900px) and (max-width: 1099px) {
    .menu-btn { padding: 0 6px; gap: 6px; } /* 문의 메뉴 추가로 8 → 6 (2026-09-30) */
    .book-btn { padding: 0 14px; }
    .book-btn .long { display: none; }
    .book-btn .short { display: inline; }
  }

/* ── 디자인 리뷰 반영 (2026-09-30) ─────────────
   외부 리뷰 7항목 + 자간 의견, 미리보기 확인 후 반영 */

/* 1. 상단 '매장' 펼침 메뉴: 3열 틀 → 같은 너비 2열, 내용 폭 820px 가운데, 열 사이 56px */
.menu-item:first-child > .panel .panel-inner,
.menu-item:nth-child(2) > .panel .panel-inner { /* 시술 메뉴도 매장과 같은 2열 (2026-10-01) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(820px + 112px);   /* 좌우 안쪽 여백 56px×2 포함 */
  column-gap: 56px;
}

/* 2. 매장 정보 글자: 13px/18.2 → 14.5px/23px, 값은 밝게, 항목 이름은 한 단계만 약하게 */
.panel .p-sub { font-size: 14.5px; }
.panel .p-sub .ir { line-height: 23px; }
.panel .p-sub .ir + .ir { margin-top: 4px; }
.panel .p-sub .iv, .panel .p-sub .iv a { color: var(--fg); }
.panel .p-sub .hk { color: var(--fg-2); }

/* 3. 홈 하단 섹션 사이: 팀→FAQ, FAQ→뉴스레터 (데스크톱 ~478px → 180px, 모바일 256px → 100px) */
/* 2026-10-02: 팀 → FAQ, FAQ → 뉴스레터 = 문장 마지막 줄 → "Frankfurt" 간격(잉크 기준: 모바일 144, PC 1440에서 239)에 맞춤 */
body.home #faq,
body.home #faq + #newsletter { margin-top: 140.2px; }
@media (min-width: 900px) {
  body.home #faq { margin-top: 234px; }
  body.home #faq + #newsletter { margin-top: 226px; }
}

/* 4. FAQ 제목 → 질문 목록 (데스크톱 ~115~126px → 약 56px, 모바일 81px → 약 32px, 잉크 기준) */
body.home .faq-title + .faq { margin-top: 25px; }
@media (min-width: 900px) {
  body.home .faq-title + .faq { margin-top: 47px; }
}

/* 5. 디자이너 카드 글자: 이름 10.5 → 12.5px(자간 0.18em → 0.1em), 직함 11 → 12.5px(더 밝게), 계정 11 → 11.5px */
body.home .person .name { font-size: 4.63cqw; letter-spacing: 0.1em; } /* 카드 안 글자·줄 간격은 전부 카드 폭 비율(cqw) → 모바일 카드(310px)도 PC(270px)와 같은 비율로 커짐. 270px 기준: 이름 12.5 */
body.home .person .role { font-size: 4.63cqw; line-height: 6.3cqw; margin-top: 2.87cqw; color: rgba(250, 244, 231, 0.75); } /* 12.5 / 17 */
body.home .person .ig { font-size: 4.26cqw; line-height: 5.93cqw; } /* 11.5 / 16 */

/* 6. 모바일 FAQ 답변: 14px/18 → 14.5px/23, 질문과 답 사이 음수 여백 없애고 10px 여유 */
@media (max-width: 899px) {
  body.home details.q p { margin-top: 0; padding-top: 10px; font-size: 14.5px; line-height: 23px; }
}

/* 7. 모바일 메뉴 = PC 메뉴 (2026-09-30): 항목을 누르면 목록 대신 그 패널(PC 호버와 같은 내용)이 나옴 */
.mnav .big { border-bottom: 0; } /* 구분 줄 없음 — 선 구분은 가격표에만 (2026-10-01) */
.mnav .m-back {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 17px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--fg);
}
html[lang="ko"] .mnav .m-back { font-family: var(--sans); font-size: 22px; }
.mnav .m-back::before { content: "←"; font-family: var(--sans); font-size: 14px; color: var(--fg-3); }
.mnav .m-panel.panel { display: block; position: static; background: transparent; box-shadow: none; border-radius: 0; }
.mnav .m-panel.panel[hidden] { display: none; }
.mnav .m-panel .panel-inner { display: block; max-width: none; margin: 0; padding: 24px 0 0; }
.mnav .m-panel .panel-inner > div + div { margin-top: 34px; }

/* 매장 메뉴 칸 머리 (2026-10-01): 직원 소개 라벨과 같은 형식 — 세리프 도시명 + 옆 작은 대문자 매장명, 칸 제목 줄 없음 */
.panel .p-title.p-head { display: flex; align-items: baseline; gap: 12px; margin-top: 0; }
.panel .p-head .p-who {
  font-family: var(--sans); font-size: 11px; line-height: 1; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--fg-2); /* = 주소·전화 라벨(.hk) 색 */
}
.panel .p-head a { text-decoration: none; } /* 도시명 밑줄 없음 (2026-10-01) */
/* PC 도시명 = 직원 소개 도시명 크기(2.39u, 1440에서 34px). 모바일은 둘 다 24px 그대로.
   24px일 때 맞춘 잉크 간격 유지: Instrument Serif(줄 높이 1.05)에서 대문자 윗선은 줄 상자 위 0.146em,
   기준선은 줄 상자 아래 0.185em → 글자가 커진 만큼 여백에서 빼 준다 */
/* 모든 메뉴 칸 = 매장 칸 문법 (2026-10-01): 제목 → 목록도 잉크 24px (제목 기준선 → 첫 항목 대문자 윗선) */
.panel .p-head .p-ht { color: var(--fg); }
.panel .p-sub { line-height: 23px; }
/* 제목 아래만 32px로 (2026-10-01 A안: 제목 → 첫 항목 32, 항목·묶음 사이 24) */
.panel .p-head + ul { margin-top: 15.31px; }
@media (min-width: 900px) {
  .panel .p-head + ul { margin-top: calc(19.94px - 0.185 * var(--u) * 2.39); }
}
@media (min-width: 900px) {
  .panel .p-title.p-head { --fs: calc(var(--u) * 2.39); font-size: var(--fs); margin-top: calc(3.5px - 0.146 * var(--fs)); }
  .panel .p-head.p-city + .p-sub { margin-top: calc(27px - 0.185 * var(--u) * 2.39); } /* 도시명 기준선 → 주소 대문자 윗선 잉크 32px (A안) */
}

/* 매장 메뉴 외부 링크(Google Maps·Instagram): 위 정보 행과 같은 좁은 간격으로 — 줄 23 + 행 사이 4, 정보 → 링크도 같은 4 (PC·모바일, 2026-10-01) */
.panel .p-sub + ul.p-links { margin-top: 11px; } /* 휴무 → Google Maps만 원래 간격(잉크 24) 복귀 (2026-10-01) */
.panel ul.p-links li a { padding: 0; line-height: 23px; }
.panel ul.p-links li + li { margin-top: 4px; }

/* ── /services 가격표 = 홈 FAQ 형식 (2026-10-01) ──
   Eggshell + 그레인 바탕(body 기본), 큰 세리프 "Price", 그레인 없는 Eggshell 카드 + 옅은 그림자, 열리면 Pine.
   치수는 홈 FAQ 카드(details.q)와 같음 */
body.svc-page .page > section.block:first-child,
body.spa-page .page > section.block:first-child { margin-top: 24px; } /* 상단바 아래 → Price 대문자 윗선 48px (64 → 48, 2026-10-01) */
body.svc-page .faq-title, body.spa-page .faq-title {
  font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 0.95; letter-spacing: -0.005em; color: var(--fg);
}
body.svc-page .price-groups { margin-top: 25px; border-top: 0; display: flex; flex-direction: column; gap: 7px; }
body.svc-page .svc-col { display: flex; flex-direction: column; gap: 7px; }
body.svc-page details.svc {
  border-bottom: 0; background: var(--eggshell);
  box-shadow: 0 1px 2px rgba(59, 75, 59, 0.06), 0 6px 18px rgba(59, 75, 59, 0.07);
  transition: background 0.25s ease;
}
body.svc-page details.svc summary,
html[lang="ko"] body.svc-page details.svc summary {
  display: flex; align-items: center; gap: 14px;
  min-height: 67px; padding: 17px 17.5px 17px 14px;
  font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; color: var(--pine);
}
body.svc-page details.svc summary > span:first-child { flex: 1; }
body.svc-page details.svc summary .right { gap: 14px; }
body.svc-page details.svc summary .count { color: rgba(59, 75, 59, 0.52); font-weight: 400; }
body.svc-page details.svc summary .plus {
  flex: none; position: relative; width: 33px; height: 33px;
  border: 1px solid rgba(59, 75, 59, 0.28); background: transparent; color: var(--pine);
}
body.svc-page details.svc summary .plus::before, body.svc-page details.svc summary .plus::after {
  left: 50%; top: 50%; width: 11px; height: 1.5px; transform: translate(-50%, -50%);
}
body.svc-page details.svc summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
/* 열림: Pine 카드 — 표 글자·선은 어두운 바탕용 값으로 */
body.svc-page details.svc[open] {
  background: var(--pine);
  --fg: var(--eggshell); --fg-2: rgba(250, 244, 231, 0.64); --fg-3: rgba(250, 244, 231, 0.42);
  --line: rgba(250, 244, 231, 0.16); --hair: rgba(250, 244, 231, 0.08);
}
body.svc-page details.svc[open] summary,
html[lang="ko"] body.svc-page details.svc[open] summary { color: var(--eggshell); }
body.svc-page details.svc[open] summary .count { color: rgba(250, 244, 231, 0.6); }
body.svc-page details.svc[open] summary .plus { background: var(--eggshell); border-color: var(--eggshell); color: var(--pine); }
body.svc-page details.svc[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0); } /* + → − */
body.svc-page table.prices { width: calc(100% - 31.5px); margin: 0 17.5px 13px 14px; }
body.svc-page table.prices td.n { padding-left: 0; }
/* 머리줄 아래 선만 남기고 행 구분선 없음 → 행 위아래 여백을 넓혀 구분 (모바일 9 → 11, PC 11 → 13, 2026-10-02) */
body.svc-page table.prices td { border-bottom: 0; padding-top: 11px; padding-bottom: 11px; }
@media (min-width: 900px) { body.svc-page table.prices td { padding-top: 13px; padding-bottom: 13px; } }
body.svc-page table.prices th:first-child { padding-left: 0; }
body.svc-page table.prices th:last-child, body.svc-page table.prices td:last-child { padding-right: 0; }
body.svc-page .notes { margin-top: 28px; }
@media (min-width: 900px) {
  body.svc-page .page, body.spa-page .page {
    max-width: none;
    padding-left: calc(var(--bar-side) + 4px); padding-right: calc(var(--bar-side) + 4px);
    padding-bottom: calc(var(--bar-side) + 4px - var(--foot-desc));
  }
  body.svc-page .page > section.block:first-child,
  body.spa-page .page > section.block:first-child { margin-top: 37px; } /* 상단바 아래 → Price 대문자 윗선 1440에서 72px (99 → 72) */
  body.svc-page .faq-title, body.spa-page .faq-title { font-size: calc(var(--u) * 4.17); }
  body.svc-page .price-groups { margin-top: 47px; gap: 8px; }
  body.svc-page .svc-col { gap: 8px; }
  body.svc-page details.svc summary,
  html[lang="ko"] body.svc-page details.svc summary { min-height: 77px; padding: 20px 20px 20px 16px; gap: 16px; font-size: 18px; }
  body.svc-page details.svc summary .right { gap: 16px; }
  body.svc-page details.svc summary .plus { width: 38px; height: 38px; }
  body.svc-page details.svc summary .plus::before, body.svc-page details.svc summary .plus::after { width: 12px; }
  body.svc-page table.prices { width: calc(100% - 36px); margin: 0 20px 15px 16px; }
  body.svc-page .notes { margin-top: 36px; }
}
/* ── /head-spa (2026-10-01): /services와 같은 머리(큰 세리프 "Head Spa"), 선 전부 없음 ── */
/* 제목 아래 정보 행 = 매장 메뉴 정보 행과 같은 문법 (2026-10-01): 14.5px, 줄 23, 행 사이 4, 흐린 라벨 칸 + 값 */
body.spa-page .spa-info { margin-top: 20px; font-size: 14.5px; color: var(--fg); }
body.spa-page .spa-info .ir { display: flex; align-items: baseline; line-height: 23px; }
body.spa-page .spa-info .ir + .ir { margin-top: 4px; }
body.spa-page .spa-info .hk { min-width: 5.4em; padding-right: 0.6em; color: var(--fg-2); }
html[lang="ko"] body.spa-page .spa-info .hk { min-width: 4.6em; }
html[lang="en"] body.spa-page .spa-info .hk { min-width: 5em; }
body.spa-page .spa-top + .spa-grid { margin-top: 25px; }
/* 머리 오른쪽 예약 버튼 쌍: PC만, 아래 버튼과 같은 고정 크기, 아랫선 = 지점 줄 기준선 (2026-10-01) */
body.spa-page .spa-top-cta { display: none; }
@media (min-width: 900px) {
  body.spa-page .spa-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
  body.spa-page .spa-top-cta { display: flex; margin-top: 0; margin-bottom: 7px; } /* 버튼 아랫선 = 지점 줄 기준선 (줄 상자 아래 여유 7px 실측) */
  body.spa-page .spa-top-cta .hbtn { font-size: 14.5px; height: 46.4px; padding: 0 27px; }
} /* 잉크: 마지막 행 기준선 → 사진 32 = 제목 → 첫 행 (PC·모바일 같음, 2026-10-01) */
/* 제목 옆 매장명 = 직원 소개·메뉴 라벨과 같은 문법: 세리프 제목 + 기준선 맞춘 작은 대문자 (2026-10-01) */
body.spa-page .t-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
body.spa-page .t-who { font-family: var(--sans); font-size: 10.5px; line-height: 1; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 900px) {
  body.spa-page .t-head { gap: 0 14px; }
  body.spa-page .t-who { font-size: 11px; }
}
body.spa-page .spa-photo { margin-top: 0; aspect-ratio: auto; } /* 크롭 없음: 사진 원본 비율 그대로 (2026-10-01) */
body.spa-page .spa-photo img { height: auto; }
body.spa-page .steps { border-top: 0; }
body.spa-page .step { border-bottom: 0; gap: 12px; }
/* 번호 → 4px 사각 (가격표 안내 구분자와 같음, 어두운 바탕이라 Eggshell). 사각 중심 = 제목 첫 줄 대문자 잉크 중심 */
body.spa-page .step .num { width: 4px; height: 4px; padding: 0; background: var(--fg); margin-top: 8.5px; } /* 제목(산세리프 18px, 줄 1.3) 잉크 중심 */
/* 단계 제목: 영어·독일어도 세리프 대신 산세리프 — 한국어와 같은 18px (2026-10-01) */
body.spa-page .step h3,
html[lang="ko"] body.spa-page .step h3 { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
body.spa-page .fact { border: 0; padding-left: 0; padding-right: 0; }
/* 예약 영역 (2026-10-01 외부 리뷰 반영): 지점 안내 → 같은 폭 두 칸(소요 시간·가격) → 넓은 예약 버튼, 한 묶음으로 가운데.
   설명 ↔ 예약 영역은 떼고(모바일 44 / PC 60), 영역 안은 붙임(지점 → 라벨 22, 숫자 → 버튼 26) */
body.spa-page .spa-book { --book-top: 16.1px; margin-top: var(--book-top); text-align: center; } /* 모바일: 설명 마지막 줄 기준선 → 버튼 44 */
body.spa-page .spa-where { font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-2); line-height: 1; }
/* 시간·가격 = 라벨 없이 한 줄 "90분 · 120–140 €" (라벨 칸 두 개가 떨어져 보이던 것 정리, 2026-10-01).
   한국어는 세리프가 없어 숫자만 세리프·글자는 프리텐다드로 섞이므로 산세리프로 통일 */
body.spa-page .spa-meta { font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; } /* 전 언어 Instrument Sans (2026-10-01) */
body.spa-page .spa-meta .sep { display: inline-block; width: 4px; height: 4px; margin: 0 0.6em; background: var(--fg-2); vertical-align: 0.3em; } /* 구분 = 사각 */
body.spa-page .spa-cta { display: block; margin-top: 0; }
body.spa-page .spa-book .hero-cta { margin-top: 0; } /* 홈 히어로 버튼 쌍 재사용 — 히어로용 위 여백은 빼고 */
/* 모바일 버튼 쌍(홈 히어로·헤드스파): 글자 = 헤드스파 설명 본문과 같은 14.5px, 상자는 레퍼런스 비율(글자 15 : 높이 48 : 좌우 28) 그대로 키움 (2026-10-01) */
@media (max-width: 899px) {
  .hbtn { font-size: 14.5px; height: 46.4px; padding: 0 27px; }
}
/* 헤드스파 버튼: 화면 크기와 무관하게 고정 — 글자 = 단계 설명 본문 14.5px (PC 히어로용 u 단위 쓰지 않음, 2026-10-01) */
body.spa-page .spa-book .hbtn { font-size: 14.5px; height: 46.4px; padding: 0 27px; }
/* 모바일: 버튼 쌍 = 설명 문단 시작점(18px 들여씀)부터 오른쪽도 같은 18px 남기고 꽉 채움, 두 버튼 같은 폭.
   설명 → 버튼은 44 → 56 (2026-10-01) */
@media (max-width: 899px) {
  body.spa-page .spa-book { --book-top: 28.4px; }
  body.spa-page .spa-book .hero-cta { margin-left: 18px; margin-right: 18px; } /* 문단 시작 = 단계 왼쪽 여백 2 + 사각 4 + 간격 12 */
  body.spa-page .spa-book .hbtn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}
body.spa-page .spa-cta .btn { display: flex; width: 100%; font-size: 14px; }
html[lang="ko"] body.spa-page .spa-cta .btn { letter-spacing: 0.02em; } /* 한글 자간 벌림 해제 */
body.spa-page .spa-cta .btn::after { content: "↗"; font-size: 13px; letter-spacing: 0; }
body.spa-page .spa-reel { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--fg-2); text-decoration: none; transition: color 0.2s ease; }
body.spa-page .spa-reel:hover { color: var(--fg); }
body.spa-page .spa-reel .ext { font-size: 11px; }
@media (min-width: 900px) {
  body.spa-page .spa-book { max-width: 520px; margin-left: auto; margin-right: auto; --book-top: 28.4px; } /* 설명 마지막 줄 기준선 → 버튼 60 */
  body.spa-page .spa-meta { font-size: 24px; }
  body.spa-page .spa-cta .btn { width: 270px; margin: 0 auto; }
}
@media (min-width: 900px) {
  body.spa-page .spa-info { margin-top: 18px; } /* 잉크: 제목 기준선 → 첫 행 32 */
  /* 사진 = 콘텐츠 전체 폭(좌우 크게), 설명은 그 아래 (2026-10-01) */
  body.spa-page .spa-grid { display: block; }
  body.spa-page .spa-photo { position: static; }  body.spa-page .spa-grid > div + div { margin-top: 56px; }
  body.spa-page .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px calc(var(--u) * 1.671); }
  body.spa-page .step { padding: 0 0 24px; }
}
@media (min-width: 1200px) {
  body.svc-page .price-groups { flex-direction: row; align-items: flex-start; gap: calc(var(--u) * 1.671); }
  body.svc-page .svc-col { flex: 1 1 0; min-width: 0; }
}