:root { --ink:#1d2433; --mute:#6b7385; --line:#e3e6ee; --ok:#1f8a4c; --warn:#b26a00; --bad:#c62828; --sun:#f5a524; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; color:var(--ink); background:#f6f7fb; line-height:1.55; }
header { padding:28px 20px 8px; max-width:880px; margin:0 auto; }
h1 { margin:0 0 6px; font-size:26px; }
h1 .tag { font-size:13px; background:var(--sun); color:#3a2500; padding:2px 8px; border-radius:999px; vertical-align:middle; }
.sub { margin:0; color:var(--mute); }
main { max-width:880px; margin:0 auto; padding:8px 20px 40px; display:grid; gap:14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
h2 { margin:0 0 10px; font-size:18px; display:flex; align-items:center; gap:8px; }
form { display:flex; gap:8px; }
input[type=search] { flex:1; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
button { font-size:15px; padding:10px 16px; border-radius:10px; border:0; background:var(--ink); color:#fff; cursor:pointer; }
button:disabled { background:#b8bdc9; cursor:not-allowed; }
#run { margin-top:12px; background:var(--sun); color:#3a2500; font-weight:600; }
#run:disabled { background:#e9dcc3; color:#8a7a5c; }
.hint { color:var(--mute); font-size:13px; margin:8px 0; }
.err { color:var(--bad); }
.cand { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:10px; margin-top:8px; cursor:pointer; }
.cand:has(input:checked) { border-color:var(--sun); background:#fff8ea; }
.cand small { color:var(--mute); }
#steps { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
#steps li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:#f2f3f7; }
#steps .n { display:inline-grid; place-items:center; min-width:34px; height:24px; border-radius:6px; background:#fff; font-size:12px; font-weight:700; }
#steps .st { margin-left:auto; font-style:normal; font-size:13px; color:var(--mute); }
#steps li.ok .st { color:var(--ok); font-weight:600; } #steps li.warn .st { color:var(--warn); font-weight:600; }
#steps li.bad .st { color:var(--bad); font-weight:600; } #steps li.run .st { color:var(--ink); }
#steps li.out, #steps li.skip { opacity:.55; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:#eee; }
.badge.ok { background:#e3f4ea; color:var(--ok); } .badge.warn { background:#fff1dc; color:var(--warn); } .badge.bad { background:#fde7e7; color:var(--bad); }
.msg { margin:0 0 10px; color:var(--mute); font-size:14px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { width:38%; color:var(--mute); font-weight:500; }
.none { color:var(--warn); background:#fff6e6; padding:1px 6px; border-radius:6px; font-size:13px; }
.row { display:grid; grid-template-columns: 1fr 220px; gap:14px; align-items:start; }
.parcel { margin:0; text-align:center; } .parcel svg { width:100%; max-height:220px; } .parcel path { fill:#fff1d6; stroke:var(--sun); stroke-width:2; }
.parcel figcaption { font-size:12px; color:var(--mute); }
.bld { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-top:8px; }
.bld summary { cursor:pointer; font-weight:600; }
footer { max-width:880px; margin:0 auto; padding:0 20px 30px; color:var(--mute); font-size:12px; }
@media (max-width:640px) { .row { grid-template-columns:1fr; } form { flex-direction:column; } }
.note { font-size:13px; color:var(--warn); background:#fffaf0; border:1px solid #f3e2c2; border-radius:8px; padding:8px 10px; margin:0 0 10px; }