:root { --bg:#f6f7f9; --fg:#1d1f23; --muted:#6b7280; --line:#e5e7eb; --accent:#111827; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; background:var(--bg); color:var(--fg); -webkit-user-select:none; user-select:none; }
header { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header h1 { font-size:16px; margin:0; flex:1; }
header .who { color:var(--muted); font-size:13px; }
button, .btn { font:inherit; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
main { max-width: 980px; margin: 0 auto; padding: 20px 16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.muted { color:var(--muted); font-size:13px; }
.tier { margin-top:18px; }
.tier h2 { font-size:15px; margin:0 0 6px; }
.course h3 { font-size:14px; margin:12px 0 4px; color:var(--muted); }
details.tier > summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; }
details.tier > summary::-webkit-details-marker { display:none; }
details.tier > summary h2 { margin:0; }
details.tier > summary h2::before { content:"▸ "; color:var(--muted); }
details.tier[open] > summary h2::before { content:"▾ "; }
details.tier[open] > summary { margin-bottom:6px; }
.tier.locked { opacity:.55; }
.tier.locked h2 { margin:0 0 4px; }
details.course { border-top:1px solid var(--line); }
details.course summary { display:flex; justify-content:space-between; align-items:center; padding:10px 8px; cursor:pointer; font-weight:600; list-style:none; }
details.course summary::-webkit-details-marker { display:none; }
details.course summary::before { content:"▸"; margin-right:8px; color:var(--muted); }
details.course[open] summary::before { content:"▾"; }
details.course summary > span:first-child { flex:1; }
details.course ul.docs { padding-left:18px; margin-bottom:6px; }
ul.docs { list-style:none; padding:0; margin:0; }
ul.docs li a { display:flex; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--fg); text-decoration:none; }
ul.docs li a:hover { background:#f0f1f4; }
input[type=text], input[type=date], input[type=number], textarea, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
/* 뷰어 */
#stage { display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 0 60px; }
#stage canvas { max-width:100%; box-shadow:0 1px 6px rgba(0,0,0,.15); background:#fff; pointer-events:none; }
#bar { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:10px; padding:8px; background:rgba(255,255,255,.95); border-top:1px solid var(--line); font-size:14px; }
.notice { font-size:12px; color:var(--muted); text-align:center; padding:6px; }
/* 인쇄 차단: 인쇄 시 아무것도 찍히지 않게 */
@media print { html, body { display:none !important; } }