/* ============================================================================
   운영 홈 (T-11) + 봇 작업상태 카드/배지/LiveDot (T-04·T-06·T-12)
   docs/reports/dashboard-redesign-2026-07-07/ · 2026-07-07 Opus 4.8
   ⚠ --ds-* 토큰만 사용(하드코드 hex 금지). 신규 컴포넌트 SoT.
   ============================================================================ */

.oh-shell { padding: var(--ds-sp-4) var(--ds-sp-5) var(--ds-sp-8); }

.oh-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ds-sp-3); margin-bottom: var(--ds-sp-5); flex-wrap: wrap;
}
.oh-head h2 {
  font-family: var(--ds-font); font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold);
  color: var(--ds-text); letter-spacing: .01em; margin: 0;
}
.oh-head .oh-sub { color: var(--ds-text-3); font-size: var(--ds-fs-sm); }
.oh-head .oh-actions { display: flex; gap: var(--ds-sp-2); align-items: center; }
.oh-refresh {
  font-size: var(--ds-fs-sm); color: var(--ds-text-2); background: var(--ds-bg-1);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding: var(--ds-sp-2) var(--ds-sp-3); cursor: pointer; transition: var(--ds-motion);
}
.oh-refresh:hover { border-color: var(--ds-accent-line); color: var(--ds-text); }
.oh-refresh:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* ── KPI StatCard 행 (T-04) ── */
.oh-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-sp-3); margin-bottom: var(--ds-sp-6);
}
.oh-statcard {
  background: var(--ds-bg-1); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); padding: var(--ds-sp-4);
  display: flex; flex-direction: column; gap: var(--ds-sp-1);
  position: relative; overflow: hidden;
}
.oh-statcard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--_accent, var(--ds-accent));
}
.oh-statcard .k-label {
  font-size: var(--ds-fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ds-text-3); font-family: var(--ds-font-mono);
}
.oh-statcard .k-value {
  font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-bold); line-height: 1;
  color: var(--_accent, var(--ds-text));
  /* D-01: 관제 수치=JetBrains Mono tabular — 갱신 시 폭 흔들림 제거 (02_PLAN §2) */
  font-family: var(--ds-font-mono); font-feature-settings: "tnum";
  display: flex; align-items: baseline; gap: var(--ds-sp-2);
}
.oh-statcard .k-value small { font-size: var(--ds-fs-lg); color: var(--ds-text-3); font-weight: var(--ds-fw-med); }
.oh-statcard .k-sub { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }

/* ── 섹션 ── */
.oh-section { margin-bottom: var(--ds-sp-6); }
.oh-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ds-sp-3);
}
.oh-section-head h3 {
  font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semi); color: var(--ds-text);
  margin: 0; display: flex; align-items: center; gap: var(--ds-sp-2);
}
.oh-section-head .oh-link {
  font-size: var(--ds-fs-sm); color: var(--ds-accent); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.oh-section-head .oh-link:hover { text-decoration: underline; }

/* ── 봇 플릿 그리드 (T-12 BotStatusCard) ── */
.oh-fleet {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ds-sp-3);
}
.oh-botcard {
  background: var(--ds-bg-1); border: 1px solid var(--ds-border);
  border-left: 3px solid var(--_state, var(--ds-neutral));
  border-radius: var(--ds-radius); padding: var(--ds-sp-3) var(--ds-sp-4);
  display: flex; flex-direction: column; gap: var(--ds-sp-2);
}
.oh-botcard.is-unknown { border-left-style: dashed; }
.oh-botcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-2); }
.oh-botcard .b-name { font-weight: var(--ds-fw-semi); color: var(--ds-text); font-size: var(--ds-fs-base); }
.oh-botcard .b-metrics { display: flex; flex-direction: column; gap: 2px; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.oh-botcard .b-metrics .b-today strong { color: var(--ds-text); font-weight: var(--ds-fw-semi); }
.oh-botcard .b-host {
  font-size: var(--ds-fs-2xs); color: var(--ds-text-3); font-family: var(--ds-font-mono);
  display: flex; align-items: center; gap: var(--ds-sp-2); flex-wrap: wrap;
}
.oh-botcard .b-share {
  background: var(--ds-neutral-bg); color: var(--ds-text-3);
  border-radius: var(--ds-radius-pill); padding: 1px var(--ds-sp-2); font-size: var(--ds-fs-2xs);
}
.oh-botcard .b-actions { display: flex; gap: var(--ds-sp-2); margin-top: var(--ds-sp-1); }
.oh-btn {
  font-size: var(--ds-fs-xs); color: var(--ds-text-2); background: var(--ds-bg-2);
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  padding: var(--ds-sp-1) var(--ds-sp-3); cursor: pointer; transition: var(--ds-motion);
}
.oh-btn:hover { border-color: var(--ds-accent-line); color: var(--ds-text); }
.oh-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.oh-btn.danger:hover { border-color: var(--ds-danger); color: var(--ds-danger); }

/* ── StatusBadge (T-06) — 6 시맨틱 ── */
.oh-badge {
  display: inline-flex; align-items: center; gap: var(--ds-sp-1);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi); letter-spacing: .02em;
  padding: 2px var(--ds-sp-2); border-radius: var(--ds-radius-pill);
  color: var(--_state, var(--ds-neutral)); background: var(--_state-bg, var(--ds-neutral-bg));
  white-space: nowrap;
}

/* ── LiveDot (T-06) — pulse/steady ── */
.oh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--_state, var(--ds-neutral)); flex: none; }
.oh-dot.is-pulse { box-shadow: 0 0 0 0 var(--_state, var(--ds-accent)); animation: oh-pulse 1.6s infinite; }
@keyframes oh-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_state) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--_state) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_state) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .oh-dot.is-pulse { animation: none; } }

/* ── EmptyState / 다음단계 placeholder (T-09) ── */
.oh-next {
  border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-lg);
  padding: var(--ds-sp-5); color: var(--ds-text-3); font-size: var(--ds-fs-sm);
  display: grid; gap: var(--ds-sp-2);
}
.oh-next b { color: var(--ds-text-2); font-weight: var(--ds-fw-semi); }
.oh-skel {
  background: linear-gradient(90deg, var(--ds-bg-2) 25%, var(--ds-bg-3) 50%, var(--ds-bg-2) 75%);
  background-size: 200% 100%; animation: oh-shimmer 1.3s infinite; border-radius: var(--ds-radius-sm);
  height: 14px;
}
@keyframes oh-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .oh-skel { animation: none; } }

/* ── 조치 큐 (T-13) — 해야 할 것 리스트 ── */
.oh-queue { display: flex; flex-direction: column; gap: var(--ds-sp-2); }
.oh-q-item {
  display: flex; align-items: center; gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) var(--ds-sp-4); background: var(--ds-bg-1);
  border: 1px solid var(--ds-border); border-left: 3px solid var(--_tone, var(--ds-neutral));
  border-radius: var(--ds-radius); cursor: pointer; transition: var(--ds-motion);
}
.oh-q-item:hover { border-color: var(--ds-accent-line); background: var(--ds-bg-2); }
.oh-q-item:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.oh-q-item .q-icon { width: 9px; height: 9px; border-radius: 50%; background: var(--_tone); flex: none; }
.oh-q-item .q-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oh-q-item .q-title { color: var(--ds-text); font-weight: var(--ds-fw-semi); font-size: var(--ds-fs-sm); }
.oh-q-item .q-desc { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.oh-q-item .q-arrow { color: var(--ds-text-3); flex: none; }
.oh-q-item .oh-badge { flex: none; }
.oh-q-empty {
  color: var(--ds-success); font-size: var(--ds-fs-sm);
  padding: var(--ds-sp-4); background: var(--ds-success-bg);
  border-radius: var(--ds-radius); text-align: center;
}

/* ── 데이터 흐름·축적 (T-16/T-17) — 유입→처리→저장 3단계 ── */
.oh-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--ds-sp-2); align-items: stretch;
}
.oh-flow-stage {
  background: var(--ds-bg-1); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); padding: var(--ds-sp-3);
  display: flex; flex-direction: column; gap: var(--ds-sp-3); min-width: 0;
}
.oh-flow-stage .stage-label {
  font-size: var(--ds-fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ds-text-3); font-family: var(--ds-font-mono);
}
.oh-flow-node { display: flex; align-items: flex-start; gap: var(--ds-sp-2); }
.oh-flow-node .fn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_st, var(--ds-neutral)); flex: none; margin-top: 5px; }
.oh-flow-node .fn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oh-flow-node .fn-name { font-size: var(--ds-fs-sm); color: var(--ds-text); }
.oh-flow-node .fn-meta { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); font-family: var(--ds-font-mono); }
.oh-flow-node .fn-today { color: var(--ds-success); font-weight: var(--ds-fw-semi); }
.oh-flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--ds-text-3); font-size: var(--ds-fs-lg); }
@media (max-width: 900px) {
  .oh-flow { grid-template-columns: 1fr; }
  .oh-flow-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* ── 도면 표제란 (D-03, 02_PLAN §1.2 시그니처) — SHT/REV/SRC = 패널ID·데이터 신선도·출처 ── */
.tb {
  display: flex; align-items: center;
  font-family: var(--ds-font-mono); font-size: var(--ds-fs-2xs);
  color: var(--ds-text-3); letter-spacing: .06em; white-space: nowrap;
}
.tb .tb-cell { padding: 2px var(--ds-sp-3); border-left: 1px solid var(--ds-border); }
.tb .tb-cell:first-child { border-left: none; }
.tb b { color: var(--ds-text-2); font-weight: var(--ds-fw-semi); }
.tb-flip { animation: tb-flip .3s ease; display: inline-block; }
@keyframes tb-flip { 0% { opacity: .2; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tb-flip { animation: none; } }
@media (max-width: 720px) { .tb .tb-cell:last-child { display: none; } }  /* 모바일: SRC 생략 */

/* ── 스케줄 실패 행 강조 (T-21) ── */
.sched-fail-row { background: var(--ds-danger-bg); }
.sched-fail-row .job-name { color: var(--ds-danger); font-weight: var(--ds-fw-semi); }

/* 반응형 (T-24 정신 — 모바일 오버플로 방지) */
@media (max-width: 900px) {
  .oh-kpis { grid-template-columns: repeat(2, 1fr); }
  .oh-shell { padding: var(--ds-sp-3); }
}
@media (max-width: 520px) {
  .oh-kpis { grid-template-columns: 1fr 1fr; }
  .oh-statcard .k-value { font-size: var(--ds-fs-2xl); }
}

/* ── 아이콘 체계 (DC-01) — 도면 선문법. 이모지 아이콘 금지, 이 클래스만 사용 ── */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-ic{width:15px;height:15px;opacity:.9}
.nav-btn.active .nav-ic{color:var(--ds-accent)}

/* 공용 2D 관계도 (DC-02) — 갤럭시 3종 통합 대체. 다크 고정(.ds-dark-island 로 토큰 강제) */
.g2d-shell{position:relative;background:var(--ds-bg-1);border:1px solid var(--ds-border);border-radius:var(--ds-radius);overflow:hidden;aspect-ratio:1180/660;max-height:72vh;
  background-image:linear-gradient(var(--ds-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--ds-hairline) 1px,transparent 1px);background-size:40px 40px}
.g2d-svg{width:100%;height:100%;display:block}
.g2d-hud{position:absolute;top:12px;left:14px;display:flex;flex-direction:column;gap:2px;pointer-events:none;z-index:1}
.g2d-hud b{font-family:var(--ds-font-mono);font-size:12px;letter-spacing:.06em;color:var(--ds-text-2)}
.g2d-hud span{font-size:11px;color:var(--ds-text-3)}
.g2d-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px;font-size:11px;color:var(--ds-text-2)}
.g2d-leg{display:inline-flex;align-items:center;gap:6px}
.g2d-sw{width:10px;height:10px;border-radius:50%;flex:none}
.g2d-nodes circle{transition:stroke-width .12s}
.g2d-nodes circle:hover{stroke-width:3.4px}

/* Obsidian식 hover 이웃 강조(DC-02, 2026-07-12) — 노드 위 마우스 시 연결된 것만 밝게 */
.g2d-interactive .g2d-nodes circle { cursor: pointer; transition: opacity .12s, stroke-width .12s; }
.g2d-interactive .g2d-links path { transition: stroke-opacity .12s; }
.g2d-focused .g2d-nodes circle.g2d-dim { opacity: .18; }
.g2d-focused .g2d-links path.g2d-dim { stroke-opacity: .05 !important; }
.g2d-focused .g2d-links path.g2d-hi { stroke-opacity: .85 !important; stroke-width: 2.4px; }
.g2d-focused .g2d-nodes circle.g2d-hi { stroke-width: 3px; }
.g2d-focused .g2d-labels text.g2d-dim { opacity: .22; }

/* TW 협업 관제 (tw-collab, 2026-07-12) — 분야별 그리드. 전량 --ds-* 토큰 */
.twc-totals { display: flex; gap: var(--ds-sp-3); flex-wrap: wrap; margin: 0 0 var(--ds-sp-4); }
.twc-total { flex: 1; min-width: 130px; background: var(--ds-bg-1); border: 1px solid var(--ds-border);
  border-left: 3px solid var(--_c, var(--ds-accent)); border-radius: var(--ds-radius); padding: var(--ds-sp-3) var(--ds-sp-4); }
.twc-total b { display: block; font-family: var(--ds-font-mono); font-feature-settings: "tnum"; font-size: var(--ds-fs-2xl); color: var(--_c, var(--ds-text)); line-height: 1.1; }
.twc-total span { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.twc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ds-sp-3); }
.twc-card { background: var(--ds-bg-1); border: 1px solid var(--ds-border); border-left: 3px solid var(--_c, var(--ds-neutral));
  border-radius: var(--ds-radius); padding: var(--ds-sp-3) var(--ds-sp-4); display: flex; flex-direction: column; gap: var(--ds-sp-2); transition: var(--ds-motion); }
.twc-card[role="button"] { cursor: pointer; }
.twc-card[role="button"]:hover { border-color: var(--ds-accent-line); background: var(--ds-bg-2); }
.twc-card[role="button"]:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.twc-card-head { display: flex; align-items: center; gap: var(--ds-sp-2); }
.twc-name { font-weight: var(--ds-fw-semi); color: var(--ds-text); font-size: var(--ds-fs-base); }
.twc-role { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.twc-sev { margin-left: auto; font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi); padding: 1px var(--ds-sp-2);
  border-radius: var(--ds-radius-pill); color: var(--_s); background: color-mix(in srgb, var(--_s) 14%, transparent); }
.twc-metrics { display: flex; gap: var(--ds-sp-3); }
.twc-m { display: flex; flex-direction: column; font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }
.twc-m b { font-family: var(--ds-font-mono); font-feature-settings: "tnum"; font-size: var(--ds-fs-lg); color: var(--ds-text); line-height: 1.15; }
.twc-m.warn b { color: var(--ds-warn); }
.twc-m.info b { color: var(--ds-info); }
.twc-m.danger b { color: var(--ds-danger); }
.twc-foot { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2) var(--ds-sp-3); font-size: var(--ds-fs-2xs); color: var(--ds-text-3);
  font-family: var(--ds-font-mono); border-top: 1px solid var(--ds-hairline); padding-top: var(--ds-sp-2); }
.twc-gate { color: var(--ds-warn); }

/* tw-collab L1 분야 상세 드릴다운 */
.twc-drill-head { display: flex; align-items: center; gap: var(--ds-sp-3); margin: var(--ds-sp-5) 0 var(--ds-sp-2); padding-top: var(--ds-sp-4); border-top: 1px solid var(--ds-border); }
.twc-drill-head b { color: var(--ds-text); font-size: var(--ds-fs-lg); }
.twc-chans { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2); margin-bottom: var(--ds-sp-3); }
.twc-chan { font-size: var(--ds-fs-xs); background: var(--ds-bg-2); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill); padding: 2px var(--ds-sp-3); color: var(--ds-text-2); }
.twc-tbl-wrap { overflow-x: auto; }
.twc-tbl { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.twc-tbl th { text-align: left; padding: var(--ds-sp-2) var(--ds-sp-3); color: var(--ds-text-3); font-weight: var(--ds-fw-med); border-bottom: 1px solid var(--ds-border); font-size: var(--ds-fs-xs); }
.twc-tbl td { padding: var(--ds-sp-2) var(--ds-sp-3); border-bottom: 1px solid var(--ds-hairline); vertical-align: top; color: var(--ds-text-2); }
.twc-td-title { color: var(--ds-text); font-weight: var(--ds-fw-med); max-width: 320px; }
.twc-row-danger { background: var(--ds-danger-bg); }
.twc-row-warn { background: var(--ds-warn-bg); }
.twc-hot { color: var(--ds-danger); font-weight: var(--ds-fw-semi); }
.twc-warm { color: var(--ds-warn); }
.twc-blocked { color: var(--ds-danger); font-size: var(--ds-fs-xs); }
.twc-openq { color: var(--ds-info); font-size: var(--ds-fs-xs); }

/* tw-collab S3 반복카드·게이트 섹션 */
.twc-sub-sec { margin: var(--ds-sp-3) 0; }
.twc-sub-h { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); color: var(--ds-text); margin-bottom: var(--ds-sp-2); }
.twc-cardlist { display: flex; flex-direction: column; gap: var(--ds-sp-1); margin-top: var(--ds-sp-2); }
.twc-cardrow { font-size: var(--ds-fs-xs); padding: var(--ds-sp-2) var(--ds-sp-3); background: var(--ds-bg-1); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); }
.twc-cardrow b { color: var(--ds-text); }
.twc-next { color: var(--ds-text-3); margin-top: 2px; }
.twc-gatechip { font-size: var(--ds-fs-xs); background: var(--ds-warn-bg); color: var(--ds-warn); border-radius: var(--ds-radius-pill); padding: 2px var(--ds-sp-3); }
.twc-gatechip.rej { background: var(--ds-danger-bg); color: var(--ds-danger); }

/* tw-collab L2 태스크 타임라인 모달 */
.twc-task-row { cursor: pointer; }
.twc-task-row:hover td { background: var(--ds-bg-2); }
.twc-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--ds-sp-5); }
.twc-modal { background: var(--ds-bg-1); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); max-width: 720px; width: 100%; max-height: 82vh; overflow: auto; padding: var(--ds-sp-5); box-shadow: var(--ds-shadow, 0 8px 32px rgba(0,0,0,.3)); }
.twc-modal-head { display: flex; align-items: center; gap: var(--ds-sp-3); margin-bottom: var(--ds-sp-3); }
.twc-modal-head b { font-size: var(--ds-fs-lg); color: var(--ds-text); }
.twc-collab-line { display: flex; gap: var(--ds-sp-4); font-family: var(--ds-font-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-2); margin-bottom: var(--ds-sp-3); }
.twc-mblock { background: var(--ds-danger-bg); color: var(--ds-danger); border-radius: var(--ds-radius-sm); padding: var(--ds-sp-2) var(--ds-sp-3); font-size: var(--ds-fs-sm); margin-bottom: var(--ds-sp-3); }
.twc-msec { margin-bottom: var(--ds-sp-3); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.twc-msec > b { color: var(--ds-text); display: block; margin-bottom: var(--ds-sp-1); font-size: var(--ds-fs-sm); }
.twc-msglist { display: flex; flex-direction: column; gap: var(--ds-sp-1); max-height: 220px; overflow: auto; }
.twc-msg { font-size: var(--ds-fs-xs); padding: var(--ds-sp-1) 0; border-bottom: 1px solid var(--ds-hairline); }
.twc-msg-ts { color: var(--ds-text-3); font-family: var(--ds-font-mono); margin-right: var(--ds-sp-2); }

/* tw-collab 실제 Taskworld 링크 */
.twc-twlink { font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi); color: var(--ds-accent); text-decoration: none;
  border: 1px solid var(--ds-accent-line); border-radius: var(--ds-radius-sm); padding: 0 var(--ds-sp-2); white-space: nowrap; }
.twc-twlink:hover { background: var(--ds-accent-soft); text-decoration: underline; }

/* ── G-NEW-12 T02: 봇 업무 타임라인 모달 (L2, twc-modal 패턴 재사용) ── */
.twa-sum-chips { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2); margin-bottom: var(--ds-sp-3); }
.twa-sum-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--ds-bg-2); border: 1px solid var(--ds-hairline); border-radius: var(--ds-radius-sm);
  padding: var(--ds-sp-1) var(--ds-sp-3); }
.twa-sum-chip b { font-family: var(--ds-font-mono); font-feature-settings: "tnum"; font-size: var(--ds-fs-md); color: var(--ds-text); }
.twa-sum-chip span { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }
.twa-corr-btn { margin-left: auto; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  border: 1px solid var(--ds-accent-line); border-radius: var(--ds-radius-sm); padding: var(--ds-sp-1) var(--ds-sp-3);
  background: var(--ds-accent-soft); color: var(--ds-accent); cursor: pointer; }
.twa-corr-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); }

.twa-tl-list { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow: auto; }
.twa-tl-item { border-bottom: 1px solid var(--ds-hairline); }
.twa-tl-sum { display: flex; align-items: center; gap: var(--ds-sp-2); padding: var(--ds-sp-2) var(--ds-sp-1);
  cursor: pointer; list-style: none; font-size: var(--ds-fs-sm); }
.twa-tl-sum::-webkit-details-marker { display: none; }
.twa-tl-sum:hover { background: var(--ds-bg-2); }
.twa-tl-kind { flex: none; font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi);
  font-family: var(--ds-font-mono); color: var(--_c, var(--ds-text-2)); border: 1px solid var(--_c, var(--ds-hairline));
  border-radius: var(--ds-radius-sm); padding: 0 var(--ds-sp-2); white-space: nowrap; }
.twa-tl-ts { flex: none; font-family: var(--ds-font-mono); font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.twa-tl-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text); }
.twa-tl-score { flex: none; font-family: var(--ds-font-mono); font-feature-settings: "tnum"; font-size: var(--ds-fs-2xs);
  font-weight: var(--ds-fw-semi); border-radius: var(--ds-radius-sm); padding: 0 var(--ds-sp-2); }
.twa-tl-fail { flex: none; font-size: var(--ds-fs-2xs); color: var(--ds-danger); border: 1px solid var(--ds-danger);
  border-radius: var(--ds-radius-sm); padding: 0 var(--ds-sp-1); white-space: nowrap; }
.twa-tl-body { font-size: var(--ds-fs-xs); color: var(--ds-text-2); white-space: pre-wrap; word-break: break-word;
  padding: var(--ds-sp-2) var(--ds-sp-3) var(--ds-sp-3); background: var(--ds-bg-2); border-radius: var(--ds-radius-sm); }
.twa-tl-body .twc-twlink { margin-top: var(--ds-sp-2); display: inline-block; }