/* 상태 화면만의 규칙. 색 토큰 · 글꼴 · 머리줄 띠(이름표 + 탭) · 단(.page) · 흰 둥근 카드(.card) · 수준 색(.lv-*)은 common.css 에서 온다. 660px 한 단 · 90칸 막대 */
.page { --page: 692px; }   /* 660px 단 + 양쪽 16px */

/* 머리줄 바로 아래 한 줄 소개(검색엔진이 읽는 정적 글) */
.lead { margin: -10px 0 16px; color: var(--muted); font-size: 12px; }

/* 맨 위: 진행 중 사고 배너(사고마다 하나) · 없으면 전체 상태 막대 하나 */
.banner { background: var(--card); border: 1px solid var(--c); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.banner-title { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: var(--c); color: #fff; font-size: 15px; font-weight: 600; }
.banner-src { font-size: 12px; font-weight: 400; white-space: nowrap; }
.banner-title a { margin-left: auto; color: #fff; font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.banner-title a:hover { text-decoration: underline; }
.banner-body { padding: 12px 16px 10px; }
.banner-body p { margin: 0 0 4px; }
.stamp { color: var(--muted); font-size: 11px; }
.allbar { padding: 14px 18px; border-radius: var(--radius); background: var(--c); color: #fff; font-size: 15px; font-weight: 600; }
.scheduled { margin: 8px 4px 0; color: var(--muted); font-size: 12px; }   /* 막대 아래 예정된 점검 한 줄 */

/* 조회 기간 줄: 왼쪽 설명, 오른쪽 30 · 60 · 90일 단추(눌린 것은 남보라) */
.controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 40px 0 6px; }
.caption { margin: 0; color: var(--muted); font-size: 11px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: var(--card); }
.seg button { padding: 4px 10px; border: 0; border-left: 1px solid var(--line-2); background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button.is-active { background: var(--primary); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* 공급사 카드. 머리줄은 단추(키보드로 접기)라 단추 기본 모양을 지운다 */
.group { margin-bottom: 14px; }
.head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 16px; border: 0; border-radius: var(--radius); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; user-select: none; }
.head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.head .name { flex: 1; color: var(--ink); font-size: 15px; font-weight: 600; }
.tog { width: 10px; height: 10px; color: var(--muted); flex: none; }
.tog .plus { display: none; }                 /* 펼친 상태는 ⊟ */
.collapsed .tog .plus { display: inline; }    /* 접힌 상태는 ⊞ */
.collapsed .body { display: none; }
.word { color: var(--c); font-size: 12px; white-space: nowrap; }
.word.muted { color: var(--muted); }
.comp { border-top: 1px solid var(--line); padding: 13px 16px 12px; }
.comp.is-group { background: #f8f9fc; }   /* 묶음 줄(API 전체)은 바탕을 살짝 달리 */
.comp .name .muted { font-size: 12px; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.line .name { font-size: 13px; }
.bars { display: flex; gap: 2px; height: 34px; }
.bar { flex: 1 1 3px; min-width: 1px; background: var(--c); }
.bar:hover, .bar:focus-visible { opacity: .75; }
.bar:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.legend { display: flex; align-items: center; gap: 10px; margin-top: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.legend i { flex: 1; border-top: 1px solid var(--line); }

/* 모델 격자: 점이 색, 낱말이 뜻. 긴 이름은 줄여 쓰지 않고 다음 줄로(점은 첫 줄에). 600px 아래선 두 단 */
.models { border-top: 1px solid var(--line); padding: 11px 16px 13px; }
.models .label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 16px; margin: 0; padding: 0; list-style: none; }
.model { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 2px 0; font-size: 13px; line-height: 1.4; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; align-self: flex-start; margin-top: 5px; }
.mname { flex: 1; min-width: 0; }
.mword { color: var(--c); font-size: 11px; white-space: nowrap; }

/* 지난 사고: 맨 위 머리글 줄 한 번, 날짜 묶음마다 고정 격자 줄(시각 · 출처 · 수준 · 내용 · 상태) */
.past h2 { margin: 44px 0 12px; color: var(--ink); font-size: 18px; font-weight: 700; }
.rowhead, .row { display: grid; grid-template-columns: 52px 96px 72px minmax(0, 1fr) 84px; grid-template-areas: "time src lv title state"; gap: 0 10px; align-items: baseline; }
.rowhead { padding-bottom: 6px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 11px; }
.c-time { grid-area: time; } .c-src { grid-area: src; } .c-lv { grid-area: lv; } .c-title { grid-area: title; } .c-state { grid-area: state; text-align: right; }
.day { margin-top: 14px; }
.day h3 { margin: 0; padding: 6px 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.rows { margin: 0; padding: 0; list-style: none; }
.row { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.row .c-time, .row .c-state { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .c-time { color: var(--muted); }
.row .c-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .c-title { min-width: 0; }
.row .c-title a { color: var(--ink); font-weight: 600; text-decoration: none; }
.row .c-title a:hover { text-decoration: underline; }
.row .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.row .c-state { font-size: 12px; }
.row .c-state.open { color: var(--ink); font-weight: 600; }
.row.is-target { background: var(--primary-soft); }   /* 말풍선에서 건너온 줄을 잠깐 비춘다 */
.logbtn { margin-left: 8px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; vertical-align: 1px; }
.logbtn:hover, .logbtn[aria-expanded="true"] { color: var(--primary); border-color: var(--primary); }
.logbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 경과 목록: 줄 전체 너비로 아래에, 최신 글부터. 시각 · 상태 낱말 · 글 */
.log { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px 0 2px 12px; border-left: 2px solid var(--line-2); list-style: none; font-size: 12px; }
.log li { display: grid; grid-template-columns: 82px 72px minmax(0, 1fr); gap: 0 10px; padding: 3px 0; align-items: baseline; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log b { color: var(--ink); font-weight: 600; }
.log span { white-space: pre-line; overflow-wrap: anywhere; }
.none { margin: 0; color: var(--muted); }

.footnote { margin: 36px 0 0; color: var(--muted); font-size: 11px; }
footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* 막대 말풍선 */
.tip { position: absolute; z-index: 10; max-width: 300px; padding: 7px 10px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.45; pointer-events: none; }
.tip .muted { color: #c5cedc; }
.tip .ev i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--c); }   /* 사고 줄 앞의 수준 색 점 */
.tip.pinned { pointer-events: auto; box-shadow: 0 6px 20px rgba(11, 31, 58, .25); }
.tip a { color: #c7d2fe; font-weight: 600; text-decoration: underline; }

@media (max-width: 600px) {
  .bars { gap: 1px; }   /* 좁은 화면에서 90칸이 들어가게 */
  .controls { margin-top: 28px; }
  .log li { grid-template-columns: 82px minmax(0, 1fr); } .log b { grid-column: 2; } .log span { grid-column: 1 / -1; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  .rowhead { display: none; }   /* 제목이 둘째 줄로 내려가 머리글 줄과 맞지 않는다 */
  .row { grid-template-columns: 52px 96px minmax(0, 1fr) auto; grid-template-areas: "time src lv state" "title title title title"; row-gap: 2px; }
}