:root{--bg:#f4f6fa;--card:#fff;--ink:#17233a;--mut:#667085;--line:#dbe1ea;--navy:#17325c;--gold:#f2b705;--gbg:#fff7dc}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
header{background:var(--navy);color:#fff;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
h1{margin:0;font-size:1.2rem;letter-spacing:-.02em}#bar{display:flex;gap:8px;align-items:center}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
button,select,input,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;margin:4px 0 10px}
textarea{min-height:110px;resize:vertical}
button{border:0;border-radius:8px;padding:9px 14px;background:var(--navy);color:#fff;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:inherit;border:1px solid #ffffff66;padding:5px 10px;font-weight:500}
main button.ghost{border-color:var(--line);color:var(--mut)}
.tabs,.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip,.tabs button{background:#fff;color:var(--ink);border:1px solid var(--line);padding:6px 12px;font-weight:500}
[aria-pressed=true]{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.badge{background:var(--gold);color:#222;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700}
.item{display:block;text-decoration:none;color:inherit}.item:hover{border-color:var(--navy)}
.item b{display:block;margin:4px 0}.meta{font-size:.82rem;color:var(--mut)}
.tag{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:99px;background:#e8eef9;color:var(--navy);margin-right:4px}
.tag.pf{background:#ffe9e0;color:#a63a00}.tag.ok{background:#e0f5e8;color:#16703a}.tag.sid{background:#222;color:#fff}
.ans.pin{background:var(--gbg);border-color:var(--gold)}.pre{white-space:pre-wrap;word-break:break-word}
.err{color:#b42318;min-height:1.4em;margin:0}details summary{cursor:pointer;font-weight:700}
dialog{border:0;border-radius:14px;padding:20px;max-width:340px;text-align:center}dialog img{width:240px;height:240px;image-rendering:pixelated}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}