:root { color-scheme: light; --paper: #f7f3e9; --surface: #fffdf8; --ink: #1f2722; --muted: #68716b; --green: #174f3c; --green-2: #236a52; --brass: #a77b39; --line: #ded7c8; --danger: #a23b32; --shadow: 0 18px 60px rgba(43, 49, 43, .08); font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; }
* { box-sizing: border-box; }
.score-site [hidden] { display: none !important; }
html { background: var(--paper); color: var(--ink); }
body.score-site { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #fff 0, transparent 36%), linear-gradient(180deg, #fbf9f3 0, var(--paper) 100%); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.score-skip { position: fixed; left: 12px; top: -70px; z-index: 20; padding: 10px 14px; background: var(--green); color: white; border-radius: 8px; }
.score-skip:focus { top: 12px; }
.score-topbar { min-height: 76px; padding: 0 clamp(16px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid rgba(123, 112, 91, .17); background: rgba(255, 253, 248, .9); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10; }
.score-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; color: var(--green); }
.score-brand-mark { font-family: Georgia, serif; font-size: 2.5rem; line-height: 1; }
.score-brand span:last-child { display: grid; }
.score-brand strong { font: 700 1.35rem Georgia, serif; }
.score-brand small { color: var(--muted); font-size: .7rem; }
.score-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(22px, 4vw, 56px); }
.score-nav a { min-height: 44px; display: grid; place-items: center; padding: 0 4px; text-decoration: none; border-bottom: 2px solid transparent; font-weight: 700; }
.score-nav a[aria-current="page"] { color: var(--green); border-color: var(--green); }
.score-logout { justify-self: end; }
.score-logout button { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.score-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: clamp(40px, 7vw, 92px) 0 72px; }
.score-hero { text-align: center; margin: 0 auto 32px; }
.score-kicker, .score-section-heading p { margin: 0 0 9px; color: var(--brass); font-size: .74rem; font-weight: 850; letter-spacing: .16em; }
.score-hero h1, .score-page-heading h1, .score-result-heading h1 { margin: 0; font: 700 clamp(2.25rem, 5vw, 4rem)/1.08 Georgia, "Noto Serif KR", serif; letter-spacing: -.04em; }
.score-hero > p:last-child, .score-page-heading > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: clamp(.96rem, 1.8vw, 1.1rem); }
.score-readiness { position: relative; margin: 0 0 16px; padding: 16px 52px 16px 18px; border: 1px solid #d7c58f; border-radius: 14px; background: #fff8df; }
.score-readiness strong { color: #6d5218; }
.score-readiness p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.score-readiness a { position: absolute; right: 18px; top: 16px; color: var(--green); font-weight: 800; }
.score-create-card { padding: clamp(18px, 3.2vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 253, 248, .92); box-shadow: var(--shadow); }
.score-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.score-url-row label, .score-options > label, .score-music-panel label { display: grid; gap: 9px; font-weight: 750; }
.score-url-row input, .score-options select, .score-music-panel select, .score-preview-controls select, .score-preview-controls input { min-height: 52px; width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 0 14px; background: white; color: var(--ink); outline: none; }
.score-url-row input:focus, select:focus, input:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(35, 106, 82, .25); outline-offset: 2px; }
.score-primary { min-height: 52px; min-width: 170px; padding: 0 24px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: white; font-weight: 850; cursor: pointer; box-shadow: 0 8px 22px rgba(23, 79, 60, .2); }
.score-primary:disabled { opacity: .55; cursor: wait; }
.score-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.score-source-actions button, .score-result-toolbar a, .score-result-toolbar button, .score-preview-controls button, #score-retry { min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font-weight: 750; cursor: pointer; text-decoration: none; display: inline-grid; place-items: center; padding: 0 16px; }
.score-source-actions button[aria-pressed="true"] { border-color: var(--green); background: #eef5f1; color: var(--green); }
.score-selection { margin: 14px 0 0; padding: 11px 14px; border-radius: 10px; background: #edf5f0; color: var(--green); font-weight: 700; }
.score-music-panel { margin-top: 14px; padding: 16px; border-radius: 12px; background: #f2eee5; }
.score-music-panel p { color: var(--muted); margin: 10px 0 0; }
.score-options { margin: 20px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.score-options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.score-difficulty { display: flex; flex-wrap: wrap; gap: 8px; }
.score-difficulty > span { flex-basis: 100%; font-weight: 750; }
.score-difficulty label { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: white; cursor: pointer; }
.score-difficulty label:has(input:checked) { border-color: var(--green); color: var(--green); background: #edf5f0; }
.score-difficulty input { accent-color: var(--green); }
.score-check { min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 750; white-space: nowrap; }
.score-check input { width: 18px; height: 18px; accent-color: var(--green); }
.score-error { color: var(--danger); font-weight: 700; }
.score-recent { margin-top: 48px; }
.score-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.score-section-heading h2 { margin: 0; font: 700 1.55rem Georgia, serif; }
.score-section-heading a { color: var(--green); font-weight: 750; }
.score-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.score-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 6px; }
.score-card h3 { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-card p, .score-card small { margin: 0; color: var(--muted); }
.score-card a { margin-top: 10px; color: var(--green); font-weight: 800; }
.score-source-type { color: var(--brass); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.score-page-heading { margin-bottom: 30px; }
.score-list { display: grid; gap: 12px; }
.score-list article { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.score-list h2 { margin: 7px 0 4px; font-size: 1.12rem; }
.score-list p, .score-list small { color: var(--muted); margin: 0; }
.score-list article > a, .score-empty a, .score-result-heading > a { min-height: 44px; display: grid; place-items: center; padding: 0 18px; border-radius: 999px; background: var(--green); color: white; text-decoration: none; font-weight: 800; }
.score-status { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #eee9df; font-size: .75rem; font-weight: 800; }
.score-status[data-status="done"] { background: #e5f2eb; color: var(--green); }
.score-status[data-status="failed"] { background: #f8e7e4; color: var(--danger); }
.score-empty { padding: 60px 20px; display: grid; place-items: center; gap: 18px; border: 1px dashed var(--line); border-radius: 16px; }
.score-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.score-settings-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.score-settings-grid h2 { margin-top: 0; }
.score-settings-grid p { color: var(--muted); line-height: 1.7; }
.score-password-card { max-width: 620px; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.score-password-card form, .score-login-card form { display: grid; gap: 14px; }
.score-password-card label, .score-login-card label { display: grid; gap: 7px; font-weight: 750; }
.score-password-card input, .score-login-card input { min-height: 50px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0 13px; background: white; }
.score-login-page { display: grid; place-items: center; padding: 18px; }
.score-login-shell { width: min(100%, 430px); }
.score-login-card { padding: clamp(24px, 6vw, 38px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.score-login-card > .score-brand { margin-bottom: 36px; }
.score-login-card h1 { margin: 0; font: 700 2.3rem Georgia, serif; }
.score-login-card > p:not(.score-kicker):not(.score-error) { color: var(--muted); margin: 9px 0 24px; }
.score-login-card .score-primary { width: 100%; }
.score-mobile-logout { display: none; }
.score-result-page, #score-complete { min-width: 0; width: 100%; max-width: 100%; }
.score-result-page { display: grid; gap: 22px; }
.score-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.score-result-heading h1 { font-size: clamp(2rem, 4vw, 3.3rem); }
.score-result-heading > div, .score-result-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.score-result-heading p:last-child { color: var(--muted); }
.score-progress-panel { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.score-progress-panel h2 { font: 700 1.7rem Georgia, serif; }
.score-stages { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: step; }
.score-stages li { padding: 12px; border-radius: 10px; background: #f1ede5; color: var(--muted); font-size: .86rem; }
.score-stages li::before { counter-increment: step; content: counter(step) ". "; }
.score-stages li[data-state="active"] { background: var(--green); color: white; }
.score-stages li[data-state="done"] { background: #deece4; color: var(--green); }
.score-result-toolbar { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.score-result-toolbar dl { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0; }
.score-result-toolbar dl div { display: grid; gap: 3px; }
.score-result-toolbar dt { color: var(--muted); font-size: .74rem; }
.score-result-toolbar dd { margin: 0; font-weight: 800; }
.score-result-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.score-audio-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; margin-top: 14px; }
.score-original-player, .score-preview-player { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.score-original-player p, .score-preview-player p { margin: 0 0 8px; font-weight: 850; }
.score-original-player audio { width: 100%; }
.score-preview-player { display: grid; gap: 14px; }
.score-preview-player small { color: var(--muted); }
.score-preview-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.score-preview-controls label { display: grid; gap: 4px; color: var(--muted); font-size: .78rem; }
.score-preview-controls select, .score-preview-controls input { min-height: 44px; width: 92px; }
.score-preview-controls .score-check { display: flex; font-size: .8rem; }
.score-preview-controls .score-check input { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; }
.score-current-measure { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-size: .82rem; }
.score-paper { margin-top: 14px; max-width: 100%; overflow-x: hidden; overflow-y: visible; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.score-paper.is-jungganbo { overflow-x: auto; }
#score-viewer { min-width: 0; width: 100%; max-width: 100%; padding: clamp(8px, 2vw, 22px); }
#score-viewer svg { display: block; max-width: 100%; height: auto; }
#score-viewer .score-note-active { filter: drop-shadow(0 0 2px #d79a24); color: #b26412 !important; fill: #b26412 !important; stroke: #b26412 !important; }
.jungganbo-viewer { min-width: max-content !important; padding: clamp(14px, 3vw, 28px) !important; color: #181612; }
.jungganbo-heading { position: sticky; left: 18px; width: min(86vw, 520px); margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.jungganbo-heading strong { font: 700 1.35rem "Noto Serif KR", Batang, serif; }
.jungganbo-heading span { color: var(--muted); font-size: .78rem; }
.jungganbo-score { display: flex; flex-direction: row-reverse; justify-content: flex-end; width: max-content; border-top: 2px solid #393229; border-right: 2px solid #393229; background: #fffdf7; }
.jungganbo-score + .jungganbo-score { margin-top: 18px; }
.jungganbo-measure { position: relative; width: 92px; padding-top: 28px; border-left: 2px solid #393229; }
.jungganbo-measure-number { position: absolute; inset: 5px 0 auto; text-align: center; color: var(--muted); font-size: .72rem; }
.jungganbo-cell { min-height: 94px; padding: 5px; border-top: 1px solid #6f665b; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 2px; }
.jungganbo-measure .jungganbo-cell:last-child { border-bottom: 2px solid #393229; }
.jungganbo-note { min-width: 44px; min-height: 44px; padding: 2px 8px; border: 0; background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; font-family: "Noto Serif KR", Batang, serif; }
.jungganbo-yul { font-size: 1.55rem; line-height: 1; }
.jungganbo-octave { height: .62rem; color: var(--brass); font-size: .7rem; line-height: .62rem; letter-spacing: -.08em; }
.jungganbo-rest, .jungganbo-sustain { color: var(--muted); font: 700 .82rem "Noto Sans KR", sans-serif; }
.jungganbo-sustain { font-size: 1.2rem; }
.jungganbo-note.score-note-active { border-radius: 9px; background: #fff1ce; outline: 2px solid #d79a24; filter: none !important; }
.score-lyrics { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.score-quality { margin-top: 14px; padding: 14px 18px; border: 1px solid #d7c58f; border-radius: 14px; background: #fff8df; }
.score-quality strong { color: #6d5218; }
.score-quality p { margin: 6px 0 0; color: var(--muted); }
.score-quality[data-quality="low"] { border-color: #dc9c93; background: #fff0ed; }
.score-quality[data-quality="low"] strong { color: var(--danger); }
.score-lyrics summary { min-height: 44px; display: flex; align-items: center; font-weight: 850; cursor: pointer; }
.score-lyrics pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.75; }
.score-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(90vw, 520px); padding: 12px 16px; border-radius: 10px; background: var(--ink); color: white; box-shadow: var(--shadow); z-index: 30; }

@media (max-width: 900px) {
  .score-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-options { grid-template-columns: 1fr 2fr; }
  .score-options > .score-check { grid-column: 1 / -1; }
  .score-settings-grid { grid-template-columns: 1fr; }
  .score-audio-grid { grid-template-columns: 1fr; }
  .score-stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .score-topbar { min-height: 64px; padding: 0 12px; grid-template-columns: 1fr auto; gap: 8px; }
  .score-brand small, .score-logout { display: none; }
  .score-mobile-logout { display: block; margin-top: 18px; }
  .score-mobile-logout button { min-height: 44px; width: 100%; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); font-weight: 750; }
  .score-brand-mark { font-size: 2rem; }
  .score-brand strong { font-size: 1.05rem; }
  .score-nav { gap: 4px; justify-self: end; }
  .score-nav a { min-height: 44px; padding: 0 8px; font-size: .82rem; }
  .score-main { width: min(100% - 24px, 1180px); padding: 40px 0 48px; }
  .score-readiness { padding: 16px; }
  .score-readiness a { position: static; display: inline-block; min-height: 44px; margin-top: 4px; line-height: 44px; }
  .score-hero { text-align: left; margin-bottom: 24px; }
  .score-hero h1 { font-size: clamp(2.15rem, 12vw, 3rem); }
  .score-url-row { grid-template-columns: 1fr; }
  .score-primary { width: 100%; }
  .score-source-actions, .score-options { grid-template-columns: 1fr; }
  .score-options { gap: 16px; }
  .score-options > .score-check { grid-column: auto; }
  .score-card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .score-card { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .score-list article, .score-result-heading, .score-result-toolbar { align-items: stretch; flex-direction: column; }
  .score-result-heading, .score-result-toolbar, .score-audio-grid, .score-original-player, .score-preview-player, .score-paper, .score-lyrics { min-width: 0; width: 100%; max-width: 100%; }
  .score-list article > a, .score-result-heading > a { width: 100%; }
  .score-result-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .score-result-toolbar button { grid-column: 1 / -1; }
  .score-preview-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .score-preview-controls button { width: 100%; }
  .score-preview-controls label { min-width: 0; }
  .score-preview-controls select, .score-preview-controls input { width: 100%; }
  .score-preview-controls .score-check { grid-column: 1 / -1; }
  .jungganbo-measure { width: 78px; }
  .jungganbo-cell { min-height: 84px; }
}
@media (max-width: 360px) {
  .score-nav a { padding: 0 6px; font-size: .76rem; }
  .score-create-card { padding: 16px; }
  .score-source-actions { gap: 8px; }
  .score-difficulty label { width: 100%; }
  .score-stages { grid-template-columns: 1fr; }
}
@media print {
  .score-topbar, .score-result-heading > a, .score-result-toolbar, .score-audio-grid, .score-lyrics, .score-toast { display: none !important; }
  body.score-site, .score-main { background: white; width: 100%; padding: 0; }
  .score-paper { border: 0; box-shadow: none; overflow: visible; }
}