:root{
  /* 노트 감성 (warm paper) 테마 */
  --paper:#fbf7ee; --card:#fffdf7; --ink:#3a342b; --muted:#8a8073; --line:#e6dcc8;
  --accent:#c2603f; --accent2:#e9b949; --mint:#cfe9d6; --ok:#4e8d63; --bad:#c0503f;
  --code:#f6efe2; --shadow:0 6px 22px rgba(120,90,40,.07);
  --radius:16px; --serif:Georgia,'Nanum Myeongjo','Noto Serif KR',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:26px 18px 80px}
/* header */
.top{margin-bottom:14px}
.backlink{font-size:13px;color:var(--muted);margin-bottom:8px}
.hrow{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}
.badge{display:inline-block;font-size:12px;color:var(--accent);border:1.5px solid #ecdfc6;
  padding:3px 12px;border-radius:999px;background:#fbe7d8;width:max-content;font-weight:600;margin-bottom:6px}
h1{font-family:var(--serif);font-size:27px;letter-spacing:-.3px;color:#2f2a22}
.sub{color:var(--muted);font-size:13.5px;margin-top:3px}
.streak{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:9px 15px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;white-space:nowrap}
.streak b{color:var(--accent);font-size:15px}
.reset{cursor:pointer;color:var(--muted);font-size:12px;border:1.5px solid var(--line);padding:5px 11px;border-radius:9px;background:var(--card);transition:.15s}
.reset:hover{color:var(--bad);border-color:#e6c4ba}
/* chapter tabs (notebook dividers) */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 -1px;position:relative;z-index:2}
.tabs .tab{background:#f0e7d4;border:1.5px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;
  padding:9px 14px;font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:600;transition:.12s;display:flex;align-items:center}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab .n{display:inline-block;width:18px;height:18px;border-radius:50%;background:#ddd0b6;color:#fff;font-size:10px;text-align:center;line-height:18px;margin-right:6px}
.tabs .tab.on{background:var(--card);color:var(--ink);border-color:var(--line)}
.tabs .tab.on .n{background:var(--accent)}
.tabs .tab.done .n{background:var(--ok)}
/* panel: index + study */
.panel{display:grid;grid-template-columns:236px 1fr;background:var(--card);border:1.5px solid var(--line);
  border-radius:0 16px 16px 16px;box-shadow:var(--shadow);overflow:hidden}
.panel.notabs{border-radius:16px}
.index{border-right:1.5px solid var(--line);padding:18px 13px;background:#fffaf0}
.index .lbl{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.4px;padding:0 6px 9px}
.ix{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;font-size:13px;cursor:pointer;color:var(--ink);transition:.12s}
.ix:hover{background:#f4ebda}
.ix.cur{background:#fbe7c6;font-weight:700}
.ix .chk{width:19px;height:19px;border-radius:6px;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:11px}
.ix .chk.done{background:var(--ok);border-color:var(--ok)}
.ix.cur .chk{border-color:var(--accent)}
.ix .nm{line-height:1.35}
.miniprog{margin:14px 6px 2px;font-size:11px;color:var(--muted)}
.miniprog .b{height:6px;background:#efe2c8;border-radius:99px;margin-top:5px;overflow:hidden}
.miniprog .b>i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .4s}
/* study area (module content) */
.study{padding:24px 30px;min-width:0}
.module{display:none;animation:fade .3s ease}
.module.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:transparent;border:none;box-shadow:none;padding:0}
.crumb{font-size:12px;color:var(--muted);margin-bottom:6px}
.mtitle{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.mtitle .num{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.4px}
.mtitle h2{font-family:var(--serif);font-size:21px;margin:0;letter-spacing:-.2px;color:#2f2a22}
.goal{color:var(--muted);font-size:13.5px;margin:2px 0 4px}
h3.sec{font-size:12px;margin:22px 0 8px;color:var(--accent);font-weight:700;letter-spacing:.3px;text-transform:uppercase}
p{margin:8px 0;font-size:14px}
ul.clean{margin:8px 0;padding-left:20px}
ul.clean li,ol.clean li{margin:5px 0;font-size:13.8px}
ol.clean{margin:8px 0;padding-left:20px}
code.inline{background:var(--code);border:1px solid #ecdfc8;padding:1px 6px;border-radius:5px;font-size:12.5px;color:#9a4a2c;font-family:'JetBrains Mono','Consolas',monospace}
pre{background:var(--code);border:1px solid #ecdfc8;border-radius:11px;padding:14px 16px;overflow:auto;font-size:12.5px;line-height:1.6;color:#5a4f3e;font-family:'JetBrains Mono','Consolas',monospace;margin:8px 0}
.tip{border-left:4px solid var(--accent2);background:#fff6df;padding:11px 15px;border-radius:0 10px 10px 0;font-size:13px;color:#876511;margin:13px 0}
.task{border:1.5px solid #ecdfc6;border-radius:13px;padding:18px 20px;background:#fffaf0;margin-top:12px}
.task h4{margin:0 0 9px;font-size:14.5px;color:var(--accent);font-weight:700}
.task ol.clean,.task ul.clean{margin:6px 0}
.task .hl,.hl{background:linear-gradient(transparent 55%,#ffe9a8 55%);padding:0 3px;font-weight:600}
.grader{margin-top:16px;background:#fbf6ea;border:1.5px solid var(--line);border-radius:13px;padding:17px 19px}
.grader label{font-size:13px;color:var(--muted);display:block;margin-bottom:8px}
textarea{width:100%;min-height:200px;background:var(--card);color:#3a342b;border:1.5px solid var(--line);border-radius:11px;
  padding:13px 15px;font-family:'JetBrains Mono','Consolas',monospace;font-size:12.5px;resize:vertical;line-height:1.6;transition:.15s}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(194,96,63,.12)}
.quiz-q{margin:14px 0}
.quiz-q p.q{font-weight:700;margin-bottom:9px;font-size:14px}
.opt{display:block;background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;margin:7px 0;cursor:pointer;font-size:13.5px;transition:.12s}
.opt:hover{border-color:#dcc9a6;background:#fffdf8}
.opt input{margin-right:10px}
.opt.correct{border-color:var(--ok);background:#eaf6ee}
.opt.wrong{border-color:var(--bad);background:#fbeeea}
.btnrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
button.run{background:var(--accent);color:#fff;border:none;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
button.run:hover{background:#a94e30;transform:translateY(-1px)}
button.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--muted);padding:12px 16px;border-radius:12px;cursor:pointer;font-size:14px;transition:.15s}
button.ghost:hover{color:var(--ink);border-color:#dcc9a6}
button.go{color:var(--ok);border-color:#cfe6d4;font-weight:700}
button.go:hover{background:#eef7f0;color:#2f6b43}
.runout{margin-top:14px;display:none}
.runout.show{display:block}
.run-hint{font-size:12.5px;color:var(--muted);margin:0 0 8px;padding:7px 11px;background:#eef7f0;border:1px solid #cfe6d4;border-radius:8px}
.run-frame{width:100%;height:360px;border:1.5px solid var(--line);border-radius:11px;background:#fff;margin-bottom:10px;display:block}
.run-console{background:#2f2a22;color:#f3ead6;border-radius:11px;padding:12px 14px;font-family:'JetBrains Mono','Consolas',monospace;font-size:12.5px;min-height:46px;max-height:260px;overflow:auto}
.run-lbl{color:#b8a888;font-size:11px;margin-bottom:7px;letter-spacing:.3px;display:flex;align-items:center;gap:6px}
.run-line{white-space:pre-wrap;line-height:1.55}
.run-line.err{color:#ff9b8a}
.run-line.empty{color:#8a8073}
.result{margin-top:18px;display:none}
.result.show{display:block}
.score-head{display:flex;align-items:center;gap:15px;margin-bottom:14px}
.score-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;flex:0 0 auto}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:13.5px;margin:5px 0;background:var(--card);border:1px solid var(--line)}
.checks li .ic{flex:0 0 auto;font-weight:700;font-size:15px}
.checks li.pass{background:#eef7f0;border-color:#cfe6d4}
.checks li.fail{background:#fbeeea;border-color:#eed3c8}
.checks li.pass .ic{color:var(--ok)}
.checks li.fail .ic{color:var(--bad)}
.checks li .hint{color:var(--muted);font-size:12.5px;display:block;margin-top:3px}
.verdict{margin-top:14px;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:700}
.verdict.ok{background:#eaf6ee;color:#2f6b43;border:1px solid #cfe6d4}
.verdict.no{background:#fbeeea;color:#a23f2c;border:1px solid #eed3c8}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
footer{color:var(--muted);font-size:12.5px;text-align:center;margin-top:26px;line-height:1.8}
/* ---- landing ---- */
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:10px}
.track-card{display:block;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 24px;transition:.18s;color:var(--ink);box-shadow:var(--shadow)}
.track-card:hover{border-color:#dcc9a6;transform:translateY(-3px)}
.track-card.soon{opacity:.7}
.track-card h3{margin:0 0 5px;font-size:18px;color:#2f2a22;font-family:var(--serif)}
.track-card .desc{color:var(--muted);font-size:13.5px;min-height:40px}
.track-card .mini-bar{height:8px;background:#efe2c8;border-radius:999px;overflow:hidden;margin-top:14px}
.track-card .mini-bar>i{display:block;height:100%;background:var(--accent);border-radius:999px}
.track-card .stat{font-size:12px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}
.tag{font-size:11px;padding:3px 10px;border-radius:999px;border:1.5px solid #ecdfc6;color:var(--accent);background:#fbe7d8;font-weight:600}
/* responsive */
@media (max-width:760px){
  .panel{grid-template-columns:1fr}
  .index{border-right:none;border-bottom:1.5px solid var(--line)}
  .study{padding:20px}
}