@charset "UTF-8";
/* Jamblea · 리허설 리드시트 — 2차 다듬기(2026-10-25)
   토큰(크기·간격·반경·그림자·이징) 한 체계, 모션 언어 "마디" 네 가지:
   1) 오선 그려지기  2) 리더 핀 '툭' 이동  3) 마디 단위 스태거 등장  4) 단계 번호 점등 */

:root {
  --paper: #fbf9ed; --muted: #f2f0e0; --ink: #0f1724; --secondary: #526071; --indigo: #143885;
  --navy: #09172e; --navy2: #122440; --lime: #b0fa1f; --limewash: #f3f9d8; --onlime: #090f14; --rec: #de241f;
  --stage-text: #e8edf7; --stage-muted: #b3c1d6; --stage-rule: #2c3b57; --footer: #04082b;
  --rule: rgba(20, 56, 133, .2); --rule-soft: rgba(20, 56, 133, .12); --line: #d7dbcc;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 글자 크기 6단계 */
  --fs-xs: 14px;
  --fs-s: 15px;
  --fs-body: clamp(17px, 16.5px + .14vw, 18px);
  --fs-h3: clamp(19px, 17.6px + .3vw, 22px);
  --fs-h2: clamp(30px, 24.6px + 1.4vw, 44px);
  --fs-display: clamp(40px, 28px + 3vw, 72px);
  /* 보조 크기(토큰에서 파생) */
  --fs-h2-s: clamp(26px, 22px + 1.1vw, 38px);
  --fs-h4: 18px;
  --fs-wordmark: clamp(64px, 46px + 4.6vw, 112px);
  --lh-body: 1.7;

  /* 간격 */
  --space-section: clamp(64px, 44px + 4.8vw, 112px);
  --space-chapter: clamp(28px, 20px + 1.8vw, 48px);
  --space-block: clamp(24px, 18px + 1.2vw, 40px);
  --gutter: 72px;   /* 여백 마디 번호 자리 */
  --page-x: 0px;

  /* 면 */
  --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(9, 23, 46, .08);
  --shadow-2: 0 1px 2px rgba(9, 23, 46, .06), 0 12px 32px -16px rgba(9, 23, 46, .4);

  /* 모션 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.25, .4, 1);
  --t-fast: 160ms; --t-mid: 240ms; --t-reveal: 560ms; --t-draw: 700ms;
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 104px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.025em; word-break: keep-all; }
p { text-wrap: pretty; line-height: var(--lh-body); }
h1, h2 { font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: 1.22; }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
::selection { background: var(--lime); color: var(--onlime); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.stage :focus-visible, .footer :focus-visible, .studio :focus-visible { outline-color: var(--lime); }
.follow-demo :focus-visible { outline-color: var(--indigo); }
#main:focus { outline: none; }
[hidden] { display: none !important; }
kbd { font: 500 .92em var(--mono); background: var(--paper); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-s); padding: 1px 6px; white-space: nowrap; color: var(--ink); }
.tip kbd { background: #fff; }

.wrap { width: min(1200px, 100% - var(--page-x) * 2); margin-inline: auto; padding-left: var(--gutter); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.small { font-size: var(--fs-xs); color: var(--secondary); }
.eyebrow { color: var(--indigo); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; }

.skip { position: absolute; z-index: 50; top: 8px; left: 20px; background: var(--navy); color: var(--paper); padding: 12px 20px; border-radius: var(--radius-s); clip-path: inset(50%); width: auto; height: 48px; overflow: hidden; white-space: nowrap; }
.skip:focus { position: fixed; clip-path: none; height: auto; overflow: visible; }

/* ---------- 헤더 ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(251, 249, 237, .96); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.site-header.is-scrolled, html:not(.js) .site-header { border-bottom-color: var(--rule); }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.brand img { border-radius: 10px; }
.brand > span:first-of-type { font: italic 600 36px/1 var(--serif); letter-spacing: -.04em; padding-top: 6px; }
.brand-ko { font-size: 12px; color: var(--secondary); margin-left: 5px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: var(--fs-xs); font-weight: 600; }
.nav-links > a { min-height: 44px; display: flex; align-items: center; }
.nav-links > a[aria-current] { color: var(--indigo); text-decoration: underline; text-underline-offset: 7px; }

/* ---------- 버튼·링크 ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 13px 26px; background: var(--lime); color: var(--onlime); font-size: 16px; font-weight: 700; line-height: 1.5; border-radius: var(--radius-pill); border: 1px solid transparent; box-shadow: var(--shadow-1); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.button:hover { background: #bcff3a; box-shadow: var(--shadow-2); }
.button:active { transform: scale(.98); box-shadow: var(--shadow-1); }
.nav-download { min-height: 44px; font-size: 13px; padding: 11px 20px; gap: 8px; }
.text-link { color: var(--indigo); display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-size: var(--fs-s); font-weight: 700; text-decoration: underline transparent; text-underline-offset: 5px; transition: text-decoration-color var(--t-fast) var(--ease); }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- 장(章) 머리 ---------- */
.chapter { position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: var(--space-chapter); min-height: 34px; }
.rehearsal-mark { font: italic 600 25px/1 var(--serif); display: inline-block; border: 1.5px solid var(--indigo); border-radius: var(--radius-s); color: var(--indigo); padding: 7px 14px 5px; white-space: nowrap; letter-spacing: -.02em; }
.bar-no { position: absolute; left: calc(var(--gutter) * -1); top: 9px; font: 500 12px/1.5 var(--mono); color: var(--secondary); font-variant-numeric: tabular-nums; }
.chapter-meta { margin-left: auto; color: var(--secondary); font-size: 12px; }
.sheet-section { padding-top: var(--space-section); padding-bottom: var(--space-section); scroll-margin-top: 20px; }

/* ---------- 히어로 ---------- */
.hero { padding-top: 36px; position: relative; isolation: isolate; }
.hero .chapter { margin-bottom: 18px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; min-height: 735px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 18px; background: var(--paper); }
.hero-identity { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; }
.hero-identity img { border-radius: 17px; width: 60px; height: 60px; }
.wordmark { font: italic 600 var(--fs-wordmark)/.9 var(--serif); letter-spacing: -.055em; padding-top: 12px; }
.hero-copy > .eyebrow { margin-bottom: 26px; }
.hero h1 { font-size: var(--fs-display); line-height: 1.14; letter-spacing: -.04em; margin-bottom: 24px; }
.hero-description { font-size: var(--fs-body); color: var(--secondary); max-width: 490px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta { font-size: 13px; color: var(--secondary); margin-top: 24px; letter-spacing: .02em; }
.hero-meta span { display: block; margin-top: 3px; }
.hero-figure { justify-self: center; position: relative; margin-top: 14px; margin-left: 20px; }
.phone { width: 300px; border: 6px solid #121e31; outline: 1px solid #657080; border-radius: 40px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-2); }
.phone img { width: 100%; height: auto; }
.hero-figure figcaption { margin-top: 20px; font-size: var(--fs-xs); color: var(--secondary); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.7; }
.line-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.side-note { position: absolute; left: calc(100% + 20px); top: 240px; writing-mode: vertical-rl; white-space: nowrap; color: var(--secondary); font-size: 11px; }
/* 오선: 다섯 줄, 좌→우로 그려진다 */
.hero-staff { position: absolute; z-index: -1; left: calc(var(--gutter) * -1); right: 0; top: calc(50% - 34px); height: 66px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hero-staff i { display: block; height: 1px; background: var(--indigo); opacity: .22; transform-origin: left; }
.cover-bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--rule); font-size: 12px; color: var(--secondary); }
.cover-bottom a { min-height: 44px; display: flex; align-items: center; gap: 20px; }

/* ---------- 장면 ---------- */
.scene-grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: 74px; }
.body-copy { margin-top: 24px; color: var(--secondary); font-size: var(--fs-body); }
.scene-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.scene-notes > div { border-top: 1px solid var(--rule); padding-top: 18px; display: flex; gap: 12px; }
.scene-notes p { font-size: 17px; color: var(--secondary); }
.scene-notes strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.memo-symbol { color: var(--indigo); font-size: 26px; line-height: 1.3; flex: 0 0 auto; }

/* ---------- 곡 작업실 띠 ---------- */
.preparation { background: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.preparation-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.preparation-top > p { font-size: var(--fs-body); color: var(--secondary); padding-bottom: 5px; }
.song-steps { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; padding: 0; margin: 0; position: relative; gap: 22px; }
.song-steps:before { content: ''; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: var(--indigo); opacity: .45; transform-origin: left; }
.song-steps li { position: relative; }
.song-steps li > span { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--muted); border: 1.5px solid var(--indigo); border-radius: 50%; font: 500 13px var(--mono); color: var(--indigo); margin-bottom: 17px; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.song-steps strong { font-size: var(--fs-h3); }
.song-steps p { font-size: var(--fs-xs); color: var(--secondary); margin-top: 5px; }
.prepare-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rule); gap: 30px; }
.prepare-foot > p { font-size: 17px; color: var(--secondary); }
.prepare-foot strong { color: var(--ink); }

/* ---------- 합주 무대(남색) ---------- */
.stage { background: var(--navy); color: var(--stage-text); }
.stage .chapter { margin-bottom: 40px; }
.stage .bar-no, .stage .chapter-meta { color: var(--stage-muted); }
.stage .rehearsal-mark { color: var(--lime); border-color: #5c7c52; }
.stage-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.stage-heading > p { color: var(--stage-muted); font-size: var(--fs-body); max-width: 440px; }
.follow-demo { background: var(--paper); color: var(--ink); border-radius: var(--radius-m); padding: 28px 32px 20px; box-shadow: 0 14px 0 -6px #26354d, var(--shadow-2); }
.demo-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.demo-title > div { display: flex; align-items: center; gap: 18px; }
.demo-title h3 { font-size: clamp(22px, 19px + .65vw, 28px); }
.demo-title > .mono { color: var(--secondary); }
.follow-demo .rehearsal-mark { color: var(--indigo); border-color: var(--indigo); font-size: 21px; }
.measure-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.measure { position: relative; border: 1px solid var(--line); background: var(--muted); padding: 16px 16px 12px; border-radius: var(--radius-s); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.measure.leader-here { background: var(--limewash); border-color: #72874a; box-shadow: inset 4px 0 var(--lime); }
.measure-no { font-size: 11px; color: var(--secondary); display: block; margin-bottom: 6px; }
.chord { font-size: 18px; display: block; color: var(--ink); font-weight: 500; }
.notation { width: 100%; height: auto; display: block; margin: 12px 0 16px; border-radius: 3px; }
.lyric { font-size: var(--fs-xs); color: var(--secondary); display: block; text-align: center; }
.position-pins { display: flex; justify-content: center; gap: 5px; margin-top: 16px; min-height: 24px; }
.position-pins > span, .pin-float { font-size: 12px; font-weight: 700; min-width: 40px; line-height: 24px; text-align: center; border-radius: 3px; }
.position-pins > span { visibility: hidden; }
.leader-pin { background: var(--lime); color: var(--onlime); }
.member-pin { background: var(--indigo); color: #fff; }
.leader-here .leader-pin, .member-here .member-pin { visibility: visible; }
/* JS가 있으면 핀은 떠다니며 마디로 '툭' 이동한다 */
.js .position-pins > span { visibility: hidden; }
.pin-float { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform var(--t-mid) var(--ease-snap); }
.interactive-controls { display: none; align-items: center; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.js .interactive-controls { display: flex; }
.interactive-controls .button { min-height: 48px; font-size: 16px; padding: 10px 24px; }
.follow-toggle { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 0; min-height: 48px; font-size: 16px; font-weight: 600; }
.follow-toggle > span:last-child { color: var(--secondary); font-size: var(--fs-xs); }
.toggle-track { display: block; background: var(--indigo); width: 35px; height: 21px; border-radius: 20px; position: relative; transition: background var(--t-fast) var(--ease); }
.toggle-track:after { content: ''; position: absolute; top: 3px; left: 17px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: transform var(--t-fast) var(--ease); }
.follow-toggle[aria-pressed=false] .toggle-track { background: var(--secondary); }
.follow-toggle[aria-pressed=false] .toggle-track:after { transform: translateX(-14px); }
.member-picker { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-left: auto; }
.member-buttons { display: flex; gap: 6px; }
.member-buttons button { border: 1px solid var(--secondary); background: transparent; width: 44px; height: 44px; border-radius: var(--radius-s); font: 500 13px var(--mono); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.member-buttons button[aria-pressed=true] { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.demo-status { font-size: 16px; color: var(--secondary); margin-top: 14px; min-height: 22px; }
.demo-caption { color: var(--stage-muted); font-size: var(--fs-xs); margin: 27px 0 24px; line-height: 1.7; }
.stage-bottom { display: flex; justify-content: space-between; align-items: center; gap: 36px; border-top: 1px solid var(--stage-rule); padding-top: 24px; }
.stage-bottom > p { font-size: 17px; color: var(--stage-muted); }
.stage .text-link { color: var(--lime); }
/* JS 없을 때: 팔로우 전·후 두 컷 */
.nojs-states { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.js .nojs-states { display: none; }
.static-cut > strong { font-size: 16px; }
.static-cut > p { font-size: var(--fs-s); color: var(--secondary); margin: 6px 0 14px; }
.static-score { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.static-score > div { padding: 9px 6px; border: 1px solid var(--rule); border-radius: 3px; background: var(--muted); min-width: 0; }
.static-score > div > span { display: block; font-size: 10px; color: var(--secondary); margin-bottom: 7px; }
.static-score strong { display: block; font-size: 11px; font-weight: 500; white-space: nowrap; }
.static-score > div > div { min-height: 44px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.static-score b { padding: 3px 6px; border-radius: 3px; font-size: 10px; }
.static-leader { background: var(--lime); color: var(--onlime); }
.static-member { background: var(--indigo); color: #fff; }

/* ---------- 악보 편집 지면 ---------- */
.feature-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 80px; align-items: center; }
.editor-figure { position: relative; background: var(--muted); padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius-m); }
.screen-crop { overflow: hidden; border-radius: var(--radius-s); }
.editor-crop { height: 600px; position: relative; background: var(--paper); }
.editor-crop img { width: 100%; transform: translateY(-27px); }
.editor-figure figcaption { font-size: var(--fs-xs); color: var(--secondary); margin-top: 20px; line-height: 1.7; }
.editor-caption { display: block; font-size: 11px; color: var(--indigo); margin-top: 5px; }
.feature-copy > p { font-size: var(--fs-body); color: var(--secondary); margin-top: 24px; }
.feature-line { display: flex; gap: 18px; padding-top: 24px; margin-top: 22px; border-top: 1px solid var(--rule); }
.feature-line > .mono { color: var(--indigo); font-size: 12px; padding-top: 5px; flex: 0 0 auto; white-space: nowrap; }
.feature-line h3 { font-size: var(--fs-h4); }
.feature-line p { font-size: 17px; color: var(--secondary); margin-top: 8px; }
.part-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; margin-top: 20px; border-bottom: 1px solid var(--rule); }
.part-preview > div { display: flex; flex-direction: column; gap: 8px; }
.part-preview span { font-size: 12px; color: var(--secondary); }
.part-preview strong { font: 500 21px var(--mono); color: var(--indigo); }
.feature-copy > .text-link { margin-top: 22px; }
.score-section { border-bottom: 1px solid var(--rule); }

/* ---------- 녹음 ---------- */
.record-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.record-top p { margin-top: 20px; color: var(--secondary); font-size: var(--fs-body); }
.studio { background: var(--navy); color: var(--stage-text); border-radius: var(--radius-m); padding: 28px 30px; box-shadow: var(--shadow-2); }
.studio-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--stage-rule); gap: 20px; }
.studio-head h3 { font-size: 21px; display: flex; align-items: center; gap: 12px; }
.studio-head > .mono { color: var(--stage-muted); }
.rec-dot { width: 8px; height: 8px; background: var(--rec); border-radius: 50%; display: inline-block; }
.track-row { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--stage-rule); font-size: 13px; }
.track-badge { border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--indigo); font: 500 14px var(--mono); }
.track-row > strong { width: 48px; font-size: 14px; }
.take-label { color: var(--stage-muted); font-size: 12px; }
.track-wave { flex: 1; height: 30px; background: repeating-linear-gradient(90deg, #b0fa1f 0, #b0fa1f 2px, transparent 2px, transparent 6px); clip-path: polygon(0 43%, 5% 38%, 8% 49%, 10% 12%, 15% 35%, 21% 25%, 25% 45%, 30% 8%, 35% 38%, 40% 29%, 45% 15%, 50% 40%, 60% 13%, 65% 40%, 70% 28%, 75% 5%, 80% 30%, 85% 42%, 90% 24%, 95% 45%, 100% 35%, 100% 65%, 95% 55%, 90% 76%, 85% 58%, 80% 70%, 75% 95%, 70% 72%, 65% 60%, 60% 87%, 50% 60%, 45% 85%, 40% 71%, 35% 62%, 30% 92%, 25% 55%, 21% 75%, 15% 65%, 10% 88%, 8% 51%, 5% 62%, 0 57%); transform-origin: left; }
.track-tools { border: 1px solid #61728c; display: inline-flex; gap: 14px; padding: 5px 12px; font-family: var(--mono); border-radius: var(--radius-s); }
.track-tools span { color: var(--lime); }
.gain, .pan { font-size: 11px; color: var(--stage-muted); display: flex; flex-direction: column; gap: 5px; }
.gain b, .pan b { font-size: 12px; font-weight: 500; color: var(--stage-text); }
.studio-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: var(--stage-muted); gap: 20px; }
.studio-note { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.7; }
.export-list { margin-top: 28px; border-top: 1px solid var(--rule); }
.export-list > div { display: flex; align-items: center; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.export-list > div > .mono:first-child { color: var(--secondary); font-size: 12px; }
.export-list strong { font-size: 16px; }
.export-list > div > span:last-child { margin-left: auto; color: var(--secondary); font-size: 13px; text-align: right; }
.export-note { font-size: var(--fs-xs); color: var(--secondary); margin-top: 22px; line-height: 1.7; }

/* ---------- Watch ---------- */
.watch-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; align-items: center; }
.watch-layout p { margin-top: 24px; font-size: var(--fs-body); color: var(--secondary); }
.watch-layout .small { font-size: var(--fs-xs); margin-top: 14px; }
.watch-layout .text-link { margin-top: 18px; }
.watch-gallery { display: flex; gap: 20px; align-items: center; }
.watch-gallery figure { flex: 1; min-width: 0; }
.watch-frame { padding: 5px; border-radius: 40px; border: 1px solid #8993a3; background: var(--navy); box-shadow: var(--shadow-2); overflow: hidden; }
.watch-frame img { width: 100%; border-radius: 34px; }
.watch-gallery figcaption { font-size: var(--fs-xs); text-align: center; color: var(--secondary); margin-top: 16px; }
.mobile-break { display: none; }
.airpods-note { display: flex; gap: 32px; align-items: center; border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 40px; }
.airpods-note > .mono { white-space: nowrap; color: var(--indigo); font-size: 12px; }
.airpods-note p { font-size: 17px; color: var(--secondary); }

/* ---------- 사용법 4단계: 번호가 켜진다 ---------- */
.how-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.how-list { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; list-style: none; margin: 38px 0 0; gap: 24px; }
.how-list li { border-top: 1px solid var(--indigo); padding-top: 20px; }
.how-list li > .mono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--indigo); border-radius: 50%; color: var(--indigo); font-size: 12px; margin-bottom: 16px; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.how-list h3 { font-size: 20px; }
.how-list p { font-size: 17px; color: var(--secondary); margin-top: 12px; }
.how-list a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--indigo); font-size: 14px; font-weight: 700; }

/* ---------- Outro: 환경·데이터·구매 ---------- */
.outro-section { border-top: 1px solid var(--rule); padding-bottom: 48px; }
.environment { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 38px; }
.environment > div > p:not(.small) { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); padding: 14px 0; gap: 20px; font-size: 17px; }
.environment span { font-size: 13px; color: var(--secondary); }
.environment .small { margin-top: 18px; font-size: var(--fs-body); }
.data-table { border-top: 1px solid var(--indigo); }
.data-table > [role=row] { display: grid; grid-template-columns: 235px 1fr; gap: 24px; border-bottom: 1px solid var(--rule); padding: 22px 0; }
.data-table strong { font-size: 17px; color: var(--indigo); }
.data-table p { font-size: 17px; color: var(--secondary); }
.data-note { max-width: 880px; font-size: 16px; color: var(--secondary); margin-top: 22px; }
.privacy-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 30px; }
.privacy-foot > p { font-size: 13px; color: var(--secondary); }
.privacy-foot .text-link { font-size: 13px; }
.purchase { margin-top: 70px; padding: 38px 0 30px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.purchase h3 { font-size: clamp(30px, 24px + 1.3vw, 42px); line-height: 1.2; margin-top: 16px; font-weight: 800; }
.price { font-size: clamp(38px, 34px + .9vw, 46px); line-height: 1.2; letter-spacing: -.04em; font-weight: 700; font-variant-numeric: tabular-nums; }
.purchase .small { font-size: 13px; margin: 10px 0 20px; }
.purchase > div > p:last-child:not(.small) { font-size: 17px; color: var(--secondary); }

/* ---------- FAQ ---------- */
.faq-section { padding-top: 40px; padding-bottom: 72px; }
.faq-head { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.faq-head h2 { font-size: var(--fs-h2-s); }
.faq-list { border-top: 1px solid var(--indigo); }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 16px; font-weight: 600; padding: 16px 0; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 20px; color: var(--indigo); font-weight: 400; transition: transform var(--t-fast) var(--ease); }
details[open] > summary > span { transform: rotate(45deg); }
.answer { max-width: 760px; padding: 0 28px 22px 0; font-size: 17px; color: var(--secondary); }
.answer p + p { margin-top: 12px; }
.faq-section > .text-link { margin-top: 24px; font-size: 14px; }

/* ---------- 끝마디 ---------- */
.final-cta { text-align: center; padding-top: 70px; padding-bottom: 100px; position: relative; }
.final-cta > .rehearsal-mark { position: relative; background: var(--paper); }
.final-cta h2 { font-size: clamp(34px, 26px + 1.8vw, 52px); line-height: 1.2; margin: 30px 0; }
.final-cta > p { font-size: 13px; color: var(--secondary); margin-top: 22px; }
.end-staff { position: absolute; left: calc(var(--gutter) * -1); right: 0; top: 68px; z-index: -1; }
.end-staff i { display: block; height: 1px; background: var(--rule); margin-bottom: 10px; transform-origin: left; }
.end-staff b { position: absolute; right: 0; top: 0; height: 44px; width: 12px; border-left: 2px solid var(--indigo); border-right: 6px solid var(--indigo); }

/* ---------- 푸터 ---------- */
.footer { background: var(--footer); color: var(--stage-text); padding: 56px 0 24px; }
.footer .wrap { padding-left: 0; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 40px; }
.footer .footer-brand { font: italic 600 48px/1 var(--serif); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; letter-spacing: -.04em; }
.footer-brand span { font: 400 13px/1.75 var(--sans); letter-spacing: 0; color: var(--stage-muted); }
.footer-top nav { display: flex; gap: 28px; align-items: center; font-size: 13px; }
.footer a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom { border-top: 1px solid #2a3551; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--stage-muted); }
.footer-bottom > div { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--lime); }

/* ---------- UI 칩 ---------- */
.ui-chip { display: inline-block; border-radius: var(--radius-pill); padding: 3px 10px; background: #e5e8eb; color: var(--indigo); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; margin: 2px 0; vertical-align: baseline; }
.lime-chip { background: var(--lime); color: var(--onlime); }

/* ---------- 가이드: 이어지는 리허설 준비표 ---------- */
.guide-intro { padding-top: 44px; padding-bottom: 50px; }
.guide-intro .chapter { margin-bottom: 28px; }
.guide-intro h1 { font-size: var(--fs-display); line-height: 1.12; margin: 18px 0 24px; letter-spacing: -.035em; }
.guide-intro > p:not(.eyebrow) { color: var(--secondary); font-size: var(--fs-body); }
.guide-note { border-left: 2px solid var(--indigo); padding-left: 14px; margin-top: 24px; color: var(--secondary); font-size: var(--fs-xs); }
.guide-nav { position: sticky; top: 88px; z-index: 15; background: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.guide-nav > .wrap { display: flex; gap: 28px; align-items: center; padding-top: 5px; padding-bottom: 5px; }
.guide-nav a { display: inline-flex; align-items: center; min-height: 46px; min-width: 44px; font-size: 13px; white-space: nowrap; color: var(--secondary); font-weight: 600; text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); }
.guide-nav a[aria-current=location] { color: var(--indigo); text-decoration-color: currentColor; }
.guide-nav-toggle { display: none; }
.guide-page { scroll-padding-top: 160px; }
.guide-chapter { padding-top: 70px; padding-bottom: 70px; border-bottom: 1px solid var(--rule); scroll-margin-top: 170px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.guide-chapter-head { display: flex; gap: 24px; position: relative; margin-bottom: 38px; }
.guide-number { position: absolute; left: calc(var(--gutter) * -1); top: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--indigo); border-radius: 50%; color: var(--indigo); font-size: 12px; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.guide-chapter-head .rehearsal-mark { font-size: 22px; margin-bottom: 18px; }
.guide-chapter h2 { font-size: var(--fs-h2-s); line-height: 1.25; }
.guide-chapter-head p { font-size: 17px; color: var(--secondary); margin-top: 12px; max-width: 640px; }
.guide-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
.instruction-list { counter-reset: instruction; list-style: none; padding: 0; margin: 0; }
.instruction-list li { position: relative; padding-left: 34px; font-size: var(--fs-body); margin-bottom: 20px; line-height: 1.8; }
.instruction-list li:before { counter-increment: instruction; content: counter(instruction); position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border: 1px solid var(--indigo); border-radius: 50%; color: var(--indigo); font: 500 11px/20px var(--mono); text-align: center; }
.guide-visual { min-width: 0; background: var(--muted); padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-m); }
.guide-screen { max-width: 300px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-s); border: 1px solid var(--line); }
.guide-screen img { width: 100%; }
.guide-visual figcaption { font-size: var(--fs-xs); line-height: 1.7; color: var(--secondary); margin-top: 14px; }
.guide-visual .guide-screen + .ui-example { margin-top: 18px; }
.tip, .caution { font-size: 17px; line-height: 1.8; margin-top: 20px; padding: 15px 18px; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.tip { border-left: 2px solid var(--indigo); background: var(--muted); }
.tip strong { color: var(--indigo); display: block; margin-bottom: 4px; }
.caution { background: #fcefe3; border-radius: var(--radius-s); color: #6e4a2b; }
.caution strong { display: block; margin-bottom: 4px; color: #754623; }
.device-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; margin-top: 25px; font-size: 13px; }
.device-paths strong { color: var(--indigo); }
.device-paths p { color: var(--secondary); margin-top: 6px; }
.format-list { border-top: 1px solid var(--rule); margin-top: 24px; font-size: 13px; color: var(--secondary); }
.format-list p { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.format-list strong { color: var(--ink); display: inline-block; margin-right: 8px; }
.ui-example { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.ui-example:last-of-type { margin-bottom: 0; }
.ui-example-title { font-size: 19px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 14px; letter-spacing: -.025em; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--secondary); }
.mock-row > strong { font-weight: 600; color: var(--ink); text-align: right; }
.mock-row:last-child { border-bottom: 0; }
.mock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.mock-current { display: flex; align-items: center; gap: 14px; position: relative; background: var(--limewash); border-left: 3px solid var(--lime); padding: 20px 10px; margin: 20px 0; }
.mock-current .rehearsal-mark { font-size: 22px; }
.mock-current strong { font-size: 16px; }
.current-pin { background: var(--lime); color: var(--onlime); font-size: 11px; line-height: 1.5; border-radius: var(--radius-pill); padding: 4px 8px; position: absolute; right: 6px; top: -10px; font-weight: 700; }
.keyboard-tip { margin-top: 18px; }
.keyboard-tip summary, .guide-instructions details summary { font-size: 17px; }
.keyboard-tip .answer { line-height: 2.1; }
.guide-instructions details { margin-top: 20px; border-top: 1px solid var(--rule); }
.guide-instructions .answer { font-size: 17px; }
.guide-watch { display: flex; align-items: center; gap: 20px; padding: 10px 0 20px; }
.guide-watch .watch-frame { flex: 1; min-width: 0; border-radius: 34px; }
.cropped-find { max-height: 440px; }
#first .guide-screen { max-height: 440px; }
#band .guide-screen { max-height: 480px; }
.back-contents { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: max-content; min-width: 60px; min-height: 44px; margin: 18px 0 0 auto; color: var(--indigo); font-size: 13px; font-weight: 600; }
.support-note { margin-top: 36px; max-width: 680px; border-left: 2px solid var(--indigo); padding-left: 24px; }
.support-note h3 { font-size: 20px; }
.support-note p { font-size: 17px; color: var(--secondary); margin-top: 10px; }
.support-note .text-link { margin-top: 12px; }
.guide-end { padding-top: 80px; padding-bottom: 90px; }
.guide-end h2 { margin: 25px 0 30px; }
.guide-end > div { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* ---------- 404 ---------- */
.notfound { padding-top: 100px; padding-bottom: 140px; min-height: 70vh; }
.notfound > .mono { font-size: 18px; margin: 30px 0 14px; }
.notfound h1 { font-size: clamp(40px, 30px + 2.4vw, 64px); line-height: 1.2; margin-bottom: 24px; }
.notfound > p { color: var(--secondary); }
.notfound > div { display: flex; gap: 24px; align-items: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------- 모션 언어 ---------- */
/* 등장: html.js에서만 숨기고, opacity/transform만 움직인다. 그룹 안에서는 마디(70ms) 단위 스태거 */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* 히어로: 글과 CTA는 즉시, 비주얼만 600ms 안에 자리 잡고 오선이 좌→우로 그려진다 */
.js .hero-figure { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js.loaded .hero-figure { opacity: 1; transform: none; }
.js .hero-staff i { transform: scaleX(0); transition: transform var(--t-draw) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js.loaded .hero-staff i { transform: none; }
/* 곡 준비 띠: 선이 그려지고 번호가 차례로 켜진다 */
.js .song-steps:before { transform: scaleX(0); transition: transform var(--t-draw) var(--ease); }
.js .song-steps.in:before { transform: none; }
.js .song-steps:not(.in) li > span { border-color: var(--line); color: var(--secondary); }
.js .song-steps li > span { transition-delay: calc(120ms + var(--i, 0) * 110ms); }
/* 사용법·가이드 번호 점등 */
.js .how-list li:not(.in) > .mono, .js .guide-chapter-head:not(.in) .guide-number { border-color: var(--line); color: var(--secondary); }
.js .how-list li > .mono { transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.js .guide-chapter-head .guide-number { transition-delay: 240ms; }
/* 녹음 파형: 왼쪽부터 채워진다 */
.js .track-row:not(.in) .track-wave { transform: scaleX(0); }
.js .track-wave { transition: transform var(--t-draw) var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
/* 끝마디: 오선이 그려지고 종지선이 찍힌다 */
.js .end-staff:not(.in) i { transform: scaleX(0); }
.js .end-staff i { transition: transform var(--t-draw) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .end-staff:not(.in) b { opacity: 0; transform: translateX(-6px); }
.js .end-staff b { transition: opacity var(--t-mid) var(--ease) 600ms, transform var(--t-mid) var(--ease) 600ms; }

/* ---------- 반응형 ---------- */
@media (min-width: 1600px) { .hero-grid { min-height: 800px; } .phone { width: 320px; } }

@media (max-width: 1300px) {
  :root { --page-x: 48px; --gutter: 56px; }
  .nav, .footer .wrap { padding-left: 0; }
  .hero-grid { gap: 30px; }
  .hero-identity { gap: 16px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { padding: 13px 22px; font-size: 15px; }
  .scene-grid { gap: 44px; }
  .feature-grid { gap: 50px; }
  .watch-layout { gap: 30px; }
  .watch-gallery { gap: 14px; }
  .guide-row { gap: 48px; }
}

@media (max-width: 1000px) {
  :root { --page-x: 32px; --gutter: 40px; }
  .nav { height: 76px; }
  .brand-ko { display: none; }
  .nav-links { gap: 20px; }
  .nav-links > a:first-child { display: none; }
  .brand > span:first-of-type { font-size: 32px; }
  .bar-no { position: static; flex-shrink: 0; }
  .hero-grid { grid-template-columns: 1fr .8fr; gap: 30px; min-height: 660px; }
  .hero-identity { gap: 12px; }
  .hero-identity img { width: 46px; height: 46px; border-radius: 12px; }
  .hero-copy > .eyebrow { font-size: 13px; }
  .hero .phone { width: 245px; border-radius: 34px; }
  .hero-figure { margin-left: 0; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-meta { margin-top: 16px; }
  .side-note { display: none; }
  .scene-grid { grid-template-columns: 1fr; gap: 32px; }
  .scene-notes { gap: 20px 40px; }
  .song-steps { gap: 15px; }
  .song-steps strong { font-size: 19px; }
  .stage-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .stage-heading > p { max-width: 100%; }
  .follow-demo { padding: 22px; }
  .measure { padding: 14px 10px 10px; }
  .chord { font-size: 15px; }
  .position-pins { gap: 3px; }
  .position-pins > span, .pin-float { min-width: 36px; }
  .member-picker { margin-left: 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature-copy { order: -1; }
  .editor-figure { padding: 18px; max-width: 510px; width: 100%; }
  .editor-crop { height: 520px; }
  .feature-line h3 { font-size: 17px; }
  .feature-line { gap: 12px; margin-top: 16px; padding-top: 18px; }
  .record-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .track-row { gap: 12px; }
  .studio { padding: 24px; }
  .pan { display: none; }
  .studio-head > .mono { font-size: 11px; }
  .watch-layout { grid-template-columns: 1fr; gap: 32px; }
  .watch-gallery { gap: 30px; max-width: 570px; }
  .watch-frame { border-radius: 45px; }
  .watch-frame img { border-radius: 39px; }
  .how-list { grid-template-columns: 1fr 1fr; gap: 32px; }
  .environment { gap: 30px; }
  .environment > div > p:not(.small) { align-items: flex-start; flex-direction: column; gap: 4px; }
  .purchase { gap: 30px; }
  .data-table > [role=row] { grid-template-columns: 180px 1fr; }
  .footer-top nav { gap: 14px; flex-direction: column; align-items: flex-start; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; gap: 12px 25px; }
  .guide-nav { top: 76px; }
  .guide-nav > .wrap { gap: 24px; flex-wrap: wrap; padding-left: 0; }
  .guide-nav a { font-size: 12px; min-height: 44px; }
  .guide-number { position: static; flex-shrink: 0; margin-top: 6px; }
  .guide-row { gap: 30px; grid-template-columns: 1fr; }
  .guide-instructions { max-width: 680px; }
  .guide-visual { padding: 14px; width: 100%; max-width: 510px; justify-self: start; }
  .guide-screen { max-width: 340px; }
  .guide-chapter { scroll-margin-top: 185px; }
}

@media (max-width: 600px) {
  :root { --page-x: 20px; --gutter: 0px; }
  html { scroll-padding-top: 24px; }
  .site-header { position: relative; }
  .nav { height: 68px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .brand > span:first-of-type { font-size: 28px; }
  .nav-links { gap: 12px; }
  .nav-links > a:not(.nav-download) { display: none; }
  .nav-download { font-size: 12px; padding: 10px 14px; min-height: 44px; gap: 5px; }
  .nav-download > span { display: none; }
  .hero { padding-top: 26px; }
  .chapter { gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
  .bar-no { font-size: 11px; order: -1; }
  .chapter .rehearsal-mark { font-size: 21px; padding: 6px 11px 4px; }
  .chapter-meta { font-size: 11px; letter-spacing: 0; }
  .hero .chapter-meta, .guide-intro .chapter-meta { display: none; }
  .hero .chapter { margin-bottom: 28px; }
  .hero-grid { display: flex; flex-direction: column; gap: 34px; min-height: 0; align-items: stretch; }
  .hero-copy { padding-bottom: 0; }
  .hero-identity { gap: 12px; margin-bottom: 14px; }
  .hero-identity img { width: 44px; height: 44px; border-radius: 12px; }
  .wordmark { padding-top: 8px; }
  .hero-copy > .eyebrow { font-size: 12px; letter-spacing: .03em; margin-bottom: 20px; }
  .hero h1 { line-height: 1.2; letter-spacing: -.035em; margin-bottom: 20px; }
  .hero-description { max-width: 350px; }
  .desktop-break { display: none; }
  .hero-actions { margin-top: 22px; gap: 8px 16px; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero-actions .button { font-size: 16px; min-height: 50px; padding: 12px 20px; gap: 12px; }
  .hero-meta { font-size: 12px; line-height: 1.8; margin-top: 15px; }
  .hero-meta span { margin-top: 0; }
  .hero-figure { align-self: center; margin-top: 0; }
  .hero .phone { width: 260px; border: 5px solid #121e31; border-radius: 36px; }
  .hero-figure figcaption { margin-top: 15px; }
  .hero-staff { left: -20px; right: -20px; top: auto; bottom: 240px; opacity: 1; }
  .hero-staff i { opacity: .3; }
  .cover-bottom { margin-top: 26px; padding: 12px 0; font-size: 11px; gap: 15px; }
  .cover-bottom a { gap: 8px; }
  .scene-grid { gap: 25px; }
  .body-copy { margin-top: 18px; }
  .scene-notes { grid-template-columns: 1fr; gap: 0; }
  .scene-notes > div { padding: 17px 0; gap: 12px; }
  .scene-notes > div:last-child { padding-bottom: 0; }
  .scene-notes strong { font-size: 15px; margin-bottom: 3px; }
  .memo-symbol { font-size: 24px; }
  .preparation-top { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
  .song-steps { gap: 8px; }
  .song-steps:before { top: 18px; left: 18px; right: 18px; }
  .song-steps li > span { width: 36px; height: 36px; font-size: 11px; margin-bottom: 13px; }
  .song-steps strong { font-size: 17px; }
  .song-steps p { font-size: 12px; margin-top: 5px; line-height: 1.6; }
  .prepare-foot { margin-top: 28px; padding-top: 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .stage .chapter { margin-bottom: 28px; }
  .stage-heading { gap: 18px; margin-bottom: 26px; }
  .follow-demo { padding: 18px 14px 16px; border-radius: 6px; }
  .demo-title { align-items: flex-start; gap: 15px; flex-direction: column; margin-bottom: 20px; }
  .demo-title > div { gap: 12px; }
  .demo-title > .mono { font-size: 11px; }
  .follow-demo .rehearsal-mark { font-size: 20px; padding: 5px 10px 3px; }
  .measure-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .measure { padding: 12px 10px 10px; }
  .measure-no { font-size: 10px; }
  .chord { font-size: 16px; }
  .position-pins { margin-top: 12px; }
  .interactive-controls { gap: 10px 18px; margin-top: 20px; }
  .interactive-controls .button { padding: 10px 18px; min-height: 44px; gap: 10px; }
  .follow-toggle { gap: 6px; min-height: 44px; }
  .toggle-track { width: 31px; height: 19px; }
  .toggle-track:after { width: 13px; height: 13px; left: 15px; }
  .follow-toggle[aria-pressed=false] .toggle-track:after { transform: translateX(-12px); }
  .member-picker { width: 100%; justify-content: space-between; padding-top: 4px; }
  .demo-status { line-height: 1.7; margin-top: 10px; }
  .demo-caption { margin: 23px 0 18px; }
  .stage-bottom { gap: 14px; flex-direction: column; align-items: flex-start; padding-top: 20px; }
  .nojs-states { grid-template-columns: 1fr; gap: 20px; }
  .static-score { grid-template-columns: repeat(2, 1fr); }
  .static-score strong { font-size: 14px; }
  .static-score b { font-size: 12px; }
  .static-score > div > div { min-height: 42px; }
  .feature-grid { display: flex; flex-direction: column; gap: 28px; }
  .feature-copy { order: -1; }
  .feature-copy > p { margin-top: 20px; }
  .feature-line { margin-top: 20px; padding-top: 20px; }
  .part-preview { margin-top: 20px; gap: 12px; }
  .part-preview strong { font-size: 20px; }
  .editor-figure { width: 100%; padding: 18px; }
  .editor-crop { height: 415px; }
  .editor-crop img { transform: translateY(-24px); }
  .feature-copy > .text-link { margin-top: 14px; }
  .record-top { margin-bottom: 22px; gap: 12px; }
  .record-top p { margin-top: 18px; }
  .studio { padding: 18px 16px; border-radius: 6px; }
  .studio-head { align-items: flex-start; flex-direction: column; gap: 10px; padding-bottom: 17px; }
  .studio-head h3 { font-size: 19px; }
  .track-row { gap: 10px; padding: 18px 0; }
  .track-badge { width: 28px; height: 28px; font-size: 11px; }
  .track-row > strong { width: 34px; font-size: 12px; }
  .take-label { font-size: 11px; white-space: nowrap; }
  .track-wave { height: 28px; min-width: 22px; }
  .track-tools { font-size: 10px; padding: 5px 7px; gap: 9px; }
  .gain, .pan { display: none; }
  .studio-bottom { flex-direction: column; align-items: flex-start; padding-top: 18px; gap: 12px; font-size: 12px; }
  .studio-bottom .ui-chip { padding: 6px 13px; }
  .export-list { margin-top: 22px; }
  .export-list > div { gap: 12px; padding: 14px 0; }
  .export-list strong { font-size: 14px; }
  .export-list > div > span:last-child { font-size: 12px; }
  .export-note { margin-top: 18px; }
  .watch-layout { gap: 27px; }
  .watch-layout p { margin-top: 20px; }
  .watch-layout .small { margin-top: 12px; }
  .watch-layout .text-link { margin-top: 12px; }
  .watch-gallery { gap: 12px; }
  .watch-frame { border-radius: 26px; padding: 3px; }
  .watch-frame img { border-radius: 22px; }
  .watch-gallery figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .mobile-break { display: block; }
  .airpods-note { margin-top: 26px; padding-top: 18px; gap: 15px; align-items: flex-start; }
  .airpods-note > .mono { padding-top: 4px; }
  .how-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .how-list { grid-template-columns: 1fr; margin-top: 26px; gap: 0; }
  .how-list li { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; padding: 20px 0 16px; border-top-color: var(--rule); }
  .how-list li:first-child { border-top-color: var(--indigo); }
  .how-list li > .mono { grid-row: 1 / span 3; margin: 0; }
  .how-list h3 { font-size: 18px; line-height: 1.3; align-self: center; min-height: 32px; display: flex; align-items: center; }
  .how-list p { margin-top: 8px; }
  .how-list a { margin-top: 6px; min-height: 40px; }
  .environment { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .environment > div > p:not(.small) { flex-direction: row; align-items: center; padding: 13px 0; gap: 15px; }
  .environment span { font-size: 12px; }
  .data-table > [role=row] { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .data-table strong { font-size: 15px; }
  .privacy-foot { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 14px; }
  .purchase { grid-template-columns: 1fr; gap: 24px; margin-top: 42px; padding-top: 26px; padding-bottom: 0; }
  .purchase .eyebrow { font-size: 12px; }
  .purchase h3 { margin-top: 12px; }
  .outro-section { padding-bottom: 25px; }
  .faq-section { padding-top: 28px; padding-bottom: 42px; }
  .faq-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .faq-head > .rehearsal-mark { font-size: 21px; }
  summary { font-size: 15px; line-height: 1.65; padding: 15px 0; min-height: 64px; gap: 18px; }
  .answer { padding-right: 14px; padding-bottom: 20px; }
  .faq-section > .text-link { margin-top: 16px; }
  .final-cta { padding-top: 46px; padding-bottom: 64px; }
  .final-cta h2 { margin: 24px 0; }
  .final-cta > .button { font-size: 16px; min-height: 50px; }
  .final-cta > p { margin-top: 18px; }
  .final-cta > .rehearsal-mark { font-size: 22px; }
  .end-staff { top: 44px; left: -20px; right: -10px; }
  .footer { padding: 36px 0 20px; }
  .footer-top { gap: 22px; flex-direction: column; padding-bottom: 24px; }
  .footer-brand { font-size: 40px; gap: 12px; }
  .footer-top nav { flex-direction: row; gap: 12px; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-bottom > div { gap: 8px 12px; }
  .footer-bottom > a { min-height: 44px; }
  /* 좁은 폭에서는 문장 안의 강제 줄바꿈을 풀고 자연스럽게 흐르게 한다 */
  p > br:not(.keep) { display: none; }
  /* 가이드 */
  .guide-intro { padding-top: 28px; padding-bottom: 34px; }
  .guide-intro .chapter { margin-bottom: 22px; }
  .guide-intro h1 { margin: 14px 0 20px; line-height: 1.2; }
  .guide-intro .eyebrow { font-size: 12px; }
  .guide-note { margin-top: 20px; }
  /* 모바일 목차: 접힌 한 줄(현재 장 + 목차 버튼), 펼치면 전체 링크 */
  .js .guide-nav { position: sticky; top: 0; }
  .js .guide-nav-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 20px; border: 0; background: transparent; text-align: left; }
  .guide-nav-current { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .guide-nav-current > .mono { color: var(--secondary); font-size: 11px; }
  .guide-nav-current > b { font-size: 15px; font-weight: 700; color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-nav-label { font-size: 13px; font-weight: 600; color: var(--secondary); white-space: nowrap; }
  .guide-nav-label > span { display: inline-block; color: var(--indigo); font-size: 16px; font-weight: 400; transition: transform var(--t-fast) var(--ease); }
  .guide-nav-toggle[aria-expanded=true] .guide-nav-label > span { transform: rotate(45deg); }
  .guide-nav > .wrap { width: 100%; padding: 4px 12px 10px; gap: 0 4px; flex-wrap: wrap; }
  .js .guide-nav:not(.open) > .wrap { display: none; }
  .guide-nav a { font-size: 14px; min-height: 44px; padding: 0 8px; }
  .guide-chapter { padding-top: 44px; padding-bottom: 44px; scroll-margin-top: 56px; }
  .guide-chapter-head { gap: 12px; margin-bottom: 24px; }
  .guide-number { margin-top: 4px; width: 28px; height: 28px; font-size: 11px; }
  .guide-chapter-head .rehearsal-mark { font-size: 20px; margin-bottom: 16px; }
  .guide-chapter h2 { line-height: 1.25; }
  .guide-row { display: flex; flex-direction: column; gap: 26px; }
  .guide-instructions { width: 100%; }
  .instruction-list li { padding-left: 31px; margin-bottom: 18px; line-height: 1.85; }
  .instruction-list li:before { width: 20px; height: 20px; font-size: 10px; line-height: 18px; top: 5px; }
  .tip, .caution { padding: 14px 15px; margin-top: 18px; }
  .device-paths { gap: 14px; margin-top: 20px; }
  .format-list { margin-top: 20px; }
  .guide-visual { width: 100%; padding: 17px; }
  .guide-screen { max-width: 340px; }
  .ui-example { padding: 16px; }
  .ui-example-title { font-size: 18px; padding-bottom: 13px; }
  .mock-row { padding: 12px 0; }
  .mock-actions { margin-top: 16px; gap: 7px; }
  .guide-watch { gap: 20px; padding: 4px 12px 18px; }
  .guide-watch .watch-frame { border-radius: 34px; }
  .guide-watch .watch-frame img { border-radius: 29px; }
  .cropped-find { max-height: 430px; }
  .support-note { margin-top: 28px; padding-left: 18px; }
  .support-note h3 { font-size: 18px; }
  .guide-end { padding-top: 50px; padding-bottom: 60px; }
  .guide-end h2 { margin: 22px 0 26px; }
  .guide-end .button { font-size: 16px; }
  .guide-end > div { gap: 12px; }
  .notfound { padding-top: 60px; padding-bottom: 80px; }
  .notfound > div { gap: 16px; }
}

/* ---------- 감소 모션: 모든 이동·보간을 끄고 즉시 최종 상태 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .hero-figure { opacity: 1; transform: none; }
  .js .hero-staff i, .js .song-steps:before, .js .track-wave, .js .end-staff i { transform: none; }
  .js .end-staff b { opacity: 1; transform: none; }
  .js .song-steps li > span, .js .how-list li > .mono, .js .guide-chapter-head .guide-number { border-color: var(--indigo); color: var(--indigo); }
}

@media print {
  .site-header, .guide-nav, .interactive-controls, .footer, .hero-actions, .guide-end, .final-cta { display: none; }
  .wrap { margin: 0; padding: 0; width: auto; }
  .stage, .studio { background: white; color: black; }
  .guide-chapter { break-inside: avoid; content-visibility: visible; }
  .guide-content { font-size: 12px; }
  a { text-decoration: underline; }
  .js [data-reveal], .js .hero-figure { opacity: 1; transform: none; }
}