/* ═══════════════════════════════════════════════════════════════════
   Phase B (v6.6.393) — 상황판 탭 전용 CSS
   Industrial Command Center 방향. 기존 테마 변수 상속 (--color-* 등).
   [v6.6.401] Bridge 미세 조정 — 외부 pane 과 톤 통일 (모서리 round, LED glow 완화, 헤더 폰트 축소).
   ═══════════════════════════════════════════════════════════════════ */

#situation-tab {
    --sit-surface: #111114;
    --sit-surface-2: #17171b;
    --sit-surface-hover: #1c1c20;
    --sit-border: #27272a;
    --sit-border-strong: #3f3f46;
    --sit-text-3: #52525b;
    --sit-text-4: #3f3f46;
}

.situation-board {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 4px 32px;
    font-family: 'Noto Sans KR', 'Inter', system-ui, sans-serif;  /* [v6.7.183 UX-02] Pretendard 미로드 → 글로벌 폰트 정렬 */
}

/* ═══ HEADER ═══ */
/* [v6.6.434] 한글 톤 재설계 — sit-brand / sit-system-bar / 영문 라벨 폐지. 헤더는 미니멀 chip 4종 + 갱신시각만. */
.sit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sit-border);
    margin-bottom: 16px;
}

.sit-brand { display: flex; align-items: center; gap: 14px; }

.sit-brand-mark {
    width: 40px;
    height: 40px;
    background: var(--sit-surface);
    border: 1px solid var(--sit-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-color, #3b82f6);
    font-size: 18px;
}

.sit-brand-text .sit-title {
    /* [v6.6.401] Bridge — 폰트 13→12px, 자간 0.32→0.26em (살짝 톤다운) */
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    color: var(--text-color, #fafafa);
}

.sit-brand-text .sit-subtitle {
    font-family: 'IBM Plex Mono', 'Consolas', monospace;
    font-size: 10px;
    color: var(--sit-text-3);
    margin-top: 3px;
    letter-spacing: 0.12em;
}

.sit-sep { color: var(--sit-text-4); margin: 0 6px; }
.sit-beta-badge {
    color: var(--color-warning, #fdd835);
    padding: 1px 6px;
    border: 1px solid rgba(253, 216, 53, 0.35);
    margin-left: 4px;
    font-size: 9px;
}

.sit-stats {
    /* [v6.6.434] sit-stat 4개 자식 → sit-count-chip 4개로 변경. 단순 가로 나열. */
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* [v6.6.524] 헬스 스트립 — 7종 크롤러 LED + lag. 헤더 sit-stats 와 sit-right 사이에 위치.
   좁은 pane 에서는 자동 줄바꿈 (헤더 flex 가 wrap 미적용이라 sit-right 옆 한 줄).
   socket.js 의 status_update 가 5초 단위로 갱신 (서버 emit_status_update 주기 따름). */
.sit-health-strip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    font-size: 11px;
    letter-spacing: 0;
}
.sit-health-strip:empty { display: none; }
.sit-health-led {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: help;
    line-height: 1.2;
}
.sit-health-led .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sit-text-3, #71717a);
}
.sit-health-led b {
    font-weight: 500;
    font-size: 10.5px;
    color: var(--sit-text-2, #a1a1aa);
}
.sit-health-led .lag {
    font-variant-numeric: tabular-nums;
    color: var(--sit-text-3, #71717a);
    font-size: 10px;
    margin-left: 2px;
}
.sit-health-ok   .dot { background: #4ade80; box-shadow: 0 0 4px rgba(74, 222, 128, 0.45); }
.sit-health-warn .dot { background: #fbbf24; box-shadow: 0 0 4px rgba(251, 191, 36, 0.45); }
.sit-health-err  .dot { background: #f87171; box-shadow: 0 0 5px rgba(248, 113, 113, 0.55); }
.sit-health-idle .dot { background: #6b7280; }
/* err 상태 LED 만 살짝 강조 — 시선 끌기 */
.sit-health-err {
    border-color: rgba(248, 113, 113, 0.25);
    background: rgba(248, 113, 113, 0.06);
}

/* 좁은 pane (통합환경 dashboard pane) — 더 컴팩트 */
#pane-situation .sit-health-strip { gap: 3px; }
#pane-situation .sit-health-led {
    padding: 1px 5px;
    border-radius: 8px;
}
#pane-situation .sit-health-led b { font-size: 10px; }
#pane-situation .sit-health-led .lag { font-size: 9.5px; }
#pane-situation .sit-health-led .dot { width: 5px; height: 5px; }
.sit-health-led { cursor: pointer; }
.sit-health-led:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* [v6.6.525] 헬스 LED 클릭 시 popover — body 직속 fixed.
   드로어 대신 가벼운 팝오버 — 좁은 pane 카드 그리드 가리지 않음. */
.sit-health-popover {
    position: fixed;
    z-index: 10000;
    background: var(--sit-surface, #1a1a1f);
    border: 1px solid var(--sit-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    padding: 0;
    font-size: 12px;
    color: var(--sit-text-2, #d4d4d8);
    overflow: hidden;
    animation: sitHpFade 0.12s ease;
}
@keyframes sitHpFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sit-health-popover .hp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--sit-border, rgba(255, 255, 255, 0.08));
}
.sit-health-popover .hp-title-dot .dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.sit-health-popover .hp-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sit-text-1, #fafafa);
    flex: 1;
    letter-spacing: 0.02em;
}
.sit-health-popover .hp-close {
    background: transparent;
    border: 0;
    color: var(--sit-text-3, #71717a);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.sit-health-popover .hp-close:hover { color: var(--sit-text-1, #fafafa); }
.sit-health-popover .hp-body {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sit-health-popover .hp-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    font-size: 11.5px;
}
.sit-health-popover .hp-k {
    color: var(--sit-text-3, #71717a);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.sit-health-popover .hp-v {
    color: var(--sit-text-1, #fafafa);
    text-align: right;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.sit-health-popover .hp-dim {
    color: var(--sit-text-3, #71717a);
    font-weight: 400;
}
.sit-health-popover .hp-state {
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
}
.sit-health-popover .hp-state-ok   { background: rgba(74,222,128,0.15);  color: #86efac; }
.sit-health-popover .hp-state-warn { background: rgba(251,191,36,0.15);  color: #fcd34d; }
.sit-health-popover .hp-state-err  { background: rgba(248,113,113,0.18); color: #fca5a5; }
.sit-health-popover .hp-state-idle { background: rgba(107,114,128,0.15); color: #a1a1aa; }

/* [v6.6.528] popover 안 최근 5회 실행 이력 미니 테이블 */
.sit-health-popover .hp-section-label {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--sit-border, rgba(255, 255, 255, 0.08));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sit-text-3, #71717a);
    text-transform: uppercase;
}
.sit-health-popover .hp-hist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}
.sit-health-popover .hp-hist-table th {
    text-align: left;
    color: var(--sit-text-3, #71717a);
    font-weight: 500;
    padding: 3px 4px;
    border-bottom: 1px solid var(--sit-border, rgba(255, 255, 255, 0.06));
}
.sit-health-popover .hp-hist-table th:nth-child(2),
.sit-health-popover .hp-hist-table th:nth-child(3),
.sit-health-popover .hp-hist-table th:nth-child(4) { text-align: right; }
.sit-health-popover .hp-hist-table td {
    padding: 4px;
    color: var(--sit-text-2, #d4d4d8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.sit-health-popover .hp-hist-table td:nth-child(2),
.sit-health-popover .hp-hist-table td:nth-child(3),
.sit-health-popover .hp-hist-table td:nth-child(4) { text-align: right; }
.sit-health-popover .hp-hist-table tr:last-child td { border-bottom: 0; }
.sit-health-popover .hp-hist-ok  { color: #86efac; font-weight: 600; }
.sit-health-popover .hp-hist-err { color: #fca5a5; font-weight: 600; }

/* [v6.6.434] 카운트 chip — 단독 탭 헤더 + dashboard 임베드 헤더 공유 */
.sit-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    font-size: 0.78rem;
    line-height: 1;
}
.sit-count-chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sit-count-chip b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: right;
}
.sit-count-chip .lbl {
    color: var(--text-muted, #a1a1aa);
    font-size: 0.72rem;
}
.sit-count-chip.critical .dot { background: var(--color-error, #cf6679); }
.sit-count-chip.critical b { color: var(--color-error, #cf6679); }
.sit-count-chip.warning .dot { background: var(--color-warning, #fdd835); }
.sit-count-chip.warning b { color: var(--color-warning, #fdd835); }
.sit-count-chip.normal .dot { background: var(--color-success, #66bb6a); }
.sit-count-chip.normal b { color: var(--color-success, #66bb6a); }
.sit-count-chip.idle .dot { background: #71717a; }
.sit-count-chip.idle b { color: #71717a; }

.sit-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sit-stat-value {
    /* [v6.6.409] UI 사이즈 +18% — 30→36px */
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 36px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.sit-stat-value.red { color: var(--color-error, #cf6679); }
.sit-stat-value.amber { color: var(--color-warning, #fdd835); }
.sit-stat-value.green { color: var(--color-success, #66bb6a); }
/* [v6.6.411] IDLE — 데이터 없음, 회색 */
.sit-stat-value.idle { color: var(--sit-text-3, #71717a); }

.sit-stat-block { display: flex; flex-direction: column; gap: 3px; }

.sit-stat-label {
    font-size: 9px;
    letter-spacing: 0.28em;
    color: var(--sit-text-3);
    text-transform: uppercase;
    font-weight: 600;
}

.sit-stat-delta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--sit-text-4);
}

.sit-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sit-timestamp {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-color-secondary, #a1a1aa);
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.sit-timestamp small {
    color: var(--sit-text-3);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.sit-live-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: var(--sit-surface);
    border: 1px solid var(--sit-border);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--text-color-secondary, #a1a1aa);
    font-weight: 500;
}

.sit-live-dot {
    width: 6px;
    height: 6px;
    background: var(--color-success, #66bb6a);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-success, #66bb6a);
    animation: sitLivePulse 2s infinite;
}

@keyframes sitLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.sit-refresh-btn {
    background: var(--sit-surface);
    border: 1px solid var(--sit-border);
    color: var(--text-color-secondary, #a1a1aa);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
}
.sit-refresh-btn:hover {
    background: var(--sit-surface-hover);
    border-color: var(--sit-border-strong);
    color: var(--text-color, #fafafa);
}
.sit-refresh-btn.spinning i {
    animation: sitSpin 0.6s ease;
}
@keyframes sitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ═══ CARDS ═══ */
.sit-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    /* [v6.6.523] 필터로 게임 제외 시 남은 카드가 잔여 높이만큼 stretch 되던 현상 차단.
       기본 align-content/align-items: stretch → grid 컨테이너가 행 합계보다 키가 클 때 행 트랙이 늘어나
       카드까지 vertical stretch 됨. start 로 고정하여 카드는 콘텐츠 높이 유지, 잔여 공간은 비움. */
    align-content: start;
    align-items: start;
}

.sit-loading {
    grid-column: 1 / -1;
    padding: 60px;
    text-align: center;
    color: var(--sit-text-3);
    font-size: 12px;
    letter-spacing: 0;
}

.sit-card {
    /* [v6.6.409] UI 사이즈 확대 — padding 24→28px, min-height 240→280px */
    /* [v6.6.444] min-height 는 컴팩트(임베드)에 한정 — rich 모드는 콘텐츠에 맞춰 자연스럽게 확장 */
    background: var(--sit-surface);
    border: 1px solid var(--sit-border);
    border-radius: 6px;
    padding: 28px 28px 24px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sit-card:not(.sit-card--rich):not(.sit-card--slim) { min-height: 280px; }
.sit-card--rich { min-height: auto; }

/* [v6.6.457] 슬림 카드 — 분석 데이터 0건인 게임용 한 줄 압축. 게임명 + 0건 + 상태 배지만. */
.sit-card.sit-card--slim {
    min-height: 0;
    padding: 10px 16px;
}
.sit-card.sit-card--slim .sit-card-head {
    margin-bottom: 0;
    align-items: center;
}
.sit-card-mini-meta {
    margin-left: auto;
    margin-right: 10px;
    font-size: 11px;
    color: var(--sit-text-3);
    cursor: help;
    letter-spacing: 0.02em;
}
/* 슬림 카드는 상단 컬러 보더(::before)도 살짝 슬림하게 — 시선 분산 회피 */
.sit-card.sit-card--slim::before { height: 1px; opacity: 0.6; }

/* [v6.6.457] tooltip 신호 — title 속성 가진 라벨/배지에 cursor: help (마우스 hover 시 사용자에게 tooltip 가용 신호) */
.sit-card-status[title],
.sit-sentiment-label[title] { cursor: help; }

/* [v6.6.460] 평소 대비 라벨 + 24h 스파크라인 — 시간 단위 추세 시각화. */
.sit-card-baseline {
    font-size: 12px;
    color: var(--sit-text-2);
    margin: 4px 0 10px;
    letter-spacing: 0.02em;
    cursor: help;
}
.sit-card-baseline b {
    font-weight: 700;
    font-size: 13px;
    margin: 0 2px;
}
.sit-card-baseline.is-hot   { color: #ff7575; }   /* 평소의 1.5배 이상 — 활성도 급증 */
.sit-card-baseline.is-cold  { color: #78c8ff; }   /* 평소의 0.7배 이하 — 조용함 */
.sit-card-baseline.is-normal { color: var(--sit-text-3); } /* 평소 수준 */

.sit-card-sparkline {
    width: 100%;
    height: 36px;
    margin: 8px 0 10px;
    opacity: 0.85;
    cursor: help;
}
.sit-card-sparkline svg { width: 100%; height: 100%; display: block; }
.sit-card-sparkline rect { fill: rgba(124, 135, 148, 0.55); }
.sit-card-sparkline.is-hot rect    { fill: rgba(255, 117, 117, 0.85); }
.sit-card-sparkline.is-cold rect   { fill: rgba(120, 200, 255, 0.65); }
.sit-card-sparkline.is-normal rect { fill: rgba(124, 135, 148, 0.55); }

/* [v6.6.444] 분포 수치 줄 — 단독 탭 카드 sentiment_breakdown 노출 */
.sit-card-breakdown {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 12.5px;
}
.sit-card-breakdown .bd { color: var(--sit-text-3); }
.sit-card-breakdown .bd b {
    font-weight: 700;
    margin-left: 3px;
    font-variant-numeric: tabular-nums;
}
.sit-card-breakdown .bd--pos b { color: var(--color-success, #66bb6a); }
.sit-card-breakdown .bd--mix b { color: var(--color-warning, #fdd835); }
.sit-card-breakdown .bd--neu b { color: var(--text-color-secondary, #a1a1aa); }
.sit-card-breakdown .bd--neg b { color: var(--color-error, #cf6679); }
/* [v6.6.445] 빈 상태 — 자리표시 회색 톤다운 (시각 대칭 유지) */
.sit-card-breakdown.is-empty { opacity: 0.42; }
.sit-card-breakdown.is-empty .bd b { color: var(--sit-text-3, #71717a) !important; }

/* [v6.6.444] 입력 글 미니 3건 — 단독 탭 카드 안 즉시 식별 */
.sit-card-recent {
    border-top: 1px dashed var(--sit-border);
    padding-top: 10px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sit-card-recent-row {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-color-secondary, #a1a1aa);
}
.sit-card-recent-row .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.sit-card-recent-row .dot.critical { background: var(--color-error, #cf6679); }
.sit-card-recent-row .dot.warning  { background: var(--color-warning, #fdd835); }
.sit-card-recent-row .dot.info     { background: var(--color-success, #66bb6a); }
.sit-card-recent-row .ttl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color, #fafafa);
    text-decoration: none;
}
.sit-card-recent-row .ttl:hover { text-decoration: underline; }
.sit-card-recent-row .tm {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--sit-text-3);
}
/* [v6.6.445] 빈 상태 — 점선 박스 + 회색 톤 (자리 차지하되 시각 양보) */
.sit-card-recent.is-empty {
    border-top: 1px dashed var(--sit-border);
    border-bottom: none;
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--sit-text-3, #71717a);
    background: rgba(255, 255, 255, 0.012);
    border-radius: 4px;
}

@media (max-width: 760px) {
    .sit-card-recent-row { font-size: 11.5px; }
}

/* ═══ [v6.6.495] 3 pane 시 situation pane 컴팩트 모드 ═══
   render.js 가 has3Pane 일 때 .situation-compact-pane 클래스를 #pane-situation 에 부여.
   단독 풀뷰는 영향 없음 — 풍부 카드 + 큰 그래프 그대로 유지. */
.situation-compact-pane .sit-cards-grid {
    gap: 8px;
    margin-bottom: 12px;
}
.situation-compact-pane .sit-card {
    padding: 14px 16px 12px;
}
.situation-compact-pane .sit-card:not(.sit-card--rich):not(.sit-card--slim) {
    min-height: 130px;
}
.situation-compact-pane .sit-card.sit-card--slim {
    padding: 8px 14px;
}
.situation-compact-pane .sit-card-summary {
    -webkit-line-clamp: 2;
}
.situation-compact-pane .situation-board .sit-graph-section {
    margin-top: 14px;
    padding: 12px 14px 10px;
}
.situation-compact-pane .situation-board .sit-graph-canvas-wrap {
    height: 220px;
}
.situation-compact-pane .situation-board .sit-graph-controls .seg-btn {
    padding: 4px 9px;
    font-size: 11px;
}

/* ═══ [v6.6.496] 카드 헤더 가로 통합 + 요약 위로 + breakdown/baseline 가로 묶음 ═══
   sit-sentiment 단독 영역 폐지, 점수는 헤더 우측에 인라인 통합. summary 가 게임명 바로 아래로 이동.
   기존 .sit-card-head 의 flex 는 이미 space-between — 우측에 status + score 순서로 자연 배치. */
.sit-card-score {
    flex: 0 0 auto;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 10px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.sit-card-score.zero {
    color: var(--sit-text-3, #71717a);
    opacity: 0.55;
}
.sit-card.critical .sit-card-score { color: var(--color-error, #cf6679); }
.sit-card.warning .sit-card-score { color: var(--color-warning, #fdd835); }
.sit-card.normal .sit-card-score { color: var(--color-success, #66bb6a); }
.sit-card.idle .sit-card-score { color: var(--sit-text-3, #71717a); }

/* breakdown + baseline 가로 묶음 */
.sit-card-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 10px;
}
.sit-card-stats-row .sit-card-breakdown {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.sit-card-stats-row .sit-card-baseline {
    margin: 0;
    flex: 0 0 auto;
}

/* sit-card-summary 위치 이동에 따라 상단 마진 축소 */
.sit-card-summary {
    margin-top: 6px;
    margin-bottom: 8px;
}

/* 컴팩트 모드 — 점수 작게, 헤더 마진 축소, 통계 한 줄 강제 */
.situation-compact-pane .sit-card-head {
    margin-bottom: 8px;
}
.situation-compact-pane .sit-card-score {
    font-size: 1.35rem;
    margin-left: 8px;
}
.situation-compact-pane .sit-card-stats-row {
    gap: 8px;
    margin: 4px 0 6px;
    font-size: 11.5px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.situation-compact-pane .sit-card-stats-row .sit-card-breakdown {
    gap: 8px;
    font-size: 11.5px;
    min-width: 0;
}
.situation-compact-pane .sit-card-stats-row .sit-card-baseline {
    font-size: 11px;
    white-space: nowrap;
}
.situation-compact-pane .sit-card-summary {
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 12.5px;
}

/* ═══ [v6.6.497] recent 영역 고정 높이 + 스크롤 + 페이드 신호 ═══
   24h 윈도우 글 모두 표시하되 카드 크기는 절대 고정. 스크롤로 더 보기.
   페이드 그라디언트로 "더 있음" 시각 단서 제공. */
.sit-card-recent {
    max-height: 80px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 14px), transparent);
}
.sit-card-recent::-webkit-scrollbar {
    width: 5px;
}
.sit-card-recent::-webkit-scrollbar-track {
    background: transparent;
}
.sit-card-recent::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.sit-card-recent::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}
/* 빈 상태(또는 1건만)면 페이드 무효화 — 자연스러운 시각 */
.sit-card-recent.is-empty,
.sit-card-recent:not(:has(> .sit-card-recent-row:nth-child(4))) {
    -webkit-mask-image: none;
    mask-image: none;
}

/* baseline chip — 헤더에 활발/조용함/휴면 표시. baseline_ratio 기반 게임별 공정. */
.sit-card-chip {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    margin-right: 4px;
    line-height: 1.3;
}
.sit-card-chip.is-hot {
    background: rgba(255, 117, 117, 0.16);
    color: #ff7575;
}
.sit-card-chip.is-cold {
    background: rgba(120, 200, 255, 0.16);
    color: #78c8ff;
}
.sit-card-chip.is-dormant {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sit-text-3, #71717a);
}

/* 컴팩트 모드 — recent 더 작게, chip 더 작게, 카드 min-height 200 */
.situation-compact-pane .sit-card:not(.sit-card--rich):not(.sit-card--slim) {
    min-height: 200px;
}
.situation-compact-pane .sit-card-recent {
    max-height: 64px;
}
.situation-compact-pane .sit-card-chip {
    font-size: 10px;
    padding: 1px 6px;
    margin-right: 3px;
}

/* 컴팩트 그래프 캔버스 — 220 → 180 (전체 pane 높이 ~660px 로 압축) */
.situation-compact-pane .situation-board .sit-graph-canvas-wrap {
    height: 180px;
}

/* [v6.6.445] 상황판 단독 탭 — 카드 그리드 아래 7일 그래프 섹션 (대시보드와 동일 데이터, 별도 캔버스) */
.situation-board .sit-graph-section {
    margin-top: 28px;
    padding: 20px 24px 18px;
    background: var(--sit-surface);
    border: 1px solid var(--sit-border);
    border-radius: 6px;
}
.situation-board .sit-graph-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.situation-board .sit-graph-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color, #fafafa);
    margin: 0;
}
.situation-board .sit-graph-controls {
    display: flex;
    gap: 6px;
}
.situation-board .sit-graph-controls .seg-btn {
    background: var(--sit-surface-2);
    border: 1px solid var(--sit-border);
    color: var(--text-color-secondary, #a1a1aa);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.situation-board .sit-graph-controls .seg-btn:hover {
    border-color: var(--sit-border-strong);
    color: var(--text-color, #fafafa);
}
.situation-board .sit-graph-controls .seg-btn.active {
    background: var(--primary-color, #3b82f6);
    border-color: var(--primary-color, #3b82f6);
    color: #fff;
}
.situation-board .sit-graph-canvas-wrap {
    position: relative;
    height: 360px;
}
/* [v6.7.36] tabbed 통합 박스 — 한 박스 안 두 그래프, 캔버스 높이 더 여유. */
.situation-board .sit-graph-canvas-wrap--tall {
    height: 440px;
}
.situation-board .sit-graph-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sit-text-3);
    font-size: 13px;
}

/* [v6.7.36] 그래프 sub-tab nav — 게시물 추이 / AI 통과율 전환 */
.situation-board .sit-graph-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--sit-border, rgba(255,255,255,0.08));
    margin-bottom: 12px;
}
.situation-board .sit-graph-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--sit-text-2, #b8c0c8);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.situation-board .sit-graph-tab:hover {
    color: var(--text-color, #fafafa);
}
.situation-board .sit-graph-tab.is-active {
    color: var(--primary-color, #3b82f6);
    border-bottom-color: var(--primary-color, #3b82f6);
}
.situation-board .sit-graph-pane {
    /* pane 자체는 보통 흐름 — display:none 은 inline style 토글 */
}

/* [v6.6.456] Y축 스케일 토글 그룹 — 모드 토글(.dashboard-graph-controls / .sit-graph-controls) 옆에 한 줄 배치.
   inline-flex 로 같은 줄에 띄우고, 좁은 pane 에선 줄바꿈 허용. 좌측에 얇은 verticals separator 한 줄. */
.dashboard-graph-controls,
.sit-graph-controls,
.yscale-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}
.yscale-group {
    margin-left: 12px;
    position: relative;
}
.yscale-group::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.yscale-group .feed-seg-btn.is-disabled,
.yscale-group .seg-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
@media (max-width: 760px) {
    .yscale-group {
        margin-left: 0;
        margin-top: 6px;
        display: flex;
    }
    .yscale-group::before { display: none; }
}

/* [v6.6.448] 게임×커뮤니티 매트릭스 표 — 그래프 영역 토글 시 같은 자리에 표시 (대시보드/상황판 공통). */
.graph-matrix-host {
    width: 100%;
    overflow-x: auto;
    padding-top: 6px;
}
.graph-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--text-color, #fafafa);
}
.graph-matrix-table thead th {
    font-size: 11px;
    color: var(--sit-text-3);
    font-weight: 600;
    text-align: right;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sit-border, #27272a);
    background: rgba(255, 255, 255, 0.012);
}
.graph-matrix-table thead th.game-col { text-align: left; }
.graph-matrix-table tbody td {
    padding: 8px 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.graph-matrix-table tbody td.game-col {
    text-align: left;
    font-weight: 500;
    border-left: 3px solid transparent;
    padding-left: 10px;
}
.graph-matrix-table tbody tr {
    transition: background 0.12s;
}
.graph-matrix-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.022);
}
.graph-matrix-table tbody td.is-zero { color: var(--sit-text-3, #71717a); }
.graph-matrix-table tbody td.total-col { font-weight: 700; padding-left: 16px; }
.graph-matrix-table tbody tr.footer-row {
    background: rgba(255, 255, 255, 0.018);
    font-weight: 600;
}
.graph-matrix-table tbody tr.footer-row td {
    border-top: 1px solid var(--sit-border, #27272a);
    border-bottom: none;
    color: var(--text-color-secondary, #a1a1aa);
}
.graph-matrix-caption {
    text-align: right;
    margin-top: 8px;
    font-size: 11px;
    color: var(--sit-text-3, #71717a);
}
.graph-matrix-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sit-text-3);
    font-size: 13px;
}

/* [v6.6.449] 일별 매트릭스 — 행=(게임,출처), 열=7일+합계. 좁은 pane 가로 스크롤. */
.graph-matrix-table--daily {
    min-width: 640px;
    font-size: 12.5px;
}
.graph-matrix-table--daily thead th.date-col {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    padding: 8px 10px;
    min-width: 50px;
}
.graph-matrix-table--daily thead th.source-col {
    text-align: left;
    min-width: 50px;
}
.graph-matrix-table--daily tbody td.source-col {
    text-align: left;
    color: var(--text-color-secondary, #a1a1aa);
    font-size: 11.5px;
    padding-left: 6px;
}
/* 같은 게임 그룹 시각화 — 첫 행에만 상단 보더, 마지막 출처 행에 하단 separator */
.graph-matrix-table--daily tbody tr.group-first td {
    border-top: 1px solid var(--sit-border, #27272a);
}
.graph-matrix-table--daily tbody tr.group-cont td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.graph-matrix-table--daily tbody tr.group-first td.game-col {
    vertical-align: middle;
}

.sit-card::before {
    /* [v6.6.401] Bridge — 모서리 라운드 매칭 + LED glow −30% 완화 */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--sit-border-strong);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.sit-card.critical::before {
    background: var(--color-error, #cf6679);
    box-shadow: 0 0 14px rgba(207, 102, 121, 0.55);
}
.sit-card.warning::before {
    background: var(--color-warning, #fdd835);
    box-shadow: 0 0 10px rgba(253, 216, 53, 0.4);
}
.sit-card.normal::before { background: var(--color-success, #66bb6a); }
/* [v6.6.411] IDLE — 데이터 없음, 회색 톱 라인 + 흐릿한 배경 */
.sit-card.idle::before { background: var(--sit-border-strong, #3f3f46); }
.sit-card.idle {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 40%),
        var(--sit-surface);
    opacity: 0.78;
}
.sit-card.idle:hover { opacity: 0.95; }

.sit-card.critical {
    background:
        linear-gradient(180deg, rgba(207, 102, 121, 0.05), rgba(207, 102, 121, 0) 40%),
        var(--sit-surface);
    border-color: rgba(207, 102, 121, 0.22);
}

.sit-card:hover {
    background: var(--sit-surface-hover);
    transform: translateY(-2px);
    border-color: var(--sit-border-strong);
}
.sit-card.critical:hover {
    border-color: var(--color-error, #cf6679);
}

.sit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sit-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sit-led {
    /* [v6.6.401] Bridge — LED glow 강도 약 −25% 완화 (외부 pane 톤과 충돌 줄임) */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success, #66bb6a);
    box-shadow: 0 0 7px rgba(102, 187, 106, 0.7);
    flex-shrink: 0;
}
.sit-led.red {
    background: var(--color-error, #cf6679);
    box-shadow: 0 0 10px rgba(207, 102, 121, 0.7), 0 0 3px rgba(207, 102, 121, 0.9);
    animation: sitLedCritical 1.8s ease-in-out infinite;
}
.sit-led.amber {
    background: var(--color-warning, #fdd835);
    box-shadow: 0 0 8px rgba(253, 216, 53, 0.6);
}
/* [v6.6.411] IDLE LED — glow 없음, 무채색 */
.sit-led.idle {
    background: var(--sit-text-3, #71717a);
    box-shadow: none;
}
@keyframes sitLedCritical {
    /* [v6.6.401] Bridge — pulse 진폭 축소: 14→10 / 22→16 / scale 1.14→1.08 */
    0%, 100% { box-shadow: 0 0 10px rgba(207, 102, 121, 0.7), 0 0 3px rgba(207, 102, 121, 0.9); transform: scale(1); }
    50% { box-shadow: 0 0 16px rgba(207, 102, 121, 0.85), 0 0 6px var(--color-error, #cf6679); transform: scale(1.08); }
}

.sit-game-name { display: flex; flex-direction: column; gap: 2px; }
.sit-game-name .ko {
    /* [v6.6.409] 16→19px */
    font-weight: 600;
    font-size: 19px;
    color: var(--text-color, #fafafa);
    letter-spacing: -0.02em;
}
.sit-game-name .en {
    font-size: 9px;
    color: var(--sit-text-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace;
}

.sit-card-status {
    /* [v6.6.443] 한글 자간 리셋 — JetBrains Mono(영문) → Pretendard 상속, 0.24em → 0 */
    font-size: 11px;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--sit-text-3);
    padding: 4px 10px;
    border: 1px solid var(--sit-border-strong);
    border-radius: 3px;
}
.sit-card-status.red {
    color: var(--color-error, #cf6679);
    border-color: var(--color-error, #cf6679);
    background: rgba(207, 102, 121, 0.14);
}
.sit-card-status.amber {
    color: var(--color-warning, #fdd835);
    border-color: rgba(253, 216, 53, 0.6);
    background: rgba(253, 216, 53, 0.14);
}
.sit-card-status.green {
    color: var(--color-success, #66bb6a);
    border-color: rgba(102, 187, 106, 0.4);
}
/* [v6.6.411] IDLE 상태 배지 — 회색 */
.sit-card-status.idle {
    color: var(--sit-text-3, #71717a);
    border-color: var(--sit-border-strong, #3f3f46);
    background: rgba(113, 113, 122, 0.08);
}

/* Sentiment score display */
.sit-sentiment {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 20px;
}

.sit-sentiment-score {
    /* [v6.6.409] 56→72px (+28%) */
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 72px;
    line-height: 0.85;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    color: var(--text-color, #fafafa);
}
.sit-card.critical .sit-sentiment-score { color: var(--color-error, #cf6679); }
.sit-card.warning .sit-sentiment-score { color: var(--color-warning, #fdd835); }
.sit-card.normal .sit-sentiment-score { color: var(--color-success, #66bb6a); }
/* [v6.6.411] IDLE — 점수 자체가 의미 없음, 회색 처리 */
.sit-card.idle .sit-sentiment-score { color: var(--sit-text-3, #71717a); }
/* [v6.6.443] score=0 톤다운 — 활동 없음 = 작게/흐리게. 색상 클래스보다 우선. */
.sit-card .sit-sentiment-score.zero {
    font-size: 38px;
    color: var(--sit-text-3, #71717a) !important;
    opacity: 0.7;
}

.sit-sentiment-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 6px;
}
.sit-sentiment-label {
    /* [v6.6.443] 한글 자간 리셋 — 0.3em → 0 ("감 정 지 수" 분리 렌더링 방지) */
    font-size: 11px;
    letter-spacing: 0;
    color: var(--sit-text-3);
    font-weight: 500;
}
.sit-sentiment-range {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--sit-text-4);
    letter-spacing: 0.06em;
}

/* Representative summary */
.sit-card-summary {
    /* [v6.6.409] 13→14.5px */
    color: var(--text-color-secondary, #a1a1aa);
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
    letter-spacing: -0.015em;
    padding-left: 12px;
    border-left: 1px solid var(--sit-border);
}
.sit-card.critical .sit-card-summary { border-left-color: var(--color-error, #cf6679); }
.sit-card.warning .sit-card-summary { border-left-color: var(--color-warning, #fdd835); }
.sit-card.normal .sit-card-summary { border-left-color: var(--color-success, #66bb6a); }

.sit-card-meta {
    /* [v6.6.443] 한글 자간 리셋 — JetBrains Mono → Pretendard 상속, 0.08em → 0 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 11.5px;
    color: var(--sit-text-3);
    letter-spacing: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--sit-border);
}
.sit-card-meta .source {
    text-transform: uppercase;
}
.sit-card-meta .sample {
    color: var(--sit-text-3);
}

/* Draft button */
.sit-draft-btn {
    /* [v6.6.401] Bridge — radius 0→4px (외부 pane buttons 톤과 일치) */
    background: transparent;
    border: 1px solid var(--sit-border-strong);
    border-radius: 4px;
    color: var(--text-color-secondary, #a1a1aa);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    transition: all 0.15s;
    width: 100%;
}
.sit-draft-btn:hover {
    background: var(--sit-surface-hover);
    border-color: var(--text-color-secondary, #a1a1aa);
    color: var(--text-color, #fafafa);
}
.sit-card.critical .sit-draft-btn {
    border-color: rgba(207, 102, 121, 0.55);
    color: var(--color-error, #cf6679);
}
.sit-card.warning .sit-draft-btn {
    border-color: rgba(253, 216, 53, 0.4);
    color: var(--color-warning, #fdd835);
}

.sit-draft-btn .arrow {
    transition: transform 0.2s;
    font-size: 11px;
}
.sit-draft-btn:hover .arrow { transform: translateX(4px); }

/* ═══ SYSTEM BAR ═══ */
.sit-system-bar {
    /* [v6.6.401] Bridge — radius 0→4px */
    margin-top: 20px;
    padding: 9px 14px;
    border: 1px solid var(--sit-border);
    border-radius: 4px;
    background: var(--sit-surface);
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--sit-text-3);
    letter-spacing: 0.14em;
}
.sit-system-bar .sys-left, .sit-system-bar .sys-right { display: flex; gap: 18px; }
.sit-system-bar .pair .k { color: var(--sit-text-4); }
.sit-system-bar .pair .v { color: var(--text-color-secondary, #a1a1aa); margin-left: 6px; }

/* ═══ PREVIEW DRAWER ═══ */
.sit-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 900;
}
.sit-drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.sit-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* [v6.6.410] 540 → 720px — TODAY'S POSTS 식별성 개선 */
    width: min(720px, 100%);
    background: #09090b;
    border-left: 1px solid var(--sit-border-strong);
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 901;
    display: flex;
    flex-direction: column;
    box-shadow: -24px 0 80px rgba(0, 0, 0, 0.75);
}
.sit-drawer.show { transform: translateX(0); }
.sit-drawer.red::before, .sit-drawer.amber::before, .sit-drawer.green::before,
.sit-drawer.idle::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2;
}
.sit-drawer.red::before {
    background: var(--color-error, #cf6679);
    box-shadow: 0 0 20px var(--color-error, #cf6679);
}
.sit-drawer.amber::before {
    background: var(--color-warning, #fdd835);
    box-shadow: 0 0 16px rgba(253, 216, 53, 0.5);
}
.sit-drawer.green::before { background: var(--color-success, #66bb6a); }
/* [v6.6.411] IDLE 드로어 — 무채색 톱 라인 */
.sit-drawer.idle::before { background: var(--sit-border-strong, #3f3f46); }
/* [v6.6.516] idle::before 는 위 통합 셀렉터로 이동 (height/z-index 공유) */

.sit-drawer-head {
    /* [v6.6.526] 36→44px — v6.6.520 이후 회귀(좌측 벽에 붙어 보임) 복원. body·foot 도 동시 bump 로 종/횡 정렬 유지. */
    padding: 22px 44px 18px;
    border-bottom: 1px solid var(--sit-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sit-surface);
    position: relative;
}

.sit-drawer-title-wrap { display: flex; align-items: center; gap: 12px; }

.sit-drawer-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sit-drawer-led.red { background: var(--color-error, #cf6679); box-shadow: 0 0 10px var(--color-error, #cf6679); }
.sit-drawer-led.amber { background: var(--color-warning, #fdd835); box-shadow: 0 0 10px var(--color-warning, #fdd835); }
.sit-drawer-led.green { background: var(--color-success, #66bb6a); box-shadow: 0 0 8px var(--color-success, #66bb6a); }
/* [v6.6.411] IDLE 드로어 LED — glow 없는 회색 */
.sit-drawer-led.idle { background: var(--sit-text-3, #71717a); box-shadow: none; }

.sit-drawer-title-text { display: flex; flex-direction: column; gap: 3px; }
.sit-drawer-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-color, #fafafa);
}
.sit-drawer-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--sit-text-3);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono', monospace;
}

.sit-drawer-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--sit-border);
    background: transparent;
    color: var(--text-color-secondary, #a1a1aa);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sit-drawer-close:hover {
    border-color: var(--text-color-secondary, #a1a1aa);
    color: var(--text-color, #fafafa);
    background: var(--sit-surface-hover);
}

.sit-drawer-body {
    flex: 1;
    overflow-y: auto;
    /* [v6.6.526] 36→44px — head 와 동일 좌우 패딩 유지. */
    padding: 22px 44px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.sit-drawer-section .sit-section-label {
    /* [v6.6.443] 한글 자간 리셋 — "감 정 분 포 / 요 약 / 최 신 글" 분리 렌더링 방지 */
    /* [v6.6.505] Phase 4-B 위계 강화 — 12→13px, weight 600→700, 헤딩과 본문 분리감 강화 */
    font-size: 13px;
    letter-spacing: 0;
    color: var(--text-color-secondary, #a1a1aa);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sit-border);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.sit-section-label .hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--sit-text-4);
    letter-spacing: 0.1em;
    font-weight: 500;
}

.sit-sentiment-bar {
    display: flex;
    /* [v6.6.505] Phase 4-B — 10→14px 로 stacked bar 시각 가치 강화. 4 segment 비율이 또렷이 보이도록. */
    height: 14px;
    background: var(--sit-surface-2);
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 2px;
}
.sit-seg {
    width: 0;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sit-seg.positive { background: var(--color-success, #66bb6a); }
.sit-seg.negative { background: var(--color-error, #cf6679); }
.sit-seg.neutral { background: var(--sit-text-4); }
.sit-seg.mixed { background: var(--color-warning, #fdd835); }

.sit-sentiment-legend {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-color-secondary, #a1a1aa);
}
.sit-sentiment-legend .lg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 10px;
    border-left: 1px solid var(--sit-border);
}
.sit-sentiment-legend .lg .k {
    color: var(--sit-text-3);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.sit-sentiment-legend .lg .v {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.sit-sentiment-legend .lg.positive { border-left-color: var(--color-success, #66bb6a); }
.sit-sentiment-legend .lg.positive .v { color: var(--color-success, #66bb6a); }
.sit-sentiment-legend .lg.negative { border-left-color: var(--color-error, #cf6679); }
.sit-sentiment-legend .lg.negative .v { color: var(--color-error, #cf6679); }
.sit-sentiment-legend .lg.neutral .v { color: var(--text-color, #fafafa); }
.sit-sentiment-legend .lg.mixed { border-left-color: var(--color-warning, #fdd835); }
.sit-sentiment-legend .lg.mixed .v { color: var(--color-warning, #fdd835); }

.sit-drawer-repsummary {
    color: var(--text-color, #fafafa);
    font-size: 14px;
    line-height: 1.6;
    padding: 16px;
    background: var(--sit-surface);
    border: 1px solid var(--sit-border);
    border-left: 2px solid var(--sit-border-strong);
    letter-spacing: -0.01em;
}

/* [v6.6.409] TODAY'S POSTS — 드로어에서 합성 입력 글 노출 */
/* [v6.6.505] Phase 4-B — 카드 사이 1px 디바이더(border-bottom) 도입. 컨테이너 border 는 제거(중복 라인 회피). */
.sit-input-posts {
    display: flex;
    flex-direction: column;
    /* [v6.6.505] Phase 4-B — 외곽 border 제거(메모리: 카드 떠있는 형태 비선호 → 1px 디바이더만).
       gap+background 트릭으로 카드 사이 1px 디바이더만 남김. */
    gap: 1px;
    background: var(--sit-border);
}
.sit-input-post {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 14px;
    align-items: flex-start;
    /* [v6.6.410] padding 10/14 → 14/18 — 식별성 강화 */
    padding: 14px 18px;
    background: var(--sit-surface);
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}
.sit-input-post:hover { background: var(--sit-surface-hover); }
/* [v6.6.505] Phase 4-B — dot 무채색화. 등급 색은 우측 .sit-input-post-sev 라벨에서 단일 표현(중복 제거).
   향후 dot 을 게임 색으로 만들고 싶을 때는 situation-tab.js renderInputPosts() 에서 inline style 로 game color 주입. */
.sit-input-post-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-color-secondary, #a1a1aa);
    margin-top: 9px;
    opacity: 0.65;
}
.sit-input-post-dot.critical,
.sit-input-post-dot.warning,
.sit-input-post-dot.info {
    /* 등급 분기 무효화 — 모두 동일 무채색. JS markup 손대지 않고 CSS 한 곳만 통일. */
    background: var(--text-color-secondary, #a1a1aa);
    box-shadow: none;
}
.sit-input-post-body { min-width: 0; }
.sit-input-post-title {
    /* [v6.6.410] font-size 13 → 15 — 식별성 강화 */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* [v6.6.410] 글로벌 a 의 primary green 색상이 상속돼 식별 어려움 → 흰색 + 호버 underline */
.sit-input-post-title a,
.sit-input-post-title a:link,
.sit-input-post-title a:visited {
    color: var(--text-color, #fafafa);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.12s;
}
.sit-input-post-title a:hover {
    color: #fff;
    border-bottom-color: var(--text-color-secondary, #a1a1aa);
}
.sit-input-post-summary {
    color: var(--text-color-secondary, #a1a1aa);
    /* [v6.6.410] 12 → 13.5px, line-clamp 2 → 3 */
    font-size: 13.5px;
    line-height: 1.55;
    margin-top: 6px;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sit-input-post-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.sit-input-post-time {
    font-family: 'IBM Plex Mono', monospace;
    /* [v6.6.505] Phase 4-B — 12→13px medium weight. 시각이 등급 라벨보다 묻히는 약점 5 해소. */
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color, #fafafa);
    font-variant-numeric: tabular-nums;
}
.sit-input-post-sev {
    font-family: 'IBM Plex Mono', monospace;
    /* [v6.6.505] Phase 4-B — 10.5→10px, border 약화. 등급 라벨이 시각보다 튀지 않도록 톤다운(색 강조는 유지). */
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-transform: uppercase;
    color: var(--sit-text-3);
    background: var(--sit-surface-2);
}
.sit-input-post-sev.critical { color: var(--color-error, #cf6679); border-color: var(--color-error, #cf6679); }
.sit-input-post-sev.warning { color: var(--color-warning, #fdd835); border-color: rgba(253, 216, 53, 0.5); }
.sit-input-post-sev.info { color: var(--color-success, #66bb6a); border-color: rgba(102, 187, 106, 0.4); }
.sit-input-post-submeta {
    font-family: 'IBM Plex Mono', monospace;
    /* [v6.6.410] 10 → 11.5px */
    font-size: 11.5px;
    letter-spacing: 0.08em;
    color: var(--sit-text-3);
    margin-top: 8px;
    text-transform: uppercase;
}
.sit-input-empty {
    padding: 28px 14px;
    text-align: center;
    /* [v6.6.443] 한글 자간 리셋 + uppercase 폐지 */
    font-size: 13px;
    letter-spacing: 0;
    color: var(--sit-text-3);
    background: var(--sit-surface);
}
.sit-drawer.red .sit-drawer-repsummary { border-left-color: var(--color-error, #cf6679); }
.sit-drawer.amber .sit-drawer-repsummary { border-left-color: var(--color-warning, #fdd835); }
.sit-drawer.green .sit-drawer-repsummary { border-left-color: var(--color-success, #66bb6a); }

.sit-drawer-foot {
    /* [v6.6.526] 28→44px — head/body 와 좌우 정렬. */
    padding: 16px 44px;
    border-top: 1px solid var(--sit-border);
    display: flex;
    gap: 10px;
    background: var(--sit-surface);
}
.sit-drawer-action {
    flex: 1;
    padding: 13px 16px;
    border: 1px solid var(--sit-border-strong);
    background: transparent;
    color: var(--text-color, #fafafa);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}
.sit-drawer-action:hover {
    background: var(--sit-surface-hover);
    border-color: var(--text-color, #fafafa);
}
/* [v6.6.505] Phase 4-B — CTA 시안 outline + hover 시 시안 8% 채움.
   메모리: "시안 액센트", "카드 떠있는 형태 비선호" → 통 채움 → outline 으로 변경. */
.sit-drawer-action-primary {
    background: transparent;
    border-color: #22d3ee;
    color: #22d3ee;
}
.sit-drawer-action-primary:hover {
    background: rgba(34, 211, 238, 0.08);
    border-color: #22d3ee;
    color: #67e8f9;
    border-color: #2563eb;
    color: white;
}
.sit-drawer-action-primary .arrow { transition: transform 0.2s; }
.sit-drawer-action-primary:hover .arrow { transform: translateX(4px); }

/* ═══ NAV BADGE ═══ */
.nav-badge.beta-badge {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: var(--color-error, #cf6679);
    padding: 1px 4px;
    border: 1px solid rgba(207, 102, 121, 0.4);
    letter-spacing: 0.12em;
}

.u-admin-card--red {
    border-left: 3px solid var(--color-error, #cf6679) !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
    .sit-header {
        grid-template-columns: auto 1fr;
        gap: 20px;
    }
    .sit-right {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px dashed var(--sit-border);
    }
}

/* [v6.6.409] pane 좁을 때 2열 압박 회피 — 1열 전환 760→960px */
@media (max-width: 960px) and (min-width: 761px) {
    .sit-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .sit-card { min-height: 260px; padding: 24px; }
    .sit-sentiment-score { font-size: 64px; }
}

@media (max-width: 760px) {
    .situation-board { padding: 4px 0 24px; }
    .sit-header {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 18px;
    }
    .sit-brand-mark { width: 34px; height: 34px; font-size: 14px; }
    .sit-brand-text .sit-title { font-size: 12px; letter-spacing: 0.26em; }
    .sit-brand-text .sit-subtitle { font-size: 9px; }
    .sit-stats {
        justify-content: space-between;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .sit-stat { gap: 8px; }
    .sit-stat-value { font-size: 22px; }
    .sit-stat-label { font-size: 8px; letter-spacing: 0.22em; }
    .sit-stat-delta { display: none; } /* 모바일에선 부제 숨겨 공간 확보 */
    .sit-right {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .sit-timestamp { font-size: 10px; }
    .sit-timestamp small { font-size: 8px; }
    .sit-live-indicator { font-size: 9px; padding: 5px 8px; }
    .sit-refresh-btn { width: 32px; height: 32px; }

    .sit-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .sit-card { min-height: auto; padding: 18px; }
    .sit-card-head { margin-bottom: 16px; }
    .sit-game-name .ko { font-size: 15px; }
    .sit-game-name .en { font-size: 8px; letter-spacing: 0.18em; }
    .sit-sentiment-score { font-size: 44px; }
    .sit-card-summary { font-size: 12.5px; line-height: 1.5; }

    .sit-system-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    .sit-system-bar .sys-left, .sit-system-bar .sys-right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .sit-drawer { width: 100%; }
    .sit-drawer-head, .sit-drawer-body, .sit-drawer-foot {
        /* [v6.6.526] 모바일 24→28px — 데스크탑 44px bump 와 비례. */
        padding-left: 28px;
        padding-right: 28px;
    }
    .sit-drawer-head { padding-top: 18px; padding-bottom: 14px; }
    .sit-drawer-title { font-size: 17px; }
    .sit-drawer-subtitle { font-size: 9px; letter-spacing: 0.22em; }
    .sit-drawer-body { padding-top: 18px; gap: 22px; }
    .sit-drawer-foot {
        flex-direction: column;
        gap: 8px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }
    .sit-drawer-action { padding: 12px 14px; font-size: 9px; }
    .sit-sentiment-legend { grid-template-columns: repeat(2, 1fr); }
    .sit-drawer-repsummary { font-size: 13.5px; padding: 14px; }
}

@media (max-width: 380px) {
    .sit-stat-value { font-size: 19px; }
    .sit-sentiment-score { font-size: 38px; }
}

/* [v6.6.466 B] situation 이 코어 pane 으로 통합 환경에 들어왔을 때 — 다른 코어(feed/comments) 와 동일 height.
   레이아웃: 헤더 (chip 4종) 고정 + 카드 영역만 세로 스크롤 + 7일 그래프 하단 고정.
   사용자 의도: 그래프(트렌드 핵심) 가 항상 보이고 카드는 스크롤로 탐색. */
#pane-situation {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
/* [v6.6.466] 외곽 padding 최소화 — 카드/그래프 자체 좌우 너비 ↑ */
#pane-situation .tab-content {
    padding: 6px 4px !important;
}
#pane-situation .situation-board {
    padding: 0 !important;
    max-width: none !important;
}
#pane-situation > #situation-tab {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}
#pane-situation #situation-tab .situation-board {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;       /* 외곽 padding 제거 — pane-window 가 자체 padding 가짐 */
}
#pane-situation .sit-header {
    flex-shrink: 0;
}
/* 카드 영역 — 콘텐츠 높이 유지 + 최대 높이 초과 시 스크롤 */
/* [v6.6.466] 2열 그리드 유지. pane 안 외곽/gap 축소로 카드 자체 좌우 너비 ↑ */
/* [v6.7.12] flex: 1→0 — 그리드가 pane 잔여 공간 전체를 차지하던 구조 개선.
   flex: 0 1 auto 로 콘텐츠 높이만큼만 사용, 카드 아래 그래프가 바로 붙음.
   max-height: 카드가 너무 많을 때 스크롤 활성 (그래프 ~280px + 헤더 ~50px 확보). */
/* [v6.7.13] 모든 게임 렌더 + 그리드 내부 스크롤. 보여지는 영역은 6장(3행 2열).
   max-height: max(360px, calc(100% - 300px)) — 화면 작아도 6장 분량 ~360px 보장(카드 1장 약 110~120px),
   넓을 땐 그래프 영역 빼고 잔여 공간 활용. 7장+ 일 때만 그리드 내부 스크롤 활성. */
#pane-situation .sit-cards-grid {
    flex: 0 1 auto !important;
    overflow-y: auto;
    min-height: 0;
    max-height: max(360px, calc(100% - 300px));
    margin-bottom: 0 !important;   /* 그래프와 붙임 */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;            /* 카드 사이 간격 축소 */
}
/* 7일 그래프 — 하단 고정, 항상 보임 */
#pane-situation .sit-graph-section {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    padding: 8px 4px 6px !important;   /* 위아래 padding 축소 — 여백 줄임 */
}
#pane-situation .sit-graph-canvas-wrap {
    height: 220px !important;   /* 좁은 pane 한정 컴팩트 */
}

/* [v6.6.466] 5번째+ 게임 미표시 hint — chip 영역 끝에 작게. */
.sit-hidden-hint {
    margin-left: 8px;
    font-size: 11px;
    color: var(--sit-text-3, #71717a);
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: help;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* [v6.6.466 A] pane-situation 안 카드 컴팩트 — 좁은 pane(540~600px) 카드 폭 ~270px 에서 가독성 보장.
   요약/breakdown/recent 모두 표시 + 큰 숫자/recent 1건/폰트 축소. 단독 풀뷰 디자인 그대로 두면 정보 손실. */
/* [v6.7.13] 3행 2열 6장 수용 — padding 10/18 → 8/14, 카드 자체 높이 추가 압축. */
#pane-situation .sit-card {
    padding: 8px 14px !important;   /* 위아래 컴팩트, 좌우 시원 */
    min-height: 0 !important;
}
#pane-situation .sit-card-head { margin-bottom: 3px !important; }   /* 4 → 3 */
#pane-situation .sit-game-name .ko { font-size: 0.95rem; }
#pane-situation .sit-card-status { font-size: 0.68rem !important; padding: 2px 8px !important; }
#pane-situation .sit-sentiment {
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px !important;   /* 6 → 2 — 요약 직전 거리 단축 */
}
#pane-situation .sit-sentiment-score {
    font-size: 1.7rem !important;    /* 1.85 → 1.7 — 큰 숫자 더 컴팩트 */
    line-height: 1 !important;
}
#pane-situation .sit-sentiment-label {
    font-size: 0.66rem !important;
}
#pane-situation .sit-mini-bar {
    width: 80px !important;
    height: 3px !important;
}
#pane-situation .sit-card-summary {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;   /* [v6.7.13] 3 → 2 — 6장 수용 위해 다시 압축 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0 4px !important;       /* [v6.7.13] 2 6 → 2 4 */
}
#pane-situation .sit-card-breakdown {
    gap: 6px !important;
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;      /* [v6.7.13] 6 → 4 */
}
#pane-situation .sit-card-breakdown b { font-size: 0.78rem !important; }
#pane-situation .sit-card-recent { margin-bottom: 3px; }
#pane-situation .sit-card-recent .sit-card-recent-row {
    font-size: 0.7rem;
    padding: 2px 0;                     /* [v6.7.13] 3 → 2 */
}
#pane-situation .sit-card-recent .sit-card-recent-row:nth-child(n+2) {
    display: none;   /* 좁은 pane — 1건만 */
}
#pane-situation .sit-card-baseline {
    font-size: 0.7rem !important;
    margin: 3px 0 4px !important;       /* [v6.7.13] 4 6 → 3 4 */
}
#pane-situation .sit-card-sparkline {
    height: 20px !important;            /* [v6.7.13] 24 → 20 */
    margin: 3px 0 4px !important;
}
/* [v6.7.13] sit-card-meta 는 JS 에서 출력 제거됨 — 잔존 CSS 는 dead 이지만 향후 부활 대비 보존. */
#pane-situation .sit-card-meta {
    font-size: 0.65rem !important;
    padding-top: 4px;
}

/* [v6.6.466] 드로어 영역 한글 톤 통일 — JetBrains Mono(터미널 톤) → 본문 폰트(한글 sans-serif).
   카드와 일관된 디자인. 영문 장식 제거(ARES·NORMAL → 한글 status)와 함께 적용. */
.sit-drawer-subtitle,
.sit-drawer .sit-section-label .hint,
.sit-sentiment-legend,
.sit-sentiment-legend .lg,
.sit-sentiment-legend .lg .k,
.sit-sentiment-legend .lg .v,
.sit-input-post-time,
.sit-input-post-sev,
.sit-input-post-submeta {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
.sit-input-post-sev {
    text-transform: none !important;   /* UPPERCASE 폐기 — 한글 라벨 그대로 */
}

/* ═══════════════════════════════════════════════════════════════════
   [v6.7.14] 드로어 head 좌측 패딩 회귀 복원 + AI 요약 글 가독성 개선
   - head padding 36px !important — v6.6.526 이후 또 좁아진 회귀 방지
   - dot 등급별 컬러 복원 (memory: dot 컬러 시스템 선호) — v6.6.505 무채색화 정책 폐지
   - 호버 강화 — translateX + dot scale + title underline + bg 강화
   - 카드 사이 디바이더 — gap+bg 트릭 → border-top (모드 무관 안정)
   - 라이트 모드는 theme-variants.css 에서 hover bg 만 강화
   ═══════════════════════════════════════════════════════════════════ */

/* 1) 드로어 head 좌우 패딩 강제 — specificity 보강 (.sit-drawer .sit-drawer-head) + !important */
.sit-drawer .sit-drawer-head {
    padding-left: 36px !important;
    padding-right: 36px !important;
}

/* 2) AI 요약 카드 디바이더 — gap+bg → border-top (라이트 모드도 자동 동작) */
.sit-input-posts {
    gap: 0 !important;
    background: transparent !important;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--sit-border, #2a2a2e);
}
.sit-input-post + .sit-input-post {
    border-top: 1px solid var(--sit-border, #2a2a2e);
}

/* 3) input-post 호버 강화 — translateX + bg 강화 + transition 명시 */
.sit-input-post {
    transition: background 0.15s ease, transform 0.15s ease, padding-left 0.15s ease;
}
.sit-input-post:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateX(2px);
}
.sit-input-post:hover .sit-input-post-title a {
    border-bottom-color: var(--text-color-secondary, #a1a1aa);
}

/* 4) dot 등급별 컬러 복원 — opacity 1, glow 약하게. v6.6.505 의 무채색 강제 룰을 덮어씀. */
.sit-input-post-dot {
    opacity: 1 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sit-input-post-dot.critical {
    background: var(--color-error, #cf6679) !important;
    box-shadow: 0 0 6px rgba(207, 102, 121, 0.45) !important;
}
.sit-input-post-dot.warning {
    background: var(--color-warning, #fdd835) !important;
    box-shadow: 0 0 6px rgba(253, 216, 53, 0.40) !important;
}
.sit-input-post-dot.info {
    background: var(--color-success, #66bb6a) !important;
    box-shadow: 0 0 5px rgba(102, 187, 106, 0.35) !important;
}
.sit-input-post:hover .sit-input-post-dot {
    transform: scale(1.3);
}

/* ═══════════════════════════════════════════════════════════════════
   [v6.7.208] 상황판 at-a-glance 강화 — Q1 액션 스트립 / Q2 헤드라인 /
   Q3 급증+부정 경보 / Q4 신선도+stale / Q5 신규 배지 / Q6 입력 필터
   ═══════════════════════════════════════════════════════════════════ */

/* Q1/Q2 — 헤더 아래 경보 바 */
.sit-alert-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -4px 0 12px;
}
.sit-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sit-action-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--sit-border-strong, #3f3f46);
    background: var(--sit-surface-2, #17171b);
    color: var(--text-color, #fafafa);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.sit-action-item:hover { background: var(--sit-surface-hover, #1c1c20); }
.sit-action-item.critical { border-color: rgba(239, 68, 68, 0.55); }
.sit-action-item.warning  { border-color: rgba(251, 191, 36, 0.5); }
.sit-action-item b { font-weight: 700; }
.sit-action-item .st {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}
.sit-action-item.critical .st { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
.sit-action-item.warning  .st { color: #fcd34d; background: rgba(251, 191, 36, 0.14); }
.sit-action-item .sm {
    color: var(--sit-text-2, #a1a1aa);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}
.sit-headline {
    font-size: 11.5px;
    color: var(--sit-text-2, #a1a1aa);
    letter-spacing: 0.01em;
}
.sit-headline-inner b { color: var(--text-color, #fafafa); font-weight: 700; }
.sit-headline .sep { color: var(--sit-text-3, #52525b); margin: 0 7px; }

/* Q3 — 카드 급증+부정 결합 경보 */
.sit-card-alert {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.13);
    border: 1px solid rgba(239, 68, 68, 0.4);
    letter-spacing: 0.01em;
}

/* Q4 — 합성 신선도 + stale */
.sit-card-fresh {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--sit-text-3, #71717a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sit-card-fresh.is-stale { color: #fbbf24; }
.sit-card--stale { opacity: 0.62; }
.sit-card--stale:hover { opacity: 1; }

/* Q5 — 신규 since 마지막 조회 배지 */
.sit-card-new {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 6px;
    height: 16px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--primary-color, #3b82f6);
    font-variant-numeric: tabular-nums;
}

/* Q6 — 드로어 입력 글 빠른 필터 */
.sit-input-filter {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
}
.sit-input-filter-chip {
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid var(--sit-border, #27272a);
    background: var(--sit-surface-2, #17171b);
    color: var(--sit-text-2, #a1a1aa);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.sit-input-filter-chip:hover { background: var(--sit-surface-hover, #1c1c20); }
.sit-input-filter-chip.is-active {
    color: var(--text-color, #fafafa);
    border-color: var(--primary-color, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
}

/* M1 — 카드 감정지수 델타 화살표 (N시간 전 스냅샷 대비, 사장 이력 활용) */
.sit-card-delta {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sit-card-delta.up   { color: #4ade80; }
.sit-card-delta.down { color: #f87171; }

/* 모바일 — 액션 아이템 요약 숨김(공간 확보), 헤드라인 줄바꿈 허용 */
@media (max-width: 640px) {
    .sit-action-item .sm { display: none; }
    .sit-headline { line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════════
   [v6.7.209] 대시보드 tier-2 — M2 드로어 추세차트 / M3 시간범위 토글 /
   M4 카드↔리스트 토글 / B3 주간 상태 스트립
   ═══════════════════════════════════════════════════════════════════ */

/* M3/M4 — 헤더 세그먼트 토글 (공통 톤) */
.sit-window-toggle, .sit-view-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--sit-border, #27272a);
    border-radius: 7px;
    overflow: hidden;
    margin-right: 8px;
}
.sit-window-btn, .sit-view-btn {
    padding: 3px 9px;
    border: 0;
    background: var(--sit-surface-2, #17171b);
    color: var(--sit-text-3, #71717a);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.sit-window-btn + .sit-window-btn, .sit-view-btn + .sit-view-btn {
    border-left: 1px solid var(--sit-border, #27272a);
}
.sit-window-btn:hover, .sit-view-btn:hover { background: var(--sit-surface-hover, #1c1c20); }
.sit-window-btn.is-active, .sit-view-btn.is-active {
    color: var(--text-color, #fafafa);
    background: rgba(59, 130, 246, 0.16);
}

/* M4 — 리스트 뷰 (그리드 → 세로 행) */
.sit-cards-grid.sit-cards-grid--list {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}
.sit-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--sit-border, #27272a);
    background: var(--sit-surface-2, #17171b);
    cursor: pointer;
    transition: background 0.12s ease;
}
.sit-list-row:hover { background: var(--sit-surface-hover, #1c1c20); }
.sit-list-row.critical { border-left: 3px solid #ef4444; }
.sit-list-row.warning  { border-left: 3px solid #fbbf24; }
.sit-list-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-color, #fafafa);
    min-width: 96px;
}
.sit-list-status { font-size: 11px; font-weight: 600; min-width: 32px; }
.sit-list-status.red { color: #fca5a5; }
.sit-list-status.amber { color: #fcd34d; }
.sit-list-status.green { color: #86efac; }
.sit-list-status.idle { color: var(--sit-text-3, #71717a); }
.sit-list-score {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-color, #fafafa);
    min-width: 30px;
    text-align: right;
}
.sit-list-bar {
    display: inline-flex;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    max-width: 160px;
    background: var(--sit-surface, #111114);
}
.sit-list-bar .seg { height: 100%; }
.sit-list-bar .seg.positive { background: #4ade80; }
.sit-list-bar .seg.mixed    { background: #fbbf24; }
.sit-list-bar .seg.neutral  { background: #52525b; }
.sit-list-bar .seg.negative { background: #f87171; }
.sit-list-count {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--sit-text-2, #a1a1aa);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sit-list-ratio { color: var(--sit-text-3, #71717a); margin-left: 4px; }

/* M2 — 드로어 감정추세 미니차트 */
.sit-drawer-trend-wrap {
    position: relative;
    height: 120px;
    width: 100%;
}
.sit-drawer-trend-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sit-text-3, #71717a);
    font-size: 12px;
}

/* B3 — 드로어 주간 상태 스트립 */
.sit-drawer-week { margin-top: 10px; }
.sit-week-label {
    font-size: 11px;
    color: var(--sit-text-3, #71717a);
    margin-bottom: 5px;
}
.sit-week-cells { display: flex; gap: 4px; }
.sit-week-cell {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    border-radius: 4px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: #18181b;
    font-weight: 600;
}
.sit-week-cell.red   { background: #ef4444; color: #fff; }
.sit-week-cell.amber { background: #fbbf24; }
.sit-week-cell.green { background: #4ade80; }
.sit-week-cell.idle  { background: var(--sit-border-strong, #3f3f46); color: var(--sit-text-2, #a1a1aa); }

@media (max-width: 640px) {
    .sit-list-bar { max-width: 90px; }
    .sit-list-name { min-width: 70px; font-size: 12px; }
}