/* =============================================================
   style.css — 네패스아크 AMR 파티클 관제 MVP (v2 시안 토큰·프레임 이식)
   화면 01(index.html) + 화면 02(point.html) 공용
   ============================================================= */

:root{
  --navy:#1f4e79; --navy-700:#17395a;
  --green:#2f8f5b; --amber:#d97706; --red:#c0392b;
  --bg:#f5f7fa; --card:#ffffff; --border:#e2e8f0;
  --ink:#1a2433; --ink-2:#5a6b80; --ink-3:#8a97a8;
  --s1:#2563a8;      /* AMR 실측 */
  --s2:#b0447c;      /* WinCC 고정센서 */
  --predict:#8a97a8; /* AI 예측선 */
}
*{margin:0;padding:0;box-sizing:border-box}
/* 기준 캔버스 1920×1080 (관제 상주 화면) — 작은 뷰포트에서는 스크롤 허용 */
html{width:100%;height:100%;overflow:auto}
body{width:1920px;height:1080px;overflow:visible}
body{
  font-family:Pretendard,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; word-break:keep-all;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
svg text{font-family:Pretendard,'Malgun Gothic',sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- 사이드바 (공통 프레임) ---------- */
.sb{flex:0 0 240px;width:240px;height:1080px;background:var(--navy);color:#fff;display:flex;flex-direction:column}
.sb-top{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.13)}
.logo{font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.35;white-space:nowrap}
.logo .th{display:block;font-weight:500;color:rgba(255,255,255,.8)}
.logo-cap{margin-top:5px;font-size:11px;letter-spacing:.4px;color:rgba(255,255,255,.5)}
.live-badge{margin-top:9px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  border-radius:11px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);
  font-size:11px;font-weight:700;letter-spacing:.4px;color:#fff;white-space:nowrap}
.live-badge .lv{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 7px}
.live-badge.off .lv{background:#9aa7b6}
.nav{padding:12px 10px 0;flex:1;display:flex;flex-direction:column;min-height:0}
.nav-sec{font-size:11px;letter-spacing:.4px;color:rgba(255,255,255,.42);padding:6px 10px 6px}
.nv{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;border-radius:7px;
    color:rgba(255,255,255,.74);font-size:13px;position:relative;margin-bottom:2px}
.nv svg{flex:0 0 15px;opacity:.85}
.nv.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nv.on::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;background:var(--green);border-radius:0 2px 2px 0}
a.nv:hover{background:rgba(255,255,255,.09);color:#fff}
.nv .b2{margin-left:auto;font-size:11px;font-weight:600;color:rgba(255,255,255,.6);
        border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:1px 6px;line-height:1.35}
.sb-div{height:1px;background:rgba(255,255,255,.13);margin:10px 10px}
.sb-run{margin:auto 8px 10px;padding:11px 12px 12px;border-radius:8px;
        background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.sb-run .k{font-size:11px;letter-spacing:.3px;color:rgba(255,255,255,.5)}
.sb-run .v{margin-top:4px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff}
.sb-run .c{margin-top:4px;font-size:11px;color:rgba(255,255,255,.62);line-height:1.4}
.sb-run .row{margin-top:7px;display:flex;align-items:center;justify-content:space-between;
             font-size:12px;color:rgba(255,255,255,.66)}
.sb-run .row b{color:#fff;font-weight:700}
.bar2{margin-top:6px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--green);border-radius:3px}
.sb-flow{margin:0 8px 14px;padding:11px 12px 10px;border-radius:8px;
         background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.sb-flow .k{font-size:11px;letter-spacing:.3px;color:rgba(255,255,255,.5);margin-bottom:6px}
.sb-flow .fl{display:flex;align-items:center;gap:8px;height:23px;font-size:12px;color:rgba(255,255,255,.72);position:relative}
.sb-flow .fl b{margin-left:auto;font-weight:600;color:rgba(255,255,255,.95)}
.sb-flow .fl::after{content:"";position:absolute;left:3.5px;top:19px;height:8px;width:1px;background:rgba(255,255,255,.25)}
.sb-flow .fl:last-child::after{display:none}
.sb-bot{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.13)}
.sb-bot .u1{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.9)}
.sb-bot .u2{margin-top:6px;font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.2px}

/* ---------- 헤더 (공통) ---------- */
.main{flex:0 0 1680px;width:1680px;min-width:0;display:flex;flex-direction:column;height:1080px}
.hd{flex:0 0 64px;height:64px;background:#fff;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.hd h1{font-size:18px;font-weight:700;color:var(--navy);line-height:1.2}
.hd .sub{margin-top:3px;font-size:12px;color:var(--ink-2)}
.hd-r{display:flex;align-items:center;gap:10px}
.clock{text-align:right;margin-right:2px}
.clock .k{font-size:11px;color:var(--ink-3);line-height:1.2}
.clock .v{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4;min-width:196px}
.chip{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--border);
      border-radius:16px;background:#f8fafc;font-size:12px;color:var(--ink-2);white-space:nowrap}
.chip b{color:var(--ink);font-weight:600}
.chip.warn{border-color:#f2ddb8;background:#fdfaf4}

/* 시나리오 토글 (데모 컨트롤 — POST /api/demo/scenario) */
.seg{display:flex;align-items:center;gap:7px;height:32px;padding:0 5px 0 12px;border:1px solid var(--border);
     border-radius:16px;background:#f8fafc;font-size:12px;color:var(--ink-3);white-space:nowrap}
.seg .seg-btns{display:flex;gap:2px;background:#eef2f7;border-radius:12px;padding:2px}
.seg button{height:22px;padding:0 10px;border-radius:10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 1px 2px rgba(26,36,51,.12)}
.seg button:disabled{opacity:.5;cursor:default}

/* ---------- 공통 요소 ---------- */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px}
.dot.g{background:var(--green)} .dot.a{background:var(--amber)} .dot.r{background:var(--red)}
.dot.n{background:#9aa7b6}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px}
.ch{display:flex;align-items:baseline;justify-content:space-between;height:26px;gap:8px}
.ch .t{font-size:13px;font-weight:600;color:var(--ink)}
.ch .c{font-size:11px;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;
      font-size:12px;font-weight:700;line-height:1}
.pill.r{background:#fbeceb;color:var(--red)} .pill.a{background:#fdf3e3;color:#a65b06}
.pill.g{background:#eaf5ef;color:#226d45} .pill.n{background:#eef2f7;color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);
     border:1px solid var(--border);border-radius:9px;padding:1px 7px;margin-right:5px;background:#fafbfd}
.chart-empty{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;
             font-size:12px;color:var(--ink-3);background:#fafbfd;border:1px dashed var(--border);border-radius:8px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

/* 서버 연결 대기 오버레이 */
.content{position:relative}
.waiting{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
         background:rgba(245,247,250,.9)}
.waiting.on{display:flex}
.waiting .box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px 40px;
              text-align:center;box-shadow:0 8px 28px rgba(26,36,51,.08)}
.waiting .t{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px;justify-content:center}
.waiting .t .pulse{width:10px;height:10px;border-radius:50%;background:var(--amber);animation:pulse 1.2s ease-in-out infinite}
.waiting .c{margin-top:9px;font-size:12px;color:var(--ink-2);line-height:1.6}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* =============================================================
   화면 01 — 파티클 모니터링 메인
   ============================================================= */
.s01 .content{height:1016px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}

/* KPI 스트립 */
.kpis{height:104px;display:flex;gap:12px}
.kpi{flex:1;padding:13px 15px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.kpi .l{font-size:12px;color:var(--ink-2);font-weight:600}
.kpi .v{font-size:31px;font-weight:700;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:5px}
.kpi .v .u{font-size:13px;font-weight:600;color:var(--ink-2)}
.kpi .v .sep{width:1px;height:19px;background:var(--border);margin:0 7px;align-self:center}
.kpi .v .d{width:9px;height:9px;border-radius:50%;align-self:center;margin-right:1px}
.kpi .s{font-size:11px;color:var(--ink-3);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;border-radius:3px;background:#eef2f7;overflow:hidden;margin-bottom:5px}
.bar i{display:block;height:100%;background:var(--green);border-radius:3px}

/* 중단 : 맵 + 우측 컬럼 (v3: 하단 그리드 240으로 축소 → 중단 620) */
.s01 .mid{height:620px;display:flex;gap:12px;min-height:0}
.mapcard{flex:0 0 949px;width:949px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:0}
.mapwrap{flex:1;min-height:0}
.mapwrap svg{display:block;width:100%;height:100%}
.legend{height:28px;display:flex;align-items:center;gap:14px;border-top:1px solid #eef2f7;padding-top:8px}
.lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.lg .sw{width:16px;height:0;border-top:2px dashed rgba(31,78,121,.55);display:inline-block}
.lg .swg{width:13px;height:11px;background:#eef1f5;border:1px dashed #b9c4d2;border-radius:2px;display:inline-block}
.lg .swa{width:13px;height:11px;background:var(--navy);border-radius:3px;display:inline-block}
.lg .dm{color:var(--navy);font-weight:700;font-size:13px;line-height:1}
.lg-r{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap}
.mp{cursor:pointer}
.mp:hover .zc{stroke:var(--navy);stroke-width:1.5}

.rcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

/* 전체 모니터링 추이 · 누적 (v3 D3 — /api/overview/series) */
.ov{flex:0 0 164px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ov .ch{height:20px}
.ov .chart{flex:1;min-height:0;--s2:var(--ink-3)}   /* max 시리즈 = 옅은 실선(--ink-3) */

/* 특이사항 패널 (구 AI 판정 결과 — v3 D3 압축 기본) */
.ai{flex:1;min-height:0;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ai .pill{height:19px;padding:0 8px;font-size:11px}
.ai-body{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.jd{border:1px solid var(--border);border-radius:8px;padding:4px 10px;overflow:hidden}
.jd.r{border-color:#f0cdc9;background:#fdf6f5;border-left:3px solid var(--red)}
.jd.a{border-color:#f2ddb8;background:#fdfaf4;border-left:3px solid var(--amber)}
.jd.g{border-color:#cfe6da;background:#f6fbf8;border-left:3px solid var(--green)}
.jd-h{display:flex;align-items:center;gap:8px;height:21px;cursor:pointer}
.jd-h .p{font-size:13px;font-weight:700;color:var(--ink)}
.jd-h .p:hover{text-decoration:underline}
.jd-h .val{margin-left:auto;font-size:12px;color:var(--ink-2);white-space:nowrap}
.jd-h .val b{font-size:15px;font-weight:700;color:var(--ink)}
.jd-txt{margin-top:2px}
.jd-txt p{font-size:12px;color:var(--ink);line-height:1.4}
.jd-txt p.m{color:var(--ink-2)}
.jd-txt .minl{color:var(--ink-2);font-weight:400}
.lyr{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}
.lyr span{font-size:11px;color:var(--ink-2);background:#fff;border:1px solid var(--border);
          border-radius:5px;padding:2px 7px;line-height:1.35}
.lyr span b{color:var(--ink);font-weight:700}
.rec{margin-top:6px;min-height:24px;display:flex;align-items:center;gap:7px;background:#fff;
     border:1px solid #f0cdc9;border-radius:6px;padding:2px 9px;font-size:11px;color:var(--ink);line-height:1.35}
.rec .k{color:var(--red);font-weight:700;flex:0 0 auto}
.gsum{display:flex;align-items:center;gap:10px;padding:6px 10px}
.gsum .t1{font-size:12px;font-weight:700;color:var(--ink)}
.gsum .t2{font-size:11px;color:var(--ink-2);margin-top:3px}
.gsum .rr{margin-left:auto;text-align:right;font-size:11px;color:var(--ink-3);line-height:1.5}

/* 온습도 카드 (v3: 누적 차트 신설 — 축소) */
.throw{flex:0 0 96px;display:flex;gap:10px}
.th{flex:1;padding:9px 10px 7px;display:flex;flex-direction:column;min-width:0}
.th-h{display:flex;align-items:baseline;justify-content:space-between;height:17px}
.th-h .t{font-size:12px;font-weight:600;color:var(--ink)}
.th-h .c{font-size:11px;color:var(--ink-3)}
.th-b{flex:1;display:flex;align-items:center;gap:6px;min-height:0}
.th-v{width:92px;flex:0 0 92px}
.th-v .n{font-size:22px;font-weight:700;line-height:1;display:flex;align-items:baseline;gap:3px}
.th-v .n span{font-size:12px;font-weight:600;color:var(--ink-2)}
.th-v .st{margin-top:5px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);white-space:nowrap}
.th-b .chart{flex:1;min-width:0}
.th-f{height:16px;display:flex;align-items:center;justify-content:space-between;
      border-top:1px solid #f1f5f9;padding-top:3px;font-size:11px;color:var(--ink-3);gap:6px;white-space:nowrap;overflow:hidden}
.th-f .warn{color:#a65b06;font-weight:600}

/* 알람 최근 5건 미니 리스트 (§8 · v3 축소) */
.al5{flex:0 0 122px;padding:9px 12px 7px;display:flex;flex-direction:column;min-height:0}
.al5 .hd5{display:flex;align-items:baseline;gap:8px;height:19px}
.al5 .hd5 .t{font-size:12px;font-weight:600;color:var(--ink)}
.al5 .hd5 .c{margin-left:auto;font-size:11px;color:var(--ink-3)}
.al5 .rows{flex:1;min-height:0;overflow:hidden;margin-top:2px}
.alr{display:flex;align-items:center;gap:7px;height:17px;font-size:12px;color:var(--ink-2)}
.alr .ti{flex:0 0 34px;font-weight:600;color:var(--ink)}
.alr .ty{flex:0 0 74px;font-weight:600;white-space:nowrap}
.alr .ty.r{color:var(--red)} .alr .ty.a{color:#a65b06} .alr .ty.n{color:var(--ink-2)}
.alr .ms{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alr .st{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.al5 .empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3)}

/* 하단 미니차트 6종 (유지 · v3 240으로 재배분) */
.grid6{height:240px;display:flex;gap:12px}
.mc{flex:1;padding:10px;display:flex;flex-direction:column;min-width:0}
.mc-h{height:30px;display:flex;align-items:center;gap:6px;cursor:pointer}
.mc-h:hover .p{color:var(--navy);text-decoration:underline}
.mc-h .p{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.mc-h .z{font-size:11px;color:var(--ink-3);white-space:nowrap}
.mc-h .v{margin-left:auto;text-align:right;line-height:1.1}
.mc-h .v b{font-size:15px;font-weight:700}
.mc-h .v b.r{color:var(--red)} .mc-h .v b.a{color:#a65b06}
.mc-h .v i{display:block;font-size:11px;font-style:normal;color:var(--ink-3)}
.mc-s{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700}
.mc-s.g{color:#226d45} .mc-s.a{color:#a65b06} .mc-s.r{color:var(--red)}
.mc .chart{flex:1;min-height:0;margin:4px 0;display:flex;flex-direction:column}
.mc-f{margin-top:auto;height:22px;display:flex;align-items:center;justify-content:space-between;
      border-top:1px solid #f1f5f9;font-size:11px;color:var(--ink-3);padding-top:5px;gap:6px;white-space:nowrap;overflow:hidden}
.mc-f .n{font-weight:600;color:var(--ink-2)}
.mc-f .n.r{color:var(--red)} .mc-f .n.a{color:#a65b06}

/* =============================================================
   화면 02 — 측정포인트 상세
   ============================================================= */
.s02 .content{height:1016px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}

/* Row1 포인트 헤더 */
.phead{flex:0 0 74px;display:flex;align-items:center;gap:14px;padding:0 18px}
.phead .pt{font-size:22px;font-weight:700;color:var(--ink)}
.phead .zone{font-size:13px;color:var(--ink-2);font-weight:400}
.pchips{display:flex;gap:10px;margin-left:14px}
.pchip{display:flex;flex-direction:column;justify-content:center;gap:2px;height:52px;padding:0 14px;
       border:1px solid var(--border);border-radius:9px;background:#fafbfd;min-width:128px}
.pchip .k{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.pchip .v{font-size:16px;font-weight:700;color:var(--ink)}
.pchip .v span{font-size:11px;font-weight:600;color:var(--ink-2);margin-left:2px}
.pchip.bad{border-color:#f0cdc9;background:#fdf6f5}
.pchip.bad .v{color:var(--red)}
.pchip.wa{border-color:#f2ddb8;background:#fdfaf4}
.pchip.wa .v{color:#a65b06}
.phead .rr{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-2);line-height:1.6}
.phead .rr b{color:var(--ink)}

/* Row2 메인 차트 + AI 판정 상세 */
.p-mid{flex:0 0 512px;display:flex;gap:12px;min-height:0}
.chart-card{flex:0 0 1128px;width:1128px;padding:14px 16px;display:flex;flex-direction:column;min-height:0}
.chart-card .ch{height:24px}
.chart-card .ch .t{font-size:14px;font-weight:700}
.lgd{display:flex;gap:16px;align-items:center;height:22px;margin-top:2px;flex-wrap:wrap}
.lgd .l{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.lgd .sw{width:16px;height:0;border-top:2.5px solid var(--s1);display:inline-block}
.lgd .sw2{width:16px;height:0;border-top:2px solid var(--s2);display:inline-block}
.lgd .swm{width:9px;height:9px;border:1.6px solid var(--navy);border-radius:50%;background:#fff;display:inline-block}
.lgd .swa{width:16px;height:0;border-top:2px dashed var(--amber);display:inline-block}
.lgd .sw3{width:16px;height:0;border-top:2px dashed var(--red);display:inline-block}
.lgd .sw4{width:16px;height:0;border-top:2px dashed var(--predict);display:inline-block}
.chart-card .chart{flex:1;min-height:0;margin-top:4px}
.chart-note{border-top:1px solid #f1f5f9;margin-top:6px;padding-top:6px;font-size:12px;color:var(--ink-2);line-height:1.5}
.chart-note .m{color:var(--ink-3)}

.aicard{flex:1;min-width:0;padding:13px 15px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.aicard .h{display:flex;align-items:center;gap:8px}
.aicard .h .t{font-size:14px;font-weight:700;color:var(--ink)}
.aicard .h .c{margin-left:auto;font-size:11px;color:var(--ink-3)}
.jtable{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.jrow{display:flex;align-items:center;min-height:42px;border-top:1px solid #eef2f6;padding:6px 11px;gap:10px}
.jrow:first-child{border-top:0}
.jrow .lv{flex:0 0 82px;font-size:12px;font-weight:700;color:var(--ink-2)}
.jrow .res{flex:0 0 64px}
.jrow .de{flex:1;font-size:12px;color:var(--ink-2);line-height:1.45}
.jrow .de b{color:var(--ink)}
.patt{border:1px solid #f0cdc9;background:#fdf6f5;border-radius:8px;padding:9px 12px}
.patt.a{border-color:#f2ddb8;background:#fdfaf4}
.patt .t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--red)}
.patt.a .t{color:#a65b06}
.patt .t .sim{margin-left:auto;font-size:12px;color:var(--ink-2);font-weight:600}
.patt .t .sim b{color:var(--red)}
.patt p{margin-top:5px;font-size:12px;color:var(--ink);line-height:1.5}
.patt .ev{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.patt .ev span{font-size:11px;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:5px;padding:2px 7px}
.reco{border:1px solid var(--border);border-radius:8px;padding:9px 12px;background:#fafbfd}
.reco .t{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:5px}
.reco .r{display:flex;gap:8px;font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:3px}
.reco .r .k{flex:0 0 40px;font-weight:700;color:var(--navy)}
.reco .r b{color:var(--ink)}
.jhist{margin-top:auto;border-top:1px solid #eef2f6;padding-top:7px}
.jhist .t{font-size:11px;color:var(--ink-3);margin-bottom:4px}
.jhist .r{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);height:21px;white-space:nowrap;overflow:hidden}
.jhist .r b{color:var(--ink);font-weight:600;flex:0 0 40px}

/* Row3 보조 차트 + 타임라인 */
.p-bot{flex:1;min-height:0;display:flex;gap:12px}
.bc{flex:0 0 380px;width:380px;padding:12px 14px;display:flex;flex-direction:column;min-height:0}
.bc .h{display:flex;align-items:baseline;gap:8px;height:24px}
.bc .h .t{font-size:13px;font-weight:700;color:var(--ink)}
.bc .h .st{font-size:12px;font-weight:700}
.bc .h .st.g{color:#226d45} .bc .h .st.a{color:#a65b06} .bc .h .st.r{color:var(--red)}
.bc .h .v{margin-left:auto;font-size:14px;font-weight:700;color:var(--ink)}
.bc .h .v span{font-size:11px;font-weight:600;color:var(--ink-2)}
.bc .chart{flex:1;min-height:0;display:flex;flex-direction:column}
.bc .f{margin-top:auto;border-top:1px solid #f1f5f9;padding-top:6px;font-size:11px;color:var(--ink-3);
       display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden}
.tl{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;min-height:0}
.tl .h{display:flex;align-items:baseline;height:24px;gap:8px}
.tl .h .t{font-size:13px;font-weight:700;color:var(--ink)}
.tl .h .c{margin-left:auto;font-size:11px;color:var(--ink-3)}
.tl-body{flex:1;margin-top:6px;position:relative;padding-left:4px;overflow:hidden;min-height:0}
.te{display:flex;gap:11px;position:relative;padding-bottom:11px}
.te::before{content:"";position:absolute;left:5.5px;top:16px;bottom:-2px;width:1px;background:#e2e8f0}
.te:last-child::before{display:none}
.te .d{flex:0 0 12px;width:12px;height:12px;border-radius:50%;margin-top:2px;border:2.5px solid var(--green);background:#fff}
.te .d.r{border-color:var(--red)} .te .d.a{border-color:var(--amber)} .te .d.n{border-color:var(--navy)}
.te .tx{flex:1;min-width:0}
.te .r1{display:flex;align-items:center;gap:8px;font-size:13px}
.te .r1 b{font-weight:700;color:var(--ink);flex:0 0 42px}
.te .r1 .ti{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te .r2{margin-top:2px;font-size:12px;color:var(--ink-2);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl .empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3)}