:root {
    color-scheme: light;
    --plane:#f9f9f7; --surface:#fcfcfb; --surface-1:#fcfcfb;
    --text-primary:#0b0b0b; --ink:#0b0b0b; --ink-2:#52514e; --text-muted:#898781; --muted:#898781;
    --border:rgba(11,11,11,0.10); --grid:#e1e0d9;
    --series-1:#2a78d6; --series-2:#eb6834; --chip:rgba(42,120,214,0.10);
    --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
    --sitemap-fill:rgba(42,120,214,0.16); --sitemap-parcel:#8ab0e0;
    --sitemap-nb-fill:rgba(137,135,129,0.07); --sitemap-nb:#c3c2b7;
    --sitemap-road-fill:rgba(137,135,129,0.20); --sitemap-road:#a9a79f;
    --shadow:0 1px 2px rgba(11,11,11,.06), 0 4px 16px rgba(11,11,11,.04);
    --tile-layer:"Base";
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --plane:#0d0d0d; --surface:#1a1a19; --surface-1:#1a1a19;
      --text-primary:#fff; --ink:#fff; --ink-2:#c3c2b7; --text-muted:#898781; --muted:#898781;
      --border:rgba(255,255,255,0.10); --grid:#2c2c2a;
      --series-1:#3987e5; --series-2:#d95926; --chip:rgba(57,135,229,0.16);
      --sitemap-fill:rgba(57,135,229,0.20); --sitemap-parcel:#4a7ab5;
      --sitemap-nb-fill:rgba(195,194,183,0.06); --sitemap-nb:#4a4a46;
      --sitemap-road-fill:rgba(195,194,183,0.14); --sitemap-road:#6a6963;
      --shadow:none;
    }
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--plane); color:var(--ink);
         font:15px/1.6 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif; }
  main { max-width:1040px; margin:0 auto; padding:26px 20px 90px; }
  a { color:var(--series-1); }
  h1 { font-size:21px; margin:0 0 4px; letter-spacing:-.01em; }
  .sub { color:var(--muted); font-size:13px; margin:0 0 20px; }

  section { background:var(--surface); border:1px solid var(--border); border-radius:14px;
            padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow); }
  section > h2 { font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 14px; }

  input[type=text], input[type=number], select {
    padding:10px 13px; background:var(--plane); color:var(--ink);
    border:1px solid var(--border); border-radius:9px; font:inherit; width:100%; }
  input:focus-visible, select:focus-visible { outline:2px solid var(--series-1); outline-offset:1px; }
  button { border:0; border-radius:9px; background:var(--series-1); color:#fff;
           font:inherit; font-weight:600; padding:10px 18px; cursor:pointer; }
  button:disabled { opacity:.55; cursor:default; }
  .ghost { background:none; color:var(--series-1); border:1px solid var(--border); font-weight:500; }
  .mini { padding:5px 10px; font-size:12.5px; }
  a.dl, a.dl2 { display:inline-block; text-decoration:none; border-radius:9px; font-weight:600;
                padding:10px 18px; background:var(--series-1); color:#fff; }
  a.dl2 { background:none; color:var(--series-1); border:1px solid var(--border); font-weight:500; }
  a.dl.busy, a.dl2.busy { opacity:.72; cursor:progress; font-variant-numeric:tabular-nums; }
  label.f { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:10px; }
  .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .hint { color:var(--muted); font-size:12px; margin:8px 0 0; }

  /* ── 지도 피커 ─────────────────────────────────── */
  .mapwrap { position:relative; height:440px; border:1px solid var(--border);
             border-radius:11px; overflow:hidden; background:var(--plane);
             cursor:crosshair; touch-action:none; user-select:none; }
  .mapwrap.dragging { cursor:grabbing; }
  #tiles { position:absolute; inset:0; overflow:hidden; }
  /* 타일은 레이어 안에 절대좌표로 두고, 이동은 레이어 하나만 transform 한다.
     타일마다 left/top을 다시 쓰면 매 프레임 레이아웃이 일어나 깜빡인다. */
  .tlayer { position:absolute; left:0; top:0; width:0; height:0;
            transform-origin:0 0; will-change:transform; }
  .tlayer img { position:absolute; width:256px; height:256px; display:block;
                opacity:0; transition:opacity .18s ease-out; }
  .tlayer img.on { opacity:1; }
  .tlayer.fading { opacity:.55; transition:opacity .25s ease-out; }
  #overlay, #zoning, #cadastral { position:absolute; inset:0; pointer-events:none; }
  /* 지적선 — 필지 경계를 얇은 선으로 겹쳐 그린다 */
  #cadastral path { fill:none; stroke:var(--sitemap-road); stroke-width:1; vector-effect:non-scaling-stroke; }
  #cadastral text { fill:var(--ink-2); font-size:10px; font-family:system-ui,sans-serif;
                    paint-order:stroke; stroke:var(--surface); stroke-width:2.5px; }
  /* 용도지역 색이 배경 지형색에 묻히지 않도록, 켜질 때 배경을 흰색으로 눌러준다 */
  #zoning.on { background:rgba(255,255,255,.5); }
  #zoning polygon { fill-opacity:.72; }
  .mapbar { position:absolute; left:10px; top:10px; display:flex; gap:6px; z-index:5; flex-wrap:wrap; }
  .mapbar button { background:var(--surface); color:var(--ink); border:1px solid var(--border);
                   font-weight:500; padding:5px 10px; font-size:12.5px; box-shadow:var(--shadow); }
  .mapbar button.on { background:var(--series-1); color:#fff; border-color:transparent; }
  .zoombar { position:absolute; right:10px; top:10px; z-index:5; display:flex; flex-direction:column;
             border:1px solid var(--border); border-radius:9px; overflow:hidden; box-shadow:var(--shadow); }
  .zoombar button { width:34px; height:34px; padding:0; font-size:19px; font-weight:600; line-height:1;
                    background:var(--surface); color:var(--ink); border:0; border-radius:0; }
  .zoombar button+button { border-top:1px solid var(--border); }
  .zoombar button:hover { background:var(--chip); }
  .maptip { position:absolute; right:10px; bottom:10px; z-index:5; font-size:12px;
            background:var(--surface); border:1px solid var(--border); border-radius:8px;
            padding:4px 9px; color:var(--muted); }
  .zlegend { position:absolute; left:10px; bottom:10px; z-index:5; display:none; flex-wrap:wrap;
             gap:4px 8px; max-width:60%; background:var(--surface); border:1px solid var(--border);
             border-radius:8px; padding:6px 9px; font-size:11.5px; }
  .zlegend.on { display:flex; }
  .zlegend i { display:inline-block; width:11px; height:11px; border-radius:2px;
               margin-right:4px; vertical-align:-1px; }
  .searchrow { display:flex; gap:8px; margin-bottom:12px; }

  /* ── 선택 필지 ─────────────────────────────────── */
  .lot { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); }
  .lot:first-child { border-top:0; }
  .lot .nm { flex:1; font-weight:500; }
  .lot .meta { color:var(--muted); font-size:12.5px; }
  .empty { color:var(--muted); font-size:13.5px; padding:10px 0; }
  .uses { margin-top:10px; }
  .uses .u { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--border); }
  .uses .u:first-child { border-top:0; }
  .uses .u .nm { flex:1; font-weight:500; }
  .uses .u .ar { color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
  .uses .u.editing { background:var(--chip); border-radius:8px; margin:0 -8px; padding:7px 8px; }

  /* ── 결과 공통 ─────────────────────────────────── */
  .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:18px; }
  .tile .k { font-size:12px; color:var(--muted); }
  .tile .v { font-size:20px; font-weight:600; letter-spacing:-.01em; margin-top:2px; }
  .tile .n { font-size:12px; color:var(--muted); }
  table { width:100%; border-collapse:collapse; font-size:13.5px; }
  th,td { text-align:left; padding:8px 10px; border-top:1px solid var(--border); vertical-align:top; }
  th { color:var(--muted); font-weight:500; font-size:12px; border-top:0; }
  td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .scroll { overflow-x:auto; }

  /* ── 최적안 — 최대 규모 산정의 결론을 맨 위에 크게 ───────── */
  .best { border:1px solid var(--series-1); border-radius:12px; padding:16px 18px;
          background:linear-gradient(135deg, color-mix(in srgb, var(--series-1) 12%, transparent), transparent); }
  .best .cap { font-size:12px; color:var(--series-1); font-weight:700; letter-spacing:.04em; }
  .best .hl { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin:8px 0 2px; }
  .best .hl b { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
  .best .hl .u { font-size:14px; color:var(--muted); font-weight:500; }
  .best .sub { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:10px;
               padding-top:10px; border-top:1px solid var(--border); }
  .best .sub div { font-size:12.5px; color:var(--muted); }
  .best .sub b { display:block; font-size:15.5px; color:var(--fg); font-weight:600;
                 font-variant-numeric:tabular-nums; }

  /* 접었다 폈다 — 표가 길어 기본은 접어 둔다 */
  details.fold { border:1px solid var(--border); border-radius:10px; margin-top:12px; }
  details.fold > summary { cursor:pointer; padding:10px 14px; font-size:13px; font-weight:600;
                           list-style:none; display:flex; align-items:center; gap:8px; }
  details.fold > summary::-webkit-details-marker { display:none; }
  details.fold > summary::before { content:"▸"; color:var(--muted); font-size:11px; }
  details.fold[open] > summary::before { content:"▾"; }
  details.fold > summary .c { color:var(--muted); font-weight:400; font-size:12px; }
  details.fold > .body { padding:0 14px 14px; }

  /* ── 세부 검토 항목 — '적용'이면 무엇까지 해야 하는지 ───── */
  details.fold.guide { margin-top:10px; background:var(--chip); border-color:transparent; }
  details.fold.guide > summary { padding:8px 12px; font-size:12.5px; }
  details.fold.guide > .body { padding:0 12px 10px; }
  ol.glist { margin:0; padding-left:20px; }
  ol.glist li { margin:0 0 9px; font-size:13px; line-height:1.55; }
  ol.glist li:last-child { margin-bottom:0; }
  ol.glist .gc { display:block; font-size:11.5px; color:var(--series-1); font-weight:600; }
  ol.glist .gw { display:block; color:var(--fg); }
  ol.glist .gw b { font-weight:700; }
  .verdict { font-size:19px; font-weight:700; letter-spacing:-.01em; }
  .v-stop{color:var(--critical)} .v-cond{color:var(--serious)} .v-ok{color:var(--good)}
  .badge { display:inline-block; font-size:11.5px; font-weight:600; white-space:nowrap;
           border:1px solid var(--border); border-radius:999px; padding:1px 9px; }
  .b-apply{color:var(--series-1)} .b-scale{color:var(--serious)}
  .b-none{color:var(--muted)} .b-sep{color:var(--critical)}
  .item { padding:11px 0; border-top:1px solid var(--border); }
  .item:first-child { border-top:0; }
  .item .t { font-weight:600; }
  .item .r { font-size:13px; color:var(--ink-2); margin-top:2px; }
  .item .note { font-size:12px; color:var(--muted); margin-top:3px; font-style:italic; }
  .topic { font-size:12px; color:var(--muted); margin:16px 0 2px; letter-spacing:.03em; }
  .warn { border-left:3px solid var(--warning); padding-left:12px; margin:8px 0; font-size:13.5px; }
  .formula { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:6px; }
  .sitemap { border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--plane); }
  .sitemap svg { display:block; width:100%; height:auto; max-height:min(560px,70vh); margin:0 auto; }
  .legend { display:flex; flex-wrap:wrap; gap:6px; }
  .legend span { font-size:12px; color:var(--ink-2); border:1px solid var(--border);
                 border-radius:999px; padding:2px 9px; }

  /* ── 법령 아코디언 ─────────────────────────────── */
  .laws { margin-top:4px; }
  .law { border-top:1px dashed var(--border); }
  .law:first-child { border-top:0; }
  .lawhead { display:flex; align-items:baseline; gap:8px; padding:6px 0; cursor:pointer;
             font-size:12.5px; color:var(--ink-2); background:none; border:0; width:100%;
             text-align:left; font-weight:400; }
  .lawhead:hover { color:var(--series-1); }
  .lawhead .lvl { flex:0 0 auto; font-size:10.5px; border:1px solid var(--border);
                  border-radius:4px; padding:0 5px; color:var(--muted); }
  .lawhead .caret { flex:0 0 auto; color:var(--muted); transition:transform .12s; }
  .lawhead[aria-expanded=true] .caret { transform:rotate(90deg); }
  .lawbody { display:none; font-size:12.5px; line-height:1.75; color:var(--ink-2);
             background:var(--plane); border-radius:8px;
             padding:11px 13px; margin:2px 0 8px; max-height:360px; overflow-y:auto; }
  .lawbody.open { display:block; }
  .lawbody p { margin:0 0 3px; white-space:pre-wrap; }
  .lawbody .l0 { font-weight:700; color:var(--ink); margin-bottom:6px; }
  .lawbody .l1 { margin-left:0; }
  .lawbody .l2 { margin-left:14px; }
  .lawbody .l3 { margin-left:28px; }
  .lawbody .hit { background:var(--chip); color:var(--ink); font-weight:600;
                  border-radius:4px; padding:1px 5px; margin-left:-5px; }
  .lawbody .boxed { font-family:ui-monospace,"D2Coding",Consolas,monospace; font-size:11.5px;
                    white-space:pre; overflow-x:auto; }
  .lawlink { display:inline-block; margin-top:8px; font-size:12px; }

  /* 필지 탭 */
  .ptabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
  .ptab { background:none; color:var(--muted); border:1px solid var(--border);
          font-weight:500; font-size:13px; padding:7px 13px; }
  .ptab.on { background:var(--series-1); color:#fff; border-color:transparent; }
  .pane { display:none; } .pane.on { display:block; }

  /* 공시지가 차트 */
  .chart-wrap { position:relative; }
  svg.chart { width:100%; height:auto; display:block; touch-action:none; }
  .tick { fill:var(--muted); font-size:11px; }
  .tip { position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
         background:var(--surface); color:var(--ink); border:1px solid var(--border);
         border-radius:8px; padding:5px 9px; font-size:12.5px; white-space:nowrap;
         box-shadow:0 2px 10px rgba(0,0,0,.14); transition:opacity .1s; }

  #status:not(:empty) { padding:12px 16px; border-radius:10px; margin-bottom:16px;
    background:var(--surface); border:1px solid var(--border); font-size:14px; }
  #status.err { border-left:3px solid var(--critical); }
  .cands { list-style:none; padding:0; margin:8px 0 0; }
  .cands li { border-top:1px solid var(--border); }
  .cands button { width:100%; text-align:left; background:none; color:var(--ink);
                  font-weight:400; padding:8px 4px; border-radius:0; }
  .cands button:hover { background:var(--chip); }
  .disclaimer { color:var(--muted); font-size:12px; margin-top:20px; line-height:1.7; }