/* ══════════════════════════════════════════════════════════
   현장비서 공용 UI
   원칙 1. 어떤 항목도 반만 보이지 않는다 — 가로로 밀어야 보이는 레일 대신
           폭에 맞춰 줄바꿈되는 격자를 쓴다.
   원칙 2. 한 화면에 쏟아붓지 않는다 — 탭·구간바·더보기로 나눈다.
   원칙 3. 저장소(localStorage)·브라우저 팝업은 쓰지 않는다(프로젝트 규칙).
   ══════════════════════════════════════════════════════════ */
:root{
  /* 강조색 — 철(鐵)의 청록. 경보(빨강)·주의(주황)와 겹치지 않아
     위험 신호가 브랜드색에 묻히지 않는다. */
  --o:#0E7C86; --o2:#0A5A63; --soft:#E4F2F3; --onsoft:#0A5A63;
  --ink:#10151B; --ink2:#333B45; --sub:#68717E; --faint:#9AA3AE;
  --paper:#F4F6F7; --card:#fff; --line:#E3E7EB; --line2:#EEF1F3;
  --ok:#0E7A48; --warn:#B54708; --bad:#BF2F2A;
  --rs:10px; --rm:16px; --rl:22px;
  --gut:14px;
}

/* ── 줄바꿈 격자 (옛 hrail) ───────────────────────────────
   같은 급 항목을 폭에 맞춰 2~3열로 채운다. 넘치면 아래 줄로
   내려가므로 오른쪽에서 잘리는 항목이 생기지 않는다. */
.hrail{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:2px 0 2px;
}
.hrail > *{flex:0 1 auto; min-width:0;}
.hrail-w{position:relative;}
.hrail-w::after{content:none;}          /* 페이드 불필요 — 가려지는 게 없다 */

/* 레일 안 카드 — 한 줄에 둘씩 정확히 나눠 채운다 */
.rcard{
  flex:1 1 calc(50% - 4px); min-width:0; box-sizing:border-box;
  background:var(--card); border:1px solid var(--line); border-radius:var(--rm);
  padding:12px 13px;
}
.rcard .rk{font-size:11px; font-weight:700; color:var(--sub); display:flex; align-items:center; gap:4px; min-width:0;}
.rcard .rk, .rcard .rs{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rcard .rv{font-size:19px; font-weight:800; margin-top:5px; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.rcard .rs{font-size:10.5px; color:var(--faint); font-weight:650; margin-top:2px;}
.rcard .rbar{height:4px; border-radius:99px; background:var(--line2); margin-top:9px; overflow:hidden;}
.rcard .rbar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--o),var(--o2));}

/* 성격이 다른 묶음을 가를 때 — 줄바꿈 격자에서는 줄 전체를 차지하는 소제목이 된다 */
.raillb{
  flex:1 1 100%; display:flex; align-items:center; font-size:10.5px; font-weight:800;
  color:var(--faint); padding:4px 1px 0; letter-spacing:-.01em;
}
.raildiv{display:none;}

/* 칩(등급·상태처럼 짧고 수가 많은 것) — 폭을 나눠 가지며 줄바꿈 */
.rchip{
  flex:1 1 56px; min-width:0; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:9px 6px; border-radius:var(--rs);
  background:var(--card); border:1px solid var(--line); cursor:pointer;
  font-family:inherit; color:inherit;
}
.rchip .n{font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1;}
.rchip .t{font-size:10.5px; font-weight:700; color:var(--sub); margin-top:3px; white-space:nowrap;}
.rchip.on{border-color:var(--o); background:var(--soft);}
.rchip.on .t{color:var(--onsoft);}

/* ── 구간 바 (스크롤 스파이) ────────────────────────────
   버튼이 화면 폭을 넘으면 줄을 바꾼다. 반쪽 버튼을 만들지 않는다. */
.secnav{
  position:sticky; top:0; z-index:30; background:var(--paper);
  display:flex; flex-wrap:wrap; gap:5px;
  margin:0 calc(var(--gut) * -1); padding:8px var(--gut);
  box-shadow:0 1px 0 var(--line), 0 6px 14px -10px rgba(0,0,0,.22);
}
.secnav button{
  flex:1 1 auto; min-width:0; padding:8px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--sub);
  font-size:12px; font-weight:750; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.secnav button.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.sec{scroll-margin-top:58px;}
.sec-h{display:flex; align-items:baseline; gap:8px; margin:20px 2px 9px;}
.sec-h b{font-size:15px; font-weight:800; letter-spacing:-.02em;}
.sec-h span{font-size:11.5px; color:var(--sub); font-weight:650;}
.sec-h .sp{flex:1;}

/* ── 탭 (한 자리에서 화면을 갈아 끼울 때) ───────────────── */
.tabs{
  display:flex; flex-wrap:wrap; gap:5px; margin:0 0 11px;
}
.tabs button{
  flex:1 1 auto; min-width:0; padding:9px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--sub);
  font-size:12px; font-weight:750; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.tabs button.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.tabpane[hidden]{display:none;}

/* ── 더보기 ───────────────────────────────────────────── */
.more{
  display:block; width:100%; margin-top:8px; padding:11px;
  border:1px solid var(--line); border-radius:var(--rs); background:var(--card);
  color:var(--o); font-size:12.5px; font-weight:800; font-family:inherit; cursor:pointer;
}
.more:active{background:var(--soft);}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{
  background:var(--ink); color:#fff; border-radius:var(--rl);
  padding:18px 18px 16px; margin-bottom:4px;
}
.hero .hl{font-size:11.5px; font-weight:700; color:#9AA3AE; letter-spacing:-.01em;}
.hero .hv{
  font-size:38px; font-weight:800; line-height:1.05; margin-top:4px;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.hero .hv small{font-size:17px; font-weight:750; margin-left:3px; color:#C3C9D0;}
.hero .hrow{display:flex; align-items:center; gap:14px; margin-top:11px; flex-wrap:wrap;}
.hero .hm{font-size:12px; color:#C3C9D0; font-weight:650;}
.hero .hm b{color:#fff; font-weight:800;}
.hero .hbar{height:6px; border-radius:99px; background:rgba(255,255,255,.14); margin-top:13px; overflow:hidden;}
.hero .hbar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--o),var(--o2));}
.up{color:#6FD2B2;} .down{color:#FF9D8E;}

@media (prefers-reduced-motion:no-preference){
  .hero .hbar i, .rcard .rbar i{transition:width .45s cubic-bezier(.22,.8,.3,1);}
}

/* ── 안전장치: 어떤 글자도 가로로 삐져나가 잘리지 않게 ───── */
.hrail, .secnav, .tabs, .rcard, .rchip{max-width:100%;}