/*
Theme Name: 고속도로 CCTV
Theme URI: https://cctv.kimmutzym.co.kr
Author: kimmutzym
Description: 전국 고속도로 실시간 CCTV 사이트 전용 테마. ITS 오픈API에서 CCTV를 자동 수집해 노선·지역·도시별 페이지를 만들고, 토큰 만료로 영상이 끊기는 문제를 해결합니다.
Version: 5.6.1
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: cctvhw
*/

/* ============================================================
   뉴트럴 라이트 — 바탕은 무채색, 색은 소통 상태에만 쓴다
   ============================================================ */
:root{
  --ink:#16181C;
  --ink-2:#2A2E34;
  --muted:#6A7078;
  --bg:#F5F6F7;
  --card:#FFFFFF;
  --line:#DDE0E4;
  --line-soft:#EEF0F2;
  --head:#1B1E23;
  --head-ink:#F5F6F7;

  --ok:#1E6B34;      --ok-bg:#E3F1E6;
  --slow:#8A5A08;    --slow-bg:#FAF0DC;
  --jam:#96271A;     --jam-bg:#FAE4E2;

  --radius:12px;
  --shadow:0 1px 2px rgba(22,24,28,.04), 0 8px 24px -18px rgba(22,24,28,.4);
  --sans:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1000px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E6E9ED; --ink-2:#D5DAE0; --muted:#98A0AA;
    --bg:#15181C; --card:#1C2026; --line:#2B313A; --line-soft:#232830;
    --head:#0C0E11; --head-ink:#E6E9ED;

    --ok:#63C983; --ok-bg:#12301C;
    --slow:#E0A94A; --slow-bg:#332714;
    --jam:#EE8375; --jam-bg:#371915;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ink:#E6E9ED; --ink-2:#D5DAE0; --muted:#98A0AA;
  --bg:#15181C; --card:#1C2026; --line:#2B313A; --line-soft:#232830;
  --head:#0C0E11; --head-ink:#E6E9ED;

  --ok:#63C983; --ok-bg:#12301C;
  --slow:#E0A94A; --slow-bg:#332714;
  --jam:#EE8375; --jam-bg:#371915;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.68;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:3px}
button{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--card);padding:10px 14px;border-radius:8px}

/* ---------- 헤더 ---------- */
.site-head{background:var(--head);color:var(--head-ink);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:10px;height:56px}
.brand{font-weight:800;font-size:17px;letter-spacing:-.025em;color:var(--head-ink);text-decoration:none}
.head-sp{margin-left:auto}
.icon-btn{display:grid;place-content:center;width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.09);border:0;color:var(--head-ink);cursor:pointer;font-size:15px}
.icon-btn:hover{background:rgba(255,255,255,.2)}

.navbar{background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.navbar::-webkit-scrollbar{display:none}
.navbar ul{display:flex;gap:6px;list-style:none;margin:0 auto;padding:8px 16px;max-width:var(--wrap)}
.navbar a{display:block;white-space:nowrap;padding:7px 13px;border-radius:999px;font-size:13.5px;
  font-weight:600;color:var(--ink-2);text-decoration:none;background:var(--line-soft)}
.navbar a:hover{background:var(--head);color:var(--head-ink)}
.navbar li.current-menu-item a{background:var(--head);color:var(--head-ink)}

/* ---------- 히어로 ---------- */
.hero{padding:26px 0 4px}
.hero h1{font-size:clamp(22px,5vw,31px);line-height:1.26;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.hero p{color:var(--muted);margin:0;font-size:15.5px}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  color:var(--ink-2);background:var(--line-soft);padding:4px 10px;border-radius:999px;margin-bottom:10px}
.live-dot i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-dot i,.cctv-spin{animation:none}}

/* ---------- 홈 광고 한 칸 ---------- */
/*
 * 검색창 바로 아래. 높이를 미리 잡아 두어 광고가 늦게 떠도 화면이 안 밀립니다.
 * 미리 숨기지 않습니다 — 애드센스가 못 채웠다고 알려줄 때만 접습니다.
 */
.adslot{margin:22px 0;min-height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.adslot > ins{display:block;width:100%}
.adlabel{align-self:flex-start;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.adslot.is-unfilled{display:none}
.adslot.lead{margin:14px 0 4px}
@media (min-width:700px){ .adslot{min-height:300px} }

/* ---------- 명절 특집 ---------- */
.season{background:var(--head);color:var(--head-ink);border-radius:var(--radius);
  padding:18px 20px;margin:18px 0;display:flex;flex-direction:column;gap:10px}
.season .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.season h2{margin:0;font-size:19px;letter-spacing:-.025em}
.season .dday{font-variant-numeric:tabular-nums;font-weight:800}
.season .links{display:flex;gap:7px;flex-wrap:wrap}
.season .links a{background:rgba(255,255,255,.12);color:var(--head-ink);text-decoration:none;
  padding:8px 13px;border-radius:8px;font-size:13.5px;font-weight:600}
.season .links a:hover{background:rgba(255,255,255,.24)}

/* ---------- 섹션 · 타일 ---------- */
.sec{margin:26px 0}
.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.sec-h h2{font-size:18px;letter-spacing:-.025em;margin:0}
.sec-h span{font-size:13px;color:var(--muted)}
.sec-h a{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none}

.grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{display:flex;flex-direction:column;gap:2px;padding:13px 15px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .14s ease,border-color .14s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--ink)}
.tile b{font-size:15px;letter-spacing:-.015em}
.tile small{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}


/* ---------- 본문 ---------- */
.article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin:16px 0}
.article h1{font-size:clamp(21px,4.4vw,27px);line-height:1.32;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.meta{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.meta .cat{background:var(--line-soft);color:var(--ink-2);padding:3px 9px;border-radius:999px;
  font-weight:700;text-decoration:none}
.entry{font-size:16.5px}
.entry h2{font-size:19.5px;letter-spacing:-.025em;margin:28px 0 10px;padding-top:16px;border-top:2px solid var(--line)}
.entry h3{font-size:17.5px;margin:20px 0 8px}
.entry p{margin:0 0 14px}
.entry ul,.entry ol{padding-left:1.2em;margin:0 0 14px}
.entry li{margin:4px 0}
.entry img{border-radius:10px}
.entry table{width:100%;border-collapse:collapse;font-size:15px}
.tbl-scroll{overflow-x:auto;margin:0 0 14px}
.entry th,.entry td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.entry th{background:var(--line-soft);font-weight:700}

/* 기존 Blogger 글 클래스 그대로 지원 */
.box-summary,.box-info,.box-tip,.box-warn,.box-check{border-radius:10px;padding:14px 16px;
  margin:0 0 16px;border:1px solid var(--line);background:var(--line-soft)}
.box-summary{border-left:4px solid var(--ink)}
.box-info{border-left:4px solid var(--ink-2)}
.box-tip{border-left:4px solid var(--slow);background:var(--slow-bg);border-color:var(--slow-bg)}
.box-warn{border-left:4px solid var(--jam);background:var(--jam-bg);border-color:var(--jam-bg)}
.box-check{border-left:4px solid var(--ok);background:var(--ok-bg);border-color:var(--ok-bg)}
.box-summary>:last-child,.box-info>:last-child,.box-tip>:last-child,
.box-warn>:last-child,.box-check>:last-child{margin-bottom:0}
.faq{border:1px solid var(--line);border-radius:10px;margin:0 0 9px;background:var(--card);overflow:hidden}
.faq>summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary::before{content:"+";font-weight:800;margin-right:8px;color:var(--muted)}
.faq[open]>summary::before{content:"–"}
.faq-a{padding:0 16px 14px;color:var(--ink-2)}

/* ---------- 버튼 ---------- */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--head);
  color:var(--head-ink);font-weight:700;text-decoration:none;padding:11px 18px;border-radius:9px;
  border:0;cursor:pointer;font-size:14.5px}
.btn-cta:hover{opacity:.88;color:var(--head-ink)}
.btn-cta.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}

/* ---------- 글 목록 ---------- */
.plist{display:grid;gap:11px}
.pcard{display:grid;grid-template-columns:92px 1fr;gap:13px;padding:13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.pcard:hover{border-color:var(--ink)}
.pcard .thumb{width:92px;height:69px;border-radius:9px;overflow:hidden;background:var(--line-soft)}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard h3{margin:0 0 4px;font-size:15.5px;line-height:1.42;letter-spacing:-.02em}
.pcard p{margin:0;font-size:13.5px;color:var(--muted);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard.no-thumb{grid-template-columns:1fr}
.pcard.no-thumb .thumb{display:none}

/* ---------- 푸터 · 페이저 ---------- */
.site-foot{margin-top:38px;padding:24px 0 40px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px}
.site-foot .wrap{display:flex;flex-direction:column;gap:7px}
.site-foot a{color:var(--muted)}
.pager{display:flex;gap:7px;justify-content:center;margin:22px 0;flex-wrap:wrap}
.pager a,.pager span{padding:8px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);text-decoration:none;color:var(--ink)}
.pager .current{background:var(--head);color:var(--head-ink);border-color:var(--head)}

@media (min-width:720px){
  .article{padding:30px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
}

/* ============================================================
   본문용 실시간 보기 버튼 — 글 안에 넣습니다
   ============================================================ */
.cta-live{
  background:var(--head);color:var(--head-ink);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 20px;display:flex;flex-direction:column;gap:11px;
}
.cta-live>b{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.4;color:var(--head-ink)}
.cta-live>p{margin:0;font-size:14px;line-height:1.65;color:#AEB5BD}
.cta-live .cta-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.cta-live .btn-cta{
  flex:1;min-width:190px;background:#fff;color:var(--head);font-weight:700;
  padding:13px 18px;font-size:15px;
}
.cta-live .btn-cta:hover{opacity:.92;color:var(--head)}
.cta-live .btn-cta.ghost{
  background:transparent;color:var(--head-ink);border:1px solid rgba(245,246,247,.28);
}
.cta-live .btn-cta.ghost:hover{background:rgba(245,246,247,.08);color:var(--head-ink)}

/* 글 중간에 한 번 더 넣을 때 쓰는 작은 형태 */
.cta-live.standalone{margin:18px 0}
.cta-live.sm{padding:15px 17px;gap:9px}
.cta-live.sm>b{font-size:15px}
.cta-live.sm .btn-cta{padding:11px 15px;font-size:14px;min-width:160px}

@media (max-width:560px){
  .cta-live .btn-cta{flex:1 1 100%;min-width:0}
}

/* 글 화면은 읽기 좋은 폭으로 — 한 줄이 너무 길면 눈이 줄을 놓칩니다 */
.article{max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- 빵부스러기 ---------- */
.crumb{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin:0 0 10px;font-size:12.5px;color:var(--mut)}
.crumb a{color:var(--mut);text-decoration:none;border:0}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:var(--line);font-size:11px}
.crumb span{color:var(--mut)}

/* ---------- 글 대표 이미지 (v3.2.0) ---------- */
.hero-img{margin:14px 0 20px;border-radius:var(--radius);overflow:hidden;
  background:var(--line-soft);line-height:0}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){.hero-img{margin:12px 0 16px}}


/* ═══════════════════════════════════════════════════════
   경로 도구 (v5.0.0)
   지도를 쓰지 않습니다. 노선·출발·도착으로 거릅니다.
   ═══════════════════════════════════════════════════════ */

.scr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-sub{color:var(--muted);margin:0;font-size:15.5px;line-height:1.6}

/* 검색창 */
.sbox{position:relative;margin:16px 0 2px}
.sbox svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);
  pointer-events:none}
.sbox input{width:100%;padding:15px 16px 15px 46px;font:inherit;font-size:15.5px;
  border:1.5px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow);-webkit-appearance:none}
.sbox input::placeholder{color:var(--muted)}
.sbox input:focus{outline:none;border-color:var(--ok)}

/* 노선 칩 — 실시간이 꺼져 있을 때만 나옵니다 */
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 16px;margin:0 -16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;
  padding:0 5px;border-radius:5px;background:#1B4E9B;color:#fff;font-size:11.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.chip.on .n{background:#fff;color:#1B4E9B}

/* 고르는 칸 */
.route{margin:14px 0;padding:15px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow)}
.route h2{margin:0 0 11px;font-size:15.5px;font-weight:800;letter-spacing:-.03em}
.route .fields{display:flex;flex-direction:column;gap:8px}
.route .fld{display:flex;align-items:center;gap:9px}
.route .fld>span{flex:none;width:32px;font-size:12.5px;color:var(--muted);font-weight:700}
.route .swap{width:100%;margin-top:7px;padding:8px;border:1px solid var(--line);border-radius:9px;
  background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.route .swap:hover{border-color:var(--ink);color:var(--ink)}

/* 출발·도착 칸 — 누르면 고르는 판이 열립니다 (assets/cctv-route.js) */
.route .pick{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:11px 12px;font:inherit;font-size:14.5px;font-weight:600;
  text-align:left;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer}
.route .pick span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route .pick.empty span{color:var(--muted);font-weight:500}
.route .pick em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.route .pick:after{content:'';flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.route .pick:focus-visible{outline:none;border-color:var(--ok)}

/* 고르는 판 — 폰은 아래에서, 넓은 화면은 가운데 */
.pk{position:fixed;inset:0;z-index:1000}
.pk[hidden]{display:none}
html.pk-open{overflow:hidden}
.pk-dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
/* 높이를 고정합니다 — 검색 결과가 줄어도 판이 아래로 내려앉지 않게. dvh 는 폰 주소창·자판을 뺀 높이 */
.pk-box{position:absolute;left:0;right:0;bottom:0;height:86vh;height:86dvh;display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:pkUp .2s ease-out}
@keyframes pkUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:640px){.pk-box{left:50%;right:auto;bottom:auto;top:50%;width:440px;height:78vh;height:78dvh;max-height:720px;border-radius:16px;transform:translate(-50%,-50%);animation:none}}
.pk-top,.pk-q,.pk-chips,.pk-note{flex:none}
.pk-top{display:flex;align-items:center;padding:16px 16px 10px}
.pk-top b{flex:1;font-size:16px;font-weight:800;letter-spacing:-.02em}
.pk-x{border:0;background:none;color:var(--muted);font-size:18px;padding:4px 6px;cursor:pointer}
.pk-q{padding:0 16px 10px}
.pk-q input{width:100%;padding:11px 13px;font:inherit;font-size:15px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.pk-q input:focus{outline:none;border-color:var(--ok)}
.pk-chips{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.pk-chips::-webkit-scrollbar{display:none}
.pk-chips[hidden],.pk-note[hidden]{display:none}
.pk-chip{flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.pk-chip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.pk-note{margin:0 16px 10px;padding:9px 11px;border-radius:9px;background:var(--line-soft);font-size:12.5px;color:var(--muted);font-weight:600}
.pk-list{flex:1;min-height:0;list-style:none;margin:0;padding:0 8px 14px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line-soft)}
.pk-list li{display:flex;align-items:center;gap:8px;padding:13px 10px;border-bottom:1px solid var(--line-soft);font-size:15px;font-weight:600;cursor:pointer}
.pk-list li span{flex:1;min-width:0}
.pk-list li em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);padding:3px 7px;border-radius:6px;background:var(--line-soft)}
.pk-list li:hover{background:var(--line-soft)}
.pk-list li.on{color:var(--ok);font-weight:800}
.pk-list li.on:after{content:'✓';font-weight:900}
.pk-list li.off{opacity:.4;cursor:default}
.pk-list .pk-empty{justify-content:center;color:var(--muted);cursor:default;border:0;padding:30px 0}

/* 마지막으로 본 경로 */
.route-last{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--muted);font-weight:600}
.route-last[hidden]{display:none}
.route-last span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-last button{flex:none;padding:6px 11px;border:0;border-radius:8px;background:var(--ink);color:var(--card);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}

/* ── 가는 길 결과 (#cvRes) ── */
#cvRes [hidden]{display:none!important}
.rcard{margin:12px 0 0;padding:14px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.rcard.none{text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6}
.ways h3{margin:0 0 9px;font-size:14.5px;font-weight:800}
.way-o{display:flex;align-items:center;gap:10px;width:100%;margin-top:7px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.way-o.on{border-color:var(--ink);background:var(--card)}
.way-o i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.way-o.on i{border:6px solid var(--ink)}
.way-o span{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.4}
.way-o small{flex:none;text-align:right;font-size:12px;color:var(--muted);font-weight:700;line-height:1.4}
.way-o small b{display:block;color:var(--jam)}
.rsum .t{display:flex;align-items:baseline;gap:8px}
.rsum .t b{flex:1;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.rsum .t span{flex:none;font-size:12.5px;color:var(--muted);font-weight:700}
.rsum .way{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.rbar{position:relative;height:14px;margin:11px 0 0;border-radius:5px;overflow:hidden;background:var(--ok)}
.rbar i{position:absolute;top:0;bottom:0}
.gapnote{margin:9px 0 0;font-size:12px;color:var(--muted);font-weight:600}
.hot h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:15px;font-weight:800}
.hot h3 i{width:9px;height:9px;border-radius:50%;background:var(--jam)}
.hot.clear{background:var(--ok-bg);border-color:transparent}
.hot.clear p{margin:0;font-weight:800;color:var(--ok);font-size:15px}
.hot.clear small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);font-weight:600}
.hot.wait{color:var(--muted);font-size:13.5px;font-weight:600}
.spot{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line-soft)}
.spot:first-of-type{border-top:0}
.spot .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--jam-bg);color:var(--jam);font-size:12.5px;font-weight:900;display:flex;align-items:center;justify-content:center}
.spot .x{flex:1;min-width:0}
.spot .x b{display:block;font-size:14.5px;font-weight:800}
.spot .x small{display:block;margin-top:2px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot button{flex:none;padding:8px 11px;border:0;border-radius:8px;background:var(--head);color:var(--head-ink);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.rmore{width:100%;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.rfind{margin:16px 0 0}
.rfind input{width:100%;padding:10px 12px;font:inherit;font-size:14.5px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.rfind input:focus{outline:none;border-color:var(--ok)}
.rfind .fch{display:flex;gap:6px;margin-top:8px;overflow-x:auto}
.rfind .fch button{flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.rfind .fch button.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
#cvRlist{margin-top:12px}
.rall{display:block;margin:2px 0 0 auto;padding:4px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* 고속도로마다 카드, 안은 「분기점 ~ 분기점」 구간 한 줄씩 */
.lg{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.lg-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.lg-h span{flex:none;padding:3px 9px;border-radius:7px;background:var(--ink);color:var(--card);font-size:12.5px;font-weight:800}
.lg-h b{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-h b.solo{color:var(--ink)}
.lg-h small{flex:none;font-size:12px;color:var(--muted);font-weight:700}
.blk{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:10px 14px;border:0;border-bottom:1px solid var(--line-soft);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.lg > :last-child{border-bottom:0}
.blk b{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.35}
.blk small{flex:none;font-size:12.5px;color:var(--muted);font-weight:700}
.blk:after{content:'';flex:none;width:7px;height:7px;margin-left:2px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.blk.open:after{transform:rotate(-135deg) translateY(-2px)}
.blk.open{background:var(--line-soft)}
.blk em,.rrow em{flex:none;font-style:normal;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px}
.blk em.j,.rrow em.j{background:var(--jam-bg);color:var(--jam)}
.blk em.w,.rrow em.w{background:var(--slow-bg);color:var(--slow)}
.blk-body{padding:0 14px 4px;border-bottom:1px solid var(--line-soft);background:var(--line-soft)}
.lg > .rrow{margin:0 14px}
.xfer{margin:10px 0 0;text-align:center;font-size:12.5px;font-weight:700;color:var(--ok)}
.xfer b{font-weight:800}
.xfer.nocam{padding:9px 12px;border-radius:10px;background:var(--line-soft);color:var(--muted)}
.xfer.nocam small{display:block;margin-top:2px;font-size:11.5px;font-weight:600}
/* 카메라 한 줄 — 왼쪽 세로선에 점 */
.rrow{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding-left:22px;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow:before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--line)}
.rrow:after{content:'';position:absolute;left:1px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--card);border:2.5px solid var(--muted);box-sizing:border-box}
.rrow.j:after{border-color:var(--jam);background:var(--jam)}
.rrow.w:after{border-color:var(--slow)}
.rrow b{flex:1;min-width:0;font-size:14px;font-weight:700}
.rrow button{flex:none;padding:6px 2px 6px 8px;border:0;background:none;color:var(--ink);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.rrow button:after{content:' ›';color:var(--muted)}
/* 결과 안에서 여는 영상 */
#cvRes .cam-live{margin:4px 0 10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}

/* 요약 + 경로 막대 */
.sum{margin:12px 0 0;padding:14px 15px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow)}
.sum .top{display:flex;align-items:baseline;gap:9px;margin-bottom:2px;flex-wrap:wrap}
.sum .top b{flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.sum .top span{flex:none;margin-left:auto;font-size:12.5px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* 누르는 기능이 없습니다 — 폰에서 한 칸이 2px이라 조준이 안 됩니다 */
.bar{position:relative;height:22px;margin:11px 0 5px;border-radius:6px;overflow:hidden;
  background:var(--line-soft)}
.bar i{position:absolute;top:0;bottom:0;display:block}
.barends{display:flex;font-size:11.5px;color:var(--muted);font-weight:700}
.barends span:last-child{margin-left:auto}
.barcap{margin:8px 0 12px;font-size:11.5px;color:var(--muted);text-align:center}

/* 거르기 */
.fchips{display:flex;gap:7px}
.fchip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;line-height:1.25;
  cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.fchip b{font-size:12px;font-weight:800;opacity:.7;font-variant-numeric:tabular-nums}

/* 덩어리 머리 — 어디부터 어디까지인지 글자로 알려줍니다 */
.ghead{display:flex;align-items:center;gap:9px;margin:20px 0 9px}
.ghead .tag{flex:none;padding:5px 10px;border-radius:8px;font-size:12px;font-weight:800}
.ghead b{flex:1;min-width:0;font-size:14.5px;font-weight:800;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ghead>span:last-child{flex:none;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums}
#cvList .ghead:first-child{margin-top:14px}

/* 구간 줄 */
.camlist,.grp{display:flex;flex-direction:column;gap:7px}
.cams-empty{margin:0;padding:26px 0;text-align:center;color:var(--muted);font-size:13.5px}
.camrow{border:1px solid var(--line);border-radius:11px;background:var(--card);overflow:hidden}
.camrow.on{border-color:var(--ink)}
.camrow .camhit{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;border:0;
  background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.camrow .camhit:hover{background:var(--line-soft)}
.camrow b{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camrow .go{flex:none;font-size:12.5px;font-weight:700;color:var(--ok)}
.spd{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.spd i{width:6px;height:6px;border-radius:50%;background:currentColor}
.s-ok{background:var(--ok-bg);color:var(--ok)}
.s-slow{background:var(--slow-bg);color:var(--slow)}
.s-jam{background:var(--jam-bg);color:var(--jam)}

/* 펼쳐진 영상 */
.cam-live{margin:0;border-top:1px solid var(--line)}
.cam-live .cl-screen{position:relative;aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(160deg,#2C3540,#171C22)}
.cam-live video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.cam-live .cl-tap{color:#C9D0D8;font-size:13.5px;font-weight:700;text-align:center;padding:0 16px}
.cam-live figcaption{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-top:1px solid var(--line)}
.cam-live figcaption b{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink)}
.cam-live .cl-live{flex:none;font-size:11.5px;font-weight:800;color:var(--ok)}

.more{display:block;width:100%;margin:12px 0 0;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:700;
  font-size:13.5px;cursor:pointer}
.more:hover{border-color:var(--ink)}
/* display 를 지정한 요소는 hidden 속성이 안 먹으므로 못 박아둡니다 */
[hidden]{display:none !important}
.empty{margin:14px 0 0;padding:22px;text-align:center;border:1px dashed var(--line);
  border-radius:11px;color:var(--ok);font-size:14px;font-weight:700;background:var(--ok-bg)}

/* 카테고리 — 글 개수 없이 칩으로 */
.cats{display:flex;flex-wrap:wrap;gap:7px}
.cats a{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.cats a:hover{border-color:var(--ink)}
.sec-h .sp{flex:1}

/* 전국 목록에서 노선을 알려주는 딱지 */
.camrow .rt{flex:none;font-size:11px;font-weight:800;color:#1B4E9B;background:var(--line-soft);
  padding:3px 7px;border-radius:6px;white-space:nowrap}

/* ── 명절 배너 (inc/season.php) ── */
.chu{display:flex;align-items:center;gap:13px;padding:15px 16px;margin:20px 0;
  border-radius:var(--radius);text-decoration:none;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#7A2418,#96271A);color:#fff}
.chu:hover{filter:brightness(1.08)}
.chu .d{flex:none;text-align:center;line-height:1.1;min-width:52px}
.chu .d b{display:block;font-size:25px;font-weight:800;font-variant-numeric:tabular-nums}
.chu .d>span{font-size:11px;opacity:.85}
.chu .t{flex:1;min-width:0}
.chu .t b{display:block;font-size:15.5px;font-weight:800;margin-bottom:3px;letter-spacing:-.02em}
.chu .t>span{display:block;font-size:13px;opacity:.9;line-height:1.5}
.chu .go{flex:none;font-size:22px;opacity:.7;color:#fff}
@media (max-width:400px){
  .chu{gap:11px;padding:14px}
  .chu .d b{font-size:22px}
  .chu .t b{font-size:14.5px}
  .chu .t>span{font-size:12.5px}
}

/* ── 최근 본 구간 (브라우저에만 저장) ── */
.recent{display:flex;gap:7px;align-items:center;overflow-x:auto;padding:12px 16px 2px;
  margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.recent::-webkit-scrollbar{display:none}
.recent .cap{flex:none;font-size:12px;color:var(--muted);font-weight:700;padding-left:2px}
.recent .rc{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;max-width:180px}
.recent .rc:hover{border-color:var(--ink)}
.recent .rc .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line)}
.recent .rc .nm{overflow:hidden;text-overflow:ellipsis}

/* 글 본문 안에 들어가는 구간 줄 */
.camrow.inpost{margin:20px 0}

/* 사고·공사 내용 한 줄 */
.camrow .evmsg{margin:0;padding:0 12px 11px 12px;font-size:12.5px;line-height:1.55;
  color:var(--muted);border-top:1px dashed var(--line-soft);padding-top:9px}

/* ============================================================
   자리 미리 잡기 — 목록이 채워질 때 화면이 안 밀리게
   ------------------------------------------------------------
   #cvList 는 처음에 "불러오는 중" 한 줄뿐이다가 JS 가 구간을 채웁니다.
   그때 높이가 갑자기 늘어나 아래 내용이 통째로 밀립니다 (CLS).
   채워질 만큼 자리를 미리 비워두면 밀림이 사라집니다.
   ============================================================ */
#cvList{ min-height:610px }
.cams-empty{ padding:40px 0 }

/* 넓은 화면은 한 줄에 두 칸씩 들어가 절반이면 충분합니다 */
@media (min-width:700px){
  #cvList{ min-height:330px }
}

/* 요약 줄도 나타날 때 밀지 않게 자리를 잡아둡니다 */
.sum{ min-height:58px }
#cvSum[hidden]{ display:block!important; visibility:hidden }