:root { color-scheme: dark; font-family: Inter, "Noto Sans KR", Arial, sans-serif; font-size: 12px; background: #0b1119; color: #edf3fa; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1180px; min-height: 100vh; background: #0b1119; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { min-height: 34px; padding: 0 13px; border: 1px solid #35536f; border-radius: 6px; background: #176e85; color: #fff; cursor: pointer; }
button:hover:not(:disabled) { background: #1b829d; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #61c9dc; outline-offset: 2px; }
button:disabled { opacity: .42; cursor: not-allowed; }
.secondary { background: #1a2430; }
.danger { background: #7b3540; border-color: #a85863; }
.app-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 18px; border-right: 1px solid #263646; background: #091018; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 7px; background: linear-gradient(135deg, #6eb8ed, #42d9c9); color: #061019; font-size: 16px; font-weight: 800; }
.brand small, .topbar small { color: #79b9e7; font-size: 10px; }
h1 { margin: 4px 0 0; font-size: 16px; }
h2 { margin: 4px 0 0; font-size: 16px; }
h3 { margin: 0; font-size: 14px; }
p { line-height: 1.55; }
.scope { margin-bottom: 24px; padding: 13px; border: 1px solid #273747; border-radius: 6px; background: #111922; }
.scope span { display: block; margin-bottom: 8px; color: #7fbbe6; font-size: 10px; text-transform: uppercase; }
.scope p { margin: 7px 0 0; color: #9eb0c2; font-size: 10px; }
nav { display: grid; gap: 7px; }
.nav-item { width: 100%; min-height: 42px; text-align: left; background: #0e161f; border-color: #2a4156; }
.nav-item.active { background: #183149; border-color: #4d90c0; }
.workspace { min-width: 0; padding-bottom: 24px; }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #263646; background: #0c131c; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.metric, .status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid #31465a; border-radius: 999px; color: #c8d7e5; background: #111b26; white-space: nowrap; }
.status.warning { color: #ffd56a; border-color: #705b27; }
.icon-button { width: 36px; padding: 0; font-size: 18px; }
.message { margin: 14px 24px 0; padding: 10px 12px; border-left: 3px solid #4da4c0; background: #101c27; color: #b9c9d7; }
.message.error { border-color: #e16872; color: #ffb5bb; }
.message.success { border-color: #4fc9a2; color: #9be5ca; }
.notification-panel { margin: 14px 24px 0; }
.view { display: none; padding: 16px 24px 0; }
.view.active { display: block; }
.queue-layout, .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.command-layout { display: grid; grid-template-columns: minmax(460px, .9fr) minmax(480px, 1.1fr); gap: 14px; }
.surface { min-width: 0; padding: 16px; border: 1px solid #2a3b4d; border-radius: 7px; background: #131c28; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading p { margin: 5px 0 0; color: #92a8ba; font-size: 10px; }
.help { width: 28px; min-height: 28px; padding: 0; border-radius: 50%; background: #1b2734; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { padding: 10px 9px; border-bottom: 1px solid #314457; color: #8fa9bf; font-size: 10px; text-align: left; }
td { padding: 12px 9px; border-bottom: 1px solid #273747; overflow-wrap: anywhere; }
tr[data-item-id] { cursor: pointer; }
tr[data-item-id]:hover, tr.selected { background: #182c3d; }
.empty { color: #8295a8; text-align: center; }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #263747; }
dt { color: #839bb0; }
dd { margin: 0; overflow-wrap: anywhere; }
.command-row { display: flex; gap: 8px; margin-top: 15px; }
.evidence-list { display: grid; gap: 9px; }
.evidence-card { padding: 12px; border: 1px solid #33485c; border-radius: 6px; background: #0f1822; cursor: pointer; }
.evidence-card.selected { border-color: #63bed4; background: #143040; }
.evidence-card strong { display: block; margin-bottom: 6px; }
.evidence-card pre { margin: 0; color: #b6c7d4; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.check-line { display: flex; align-items: center; gap: 8px; padding: 13px 0; }
.hint { color: #8fa5b9; font-size: 10px; }
.facts { margin-top: 15px; color: #9fb0c0; overflow-wrap: anywhere; }
form { display: grid; gap: 9px; }
fieldset { display: flex; gap: 18px; margin: 0; padding: 12px; border: 1px solid #344a5f; border-radius: 6px; }
fieldset label { display: flex; align-items: center; gap: 5px; }
label { color: #b6c7d6; }
textarea, input, select { width: 100%; border: 1px solid #364c60; border-radius: 5px; background: #0c151e; color: #eef5fb; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: #61c9dc; }
textarea { min-height: 98px; padding: 10px; resize: vertical; }
input, select { min-height: 34px; padding: 0 9px; }
.timeline { margin: 0; padding-left: 20px; }
.timeline li { padding: 8px 0; border-bottom: 1px solid #263747; overflow-wrap: anywhere; }
.form-stack { display: grid; gap: 22px; }
.revision-list { display: grid; gap: 8px; max-height: 310px; overflow: auto; }
.revision-card { padding: 10px; border: 1px solid #33485c; border-radius: 6px; background: #0e1721; }
.revision-card.selected { border-color: #63bed4; }
.revision-card p { margin: 5px 0; color: #a8b8c6; overflow-wrap: anywhere; }
.revision-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.revision-controls label, .revision-controls input, #revision-resubmit { grid-column: 1 / -1; }
.read-only { max-width: 920px; }
.expert-knowledge-layout { display: grid; grid-template-columns: minmax(360px, .72fr) minmax(500px, 1.28fr); gap: 14px; }
.expert-ruleset-source, .expert-ruleset-form { min-height: 300px; }
.expert-ruleset-results { grid-column: 1 / 2; min-height: 350px; }
.expert-ruleset-detail { grid-column: 2 / 3; grid-row: 2; min-height: 350px; }
.expert-ruleset-gate { min-height: 38px; margin-top: 14px; padding: 10px; border: 1px solid #705b27; border-radius: 5px; color: #ffd56a; background: #211d13; }
.expert-ruleset-gate.ready { border-color: #28725e; color: #9be5ca; background: #10231f; }
.expert-ruleset-form textarea { min-height: 112px; font-family: Consolas, "Courier New", monospace; }
.expert-field-error { min-height: 18px; color: #ffb5bb; font-size: 10px; }
.expert-ruleset-summary { display: grid; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 8px; margin-bottom: 12px; }
.expert-ruleset-summary span { min-height: 48px; padding: 9px; border: 1px solid #30465a; border-radius: 5px; background: #0e1721; }
.expert-ruleset-summary strong { display: block; margin-top: 4px; font-size: 14px; }
.expert-ruleset-table { max-height: 250px; }
.expert-ruleset-table th:nth-child(1) { width: 42%; }
.expert-ruleset-table th:nth-child(2) { width: 17%; }
.expert-ruleset-table th:nth-child(3), .expert-ruleset-table th:nth-child(4) { width: 20.5%; }
.expert-ruleset-detail dl { max-height: 286px; overflow: auto; }
.expert-ruleset-detail dd { white-space: pre-wrap; }
@media (max-width: 1280px) { .app-shell { grid-template-columns: 238px minmax(0, 1fr); } .queue-layout, .detail-layout, .command-layout { grid-template-columns: 1fr; } }