/* ChordTool Metronome — 모바일 퍼스트. Digital: 딥 네이비 + 시안 / Classic: 목재 · 황동 */
:root {
  --bg: #f6f4f1; --surface: #ffffff; --surface-2: #efebe6; --text: #1b1612; --muted: #6b6259; --line: #e0d9d1;
  --accent: #c8741f; --accent-ink: #ffffff; --accent-soft: #f8ead9; --link: #a35a12;
  --d-bg: #0b1220; --d-bg2: #121c30; --d-line: #22304a; --d-text: #eef4ff; --d-muted: #8ea0bf; --cyan: #37c6ff; --cyan-2: #7be0ff; --warm: #ffb347;
  --c-bg: #1a120c; --c-bg2: #261a11; --c-line: #3b2a1c; --c-text: #f7ead6; --c-muted: #c2a888; --brass: #e6c26e;
  --radius: 18px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f0c0a; --surface: #18130f; --surface-2: #211a15; --text: #f1e9e0; --muted: #a8998a; --line: #2e251e; --accent: #e8913a; --accent-ink: #1d1004; --accent-soft: #2e1f10; --link: #f0a656; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0f0c0a; --surface: #18130f; --surface-2: #211a15; --text: #f1e9e0; --muted: #a8998a; --line: #2e251e; --accent: #e8913a; --accent-ink: #1d1004; --accent-soft: #2e1f10; --link: #f0a656; color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 1.35rem; }
h1 small { font-size: .8rem; color: var(--muted); font-weight: 600; }
h2 { font-size: 1.1rem; }
h3 { font-size: .9rem; margin: 16px 0 6px; color: var(--muted); }
p { margin: 0 0 .8em; }
ul, ol { padding-left: 20px; margin: 0 0 .8em; }
li { margin-bottom: 4px; }
.wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px; }
.lead { color: var(--muted); }
.hint { color: var(--muted); font-size: .82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-bar { display: flex; align-items: center; gap: 10px; height: 50px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { display: block; width: 32px; height: 32px; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-size: 1.02rem; letter-spacing: -.02em; }
.brand-text small { font-size: .68rem; color: var(--accent); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.header-nav { display: none; margin-left: auto; gap: 4px; }
.header-nav a { padding: 8px 12px; border-radius: 10px; color: var(--text); font-weight: 600; font-size: .95rem; }
.header-nav a[aria-current] { background: var(--accent-soft); color: var(--link); }
.icon-btn { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text); border-radius: 10px; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.header-menu { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
.header-menu a { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: .92rem; }
@media (min-width: 760px) { .header-nav { display: flex; } .icon-btn { margin-left: 4px; } }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--muted); padding: 8px 0 0; }
.breadcrumb a { color: var(--muted); }
main.wrap { padding-top: 8px; padding-bottom: 32px; }
.tool-h1 { font-size: 1.05rem; margin: 2px 0 8px; }

/* ===== 메트로놈 공통 ===== */
.metro { max-width: 560px; margin: 0 auto 14px; }
.mode-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mode-tabs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.mode-tabs [role=tab] { min-height: 42px; border: 0; border-radius: 10px; background: none; font-weight: 800; letter-spacing: .08em; cursor: pointer; color: var(--muted); }
.mode-tabs [aria-selected=true][data-mode=digital] { background: var(--d-bg); color: var(--cyan-2); }
.mode-tabs [aria-selected=true][data-mode=classic] { background: var(--c-bg); color: var(--brass); }
.fs-btn { width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.fs-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pane { border-radius: var(--radius); padding: 14px 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.stp { min-height: 48px; border-radius: 12px; font-weight: 800; font-size: 1.02rem; cursor: pointer; }
.play-row { display: flex; gap: 8px; margin-top: 12px; }
.start-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border: 0; border-radius: 16px; font-size: 1.2rem; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.start-btn .ic { font-size: 1.1rem; }
.tap-btn { display: block; width: 100%; min-height: 48px; margin-top: 8px; border-radius: 14px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.tap-btn.small { width: auto; min-width: 72px; margin-top: 0; }
.tap-btn.flash { animation: tapf .18s ease-out; }
@keyframes tapf { from { transform: scale(.96); filter: brightness(1.5); } to { transform: none; filter: none; } }

/* ===== DIGITAL ===== */
.digital { background: radial-gradient(120% 80% at 50% 0%, #16264a 0%, var(--d-bg) 60%); color: var(--d-text); }
.d-core { position: relative; display: grid; place-items: center; padding: 8px 0 2px; }
.d-pulse { position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin: -92px 0 0 -85px; border-radius: 50%; border: 2px solid rgba(55,198,255,.25); pointer-events: none; }
.d-pulse.hit { animation: pulse .32s ease-out; }
.d-pulse.hit.acc { border-color: rgba(255,179,71,.55); }
@keyframes pulse { from { transform: scale(.9); opacity: 1; box-shadow: 0 0 30px rgba(55,198,255,.45) inset; } to { transform: scale(1.06); opacity: .35; } }
.d-bpm { border: 0; background: none; color: var(--d-text); cursor: text; padding: 0 10px; line-height: 1; }
.d-bpm-v { display: block; font-size: 5.6rem; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; min-width: 3ch; }
.d-bpm-in { width: 5.2ch; font-size: 4.2rem; font-weight: 800; text-align: center; border-radius: 14px; border: 2px solid var(--cyan); background: var(--d-bg2); color: var(--d-text); }
.d-bpm-l { font-size: .85rem; font-weight: 800; letter-spacing: .12em; color: var(--d-muted); margin-top: 2px; }
.d-bpm-l .mark-v { letter-spacing: .02em; color: var(--cyan-2); font-weight: 700; }
.beats { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; margin: 12px 0 2px; }
.beat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; min-height: 52px; padding: 2px 4px; border-radius: 12px; border: 0; background: none; color: var(--d-muted); cursor: pointer; }
.beat i { font-style: normal; font-size: 1.55rem; line-height: 1.1; transition: transform .06s; }
.beat small { font-size: .7rem; font-weight: 700; }
.beat.accent i { color: var(--warm); }
.beat.normal i { color: var(--cyan-2); }
.beat.mute i { color: #5a6a86; }
.beat.now { background: rgba(55,198,255,.16); color: var(--d-text); }
.beat.now i { transform: scale(1.25); }
.beat.now.accent { background: rgba(255,179,71,.18); }
.beats .sep { color: var(--d-line); font-weight: 800; padding: 0 2px; }
.beats[style*="--n: 9"] .beat, .beats[style*="--n: 12"] .beat { min-width: 34px; }
.sub-line { display: flex; justify-content: center; gap: 10px; min-height: 1.4em; font-size: .8rem; font-weight: 800; color: var(--d-muted); letter-spacing: .04em; }
.sub-line .on { color: var(--cyan-2); }
.d-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.digital .stp { border: 1px solid var(--d-line); background: var(--d-bg2); color: var(--d-text); }
.d-slider { width: 100%; margin: 12px 0 0; height: 32px; accent-color: var(--cyan); }
.digital .start-btn { background: linear-gradient(180deg, #45d0ff, #1d9fe0); color: #04152a; box-shadow: 0 6px 18px rgba(55,198,255,.35); }
.metro[data-playing=true] .digital .start-btn { background: #1c2a44; color: var(--d-text); box-shadow: none; border: 1.5px solid var(--d-line); }
.digital .tap-btn { border: 1.5px solid var(--d-line); background: transparent; color: var(--cyan-2); }

/* ===== CLASSIC ===== */
.classic { background: radial-gradient(120% 70% at 50% 10%, #3a2616 0%, var(--c-bg) 65%); color: var(--c-text); padding-top: 8px; }
.c-stage { position: relative; display: flex; justify-content: center; }
.c-svg { display: block; width: 100%; max-width: 300px; height: auto; max-height: 50vh; touch-action: none; user-select: none; -webkit-user-select: none; }
.c-svg:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; border-radius: 12px; }
.classic.dragging .c-weight rect:first-child { stroke: #fff3c9; stroke-width: 2; }
.c-tt { position: absolute; left: 0; right: 0; bottom: 22%; display: flex; justify-content: space-between; padding: 0 4px; pointer-events: none; font-size: .72rem; font-weight: 900; letter-spacing: .14em; color: var(--c-line); }
.c-tt.l .tick, .c-tt.r .tock { color: var(--brass); }
.c-read { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.classic .stp.round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-bg2); color: var(--c-text); font-size: 1.5rem; line-height: 1; }
.c-bpm { font-size: 1rem; font-weight: 800; color: var(--c-muted); letter-spacing: .08em; }
.c-bpm-v { font-size: 2.6rem; color: var(--c-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c-mark { text-align: center; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.3rem; color: var(--brass); }
.c-mark small { font-family: inherit; font-style: normal; font-size: .72rem; color: var(--c-muted); }
.c-range { text-align: center; font-size: .78rem; color: #ffcf9a; margin: 4px 0 0; }
.c-beats { display: flex; justify-content: center; gap: 12px; font-size: .8rem; font-weight: 800; color: var(--c-line); min-height: 1.4em; }
.c-beats .on { color: var(--brass); }
.classic .start-btn { background: linear-gradient(180deg, #f0d08a, #b98a36); color: #2a1906; box-shadow: 0 6px 18px rgba(230,194,110,.25); }
.metro[data-playing=true] .classic .start-btn { background: var(--c-bg2); color: var(--c-text); border: 1.5px solid var(--c-line); box-shadow: none; }
.classic .tap-btn { border: 1.5px solid var(--c-line); background: transparent; color: var(--brass); }
@media (orientation: landscape) and (max-height: 520px) { .c-svg { max-height: 62vh; } .d-bpm-v { font-size: 4rem; } }

/* ===== 상태 · 연습 ===== */
.metro-status { text-align: center; min-height: 1.5em; margin: 8px 0 0; font-weight: 700; color: var(--accent); }
.prac { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 8px; }
.prac-row { display: flex; justify-content: space-between; font-weight: 700; font-variant-numeric: tabular-nums; }
.prac-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.prac-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.prac-tr { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* ===== 상세 설정 ===== */
.metro-set { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; }
.metro-set summary { min-height: 50px; display: flex; align-items: center; gap: 8px; font-weight: 800; cursor: pointer; }
.metro-set summary small { color: var(--accent); font-weight: 700; }
.set-body { padding-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; text-decoration: none; }
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip small { opacity: .75; font-weight: 700; }
.rng { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; font-size: .9rem; }
.rng input { flex: 1; accent-color: var(--accent); height: 30px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.snd-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.snd-row > span { width: 56px; font-size: .8rem; font-weight: 800; color: var(--muted); }
.mini { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; font-weight: 600; }
.mini input, .tr-grid input, .tr-grid select { width: 72px; height: 42px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }
.trainer { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; }
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 4px 0 6px; }
.tr-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.tr-grid label:last-child { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.tr-grid label:last-child input { width: 72px; }
.pchip { display: inline-flex; align-items: center; }
.pdel { width: 36px; height: 42px; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; text-decoration: none; }
.btn.sm { min-height: 40px; margin-top: 8px; font-size: .88rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:hover { text-decoration: none; }
.history { font-weight: 700; }
.metro-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }

/* 전체 화면: 메트로놈만 */
body.fs .site-header, body.fs .site-footer, body.fs main > :not(#metronome), body.fs .metro-set, body.fs .metro-links, body.fs .breadcrumb { display: none !important; }
body.fs { background: #000; }
body.fs main.wrap { max-width: none; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); min-height: 100vh; display: flex; align-items: center; }
body.fs .metro { width: 100%; max-width: 640px; margin: 0 auto; }
body.fs .d-bpm-v { font-size: 8rem; }
body.fs .c-svg { max-height: 68vh; max-width: 420px; }

/* 안내 콘텐츠 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.more-link { margin: 10px 0 0; }
.cta-line { margin: 4px 0 10px; }
.mk-table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; font-size: .9rem; }
.mk-table th, .mk-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.mk-table thead th { font-size: .78rem; color: var(--muted); }
.mk-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-table td:first-child b { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.svc-list { list-style: none; padding: 0; display: grid; gap: 6px; }
@media (min-width: 620px) { .svc-list { grid-template-columns: 1fr 1fr; } }
.svc-list a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.svc-list a:hover { text-decoration: none; border-color: var(--accent); }
.svc-list small { color: var(--muted); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.faq details p { color: var(--muted); }

/* Share / sheet / toast / ads (drum ui.js 공용) */
.share-bar { display: flex; gap: 8px; margin: 4px 0 10px; justify-content: center; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer; }
.share-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.share-btn.kakao { background: #fee500; border-color: #fee500; color: #191919; }
.share-btn.kakao svg { fill: #191919; stroke: none; }
.sheet-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { position: relative; width: 100%; max-width: 520px; max-height: 86vh; overflow: auto; background: var(--surface); color: var(--text); border-radius: 18px 18px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 18px; } }
.sheet-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.sheet-msg { font-weight: 700; margin: 8px 0 16px; }
.sheet-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sheet-form label { display: grid; gap: 6px; font-weight: 700; }
.sheet-form input { width: 100%; height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }
.chip-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.chip-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-btn.danger { background: #d9363e; border-color: #d9363e; color: #fff; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: .9rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.ad-slot { margin: 18px 0; min-height: 100px; text-align: center; overflow: hidden; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
@media (prefers-reduced-motion: reduce) { .d-pulse.hit { animation: none; } .beat i { transition: none; } }

.site-footer { border-top: 1px solid var(--line); padding: 20px 0 36px; color: var(--muted); font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.footer-links a { color: var(--text); font-weight: 600; }