/* TC 자동화 — cubeDeploy 디자인 시스템(Supabase Studio 계열)을 따른다.
   무채색 표면 + 단일 그린 강조색, 1px 헤어라인, 반경 6px, 아이콘 레일(48) + 섹션 패널(230), 대문자 모노 섹션 라벨.
   상태는 점 + 텍스트. 경고를 성공과 같은 색으로 그리지 않는다. 대기는 색을 쓰지 않는다. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #ffffff;
  --bg-panel: #fbfbfb;
  --bg-subtle: #f6f6f6;
  --bg-sunken: #f1f1f1;
  --border: #e8e8e8;
  --border-strong: #dcdcdc;
  --fg: #1a1a1a;
  --fg-2: #5c5c5c;
  --fg-3: #909090;
  --brand: #2fa871;
  --brand-fill: #a5e8c6;
  --brand-ink: #0e3d29;
  --success: #17916a; --success-bg: #e8f6f0;
  --warn: #9a6b00;    --warn-bg: #fdf5e3;
  --danger: #b42318;  --danger-bg: #fdf0ef;
  --info: #1a63c4;    --info-bg: #eef3fc;
  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --sans: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: #227d55; text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: transparent; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; border-radius: var(--r-sm); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 13px; height: 13px; }
svg.i.lg { width: 19px; height: 19px; }
[hidden] { display: none !important; }

/* ── 셸 ── */
.shell { display: flex; flex-direction: column; height: 100vh; }
.body { display: flex; flex: 1; min-height: 0; }
.topbar { height: 44px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
.logo { color: var(--brand); display: flex; padding: 0 4px 0 2px; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumb { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--r); color: var(--fg); font-size: 13px; white-space: nowrap; }
a.crumb:hover { background: var(--bg-subtle); text-decoration: none; color: var(--fg); }
.crumb.cur { color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.slash { color: #d6d6d6; font-size: 14px; padding: 0 2px; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; margin-left: 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 500; white-space: nowrap; }
a.pill:hover { background: var(--bg-subtle); text-decoration: none; color: var(--fg); }
.pill.off { color: var(--danger); border-color: #f0cfcc; }
.pill.off .dot { background: var(--danger); }
.pill.on .dot { background: var(--success); }
.pill.busy .dot { background: var(--info); }
.iconbtn { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--fg-2); background: var(--bg); }
.iconbtn:hover { background: var(--bg-subtle); color: var(--fg); text-decoration: none; }

.rail { width: 48px; flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.rail-i { width: 32px; height: 32px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; color: var(--fg-3); }
.rail-i:hover { color: var(--fg); background: var(--bg-sunken); text-decoration: none; }
.rail-i.on { background: var(--bg-sunken); color: var(--fg); }
.rail-sp { flex: 1; }

.panel { width: 230px; flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.panel-h { height: 56px; flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.panel-b { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.navlabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--fg-3); padding: 0 8px; margin: 14px 0 6px; text-transform: uppercase; }
.navlabel:first-child { margin-top: 0; }
.navitem { display: flex; align-items: center; gap: 8px; min-height: 29px; padding: 4px 8px; border-radius: var(--r); color: var(--fg-2); font-size: 13px; line-height: 1.35; }
.navitem:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; }
.navitem.on { background: #ededed; color: var(--fg); font-weight: 500; }
.navitem .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navcount { margin-left: auto; font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.navitem > .dot { margin-left: auto; }
.panel-note { font-size: 12px; color: var(--fg-3); padding: 6px 8px; }

.content { flex: 1; min-width: 0; overflow-y: auto; }
.content-in { padding: 26px 32px 48px; max-width: 1320px; }
.content-in.wide { max-width: none; }

/* ── 페이지 머리 · 탭 ── */
.pagehead { display: flex; align-items: flex-start; gap: 16px; }
.h1 { font-size: 23px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub { font-size: 13px; color: var(--fg-2); margin-top: 5px; text-wrap: pretty; }
.head-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-top: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding-bottom: 9px; font-size: 13px; color: var(--fg-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--fg); text-decoration: none; }
.tab.on { color: var(--fg); font-weight: 500; border-bottom-color: var(--fg); }
.tab .n { color: var(--fg-3); margin-left: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.sectlabel { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--fg-3); text-transform: uppercase; }
.sect-row { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; }
.sect-row .meta { font-size: 12px; color: var(--fg-3); }
.mt { margin-top: 20px; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.small { font-size: 12px; }

/* ── 원자 컴포넌트 ── */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r); font-size: 13px; font-weight: 500; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); white-space: nowrap; }
.btn:hover { background: var(--bg-subtle); text-decoration: none; color: var(--fg); }
.btn-primary { background: var(--brand-fill); border-color: #8bd9b0; color: var(--brand-ink); }
.btn-primary:hover { background: #93e0ba; color: var(--brand-ink); }
.btn-ghost { border-color: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-danger { border-color: #f0cfcc; color: var(--danger); background: var(--bg); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: var(--bg); }
.btn-primary:disabled { background: var(--brand-fill); }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; letter-spacing: .02em; border: 1px solid var(--border-strong); color: var(--fg-2); background: var(--bg); white-space: nowrap; }
.badge-info { border-color: #c4d6f2; color: var(--info); background: var(--info-bg); }
.badge-ok { border-color: #bfe3d4; color: var(--success); background: var(--success-bg); }
.badge-warn { border-color: #e6cf9a; color: var(--warn); background: var(--warn-bg); }
.badge-danger { border-color: #f0cfcc; color: var(--danger); background: var(--danger-bg); }
.h1 .badge { font-size: 12px; height: 22px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--bg-subtle); border: 1px solid var(--border); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; background: var(--fg-3); display: inline-block; }

/* 상태: 점 + 텍스트 */
.st { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--fg-2); }
.st .dot { background: var(--fg-3); }
.st.ok { color: var(--success); } .st.ok .dot { background: var(--success); }
.st.warn { color: var(--warn); } .st.warn .dot { background: var(--warn); }
.st.bad { color: var(--danger); } .st.bad .dot { background: var(--danger); }
.st.run { color: var(--info); } .st.run .dot { background: var(--info); box-shadow: 0 0 0 3px rgba(26, 99, 196, .13); }
.st.gray { color: var(--fg-2); } .st.gray .dot { background: var(--fg-2); }

.card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
.card.clip { overflow: hidden; }
.card-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); min-height: 46px; }
.card-t { font-size: 13px; font-weight: 600; }
.card-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-b { padding: 14px; }
.card-f { padding: 13px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.tile { padding: 13px 15px; }
.tile .v { font-size: 27px; font-weight: 600; letter-spacing: -.02em; margin-top: 7px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .v.sm { font-size: 19px; line-height: 1.35; }
.tile .d { font-size: 12px; color: var(--fg-2); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.input, input[type=text], input[type=url], select, textarea {
  height: 30px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg); font-size: 13px; color: var(--fg); width: 100%;
}
textarea { height: auto; min-height: 84px; padding: 7px 9px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--brand); width: 14px; height: 14px; }

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; font-weight: 500; color: var(--fg-2); letter-spacing: .04em; background: var(--bg-panel); padding: 0 12px; height: 34px; border-bottom: 1px solid var(--border); white-space: nowrap; font-family: var(--mono); text-transform: uppercase; }
.tbl td { padding: 9px 12px; height: 41px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--fg); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--bg-panel); }
.tbl .t-mut { color: var(--fg-2); }
.tbl .ellip { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .nowrap { white-space: nowrap; }
.tbl .r { text-align: right; }
.tbl .sub { display: block; font-size: 12px; color: var(--fg-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .code { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.tbl a.rowlink { color: var(--fg); font-weight: 500; }
.tbl a.rowlink:hover { color: var(--brand); }
.tbl-wrap { overflow-x: auto; }

.callout { display: flex; gap: 9px; padding: 11px 13px; border: 1px solid #e6cf9a; background: var(--warn-bg); border-radius: var(--r); color: #6f4d00; font-size: 12.5px; line-height: 1.55; margin-top: 16px; }
.callout.bad { border-color: #f0cfcc; background: var(--danger-bg); color: #8a1c13; }
.callout.info { border-color: #c4d6f2; background: var(--info-bg); color: #164f9c; }
.callout.ok { border-color: #bfe3d4; background: var(--success-bg); color: #0f6b4e; }
.callout svg { margin-top: 1px; }
.callout p + p { margin-top: 3px; }
.callout code { font-family: var(--mono); font-size: 12px; }

.empty { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.empty .ic { color: var(--fg-3); }
.empty strong { font-size: 13px; font-weight: 600; }
.empty span { font-size: 12px; color: var(--fg-2); }
.empty .btn { margin-top: 4px; }
td .empty { border: 0; }

.progress { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; display: block; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.progress.bad > span { background: var(--danger); }

.loading { color: var(--fg-2); padding: 18px 0; display: flex; align-items: center; gap: 8px; }
.spin { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-strong); border-top-color: var(--brand); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ── 폼 ── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > .lbl { font-size: 12px; font-weight: 500; color: var(--fg); }
.field > .help { font-size: 12px; color: var(--fg-3); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg); cursor: pointer; }
.check .faint { font-size: 12px; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; }
.inline-form .field { flex: 1; }

/* 새 잡: 종류 고르기 */
.kind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.kind-col { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.kind-col .sectlabel { padding: 0 6px 6px; display: flex; gap: 8px; }
.kind { display: block; padding: 8px 10px; border-radius: var(--r); border: 1px solid transparent; color: var(--fg); }
.kind:hover { background: var(--bg-subtle); text-decoration: none; color: var(--fg); }
.kind b { font-weight: 500; display: block; }
.kind small { display: block; font-size: 12px; color: var(--fg-2); line-height: 1.45; margin-top: 1px; }
.kind[aria-current="true"] { border-color: #8bd9b0; background: color-mix(in srgb, var(--brand-fill) 28%, var(--bg)); }

/* ── 잡 상세 ── */
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 16px; margin-top: 20px; align-items: start; }
.steps { padding: 16px 0; }
.step { display: flex; gap: 12px; padding: 0 16px; }
.step .rail-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step .node { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--brand); }
.step .node svg { width: 12px; height: 12px; stroke-width: 2; }
.step .node.warn { background: var(--warn); }
.step .node.bad { background: var(--danger); }
.step .node.run { background: var(--info); box-shadow: 0 0 0 4px rgba(26, 99, 196, .13); }
.step .node.wait { background: var(--bg); border: 1.5px solid var(--border-strong); color: var(--fg-3); }
.step .line { flex: 1; width: 1.5px; background: var(--border-strong); margin: 4px 0; min-height: 10px; }
.step:last-child .line { display: none; }
.step .body-col { flex: 1; min-width: 0; padding-bottom: 16px; }
.step:last-child .body-col { padding-bottom: 0; }
.step .head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.step .name { font-size: 13px; font-weight: 500; color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .name.wait { color: var(--fg-3); }
.step .head .replay { margin-left: auto; height: 22px; padding: 0 7px; font-size: 12px; }
.step .head .replay + .time { margin-left: 8px; }
.step .time { margin-left: auto; font-size: 12px; color: var(--fg-3); font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step .desc { font-size: 12px; color: var(--fg-2); margin-top: 3px; overflow-wrap: anywhere; }
.step .desc.bad { color: var(--danger); }
.step .acts { display: flex; gap: 6px; margin-top: 6px; }

.log { padding: 11px 14px; background: var(--bg-panel); height: 520px; overflow: auto; }
.log.tall { height: 68vh; }
.log .e { display: flex; gap: 10px; padding: 3px 0; }
.log .ts { font-family: var(--mono); font-size: 11.5px; color: #b8b8b8; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.log .tx { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); line-height: 1.55; word-break: break-all; white-space: pre-wrap; }
.log .t-status .tx, .log .t-phase .tx { color: var(--fg); font-weight: 500; }
.log .t-results .tx, .log .t-answer .tx { color: var(--success); }
.log .t-stderr .tx, .log .t-error .tx, .log .t-tool_fail .tx, .log .t-deny .tx { color: var(--danger); }
.log .t-question .tx { color: var(--warn); font-weight: 500; }
.log .t-assistant .tx { color: var(--fg); font-family: var(--sans); font-size: 12.5px; }
.log .t-tool .tx, .log .t-tool_done .tx, .log .t-cmd .tx { color: var(--fg-3); }

.ask { margin-top: 20px; border-color: #e6cf9a; }
.ask .card-h { background: var(--warn-bg); border-bottom-color: #e6cf9a; }
.ask .card-t { color: #6f4d00; }
.ask .q + .q { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ask .q > p { font-weight: 500; margin-bottom: 8px; }
.opts { display: grid; gap: 6px; margin-bottom: 10px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; }
.opt:hover { background: var(--bg-subtle); }
.opt:has(input:checked) { border-color: #8bd9b0; background: color-mix(in srgb, var(--brand-fill) 22%, var(--bg)); }
.opt input { margin-top: 3px; }
.opt small { display: block; color: var(--fg-2); font-size: 12px; }

pre.report { white-space: pre-wrap; font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--fg); padding: 14px 16px; max-width: 110ch; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
.kv > div { padding: 9px 14px; border-bottom: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.kv > div:nth-child(odd) { font-size: 12px; color: var(--fg-2); background: var(--bg-panel); }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }

.shots details { border-bottom: 1px solid var(--border); }
.shots details:last-child { border-bottom: 0; }
.shots summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.shots summary::-webkit-details-marker { display: none; }
.shots summary .chev { color: var(--fg-3); transition: transform .15s; display: flex; }
.shots details[open] summary .chev { transform: rotate(90deg); }
.shots summary .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.contact { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 4px 14px 14px; }
.contact figure { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.contact img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--bg-sunken); }
.contact figcaption { font-family: var(--mono); font-size: 11px; color: var(--fg-2); padding: 5px 7px; border-top: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; }
.files a { font-family: var(--mono); font-size: 12px; }

/* 점검 */
.checklist .row { display: grid; grid-template-columns: 24px 200px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); align-items: center; }
.checklist .row:last-child { border-bottom: 0; }
.checklist .mark { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--success); }
.checklist .mark.ng { background: var(--danger); }
.checklist .mark svg { width: 11px; height: 11px; stroke-width: 2.2; }
.checklist .detail { font-family: var(--mono); font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }

/* ── 세션 재생 ── */
.player { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 20px; align-items: start; }
.player:fullscreen { background: var(--bg); padding: 16px; overflow: auto; }
.screen { overflow: hidden; }
.stage-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); min-width: 0; }
.stage-bar .url { font-family: var(--mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.stage-bar .counter { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: calc(100vh - 330px); min-height: 240px; background: var(--bg-sunken); }
.player:fullscreen .stage { aspect-ratio: auto; max-height: none; height: calc(100vh - 250px); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage.bad::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--danger); pointer-events: none; }
.timeline { display: flex; gap: 4px; height: 24px; padding: 7px 14px; cursor: pointer; touch-action: none; user-select: none; border-top: 1px solid var(--border); box-sizing: content-box; }
.tl-case { display: flex; flex: var(--w, 1) 1 0; gap: 1px; min-width: 0; }
.tl-f { flex: 1 1 0; min-width: 1px; background: #dfe3e1; border-radius: 1px; }
.tl-f.doc { box-shadow: inset 1px 0 0 var(--fg-3); }
.tl-f.bad { background: var(--danger); }
.tl-f.warn { background: #d9b45a; }
.tl-f.on { background: var(--brand); transform: scaleY(1.6); border-radius: 2px; }
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border); }
.transport { display: flex; align-items: center; gap: 2px; }
.transport .btn { padding: 0 7px; }
.transport .play { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 999px; }
.transport svg.i { width: 15px; height: 15px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
.seg button { height: 26px; padding: 0 9px; font-size: 12px; color: var(--fg-2); border-right: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--bg-subtle); }
.seg button[aria-pressed="true"] { background: var(--bg-sunken); color: var(--fg); font-weight: 500; }
.controls .end { margin-left: auto; }
.filmstrip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: var(--bg-panel); }
.film-f { flex: 0 0 104px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; position: relative; background: var(--bg); }
.film-f img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--bg-sunken); }
.film-f span { position: absolute; left: 3px; bottom: 3px; font-family: var(--mono); font-size: 10.5px; background: var(--bg); color: var(--fg-2); padding: 0 4px; border-radius: 3px; border: 1px solid var(--border); }
.film-f.doc { margin-left: 8px; }
.film-f.bad { border-color: var(--danger); }
.film-f.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.inspector { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: 0; }
.case-list { max-height: 280px; overflow: auto; }
.case-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--fg); }
.case-row:last-child { border-bottom: 0; }
.case-row .code { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.case-row .t { font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-row:hover { background: var(--bg-subtle); }
.case-row[aria-current="true"] { background: var(--bg-sunken); box-shadow: inset 2px 0 0 var(--brand); }
.case-row[aria-current="true"] .t { color: var(--fg); }
.keys { font-size: 12px; color: var(--fg-3); }
.keys kbd { font-family: var(--mono); font-size: 11px; color: var(--fg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 4px; }

/* ── 좁은 화면 ── */
@media (max-width: 1180px) {
  .run-grid, .player { grid-template-columns: minmax(0, 1fr); }
  .inspector { position: static; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .panel { display: none; }
  .kind-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rail { display: none; }
  .content-in { padding: 18px 16px 40px; }
  .crumb.org, .slash.org, .pill { display: none; }
  .pagehead { flex-direction: column; }
  .head-actions { margin-left: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .checklist .row { grid-template-columns: 24px minmax(0, 1fr); }
  .checklist .detail { grid-column: 2; }
  .stage-bar .url { display: none; }
}