/* BuStop — 화랑로 정류장 안전개선
   구성: 상단 드롭다운 nav bar + 페이지별 본문 */

:root{
  --bg:#F6F7F9; --panel:#FFFFFF; --ink:#16181D; --sub:#5A6270; --line:#E1E4EA;
  --dark:#141C2B; --dark-ink:#E8ECF3; --dark-sub:#96A2B6; --dark-line:#25314A;
  --c1:#3A63C4; --c2:#C4442A; --c3:#9A5FC0; --c4:#2E8B57; --warn:#B4741B;
  --nav-h:58px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.06);
  --shadow-lg:0 10px 34px rgba(16,24,40,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
a{color:var(--c1); text-decoration:none}
h1,h2,h3,h4{line-height:1.32; margin:0}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
[hidden]{display:none !important}

/* ───────────── 상단 바 ───────────── */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 18px;
}
.tb-brand{display:flex; align-items:center; gap:9px; flex:none; color:var(--ink)}
.tb-brand .logo{
  width:30px; height:30px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,#3A63C4,#2E8B57);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px;
}
.tb-name{font-size:16px; font-weight:750; letter-spacing:-.3px; line-height:1.1}
.tb-name small{display:block; font-size:10.5px; font-weight:500; color:var(--sub); letter-spacing:0}

.mainnav{display:flex; align-items:center; gap:1px; margin-left:8px; flex:1 1 auto; min-width:0}
.navitem{position:relative}
.navtop{
  display:flex; align-items:center; gap:5px; white-space:nowrap;
  padding:8px 12px; border-radius:9px; color:var(--sub); font-size:14px; font-weight:650;
}
.navtop:hover{background:#EEF1F6; color:var(--ink)}
.navitem.on .navtop{background:#E8EEFB; color:var(--c1)}
.caret{opacity:.55; transition:transform .16s}
.navitem:hover .caret, .navitem:focus-within .caret{transform:rotate(180deg)}

.navdrop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:196px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(-5px); transition:.15s;
}
.navitem:hover .navdrop, .navitem:focus-within .navdrop, .navitem.open .navdrop{
  opacity:1; visibility:visible; transform:none;
}
.navdrop a{
  display:block; padding:8px 12px; border-radius:8px; font-size:13.5px;
  color:var(--ink); font-weight:500; white-space:nowrap;
}
.navdrop a:hover{background:#EEF1F6}

.nav-acct{flex:none; display:flex; align-items:center; gap:9px; margin-left:auto}
.nav-who{font-size:12.5px; color:var(--sub); white-space:nowrap; max-width:14ch; overflow:hidden; text-overflow:ellipsis}
.nav-btn{
  all:unset; cursor:pointer; box-sizing:border-box; display:inline-block; white-space:nowrap;
  background:var(--c1); color:#fff; font-size:13px; font-weight:700; padding:7px 16px; border-radius:8px;
}
.nav-btn:hover{background:#2F55B0; color:#fff}
.nav-btn.ghost{background:transparent; border:1px solid var(--line); color:var(--sub); padding:6px 13px}
.nav-btn.ghost:hover{background:#EEF1F6; color:var(--ink)}
.topbar form{margin:0; display:flex}
.burger{display:none}

/* ───────────── 본문 ───────────── */
/* ── 셸: 왼쪽 대시보드 + 본문 ── */
.shell{display:grid; grid-template-columns:250px minmax(0,1fr); gap:0;
       max-width:1400px; margin:0 auto; align-items:start}
.wrap{max-width:1080px; margin:0; padding:30px 28px 90px; min-width:0}

.dash{position:sticky; top:var(--nav-h); align-self:start;
      max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
      border-right:1px solid var(--line); background:#FBFCFD}
.dash-in{padding:22px 16px 40px}
.dash-h{font-size:10.5px; font-weight:800; letter-spacing:.11em; color:var(--c1);
        text-transform:uppercase; margin:20px 0 8px}
.dash-h:first-child{margin-top:0}

.dash-kpi{display:flex; flex-direction:column; gap:6px}
.dk{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 10px}
.dk.on{border-color:#BBD0F2; background:#F4F8FF}
.dk-l{display:block; font-size:11px; color:var(--sub); line-height:1.3}
.dk-v{display:block; font-size:19px; font-weight:750; letter-spacing:-.4px; margin-top:2px}
.dk-v i{font-style:normal; font-size:10.5px; font-weight:500; color:var(--sub); margin-left:4px}
.dk.on .dk-v{color:#0F6E62}

.dash-t{width:100%; font-size:11.5px; margin:0}
.dash-t td{padding:5px 2px; border-bottom:1px solid var(--line); text-align:left; color:var(--sub)}
.dash-t td:last-child{text-align:right; color:var(--ink); font-weight:700; white-space:nowrap}
.dash-t tr:last-child td{border-bottom:0}

.dash-kw{display:flex; flex-wrap:wrap; gap:5px}
.kw{font-size:10.5px; padding:3px 8px; border-radius:999px;
    background:#EEF1F6; border:1px solid var(--line); color:#41495A}
.kw-bad{background:#FBE9E5; border-color:#F0CFC7; color:#9B3320}
.kw-ok{background:#E4F3EA; border-color:#C6E5D2; color:#1F6B42}

.dash-dl{margin:0; font-size:11.5px}
.dash-dl dt{font-weight:750; color:var(--ink); margin-top:9px}
.dash-dl dd{margin:2px 0 0; color:var(--sub); line-height:1.5}

.dash-lnk{display:flex; flex-direction:column; gap:3px}
.dash-lnk a{font-size:12px; color:var(--sub); padding:3px 6px; border-radius:6px}
.dash-lnk a:hover{background:#EEF1F6; color:var(--c1)}
body[data-page="status"] .dash-lnk a:nth-child(1),
body[data-page="wolgok43"] .dash-lnk a:nth-child(2),
body[data-page="dongduk"] .dash-lnk a:nth-child(3),
body[data-page="island"] .dash-lnk a:nth-child(4),
body[data-page="analysis"] .dash-lnk a:nth-child(5){background:#E8EEFB; color:var(--c1); font-weight:700}

.dash-note{margin-top:16px; font-size:11px; color:var(--sub); line-height:1.5;
           background:#FFF8E8; border:1px solid #EEDFBC; border-radius:8px; padding:8px 10px}

@media (max-width:1180px){
  .shell{grid-template-columns:1fr}
  .dash{position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line)}
  .dash-in{padding:18px 24px 24px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 26px; align-items:start}
  .dash-kpi{flex-direction:row; flex-wrap:wrap}
  .dk{flex:1 1 130px}
  .dash-lnk{flex-direction:row; flex-wrap:wrap}
}

.phero{
  background:var(--dark); color:var(--dark-ink); border-radius:16px;
  padding:30px 32px; margin-bottom:26px;
}
.phero .eyebrow{font-size:11.5px; font-weight:750; letter-spacing:.13em; color:#8FB0EE; text-transform:uppercase}
.phero h1{font-size:clamp(26px,4.4vw,36px); letter-spacing:-.9px; margin:10px 0 0; color:#fff}
.phero p{margin:12px 0 0; color:#BCC8DC; font-size:16px; max-width:62ch}
.phero .facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.phero .fact{
  background:#1E2A40; border:1px solid var(--dark-line); border-radius:999px;
  padding:4px 13px; font-size:12.5px; color:var(--dark-sub);
}
.phero .fact b{color:#fff; font-weight:700}

section{padding:30px 0 6px; border-top:1px solid var(--line); margin-top:24px}
section:first-of-type{border-top:0; margin-top:0; padding-top:4px}
.sec-n{font-size:11.5px; font-weight:750; letter-spacing:.09em; color:var(--c1)}
h2{font-size:25px; letter-spacing:-.5px; margin:4px 0 10px}
h3{font-size:17px; margin:24px 0 8px}
h4{font-size:14.5px; margin:18px 0 6px; color:#33405A}
p{margin:10px 0; color:#2A2F39}
.lead{font-size:16.5px; color:#39404D}
.muted{color:var(--sub); font-size:12.8px}
ul.k, ol.k{margin:10px 0; padding-left:20px}
ul.k li, ol.k li{margin:6px 0}

.grid{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:17px 19px; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card .src{font-size:11.5px; color:var(--sub); margin-top:11px; padding-top:9px; border-top:1px dashed var(--line)}

.stat{display:flex; align-items:baseline; gap:7px}
.stat b{font-size:27px; letter-spacing:-.6px}
.stat span{font-size:12.5px; color:var(--sub)}
.kpi4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi4 .card{padding:14px 16px}

table{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px}
th,td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top}
th:first-child,td:first-child{text-align:left}
thead th{background:#F1F3F7; font-size:12px; color:var(--sub); font-weight:700; border-bottom:1px solid #D6DBE4}
tbody tr:last-child td{border-bottom:0}
tbody tr.hl{background:#FFF6F3}
tbody tr.pick-on{background:#EEF3FD}
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.tw table{margin:0}
.tl td, .tl th{text-align:left}

.note{border-left:3px solid var(--c1); background:#F3F6FD; padding:12px 16px; border-radius:0 10px 10px 0; margin:15px 0; font-size:14px}
.note.warn{border-color:var(--warn); background:#FFF8E8}
.note.bad{border-color:var(--c2); background:#FDF0EC}
.note.ok{border-color:var(--c4); background:#EFF8F2}

.badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px}
.b-ok{background:#E4F3EA; color:#1F6B42} .b-bad{background:#FBE9E5; color:#9B3320}
.b-w{background:#FCF1DC; color:#8A5A12} .b-i{background:#E8EEFB; color:#28479A}
.tag{background:#EEF1F6; border:1px solid var(--line); border-radius:999px; padding:3px 11px; font-size:12px; color:var(--sub)}

/* 사진 */
.ph{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--panel)}
.ph img{display:block; width:100%; max-height:min(300px,40vh); object-fit:cover; object-position:center 42%; background:#000}
.ph figcaption{padding:10px 14px; font-size:12.8px; color:var(--sub); line-height:1.55}
.ph figcaption b{color:var(--ink); display:block; margin-bottom:2px; font-size:13.5px}
.ph figcaption b.i{display:inline; margin:0; font-size:inherit; color:var(--ink); font-weight:700}
.ph.tall img{max-height:min(360px,46vh)}
.ph.full img{max-height:min(400px,52vh); object-fit:contain; background:transparent}

/* 동영상 */
.player{background:#0C1018; border-radius:13px; overflow:hidden; border:1px solid var(--line)}
.player video{display:block; width:auto; max-width:100%; max-height:66vh; margin:0 auto; background:#000}
.player video:not([src]){width:100%; aspect-ratio:16/6; max-height:170px}
.player .cap{padding:11px 15px; color:#C8D1E0; font-size:12.8px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:13px}
.vthumb{all:unset; cursor:pointer; position:relative; border-radius:11px; overflow:hidden; border:2px solid transparent; background:#0C1018; display:block}
.vthumb img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 38%; opacity:.9; transition:.15s}
.vthumb:hover img{opacity:1}
.vthumb[aria-pressed="true"]{border-color:var(--c1)}
.vthumb .play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.vthumb .t{position:absolute; left:0; right:0; bottom:0; padding:16px 9px 7px; color:#fff; font-size:11.5px;
  background:linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events:none; text-align:left; line-height:1.4}
.vdesc{margin-top:10px; display:grid; gap:8px}
.vdesc div{font-size:13.2px; color:var(--sub); padding-left:13px; border-left:2px solid var(--line)}
.vdesc b{color:var(--ink)}

/* 도면 */
.figbox{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:20px 18px 12px; box-shadow:var(--shadow); overflow-x:auto}
.figbox svg{display:block; max-width:100%; height:auto; margin:0 auto; color:var(--ink)}
.figbox figcaption{margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; color:var(--sub)}

/* 로그인 게이트 */
.gate{background:var(--panel); border:1px dashed #C7CEDB; border-radius:13px; padding:32px 26px; text-align:center}
.gate .ico{width:42px; height:42px; margin:0 auto 12px; border-radius:11px; background:#EEF1F6; display:grid; place-items:center}
.gate h3{margin:0 0 5px; font-size:16.5px}
.gate p{margin:0 auto; max-width:46ch; color:var(--sub); font-size:13.5px}
.gatebtn{display:inline-block; background:var(--c1); color:#fff; font-weight:700; font-size:13.5px; padding:8px 18px; border-radius:9px; margin-top:16px}
.gatebtn:hover{background:#2F55B0; color:#fff}
.gatebar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:16px 0;
  background:#FFF8E8; border:1px solid #EBD9A8; border-radius:12px; padding:13px 17px; font-size:13.5px; color:#6B531A}
.gatebar span{flex:1 1 300px}
.gatebar .gatebtn{margin-top:0}
.lockv{letter-spacing:.06em}

/* 대안 선택 */
.pick{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0}
.pick button{all:unset; cursor:pointer; padding:7px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel); font-size:13px; font-weight:600; color:var(--sub)}
.pick button:hover{border-color:#B9C6E0}
.pick button[aria-pressed="true"]{background:#E8EEFB; border-color:#9DB6E8; color:var(--c1); font-weight:750}

svg .ax{stroke:#C9CFDA; stroke-width:1}
svg .gl{stroke:#E7EAF0; stroke-width:1}
svg text{font-family:inherit}

.sitefoot{
  border-top:1px solid var(--line); background:var(--panel);
  padding:24px; font-size:12.5px; color:var(--sub);
  display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between;
}
.sitefoot b{color:var(--ink)}

@media (max-width:1000px){
  .burger{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px;
    border:1px solid var(--line); background:#fff; cursor:pointer; flex:none; font-size:15px; margin-left:auto}
  .mainnav{
    position:absolute; top:var(--nav-h); left:0; right:0; background:var(--panel);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px;
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto; display:none;
  }
  .mainnav.open{display:flex}
  .navtop{justify-content:space-between; padding:11px 12px; font-size:15px}
  .navdrop{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--line); border-radius:0; margin:0 0 6px 14px; padding:0 0 0 6px; display:none}
  .navitem.open .navdrop{display:block}
  .nav-acct{order:3}
  .g2,.g3,.g4,.kpi4{grid-template-columns:1fr}
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:22px 16px 70px}
  .phero{padding:24px 20px}
}
@media print{
  .topbar{display:none} .wrap{max-width:none; padding:0}
  .gate,.gatebar{display:none}
}

/* 로그인·회원가입 페이지의 브랜드 블록 */
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#3A63C4,#2E8B57);
  display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff}
.brand b{font-size:18px; letter-spacing:-.2px}
.brand small{display:block; font-size:11.5px; font-weight:500}

/* 내려받기 버튼 */
.dl{display:inline-block; background:var(--c1); color:#fff; font-size:13px; font-weight:700;
    padding:8px 16px; border-radius:8px}
.dl:hover{background:#2F55B0; color:#fff}