/* 이 파일은 src/map_style.css에서 자동 생성됩니다. 직접 수정하지 마세요. */
:root{
  /* 토지+자유연구소 브랜드 — 로고에서 추출한 남색·초록 */
  --brand:#1a4a8f; --brand-dk:#123566; --brand-lt:#2f6bbf;
  --accent:#009644;
  --surface-1:#fcfcfb; --plane:#f9f9f7;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --line:#c3c2b7; --ring:rgba(11,11,11,.10);
  --up:#c53534; --dn:#256abf;
  --panel:rgba(252,252,251,.94);
  --shadow:0 2px 14px rgba(0,0,0,.13);
  --side-w:310px; --top-h:94px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    /* 어두운 배경에서는 남색이 묻히므로 한 단계 밝힌다 */
    --brand:#2f6bbf; --brand-dk:#1a4a8f; --brand-lt:#5b93da;
    --accent:#1eb45c;
    --surface-1:#1a1a19; --plane:#0d0d0d;
    --ink:#fff; --ink2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --line:#383835; --ring:rgba(255,255,255,.12);
    --up:#e66767; --dn:#3987e5;
    --panel:rgba(26,26,25,.94);
    --shadow:0 2px 14px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--plane);color:var(--ink);overflow:hidden;
  font-family:"Noto Sans KR","Pretendard",system-ui,-apple-system,"Segoe UI",
    "Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

.app{display:flex;flex-direction:column;height:100vh;width:100vw}

/* ── 상단 바 ── */
.topbar{height:var(--top-h);flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 18px;
  background:var(--surface-1);z-index:50;
  border-bottom:3px solid var(--brand)}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
/* 투명 배경 PNG — 배경판 없이 그대로 올린다 */
.logo{height:54px;width:auto;flex:none;display:block}
.logolink{display:block;flex:none;line-height:0}
.brandtext{display:flex;align-items:center;min-width:0;
  padding-left:18px;border-left:1px solid var(--ring)}
.brandtext a{font-size:1.72rem;font-weight:900;letter-spacing:-.035em;
  white-space:nowrap;color:var(--brand);line-height:1.2;text-decoration:none}
.brandtext a:hover{color:var(--brand-lt)}
.topright{display:flex;align-items:center;gap:14px;flex:none}
.helpbtn{width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:transparent;border:2px solid var(--ring);color:var(--ink2);
  font:inherit;font-size:1.14rem;font-weight:700}
.helpbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* 지도 ↔ 통계표 — 이 앱에서 가장 중요한 전환이라 크게 둔다 */
.pagetabs{display:flex;gap:0;flex:none;border-radius:11px;overflow:hidden;
  border:2px solid var(--brand)}
.pagetabs button{border:0;cursor:pointer;font:inherit;font-size:1.16rem;
  font-weight:700;padding:15px 30px;background:transparent;color:var(--brand);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  letter-spacing:-.02em;transition:background .12s,color .12s}
.pagetabs button i{font-style:normal;font-size:1.2rem;line-height:1}
.pagetabs button:hover{background:rgba(26,74,143,.10)}
.pagetabs button.on{background:var(--brand);color:#fff}
.pagetabs button.on:hover{background:var(--brand-dk)}

.body{flex:1;display:flex;min-height:0}

/* ── 사이드바 ── */
/* scrollbar-gutter:stable — 내용이 짧아져 스크롤바가 사라져도 자리를 비워둔다.
   (통계표 보기로 옮기면 지도 전용 컨트롤이 감춰져 폭이 튀는 것을 막는다) */
/* z-index — 사이드바가 DOM상 통계표보다 앞이라 그냥 두면 툴팁이 표 밑으로 깔린다 */
.side{width:var(--side-w);flex:none;overflow-y:auto;scrollbar-gutter:stable;
  background:var(--surface-1);border-right:1px solid var(--ring);
  padding:15px 15px 18px;display:flex;flex-direction:column;
  position:relative;z-index:30}
.mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--plane)}

.up{color:var(--up);font-weight:600}
.dn{color:var(--dn);font-weight:600}
.nc{color:var(--muted);font-weight:600}

/* ── 컨트롤 (글자 키움) ──
   슬라이더가 연달아 오면 눈금 글자와 다음 라벨이 붙어 한 덩어리로 읽힌다.
   여백만으로는 부족해 옅은 구분선을 함께 둔다. */
.ctl{margin-bottom:20px;padding-bottom:18px;
  border-bottom:1px solid var(--grid)}
/* 마지막으로 '보이는' 컨트롤에는 구분선을 두지 않는다. 통계표 모드에서는
   .maponly가 감춰지는데 :last-of-type은 display:none을 무시하므로,
   뒤가 없거나 뒤가 전부 감춰진 경우를 형제 선택자로 잡는다. */
.ctl:last-child{border-bottom:0;padding-bottom:0}
body.statsmode .ctl:has(+ .ctl.maponly){border-bottom:0;padding-bottom:0}
.ctl label{display:block;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:7px;font-weight:700}
.ctl label .val{float:right;color:var(--brand);font-weight:700;
  font-variant-numeric:tabular-nums;font-size:1rem;max-width:62%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:flex;flex-wrap:wrap;gap:3px;background:var(--grid);
  border-radius:8px;padding:3px}
/* 세로로 쌓이는 세그먼트는 이름이 길 수 있으므로 어절 단위로 접는다 */
.seg.col{flex-direction:column}
.seg.col button{white-space:normal;word-break:keep-all;line-height:1.35}
.seg button{border:0;background:transparent;color:var(--ink2);cursor:pointer;
  font:inherit;font-size:1rem;padding:9px 13px;border-radius:6px;
  white-space:nowrap;text-align:left;flex:1}
.seg button:hover{background:var(--surface-1)}
.seg button.on{background:var(--brand);color:#fff;font-weight:600}
.seg.big{flex-direction:row}
.seg.big button{text-align:center;padding:10px 5px;font-size:.98rem;font-weight:600}
/* 가로로 나란한 2~3개짜리(경계선·지역명)는 가운데 정렬이 자연스럽다.
   세로로 쌓이는 .seg.col(시나리오·지표)만 왼쪽 정렬을 유지한다. */
.seg:not(.col) button{text-align:center}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;
  height:5px;border-radius:3px;background:var(--grid);outline:none;cursor:pointer;
  margin:8px 0 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:23px;height:23px;border-radius:50%;background:var(--brand);
  border:3px solid var(--surface-1);box-shadow:0 1px 4px rgba(0,0,0,.32);
  cursor:pointer}
input[type=range]::-moz-range-thumb{width:21px;height:21px;border-radius:50%;
  background:var(--brand);border:3px solid var(--surface-1);cursor:pointer}

/* 슬라이더 아래 눈금 이름 — 눌러서도 이동할 수 있게 버튼으로 둔다.
   양끝은 손잡이가 안쪽에 머무르므로 글자도 바깥으로 밀지 않고 정렬만 맞춘다. */
/* 눈금 글자는 슬라이더에 딸린 것이므로 위는 좁게, 아래는 다음 컨트롤과
   구분되도록 넉넉히 둔다 */
/* space-between으로 늘어놓으면 가운데 눈금이 '자기 글자 폭'만큼 왼쪽으로
   치우친다. 눈금마다 같은 폭을 주고 그 안에서 정렬해야 손잡이 위치와 맞는다.
   양끝은 손잡이가 트랙 안쪽에 머무르므로 바깥으로 밀지 않고 좌·우 정렬한다. */
.ticks{display:flex;margin:4px 0 2px}
.ticks button{flex:1;border:0;background:transparent;cursor:pointer;padding:1px 0;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);
  letter-spacing:-.01em;white-space:nowrap;text-align:center}
.ticks button:first-child{text-align:left}
.ticks button:last-child{text-align:right}
.ticks button:hover{color:var(--ink2)}
.ticks button.on{color:var(--ink)}
/* 컨트롤 아래 보조 설명 — 지금 설정이 무엇을 뜻하는지 한 줄로 */
.ctlnote{margin:5px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted)}

/* 라벨 옆 '?' — 호버(또는 키보드 포커스)하면 설명이 뜬다 */
.qmark{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:.72rem;font-weight:700;cursor:help;margin-left:5px;
  vertical-align:middle;position:relative;text-transform:none;letter-spacing:0}
/* 사이드바가 overflow-y:auto라 absolute로 두면 잘린다.
   position:fixed로 빼내 지도·통계표 위로 떠오르게 하고, 위치는 JS가 잡는다. */
.qtip{position:fixed;left:0;top:0;width:300px;z-index:80;
  background:var(--surface-1);color:var(--ink2);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.22);
  padding:13px 15px;font-size:.96rem;font-weight:400;line-height:1.65;
  letter-spacing:0;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transition:opacity .13s;pointer-events:none}
.qtip b{color:var(--ink);font-weight:700}
.qmark:hover .qtip,.qmark:focus .qtip{opacity:1;visibility:visible}

/* 통계표 보기 — 지도 전용 컨트롤은 감추고 사이드바는 살려둔다 */
body.statsmode .maponly{display:none!important}
.statshint{margin:0 0 20px;font-size:.95rem;color:var(--muted);line-height:1.5}
.statshint b{color:var(--ink2);font-weight:600}

/* ── 범례 — 지도 위 우하단 플로팅 ──
   출처 표기(우하단 최하단)와 겹치지 않게 bottom을 띄운다.
   좁은 화면에서는 지도를 많이 가리므로 머리글을 눌러 접을 수 있다. */
.legendwrap{position:absolute;right:12px;bottom:24px;z-index:20;
  background:var(--panel);border:1px solid var(--ring);border-radius:10px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);max-width:220px;overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100% - 100px)}
.legendtoggle{border:0;background:transparent;cursor:pointer;font:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 15px;color:var(--ink);font-weight:700;font-size:.92rem;flex:none}
.legendtoggle:hover{color:var(--brand)}
.lgcaret{font-size:.8rem;color:var(--muted);transition:transform .18s}
.legendwrap.collapsed .lgcaret{transform:rotate(-90deg)}
.legendwrap.collapsed .legend{display:none}
.legend{padding:0 15px 12px;font-size:.94rem;overflow-y:auto;min-height:0}
.lt{font-weight:700;margin-bottom:9px;font-size:.95rem;color:var(--ink);
  line-height:1.35}
.li{display:flex;align-items:center;gap:8px;color:var(--ink2);line-height:1.75}
.li i{width:16px;height:12px;border-radius:2px;display:inline-block;
  border:1px solid var(--ring);flex:none}
.li i.dot{width:12px;height:12px;border-radius:50%;border:0}
.lyr{font-weight:500;color:var(--muted);font-size:.82rem}
/* 증가/감소 구간 묶음 머리글 */
.lsub{font-size:.82rem;font-weight:660;letter-spacing:.02em;margin:8px 0 2px}
.lsub:first-of-type{margin-top:0}
.lsub.up{color:var(--up)} .lsub.dn{color:var(--dn)}


/* ── 지도 위 오버레이 ── */
.stats{position:absolute;top:12px;left:12px;right:12px;z-index:15;
  display:flex;gap:8px;pointer-events:none;overflow-x:auto;scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.tile{background:var(--panel);border:1px solid var(--ring);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);border-radius:10px;padding:8px 13px;flex:1;
  min-width:134px;pointer-events:auto}
.tl{font-size:.82rem;color:var(--muted);letter-spacing:.02em;
  font-weight:600;white-space:nowrap}
.tv{font-size:1.34rem;font-weight:680;margin:1px 0;letter-spacing:-.02em;
  white-space:nowrap}
.ts{font-size:1rem;color:var(--ink2);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* 확대 안내 — 첫 진입에 잠깐 떴다가 사라진다 */
/* 내용(한 줄)에 맞춰 폭이 정해진다 — 좁은 화면에서만 넘치지 않게 제한한다 */
.zoomhint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:21;max-width:calc(100% - 24px);overflow:hidden;
  background:var(--panel);border:1px solid var(--ring);border-radius:9px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);padding:10px 16px;
  display:flex;flex-direction:column;gap:2px;
  transition:opacity .45s;pointer-events:none}
.zoomhint b{font-size:.95rem;color:var(--brand);white-space:nowrap}
/* 한 줄로만 — 좁아서 넘치면 박스를 넓히지 말고 글자를 줄인다 */
.zoomhint span{font-size:.89rem;color:var(--ink2);white-space:nowrap}
.zoomhint.hide{opacity:0}

.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:30;background:var(--panel);border:1px solid var(--ring);
  box-shadow:var(--shadow);border-radius:10px;padding:14px 22px;
  color:var(--ink2);font-size:.88rem}

/* ── 통계표 페이지 ── */
.statswrap{flex:1;overflow-y:auto;min-width:0;background:var(--plane);
  position:relative}
.statsinner{max-width:1180px;margin:0 auto;padding:20px 24px 60px}
.stats-static{position:static;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin-bottom:24px;overflow:visible}
.stats-static .tile{background:var(--surface-1);backdrop-filter:none;
  padding:16px 15px;min-width:0;text-align:center}
.stats-static .tl{font-size:1rem;margin-bottom:4px}
.stats-static .tv{font-size:2rem;margin:2px 0 3px}
.stats-static .ts{font-size:1.06rem}
.statswrap section{margin-bottom:26px}
.statswrap h2{font-size:1.28rem;margin:0 0 9px;letter-spacing:-.01em}
.h2sub{font-size:.9rem;color:var(--muted);font-weight:400;margin-left:6px}
.assume{border-top:1px solid var(--grid);padding-top:18px;
  font-size:.94rem;color:var(--ink2);line-height:1.65}
.assume p{margin:0 0 9px}
.assume b{color:var(--ink)}
.src{color:var(--muted);font-size:.86rem}

/* ── 첫 방문 안내 팝업 ── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}
/* 설명서 성격이라 넉넉하게 — 스크롤되어도 글자를 키운다 */
/* 스크롤바가 생기면 둥근 모서리 안쪽에 그려져 우측이 각져 보인다.
   스크롤 영역을 안쪽 여백 안으로 들여 모서리를 가리지 않게 한다. */
.modalbox{position:relative;background:var(--surface-1);color:var(--ink);
  border:1px solid var(--ring);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.3);
  width:min(760px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  padding:34px 40px 28px;font-size:1.04rem;line-height:1.72;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.modalbox::-webkit-scrollbar{width:8px}
.modalbox::-webkit-scrollbar-track{background:transparent;
  margin:16px 0}                       /* 위아래 모서리 곡선을 비워둔다 */
.modalbox::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;
  border:2px solid transparent;background-clip:content-box}
/* 제목이 길어 좁은 화면에서 두 줄이 된다 — 어절 단위로 접는다 */
.modalbox h2{margin:0 0 13px;font-size:1.78rem;font-weight:900;
  letter-spacing:-.035em;line-height:1.3;color:var(--brand);
  word-break:keep-all;padding-right:34px}
.modalbox h3{margin:30px 0 12px;font-size:1.24rem;font-weight:800;
  letter-spacing:-.02em;padding-top:18px;border-top:1px solid var(--grid)}
.modalbox p{margin:0 0 13px;color:var(--ink2)}
.modalbox p b{color:var(--ink)}
.modalbox em{font-style:normal;font-weight:700;color:var(--brand)}
.modalbox .lead{margin:0 0 6px;font-size:1.12rem;color:var(--ink2)}
.modalbox .lead b{color:var(--ink)}
/* 항목 설명 표 — 좌측 항목명, 우측 설명.
   글자를 접어 넣어 가로 스크롤이 생기지 않게 한다(table-layout:fixed). */
/* h3를 뺐으므로 표 스스로 본문과의 경계를 갖는다 */
.mtable{width:100%;border-collapse:collapse;margin:22px 0 15px;
  table-layout:fixed;border-top:1px solid var(--grid)}
.mtable th,.mtable td{vertical-align:top;padding:10px 0;font-size:1rem;
  border-bottom:1px solid var(--grid);white-space:normal;
  overflow-wrap:break-word;word-break:keep-all;text-align:left}
.mtable th{width:33%;font-weight:700;color:var(--ink);
  padding-right:16px;line-height:1.5}
.mtable td{color:var(--ink2)}
.mtable tr:last-child th,.mtable tr:last-child td{border-bottom:0}
@media (max-width:620px){
  /* 좁으면 2열이 다 눌리므로 위아래로 쌓는다 */
  .mtable,.mtable tbody,.mtable tr,.mtable th,.mtable td{display:block;width:auto}
  .mtable th{border-bottom:0;padding:10px 0 2px}
  .mtable td{padding:0 0 10px}
}
.modalclose{position:absolute;right:14px;top:14px;width:30px;height:30px;
  border:0;border-radius:8px;background:transparent;color:var(--muted);
  cursor:pointer;font-size:1rem;line-height:1}
.modalclose:hover{background:var(--grid);color:var(--ink)}


.modalbox .foot{font-size:.94rem;color:var(--muted);line-height:1.65;
  border-top:1px solid var(--grid);padding-top:16px;margin:26px 0 18px}
.modalbtns{display:flex;gap:9px}
.modalgo,.modalskip{flex:1;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-size:1.02rem;font-weight:600;padding:13px}
.modalgo{background:var(--brand);color:#fff}
.modalskip{background:var(--grid);color:var(--ink2);flex:0 0 auto;padding:13px 18px}
.modalskip:hover{color:var(--ink)}
.modalgo:hover{opacity:.88}

/* ── 지역 이름표 ── */
.labelbox{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.maplabel{position:absolute;top:0;left:0;white-space:nowrap;
  font-size:.8rem;font-weight:600;color:var(--ink2);
  text-shadow:0 0 3px var(--plane),0 0 3px var(--plane),0 0 5px var(--plane);
  will-change:transform}
.maplabel.gu{font-size:.98rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}

/* ── 커서 툴팁 ── */
.maptip{position:fixed;z-index:40;pointer-events:none;
  background:var(--panel);border:1px solid var(--ring);border-radius:8px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);padding:11px 15px;font-size:1.06rem;color:var(--ink);
  max-width:320px;line-height:1.5}
.maptip b{font-weight:700}
.maptip .t2{display:block;margin-top:5px;font-size:.99rem;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.maptip i{font-style:normal;font-weight:600}
.maptip i.up{color:var(--up)}
.maptip i.dn{color:var(--dn)}

/* ── 팝업 ── */
/* 지역 이름표(.labelbox, z-index:12)는 지도 위에 절대배치된 오버레이라
   그대로 두면 팝업을 덮는다. 팝업이 항상 위로 오게 올려둔다. */
.maplibregl-popup{z-index:35}
.pop h4{margin:0 0 9px;font-size:1.14rem}
.pop .pr{display:flex;justify-content:space-between;gap:16px;font-size:1rem;
  padding:2px 0;color:var(--ink2)}
.pop .pr b{color:var(--ink);font-variant-numeric:tabular-nums}
.pop hr{border:0;border-top:1px solid var(--grid);margin:7px 0}
.maplibregl-popup-content{background:var(--surface-1);color:var(--ink);
  border:1px solid var(--ring);border-radius:10px;padding:12px 14px;
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.maplibregl-popup-tip{border-top-color:var(--surface-1)!important;
  border-bottom-color:var(--surface-1)!important}
.maplibregl-popup-close-button{color:var(--muted);font-size:1.1rem;padding:2px 7px}
.maplibregl-ctrl-scale{background:transparent!important;color:var(--ink2)!important;
  border-color:var(--line)!important;font-size:.7rem}
.maplibregl-ctrl-top-left{top:auto;bottom:52px;left:12px}
.maplibregl-ctrl-bottom-left{bottom:0;left:0}
.maplibregl-ctrl-bottom-right{bottom:0;right:0}
/* VWorld 출처 표기 — 이용 조건상 유지하되, 우하단 모서리에 여백 없이 붙인다 */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0!important}
.maplibregl-ctrl-attrib{background:transparent!important;font-size:.62rem;
  padding:0 3px 0 4px!important;opacity:.6;line-height:1.5}
.maplibregl-ctrl-attrib:hover{opacity:1}
.maplibregl-ctrl-attrib a{color:var(--muted)!important;text-decoration:none}
.maplibregl-ctrl-attrib-button{display:none!important}

/* ── 표 ── */
.tscroll{overflow-x:auto;border:1px solid var(--ring);border-radius:9px;
  background:var(--surface-1)}
/* 통계표 — 넓어서 가로 스크롤되고, 첫 열·머리행은 고정한다.
   .tscroll 안에만 적용한다(설명 모달의 표까지 끌려가지 않도록). */
.tscroll table{border-collapse:collapse;width:100%;font-size:.96rem;
  font-variant-numeric:tabular-nums}
.tscroll th,.tscroll td{padding:10px 14px;text-align:right;
  border-bottom:1px solid var(--grid);white-space:nowrap}
.tscroll th:first-child,.tscroll td:first-child{text-align:left;
  position:sticky;left:0;background:var(--surface-1)}
/* 머리글은 데이터보다 길어 전체 폭을 좌우한다. 어절 단위로 접어 2줄까지
   허용하면(숫자 칸은 그대로 한 줄) 표 폭이 크게 줄어든다. */
.tscroll th{color:var(--muted);font-size:.86rem;letter-spacing:.01em;
  font-weight:600;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--surface-1);z-index:1;
  white-space:normal;word-break:keep-all;line-height:1.3}
.tscroll th:first-child{z-index:2}
.tscroll th.sortable{cursor:pointer;user-select:none}
.tscroll th.sortable:hover{color:var(--ink);background:var(--grid)}
.tscroll th.sortable.on{color:var(--ink)}
.tscroll tbody tr:last-child td{border-bottom:0}
/* 서울 전역 합계 행 · 현재 선택된 시나리오 행 강조 */
tr.total td,tr.cur td{background:var(--grid);font-weight:600}
tr.total td:first-child,tr.cur td:first-child{background:var(--grid)}
tr.total td{border-bottom:1px solid var(--line)}

/* ── 모바일 전용 컨트롤 ── */
/* 햄버거 버튼 — 좁은 화면에서만, 지도 좌상단에 떠 있다.
   상단 바는 제목·전환 버튼만으로도 꽉 차므로 지도 위로 뺀다. */
.menubtn{display:none;position:absolute;left:12px;top:12px;z-index:24;
  width:42px;height:42px;border-radius:9px;cursor:pointer;
  background:var(--panel);border:1px solid var(--ring);color:var(--ink);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);font:inherit;font-size:1.24rem;line-height:1}
.menubtn:hover,.menubtn[aria-expanded="true"]{background:var(--brand);
  border-color:var(--brand);color:#fff}
/* 서랍 가림막 — 모바일에서만 쓴다(데스크톱에선 클릭을 가로채면 안 된다) */
.scrim{display:none}
/* 로고 배지 — 상단 바에서 로고를 뺀 좁은 화면에서만 뜬다 */
/* 지도 위에 바로 얹히므로 배경이 복잡하면 글자가 묻힌다.
   판을 깔지 않고 흰 번짐(글자 윤곽만 감싸는 그림자)으로 띄운다. */
.logobadge{display:none;position:fixed;right:12px;bottom:30px;z-index:45;
  padding:0;line-height:0}
.logobadge img{height:34px;width:auto;display:block;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95))
         drop-shadow(0 0 6px rgba(255,255,255,.75))
         drop-shadow(0 1px 2px rgba(0,0,0,.14))}

/* 좁은 화면 — 상단 바가 2줄이 되지 않게 글자부터 줄인다 */
@media (max-width:1100px){
  .brandtext a{font-size:1.3rem}
  .pagetabs button{padding:13px 20px;font-size:1.06rem}
}
@media (max-width:940px){
  :root{--top-h:74px}
  .brandtext a{font-size:1.1rem;white-space:normal;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .pagetabs button{padding:11px 15px;font-size:1rem}
  .topright{gap:9px}
}

/* ── 모바일 ──
   상단 바에서 로고를 빼고(우하단 배지로 이동), 사이드바는 햄버거로 여닫는다. */
@media (max-width:760px){
  :root{--top-h:60px}
  .topbar{padding:0 10px;gap:8px}
  .brand>.logolink{display:none}
  .brandtext{padding-left:0;border-left:0}
  .brandtext a{font-size:.98rem;-webkit-line-clamp:2}
  .helpbtn{width:36px;height:36px;font-size:1rem;border-width:1px}
  .topright{gap:6px}
  .pagetabs{border-width:1px;border-radius:8px}
  .pagetabs button{padding:9px 11px;font-size:.9rem;letter-spacing:-.04em}
  .logobadge{display:flex}
  .menubtn{display:block}
  /* 통계표는 스크롤되므로 버튼이 따라다니게 고정한다 */
  .menubtn-stats{position:fixed;top:calc(var(--top-h) + 12px)}
  .statsinner{padding-top:64px}

  /* 사이드바를 왼쪽에서 밀어 넣는 서랍으로 바꾼다 */
  .side{position:fixed;left:0;top:var(--top-h);bottom:0;width:min(310px,86vw);
    z-index:70;border-right:1px solid var(--ring);
    transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:6px 0 24px rgba(0,0,0,.18)}
  body.navopen .side{transform:none}
  /* 서랍 밖을 눌러 닫기 위한 가림막 */
  .scrim{display:block;position:fixed;inset:var(--top-h) 0 0;z-index:65;
    background:rgba(0,0,0,.38);opacity:0;visibility:hidden;
    transition:opacity .22s}
  body.navopen .scrim{opacity:1;visibility:visible}
  .mapwrap{flex:1;min-height:0}

  .stats{top:auto;bottom:12px}
  /* 좁으면 한 줄로 다 못 담으므로 어절 단위로 접는다 */
  .zoomhint{bottom:auto;top:12px}
  .zoomhint span{white-space:normal;word-break:keep-all;line-height:1.45}
  .qtip{width:calc(100vw - 60px)}
  /* 우하단은 로고 배지 자리이므로 범례를 좌하단으로 옮기고 줄인다 */
  .legendwrap{right:auto;left:10px;bottom:22px;max-width:168px;
    max-height:52%;font-size:.86rem}
  .legendtoggle{padding:8px 12px;font-size:.88rem}
  .legend{padding:0 12px 10px;font-size:.86rem}
  .statsinner{padding:16px 14px 50px}
}