:root{
  --ink:#1E2A32; --sub:#5B6770; --paper:#FFFFFF; --wash:#EEF2F1; --line:#D3DAD8;
  --sidewalk:#1F8A5B; --shared:#C98A10; --roadway:#7C8790;
  --field:#1F8A5B; --agency:#2459B3; --unverified:#9A3B2E;
  --focus:#2459B3;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--paper)}
body{display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.top{padding:12px 14px 8px;border-bottom:1px solid var(--line);background:var(--paper);z-index:500}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{font-size:1.15rem;font-weight:800;margin:0;letter-spacing:-.01em}
.principle{margin:6px 0 8px;font-size:.84rem;line-height:1.5;color:var(--ink);
  padding:8px 10px;border-left:4px solid var(--ink);background:var(--wash)}
.principle{display:flex;align-items:flex-start;gap:10px}
.principle>span{flex:1}
.principle[hidden]{display:none}
.principle-x{flex:none;background:none;border:none;color:var(--sub);font:inherit;font-size:.78rem;cursor:pointer;padding:2px 4px;white-space:nowrap}
.title-btns{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
#filterBox[hidden]{display:none}
@media (max-width:520px){
  h1{font-size:1.02rem;white-space:nowrap}
  .title-btns{gap:4px}
  .title-btns .ghost{padding:4px 7px;font-size:.7rem;white-space:nowrap}
  h1{font-size:.95rem}
}
.ghost{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.8rem;color:var(--sub);cursor:pointer}
.about{font-size:.84rem;line-height:1.55;color:var(--sub);margin-bottom:8px}
.about p{margin:4px 0}
.vlegend{list-style:none;padding:0;margin:6px 0;display:grid;gap:4px}

/* 검색 */
.search{position:relative;margin:2px 0 6px}
.search input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:8px 36px 8px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;min-height:42px}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{position:absolute;right:4px;top:4px;width:34px;height:34px;border:none;background:none;font-size:1rem;color:var(--sub);cursor:pointer}
.q-clear[hidden],.q-results[hidden]{display:none}
.top:has(.q-results:not([hidden])){position:relative;z-index:1500}   /* 결과 목록이 지도 버튼 위로 */
.q-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1200;list-style:none;margin:0;padding:4px;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(30,42,50,.18);max-height:45vh;overflow-y:auto}
.q-results button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:none;background:none;font:inherit;color:var(--ink);padding:9px 8px;border-radius:6px;cursor:pointer;min-height:40px}
.q-results button:hover{background:var(--wash)}
.q-results .dot{flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
.q-results small{margin-left:auto;color:var(--sub);font-size:.75rem;flex:none}
.q-results .more{padding:8px;color:var(--sub);font-size:.82rem}
.filters{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--paper);
  border-radius:8px;padding:6px 10px;font-size:.85rem;cursor:pointer;color:var(--sub)}
.chip .dot{width:10px;height:10px;border-radius:3px;background:var(--c)}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:700}
.chip.all{background:var(--wash);font-weight:700;color:var(--ink)}
.toggles{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.85rem}
.switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--ink)}
.switch[hidden]{display:none}
.count{color:var(--sub);margin-left:auto}
/* 휴대폰: 위쪽 칸을 얇게 해서 지도를 넓게(2026-11 사용자 요청) */
@media (max-width:640px){
  .top{padding:6px 10px 4px}
  .principle{margin:4px 0 5px;padding:5px 8px;font-size:.74rem;line-height:1.4;border-left-width:3px}
  .principle-x{font-size:.7rem}
  .search{margin:0 0 4px}
  .search input{min-height:34px;padding:4px 34px 4px 10px;border-radius:7px}
  .q-clear{top:0;height:34px}
  .filters{gap:5px;padding:0 0 4px}
  .chip{padding:3px 8px;font-size:.78rem;border-radius:7px;gap:5px}
  .chip .dot{width:8px;height:8px}
  .toggles{font-size:.76rem;gap:2px 10px}
  .switch input{width:15px;height:15px}
}

#map{flex:1;min-height:0}

/* 마커: 분류 색 + 짧은 글자. 검증 상태는 테두리 모양으로 */
.pin{width:22px;height:22px;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);
  background:var(--c);border:1.5px solid #fff;box-shadow:0 1px 2px rgba(30,42,50,.4);display:grid;place-items:center}
.pin b{transform:rotate(45deg);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.pin b.s3{font-size:6.6px;letter-spacing:-.08em}   /* 한글 세 글자(휴지통) */
.pin.unverified{border-style:dashed;border-color:#fff;opacity:.8}
.pin.closed{background:#9AA3A8}

.road-legend{position:fixed;left:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:600;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px 10px;display:flex;gap:12px;font-size:.78rem}
.road-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
@media (max-width:420px){ .road-legend{gap:8px;font-size:.7rem;padding:5px 8px} .road-legend .ln{width:14px} .rl-fold{white-space:nowrap;padding-left:6px} }
/* 선 색 범례 접기(기본은 펼침, 기기에 기억 — 사용자 요청) */
.rl-fold{background:none;border:none;border-left:1px solid var(--line);color:var(--sub);font:inherit;font-size:.72rem;padding:0 0 0 8px;margin-left:-4px;cursor:pointer}
.rl-open{display:none;background:none;border:none;color:var(--ink);font:inherit;font-size:.74rem;font-weight:700;padding:0;cursor:pointer}
.road-legend.folded{padding:4px 9px}
.road-legend.folded > :not(.rl-open){display:none}
.road-legend.folded .rl-open{display:block}
.ln{display:inline-block;width:20px;height:0;border-top:3px solid}
.ln.sidewalk{border-color:rgba(31,138,91,.8)}
.ln.car{border-color:rgba(215,38,61,.6)}
.ln.narrow{border-color:rgba(232,255,0,.65);border-top-width:5px;box-shadow:0 0 0 1.5px rgba(43,43,43,.55)}
/* 보행 구간 폭 표시(구간을 눌렀을 때) */
.leaflet-tooltip.width-tag{background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 4px;
  font-size:11px;font-weight:700;color:var(--ink);box-shadow:none}
.leaflet-tooltip.width-tag::before{display:none}
.leaflet-tooltip.width-tag.narrow{border-color:#2B2B2B;background:#E8FF00;color:#1E2A32}

/* 하단 정보창 */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--paper);
  border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(30,42,50,.18);
  max-height:72vh;overflow-y:auto;padding:8px 18px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(calc(100% + 40px));transition:transform .22s ease}
.sheet[aria-hidden="false"]{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
@media (min-width:760px){.sheet{left:auto;right:16px;bottom:16px;width:380px;border-radius:12px;max-height:80vh}}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 8px}
.sheet-close{position:absolute;top:10px;right:12px;border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--sub);padding:6px}
.cat{font-size:.8rem;font-weight:700;color:var(--c)}
.sheet h2{font-size:1.2rem;margin:2px 0 8px;padding-right:30px}

.vbadge{display:inline-block;font-size:.76rem;font-weight:700;padding:2px 7px;border-radius:4px;border:1.5px solid;margin-right:4px}
.vbadge.field{color:var(--field);border-color:var(--field)}
.vbadge.agency{color:var(--agency);border-color:var(--agency)}
.vbadge.unverified{color:var(--unverified);border-color:var(--unverified);border-style:dashed}
.vrow{font-size:.82rem;color:var(--sub);margin-bottom:12px}

dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:.92rem}
dl.facts dt{color:var(--sub)}
dl.facts dd{margin:0;font-weight:600}
.status{display:inline-block;font-size:.82rem;font-weight:700;padding:3px 8px;border-radius:4px;background:var(--wash)}
.status.open{color:var(--field)} .status.shut{color:var(--unverified)}

.reports h3,.report-form h3{font-size:.95rem;margin:16px 0 6px}
.reports ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.reports li{font-size:.85rem;background:var(--wash);border-radius:6px;padding:7px 9px}
.reports .meta{color:var(--sub);font-size:.78rem}
.report-form .opts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.report-form label.opt{border:1.5px solid var(--line);border-radius:6px;padding:5px 9px;font-size:.84rem;cursor:pointer}
.report-form label.opt:has(input:checked){border-color:var(--ink);font-weight:700}
.report-form label.opt input{position:absolute;opacity:0}
.report-form .report-go{display:block;text-align:center;text-decoration:none;margin:4px 0 6px}
a.ghost{text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.ghost{white-space:nowrap}
.ghost.feedback{border-color:var(--ink);color:var(--ink);font-weight:700}
.ghost .sm{display:none}
@media (max-width:400px){ h1{font-size:.9rem} .title-btns{gap:3px} .title-btns .ghost{padding:4px 5px} }
@media (max-width:440px){ .ghost .lg{display:none} .ghost .sm{display:inline} }
.report-form textarea{width:100%;min-height:64px;border:1.5px solid var(--line);border-radius:6px;padding:8px;font:inherit;font-size:.88rem}
.btn{margin-top:8px;width:100%;border:none;border-radius:8px;background:var(--ink);color:#fff;padding:11px;font-weight:700;cursor:pointer}
.note{font-size:.78rem;color:var(--sub);margin-top:6px}
.gallery{margin:0 0 10px}
.gallery .main{width:100%;max-height:260px;object-fit:cover;border-radius:8px;display:block}
.gallery .thumbs{display:flex;gap:6px;margin-top:6px;overflow-x:auto}
.gallery .thumbs button{flex:none;padding:0;border:none;background:none;cursor:pointer}
.gallery .thumbs img{width:56px;height:56px;object-fit:cover;border-radius:6px;display:block}

/* 가로등 격자 */
.chip.light .dot{background:repeating-linear-gradient(45deg,#FFD23F 0 3px,#E89B00 3px 6px)}
.grid-legend{position:fixed;right:10px;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:600;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:.78rem;max-width:230px}
.grid-legend strong{display:block;margin-bottom:5px;font-size:.82rem}
.gl-head{display:flex;align-items:flex-start;gap:6px;margin-bottom:5px}
.gl-head strong{margin:0;flex:1}
.gl-fold{flex:none;background:none;border:1px solid #3A4766;border-radius:5px;color:#C9D2E3;font:inherit;font-size:.72rem;padding:3px 7px;cursor:pointer;min-height:28px}
/* 범례 전체 접기: 접으면 작은 버튼 하나만 남음(조원 피드백). ‘설치 개수 기준’은 버튼에도 표시 */
.gl-open{display:none;background:none;border:none;color:#FFE38A;font:inherit;font-weight:700;font-size:.8rem;cursor:pointer;padding:2px 2px;min-height:32px}
.gl-open small{font-weight:400;color:#AAB4C8;margin:0 2px}
.grid-legend.folded{padding:3px 8px 4px;width:170px}
.grid-legend.folded > :not(.gl-open):not(.ramp):not(.ramp-labels){display:none}   /* 접어도 0~5+ 색 막대는 남김(조원 피드백) */
.grid-legend.folded .gl-open{min-height:26px;font-size:.74rem;padding:0}
.grid-legend.folded .ramp{height:8px;margin:2px 0}
.grid-legend.folded .ramp-labels{font-size:.68rem}
/* 휴대폰 폭: 왼쪽 아래 보행 구간 범례(인도·차도)와 겹치지 않게 그 위로 올림 */
@media (max-width:640px){ .grid-legend{bottom:calc(58px + env(safe-area-inset-bottom,0px))} }
.grid-legend.folded .gl-open{display:block}
.grid-legend .cellsize{font-weight:400;color:var(--sub)}
.grid-legend .steps{display:flex;gap:8px;flex-wrap:wrap}
.grid-legend .steps span{display:inline-flex;align-items:center;gap:4px}
.grid-legend p{margin:6px 0 0;color:var(--sub);line-height:1.4}
.light-dot{width:9px;height:9px;border-radius:50%;background:#E89B00;border:2px solid #fff;box-shadow:0 0 0 1px #8A5A00}
.light-dot.sec{background:#FFD23F}
.bar{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--wash);margin:4px 0 10px}
.bar span{display:block;height:100%}

/* 밤 모드(가로등 필터 켰을 때) */
.night-pane{filter:blur(2.5px)}
.grid-legend{background:#141B2D;color:#E8ECF4;border-color:#2A3550}
.grid-legend .cellsize,.grid-legend p{color:#AAB4C8}
.ramp{height:12px;border-radius:3px;margin:4px 0 3px;
  background:linear-gradient(90deg,#1A2030 0 20%,#4A3418 20% 40%,#8A5410 40% 60%,#D9A500 60% 80%,#FFF3A0 80% 100%)}
.ramp-labels{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.light-dot{box-shadow:0 0 6px 2px rgba(255,210,63,.8)}
body.night .chip.light{background:#141B2D;color:#FFE38A;border-color:#141B2D}