@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); }

/* ── 공통 섹션 타이포 ───────────────────────────────────────────────── */
.section { padding: 140px 0; }
.section--tight { padding: 100px 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: 68px; }
.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; object-position: center top; 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; }
.quick-icon { font-size: 17px; line-height: 1; }
.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: 110px 0; }
  .section--tight { padding: 84px 0; }
  .section-head { margin-bottom: 52px; }

  .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: 78px 0; }
  .section--tight { padding: 60px 0; }
  .section-head { margin-bottom: 40px; }
  .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-template-columns: repeat(3, 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);
}
/* 메인 화면의 공지 목록 — 제목과 날짜만. 본문은 /notice.html 에서 봅니다. */
.notice-brief { border-top: 1px solid var(--line); }
.notice-brief li { border-bottom: 1px solid var(--line); }
.notice-brief a {
  display: flex; align-items: baseline; gap: 20px; padding: 22px 2px;
  color: var(--ink); transition: color .25s var(--ease);
}
.notice-brief a:hover { color: var(--muted); }
.notice-brief-title {
  flex: 1; min-width: 0; font-size: 16.5px; letter-spacing: -0.025em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.notice-brief-date { flex-shrink: 0; font-size: 13.5px; color: var(--muted-2); }
@media (max-width: 640px) {
  .notice-brief a { flex-direction: column; gap: 8px; padding: 18px 2px; }
  .notice-brief-title { font-size: 15.5px; }
}

/* ── 공지사항 ────────────────────────────────────────────────────────
   저널과 달리 목록과 본문이 한 화면에 이어집니다(공지는 대개 짧습니다). */
.notice-item + .notice-item { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.notice-item-title { font-size: 24px; letter-spacing: -0.035em; margin-bottom: 12px; word-break: keep-all; }
.notice-item-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px;
  font-size: 13.5px; color: var(--muted-2); }
.notice-item .prose { margin-top: 0; }
@media (max-width: 640px) {
  .notice-item + .notice-item { margin-top: 40px; padding-top: 40px; }
  .notice-item-title { font-size: 20px; }
}

/* 지점 사업자 표기 (푸터) — 2026-09-15. 가맹본부 표기와 같은 계열이되 한 톤 진하게:
   이 홈페이지의 운영 주체라 가맹본부보다 먼저 읽혀야 합니다. */
.footer-biz {
  display: block; margin-top: 8px;
  font-size: 12.5px; line-height: 1.75; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .55);
}
@media (max-width: 640px) { .footer-biz { font-size: 12px; } }

/* 기기 표기처럼 중간에서 끊기면 안 되는 짧은 고유명사 */
.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .footer-hq { font-size: 12px; }
  .nowrap { white-space: normal; }
}