/* ==========================================================================
   CLUB THE SHARP · 터치 키오스크 공통 CSS
   - 크롬 최신 전용 / 프레임워크 없음
   - 모든 크기는 rem(= 화면 짧은 변 기준 비례) · %, fr · cq 단위
   - 애니메이션은 transform / opacity 만 사용
   ========================================================================== */

/* 1. 토큰 ------------------------------------------------------------------ */
:root {
  /* 비례 기준 단위: FHD 가로(1920×1080)에서 1rem = 16px
     가로형은 min(가로/120, 세로/67.5), 세로형은 min(세로/120, 가로/67.5) → 4K 에서 자동 2배 */
  --u: min(1vw, 1.7778vh);

  /* 색상 */
  --c-bg: #e6e8f2;
  --c-ink: #3f3c55;
  --c-ink-2: #6c6983;
  --c-ink-3: #9a98ad;
  --c-accent: #726c8e;          /* PPT 라벨/선택 버튼 톤 */
  --c-accent-strong: #5b5677;
  --c-on-accent: #ffffff;
  --c-surface: rgba(255, 255, 255, 0.94);
  --c-glass: rgba(255, 255, 255, 0.58);
  --c-glass-line: rgba(255, 255, 255, 0.9);
  --c-line: rgba(63, 60, 85, 0.14);
  --c-line-strong: rgba(63, 60, 85, 0.32);
  --c-disabled: #b3b2c2;
  --c-dim: rgba(28, 26, 44, 0.55);
  --z-sports: #2c6db4;
  --z-edu: #5a8b56;
  --z-culture: #e2783a;
  --z-public: #d6568b;

  /* 폰트 */
  --f-display: "Marcellus", "Pretendard Variable", Pretendard, serif;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.125rem;
  --fs-2xl: 3rem;
  --fs-hero: 6.5rem;

  /* 간격 */
  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1.125rem;
  --s-4: 1.5rem;
  --s-5: 2.25rem;
  --s-6: 3.5rem;
  --gutter: 2.5rem;
  --nav-inset: 2.5rem;          /* 처음으로/뒤로 고정 위치 (비율·화면과 무관하게 동일) */
  --top-h: 7.25rem;             /* 상단 브랜드 영역 */
  --nav-size: 5.25rem;          /* 처음으로/뒤로 원형 버튼 */
  --nav-w: calc(var(--nav-size) * 2 + var(--s-3) + var(--s-4));
  --nav-h: calc(var(--nav-size) + var(--s-2));

  /* 터치 */
  --tap: 3.75rem;               /* FHD 60px (최소) */
  --tap-lg: 4.5rem;             /* FHD 72px (주요 CTA) */

  /* 모서리 · 그림자 */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;
  --sh-1: 0 0.25rem 1rem rgba(56, 52, 90, 0.08);
  --sh-2: 0 1rem 3rem rgba(56, 52, 90, 0.14);

  /* 모션 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 120ms;
  --t-panel: 360ms;
  --t-scene: 620ms;
  --t-layer: 520ms;
  --stagger: 65ms;

  /* 배경/사진 크롭 기준점 (비율이 바뀌어도 이 지점은 유지) */
  --focus-x: 50%;
  --focus-y: 45%;
}
@media (orientation: portrait) {
  :root {
    --u: min(1vh, 1.7778vw);
    --gutter: 2.25rem;
    --fs-hero: 5.5rem;
  }
}

/* 2. 리셋 ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(var(--u) * 0.8333); -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--c-bg); }
body {
  font-family: var(--f-body);
  color: var(--c-ink);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
table { border-collapse: collapse; }
.display { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.18em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.4em; height: 1.4em; flex: none; }

/* 3. 앱 골격 : 모든 층을 하나의 그리드 셀에 겹쳐 쌓음 (절대좌표 사용 안 함) */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  overflow: clip; /* hidden 은 포커스 이동 시 화면이 밀릴 수 있어 clip 사용 */
}
.app > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }

/* 4. 배경 (늘어나는 영역) ----------------------------------------------------- */
.stage { z-index: 0; overflow: hidden; }
.stage__media {
  width: 100%; height: 100%;
  transition: transform 900ms var(--ease);
}
.stage__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
  animation: kenburns 24s ease-in-out infinite alternate;
}
.stage__veil {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(236,238,248,.5));
  backdrop-filter: blur(1.75rem) saturate(1.1);
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.stage > * { grid-area: 1 / 1; }
.stage { display: grid; }
.app:not([data-state="attract"]) .stage__media { transform: scale(1.08); }
.app:not([data-state="attract"]) .stage__veil { opacity: 1; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1.5%); } }

/* 5. 상단 · 고정 내비 (크기 유지 + 위치 고정) --------------------------------------- */
.topbar {
  z-index: 20;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--top-h);
  padding: 0 var(--gutter);
  pointer-events: none;
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}
.topbar > * { pointer-events: auto; }
.app[data-state="attract"] .topbar { opacity: 0; transform: translateY(-1rem); pointer-events: none; }
.app[data-state="attract"] .topbar > * { pointer-events: none; }
.brand {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: var(--tap);
  justify-content: center;
  text-align: left;
  transition: transform var(--t-press) var(--ease);
}
.brand:active { transform: scale(0.97); }
.brand__sub { font-size: var(--fs-xs); color: var(--c-ink-2); letter-spacing: 0.3em; }
.brand__main { font-size: var(--fs-lg); letter-spacing: 0.28em; }
.topbar__crumb { font-size: var(--fs-sm); color: var(--c-ink-2); letter-spacing: 0.08em; }

.fixed-nav {
  z-index: 30;
  position: absolute;
  left: var(--nav-inset);
  bottom: var(--nav-inset);
  width: max-content;
  display: flex;
  gap: var(--s-3);
  padding: 0;
  transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease);
}
.app[data-state="attract"] .fixed-nav { opacity: 0; transform: translateY(1.5rem); pointer-events: none; }

/* 6. 버튼 공통 (기본 / 눌림 / 선택됨 / 비활성) ----------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-1);
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease), opacity 200ms var(--ease);
}
.btn::before {                   /* 선택됨 채움: opacity 로만 전환 */
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.btn:active, .btn.is-pressed { transform: scale(0.96); }
.btn.is-selected { color: var(--c-on-accent); }
.btn.is-selected::before { opacity: 1; }
.btn:disabled, .btn.is-disabled { opacity: 0.38; pointer-events: none; box-shadow: none; }
.btn--primary { color: var(--c-on-accent); border-color: transparent; background: var(--c-accent); }
.btn--primary::before { background: var(--c-accent-strong); }
.btn--primary:active::before { opacity: 1; }
.btn--ghost { background: transparent; box-shadow: none; border-color: var(--c-line-strong); }
.btn--glass { background: var(--c-glass); border-color: var(--c-glass-line); box-shadow: none; }
.btn--lg { min-height: var(--tap-lg); padding: 0 var(--s-5); font-size: var(--fs-lg); font-weight: 600; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; border-radius: 50%; }
.btn--round {
  flex-direction: column;
  gap: 0.15rem;
  width: var(--nav-size);
  height: var(--nav-size);
  padding: 0;
  border-radius: 50%;
  background: var(--c-glass);
  border-color: var(--c-glass-line);
  backdrop-filter: blur(0.75rem);
  font-size: var(--fs-xs);
  color: var(--c-ink);
}
.btn--round .ico { width: 1.9rem; height: 1.9rem; }
.btn--on-dark { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

/* 세그먼트(탭형 버튼 묶음) */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--c-glass);
  border: 1px solid var(--c-glass-line);
  backdrop-filter: blur(0.75rem);
}
.seg__btn {
  position: relative; isolation: isolate;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease);
}
.seg__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--c-accent);
  opacity: 0; transform: scale(0.9);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.seg__btn:active { transform: scale(0.95); }
.seg__btn.is-selected { color: var(--c-on-accent); }
.seg__btn.is-selected::before { opacity: 1; transform: none; }
.seg--zones .seg__btn { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.14em; font-size: var(--fs-sm); }
.seg__btn--sports { color: var(--z-sports); }
.seg__btn--edu { color: var(--z-edu); }
.seg__btn--culture { color: var(--z-culture); }
.seg__btn--sports::before { background: var(--z-sports); }
.seg__btn--edu::before { background: var(--z-edu); }
.seg__btn--culture::before { background: var(--z-culture); }
.seg__btn:disabled { opacity: 0.3; pointer-events: none; }

/* 칩 (시설 바로가기) */
.chip {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex: none;
  min-height: var(--tap);
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-glass);
  border: 1px solid var(--c-glass-line);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease);
}
.chip::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; background: var(--c-accent);
  opacity: 0; transition: opacity 260ms var(--ease);
}
.chip:active { transform: scale(0.95); }
.chip.is-selected { color: var(--c-on-accent); }
.chip.is-selected::before { opacity: 1; }

/* 카드 · 사진 · 금액 · 뱃지 */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  min-width: 0; min-height: 0;
}
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #d9dbe6;
}
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x) var(--focus-y); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(30, 28, 48, 0.55);
  color: #fff;
  font-size: var(--fs-xs);
  backdrop-filter: blur(0.5rem);
}
.photo .badge, .preview .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3; }

.price {                          /* 금액 표시 공통: 억 단위 · 줄바꿈 금지 */
  display: inline-flex; align-items: baseline; gap: 0.12em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.price__unit { font-size: 0.72em; font-weight: 500; }
.price--lg { font-size: var(--fs-xl); }
.price--xl { font-size: min(var(--fs-2xl), 10.5cqi); color: var(--c-accent-strong); }
.price.is-counting .price__value { opacity: 0.85; }

.step { font-size: var(--fs-sm); color: var(--c-ink-3); letter-spacing: 0.12em; font-weight: 600; }
.hint { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.cg-note, .sample-note { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* 7. 장면(상태) 전환 ----------------------------------------------------------
   ● 고정: 배경(.stage), 상단 브랜드, 처음으로/뒤로
   ● 움직임: 나가는 장면 = opacity 1→0, scale 1→0.97
             들어오는 장면 = opacity 0→1, scale 1.03→1 (80ms 늦게 시작해 겹침 → 빈 화면 없음)
             장면 안 요소 = 제목 → 이미지 → 버튼 순서로 65ms 간격 등장            */
.scene {
  z-index: 10;
  display: grid;
  grid-template: 1fr / 1fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
  transition:
    opacity var(--t-scene) var(--ease),
    transform var(--t-scene) var(--ease),
    visibility 0s linear var(--t-scene);
}
.scene > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 80ms, 80ms, 0s;
}
.scene.is-leaving { transform: scale(0.97); }

.scene [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 360ms var(--ease), transform 700ms var(--ease);
}
.scene.is-active [data-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--d, 0) * var(--stagger));
  transition-duration: 560ms, 700ms;
}

/* 8. 대기 ------------------------------------------------------------------ */
.scene--attract { cursor: pointer; }
.attract {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4);
  padding: var(--gutter);
  text-align: center;
}
.attract__eyebrow { font-size: var(--fs-lg); color: var(--c-ink-2); letter-spacing: 0.4em; }
.attract__title { font-size: var(--fs-hero); line-height: 1.25; letter-spacing: 0.35em; margin-right: -0.35em; }
.attract__cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-6);
  min-height: var(--tap-lg);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-glass);
  border: 1px solid var(--c-glass-line);
  font-size: var(--fs-lg);
}
.attract__cta .ico { width: 2rem; height: 2rem; animation: tap 2.2s var(--ease) infinite; }
@keyframes tap { 0%, 60%, 100% { transform: none; } 30% { transform: scale(0.86) translateY(0.15rem); } }
.scene--attract.is-active .attract__cta { animation: breathe 2.8s ease-in-out 1.2s infinite; }
@keyframes breathe { 50% { opacity: 0.55; } }

/* 9. 메인 ------------------------------------------------------------------ */
.main {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-5);
  padding: var(--top-h) var(--gutter) calc(var(--nav-h) + var(--gutter) * 1.5);
  justify-items: center;
  align-content: center;
}
.main__title { font-size: var(--fs-xl); font-weight: 600; }
.main__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 34rem));
  gap: var(--s-5);
  align-self: stretch;
  max-height: 34rem;
}
.menu-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-glass);
  border: 1px solid var(--c-glass-line);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(1rem);
  transition: transform var(--t-press) var(--ease), opacity 360ms var(--ease);
}
.scene.is-active .menu-card[data-reveal] { transition-property: opacity, transform; }
.menu-card:has(.menu-card__hit:active) { transform: scale(0.98); }
.menu-card__hit { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.menu-card > :not(.menu-card__hit) { position: relative; z-index: 1; pointer-events: none; }
.menu-card > .menu-card__sub { pointer-events: auto; }
.menu-card__icon {
  display: grid; place-items: center;
  width: 5rem; height: 5rem; border-radius: 50%;
  background: #fff; color: var(--c-accent);
}
.menu-card__icon .ico { width: 2.5rem; height: 2.5rem; }
.menu-card__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
.menu-card__desc { font-size: var(--fs-md); color: var(--c-ink-2); }
.menu-card__sub { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.menu-card--accent { background: rgba(114, 108, 142, 0.88); color: #fff; border-color: rgba(255,255,255,.25); }
.menu-card--accent .menu-card__desc { color: rgba(255,255,255,.8); }
.menu-card--accent .menu-card__icon { background: rgba(255,255,255,.15); color: #fff; }
.menu-card__go {
  display: inline-flex; align-items: center; gap: var(--s-2);
  justify-self: start;
  min-height: var(--tap-lg); padding: 0 var(--s-5);
  border-radius: var(--r-pill); background: #fff; color: var(--c-accent-strong);
  font-size: var(--fs-lg); font-weight: 600;
}

/* 10. 단지·커뮤니티 소개 ------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--top-h) var(--gutter) var(--gutter);
  padding-top: calc(var(--top-h) - var(--s-4));
}
.intro__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }
.intro__blocks { display: grid; min-height: 0; }
.intro-block {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--s-3);
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease), visibility 0s linear 600ms;
}
.intro-block.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }

.intro-viewport { overflow: hidden; min-height: 0; touch-action: pan-y; }
.intro-track {
  display: flex;
  height: 100%;
  transform: translate3d(calc(var(--idx, 0) * -100% + var(--drag, 0px)), 0, 0);
  transition: transform var(--t-scene) var(--ease);
  will-change: transform;
}
.intro-track.is-dragging { transition: none; }
.intro-sec {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-1);
  transition: opacity 500ms var(--ease);
}
.intro-sec:not(.is-current) { opacity: 0.25; }
.intro-sec [data-reveal] { transform: translateX(3.5rem); }
.intro-sec.is-before [data-reveal] { transform: translateX(-3.5rem); }
.scene.is-active .intro-sec.is-current [data-reveal] { transform: none; }

/* 키맵 */
.intro-sec--keymap { grid-template-rows: auto minmax(0, 1fr) auto; }
.sec-title { display: flex; align-items: baseline; gap: var(--s-3); }
.sec-title h2 { font-size: 4rem; letter-spacing: 0.25em; line-height: 1.1; }
.sec-title__sub { font-size: var(--fs-md); color: var(--c-ink-2); letter-spacing: 0.3em; }
.site-wrap { container-type: size; display: grid; place-items: center; min-height: 0; }
.site-map {
  position: relative;
  width: min(100cqw, 100cqh * (var(--ratio)));
  aspect-ratio: var(--ratio);
}
.site-map img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.site-map__label {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.8rem;
  border-radius: 0.3rem;
  background: var(--c-ink); color: #fff;
  font-family: var(--f-display); letter-spacing: 0.15em; font-size: var(--fs-sm);
}
.zone-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); }
.zone-card {
  --zc: var(--c-ink);
  display: grid; grid-template-rows: auto 1fr; gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  background: rgba(150, 148, 185, 0.18);
  text-align: center;
}
.zone-card--sports { --zc: var(--z-sports); }
.zone-card--edu { --zc: var(--z-edu); }
.zone-card--culture { --zc: var(--z-culture); }
.zone-card--public { --zc: var(--z-public); }
.zone-card__head {
  min-height: var(--tap);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--sh-1);
  color: var(--zc);
  font-family: var(--f-display); letter-spacing: 0.16em; font-size: var(--fs-md);
  transition: transform var(--t-press) var(--ease);
}
.zone-card__head:active { transform: scale(0.97); }
.zone-card--public .zone-card__head { background: transparent; box-shadow: none; pointer-events: none; }
.zone-card__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); }

/* 시설 섹션 */
.intro-sec--plan, .intro-sec--wide { grid-template-rows: auto minmax(0, 1fr) auto; }
.fac-head { display: flex; align-items: baseline; gap: var(--s-3); }
.fac-head__bl { font-size: var(--fs-2xl); letter-spacing: 0.22em; line-height: 1; }
.fac-head__loc { font-size: var(--fs-lg); color: var(--c-ink-2); padding-left: var(--s-3); border-left: 1px solid var(--c-line-strong); }
.fac-head__loc small { font-size: 0.7em; }
.fac-body {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(22rem, 1fr);
  gap: var(--s-4);
  min-height: 0;
}
.intro-sec--wide .fac-body { grid-template-columns: minmax(0, 2.4fr) minmax(20rem, 1fr); }
.fac-plan { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-2); padding: var(--s-4); overflow: hidden; }
.fac-plan .hint { justify-self: end; }
.fac-side {
  display: grid;
  grid-template-rows: minmax(0, 1.15fr) auto;
  gap: var(--s-4);
  padding: var(--s-4);
  transition: transform var(--t-panel) var(--ease);
}
.fac-side .photo { min-height: 0; }
.fac-side--text { grid-template-rows: 1fr; align-content: end; padding: var(--s-5); }
.fac-wide { padding: var(--s-4); display: grid; }
.photo--wide { min-height: 0; }
.fac-info { display: grid; gap: var(--s-2); align-content: start; }
.fac-info__name { font-size: var(--fs-xl); font-weight: 500; letter-spacing: 0.08em; }
.fac-info__name::after { content: ""; display: block; width: 2.5rem; height: 1px; margin-top: var(--s-3); background: var(--c-ink-2); }
.fac-info__desc { font-size: var(--fs-md); color: var(--c-ink-2); line-height: 1.7; }
.zone-tag { justify-self: start; font-family: var(--f-display); font-size: var(--fs-xs); letter-spacing: 0.2em; }
.zone-tag--sports { color: var(--z-sports); }
.zone-tag--edu { color: var(--z-edu); }
.zone-tag--culture { color: var(--z-culture); }
.cg-note { justify-self: end; }
.is-zoomed ~ .fac-side, .fac-body.is-zoomed .fac-side { transform: scale(1.02); }

/* 확대 스테이지 (평면도 공통: 시설 평면 / 세대 평면) */
.zoom-stage {
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
  border-radius: var(--r-md);
}
.zoom-stage__inner {
  --ar: 2400 / 1152;
  /* 원본 이미지에 박혀 있는 여백 제거용: 도면 실제 영역 비율 (0~1) */
  --ink-l: 0; --ink-t: 0; --ink-w: 1; --ink-h: 1;
  position: relative;
  overflow: hidden;
  width: min(100cqw, 100cqh * (var(--ar)));
  aspect-ratio: var(--ar);
  transform-origin: 50% 50%;
  transition: transform 680ms var(--ease);
  will-change: transform;
}
.unit-view .zoom-stage__inner { --ar: 1000 / 640; }
.fac-plan__img {
  position: absolute;
  max-width: none;
  width: calc(100% / var(--ink-w));
  height: calc(100% / var(--ink-h));
  left: calc(-100% * var(--ink-l) / var(--ink-w));
  top: calc(-100% * var(--ink-t) / var(--ink-h));
  object-fit: fill;
}

.hotspot {
  --hs: 1;
  position: absolute;
  left: var(--x); top: var(--y);
  display: grid; justify-items: center; align-content: center;
  min-width: var(--tap); min-height: var(--tap);
  transform: translate(-50%, -50%) scale(var(--hs));
  transition: transform 680ms var(--ease);
}
.is-zoomed .hotspot { --hs: calc(1 / var(--zs, 1)); }
.hotspot__dot {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; border: 0.3rem solid var(--c-accent);
  box-shadow: 0 0 0 0 rgba(114,108,142,.5);
  position: relative;
}
.hotspot__dot::after {
  content: ""; position: absolute; inset: -0.9rem; border-radius: 50%;
  border: 2px solid var(--c-accent);
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.hotspot__label {
  position: absolute; bottom: calc(100% - 0.6rem);
  padding: 0.35rem 0.9rem;
  border-radius: 0.35rem;
  background: var(--c-accent); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  box-shadow: var(--sh-1);
  transition: transform var(--t-press) var(--ease);
}
.hotspot:active .hotspot__label { transform: scale(0.94); }
.hotspot.is-selected .hotspot__label { background: var(--c-ink); }

/* 바로가기 + 진행 표시 : 좌측은 고정 내비 자리 */
.fac-nav {
  display: flex; gap: var(--s-2);
  padding-left: var(--nav-w);
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: none;
}
.fac-nav::-webkit-scrollbar { display: none; }
.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-4);
  padding-left: var(--nav-w);
  min-height: 1.5rem;
}
.progress__bar { height: 0.25rem; border-radius: 1rem; background: rgba(63,60,85,.12); overflow: hidden; }
.progress__fill {
  display: block; height: 100%; width: 100%;
  background: var(--c-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform var(--t-scene) var(--ease);
}
.progress__dots { display: flex; gap: 0.5rem; }
.progress__dots i {
  display: block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--c-ink); opacity: 0.2;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.progress__dots i.is-active { opacity: 1; transform: scale(1.35); }
.progress__num { font-family: var(--f-display); letter-spacing: 0.15em; font-size: var(--fs-sm); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

/* 11. 평형 선택 → 평면도 ------------------------------------------------------ */
.units {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding: var(--top-h) var(--gutter) var(--gutter);
  padding-top: calc(var(--top-h) - var(--s-3));
  transition: opacity var(--t-panel) var(--ease);
}
.units .sample-note { padding-left: var(--nav-w); align-self: end; min-height: var(--nav-size); display: flex; align-items: center; }
.scene-head { display: grid; gap: var(--s-1); }
.scene-head__title { font-size: var(--fs-xl); font-weight: 600; }
.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--s-4);
  min-height: 0;
}
.unit-card-wrap { display: grid; min-height: 0; }
.unit-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
  text-align: left;
  transition: transform var(--t-press) var(--ease), opacity 240ms var(--ease);
}
.unit-card:active { transform: scale(0.97); }
.unit-card.is-selected { opacity: 0; }       /* FLIP 동안 원본 카드 숨김 */
.unit-card__name { font-size: 3.25rem; letter-spacing: 0.08em; line-height: 1; }
.unit-card__tag { font-size: var(--fs-sm); color: var(--c-ink-2); }
.unit-card__plan { display: grid; min-height: 0; padding: var(--s-2) 0; }
.unit-card__plan .unit-plan { width: 100%; height: 100%; }
.spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-4); }
.spec dt { font-size: var(--fs-xs); color: var(--c-ink-3); }
.spec dd { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.unit-card__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-2); }
.unit-card__price .price { font-size: var(--fs-lg); color: var(--c-ink); }

/* SVG 평면 (샘플) */
.unit-plan { overflow: visible; }
.unit-plan__shell { fill: #f4f4f8; stroke: var(--c-ink); stroke-width: 6; }
.unit-plan .room rect { fill: #fff; stroke: #9c9ab0; stroke-width: 3; transition: opacity 300ms var(--ease); }
.unit-plan .room text { fill: var(--c-ink-2); font-size: 26px; text-anchor: middle; dominant-baseline: middle; font-family: var(--f-body); pointer-events: none; }
.unit-plan .room:active rect { opacity: 0.6; }
.unit-plan .room.is-selected rect { fill: #e2dff0; stroke: var(--c-accent); stroke-width: 5; }
.unit-card .unit-plan .room rect { stroke-width: 5; }

.unit-detail {
  z-index: 5;
  display: grid;
  padding: calc(var(--top-h) - var(--s-3)) var(--gutter) calc(var(--nav-h) + var(--gutter) + var(--s-2));
  visibility: hidden;
  pointer-events: none;
}
.unit-detail.is-expanded { visibility: visible; pointer-events: auto; }
.unit-detail__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-5);
  transform-origin: 0 0;
  will-change: transform;
}
.unit-detail__panel > * { opacity: 0; transition: opacity 300ms var(--ease); }
.unit-detail.is-expanded.is-settled .unit-detail__panel > * { opacity: 1; }
.unit-detail.is-expanded.is-settled .unit-detail__panel > :nth-child(2) { transition-delay: 60ms; }
.unit-detail.is-expanded.is-settled .unit-detail__panel > :nth-child(3) { transition-delay: 120ms; }
.unit-detail__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-2); }
.unit-detail__name { font-size: var(--fs-2xl); letter-spacing: 0.1em; }
.unit-detail__body { display: grid; min-height: 0; }
.unit-detail__body > * { grid-area: 1 / 1; min-height: 0; }
.unit-detail__plans { display: grid; min-height: 0; }
.unit-view { grid-area: 1 / 1; display: none; min-height: 0; }
.unit-view.is-active { display: grid; }
.unit-view .zoom-stage { background: #fafafc; }
.room-card {
  z-index: 2;
  justify-self: end;
  align-self: center;
  width: min(30rem, 42%);
  display: grid; gap: var(--s-3);
  padding: var(--s-3);
  opacity: 0;
  transform: translateX(3rem) scale(0.96);
  pointer-events: none;
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.room-card .photo { aspect-ratio: 4 / 3; }
.room-card__name { font-size: var(--fs-xl); font-weight: 600; padding: 0 var(--s-2); }
.room-card__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.room-card__actions .btn { flex: 1; padding: 0 var(--s-3); }
.unit-detail__body.is-zoomed .room-card { opacity: 1; transform: none; pointer-events: auto; transition-delay: 220ms; }
.unit-detail__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.unit-detail__price { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--c-ink-2); flex-wrap: wrap; }
.unit-detail__price .price { color: var(--c-ink); }

/* 12. 옵션 선택 + 견적 요약 ---------------------------------------------------
   ● 고정: 좌측(세로형은 상단) 실내 이미지 영역, 합계 금액 바
   ● 변경: 옵션 패널 내용만 가로 슬라이드+페이드, 이미지의 해당 레이어만 opacity 교차  */
.options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(30rem, 36%, 40rem);
  grid-template-rows: minmax(0, 1fr) var(--nav-h);
  gap: var(--s-4);
  padding: calc(var(--top-h) - var(--s-3)) var(--gutter) var(--gutter);
}
.preview { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; padding: 0; }
.preview__stack { display: grid; width: 100%; height: 100%; }
.layer {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus-x) 60%;
  opacity: 0;
  transition: opacity var(--t-layer) var(--ease);
}
.layer--base, .layer.is-on { opacity: 1; }

.opt-panel {
  grid-column: 2; grid-row: 1 / -1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.scene.is-active .opt-panel.is-hidden { opacity: 0; transform: scale(0.98); }
.opt-panel__head { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3); border-bottom: 1px solid var(--c-line); }
.opt-panel__title { font-size: var(--fs-xl); font-weight: 600; }
.tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; isolation: isolate;
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md); font-weight: 600; color: var(--c-ink-2);
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease);
}
.tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #efeef5; opacity: 0; transition: opacity 240ms var(--ease);
}
.tab::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0.4rem; height: 3px; border-radius: 3px;
  background: var(--c-accent); transform: scaleX(0); transition: transform var(--t-panel) var(--ease);
}
.tab:active { transform: scale(0.95); }
.tab.is-selected { color: var(--c-ink); }
.tab.is-selected::before { opacity: 1; }
.tab.is-selected::after { transform: scaleX(1); }
.tab__count {
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  display: grid; place-items: center;
  border-radius: 1rem; background: var(--c-accent); color: #fff;
  font-size: var(--fs-xs);
  transform: scale(0); transition: transform 260ms var(--ease);
}
.tab__count.is-on { transform: none; }

.opt-panel__body { display: grid; min-height: 0; }
.opt-groups { display: grid; min-height: 0; container-type: inline-size; }
.opt-group {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--from, 2rem));
  transition: opacity 300ms var(--ease), transform var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
}
.opt-group.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.opt-group.is-out-left { --from: -2rem; }
.opt-group__hint { font-size: var(--fs-sm); color: var(--c-ink-3); }

/* 옵션 카드 (기본 / 눌림 / 선택 / 잠김 / 비활성) */
.opt {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: var(--tap-lg);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--c-line);
  text-align: left;
  transition: transform var(--t-press) var(--ease), opacity 240ms var(--ease);
}
.opt::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  border: 2px solid var(--c-accent); background: #f1eff8;
  opacity: 0; transition: opacity 240ms var(--ease);
}
.opt:active { transform: scale(0.98); }
.opt.is-selected::before { opacity: 1; }
.opt__check {
  position: relative;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--c-line-strong);
  color: #fff;
}
.opt[role="checkbox"] .opt__check { border-radius: 0.5rem; }
.opt__check::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--c-accent); transform: scale(0.4); opacity: 0; transition: transform 260ms var(--ease), opacity 200ms var(--ease); }
.opt__check .ico { position: relative; width: 1.2rem; height: 1.2rem; stroke-width: 2.4; opacity: 0; transform: scale(0.6); transition: transform 260ms var(--ease), opacity 200ms var(--ease); }
.opt.is-selected .opt__check::before, .opt.is-selected .opt__check .ico { opacity: 1; transform: none; }
.opt__body { display: grid; gap: 0.2rem; min-width: 0; }
.opt__name { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.opt__desc { font-size: var(--fs-sm); color: var(--c-ink-3); }
.opt__price { justify-self: end; font-size: var(--fs-md); color: var(--c-ink); white-space: nowrap; }
.opt__reason { display: none; align-items: center; gap: 0.3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-strong); }
.opt__reason .ico { width: 1.1rem; height: 1.1rem; }
/* 선행 옵션 필요: 점선 테두리 + 자물쇠 + 사유 문구, 누르면 흔들리고 선행 옵션 강조 */
.opt.is-locked { background: repeating-linear-gradient(135deg, #fafafc 0 0.6rem, #f3f3f7 0.6rem 1.2rem); border-style: dashed; border-color: var(--c-line-strong); }
.opt.is-locked .opt__name, .opt.is-locked .opt__price { opacity: 0.45; }
.opt.is-locked .opt__check { opacity: 0.35; }
.opt.is-locked .opt__reason { display: inline-flex; }
.opt.is-locked:active { transform: none; }
.opt.is-shake { animation: shake 420ms var(--ease); }
.opt.is-hint::before { opacity: 1; animation: blink 900ms ease-in-out 2; }
@keyframes shake { 20% { transform: translateX(-0.5rem); } 40% { transform: translateX(0.45rem); } 60% { transform: translateX(-0.3rem); } 80% { transform: translateX(0.15rem); } }
@keyframes blink { 50% { opacity: 0.2; } }
/* 비활성(마감 등): 흐리게 + 금액 취소선, 터치 불가 */
.opt.is-disabled, .opt:disabled { opacity: 0.45; pointer-events: none; }
.opt.is-disabled .opt__price { text-decoration: line-through; }
.opt.is-disabled .opt__reason { display: inline-flex; color: var(--c-ink-2); }
@container (max-width: 28rem) {
  .opt { grid-template-columns: auto minmax(0, 1fr); }
  .opt__price { grid-column: 2; justify-self: start; }
}

/* 합계 : 항상 노출 */
.total {
  container-type: inline-size;
  display: grid; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--c-line);
  background: #fbfbfd;
}
.total__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-3); font-size: var(--fs-md); color: var(--c-ink-2); }
.total__row .price { color: var(--c-ink); }
.total__row--grand { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.total__row--grand .price { color: var(--c-accent-strong); }
.price.is-bump { animation: bump 500ms var(--ease); }
@keyframes bump { 30% { transform: translateY(-0.2rem); } }

/* 견적 요약 : 옵션 패널 위치에서 전체 폭으로 펼쳐짐 (FLIP: transform 만) */
.summary {
  grid-column: 1 / -1; grid-row: 1;
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding: var(--s-5);
  visibility: hidden;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.summary.is-expanded { visibility: visible; pointer-events: auto; }
.summary > * { opacity: 0; transform: translateY(1rem); transition: opacity 300ms var(--ease), transform 500ms var(--ease); }
.summary.is-settled > * { opacity: 1; transform: none; }
.summary.is-settled > :nth-child(2) { transition-delay: 70ms; }
.summary.is-settled > :nth-child(3) { transition-delay: 140ms; }
.summary__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.summary__title { font-size: var(--fs-2xl); font-weight: 600; }
.summary__unit { font-size: var(--fs-lg); color: var(--c-ink-2); }
.summary__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem); gap: var(--s-5); min-height: 0; }
.summary__list { overflow-y: auto; min-height: 0; }
.bill { width: 100%; font-size: var(--fs-md); }
.bill th { position: sticky; top: 0; background: var(--c-surface); text-align: left; font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: 600; padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--c-line-strong); }
.bill td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.bill td:first-child { width: 8.5rem; color: var(--c-ink-2); white-space: nowrap; }
.bill th:last-child, .bill td:last-child { text-align: right; white-space: nowrap; }
.bill .is-empty td { color: var(--c-ink-3); text-align: center; }
.summary__side { container-type: inline-size; display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); min-height: 0; }
.summary__totals { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: #f4f3f9; }
.summary__totals .total__row--grand { padding-top: var(--s-2); border-top: 1px solid var(--c-line-strong); }
.qr { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3); min-height: 0; }
.qr__img { width: min(13rem, 45cqi); height: auto; flex: none; color: #2f2c44; border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.qr figcaption { font-size: var(--fs-md); color: var(--c-ink-2); }
.summary__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); }

/* 13. 오버레이 (360° / 관리자) ------------------------------------------------ */
.overlay {
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--c-dim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-panel) var(--ease), visibility 0s linear var(--t-panel);
}
.overlay.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.overlay > * { transform: scale(0.96) translateY(1rem); transition: transform var(--t-panel) var(--ease); }
.overlay.is-active > * { transform: none; }

.overlay--pano { background: #111; place-items: stretch; padding: 0; grid-template: 1fr / 1fr; }
.overlay--pano > * { grid-area: 1 / 1; }
.pano { overflow: hidden; touch-action: none; }
.pano__strip { display: flex; height: 100%; width: max-content; transform: translate3d(var(--px, 0px), 0, 0); }
.pano__strip img { height: 100%; width: auto; max-width: none; }
.pano__hint { align-self: end; justify-self: center; margin-bottom: var(--gutter); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: rgba(0,0,0,.45); color: #fff; font-size: var(--fs-md); }
.overlay__close { align-self: start; justify-self: end; margin: var(--gutter); }

.admin { width: min(46rem, 100%); display: grid; gap: var(--s-3); padding: var(--s-5); }
.admin__head { display: flex; justify-content: space-between; align-items: center; }
.admin__head h2 { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xl); }
.admin__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-md); font-weight: 600; }
.admin__meta { font-size: var(--fs-sm); color: var(--c-ink-2); font-weight: 400; }
.admin .seg { background: #efeef5; border: 0; }
.admin__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding-top: var(--s-3); }
.brand.is-holding { animation: hold 3s linear; }
@keyframes hold { to { opacity: 0.4; } }

/* 14. 세로형(9:16) : 좌우 배치 → 상하 배치 ------------------------------------ */
@media (orientation: portrait) {
  .main__cards { grid-template-columns: minmax(0, 40rem); grid-auto-rows: auto; max-height: none; }
  .menu-card { padding: var(--s-5); }

  .intro__bar { flex-direction: column; align-items: stretch; }
  .intro__bar .seg { justify-content: center; }
  .intro__bar .seg__btn { flex: 1; }
  .fac-body, .intro-sec--wide .fac-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
  .intro-sec--wide .fac-body { grid-template-rows: minmax(0, 1fr) auto; }
  .fac-side { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .fac-side .photo { height: 100%; }
  .fac-side--text { grid-template-columns: 1fr; }
  .fac-head { flex-wrap: wrap; }
  .zone-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-sec--keymap { grid-template-rows: auto minmax(0, 1fr) auto; }
  .fac-nav { padding-left: 0; }
  .intro { padding-bottom: calc(var(--nav-h) + var(--gutter) + var(--s-2)); }
  .progress { padding-left: 0; }

  .unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-card__name { font-size: 2.75rem; }
  .room-card { justify-self: stretch; align-self: end; width: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; transform: translateY(3rem) scale(0.96); }
  .room-card .photo { grid-row: span 2; }
  .room-card__actions { flex-direction: column; }

  .options { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.35fr) var(--nav-h); }
  .preview { grid-column: 1; grid-row: 1; }
  .opt-panel { grid-column: 1; grid-row: 2; }
  .summary { grid-column: 1; grid-row: 1 / 3; }
  .summary__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
}

/* 초광폭(21:9) : 늘어난 폭은 사진/평면 영역이 흡수, 패널·버튼 크기는 유지 */
@media (min-aspect-ratio: 2/1) {
  .main__cards { grid-template-columns: repeat(2, minmax(0, 38rem)); }
  .unit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* 15. 보정 */
.fac-plan__img { mix-blend-mode: multiply; }
.fac-plan, .unit-detail__panel, .room-card { background: #fff; }
.fac-nav { padding-left: 0; margin-left: var(--nav-w); mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); padding-inline: 1.5rem; }
/* 스크롤 끝에서도 마지막 버튼이 페이드에 안 가리도록 페이드 폭만큼만 여유 (padding-inline 1.5rem) */
.site-map img { mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 75%, transparent 100%); }
@media (orientation: portrait) { .fac-nav { margin-left: 0; } }