:root{--bg:#f7f7f5;--card:#fff;--ink:#1d1f23;--muted:#6b7078;--line:#e3e4e7;--accent:#2f6f4f;--warn:#9a5b00;--bad:#b42318;--chip:#eef1ee}
@media (prefers-color-scheme:dark){:root{--bg:#141518;--card:#1c1e22;--ink:#e8e9ec;--muted:#9aa0a8;--line:#2c2f35;--accent:#7cc39c;--warn:#e0a54a;--bad:#f0817a;--chip:#252a27}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.brand strong{margin-right:6px}.who{color:var(--muted);font-size:13px}
main{padding:12px 16px;max-width:1200px;margin:0 auto}
.gate{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:20px}
.gate h2{margin:0 0 8px;font-size:18px}
.bar,.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:10px}
select,input,button,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
input[type=search]{flex:1 1 200px;min-width:0}
button{cursor:pointer}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button:disabled{opacity:.5;cursor:default}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);font-weight:600}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.link{font-size:13px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.link.ok{border-color:var(--accent)}.link.off,.link.none{border-color:var(--warn);color:var(--warn)}.link.err{border-color:var(--bad);color:var(--bad)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
@media (max-width:800px){.split{grid-template-columns:minmax(0,1fr)}}
.list,.detail{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}
.summary{color:var(--muted);font-size:13px;margin-bottom:6px}
ul{list-style:none;margin:0;padding:0}
li.item{border-top:1px solid var(--line);padding:8px 4px;cursor:pointer;overflow-wrap:anywhere}
li.item:first-child{border-top:0}li.item[aria-selected=true]{background:var(--chip);border-radius:6px}
.row1{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.preview{margin-top:2px}
.chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--chip);font-size:12px;color:var(--ink)}
.st-received{background:#fde9c8;color:#6a3d00}.st-in_progress{background:#d9e8ff;color:#123d7a}.st-answered{background:#d7f0e1;color:#14532d}.st-closed{background:#e6e6e6;color:#444}
.note{padding:10px;border-radius:8px;border:1px dashed var(--line);color:var(--muted);margin:8px 0}
.note.err{border-color:var(--bad);color:var(--bad)}.note.off{border-color:var(--warn);color:var(--warn)}
.detail h2{font-size:17px;margin:0 0 6px;overflow-wrap:anywhere}
.body{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border-radius:8px;padding:10px;margin:8px 0}
dl.ctx{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:13px;margin:8px 0}
dl.ctx dt{color:var(--muted)}dl.ctx dd{margin:0;overflow-wrap:anywhere}
.answers li{border-left:3px solid var(--accent);padding:4px 10px;margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.answers .when{display:block;color:var(--muted);font-size:12px}
textarea{width:100%;min-height:110px;resize:vertical}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.muted{color:var(--muted)}.msg{margin-top:8px;font-size:13px}.msg.err{color:var(--bad)}.msg.ok{color:var(--accent)}