/* 여덟자리 — N11 반쪽 고정 분할: 왼쪽 사진면은 멈추고, 오른쪽 글면만 스크롤된다 */
:root {
  --paper: #F2EDE4;
  --paper-2: #E8E1D5;
  --ink: #1D1B18;
  --ink-2: #4A453E;
  --line: #CFC5B5;
  --shu: #9A3A22;
  --hinoki: #C9A57A;
  --serif: 'Song Myung', 'Noto Serif KR', serif;
  --sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.8 var(--sans); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 분할 ─────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.still { position: sticky; top: 0; height: 100vh; height: 100svh; background: #0E0D0B; overflow: hidden; }
.still__frame { position: absolute; inset: 0; margin: 0; }
.still__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.still__img.is-on { opacity: 1; }

/* 사진면 아래 모서리에 겹친 연락 버튼 */
.still__dock { position: absolute; left: 24px; bottom: 64px; display: flex; gap: 6px; z-index: 2; }
.dock { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; background: rgba(242, 237, 228, .94); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 2px; }
.dock:hover { background: #fff; }
.dock--call { background: var(--ink); color: var(--paper); }
.dock--call:hover { background: #000; }
.dock--call span { font-size: 12px; opacity: .7; }
.dock--call b { font-weight: 500; letter-spacing: .02em; }

/* ── 글면 ─────────────────────────── */
.flow { padding: 72px clamp(28px, 5vw, 76px) 40px; max-width: 680px; }
.flow > section, .flow > header { padding-bottom: 64px; }
.flow > section + section { border-top: 1px solid var(--line); padding-top: 52px; }

.mast__kicker { margin: 0 0 18px; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.mast__name { margin: 0 0 22px; font: 400 clamp(56px, 7vw, 92px)/1 var(--serif); letter-spacing: -.01em; }
.mast__lead { margin: 0; font-size: 18px; line-height: 1.85; color: var(--ink-2); max-width: 30em; }
.mast { padding-bottom: 44px !important; }

/* 네이버 플레이스 순서: 주소 → 영업 상태 → 전화 → 편의 → 버튼 줄 */
.place { background: var(--paper-2); margin: 0 calc(-1 * clamp(18px, 2vw, 28px)); padding: 26px clamp(18px, 2vw, 28px) 28px !important; border-top: 0 !important; }
.place p { margin: 0 0 10px; }
.place__addr { font-size: 17px; font-weight: 500; }
.place__addr span, .place__tel span { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.place__state { font-size: 15px; }
.badge { display: inline-block; margin-right: 6px; padding: 1px 9px; border: 1px solid var(--ink); font-size: 12.5px; font-weight: 700; }
.badge.is-open { background: var(--shu); border-color: var(--shu); color: #fff; }
.place__tel a { font-size: 22px; font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.place__facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 18px; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.place__facts li::before { content: '·'; margin-right: 6px; color: var(--shu); }
.place__row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; background: transparent; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--shu); border-color: var(--shu); }

.eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--shu); }
.notice { padding-top: 44px; }
.flow > .notice { border-top: 0; }
.notice__list { margin: 0; padding: 0; list-style: none; }
.notice__list li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.notice__list li:last-child { border-bottom: 0; }
.notice__list time { font-size: 13.5px; color: var(--ink-2); padding-top: 2px; font-variant-numeric: tabular-nums; }
.notice__list p { margin: 0; font-size: 15.5px; }

.title { margin: 0 0 28px; font: 400 40px/1.2 var(--serif); }
.sub { margin: 40px 0 14px; font: 400 22px/1.4 var(--serif); }

.course__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.price { padding: 22px 22px 22px 0; }
.price + .price { padding-left: 22px; border-left: 1px solid var(--line); }
.price h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--shu); }
.price__won { margin: 0; font: 400 36px/1.2 var(--serif); }
.price__won small { font: 400 16px var(--sans); margin-left: 3px; }
.price__time { margin: 4px 0 10px; font-size: 13.5px; color: var(--ink-2); }
.price p:last-child { margin: 0; font-size: 14.5px; line-height: 1.7; }

.flowlist { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.flowlist li { counter-increment: n; display: grid; grid-template-columns: 34px 92px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.flowlist li::before { content: counter(n, decimal-leading-zero); font-size: 12px; color: var(--hinoki); padding-top: 3px; font-variant-numeric: tabular-nums; }
.flowlist span { color: var(--ink); font-weight: 500; }
.note { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }

.about p { margin: 0 0 16px; font-size: 16.5px; }

.rules { margin: 0 0 24px; }
.rules div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rules div:first-child { border-top: 2px solid var(--ink); }
.rules dt { font-weight: 700; font-size: 14.5px; }
.rules dd { margin: 0; font-size: 15px; color: var(--ink-2); }

.visit__addr { margin: 0 0 8px; font: 400 24px/1.4 var(--serif); }
.visit p { margin: 0 0 14px; }
.hours { width: 100%; margin: 22px 0 6px; border-collapse: collapse; font-size: 15px; }
.hours caption { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--shu); padding-bottom: 8px; }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
.hours th { font-weight: 500; width: 42%; }
.visit .place__row { margin-top: 22px; }

.foot { padding: 36px 0 12px; border-top: 2px solid var(--ink); font-size: 13px; color: var(--ink-2); }
.foot p { margin: 0 0 8px; }
.foot__name { font: 400 22px var(--serif); color: var(--ink); }
.foot__copy { opacity: .7; }

.m-only { display: none; }
.mbar { display: none; }

/* ── 모바일: 분할 해제 → 사진 히어로 → 영업 정보 → 본문 ── */
@media (max-width: 860px) {
  .split { display: block; }
  .still { position: relative; height: 62svh; min-height: 360px; max-height: 620px; }
  .still__img:not([data-key="counter"]) { display: none; }
  .still__img[data-key="counter"] { opacity: 1; }
  .still__dock { display: none; }
  .flow { max-width: none; padding: 36px 20px 24px; }
  .mast__name { font-size: 58px; }
  .mast__lead { font-size: 16.5px; }
  .flow > section, .flow > header { padding-bottom: 48px; }
  .flow > section + section { padding-top: 40px; }
  .place { margin: 0 -20px; padding: 22px 20px 24px !important; }
  .title { font-size: 32px; margin-bottom: 20px; }
  .m-only { display: block; margin: 0 -20px 24px; }
  .m-only img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .visit .m-only img { aspect-ratio: 4 / 5; }
  .place__row { display: grid; grid-template-columns: 1fr 1fr; }
  .place__row .btn { justify-content: center; padding: 0 10px; }
  .visit .place__row .btn:last-child { grid-column: 1 / -1; }
  .course__pair { grid-template-columns: 1fr; }
  .price { padding: 18px 0; }
  .price + .price { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .flowlist li { grid-template-columns: 28px 78px 1fr; font-size: 14.5px; }
  .rules div { grid-template-columns: 64px 1fr; }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); } /* 하단 고정 바가 맨 아래(추가 기능 상자)를 가리지 않게 */
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; align-items: center; justify-content: center; min-height: 54px; color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 500; }
  .mbar a + a { border-left: 1px solid rgba(242, 237, 228, .18); }
  .mbar a:first-child { background: var(--shu); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .still__img { transition: none; }
}