/* 한마디 피아노 학원 — 피아노 학원 디자인 샘플 (디코랩)
   구성: 화면 아래 고정 건반 = 섹션 메뉴(도레미파솔라시도), 본문은 악보처럼 — 빠르기말·제목·오선 띠·마디줄·도돌이표·끝마침표
   색은 학원 실물에서: 오선지 종이, 악보 잉크, 메트로놈·피아노 몸통 마호가니, 선생님 빨간 색연필, 흰 건반 상아색 */
:root {
  --color-staffpaper: #FAF7F0;  /* 배경 — 오선지 종이 */
  --color-ink: #26211D;         /* 본문 글자·음표 */
  --color-staffline: #C9C1B2;   /* 오선·괘선 */
  --color-ghost: #B3A998;       /* 지나온 음표 */
  --color-mahogany: #7A3420;    /* 피아노 몸통·메트로놈 — theme-color */
  --color-mahogany-deep: #5E2716;
  --color-redpencil: #D2372A;   /* 체험 상담 버튼, 선생님 동그라미 */
  --color-redpencil-deep: #8C1F17;
  --color-ivory: #FFFDF6;       /* 흰 건반 */
  --color-ebony: #1D1A18;       /* 검은 건반 */
  --color-brass: #C9A24A;       /* 상호 금박 (장식) */
  --color-cream-text: #F5E8CC;  /* 마호가니 위 글자 */
  --color-muted: #675F56;
  --color-tint: #F1EBDF;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-hand: "Hi Melody", var(--font);

  --fs-h1: clamp(2.7rem, 1.5rem + 4.4vw, 5.3rem);
  --fs-h2: clamp(2.3rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --dock-h: 88px;
  --banner-h: 44px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--dock-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-staffpaper);
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: min(1160px, 100% - var(--gutter) * 2); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-redpencil); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 4px; opacity: .8; font-size: .92em; line-height: 1.5; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-ink); color: #ECE6DA; font-size: var(--fs-small); line-height: 1.6; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--color-ivory); color: var(--color-ink); font-weight: 700; font-size: .78rem; }
.sample-banner a { color: #FFD9CF; font-weight: 600; }

/* 버튼 — 건반처럼 아래 턱이 있고 누르면 내려간다 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1.02rem; line-height: 1.3; text-decoration: none; border: 2px solid var(--color-ink); box-shadow: 0 4px 0 var(--color-ink); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background-color .18s ease; }
.btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--color-ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--color-ink); }
.btn--pencil { background: var(--color-redpencil); color: #fff; }
.btn--pencil:hover { background: #C02F23; }
.btn--line { background: var(--color-ivory); color: var(--color-ink); }
.btn--line:hover { background: var(--color-tint); }
.btn--kakao { background: #FEE500; color: #191600; }
.btn .ph { font-size: .8em; }

/* 빠르기말 — 악보 첫 줄 왼쪽 위 */
.tempo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.3; letter-spacing: -.05em; color: var(--color-mahogany); }
.tempo__it { font-family: var(--font); font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; color: var(--color-ink); }
.tempo__mm { font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--color-ink); }

/* ========== 첫 화면 ========== */
.hero { position: relative; padding: 36px 0 0; overflow: hidden; }
.hero::before {
  /* 오선지 종이 무늬 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image: linear-gradient(to bottom,
    transparent 40px, rgba(122,52,32,.09) 40px 41px, transparent 41px 50px,
    rgba(122,52,32,.09) 50px 51px, transparent 51px 60px, rgba(122,52,32,.09) 60px 61px,
    transparent 61px 70px, rgba(122,52,32,.09) 70px 71px, transparent 71px 80px,
    rgba(122,52,32,.09) 80px 81px, transparent 81px);
  background-size: 100% 130px;
}
.hero__grid { position: relative; display: grid; gap: 28px; }
.hero__copy .tempo { margin-bottom: 14px; }
.hero__title { font-family: var(--font-hand); font-weight: 400; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.04em; margin-bottom: 18px; -webkit-text-stroke: .018em currentColor; }
.hero__lead { max-width: 30em; color: #3E3731; margin-bottom: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-bottom: 30px; }
.hero__facts { display: grid; margin: 0; border-top: 1.5px solid var(--color-ink); max-width: 34em; }
.hero__facts div { display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1.5px solid var(--color-staffline); }
.hero__facts dt { font-weight: 700; color: var(--color-mahogany); }
.hero__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero__art { position: relative; }
.hero__composer { display: none; text-align: right; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.35; color: var(--color-muted); margin-bottom: 10px; }
.hero__composer b { font-weight: 400; color: var(--color-ink); font-size: 1.15em; }
.piano-desk { width: 100%; height: auto; overflow: visible; }
.piano-desk .wood { fill: var(--color-mahogany); }
.piano-desk .wood-dark { fill: var(--color-mahogany-deep); }
.piano-desk .wood-light { fill: #9A4A2C; stroke: var(--color-mahogany-deep); stroke-width: 3; }
.piano-desk .wood-panel { fill: none; stroke: rgba(245,232,204,.22); stroke-width: 3; }
.piano-desk .grain { fill: none; stroke: rgba(0,0,0,.12); stroke-width: 2; }
.piano-desk .metro-face { fill: #F3E3C3; }
.piano-desk .metro-ticks { stroke: #7A3420; stroke-width: 2; }
.piano-desk .metro-arm { transform-box: view-box; transform-origin: 512px 134px; }
.piano-desk .book-shadow { fill: rgba(0,0,0,.25); }
.piano-desk .page { fill: var(--color-ivory); stroke: #CFC6B5; stroke-width: 1.5; }
.piano-desk .page-staff path { stroke: #8F877B; stroke-width: 1.2; }
.piano-desk .page-clef { color: var(--color-ink); }
.piano-desk .page-notes ellipse { fill: var(--color-ink); }
.piano-desk .page-notes path { stroke: var(--color-ink); stroke-width: 1.8; fill: none; }
.piano-desk .page-solfa { font-family: var(--font-hand); font-size: 15px; fill: var(--color-muted); }
.piano-desk .page-title { font-family: var(--font-hand); font-size: 28px; fill: var(--color-ink); }
.piano-desk .page-sub { font-size: 12px; fill: var(--color-muted); }
.piano-desk .practice-dots circle { fill: var(--color-redpencil); stroke: var(--color-redpencil); stroke-width: 1.6; }
.piano-desk .practice-dots circle.empty { fill: none; }
.piano-desk .pencil-ring { fill: none; stroke: var(--color-redpencil); stroke-width: 3; stroke-linecap: round; }
.piano-desk .pencil-note { font-family: var(--font-hand); font-size: 21px; fill: var(--color-redpencil); }
.piano-desk .stamp circle { fill: none; stroke: var(--color-redpencil); stroke-width: 3; }
.piano-desk .stamp text { font-family: var(--font-hand); font-size: 15px; fill: var(--color-redpencil); }

/* 등장: 보이는 상태가 기본, has-motion 일 때만 숨겼다 보여 준다 */
.has-motion [data-hero-item] { opacity: 0; transform: translateY(16px); }
.has-motion .is-ready [data-hero-item] { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.has-motion .is-ready .hero__title { transition-delay: .08s; }
.has-motion .is-ready .hero__lead { transition-delay: .16s; }
.has-motion .is-ready .hero__actions { transition-delay: .24s; }
.has-motion .is-ready .hero__facts { transition-delay: .32s; }
.has-motion .hero .score-book { opacity: 0; transform: translateY(24px); }
.has-motion .hero.is-ready .score-book { opacity: 1; transform: none; transition: opacity .5s ease .25s, transform .7s cubic-bezier(.2,.7,.2,1) .25s; }
.has-motion .hero .pencil-ring { stroke-dasharray: 260; stroke-dashoffset: 260; }
.has-motion .hero.is-ready .pencil-ring { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out 1s; }
.has-motion .hero.is-ready .metro-arm { animation: tick .5s ease-in-out .6s 6 alternate both; }
@keyframes tick { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

.has-motion .reveal { opacity: 0; transform: translateY(22px); }
.has-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }

/* ========== 악장(섹션) 공통 — 섹션 여백은 여기서만 정한다 ========== */
.movement { padding: clamp(56px, 7vw, 100px) 0 clamp(64px, 8vw, 112px); }

/* 오선 띠: 높은음자리표 + 박자표 + 지금까지 올라온 계이름 + 마디줄 */
.staff {
  --staff-line: var(--color-staffline);
  display: flex; align-items: flex-start; height: 100px; margin-bottom: 22px; color: var(--color-ink);
  background: repeating-linear-gradient(to bottom, var(--staff-line) 0 1.5px, transparent 1.5px 10px) 0 19.25px / 100% 41.5px no-repeat;
}
.staff__clef { flex: none; width: 70px; height: 100px; }
.staff__clef text { font-family: var(--font); font-weight: 800; font-size: 21px; text-anchor: middle; fill: currentColor; }
.staff__notes { display: flex; margin-left: 8px; }
.n { flex: none; width: 48px; height: 100px; color: var(--color-ghost); overflow: visible; }
.n--now { color: var(--color-ink); --sticker: var(--color-redpencil); --sticker-ink: #fff; }
.head { fill: currentColor; }
.stem, .ledger { stroke: currentColor; stroke-width: 1.6; fill: none; }
.sticker { fill: var(--sticker, transparent); }
symbol text { font-family: var(--font-hand); font-size: 15px; text-anchor: middle; fill: var(--sticker-ink, currentColor); }
.staff__bar, .staff__repeat { flex: none; width: 16px; height: 100px; margin-left: auto; }
.staff__repeat { width: 24px; }
.staff__repeat:first-child { margin-left: 0; margin-right: 4px; }
.staff--light { --staff-line: rgba(255,253,246,.42); color: var(--color-ivory); }
.staff--light .n { color: rgba(255,253,246,.42); }
.staff--light .n--now { color: var(--color-ivory); }
.staff--end, .staff--fine { margin: 36px 0 0; }
.staff__caption { align-self: flex-end; padding-bottom: 2px; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; color: var(--color-cream-text); }
.staff__fine { align-self: flex-start; margin-left: auto; margin-right: 4px; font-weight: 800; font-size: .95rem; line-height: 1.2; white-space: nowrap; }
.staff--fine .staff__repeat { margin-left: 0; width: 20px; }
.staff--fine .staff__caption { color: var(--color-mahogany); }
.has-motion .staff .n--now { opacity: 0; transform: translateY(-26px); }
.has-motion .staff.is-in .n--now { opacity: 1; transform: none; transition: transform .55s cubic-bezier(.3,1.5,.5,1) .15s, opacity .2s ease .15s; }

/* 악보 제목 자리 */
.score-head { margin-bottom: 40px; }
.score-head .tempo { margin-bottom: 6px; }
.score-head h2 { font-family: var(--font-hand); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 14px; -webkit-text-stroke: .015em currentColor; }
.score-head__lead { max-width: 34em; color: var(--color-muted); }

/* ========== 도: 수업 안내 — 큰보표 괄호로 묶은 세 파트 ========== */
.system { position: relative; padding-left: 40px; }
.system__brace { position: absolute; left: 0; top: 10px; bottom: 10px; width: 26px; height: calc(100% - 20px); color: var(--color-ink); }
.part { display: grid; gap: 10px; padding: 24px 0; border-top: 1.5px solid var(--color-staffline); }
.part:last-child { border-bottom: 1.5px solid var(--color-staffline); }
.part__name { font-family: var(--font-hand); font-weight: 400; font-size: 2rem; line-height: 1.2; }
.part__name small { display: block; font-family: var(--font); font-size: .9rem; font-weight: 600; color: var(--color-muted); letter-spacing: 0; }
.part__body p + p { margin-top: 8px; }
.part__meta { font-weight: 700; color: var(--color-mahogany); font-variant-numeric: tabular-nums; }
.part__meta span { font-weight: 500; color: var(--color-muted); }
.mini-kb { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); height: 64px; max-width: 300px; border: 1.5px solid var(--color-ink); border-radius: 3px 3px 6px 6px; overflow: hidden; background: var(--color-ivory); }
.mini-kb i { border-right: 1px solid #CFC6B5; }
.mini-kb i:last-of-type { border-right: 0; }
.mini-kb i.on { background: #F9D9D3; box-shadow: inset 0 -7px 0 var(--color-redpencil); }
.mini-kb b { position: absolute; top: 0; left: calc(var(--k) * 100% / 14 - 2.6%); width: 5.2%; height: 58%; background: var(--color-ebony); border-radius: 0 0 2px 2px; }
.part__kb { font-size: var(--fs-small); color: var(--color-muted); }

/* ========== 레: 진도 악보 — 피아노 몸통 위 보면대 ========== */
.roadmap { background: var(--color-mahogany); color: var(--color-ivory); }
.roadmap .score-head .tempo { color: var(--color-cream-text); }
.roadmap .score-head .tempo__it { color: var(--color-ivory); }
.roadmap .score-head__lead { color: rgba(255,253,246,.86); }
.road { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.road > * { min-width: 0; }
.road__pick { display: grid; gap: 20px; align-content: start; }
.pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pick legend { width: 100%; margin-bottom: 8px; font-weight: 700; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span { display: inline-flex; align-items: baseline; gap: 5px; min-height: 44px; padding: 9px 16px; border-radius: 99px; border: 2px solid rgba(255,253,246,.6); font-weight: 700; font-size: .95rem; line-height: 1.4; transition: background-color .18s, color .18s, border-color .18s; }
.chip small { font-weight: 500; font-size: .78rem; opacity: .85; }
.chip input:checked + span { background: var(--color-ivory); border-color: var(--color-ivory); color: var(--color-ink); box-shadow: inset 0 -4px 0 var(--color-redpencil); }
.chip input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.chip--off { cursor: default; }
.chip--off > span { border-style: dashed; border-color: rgba(255,253,246,.4); color: rgba(255,253,246,.62); }
.chip--off s { text-decoration-thickness: 2px; }
.chip--off small { opacity: 1; color: var(--color-cream-text); }

.road__sheet { background: var(--color-staffpaper); color: var(--color-ink); border-radius: 4px; padding: 26px 22px 24px; box-shadow: 0 22px 34px -22px rgba(0,0,0,.6); }
.road__summary { font-family: var(--font-hand); font-size: 1.75rem; line-height: 1.35; margin-bottom: 4px; }
.road__summary b { font-weight: 400; text-decoration: underline; text-decoration-color: var(--color-redpencil); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.road__rhythm { font-weight: 700; color: var(--color-mahogany); font-size: .95rem; margin-bottom: 6px; }
.road__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px; }
.road__staff { width: 100%; min-width: 640px; height: auto; overflow: visible; }
.road__hint { display: none; font-size: var(--fs-small); color: var(--color-muted); text-align: right; }
.rs-lines path { stroke: #A69D8F; stroke-width: 2; fill: none; }
.rs-clef { color: var(--color-ink); }
.rs-time { font-family: var(--font); font-weight: 900; font-size: 40px; text-anchor: middle; fill: var(--color-ink); }
.rn ellipse { fill: var(--color-ink); }
.rs-stem { stroke: var(--color-ink); stroke-width: 3; fill: none; }
.rs-bar { stroke: #A69D8F; stroke-width: 2; fill: none; }
.rs-name { font-family: var(--font); font-weight: 700; font-size: 19px; text-anchor: middle; fill: var(--color-ink); }
.rs-period { font-family: var(--font); font-weight: 600; font-size: 16px; text-anchor: middle; fill: var(--color-mahogany); }
.rs-final { stroke: var(--color-ink); stroke-width: 2.5; fill: none; }
.rs-final--thick { stroke-width: 7; }
.rs-ring { fill: none; stroke: var(--color-redpencil); stroke-width: 3.5; stroke-linecap: round; }
.rs-start, .rs-fermata-label { font-family: var(--font-hand); font-size: 24px; fill: var(--color-redpencil); }
.rs-fermata { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
.rs-fermata-dot { fill: var(--color-ink); }
.has-motion .road__staff.is-playing .rn { animation: note-drop .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 150ms); }
.has-motion .road__staff.is-playing .rs-ring { stroke-dasharray: 1; animation: ring-draw .6s ease-out .85s both; }
.has-motion .road__staff.is-playing .rs-start { animation: fade-in .3s ease 1.2s both; }
@keyframes note-drop { from { transform: translateY(-44px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.road__list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1.5px solid var(--color-ink); counter-reset: stage; }
.road__list li { counter-increment: stage; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; column-gap: 10px; padding: 11px 0; border-bottom: 1.5px dashed var(--color-staffline); }
.road__list li::before { content: counter(stage); grid-row: span 2; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.2; color: var(--color-mahogany); }
.road__list li:first-child::before { content: ""; width: 1.4em; height: 1.4em; margin-top: 2px; border: 2.5px solid var(--color-redpencil); border-radius: 50% 46% 52% 48%; }
.road__list b { font-weight: 700; }
.road__period { align-self: start; padding: 0 10px; border-radius: 99px; background: var(--color-tint); color: var(--color-mahogany); font-weight: 700; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.road__desc { grid-column: 2 / -1; font-size: .95rem; color: var(--color-muted); }
.road__list .is-fermata b::after { content: "연주회"; margin-left: 8px; padding: 0 8px; border-radius: 99px; background: var(--color-redpencil); color: #fff; font-size: .75rem; vertical-align: .15em; }

.month { margin-top: 24px; }
.month__title { font-family: var(--font-hand); font-weight: 400; font-size: 1.6rem; margin-bottom: 10px; }
.month__bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1.5px solid var(--color-ink); }
.month__bars li { padding: 10px 2px 12px; border-bottom: 1.5px solid var(--color-staffline); font-weight: 600; }
.month__no { display: block; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; color: var(--color-redpencil); font-weight: 400; }
.road__note { margin-top: 18px; font-size: .9rem; color: var(--color-muted); }
.road__note b { color: var(--color-ink); }

/* ========== 미: 첫 수업까지 네 마디 ========== */
.bars { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.bars__m { position: relative; padding: 18px 4px 22px; border-top: 2px solid var(--color-ink); }
.bars__m:last-child { border-bottom: 6px double var(--color-ink); }
.bars__no { display: block; font-weight: 800; font-size: .85rem; color: var(--color-mahogany); margin-bottom: 2px; }
.bars__m h3 { font-family: var(--font-hand); font-weight: 400; font-size: 1.75rem; line-height: 1.2; margin-bottom: 6px; }
.bars__m p { color: #463F38; }
.trial__actions { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: center; }
.trial__note { width: 100%; font-size: .92rem; color: var(--color-muted); margin-top: 4px; }

/* ========== 파: 선생님과 연습실 ========== */
.room__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.room__grid figure, .map { margin: 0; }
.teacher svg, .corridor svg, .map svg { width: 100%; height: auto; border: 1.5px solid var(--color-ink); border-radius: 6px; }
.t-bg { fill: #EFE8DA; }
.t-piano { fill: var(--color-ink); }
.t-person { fill: #C9BFAE; }
.teacher figcaption { display: grid; gap: 4px; margin-top: 14px; }
.teacher__name { font-size: 1.1rem; }
.teacher__career { color: var(--color-muted); }
.teacher__quote { color: var(--color-ink); font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.45; letter-spacing: -.02em; margin-top: 6px; }
.c-wall { fill: #F3EDE1; }
.c-floor { fill: #D9CBB2; }
.c-door rect:first-child { fill: #9A5A3A; stroke: var(--color-ink); stroke-width: 2; }
.c-door--lesson rect:first-child { fill: var(--color-mahogany); }
.c-win { fill: #FFF6DA !important; stroke: var(--color-ink); stroke-width: 2; }
.c-door text { font-family: var(--font); font-weight: 700; font-size: 14px; text-anchor: middle; fill: var(--color-cream-text); }
.c-door circle { fill: var(--color-brass); }
.c-door .c-kid { fill: var(--color-ink); }
.c-upright { fill: #3A2A22; }
.c-lamp { fill: #F4C25B; }
.corridor figcaption, .map figcaption { margin-top: 10px; font-size: .92rem; color: var(--color-muted); }
.notebook h3, .recital h3 { font-family: var(--font-hand); font-weight: 400; font-size: 1.8rem; line-height: 1.2; margin-bottom: 8px; }
.notebook > p { color: #463F38; }
.notebook__page { margin-top: 14px; padding: 12px 18px 14px; background: var(--color-ivory) repeating-linear-gradient(to bottom, transparent 0 39px, #E3DCCB 39px 40px); border: 1.5px solid var(--color-ink); border-radius: 3px; }
.notebook__song { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-hand); font-size: 1.35rem; line-height: 40px; }
.notebook__song span { color: var(--color-redpencil); letter-spacing: .08em; white-space: nowrap; font-family: var(--font); font-size: .95rem; }
.notebook__song i { font-style: normal; color: #B3A998; }
.recital { align-self: start; padding: 22px 22px 20px; background: var(--color-ivory); border: 1.5px solid var(--color-ink); border-radius: 3px; box-shadow: 6px 6px 0 var(--color-tint); }
.recital > p { color: #463F38; }
.recital__program { margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed var(--color-staffline); font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.5; color: var(--color-mahogany) !important; }
.recital__program span:first-child { display: block; font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--color-muted); }

/* ========== 솔: 시간표 ========== */
.timetable { max-width: 860px; }
.tt, .price { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tt th, .tt td, .price th, .price td { padding: 13px 12px; text-align: left; border-bottom: 1.5px solid var(--color-staffline); vertical-align: middle; }
.tt thead th, .price thead th { border-bottom: 2px solid var(--color-ink); font-size: .9rem; color: var(--color-muted); font-weight: 700; }
.tt thead small, .price thead small { display: block; font-weight: 500; font-size: .78rem; }
.tt tbody th { font-family: var(--font-hand); font-weight: 400; font-size: 1.5rem; line-height: 1; width: 4.4em; white-space: nowrap; }
.price thead th:last-child { text-align: right; }
.tt td { font-weight: 600; }
.tt__off td { color: var(--color-muted); font-weight: 500; }
.tt tr.is-today { background: #FBE6E1; }
.tt tr.is-today th::after { content: "오늘"; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--color-redpencil); color: #fff; font-family: var(--font); font-size: .72rem; font-weight: 700; vertical-align: .3em; }
.tt__notes { margin: 18px 0 0; padding-left: 1.2em; color: var(--color-muted); font-size: .95rem; }
.tt__notes li + li { margin-top: 4px; }

/* ========== 라: 수강료 ========== */
.fee__grid, .faq__grid, .visit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 56px; }
.price tbody th { font-weight: 700; }
.price td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.price__trial td:last-child { color: var(--color-redpencil); }
.books { width: 100%; max-width: 300px; height: auto; margin-top: 28px; }
.bk rect { stroke: var(--color-ink); stroke-width: 2; }
.bk text { font-family: var(--font); font-weight: 700; font-size: 14px; text-anchor: middle; fill: #fff; }
.bk text.bk-dark { fill: var(--color-ink); font-size: 12px; }
.bk-shelf { fill: var(--color-mahogany); }
.bk-note { font-family: var(--font-hand); font-size: 24px; fill: var(--color-redpencil); }
.fee__note { margin-top: 16px; font-size: .9rem; color: var(--color-muted); }

/* ========== 시: 자주 묻는 질문 ========== */
.faq__list { border-top: 2px solid var(--color-ink); }
.qa { border-bottom: 1.5px solid var(--color-staffline); }
.qa h3 { font-size: 1.05rem; }
.qa button { position: relative; width: 100%; padding: 18px 44px 18px 0; border: 0; background: none; font: inherit; font-weight: 700; text-align: left; color: inherit; cursor: pointer; line-height: 1.5; }
.qa button::after { content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--color-ink); transform: rotate(-20deg); transition: background-color .2s; }
.qa button[aria-expanded="true"]::after { background: var(--color-redpencil); }
.qa__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s ease; }
.js .qa__panel { grid-template-rows: 0fr; }
.js .qa.is-open .qa__panel { grid-template-rows: 1fr; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 0 20px; color: #463F38; }

/* ========== 높은 도: 오시는 길 ========== */
.info { margin: 0 0 24px; border-top: 1.5px solid var(--color-ink); }
.info div { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; padding: 11px 0; border-bottom: 1.5px solid var(--color-staffline); }
.info dt { font-weight: 700; color: var(--color-mahogany); }
.info dd { margin: 0; }
.visit__actions { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.m-bg { fill: #EFE8DA; }
.m-road { stroke: var(--color-ivory); stroke-width: 34; fill: none; }
.m-school { fill: #D6E3C8; stroke: var(--color-ink); stroke-width: 2; }
.m-gate { fill: var(--color-ink); }
.m-shop { fill: #F3DCB4; stroke: var(--color-ink); stroke-width: 2; }
.m-sign rect { fill: var(--color-ivory); stroke: var(--color-ink); stroke-width: 1.5; }
.m-label { font-family: var(--font); font-weight: 700; font-size: 16px; fill: var(--color-ink); }
.m-sub { font-family: var(--font); font-size: 13px; fill: var(--color-muted); }
.m-walk { fill: none; stroke: var(--color-redpencil); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; stroke-linejoin: round; }

/* ========== 푸터 ========== */
.site-footer { padding: 40px 0 44px; background: var(--color-tint); font-size: var(--fs-small); color: var(--color-muted); }
.site-footer__inner { display: grid; gap: 18px; }
.site-footer__logo { font-family: var(--font-hand); font-size: 1.6rem; color: var(--color-ink); margin-bottom: 6px; }
.site-footer__biz { line-height: 1.9; }
.site-footer__links { margin-top: 8px; display: flex; gap: 16px; }
.site-footer__links .strong { font-weight: 800; color: var(--color-ink); }
.site-footer__credit a { font-weight: 700; color: var(--color-ink); }

/* ========== 화면 아래 고정 건반 ========== */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--color-mahogany); box-shadow: 0 -6px 18px -8px rgba(38,33,29,.45); }
.dock__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; height: var(--dock-h); padding: 0 20px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--color-cream-text); }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo b { font-family: var(--font-hand); font-weight: 400; font-size: 1.55rem; line-height: 1; letter-spacing: 0; }
.logo small { display: block; font-family: var(--font); font-size: .72rem; font-weight: 600; margin-top: 3px; color: rgba(245,232,204,.75); }

.keys { position: relative; align-self: stretch; display: flex; width: 100%; max-width: 960px; justify-self: center; border-top: 5px solid #8E1F2A; /* 건반 펠트 */ }
.key {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 2px 8px; text-decoration: none; color: var(--color-ink);
  background: linear-gradient(to bottom, #FFFDF6 0%, #F6F1E5 100%); border-right: 1px solid #C9BFAE; border-radius: 0 0 5px 5px;
  box-shadow: inset 0 -5px 0 #E2DACA; transition: background-color .15s ease, box-shadow .15s ease;
}
.key:first-child { border-left: 1px solid #C9BFAE; }
.key:hover { background: #F7F2E6; }
.key__sol { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1; color: var(--color-mahogany); transition: background-color .15s ease, color .15s ease; }
.key__label { margin-top: 2px; font-size: .82rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.key__short { display: none; }
.key.is-active { background: #ECE4D3; box-shadow: inset 0 9px 10px -6px rgba(38,33,29,.45), inset 0 -2px 0 #D5CBB7; }
.key.is-active .key__sol { background: var(--color-redpencil); color: #fff; }
.key.is-active .key__label { color: var(--color-mahogany-deep); }
.key.is-pressed { background: #E4DBC8; }
.bkey { position: absolute; top: 0; left: calc(var(--b) * 12.5% - 3.6%); width: 7.2%; height: 54%; z-index: 2; background: linear-gradient(to bottom, #3B3531, var(--color-ebony)); border-radius: 0 0 4px 4px; box-shadow: inset 0 -6px 0 #000, 0 2px 3px rgba(0,0,0,.35); }
.sound-on .bkey { cursor: pointer; }
.bkey.is-pressed { box-shadow: inset 0 -2px 0 #000, 0 1px 2px rgba(0,0,0,.35); }

.sound { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1.5px solid rgba(245,232,204,.55); border-radius: 99px; background: transparent; color: var(--color-cream-text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; white-space: nowrap; }
.sound svg { width: 20px; height: 20px; }
.sound .sound__on { display: none; }
.sound[aria-pressed="true"] { background: var(--color-cream-text); color: var(--color-mahogany-deep); }
.sound[aria-pressed="true"] .sound__on { display: inline; }
.sound[aria-pressed="true"] .sound__off { display: none; }
.dock__tel { display: inline-flex; align-items: center; gap: 6px; color: var(--color-cream-text); font-weight: 800; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dock__tel svg { width: 18px; height: 18px; }
.dock__cta { min-height: 46px; padding: 0 20px; font-size: .95rem; border-color: var(--color-mahogany-deep); box-shadow: 0 4px 0 var(--color-mahogany-deep); }
.dock__cta:hover { box-shadow: 0 3px 0 var(--color-mahogany-deep); }
.quickbar { display: none; }
body.nav-hidden .dock { visibility: hidden; }

/* ========== 화면 크기 ========== */
@media (min-width: 640px) {
  .month__bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .month__bars li:nth-child(odd) { padding-right: 14px; border-right: 2px solid var(--color-ink); }
  .month__bars li:nth-child(even) { padding-left: 14px; }
}

@media (min-width: 900px) {
  .hero { padding-top: 40px; min-height: calc(100svh - var(--dock-h) - var(--banner-h)); display: flex; }
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 48px; align-items: center; }
  .hero__copy { padding-bottom: 48px; }
  .hero__art { align-self: end; }
  .hero__composer { display: block; }

  .movement > .container > .score-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em); column-gap: 56px; align-items: end; }
  .movement > .container > .score-head .tempo { grid-column: 1; }
  .movement > .container > .score-head h2 { grid-column: 1; margin-bottom: 0; }
  .movement > .container > .score-head .score-head__lead { grid-column: 2; grid-row: 1 / 3; }

  .part { grid-template-columns: 190px minmax(0, 1fr) 300px; grid-template-rows: auto auto; column-gap: 36px; row-gap: 8px; align-items: start; }
  .part__name { grid-row: 1 / 3; }
  .part__body { grid-row: 1 / 3; }
  .mini-kb { grid-column: 3; grid-row: 1; }
  .part__kb { grid-column: 3; grid-row: 2; }

  .road { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .road__sheet { padding: 30px 34px 28px; }

  .bars { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 2px solid var(--color-ink); border-top: 1.5px solid var(--color-staffline); border-bottom: 1.5px solid var(--color-staffline); }
  .bars__m { padding: 20px 22px 26px; border-top: 0; border-right: 2px solid var(--color-ink); }
  .bars__m:last-child { border-bottom: 0; border-right: 7px double var(--color-ink); }

  .room__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 36px 40px; }
  .fee__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .faq__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .visit__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 1200px) {
  .month__bars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .month__bars li { padding: 10px 14px 12px !important; border-right: 2px solid var(--color-ink); }
  .month__bars li:last-child { border-right: 6px double var(--color-ink); }
}

/* 태블릿: 건반 자리를 넓히려고 오른쪽을 줄인다 */
@media (max-width: 1180px) {
  .dock__tel span { display: none; }
  .dock__tel { width: 44px; height: 44px; justify-content: center; border: 1.5px solid rgba(245,232,204,.55); border-radius: 50%; }
  .sound .sound__text { display: none; }
  .sound { width: 44px; padding: 0; justify-content: center; }
  .dock__inner { gap: 12px; padding: 0 14px; }
}
@media (max-width: 1000px) {
  .logo small { display: none; }
  .key__label { font-size: .76rem; }
}

/* 휴대폰: 건반 띠 + 연락 바를 아래에 쌓는다 (서로 겹치지 않게) */
@media (max-width: 767px) {
  :root { --dock-h: 110px; --fs-body: 1rem; }
  .sample-banner__inner { font-size: .8rem; }
  .hero { padding-top: 26px; }
  .hero__title { margin-bottom: 14px; }
  .hero__lead { margin-bottom: 20px; }
  .hero__actions { margin-bottom: 26px; }
  .hero__actions .btn { flex: 1 1 auto; padding: 0 18px; }
  .hero__art { margin: 0 -6px; }

  .dock__inner { grid-template-columns: 40px minmax(0, 1fr) 40px; height: 54px; gap: 0; padding: 0; }
  .logo { justify-content: center; height: 100%; }
  .logo svg { width: 28px; height: 28px; }
  .logo b { display: none; }
  .keys { border-top-width: 4px; max-width: none; }
  .key { padding: 0 0 4px; border-radius: 0 0 4px 4px; box-shadow: inset 0 -3px 0 #E2DACA; }
  .key__sol { width: 19px; height: 19px; font-size: .95rem; }
  .key__label { font-size: .68rem; margin-top: 1px; }
  .key__long { display: none; }
  .key__short { display: inline; }
  .bkey { height: 46%; }
  .sound { width: 40px; height: 100%; border: 0; border-radius: 0; }
  .sound[aria-pressed="true"] { background: var(--color-mahogany-deep); color: var(--color-cream-text); }
  .dock__tel, .dock__cta { display: none; }
  .quickbar { display: grid; grid-template-columns: 1fr 1fr 1.7fr; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--color-staffpaper); border-top: 1.5px solid var(--color-ink); }
  .quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--color-ink); border-right: 1.5px solid var(--color-staffline); }
  .quickbar svg { width: 18px; height: 18px; }
  .quickbar__kakao svg { color: #3A1D1D; }
  .quickbar .quickbar__cta { background: var(--color-redpencil); color: #fff; border-right: 0; }

  .staff__notes .n:nth-last-child(n+4) { display: none; }
  .road__hint { display: block; }
  .road__sheet { padding: 22px 16px 20px; margin: 0 -6px; }
  .tt th, .tt td, .price th, .price td { padding: 11px 6px; }
  .tt tbody th { width: 2.6em; }
  .staff__caption { font-size: 1.12rem; white-space: nowrap; }
  .teacher { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: start; }
  .teacher figcaption { margin-top: 0; }
  .system { padding-left: 30px; }
  .system__brace { width: 20px; }
}

/* 동작 줄이기 — 0s 가 아니라 .01ms (끝 이벤트가 그대로 발생하게) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* 3단계(색·피드백)는 살린다 */
  .key, .key__sol, .chip > span, .qa__panel, .qa button::after, .sound, .btn { transition-duration: .2s !important; }
}