@charset "UTF-8";
/* ==========================================================================
   WEBFONTS — 원본(maisonlesommet.com, Next.js /_next/static/media) 실파일
   경로는 assets/css/style.css 기준 상대경로(../font/). CDN link 없음 → 차단망에서도 정상.
   가족명은 원본 그대로 사용한다: "Montserrat" / "Scheherazade New" / "suit"(소문자)
   ※ 이 블록은 @charset "UTF-8"; 바로 다음(현재 3행 주석 위)에 붙인다.
      @charset 은 반드시 파일 최상단 첫 바이트여야 하므로 그 앞에 끼우지 말 것.
   ========================================================================== */

/* --- Montserrat : 가변폭(variable) 1파일이 300~700 전체를 담당 -------------
   원본은 300/400/500/600/700 을 5개 규칙으로 선언하지만 서브셋별로 같은 파일을
   가리킨다. 범위를 100 900 으로 넓히면 극단 굵기에서 원본과 렌더가 갈리므로
   300 700 을 그대로 둔다. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/font/montserrat-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/font/montserrat-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Scheherazade New : 히어로 h1 전용 세리프. 페이지 전체에서 여기 한 곳만 쓴다 --- */
@font-face {
  font-family: "Scheherazade New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/scheherazade-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Scheherazade New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/scheherazade-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Scheherazade New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/scheherazade-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Scheherazade New";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/scheherazade-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- suit : 한글 본문 서체. 단일 624KB 파일이 한글+라틴을 모두 덮으므로
       unicode-range 가 없다. font-weight 서술자도 원본과 똑같이 비워 둔다
       (원본에서도 500/700 한글은 브라우저 합성 볼드다 — 그 상태를 그대로 맞춘다). */
@font-face {
  font-family: "suit";
  font-display: swap;
  src: url("/assets/font/suit.woff2") format("woff2");
}

/* --- Next.js 가 만든 metric-adjusted 폴백 페이스 3종(원본 그대로) ----------
   swap 전/후 글자 크기가 같아 리플로우가 없다. 스택에서 빼면 안 된다.
   실측: Times New Roman @size-adjust 92.55% = 584.05px vs 실제 Scheherazade 577.89px (1.1% 차) */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 112.83%;
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Scheherazade New Fallback";
  src: local("Times New Roman");
  size-adjust: 92.55%;
  ascent-override: 145.09%;
  descent-override: 75.29%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "suit Fallback";
  src: local("Arial");
  size-adjust: 95.44%;
  ascent-override: 103.52%;
  descent-override: 27.24%;
  line-gap-override: 0.00%;
}
/* ==========================================================================
   MAISON LE SOMMET — 재구성 스타일시트
   원본: https://maisonlesommet.com/ko  (Next.js + Tailwind)
   토큰: ivory #f9f7f3 / ink #404040 / ink2 #525252 / gold #c8a86b / bronze #8b7355
   리빌 규격(원본 준수): duration 1000ms, ease-out, translate 32px, delay 0/200/300/400
   ========================================================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* color */
  --ivory: #f9f7f3;
  --white: #ffffff;
  --ink: #404040;
  --ink-2: #525252;
  --ink-3: #262626;
  --ink-soft: #5f5f5f;
  --gold: #c8a86b;
  --bronze: #8b7355;
  --dark: #2c2c2c;
  --darker: #1f1e1d;
  --line: #40404020;
  --line-2: #52525220;

  /* type */
  /* type — 원본 실파일 바인딩. 기존 3줄(28~30행)을 이 3줄로 교체한다.
     · --font-display : 원본의 페이지 기본 서체 Montserrat (UI/버튼/스크롤큐/푸터)
     · --font-suit    : 한글 본문 서체. 가족명은 소문자 "suit" — 원본 표기를 그대로 따른다
                        (CSS 가족명 매칭은 대소문자 무시라 'SUIT' 로도 붙지만, 폴백 페이스
                         이름이 리터럴 "suit Fallback" 이므로 혼동을 피하려 소문자로 통일)
     · --font-serif   : 히어로 h1 전용 세리프. 원본 전체에서 이 한 곳에만 쓰인다
     각 스택의 2번째 항목은 위 @font-face 의 metric-adjusted 폴백이고, 그 뒤 항목은
     woff2 로딩이 실패한 최악의 경우를 위한 시스템 서체다(원본에는 없는 안전망). */
  --font-display: "Montserrat", "Montserrat Fallback", 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  --font-suit: "suit", "suit Fallback", 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
  --font-serif: "Scheherazade New", "Scheherazade New Fallback", Georgia, 'Times New Roman', serif;

  /* motion */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --reveal-dur: 1000ms;

  /* layout */
  --w7: 80rem;   /* max-w-7xl */
  --w6: 72rem;   /* max-w-6xl */
  --w5: 64rem;   /* max-w-5xl */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-suit);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;   /* 원본 전역 자간은 normal — 역할별로만 지정한다 */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

ul, li, dl, dt, dd, p, h1, h2, h3, h4, h5, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #00000008; }
::-webkit-scrollbar-thumb { background: #40404040; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #40404070; }

/* ==========================================================================
   접근성: 모션 최소화 요청 존중 — "움직임"만 끄고 크로스페이드는 살린다.
   prefers-reduced-motion 의 대상은 이동·확대·회전·자동재생 같은 움직임이며
   불투명도 전환(페이드)이 아니다. 전체 선택자로 duration 을 0 으로 만들면
   페이드까지 사라져 화면이 툭툭 튀어나오는 최악의 형태가 된다.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 계단 지연만 제거한다. 전체 선택자로 지우면 오버레이의
     'visibility 0s linear <dur>' 유지 지연까지 0 이 되어, 페이드아웃 첫 프레임에
     visibility:hidden 이 걸리고 opacity 램프가 보이지 않는 채로 재생된다. */
  .js [data-reveal],
  .js #hero [data-hero],
  .js .app-col li,
  #success-modal .sm-backdrop,
  #success-modal .sm-card,
  #success-modal .sm-title,
  #success-modal .sm-text,
  #success-modal .sm-actions,
  #success-modal .sm-steps li,
  #success-modal .sm-check circle,
  #success-modal .sm-check path {
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }

  /* 진입 연출은 이동 없는 짧은 크로스페이드로 대체.
     transition 을 통째로 덮으면 그 요소의 hover 전환(테두리·여백·그림자)까지
     사라진다(계측: 심사위원 hover 가 한 스텝에 점프). 속성 목록은 각 요소 것을
     그대로 두고 '길이'만 줄이고, 이동은 transform:none 으로 막는다. */
  .js [data-reveal],
  .js #hero [data-hero],
  .js .app-col li {
    transform: none !important;
    transition-duration: 420ms !important;
    transition-timing-function: cubic-bezier(0, 0, .2, 1) !important;
  }
  .js #page-veil { transition-duration: 420ms !important; }

  /* 반복·이동성 장식만 개별적으로 끈다 (제출 스피너 같은 기능성 애니메이션은 유지) */
  #hero .hero-bg img { animation: none !important; }
  #hero .scroll-cue .cue-dot { animation: none !important; }
  .aw-badge .dot { animation: none !important; }
  #philosophy .ph-figure .frame img { transform: none !important; }

  /* 필터 교체는 리빌(420ms)보다 짧아야 JS 타이머(340ms)에 잘리지 않는다 */
  .js .gal-item[data-reveal].filtering {
    transition: opacity 300ms cubic-bezier(0, 0, .2, 1) !important;
  }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99999;
  background: var(--ink); color: #fff; padding: 12px 22px; font-size: 14px;
}
.skip-link:focus { left: 0; }

.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;
}

/* ==========================================================================
   01. 공통 타이포 / 섹션 골격
   ========================================================================== */
.section {
  width: 100%;
  padding: 96px 24px;
  position: relative;
}
@media (min-width: 768px) {
  .section { padding: 192px 48px; }
}
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }

.wrap-7 { max-width: var(--w7); margin: 0 auto; }
.wrap-6 { max-width: var(--w6); margin: 0 auto; }
.wrap-5 { max-width: var(--w5); margin: 0 auto; }

.eyebrow {
  font-size: clamp(.875rem, 1vw, .9375rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
  font-weight: 400;
}
.headline {
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 24px;
}
.lede {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
}
.section-head { margin-bottom: 64px; }
.section-head--center { text-align: center; }
/* 원본은 섹션 서브텍스트에 폭 제한을 걸지 않는다(컨테이너 max-w-7xl 이 곧 측정선).
   42rem 로 묶으면 국문 서브텍스트가 2줄로 접힌다 — 캡을 두지 않아 한 줄로 앉힌다. */
.section-head--center .lede { margin: 0 auto; }
/* 원본에서 입지·방문예약 두 섹션만 좌측 정렬이고 헤드 여백이 80px(mb-20) 이다.
   나머지(갤러리·수상·장인정신)는 중앙 정렬 + 64px(mb-16) 을 유지한다. */
.section-head--left { margin-bottom: 80px; }
/* 원본 방문예약 리드는 다른 섹션보다 한 단계 크고 진하다 (17→18px · 175% · #262626) */
#experience .section-head--left .lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
  line-height: 1.75;
  color: var(--ink-3);
}

/* ==========================================================================
   02. 페이지 진입 베일 · 스크롤 진행바
   ========================================================================== */
#page-veil { display: none; }
.js #page-veil {
  display: block;
  position: fixed; inset: 0; z-index: 20000;
  background: var(--ivory);
  pointer-events: none; opacity: 1;
  transition: opacity .6s var(--ease-in-out);
}
body.loaded #page-veil { opacity: 0; }
body.leaving #page-veil { opacity: 1; pointer-events: auto; transition: opacity .45s var(--ease-in-out); }
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  z-index: 16000; pointer-events: none;
  transition: transform .1s linear, opacity .4s ease;
}

/* ==========================================================================
   03. 스크롤 리빌 엔진
   원본과 동일: opacity 0 + translate 32px → 1000ms ease-out
   ========================================================================== */
/* clip-path 는 none -> inset() 사이를 보간할 수 없어 한 프레임에 튄다.
   전환 목록에서 빼고 clip 변형에만 따로 붙인다. will-change 도 걸지 않는다
   (리빌 대상이 수십 개라 영구 합성 레이어가 쌓여 오히려 램프가 끊긴다). */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
}
.js [data-reveal="up"]    { transform: translateY(32px); }
.js [data-reveal="left"]  { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="zoom"]  { transform: scale(.96); }
.js [data-reveal="clip"]  {
  transform: none; clip-path: inset(0 0 100% 0);
  transition: opacity var(--reveal-dur) var(--ease-out), clip-path var(--reveal-dur) var(--ease-out);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   04. 언어 토글 (원본: 우상단 플로팅 필 + 스프링 노브)
   ========================================================================== */
#lang-toggle {
  position: fixed; top: 24px; right: 24px; z-index: 15000;
  width: 76px; height: 34px; border-radius: 999px;
  background: #ffffffee;
  box-shadow: 0 3px 10px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  transition: transform .3s var(--spring), box-shadow .3s ease, top .45s var(--ease-in-out);
  overflow: hidden;
}
#lang-toggle:hover { transform: scale(1.04); }
#lang-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#lang-toggle .pill-track {
  position: absolute; inset: 6px; border-radius: 999px;
  background: linear-gradient(135deg, #f8fafc 0%, #f3f4f6 100%);
}
#lang-toggle .pill-labels {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-around; z-index: 2;
}
#lang-toggle .pill-labels span {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .5px; font-weight: 600;
  color: #40404066; transition: color .3s ease;
}
#lang-toggle .pill-knob {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  transform: translateX(34px);
  width: 34px; height: 26px; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.1);
  transition: transform .45s var(--spring);
}
body[data-locale="en"] #lang-toggle .pill-knob { transform: translateX(0); }
#lang-toggle .pill-sheen {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none; z-index: 4;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 50%, transparent 100%);
  opacity: .8;
}
/* 언어 전환 시 본문 페이드 */
body.lang-swapping main, body.lang-swapping footer { opacity: .25; transition: opacity .18s ease; }
main, footer { transition: opacity .35s ease; }

/* ==========================================================================
   06. HERO
   ========================================================================== */
/* ==========================================================================
   06. HERO — 원본(maisonlesommet.com/ko) 계측값 1:1 (1440x900 / 390x844 검증)
   아래 "히어로 진입 스태거" 블록과 충돌하지 않도록, hover 확대와 스크롤큐 센터링은
   transform 이 아니라 scale / translate 개별 프로퍼티로 처리한다.
   ========================================================================== */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
  background: #000;      /* 원본은 검정 바탕 — 이미지 로드 실패 시 아이보리가 비치던 문제도 함께 해결 */
  padding: 0 24px;       /* px-6 만. 기존 상하 120px 은 제거(원본은 h-screen 정중앙 정렬) */
}
#hero .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#hero .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* 원본은 animate-ken-burns 클래스만 있고 keyframes 를 배포하지 않아 실제로는 정지 화면이다.
     이 켄번즈는 rebuild 의 의도적 연출로 유지한다. 원본과 완전 동일하게 맞추려면 이 한 줄만 지운다. */
  animation: ken-burns 24s var(--ease-in-out) infinite alternate;
}
@keyframes ken-burns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -1.2%, 0); }
}

/* 스크림 — 원본은 위→아래 30%/40%/50% 균일 워시 하나뿐이다.
   기존의 radial 비네트를 빼야 건물 좌우 하단이 원본처럼 밝게 살아난다. */
#hero .hero-scrim {
  position: absolute; inset: 0; z-index: 10;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.40) 50%,
    rgba(0,0,0,.50) 100%);
}

#hero .hero-inner {
  position: relative; z-index: 20;
  max-width: var(--w5);   /* 64rem = 1024px = 원본 max-w-5xl */
  margin: 0 auto;
  color: #fff;
}

/* ---------- h1 : 사용자가 말한 "글꼴이 반영되지 않았다"의 핵심 ----------
   원본은 세리프(Scheherazade New) 400, 자간 없음. 기존의 sans/200/.04em 을 모두 버린다.
   line-height 1.25 는 필수다 — Scheherazade 의 기본 줄상자가 2.04em 이라 지정을 빼면
   실서체가 로드되는 순간 타이틀 블록이 60% 가까이 세로로 부풀어 오른다.
   계측 결과 577.89x100 @1440 / 288.95x50 @390(원본 라이브와 동일, 390 에서도 한 줄 유지). */
#hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);   /* 80px @1440 · 40px @390 */
  font-weight: 400;
  letter-spacing: normal;                /* body 의 -0.01em 상속을 끊는다 */
  line-height: 1.25;
  color: #fff;
  text-shadow: none;                     /* 원본에는 그림자가 없다 */
  margin: 0 0 32px;                      /* space-y-8 = h1 아래 32px */
}

/* ---------- 부제 ---------- */
#hero .hero-sub {
  font-family: var(--font-suit);
  font-size: clamp(.875rem, 2.5vw, 1.5rem);  /* 24px @1440 · 14px @390 */
  font-weight: 400;                      /* 기존 300 → 400 */
  letter-spacing: normal;
  line-height: 1.625;                    /* 39px @1440 */
  color: rgba(255,255,255,.9);
  max-width: 42rem;                      /* 672px = max-w-2xl */
  margin: 0 auto;                        /* 위 여백은 h1 의 margin-bottom 32px 이 담당 */
  text-shadow: none;
}

/* 원본에는 구분선이 없다. 마크업에서 .hero-rule 을 지우는 것이 정석이고,
   남겨 둔 경우에도 화면에서 사라지도록 안전망을 둔다. */
#hero .hero-rule { display: none; }

/* ---------- CTA 줄 ----------
   원본은 모바일 세로쌓기 → 640px 이상에서 가로. 간격은 두 축 모두 24px.
   이 요소는 [data-hero] 스태거 대상이므로 transition 을 여기서 다시 정의하지 않는다. */
#hero .hero-cta {
  margin-top: 48px;                      /* 부제 아래 → 버튼 위 48px (원본 mb-12) */
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center;
  gap: 24px;
}
@media (min-width: 640px) {
  #hero .hero-cta { flex-direction: row; }
}

/* ==========================================================================
   HERO CTA 버튼 — 원본 계측값 1:1
   매핑: .btn-solid = 원본 1번(Discover More, 솔리드 화이트)
         .btn-ghost = 원본 2번(Schedule a Visit, white/10 + white/30 테두리 + blur 12px)
   ========================================================================== */
.btn-solid, .btn-ghost {
  /* 기존 슬라이드업 채움(::before)을 쓰지 않으므로 position/overflow 를 원복한다 */
  position: static; overflow: visible;
  padding: 16px 32px;            /* py-4 px-8 */
  border-radius: 0;              /* 원본은 정사각 모서리 — 기존 2px 제거 */
  font-family: var(--font-display);
  font-size: 14px;               /* text-sm — 기존 13px */
  font-weight: 500;
  letter-spacing: .025em;        /* tracking-wide = 14px에서 0.35px — 기존 .12em 폐기 */
  line-height: 1.4285714;        /* 20px */
  text-transform: none;          /* 원본은 대문자 변환 없음 */
  transition: all .3s var(--ease-in-out);   /* 원본: all .3s cubic-bezier(.4,0,.2,1) */
  cursor: pointer;               /* 원본 계측값은 default(Tailwind preflight) — 클릭 어포던스를 위해 의도적 유지 */
}
/* 이 블록을 교체가 아니라 '추가'로 붙였을 때도 옛 채움막이 되살아나지 않도록 못을 박는다 */
.btn-solid::before, .btn-ghost::before,
.btn-solid::after,  .btn-ghost::after { content: none; }

/* 내부 span 은 hover 시 자간만 벌어진다(원본에서 버튼 폭이 커지는 유일한 원인) */
.btn-solid > span, .btn-ghost > span {
  position: static; z-index: auto;
  letter-spacing: inherit;
  transition: all .3s var(--ease-in-out);
}

/* 1번 — 솔리드 화이트 (계측 169.69 x 52, 390px에서도 동일) */
.btn-solid { background: #fff; color: #000; border: 0; box-shadow: none; }
.btn-solid:hover {
  background: #f9fafb;                                   /* Tailwind v4 gray-50 */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),
              0 4px 6px -4px rgba(0,0,0,.1);             /* shadow-lg */
  scale: 1.05;                                           /* transform 대신 scale 프로퍼티 — 진입 스태거의 transform 과 충돌하지 않는다 */
}
.btn-solid:hover > span { letter-spacing: .05em; }       /* 0.35px → 0.70px */

/* 2번 — 프로스티드 글래스 (계측 184.06 x 54, 테두리 때문에 2px 더 높다) */
.btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);                           /* backdrop-blur-md */
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
  box-shadow: none;                                      /* 이쪽에는 그림자가 없다 */
  scale: 1.05;
}
.btn-ghost:hover > span { letter-spacing: .05em; }

/* 포커스 링 — 두 버튼 동일. 금색 아웃라인이 아니라 흰색 2px 인셋 링 */
.btn-solid:focus-visible, .btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}
.btn-solid:disabled, .btn-ghost:disabled { opacity: .5; }

/* ---------- 스크롤 큐 ----------
   버그 수정: 기존 transform: translateX(-50%) 는 스태거 규칙
   `body.hero-in #hero [data-hero] { transform: none }`(명시도가 더 높다)에 져서
   진입이 끝나는 순간 무효화되고 큐가 중앙에서 ~51px 오른쪽으로 밀려 있었다.
   원본과 동일하게 transform 이 아닌 translate 프로퍼티로 중앙 정렬하면
   스태거의 transform 과 서로 간섭하지 않고, 감소모션의 transform:none !important
   에도 걸리지 않는다(진입 시 -50% X 와 32px 상승이 자연스럽게 합성된다). */
#hero .scroll-cue {
  position: absolute; left: 50%; bottom: 40px;
  translate: -50% 0;
  transform: none;
  z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 12px;
  cursor: pointer; color: rgba(255,255,255,.7);
  transition: color .3s var(--ease-in-out);
}
#hero .scroll-cue:hover { color: #fff; }
#hero .scroll-cue .cue-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 400;
  letter-spacing: .1em;                  /* 1.1px — 기존 .22em(2.42px)은 너무 벌어져 있었다 */
  line-height: 1.5;
  text-transform: uppercase;
}
#hero .scroll-cue .cue-mouse {
  width: 24px; height: 40px;
  border: 2px solid rgba(255,255,255,.6);  /* currentColor(.7) 대신 원본 알파 .6 고정 */
  border-radius: 999px;
  display: flex; align-items: flex-start; justify-content: center;
  transition: border-color .3s var(--ease-in-out);
}
#hero .scroll-cue:hover .cue-mouse { border-color: #fff; }
#hero .scroll-cue .cue-dot {
  width: 6px; height: 6px; margin-top: 8px; border-radius: 50%;
  background: rgba(255,255,255,.8);
  /* 원본 점은 정지 상태(keyframes 미배포). 이 반복 애니메이션은 rebuild 의 의도적 연출로 유지하며,
     감소모션에서는 기존 reduce 블록의 animation:none !important 가 이미 끈다. */
  animation: scroll-dot 1.8s var(--ease-in-out) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(16px); opacity: 0; }
  61%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 히어로 진입 스태거 — 로드 후 body.loaded 기준 */
.js #hero [data-hero] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.hero-in #hero [data-hero] { opacity: 1; transform: none; }
body.hero-in #hero [data-hero="1"] { transition-delay: .10s; }
body.hero-in #hero [data-hero="2"] { transition-delay: .30s; }
body.hero-in #hero [data-hero="3"] { transition-delay: .50s; }
body.hero-in #hero [data-hero="4"] { transition-delay: .70s; }


/* ==========================================================================
   07. PHILOSOPHY
   ========================================================================== */
#philosophy .grid-12 {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: var(--w7); margin: 0 auto;
}
@media (min-width: 1024px) {
  #philosophy .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
  #philosophy .ph-text { grid-column: 1 / span 5; }
  #philosophy .ph-figure { grid-column: 7 / span 6; }
}
#philosophy .ph-body {
  font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
  line-height: 1.75;
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: 16px;
}
#philosophy .ph-figure .frame {
  position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
#philosophy .ph-figure .frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
  will-change: transform;
}
#philosophy .ph-figure .frame:hover img { transform: scale(1.03); }

/* ==========================================================================
   08. GALLERY — 필터 + 메이슨리 + 라이트박스
   ========================================================================== */
.gal-filters {
  display: flex; gap: 8px; width: max-content;
  margin: 0 auto 64px; padding: 0 8px;
}
.gal-filters-scroll { overflow-x: auto; margin-bottom: 64px; scrollbar-width: none; }
.gal-filters-scroll::-webkit-scrollbar { display: none; }
.gal-filters button {
  white-space: nowrap; padding: 9px 20px; border-radius: 2px;
  font-size: 14px; font-weight: 500; color: #404040b3;
  transition: background .3s ease, color .3s ease;
}
.gal-filters button:hover { color: var(--ink); background: #0000000d; }
.gal-filters button[aria-pressed="true"] { background: var(--ink); color: var(--ivory); }
.gal-filters button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.gal-grid { columns: 1; column-gap: 24px; }
@media (min-width: 768px) { .gal-grid { columns: 2; } }
@media (min-width: 1024px) { .gal-grid { columns: 3; } }

.gal-item {
  break-inside: avoid;
  width: 100%; margin-bottom: 24px;
  position: relative; overflow: hidden; border-radius: 2px;
  cursor: pointer;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), filter .45s ease;
}
.gal-item img { width: 100%; height: auto; transition: transform .5s var(--ease-out); }
.gal-item:hover img { transform: scale(1.05); }
/* 원본 갤러리 타일은 호버 시 이미지 스케일만 준다 — 캡션 오버레이 없음. */
.gal-item .gal-zoom {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: #ffffffdd; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7);
  transition: opacity .35s ease, transform .35s var(--spring);
}
.gal-item:hover .gal-zoom { opacity: 1; transform: scale(1); }
.gal-item.is-hidden { display: none; }
/* 타일은 두 가지 전환을 갖는다 — 진입 리빌(느리게)과 필터 교체(빠르게).
   명시도로 분리해 !important 없이 각자의 duration 을 쓴다. */
.js .gal-item[data-reveal] {
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .gal-item[data-reveal].filtering,
.gal-item.filtering {
  opacity: 0; transform: scale(.97);
  transition: opacity .34s var(--ease-in-out), transform .34s var(--ease-in-out);
}
.gal-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 라이트박스 */
#lightbox {
  position: fixed; inset: 0; z-index: 18000;
  background: #12110fee;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-in-out), visibility 0s linear .4s;
}
#lightbox.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-in-out), visibility 0s; }
#lightbox .lb-stage {
  position: relative; max-width: min(92vw, 1180px); max-height: 82vh;
  transform: scale(.96); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .4s ease;
}
#lightbox.open .lb-stage { transform: scale(1); opacity: 1; }
#lightbox .lb-stage img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
/* 이전/다음 전환 — src 를 즉시 바꾸면 툭 끊긴다. 교체 직전에 페이드아웃한다. */
#lightbox .lb-img, #lightbox .lb-meta { transition: opacity .28s var(--ease-in-out); }
#lightbox.swapping .lb-img, #lightbox.swapping .lb-meta { opacity: 0; }
#lightbox .lb-meta {
  margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  color: #ffffffd9; font-size: 14px;
}
#lightbox .lb-meta .lb-count { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: var(--gold); }
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next {
  position: absolute; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff1a; color: #fff;
  transition: background .3s ease, transform .3s var(--ease-out);
}
#lightbox .lb-close:hover, #lightbox .lb-prev:hover, #lightbox .lb-next:hover { background: #ffffff33; }
#lightbox .lb-close { top: 24px; right: 24px; position: fixed; }
#lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); position: fixed; }
#lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); position: fixed; }
#lightbox .lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
#lightbox .lb-next:hover { transform: translateY(-50%) translateX(3px); }
@media (min-width: 900px) {
  #lightbox .lb-prev { left: 40px; }
  #lightbox .lb-next { right: 40px; }
}

/* ==========================================================================
   09. AWARDS
   ========================================================================== */
.aw-selector { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.aw-selector button {
  min-width: 120px; padding: 12px 16px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--white);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .3s var(--ease-out);
}
@media (min-width: 768px) { .aw-selector button { min-width: 140px; padding: 16px 24px; } }
.aw-selector button:hover { transform: translateY(-2px); }
.aw-selector button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.aw-selector .aw-year { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.aw-selector .aw-org { font-size: 12px; line-height: 1.2; }

.aw-carousel {
  position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 16 / 10; background: #f7f7f6;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.aw-carousel .aw-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.03);
  transition: opacity 1.5s var(--ease-in-out), transform 1.5s var(--ease-out);
}
.aw-carousel .aw-slide.active { opacity: 1; transform: scale(1); }
/* 원본은 16:10 박스를 object-fit:cover 로 꽉 채운다. contain 이면 원본 비율이
   다른 이미지에서 좌우 레터박스가 생긴다 — 계측: 5장 중 4장에서 여백 발생. */
.aw-carousel .aw-slide img { width: 100%; height: 100%; object-fit: cover; }
.aw-badge {
  position: absolute; top: 24px; left: 24px; z-index: 10;
  background: #ffffffee; border-radius: 2px; padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: flex; align-items: center; gap: 12px;
}
.aw-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.aw-badge span { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink); font-family: var(--font-display); }

/* 캐러셀 컨트롤은 이미지 위에 얹히므로 원본과 동일한 화이트 계열로 간다
   (반투명 블랙 원 + 화이트 아이콘 / 화이트 도트). 어떤 사진이 와도 대비가 산다. */
.aw-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.3); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease, background .3s ease, transform .3s var(--ease-out);
}
.aw-carousel:hover .aw-nav, .aw-carousel:focus-within .aw-nav { opacity: 1; }
.aw-nav.prev { left: 16px; }
.aw-nav.next { right: 16px; }
.aw-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.aw-nav.prev:hover { transform: translateY(-50%) translateX(-3px); background: rgba(0,0,0,.5); }
.aw-nav.next:hover { transform: translateY(-50%) translateX(3px); background: rgba(0,0,0,.5); }
.aw-dots { position: absolute; bottom: 24px; right: 24px; z-index: 10; display: flex; gap: 8px; }
.aw-dots button {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.4);
  transition: background .3s ease, width .3s var(--ease-out);
}
.aw-dots button:hover { background: rgba(255,255,255,.6); }
.aw-dots button[aria-pressed="true"] { background: #fff; width: 32px; }

.aw-detail { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) {
  .aw-detail { grid-template-columns: 2fr 1fr; gap: 48px; }
  .aw-detail .aw-main { padding-right: 48px; }
}
.aw-detail h3 { font-size: 1.5rem; font-weight: 400; color: var(--ink); margin: 8px 0 10px; }
.aw-detail .aw-sub { font-size: 1rem; color: #404040b3; line-height: 1.6; }
.aw-detail blockquote {
  margin-top: 32px; padding: 8px 0 8px 24px;
  border-left: 2px solid #40404033;
}
.aw-detail blockquote p {
  font-family: var(--font-suit);
  font-style: italic;          /* 원본은 어워드 인용문만 이탤릭 */
  font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.6; color: var(--ink-3);
}
.aw-detail blockquote footer { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.aw-jury { display: flex; flex-direction: column; gap: 18px; }
/* 자체 transition 이 리빌 전환(.js [data-reveal])과 명시도 동률이라 뒤에 오는 이쪽이
   이긴다 — opacity/transform 을 목록에 직접 넣어야 페이드가 산다. */
.aw-jury .juror {
  padding-left: 14px; border-left: 1px solid transparent;
  transition: border-color .35s ease, padding-left .35s var(--ease-out),
              opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
}
.aw-jury .juror:hover { border-color: var(--gold); padding-left: 18px; }
.aw-jury .juror strong { display: block; font-weight: 500; font-size: 15px; color: var(--ink); }
.aw-jury .juror span { display: block; font-size: 13px; color: #40404099; line-height: 1.5; }
.aw-jury-note { margin-top: 24px; padding-top: 24px; border-top: 1px solid #4040401a; font-size: 13px; color: #40404099; }

/* ==========================================================================
   10. CRAFTSMANSHIP
   ========================================================================== */
/* 원본 craftsmanship 섹션은 flat #f9f7f3 이다. texture-light.png 는 원본에서
   푸터(stone-900 그라디언트 위 opacity .10)에만 쓰이므로 여기서는 걷어낸다. */
#craftsmanship { position: relative; overflow: hidden; }

/* 원본: grid-cols-1 / md:grid-cols-2 — 데스크탑에서도 2단을 유지한다(4단 아님).
   gap 은 48px → 1024px 이상에서 64px. */
.craft-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 768px) { .craft-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .craft-grid { gap: 64px; } }

.craft-card .craft-figure {
  position: relative; overflow: hidden; border-radius: 2px; margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  height: 20rem;   /* 원본 h-80 고정 높이 — 2단에서 카드가 넓어져도 비율이 늘어지지 않는다 */
}
.craft-card .craft-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out), filter .6s ease;
}
.craft-card:hover .craft-figure img { transform: scale(1.06); }
.craft-card .craft-figure .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,26,24,.55), transparent 60%);
  opacity: 0; transition: opacity .5s ease;
}
.craft-card:hover .craft-figure .veil { opacity: 1; }
.craft-card h3 { font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.craft-card .craft-brand {
  font-size: 14px; color: var(--bronze); margin-top: 4px;
  font-family: var(--font-display); letter-spacing: .01em;
}
.craft-card .craft-desc { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.craft-card .craft-spec {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: #40404099; line-height: 1.6;
}

.appliances { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--line); }
.appliances .app-head { text-align: center; margin-bottom: 48px; }
.appliances .app-head h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 400; color: var(--ink); }
.appliances .app-head p { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
/* 원본: md:grid-cols-3 · gap-8 · max-w-5xl 중앙정렬, 각 열은 카드(박스)로 앉는다. */
.app-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  max-width: var(--w5); margin: 0 auto;
}
@media (min-width: 768px) { .app-grid { grid-template-columns: repeat(3, 1fr); } }
.app-col {
  background: rgba(255,255,255,.6);
  border-radius: 2px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* 리빌 전환(.js [data-reveal]) 과 명시도 동률이라 뒤에 오는 이쪽이 이긴다 —
   box-shadow 만 적으면 페이드가 죽으므로 opacity/transform 을 함께 물린다
   (.aw-jury .juror 와 동일 사유). */
.app-col[data-reveal] {
  transition: box-shadow .5s ease,
              opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out);
}
.app-col:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.app-col .app-brand {
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--ink);
  margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.app-col ul { display: flex; flex-direction: column; gap: 12px; }
.app-col li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js .app-col li { opacity: 0; transform: translateX(-12px); }
.js .app-col.in li { opacity: 1; transform: none; }
.app-col.in li:nth-child(1) { transition-delay: .05s; }
.app-col.in li:nth-child(2) { transition-delay: .13s; }
.app-col.in li:nth-child(3) { transition-delay: .21s; }
.app-col li::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bronze); flex: none;
}

/* ==========================================================================
   11. LOCATION — 지도 + 6개 가치 카드 상호 연동
   ========================================================================== */
/* 원본은 지도 래퍼에 테두리·라운드가 없고, 500px 고정 높이 캔버스만 둔다.
   지도 자체는 Leaflet 1.9.4 + CARTO light_nolabels 타일 (assets/js/map.js). */
.loc-map-shell { position: relative; margin-bottom: 80px; }
#loc-map { width: 100%; height: 500px; background: #fafafa; }

/* Leaflet 마커 — 원본은 divIcon 안에 인라인 스타일로 박아두지만,
   여기서는 CSS 로 빼고 map.js 는 마크업만 만든다(색만 인라인으로 주입). */
#loc-map .mls-pin-wrap { position: relative; }
#loc-map .mls-pin-halo {
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  background: rgba(200,168,130,.15); border-radius: 50%;
  animation: mls-map-pulse 2s ease-in-out infinite;
}
#loc-map .main-pin {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #DBBF9A, #C8A882, #A08060);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transition: transform .2s ease, box-shadow .2s ease;
}
#loc-map .school-pin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease; cursor: pointer;
}
@keyframes mls-map-pulse {
  0%, 100% { transform: scale(1); opacity: .4; }
  50%      { transform: scale(1.6); opacity: 0; }
}
/* 움직임 억제 요청 시 맥동만 끈다 — 핀 자체는 그대로 보여야 한다 */
@media (prefers-reduced-motion: reduce) {
  #loc-map .mls-pin-halo { animation: none; opacity: .4; }
}
/* map.js 의 BASEMAP = 'osm-gray' 일 때만 붙는다 — OSM 표준 타일을 탈색해
   원본(CARTO light_nolabels)의 밝은 회색 톤에 가깝게 맞춘다. */
#loc-map .mls-tile-gray { filter: grayscale(1) brightness(1.06) contrast(.92); }

/* 원본 가치 카드: 상단 4px 컬러바 + pt-6 본문. 호버 연동(dim/hot)은 원본에 없다. */
.loc-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px)  { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .loc-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.loc-card { position: relative; }
.loc-card .swatch {
  display: block;                 /* span 은 인라인이라 폭·높이가 먹지 않는다 */
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; opacity: .7;
}
.loc-card .loc-body { padding-top: 24px; }
.loc-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.005em; color: #2c2c2c; }
.loc-card p { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.loc-card .loc-sub {
  margin-top: 4px; font-size: 14px; font-weight: 500;
  letter-spacing: .025em; color: var(--ink-2);
}
.loc-card .loc-tags {
  margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: #52525299; line-height: 1.6;
}

/* ==========================================================================
   12. EXPERIENCE — 폼 + 성공 모달
   ========================================================================== */
.exp-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .exp-grid { grid-template-columns: repeat(2, 1fr); gap: 64px; } }
.exp-figure { position: relative; overflow: hidden; border-radius: 2px; min-height: 340px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.exp-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.exp-figure:hover img { transform: scale(1.04); }
.exp-figure .exp-info {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 28px 24px 24px;
  background: linear-gradient(to top, rgba(20,19,17,.85), transparent);
  color: #fff;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 560px) { .exp-figure .exp-info { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.exp-figure .exp-info dt {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px;
}
.exp-figure .exp-info dd { font-size: 13px; line-height: 1.6; color: #ffffffe0; }
.exp-figure .exp-info a:hover { text-decoration: underline; }

.exp-form-head h3 { font-size: 1.75rem; font-weight: 500; color: #2d2d2d; }
.exp-form-head p { margin-top: 16px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }

form.exp-form { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.f-row { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .f-row { grid-template-columns: repeat(2, 1fr); } }
.field { position: relative; }
.field label {
  display: block; font-size: 13px; font-weight: 500; color: var(--ink);
  margin-bottom: 8px; letter-spacing: .01em;
}
.field label .req { color: #9b3a3a; margin-left: 3px; }
.field .ctl {
  position: relative;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 2px; border: 0; border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #40404033;
  font-size: 15px; color: var(--ink-3);
  transition: border-color .35s ease;
  appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select { cursor: pointer; padding-right: 28px; }
.field .sel-arrow {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: #40404080;
  transition: transform .3s var(--ease-out);
}
.field select:focus + .sel-arrow { transform: translateY(-50%) rotate(180deg); }
.field .ctl::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.field .ctl:focus-within::after { transform: scaleX(1); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field .err {
  display: block; margin-top: 7px; font-size: 12px; color: #9b3a3a;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.field.invalid .err { opacity: 1; transform: none; }
.field.invalid input, .field.invalid textarea { border-bottom-color: #9b3a3a; }
/* 개인정보 동의(관심고객 접수 필수) */
.field--agree label.agree {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  margin-bottom: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}
.field--agree input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 16px; margin: 2px 0 0;
  padding: 0; border: 1px solid #40404066; border-radius: 2px; background: transparent;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--ink); cursor: pointer;
}
.field--agree.invalid label.agree { color: #9b3a3a; }
/* 서버 접수 실패 안내 */
.exp-server-err { margin-top: 14px; font-size: 13px; color: #9b3a3a; }
.exp-server-err[hidden] { display: none; }

.btn-submit {
  position: relative; overflow: hidden;
  margin-top: 8px; align-self: flex-start;
  padding: 16px 40px; border-radius: 2px;
  background: var(--ink); color: var(--ivory);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 500;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.btn-submit::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--bronze); transform: translateY(101%);
  transition: transform .45s var(--ease-in-out);
}
.btn-submit span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.btn-submit:hover::before { transform: translateY(0); }
.btn-submit:hover { box-shadow: 0 8px 24px rgba(64,64,64,.22); }
/* 리빌 규칙이 transition 목록을 대체해 hover 그림자가 튀었다 — 둘을 한 목록에 합친다 */
.js .btn-submit[data-reveal] {
  transition: opacity var(--reveal-dur) var(--ease-out),
              transform var(--reveal-dur) var(--ease-out),
              box-shadow .3s ease;
}
.btn-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-submit[disabled],
.js .btn-submit[data-reveal][disabled] {
  opacity: .75; cursor: progress;
  transition-duration: .2s;   /* 리빌 길이(1s)로 흐려지면 로딩이 끝날 때야 도달한다 */
}
.btn-submit .spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #ffffff55; border-top-color: #fff;
  animation: spin .8s linear infinite;
  display: none;
}
.btn-submit.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 성공 모달 — 원본 keyframe 규격 재현 */
/* display 토글은 보간이 안 돼 닫을 때 한 프레임에 사라진다.
   라이트박스와 같은 opacity/visibility 방식으로 바꿔 양방향 페이드를 만든다. */
#success-modal {
  position: fixed; inset: 0; z-index: 19000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .34s var(--ease-in-out), visibility 0s linear .34s;
}
#success-modal.open, #success-modal.closing {
  visibility: visible;
  transition: opacity .34s var(--ease-in-out), visibility 0s;
}
#success-modal.open { opacity: 1; pointer-events: auto; }
#success-modal.closing { opacity: 0; pointer-events: none; }
/* .open 의 진입 animation 이 해제되는 프레임에 transform 시작값이 바뀌어 버려
   transition 은 발화하지 못한다(계측: 보간 없이 즉시 적용). from 을 명시한
   keyframe 으로 바꿔 확실히 재생시킨다. */
#success-modal.closing .sm-card {
  animation: success-refined-exit .34s var(--ease-in-out) forwards;
}
@keyframes success-refined-exit {
  from { transform: translateY(-50%) scale(1); }
  to   { transform: translateY(-50%) scale(.985); }
}
/* .open 이 떨어지면 진입 애니메이션이 사라져 자식들이 기본값 opacity:0 으로 한 프레임에
   튄다. 닫히는 동안에는 자식을 그대로 세워 두고 컨테이너가 페이드를 맡는다. */
#success-modal.closing .sm-backdrop,
#success-modal.closing .sm-card,
#success-modal.closing .sm-title,
#success-modal.closing .sm-text,
#success-modal.closing .sm-actions,
#success-modal.closing .sm-steps li { opacity: 1; }
#success-modal.closing .sm-check circle { stroke-dashoffset: 0; }
#success-modal.closing .sm-check path { stroke-dashoffset: 0; opacity: 1; }
#success-modal .sm-backdrop {
  position: absolute; inset: 0; background: #1f1e1d99;
  opacity: 0;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#success-modal.open .sm-backdrop {
  animation: success-refined-backdrop .45s var(--ease-out) forwards;
}
@keyframes success-refined-backdrop {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}
#success-modal .sm-card {
  position: relative; z-index: 2;
  width: min(92vw, 440px); margin: 0 auto; top: 50%; transform: translateY(-50%);
  background: var(--white); border-radius: 3px; padding: 44px 36px 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  opacity: 0;
}
#success-modal.open .sm-card {
  animation: success-refined-entrance .55s var(--ease-out) forwards;
}
@keyframes success-refined-entrance {
  from { opacity: 0; transform: translateY(-50%) scale(.98) translateY(12px); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
#success-modal .sm-check { width: 64px; height: 64px; margin: 0 auto 24px; }
#success-modal .sm-check circle {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-dasharray: 200; stroke-dashoffset: 200;
}
#success-modal .sm-check path {
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
}
#success-modal.open .sm-check circle {
  animation: success-refined-checkmark-draw .9s var(--ease-out) .15s forwards;
}
#success-modal.open .sm-check path {
  animation: success-refined-checkmark-draw .7s var(--ease-out) .55s forwards;
}
@keyframes success-refined-checkmark-draw {
  0%   { stroke-dashoffset: 200px; opacity: 0; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
#success-modal .sm-title, #success-modal .sm-text, #success-modal .sm-actions { opacity: 0; }
#success-modal.open .sm-title,
#success-modal.open .sm-text,
#success-modal.open .sm-actions {
  animation: success-refined-fade-up .6s var(--ease-out) forwards;
}
#success-modal .sm-title { font-size: 1.375rem; font-weight: 500; color: var(--ink); }
#success-modal .sm-text { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
#success-modal .sm-actions { margin-top: 28px; }
/* animation 단축속성은 delay 를 0 으로 되돌린다. 위의 .open 스코프 규칙이 명시도로
   이기므로 지연도 같은 스코프에서 줘야 한다(계측: 선언 .8/.95/1.1s 가 0s 로 계산). */
#success-modal.open .sm-title   { animation-delay: .80s; }
#success-modal.open .sm-text    { animation-delay: .95s; }
#success-modal.open .sm-actions { animation-delay: 1.10s; }
@keyframes success-refined-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#success-modal .sm-steps { margin: 24px 0 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
#success-modal .sm-steps li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--ink-2);
  opacity: 0;
}
#success-modal.open .sm-steps li {
  animation: success-refined-slide-in .55s var(--ease-out) forwards;
}
#success-modal.open .sm-steps li:nth-child(1) { animation-delay: 1.00s; }
#success-modal.open .sm-steps li:nth-child(2) { animation-delay: 1.12s; }
#success-modal .sm-steps li::before { content: ''; width: 4px; height: 4px; margin-top: 8px; border-radius: 50%; background: var(--gold); flex: none; }
@keyframes success-refined-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
#success-modal .sm-close {
  padding: 12px 30px; border: 1px solid var(--ink); border-radius: 2px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display);
  transition: background .35s ease, color .35s ease;
}
#success-modal .sm-close:hover { background: var(--ink); color: #fff; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
/* 원본 계측(1440px): 배경 stone-900→stone-950 그라디언트, 텍스처 opacity .10,
   패딩 128/32, 컨테이너 1280, 4컬럼 gap 64(브랜드가 2칸), 블록 간격 96(space-y-24).
   ※ 원본의 text-gold / text-warm-gray-* 클래스는 CSS 번들에 규칙이 없어 실제로는
     전부 footer 의 text-white 를 상속한다 — 계측값도 전부 rgb(255,255,255) 였다.
     "본사이트와 똑같이" 요청에 맞춰 그 상태를 그대로 재현한다. */
#site-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, #1c1917 0%, #0c0a09 100%);
  color: #fff;
}
#site-footer .ft-texture {
  position: absolute; inset: 0; z-index: 0; opacity: .1;
  background-image: url('/assets/img/texture-light.png'); background-size: 380px;
  pointer-events: none;
}
#site-footer .ft-inner { position: relative; z-index: 1; padding: 128px 32px; }
#site-footer .ft-grid { display: grid; grid-template-columns: 1fr; gap: 64px; max-width: var(--w7); margin: 0 auto; }
@media (min-width: 1024px) {
  /* 원본은 4등분 트랙에 브랜드가 2칸을 차지한다. 2fr 1fr 1fr 로는 갭 계산이 달라
     트랙 폭이 어긋난다(계측: 576/288/288 vs 원본 608/272/272). */
  #site-footer .ft-grid { grid-template-columns: repeat(4, 1fr); }
  #site-footer .ft-grid > :first-child { grid-column: span 2; }
}
#site-footer h3 { font-size: 1.5rem; font-weight: 300; line-height: 2rem; letter-spacing: .025em; color: #fff; }
#site-footer .ft-desc { margin-top: 24px; max-width: 28rem; font-size: 16px; line-height: 1.625; color: #fff; }
#site-footer .ft-award { margin-top: 24px; font-size: 14px; line-height: 1.43; color: #fff; }
#site-footer h4 {
  font-size: 14px; font-weight: 400; line-height: 1.43;
  letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
#site-footer ul { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
#site-footer ul a { font-size: 14px; line-height: 1.43; color: #fff; transition: color .3s ease; }
#site-footer ul a:hover { color: #fff; }
#site-footer .ft-legal {
  max-width: var(--w7); margin: 96px auto 0; padding-top: 96px;
  border-top: 1px solid #d4d4d4;        /* 원본 divider = neutral-300 */
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-size: 14px; line-height: 1.43; color: #fff;
}
@media (min-width: 768px) { #site-footer .ft-legal { flex-direction: row; justify-content: space-between; } }
#site-footer .ft-legal nav { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
#site-footer .ft-legal a:hover { color: #fff; }

/* 맨 위로 */
#to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 14500;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s var(--ease-out), visibility 0s linear .4s, background .3s ease;
}
#to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s var(--ease-out), visibility 0s, background .3s ease; }
#to-top:hover { background: var(--bronze); }
#to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }