@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600&display=swap');

/* ==========================================================================
   스페이스뷰티 당진수청점 — 공통 스타일
   브랜드 컬러: 화이트 / 블랙 (광고주 확정)
   톤: 여백 중심 · 큰 이미지 · 최소 텍스트
   ========================================================================== */

:root {
  --ink: #0d0d0f;
  --ink-80: #33333a;
  --muted: #6f6f77;
  --muted-2: #9a9aa2;
  --paper: #ffffff;
  --mist: #f5f5f6;
  --mist-2: #ebebed;
  --line: #e3e3e6;
  --sand: #cfc1ac;
  --sand-soft: #f0e9df;

  --wrap: 1280px;
  --wrap-narrow: 900px;
  --gut: 40px;

  --h-header: 76px;
  --h-topbar: 38px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .7s;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.015em;
  /* 공백 없는 긴 문자열이 컨테이너를 넘치지 않도록 전역 래퍼에 적용 */
  overflow-wrap: anywhere;
  word-break: keep-all;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: var(--wrap-narrow); }

/* ── 공통 섹션 타이포 ───────────────────────────────────────────────── */
/* 🔴 구획 여백 — 2026-09-15 에 140/100 에서 줄였습니다.
      광고주 지적: 「넣을 내용 없으면 여백 주면서 페이지 길게 하지 말고 집약 시켜」.
      세 단(아래 미디어쿼리 두 곳)을 «함께» 고칩니다. 한 곳만 고치면 폭에 따라 리듬이 엇갈립니다. */
.section { padding: 96px 0; }
.section--tight { padding: 72px 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--paper); }

.eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.section--ink .eyebrow { color: rgba(255, 255, 255, .55); }

.section-title {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.3;
  margin-bottom: 24px;
}
.section-lead {
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--muted);
  line-height: 1.85;
  max-width: 62ch;
}
.section--ink .section-lead { color: rgba(255, 255, 255, .68); }

.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }

/* ── 버튼 ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 34px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #26262c; }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--outline-light { border: 1px solid rgba(255, 255, 255, .35); color: var(--paper); }
.btn--outline-light:hover { border-color: var(--paper); background: rgba(255, 255, 255, .08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* ── 상단 정보바 ───────────────────────────────────────────────────── */
.topbar {
  height: var(--h-topbar);
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-info { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-tel { color: #fff; font-weight: 600; letter-spacing: 0; white-space: nowrap; }

/* ── 헤더 ──────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 90;
  height: var(--h-header);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* 브랜드 로고 — 본사(더조각 주식회사) 공식 SVG.
   원형 엠블럼 + SPACE BEAUTY 워드마크가 한 세트로 들어 있습니다.
   밝은 배경은 logo.svg, 어두운 배경은 logo-white.svg 를 씁니다. */
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; min-width: 0; }
.brand-mark { display: block; width: auto; height: 26px; }
.header.is-scrolled .brand-mark { height: 23px; }
.brand-sub {
  font-size: 12px; color: var(--muted-2); letter-spacing: .02em; white-space: nowrap;
  padding-left: 11px; border-left: 1px solid var(--line);
}

.gnb > ul { display: flex; align-items: center; gap: 30px; }

/* 본사 홈페이지(spacebeauty.ai)와 같은 라벨 체계입니다 — 영문 대문자가 위, 한글이 아래.
   본사는 영문만 상단에 두고 한글은 마우스를 올렸을 때 아래로 펼치는데,
   지점은 하위 메뉴가 없어 펼칠 것이 없으므로 두 줄로 함께 보여 줍니다.
   🔴 영문은 Archivo 600 — 본사 실측값(2026-09-09, 1660px)입니다. */
.gnb-link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0;
  white-space: nowrap;
  color: var(--ink-80);
  transition: color .25s var(--ease);
}
.gnb-en {
  font-family: 'Archivo', 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  line-height: 1; color: var(--ink);
}
.gnb-ko {
  font-size: 12px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1; color: var(--muted-2);
  transition: color .25s var(--ease);
}
.gnb-link:hover .gnb-ko,
.gnb-link[aria-current="page"] .gnb-ko { color: var(--ink); }
.gnb-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.gnb-link:hover { color: var(--ink); }
.gnb-link:hover::after,
.gnb-link[aria-current="page"]::after { transform: scaleX(1); }
.gnb-link[aria-current="page"] { color: var(--ink); }

.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-cta .btn { min-height: 44px; padding: 0 22px; font-size: 14px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -8px;
}
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 12px; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 10px; }
.nav-open .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 5px; transform: rotate(-45deg); }

/* ── 히어로 ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100svh - var(--h-header) - var(--h-topbar));
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
/* 광고주 요청: 영상 중심 히어로.
   영상 원본 수급 전까지 실제 매장 사진을 느린 줌으로 연출합니다.
   영상 확보 시 .hero-slide 를 <video> 로 교체하면 됩니다. */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.hero-slide.is-active img { transform: scale(1); }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
              rgba(8, 8, 10, .42) 0%,
              rgba(8, 8, 10, .18) 38%,
              rgba(8, 8, 10, .74) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 96px; color: #fff; }
.hero-eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 26px;
}
.hero-title {
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.04em;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero-desc {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
  margin-bottom: 40px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-scroll {
  position: absolute; right: var(--gut); bottom: 96px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .22em; color: rgba(255, 255, 255, .6);
  writing-mode: vertical-rl;
}
.hero-scroll-line {
  width: 1px; height: 56px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0;
  background: #fff; transform: translateY(-100%);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ── 서브페이지 헤더 ───────────────────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 460px;
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .58; }
.page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,10,.32), rgba(8,8,10,.82));
}
.page-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 62px; color: #fff; }
.page-hero-eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 18px;
}
.page-hero-title { font-size: clamp(28px, 4vw, 52px); letter-spacing: -0.04em; margin-bottom: 16px; }
.page-hero-desc { font-size: clamp(15px, 1.2vw, 17px); color: rgba(255,255,255,.75); max-width: 54ch; line-height: 1.8; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted-2); padding: 22px 0; }
.breadcrumb-sep { color: var(--line); }
.breadcrumb a:hover { color: var(--ink); }

/* ── 본문 리스트 (서브페이지) ──────────────────────────────────────── */
.checklist { display: grid; gap: 14px; }
.checklist-item {
  position: relative; padding-left: 26px;
  font-size: 15.5px; color: var(--ink-80); line-height: 1.8;
}
.checklist-item::before {
  content: ''; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sand);
}

.step-list { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.step {
  display: grid; grid-template-columns: 96px 1fr; gap: 28px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
}
.step-num {
  counter-increment: step;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; color: var(--mist-2); line-height: 1;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-title { font-size: 19px; margin-bottom: 8px; }
.step-text { font-size: 15px; color: var(--muted); line-height: 1.85; }

.media-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.media-strip .figure { aspect-ratio: 4 / 5; }

.prose { font-size: 15.5px; line-height: 1.95; color: var(--ink-80); }
.prose h2,
.prose h3 { font-size: 18px; margin: 40px 0 12px; letter-spacing: -0.03em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 16px; }
.prose li::before { content: '·'; position: absolute; left: 4px; color: var(--muted-2); }

@media (max-width: 1024px) {
  .page-hero { min-height: 360px; }
  .media-strip { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .page-hero { min-height: 300px; }
  .page-hero-inner { padding-bottom: 42px; }
  .step { grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; }
  .step-num { font-size: 22px; }
  .media-strip { grid-template-columns: 1fr; gap: 14px; }
}

/* ── 핵심 가치 카드 ────────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.pillar { background: var(--paper); padding: 56px 36px; }
.pillar-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; letter-spacing: .2em; color: var(--sand); margin-bottom: 26px;
}
.pillar-title { font-size: 20px; margin-bottom: 14px; letter-spacing: -0.03em; }
.pillar-text { font-size: 14.5px; color: var(--muted); line-height: 1.8; }

/* ── 2단 (이미지 + 텍스트) ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { width: 100%; }
.split-body .section-lead { margin-bottom: 34px; }

.figure { position: relative; overflow: hidden; background: var(--mist); }
.figure img { width: 100%; transition: transform 1.2s var(--ease); }
.figure:hover img { transform: scale(1.03); }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--tall img,
.figure--wide img,
.figure--square img { height: 100%; object-fit: cover; }
.figure--wide { aspect-ratio: 3 / 2; }
.figure--square { aspect-ratio: 1 / 1; }

/* ── 브랜드 철학 (UNIVERSE / HUMAN) ────────────────────────────────── */
.philosophy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.philo-card { position: relative; overflow: hidden; background: var(--mist); }
.philo-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.philo-cap { padding: 26px 4px 0; }
.philo-cap-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px; letter-spacing: .2em; color: var(--muted-2); margin-bottom: 8px;
}
.philo-cap-ko { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; }

/* ── AI 스캔 스펙 ──────────────────────────────────────────────────── */
.spec-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec-item { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.spec-key {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; letter-spacing: .16em; color: var(--sand); padding-top: 4px;
}
.spec-title { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.03em; }
.spec-text { font-size: 14.5px; color: var(--muted); line-height: 1.8; }
.section--ink .spec-list,
.section--ink .spec-item { border-color: rgba(255, 255, 255, .14); }
.section--ink .spec-text { color: rgba(255, 255, 255, .62); }

/* ── 프로그램 ──────────────────────────────────────────────────────── */
.programs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.program {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.program:hover { border-color: var(--ink); transform: translateY(-4px); }
.program-media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.program-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.program:hover .program-media img { transform: scale(1.05); }
.program-body { padding: 34px 30px 36px; display: flex; flex-direction: column; flex: 1; }
.program-en {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px; letter-spacing: .2em; color: var(--muted-2); margin-bottom: 12px;
}
.program-title { font-size: 22px; margin-bottom: 14px; }
.program-text { font-size: 14.5px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }
.program-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.program-tag {
  font-size: 12.5px; color: var(--ink-80);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; background: var(--mist);
}

/* ── 비포·애프터 ───────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 48px; }
.tab {
  min-height: 44px; padding: 0 24px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 14.5px; font-weight: 500;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ba-panel[hidden] { display: none; }
.ba-item { background: var(--mist); }
.ba-item img { width: 100%; }
.ba-cap { padding: 18px 4px 0; font-size: 14px; color: var(--muted); }
.ba-cap-title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 4px; }

.notice {
  margin-top: 44px; padding: 22px 26px;
  background: var(--mist); border-left: 2px solid var(--sand);
  font-size: 13.5px; color: var(--muted); line-height: 1.8;
}
.notice strong { color: var(--ink-80); font-weight: 600; }

/* ── 후기 ──────────────────────────────────────────────────────────── */
.rating-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px; margin-bottom: 56px;
  padding: 26px 30px; background: var(--mist); border-radius: 4px;
}
.rating-score { display: flex; align-items: baseline; gap: 8px; }
.rating-num { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; }
.rating-of { font-size: 14px; color: var(--muted-2); }
.rating-meta { font-size: 14px; color: var(--muted); }
.rating-meta b { color: var(--ink); font-weight: 600; }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { border: 1px solid var(--line); overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.review-card img { width: 100%; }

/* 후기 본문 — 이미지 안의 글자는 검색·AI가 읽지 못하므로 텍스트로도 싣습니다 */
.review-quote { margin: 0; padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.review-quote-title { font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -0.03em; margin-bottom: 14px; }
.review-quote-body { font-size: 14.5px; color: var(--muted); line-height: 1.85; }
.review-quote-body + .review-quote-body { margin-top: 12px; }
.review-meta {
  margin-top: auto; padding-top: 16px;
  font-size: 13px; color: var(--muted-2);
}
.review-meta::before { content: ''; display: block; width: 26px; height: 1px; background: var(--line); margin-bottom: 14px; }

/* ── 갤러리 ────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-item { overflow: hidden; background: var(--mist); aspect-ratio: 1 / 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 28px 0; text-align: left;
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; letter-spacing: -0.03em;
}
.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; margin-top: 6px; }
.faq-icon::before,
.faq-icon::after {
  content: ''; position: absolute; background: var(--ink);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; height: 0; transition: height .4s var(--ease); }
.faq-a-inner { padding: 0 44px 30px 0; font-size: 15px; color: var(--muted); line-height: 1.9; }

/* ── 이용안내 / 오시는 길 ──────────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 84px; }
/* 이용 안내는 시맨틱 <table> 로 씁니다.
   div 그리드로 만든 표는 답변 엔진이 행-열 관계를 읽지 못해 발췌 대상에서 빠집니다. */
.info-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); text-align: left; }
.info-table th,
.info-table td { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.info-table th { width: 130px; padding-right: 20px; color: var(--muted); font-weight: 500; }
.info-table td { color: var(--ink); }
.info-td-note { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; }

.map-embed { width: 100%; aspect-ratio: 4 / 3; background: var(--mist-2); border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── 하단 CTA ──────────────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.cta-band-bg { position: absolute; inset: 0; opacity: .28; }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-inner { position: relative; z-index: 2; padding: 130px 0; text-align: center; }
.cta-title { font-size: clamp(26px, 3.2vw, 44px); margin-bottom: 20px; letter-spacing: -0.04em; }
.cta-text { font-size: clamp(15px, 1.2vw, 17px); color: rgba(255, 255, 255, .72); margin-bottom: 40px; }

/* ── 푸터 ──────────────────────────────────────────────────────────── */
.footer { background: #0a0a0c; color: rgba(255, 255, 255, .58); padding: 76px 0 44px; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-brand-mark { display: block; width: auto; height: 28px; margin-bottom: 18px; }
.footer-brand-text { line-height: 1.9; }
.footer-col-title { font-size: 13px; letter-spacing: .16em; color: rgba(255, 255, 255, .4); margin-bottom: 20px; text-transform: uppercase; font-family: 'Playfair Display', Georgia, serif; }
.footer-list > li { margin-bottom: 11px; }
.footer-list a { transition: color .25s var(--ease); }
.footer-list a:hover { color: #fff; }
.footer-bottom { padding-top: 34px; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, .4); }
.footer-legal { line-height: 1.9; }
.footer-disclaimer {
  margin-top: 22px; padding: 16px 20px;
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, .5);
}

/* ── 플로팅 퀵메뉴 (광고주 우선순위 순서) ──────────────────────────── */
.quick {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px;
}
.quick-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
  font-size: 10.5px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-80);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quick-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.quick-btn--naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.quick-btn--kakao { background: #fee500; border-color: #fee500; color: #191600; }
.quick-btn--tel { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 광고주 채널 (2026-09-15 추가).
   🔴 「예약」이 이미 네이버 초록입니다. 톡톡까지 같은 초록으로 채우면 두 칸이
      한 덩어리로 보여 서로 구분이 안 됩니다 — 톡톡은 흰 바탕에 초록 글자로 둡니다. */
.quick-btn--talk { background: var(--paper); border-color: #03c75a; color: #03c75a; }
.quick-btn--insta {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #f9a03f 0%, #e1306c 48%, #7c3aed 100%);
}
.quick-icon { font-size: 17px; line-height: 1; }
/* 도형 아이콘 — 글자 아이콘과 크기를 맞춥니다 */
svg.quick-icon { width: 20px; height: 20px; display: block; }
.quick-top { opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.quick-top.is-visible { opacity: 1; pointer-events: auto; }

/* ── 모바일 하단 고정바 ────────────────────────────────────────────── */
.mobilebar { display: none; }

/* ==========================================================================
   모션 시스템
   톤: 절제 · 느린 이징 · transform/opacity 만 사용 (레이아웃 리플로우 없음)
   주의: 마운트 시점에 존재하는 요소에만 사용합니다.
         탭·필터로 새로 그려지는 목록(.ba-grid 등)에는 붙이지 않습니다.
   ========================================================================== */

/* ── 시안 확인용 안내 띠 ───────────────────────────────────────────────
   head 인라인 가드가 주소를 보고 html 에 .is-draft 를 붙입니다.
   정식 도메인을 연결하는 순간 저절로 사라지므로, 오픈할 때 지울 것이 없습니다. */
html.is-draft body { padding-bottom: 38px; }
html.is-draft body::after {
  content: '시안 확인용 임시 주소입니다 · 검색 노출은 차단돼 있습니다';
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px;
  background: #b3261e; color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -0.02em;
  text-align: center;
}
html.is-draft .quick { bottom: calc(22px + 38px); }
@media (max-width: 640px) {
  html.is-draft .mobilebar { bottom: 38px; }
  html.is-draft .quick { bottom: calc(84px + 38px); }
  html.is-draft body::after { font-size: 12px; }
}

/* JS 미실행 환경에서는 모든 요소를 보이는 상태로 되돌립니다.
   (JS 차단 브라우저 · 일부 크롤러 대비 — 콘텐츠가 숨겨진 채 남지 않도록) */
html:not(.js) .reveal,
html:not(.js) [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── 등장 프리셋 ───────────────────────────────────────────────────── */
[data-anim] {
  transition-property: opacity, transform, clip-path;
  transition-duration: .95s;
  transition-timing-function: var(--ease);
}
[data-anim="fade"]     { opacity: 0; }
[data-anim="fade-up"]  { opacity: 0; transform: translateY(30px); }
[data-anim="fade-sm"]  { opacity: 0; transform: translateY(16px); transition-duration: .75s; }
[data-anim="mask-up"]  { opacity: 0; transform: translateY(20px); clip-path: inset(0 0 105% 0); transition-duration: 1.15s; }
[data-anim="img-in"]   { clip-path: inset(0 0 104% 0); transition-duration: 1.3s; }
[data-anim="scale-in"] { opacity: 0; transform: scale(.965); transition-duration: 1.1s; }

[data-anim].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* 이미지 커튼 리빌 — 프레임이 열리는 동안 안쪽 사진이 천천히 제자리를 찾습니다 */
[data-anim="img-in"] img { transform: scale(1.09); transition: transform 1.8s var(--ease); }
[data-anim="img-in"].is-in img { transform: scale(1); }

/* ── 스크롤 패럴랙스 ───────────────────────────────────────────────────
   컨테이너가 overflow:hidden 이고 이미지를 세로로 키워 두었기 때문에
   translateY 를 줘도 여백이 드러나지 않습니다. */
[data-parallax] { will-change: transform; }
.page-hero-bg img,
.cta-band-bg img { height: 124%; top: -12%; position: absolute; left: 0; }

/* ── AI 스캔 라인 (ai-scan 페이지 전용) ────────────────────────────── */
.figure--scan { position: relative; }
.figure--scan::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -34%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .42), transparent);
  animation: scanSweep 5.2s cubic-bezier(.5, 0, .5, 1) infinite;
  pointer-events: none;
}
@keyframes scanSweep {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(460%); opacity: 0; }
}

/* ── 헤더 스크롤 반응 ──────────────────────────────────────────────── */
.header {
  transition: height .45s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-scrolled {
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .06);
}
@media (min-width: 1025px) {
  .header.is-scrolled { height: 62px; }
  .header.is-scrolled .brand-mark { font-size: 18px; }
}

/* ── 버튼 마이크로 인터랙션 ────────────────────────────────────────── */
.btn--arrow::after {
  content: '→';
  font-size: 15px; line-height: 1;
  opacity: .55;
  transform: translateX(0);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.btn--arrow:hover::after { opacity: 1; transform: translateX(4px); }

/* ── 숫자 카운트업 ─────────────────────────────────────────────────── */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-parallax] { transform: none !important; }
  .figure--scan::after { display: none; }
}

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --gut: 32px; }
  .gnb > ul { gap: 22px; }
  .split { gap: 56px; }
  .info-grid { gap: 56px; }
}

/* 메뉴가 7개라 1025~1100px 구간이 가장 빡빡합니다. 여기서 한 번 더 좁혀 여유를 둡니다.
   (7개가 된 것은 「저널」이 들어오면서입니다 — 메뉴를 더 늘리면 이 값을 다시 재세요) */
@media (max-width: 1100px) {
  .gnb > ul { gap: 16px; }
  .gnb-en { font-size: 11.5px; letter-spacing: .05em; }
  .gnb-ko { font-size: 11.5px; }
}

/* 태블릿 */
@media (max-width: 1024px) {
  .section { padding: 84px 0; }
  .section--tight { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }

  .header-cta .btn { display: none; }
  .nav-toggle { display: flex; }

  /* 헤더에 붙여 두어야 스크롤·헤더 축소와 무관하게 항상 헤더 바로 아래에 열립니다.
     (fixed + 고정 offset 으로 두면 topbar 가 스크롤로 사라질 때 간격이 벌어집니다) */
  .gnb {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height .45s var(--ease);
  }
  .nav-open .gnb { max-height: 82svh; overflow-y: auto; }
  .gnb > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 28px; }
  .gnb > ul > li { border-bottom: 1px solid var(--line); }
  .gnb > ul > li:last-child { border-bottom: 0; }
  .gnb-link { flex-direction: row; align-items: baseline; gap: 10px; padding: 17px 0; }
  .gnb-en { font-size: 11px; color: var(--muted-2); min-width: 62px; }
  .gnb-ko { font-size: 16px; color: var(--ink-80); }
  .gnb-link::after { display: none; }

  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar { padding: 42px 30px; }
  .philosophy { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .programs { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* 태블릿 세로 · 큰 모바일 */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split-media { order: 0; }
  .info-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-scroll { display: none; }
  .topbar-info .topbar-item--hours { display: none; }
}

/* 모바일 */
@media (max-width: 640px) {
  :root { --gut: 22px; --h-header: 64px; --h-topbar: 34px; }

  body { font-size: 15px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 52px 0; }
  .section-head { margin-bottom: 34px; }
  .eyebrow { font-size: 11.5px; margin-bottom: 16px; }

  .topbar { font-size: 12px; }
  .topbar-info .topbar-item--addr { display: none; }

  .brand-sub { display: none; }
  .brand-mark { font-size: 18px; }

  .hero { min-height: 88svh; }
  .hero-inner { padding-bottom: 64px; }
  .hero-desc { margin-bottom: 30px; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 0; }

  .pillars { grid-template-columns: 1fr; }
  .pillar { padding: 34px 24px; }
  .pillar-num { margin-bottom: 16px; }

  .philosophy { grid-template-columns: 1fr; gap: 26px; }
  .ba-grid { grid-template-columns: 1fr; gap: 18px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 1 / 1; }

  .spec-item { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .spec-key { padding-top: 0; }

  .info-table th { width: 92px; padding-right: 12px; }
  .info-table th, .info-table td { font-size: 14.5px; padding: 16px 0; }

  .rating-bar { flex-direction: column; gap: 10px; padding: 22px; }
  .cta-band-inner { padding: 84px 0; }
  .btn { min-height: 52px; padding: 0 26px; font-size: 14.5px; }

  .footer { padding: 56px 0 100px; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 34px; }
  .footer-bottom { flex-direction: column; gap: 10px; }

  /* 터치 타깃 확보 */
  .topbar-tel { display: inline-flex; align-items: center; min-height: 34px; padding: 0 2px; }
  .footer-list > li { margin-bottom: 2px; }
  .footer-list a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-brand-text a { display: inline-flex; align-items: center; min-height: 38px; }

  /* 모바일에서는 우측 플로팅 대신 하단 고정바 */
  .quick { right: 14px; bottom: 84px; }
  .quick-btn { width: 50px; height: 50px; font-size: 9.5px; }
  /* 예약·전화는 화면 아래 고정바에 이미 있습니다. 여기서는 감춥니다.
     🔴 톡톡·인스타는 «남깁니다» — 고정바에도 푸터에도 없어서, 여기서 감추면
        휴대폰에서 닿을 곳이 사라집니다. */
  .quick-btn--naver,
  .quick-btn--kakao,
  .quick-btn--tel { display: none; }

  .mobilebar {
    /* 칸 수를 못박지 않습니다. 카카오톡 채널이 확정되면 버튼이 하나 늘어납니다. */
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    background: var(--paper); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilebar-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 58px; font-size: 14px; font-weight: 600; letter-spacing: -0.03em;
    border-right: 1px solid var(--line);
  }
  .mobilebar-btn:last-child { border-right: 0; }
  .mobilebar-btn--naver { background: #03c75a; color: #fff; }
  .mobilebar-btn--kakao { background: #fee500; color: #191600; }
  .mobilebar-btn--tel { background: var(--ink); color: #fff; }
}

@media (max-width: 380px) {
  :root { --gut: 18px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .mobilebar-btn { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   저널 (관리자에서 올린 글) — 목록·상세
   워커가 그리는 화면입니다. src/journal.mjs · src/site-data.mjs
   목록 카드는 .programs / .program 을 그대로 씁니다(모션·디자인 재사용).
   ══════════════════════════════════════════════════════════════════════════ */

/* 목록이 비었을 때 — 빈 화면을 그냥 두지 않습니다 */
.journal-empty { padding: 90px 0; text-align: center; }
.journal-empty-title { font-size: 22px; font-weight: 600; letter-spacing: -0.035em; margin-bottom: 14px; }
.journal-empty-text { font-size: 15px; color: var(--muted); line-height: 1.9; }

/* 글 머리 */
.article-meta {
  font-size: 13.5px; color: var(--muted-2); letter-spacing: 0;
  padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--line);
}
.article-cover { margin: 0 0 38px; }
.article-cover img { width: 100%; }
.article-cover-cap { padding-top: 12px; font-size: 13.5px; color: var(--muted-2); line-height: 1.7; }

/* 이 글의 순서 — 소제목이 셋 이상일 때만 나옵니다 */
.article-toc { margin: 0 0 40px; padding: 26px 28px; background: var(--mist); }
.article-toc-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 14px;
}
.article-toc-list { counter-reset: toc; display: grid; gap: 9px; }
.article-toc-list li { counter-increment: toc; font-size: 14.5px; }
.article-toc-list li::before {
  content: counter(toc, decimal-leading-zero); margin-right: 10px;
  font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.article-toc-list a { color: var(--ink-80); }
.article-toc-list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 본문 — .prose 위에 글에서만 쓰는 것을 얹습니다 */
.prose--article { font-size: 16px; }
.prose--article h2 { font-size: 21px; margin: 52px 0 14px; }
.prose--article h3 { font-size: 17.5px; margin: 34px 0 10px; }
.prose--article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose--article strong { font-weight: 600; color: var(--ink); }
.prose--article img { margin: 26px 0; }
.prose--article hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.prose--article blockquote {
  margin: 26px 0; padding: 22px 26px; background: var(--mist); border-left: 2px solid var(--ink);
}
.prose--article blockquote p:last-child { margin-bottom: 0; }
/* 번호 목록은 전역 list-style:none 때문에 번호가 사라집니다. 카운터로 되살립니다.
   ⚠️ .prose li::before 의 가운뎃점이 번호 목록에도 붙으므로 여기서 덮어씁니다. */
.prose--article ol { margin: 0 0 18px; display: grid; gap: 8px; counter-reset: pl; }
.prose--article ol > li { counter-increment: pl; padding-left: 24px; }
.prose--article ol > li::before {
  content: counter(pl) '.'; left: 0; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* 넓은 표가 좁은 화면에서 페이지를 밀지 않게 — 상자 안에서만 가로로 넘칩니다 */
.prose-scroll { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.prose--article table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.prose--article th,
.prose--article td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose--article thead th { background: var(--mist); font-weight: 600; color: var(--ink); }

/* 함께 보면 좋은 안내 */
.article-related { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.article-related-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px;
}
.article-related-list { display: flex; flex-wrap: wrap; gap: 10px; }
.article-related-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-80);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.article-related-list a:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 640px) {
  .journal-empty { padding: 60px 0; }
  .article-toc { padding: 22px 20px; }
  .prose--article { font-size: 15.5px; }
  .prose--article h2 { font-size: 19px; margin: 40px 0 12px; }
  .prose--article h3 { font-size: 16.5px; }
}

/* 가맹본부 표기 (푸터) — 2026-08-30 추가.
   지점 상호보다 한 단계 작게, 흐리게. 법적 표시라 눈에 띌 필요는 없지만 읽을 수는 있어야 합니다. */
.footer-hq {
  display: block; margin-top: 8px;
  font-size: 12.5px; line-height: 1.75; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .42);
}
/* 기기 표기처럼 중간에서 끊기면 안 되는 짧은 고유명사 */
.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .footer-hq { font-size: 12px; }
  .nowrap { white-space: normal; }
}

/* ==========================================================================
   신림중앙점 전용 — 당진수청점 스타일시트에 없는 컴포넌트만 여기에 둡니다.
   토큰은 위 :root 값을 그대로 씁니다(--ink / --muted / --line / --sand …).
   ========================================================================== */

/* ── 건너뛰기 링크 ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ── 오시는 길 ─────────────────────────────────────────────────────── */
.visit { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 900px) { .visit { grid-template-columns: 1.15fr 1fr; gap: 64px; } }

/* ── 약도 ──────────────────────────────────────────────────────────────
   🔴 지도 API·임베드를 쓰지 않습니다(최상단 규칙 §00).
      키가 만료돼 지도가 빈칸이 되는 일이 없고, 외부 스크립트가 없어
      첫 화면이 느려지지 않습니다.
   🔴 도형만 SVG 로 그리고 «글자는 그 위에 HTML 로» 얹습니다.
      SVG <text> 는 그림과 함께 축소돼 360px 폭에서 8px 까지 줄어듭니다. */
.visit__map { width: 100%; }
@media (max-width: 899px) { .visit__map { max-width: 520px; } }

.map {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); background: var(--mist); overflow: hidden;
}
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 글자는 전부 여기서 얹습니다. 자리는 마크업이 --x · --y(%) 로 지정합니다.
   🔴 SVG <text> 를 쓰지 않는 이유 — 그림과 함께 축소돼 360px 폭에서 8.5px 이 됩니다. */
.map__label {
  position: absolute; margin: 0;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  line-height: 1.35; letter-spacing: -0.01em; white-space: nowrap;
  font-size: 11px; color: var(--muted);
}
.map__label--l { transform: translate(0, -50%); }        /* 왼쪽 끝에 붙일 때 */
.map__label--r { transform: translate(-100%, -50%); }    /* 오른쪽 끝에 붙일 때 */

/* ── 매장 안내 카드 ─────────────────────────────────────────────────
   2026-09-15 — 예전에는 매장을 «검은 사각형 한 채» 로 칠하고 옆에 작은 글씨를
   달았는데, 광고주가 「검은 사각형이 뭐냐」고 물었습니다. 지도 위의 까만 덩어리는
   건물로 안 읽힙니다. 참고 사이트(연세타이밍치과)처럼 상호·층수·걸어오는 시간을
   한 덩어리 카드로 묶고, 지도에는 «자리만» 부드럽게 비춥니다.
   🔴 카드 폭을 %로 잡습니다 — 약도가 좁아져도 카드가 지도를 덮지 않아야 합니다. */
.map__card {
  position: absolute; left: 4%; top: 6%;
  width: min(56%, 252px);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(13, 13, 15, .18);
  font-size: 11.5px; line-height: 1.5; letter-spacing: -0.02em;
}
.map__card-name {
  margin: 0; padding: 9px 12px;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; text-align: center;
}
.map__card-body {
  margin: 0; padding: 10px 12px;
  background: var(--ink); color: rgba(255, 255, 255, .82);
}
.map__card-body b { color: #fff; font-weight: 600; }
.map__card-foot {
  margin: 0; padding: 6px 12px;
  background: var(--sand); color: var(--ink);
  font-size: 11px; font-weight: 600; text-align: center;
}

/* 카드에서 매장 자리로 내려가는 꼬리.
   🔴 «아래» 로 뺍니다 — 매장이 카드 바로 밑에 있어서, 오른쪽으로 빼면
      꼬리가 엉뚱한 곳을 가리킵니다(실측). 꼬리 색은 맞닿는 띠 색과 같아야 합니다. */
.map__card::after {
  content: ""; position: absolute; left: 66%; bottom: -8px;
  border: 5px solid transparent; border-top-color: var(--sand);
}

/* 길 이름 */
.map__label--road { letter-spacing: 0.16em; }

/* 지하철역 — 노선 띠 «위» 에 올라가므로 흰 글자라야 읽힙니다 */
.map__label--stn { font-weight: 700; color: #fff; text-align: center; }
/* 출구 — 띠 밖 회색 바탕이라 검은 글자 그대로 */
.map__label--exit { font-weight: 600; color: var(--ink); }

/* 주변 지형지물 — 약도가 좁아지면 상호 라벨과 겹치므로 감춥니다.
   🔴 같은 내용이 약도 옆 「가는 길」 안내에 글자로 들어 있어야 합니다. */
.map__label--poi { color: var(--muted-2); }

/* 🔴 화면 폭이 아니라 «약도 폭» 으로 판정합니다.
   900px 에서 오시는 길이 2단이 되며 약도만 382px 로 좁아져 겹쳤습니다(실측).
   화면은 넓은데 약도가 좁은 구간이 있어 @media 로는 못 잡습니다. */
.map { container-type: inline-size; }
@container (max-width: 400px) {
  .map__label--poi { display: none; }
  .map__card { width: min(62%, 196px); font-size: 10.5px; }
  .map__card-name { font-size: 11.5px; padding: 7px 10px; }
  .map__card-body { padding: 8px 10px; }
}
@container (min-width: 420px) {
  .map__label { font-size: 12px; }
  .map__card { font-size: 12.5px; }
  .map__card-name { font-size: 15px; }
}

/* 컨테이너 쿼리를 모르는 브라우저용 대비 */
@supports not (container-type: inline-size) {
  @media (max-width: 479px) { .map__label--poi { display: none; } .map__card { width: min(62%, 196px); } }
  @media (min-width: 480px) {
    .map__label { font-size: 12px; }
    .map__card { font-size: 12.5px; }
    .map__card-name { font-size: 15px; }
  }
}

.map-apps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 14px 0 0; font-size: 13px; color: var(--muted);
}
.map-apps a {
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 1px;
  transition: border-color .25s var(--ease);
}
.map-apps a:hover { border-color: var(--ink); }

/* 약도에는 등장 연출을 걸지 않습니다.
   예전에는 위치 표시 별이 뒤늦게 맺혔으나 별 핀 자체를 뺐습니다(2026-09-14 사용자 지시).
   목적지는 진하게 칠한 예원빌딩 한 채로 표시합니다. */

/* ── 정보 목록(오시는 길 옆) ───────────────────────────────────────── */
.info-list { border-top: 1px solid var(--ink); }
.info-list > div {
  display: grid; grid-template-columns: 86px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.info-list dt { font-size: 12px; letter-spacing: .08em; color: var(--muted); padding-top: 3px; }
.info-list dd { margin: 0; font-size: 15px; }
.info-list dd small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

.channel-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

/* ── 읽기 진행 표시 (정보 글·프로그램 글에만) ───────────────────────── */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: 2px; pointer-events: none;
}
.read-progress > span { display: block; height: 100%; width: 0; background: var(--sand); }
@media print { .read-progress { display: none; } }

/* ── 팝업 ────────────────────────────────────────────────────────────
   🔴 관리자에서 「뜨는 자리」를 끌어 지정합니다(기준 markup/6-팝업.html).
      그래서 가운데 고정 창이 아니라 «좌표로 놓는 창» 입니다. 뒤를 덮는 막을 두지 않습니다 —
      막을 깔면 자리를 지정할 이유가 없어지고, 여러 개를 켰을 때 뒤 팝업이 가려집니다.
   🔴 좁은 화면에서는 좌표를 쓰지 않고 가운데에 둡니다. 가로를 거의 다 차지해 어디에 두든 같고,
      억지로 맞추면 잘리기만 합니다(판정은 assets/js/popup.js 의 FREE_MIN). */
.popup {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;                 /* 팝업 밖은 그대로 눌리고 스크롤된다 */
  animation: popupIn .25s var(--ease);
}
@keyframes popupIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .popup { animation: none; } }

.popup__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 100%; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(12, 18, 32, .22);
}
.popup__box:focus { outline: none; }
.popup__img { width: 100%; height: auto; display: block; }

/* 여러 장 — 저절로 넘어가고, 손가락·마우스로 끌고, 화살표·점으로도 넘긴다.
   🔴 손가락 스와이프는 CSS 가 한다(scroll-snap). 직접 만들면 기본 동작보다 뻑뻑하다. */
.popup__slider { position: relative; }
.popup__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.popup__track::-webkit-scrollbar { display: none; }
.popup__slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden;
}
/* 🔴 그림은 띠 «위» 에 통째로 얹는다. 잘라서 채우는 것이 아니다 — 광고주 그림은 자르지 않는다. */
.popup__slide img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block;
  max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  -webkit-user-drag: none; user-select: none;
}
.popup__slider--many .popup__track { cursor: grab; user-select: none; }
.popup__slider--many .popup__track:active { cursor: grabbing; }
/* 비율이 다른 장에 남는 위아래를 그 그림의 «맨 윗줄·맨 아랫줄 색» 으로 메운다.
   ⚠️ 흐린 사본을 깔아 봤더니 가운데 내용이 비쳐 유령처럼 보였다. 되돌리지 말 것. */
.popup__band { position: absolute; left: 0; right: 0; z-index: 0; height: 50%; }
.popup__band--top { top: 0; }
.popup__band--bottom { bottom: 0; }
.popup__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0;                   /* 터치 44px 이상 */
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .42); color: #fff; font-size: 22px; line-height: 1;
}
.popup__arrow:hover { background: rgba(0, 0, 0, .62); }
.popup__arrow[disabled] { opacity: .25; cursor: default; }
.popup__arrow--prev { left: 8px; }
.popup__arrow--next { right: 8px; }
.popup__dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; gap: 6px; justify-content: center;
}
.popup__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .6);
}
.popup__dots button.is-on { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .popup__track { scroll-behavior: auto; } }

.popup__body { padding: 28px 26px 22px; }
.popup__title { font-size: 19px; letter-spacing: -.03em; }
.popup__text { margin-top: 12px; font-size: 14px; color: var(--ink-80); }
.popup__cta { margin-top: 22px; width: 100%; }
.popup__foot { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.popup__skip, .popup__close {
  flex: 1; min-height: 48px;          /* 터치 44px 이상 */
  border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--muted);
}
.popup__close { border-left: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.popup__skip:hover, .popup__close:hover { background: var(--mist); }

/* ── 알림 띠 · 오늘 휴무 ────────────────────────────────────────────────
   관리자 → 휴무·알림 화면에서 등록합니다. 사람이 코드를 고치지 않습니다.
   🔴 «오늘인지» 는 브라우저가 판정합니다(assets/js/notice.js) —
      화면이 하루까지 캐시되므로 서버에서 정하면 어제 값이 나갑니다. */
.notice-bar {
  display: block; padding: 11px 16px;
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.02em;
  text-align: center; line-height: 1.5;
}
.notice-bar--alert { background: #b3261e; }
a.notice-bar { text-decoration: underline; text-underline-offset: 3px; }
a.notice-bar:hover { filter: brightness(1.15); }

/* 띠가 붙으면 상단 정보바·헤더가 그만큼 아래로 밀립니다.
   헤더는 sticky 라 top 값을 건드리지 않아도 제자리를 잡습니다. */

/* 영업시간 자리를 대신 채우는 글 */
.is-closed-today { color: #b3261e; font-weight: 700; }

@media print { .notice-bar { display: none; } }

/* 저널 카드의 사진도 눌러서 글로 들어갑니다 (2026-09-15 사용자 지적 — 눌러도 반응이 없었습니다).
   🔴 a 는 기본이 inline 이라 그대로 두면 height:100% 인 사진이 칸을 못 채웁니다.
   ⚠️ 제목에 이미 같은 곳으로 가는 링크가 있어, 사진 쪽 a 는 탭 순서에서 빼고
      낭독기에도 숨깁니다(같은 링크를 두 번 읽지 않게). */
.program-media > a { display: block; width: 100%; height: 100%; }

/* ── 저널 목록의 여백 (2026-09-15 사용자 지적 — 「흰 여백이 너무 많아 부실해 보인다」)
   🔴 «저널 목록에서만» 좁힙니다. .section--tight · .program 은 프로그램 화면과
      공지 목록이 함께 쓰는 클래스라, 여기서 넓게 고치면 다른 화면까지 따라 변합니다.
   실측(1440px) — 섹션 위아래 100px · 설명문 아래 68px · 카드 8장 중 5장은
   태그가 없어 본문 아래가 58px 씩 비어 있었습니다. */
/* ⚠️ 저널만 따로 좁히던 규칙은 뺐습니다 — 2026-09-15 에 전역 여백을 줄여 필요가 없어졌습니다.
      리듬이 두 벌이 되면 나중에 한쪽만 고치게 됩니다. */
.programs--journal .program-body { padding: 28px 26px 30px; }

/* 🔴 태그가 없는 글은 본문이 카드의 «마지막» 이 됩니다. 그 아래 22px 이 그대로 죽은
      여백이 되어 카드가 반쯤 비어 보였습니다(원고 5편이 태그가 없습니다). */
.program-text:last-child { margin-bottom: 0; }