@font-face{font-family:'Fraunces';src:url('/assets/fonts/Fraunces.woff2') format('woff2');font-weight:300 700;font-display:swap}
:root{
  --bg:#ffffff; --surface:#f6f4f1; --line:#e4e0da; --ink:#1c1a17; --ink2:#4a453e; --muted:#6b645a;
  --accent:#a8581b; --accent-ink:#ffffff; --good:#1f7a4a; --bad:#b3261e; --focus:#2457c5;
  --radius:10px; --wrap:1120px; --read:720px;
  --serif:'Fraunces', 'Noto Serif KR', 'Apple SD Gothic Neo', serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141311; --surface:#1d1b19; --line:#33302b; --ink:#f1ede7; --ink2:#d4cdc3; --muted:#a39b90; --accent:#e08a45; --accent-ink:#141311; --good:#5cc08a; --bad:#f28b82; --focus:#8ab4f8; }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--font);}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.read{max-width:var(--read)}
header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);z-index:20}
header.top .wrap{display:flex;align-items:center;gap:20px;height:58px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.brand svg{width:26px;height:26px}
nav.main{display:flex;gap:18px;font-size:15px;color:var(--ink2)}
nav.main a{text-decoration:none}
nav.main a:hover{color:var(--ink)}
.spacer{flex:1}
.langsw{font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
main{padding:28px 0 64px}
h1{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.15;letter-spacing:-.015em;margin:10px 0 14px}
:lang(ko) h1{font-family:var(--font);font-weight:700;letter-spacing:-.03em}
h2{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.3;letter-spacing:-.01em;margin:40px 0 10px}
:lang(ko) h2{font-family:var(--font);font-weight:700;letter-spacing:-.02em;font-size:23px}
h3{font-size:17px;margin:24px 0 8px}
p{margin:0 0 14px}
.lead{font-size:18px;color:var(--ink2)}
.crumbs{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:8px 14px;font:inherit;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--ink2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.small{padding:4px 10px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:default}
/* home */
.area{margin-top:34px}
.area h2{font-size:15px;text-transform:none;color:var(--muted);font-weight:600;margin:0 0 10px;letter-spacing:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;background:var(--bg)}
.tile:hover{border-color:var(--ink2)}
.tile .ic{width:34px;height:34px;flex:none;color:var(--accent)}
.tile b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.tile small{color:var(--muted);font-size:13px}
.continue{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:none;margin:18px 0 0;background:var(--surface)}
.continue.on{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* course */
.units{list-style:none;padding:0;margin:16px 0;border-top:1px solid var(--line)}
.units li{border-bottom:1px solid var(--line)}
.units a{display:flex;gap:14px;align-items:baseline;padding:13px 2px;text-decoration:none}
.units .no{color:var(--muted);font-variant-numeric:tabular-nums;width:2.2em;flex:none}
.units .t{flex:1;font-weight:500}
.units .st{font-size:13px;color:var(--muted)}
.units .st.done{color:var(--good)}
.units .soon{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--ink2)}
.bar{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin:6px 0 2px}
.bar i{display:block;height:100%;background:var(--accent);width:0}
/* unit layout */
.unit{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:48px}
@media (max-width:980px){.unit{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:78px;align-self:start;font-size:14px}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:4px 12px;text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink)}
.block{margin:22px 0}
.story{border-left:3px solid var(--accent);padding:4px 0 4px 16px;color:var(--ink2)}
.story .lab,.box .lab{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;display:block}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--bg)}
.box.tint{background:var(--surface)}
figure{margin:22px 0}
figure svg{width:100%;height:auto;display:block;max-height:420px}
figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.summary ul{margin:0;padding-left:20px}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
/* widgets */
.w{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--bg)}
.w-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.w-h .lab{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.w-h .count{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.q{padding:14px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0;padding-top:0}
.q .qt{font-weight:500;margin-bottom:10px}
.opts{display:grid;gap:8px}
.opt{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.opt:hover{border-color:var(--ink2)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--bg))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--bg))}
.in{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.in input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);min-width:0;width:160px}
.frac{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.frac input{width:64px;text-align:center}
.frac hr{width:70px;border:0;border-top:2px solid var(--ink);margin:0}
.fb{margin-top:8px;font-size:15px}
.fb.ok{color:var(--good)}.fb.no{color:var(--bad)}
.why{margin-top:6px;color:var(--ink2);font-size:15px}
.score{margin-top:14px;font-weight:600}
/* flashcards */
.card{min-height:170px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:26px;cursor:pointer;background:var(--surface);user-select:none}
.card small{display:block;font-size:15px;color:var(--muted);margin-top:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.boxes{display:flex;gap:4px;margin-left:auto}
.boxes span{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px}
/* memorize */
.mem{font-size:18px;line-height:2}
.mem .gap{display:inline-block;min-width:3em;border-bottom:2px solid var(--ink2);color:transparent;cursor:pointer}
.mem .gap.show{color:var(--accent)}
/* shadowing */
.line{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.line:first-of-type{border-top:0}
.line .x{font-size:20px;flex:1;min-width:180px}
.line .m{display:block;font-size:14px;color:var(--muted)}
.rec{color:var(--bad)}
/* piano */
.piano{position:relative;height:150px;user-select:none;touch-action:none;margin-top:6px}
.piano .k{position:absolute;top:0;border:1px solid #2a2622;border-radius:0 0 6px 6px;cursor:pointer}
.piano .wk{background:#fff;height:150px;z-index:1;padding:0;border-color:#8a8278}
.piano .bk{background:#1c1a17;height:92px;z-index:2}
.piano .k.on{background:var(--accent)!important}
.piano .k.hint{box-shadow:inset 0 -10px 0 var(--good)}
.piano .lbl{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:12px;color:#6b645a;pointer-events:none}
.seq{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.seq span{border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-variant-numeric:tabular-nums}
.seq span.now{border-color:var(--accent);color:var(--accent);font-weight:700}
.seq span.done{color:var(--muted)}
/* drums */
.grid16{display:grid;grid-template-columns:80px repeat(16,1fr);gap:3px;align-items:center;font-size:13px}
.grid16 button{height:30px;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer;padding:0}
.grid16 button.on{background:var(--accent);border-color:var(--accent)}
.grid16 button.beat{border-color:var(--ink2)}
.grid16 button.play{outline:2px solid var(--focus)}
/* guitar */
.chords{display:flex;gap:14px;flex-wrap:wrap}
.chords figure{margin:0;text-align:center;cursor:pointer}
.chords svg{width:110px}
/* staff */
.staffq svg{max-width:360px}
.ad{display:none}
footer.bot{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:14px}
footer.bot nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px}
footer.bot a{text-decoration:none}
@media (max-width:640px){
  h1{font-size:26px}
  nav.main{display:none}
  .grid{grid-template-columns:1fr 1fr}
  .grid16{grid-template-columns:56px repeat(16,1fr);gap:2px}
  .piano{height:130px}.piano .wk{height:130px}.piano .bk{height:80px}
}

/* 3D scenes */
.scene{position:relative;margin:26px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.scene.wide{margin-left:calc(-1 * min(80px, (100vw - var(--read)) / 2 - 20px));margin-right:calc(-1 * min(80px, (100vw - var(--read)) / 2 - 20px))}
.scene .stage{position:relative;height:min(62vh,560px);min-height:360px;touch-action:none;overflow:hidden}
.stage-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;outline:none;cursor:grab}
.stage-canvas:active{cursor:grabbing}
.scene-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.scene.ready .scene-load{display:none}
.scene-hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:#cfd3dc;opacity:.8;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.scene.light .scene-hint{color:var(--ink2);text-shadow:none}
.scene.touched .scene-hint{opacity:0;transition:opacity .4s}
.scene-ui{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:var(--bg)}
.scene-ui select{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.scene-ui .rng{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.scene-ui output{font-variant-numeric:tabular-nums;min-width:5.5em;font-size:13px;color:var(--muted)}
.btn.toggle[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.scene-card{position:absolute;right:12px;top:12px;max-width:min(300px,70%);background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.45;backdrop-filter:blur(6px)}
.scene-card[hidden]{display:none}
.scene-status{left:12px;right:auto;top:12px;bottom:auto}
.scene-card b{display:block;font-size:16px;margin-bottom:6px}
.scene-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.scene-card dt{color:var(--muted)}.scene-card dd{margin:0;font-variant-numeric:tabular-nums}
.scene figcaption{padding:0 14px 12px;margin:0;background:var(--bg)}
.stage-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:translate(-9999px,0);will-change:transform;transition:opacity .2s;white-space:nowrap}
.stage-label-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;border:1.5px solid #1c1a17;flex:none;align-self:flex-start}
.stage-label-text{font:500 12px/1 var(--font);color:#1c1a17;background:rgba(255,255,255,.9);border-radius:4px;padding:4px 6px;transform:translateY(-50%)}
@media (max-width:640px){.scene .stage{height:58svh;min-height:320px}.scene-card:not(.scene-status){left:8px;right:8px;top:auto;bottom:8px;max-width:none}.scene-status{max-width:calc(100% - 24px)}.scene.wide{margin-left:-20px;margin-right:-20px;border-radius:0;border-left:0;border-right:0}}
/* home */
body.home{--surface:#f5f3ee}
.home-top{padding:48px 0 18px;max-width:760px}
.home-h1{font-size:clamp(26px,3.6vw,36px);line-height:1.15;margin:0 0 18px;letter-spacing:-.01em}
:lang(ko) .home-h1{letter-spacing:-.04em}
.search{display:flex;gap:8px;max-width:640px}
.search input{flex:1;min-width:0;font:inherit;font-size:17px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.search input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.search .btn{border-radius:12px;padding:0 18px}
.home-chips{margin-top:14px}
.home-chips .chip{text-decoration:none;padding:5px 12px;font-size:14px;background:var(--surface);border-color:transparent}
.home-chips .chip:hover{border-color:var(--line)}
.home-h2{font-family:var(--font)!important;font-size:15px!important;font-weight:700;letter-spacing:0!important;color:var(--muted);margin:46px 0 12px!important}
.try-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.try-card{border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.try-card .block{margin:0;flex:1}
.try-card .w{border:0;padding:0}
.try-card .card{min-height:120px;font-size:22px}
.try-card .piano{height:150px}.try-card .piano .wk{height:150px}.try-card .piano .bk{height:92px}
.try-card .boxes{display:none}
.try-card svg{max-height:110px}
.try-link{font-size:14px;font-weight:600;text-decoration:none;color:var(--accent);align-self:flex-start}
.try-link:hover{text-decoration:underline}
.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.three-card{display:flex;align-items:center;gap:16px;padding:18px;border-radius:16px;background:var(--surface);text-decoration:none;transition:transform .2s ease}
.three-card:hover{transform:translateY(-2px)}
.three-card .art{width:64px;height:64px;flex:none}
.three-card:nth-child(1) .art{color:#3d7a5a}.three-card:nth-child(2) .art{color:#3a4f9a}.three-card:nth-child(3) .art{color:var(--accent)}
.three-card b{font-size:16px;line-height:1.35;font-weight:600}
.home-index{max-width:980px}
.ix-row{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ix-row h3{margin:2px 0 0;font-size:14px;color:var(--muted);font-weight:600}
.ix-row p{margin:0;font-size:16px;line-height:1.9}
.ix-row a{text-decoration:none}
.ix-row a.ready{font-weight:600}
.ix-row a.ready:hover{text-decoration:underline;text-underline-offset:3px}
.ix-row a.soon{color:var(--muted)}
.ix-row span{color:var(--line)}
.signin{font-size:14px;text-decoration:none;color:var(--ink2);margin-right:10px}
.signin.on{color:var(--good);font-weight:600}
.acct-btns{display:grid;gap:10px;max-width:360px;margin:20px 0}
.acct-btn{justify-content:center;padding:11px 16px;font-weight:600}
.search-hit{padding:12px 0;border-bottom:1px solid var(--line)}
.search-hit a{font-weight:600;text-decoration:none;font-size:17px}
.search-hit small{display:block;color:var(--muted)}
@media (max-width:860px){.try-grid,.three-grid{grid-template-columns:1fr}.ix-row{grid-template-columns:1fr;gap:4px}}
@media (prefers-color-scheme:dark){body.home{--surface:#1d1b19}}

/* code playground */
.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.code-in{font:13.5px/1.55 var(--mono);min-height:220px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);resize:vertical;tab-size:2;white-space:pre;overflow:auto}
.code-out{width:100%;min-height:220px;border:1px solid var(--line);border-radius:8px;background:#fff}
.code-task{margin:0 0 10px;color:var(--ink2)}
@media (max-width:700px){.code-grid{grid-template-columns:1fr}}

.contact{display:grid;gap:12px;max-width:560px;margin:18px 0}.contact label{display:grid;gap:4px;font-size:14px;color:var(--ink2)}.contact textarea,.contact input{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}.contact .hp{position:absolute;left:-9999px}.contact button{justify-self:start}