/* «상세» 캔버스(web/detail.js) — 사이트 토큰(--ink·--rule·--accent…)을 그대로 쓴다. 전부 .sd-detail 아래로 가둔다. */
.sd-detail{--sd-panel:400px}
.sd-detail .sd-plates{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.sd-detail .sd-plates button{font:inherit;font-size:12.5px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);
  border-radius:999px;padding:6px 11px 6px 9px;cursor:pointer;display:inline-flex;gap:6px;align-items:baseline}
.sd-detail .sd-plates button .n{font:500 10.5px/1 var(--font-mono);color:var(--ink-4)}
.sd-detail .sd-plates button[aria-selected="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.sd-detail .sd-plates button[aria-selected="true"] .n{color:oklch(80% 0.02 255)}
.sd-detail .sd-plates button:not([aria-selected="true"]):hover{border-color:var(--rule-strong);color:var(--ink)}

.sd-detail .sd-insp{display:grid;grid-template-columns:minmax(0,1fr) var(--sd-panel);gap:18px}
/* 도판은 가로폭으로 정사각. 오른쪽은 그 높이를 따라간다 — 표(수천 줄)가 칸 높이를 정하지 못하게 contain:size */
.sd-detail .sd-cv{position:relative;aspect-ratio:1;min-width:0;align-self:start;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r-lg,12px);overflow:hidden;cursor:grab;user-select:none;touch-action:none}
.sd-detail .sd-cv.drag{cursor:grabbing}
.sd-detail .sd-cv svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sd-detail .sd-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:4px}
.sd-detail .sd-tools button{width:32px;height:32px;border:1px solid var(--rule);background:var(--sheet);border-radius:var(--r-sm,6px);
  font:500 15px/1 var(--font-sans);color:var(--ink-2);cursor:pointer}
.sd-detail .sd-tools button:hover{color:var(--ink);border-color:var(--rule-strong)}
.sd-detail .sd-legend{position:absolute;left:16px;bottom:14px;display:flex;flex-wrap:wrap;gap:4px 10px;max-width:72%;
  font-size:11.5px;color:var(--ink-3);pointer-events:none}
.sd-detail .sd-legend i, .sd-detail .sd-kick i, .sd-detail td i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;box-shadow:inset 0 0 0 1px oklch(24% 0.035 255 / .15)}
.sd-detail td i{width:8px;height:8px;vertical-align:0}
.sd-detail .sd-hint{position:absolute;right:12px;bottom:12px;font:11px/1 var(--font-mono);color:var(--ink-4)}
.sd-detail .sd-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--ink-3);
  background:oklch(99.7% 0.002 240 / .6)}
.sd-detail .sd-wait[hidden]{display:none}
/* 클릭 층 — 칠하지 않는다. 누르면 테두리 + 옅은 청사진 색 */
.sd-detail .sd-it{fill:transparent;stroke:none;vector-effect:non-scaling-stroke;cursor:pointer}
.sd-detail .sd-it:hover{stroke:var(--ink);stroke-width:1.2}
.sd-detail .sd-it.sel{fill:oklch(50% 0.105 252 / .14);stroke:var(--accent);stroke-width:2.4}
.sd-detail .sd-pt{fill:oklch(99.7% 0.002 240 / .01)}
/* 걸어가는 길(도보권) — 초록 권역 위에서 잘 보이게 주황 + 흰 테. 직선 구간은 점선. 누르기를 막지 않는다 */
.sd-detail .sd-route-halo{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.sd-detail .sd-route{fill:none;stroke:#e8590c;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.sd-detail .sd-route-link{fill:none;stroke:#e8590c;stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;pointer-events:none}
.sd-detail .sd-ptmark{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}

.sd-detail .sd-panel{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;contain:size}
.sd-detail .sd-card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg,12px);padding:16px 18px 14px;
  flex:0 1 auto;overflow:auto;max-height:62%}
.sd-detail .sd-kick{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sd-detail .sd-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:6px 0 2px}
.sd-detail .sd-card h3.none{color:var(--ink-3);font-weight:500}
.sd-detail .sd-sub{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.sd-detail .sd-card dl{display:grid;grid-template-columns:96px 1fr;gap:7px 10px;margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--rule-soft);font-size:13px}
.sd-detail .sd-card dt{color:var(--ink-3)}
/* 지금 도판이 칠하는 값(용도·사용승인·높이·층수) — 건물 카드에서 크게 */
.sd-detail .sd-hl{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:10px 13px;border-radius:9px;background:var(--field)}
.sd-detail .sd-hl i{flex:none;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14)}
.sd-detail .sd-hl div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 9px;min-width:0}
.sd-detail .sd-hl span{flex-basis:100%;font-size:11px;color:var(--ink-3)}
.sd-detail .sd-hl b{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.sd-detail .sd-hl em{font-style:normal;font-size:12.5px;color:var(--ink-2)}
.sd-detail .sd-card dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.sd-detail .sd-card dd .u{color:var(--ink-3);margin-left:3px}
.sd-detail .sd-src{margin-top:12px;font-size:11px;color:var(--ink-4);line-height:1.5}
.sd-detail .sd-empty{font-size:13px;color:var(--ink-2);line-height:1.6;margin:10px 0 0}

.sd-detail .sd-list{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg,12px);display:flex;
  flex-direction:column;min-height:0;flex:1}
.sd-detail .sd-list[hidden]{display:none}
.sd-detail .sd-lhead{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--rule-soft)}
.sd-detail .sd-lhead b{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sd-detail .sd-lhead input{flex:1;min-width:0;font:inherit;font-size:12.5px;border:1px solid var(--rule);background:var(--field);
  border-radius:var(--r-sm,6px);padding:6px 8px;color:var(--ink)}
.sd-detail .sd-lhead button{font:inherit;font-size:12px;border:1px solid var(--rule-strong);background:var(--sheet);color:var(--ink-2);
  border-radius:var(--r-sm,6px);padding:6px 9px;cursor:pointer;white-space:nowrap}
.sd-detail .sd-lhead button:hover{color:var(--ink)}
.sd-detail .sd-tw{overflow:auto;flex:1;min-height:0}
.sd-detail table{width:100%;border-collapse:collapse;font-size:12.5px}
.sd-detail th{position:sticky;top:0;background:var(--sheet);text-align:left;font-weight:500;color:var(--ink-3);font-size:11.5px;
  padding:7px 8px;border-bottom:1px solid var(--rule);cursor:pointer;white-space:nowrap}
.sd-detail th.r, .sd-detail td.r{text-align:right}
.sd-detail th[aria-sort="ascending"]::after{content:" ↑"}
.sd-detail th[aria-sort="descending"]::after{content:" ↓"}
.sd-detail td{padding:6px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
/* 띄어쓰기 없는 긴 이름(«한화금융센터_태평로»)이 칸을 밀어 오른쪽 승인 열이 잘리던 것 */
.sd-detail td .nm{color:var(--ink);overflow-wrap:anywhere}
.sd-detail td .ad{display:block;color:var(--ink-3);font-size:11px;margin-top:1px}
.sd-detail td.r{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.sd-detail tbody tr{cursor:pointer}
.sd-detail tbody tr:hover td{background:var(--field)}
.sd-detail tbody tr.sel td{background:var(--accent-soft)}
.sd-detail .sd-foot{font-size:11px;color:var(--ink-4);padding:8px 14px;border-top:1px solid var(--rule-soft)}
@media (max-width:900px){
  .sd-detail .sd-insp{grid-template-columns:minmax(0,1fr)}
  .sd-detail .sd-panel{contain:none}
  .sd-detail .sd-tw{max-height:420px}
}
/* 묶음(건물) 안 바탕 고르기 — 칩보다 한 단계 작게 */
.sd-detail .sd-bases{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:-6px 0 12px;font-size:12px;color:var(--ink-3)}
.sd-detail .sd-bases[hidden]{display:none}
.sd-detail .sd-bases > span{margin-right:4px}
.sd-detail .sd-bases button{font:inherit;font-size:12px;border:0;background:transparent;color:var(--ink-3);
  border-radius:var(--r-sm,6px);padding:4px 8px;cursor:pointer}
.sd-detail .sd-bases button:hover{color:var(--ink);background:var(--field)}
.sd-detail .sd-bases button[aria-pressed="true"]{color:var(--ink);background:var(--field-2);font-weight:600}
/* 선(도로) — 칠 없이 넓은 투명 띠로 누르고, 누르면 반투명 띠 */
.sd-detail .sd-ln{fill:none;stroke:transparent;stroke-width:12px;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.sd-detail .sd-ln:hover{stroke:oklch(24% 0.035 255 / .28);stroke-width:12px}
.sd-detail .sd-ln.sel{fill:none;stroke:oklch(50% 0.105 252 / .5);stroke-width:12px}
/* 창으로 띄우기(SitediaDetail.modal) — 도판 칸은 창 높이에 맞춘 정사각, 오른쪽 패널은 그 높이를 따라간다 */
html.sd-lock{overflow:hidden}
.sd-modal{border:0;padding:0;margin:auto;border-radius:16px;background:var(--paper);color:var(--ink);
  box-shadow:0 24px 80px oklch(20% 0.04 255 / .28);max-width:96vw;max-height:96vh;overflow:auto}
.sd-modal::backdrop{background:oklch(20% 0.04 255 / .42)}
.sd-modal .sd-mhead{display:flex;align-items:baseline;gap:12px;padding:18px 24px 0}
.sd-modal .sd-mhead b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.sd-modal .sd-msite{font-size:13px;color:var(--ink-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-modal .sd-mclose{border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);border-radius:8px;width:32px;height:32px;
  font:500 14px/1 var(--font-sans);cursor:pointer;align-self:center}
.sd-modal .sd-mclose:hover{color:var(--ink);border-color:var(--rule-strong)}
.sd-modal .sd-mbody{padding:12px 24px 24px;--sd-h:min(calc(92vh - 190px), calc(94vw - 470px))}
.sd-modal .sd-detail .sd-insp{grid-template-columns:var(--sd-h) var(--sd-panel)}
.sd-modal .sd-detail .sd-cv{width:var(--sd-h);height:var(--sd-h);aspect-ratio:auto}
.sd-modal .sd-detail .sd-plates{max-width:calc(var(--sd-h) + 18px + var(--sd-panel))}
/* 🔴 사이트 전역 규칙 막기 — index.html의 `button{width:100%;padding:11px 16px;background:var(--ink)…}`·
   `button:hover{background:var(--accent-deep)}`가 그대로 들어오면 칩이 한 줄씩 꽉 차고(실제 화면 실측),
   마우스를 올리면 진한 파랑이 깔린다. 부품 버튼은 여기서 전부 다시 정한다. */
.sd-detail button, .sd-modal button{width:auto;min-width:0;margin:0;line-height:1.2;transition:none;box-shadow:none}
.sd-detail .sd-plates button:hover{background:var(--sheet)}
.sd-detail .sd-plates button[aria-selected="true"], .sd-detail .sd-plates button[aria-selected="true"]:hover{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.sd-detail .sd-bases button{border:0;background:transparent}
.sd-detail .sd-bases button:hover{background:var(--field);color:var(--ink)}
.sd-detail .sd-bases button[aria-pressed="true"], .sd-detail .sd-bases button[aria-pressed="true"]:hover{background:var(--field-2);color:var(--ink)}
.sd-detail .sd-tools button{padding:0;display:grid;place-items:center}
.sd-detail .sd-tools button:hover, .sd-detail .sd-lhead button:hover, .sd-modal .sd-mclose:hover{background:var(--sheet)}
.sd-modal .sd-mclose{padding:0;display:grid;place-items:center}
.sd-detail .sd-lhead input[type=search]{width:auto;flex:1;min-width:0;margin:0;font-size:12.5px;padding:6px 8px}
/* 창(오버레이): 칩·바탕 줄 없음 — 격자가 곧 선택지. 위엔 «03 건축물 용도»만 */
.sd-detail.sd-nochips .sd-plates, .sd-detail.sd-nochips .sd-bases{display:none}
.sd-modal .sd-mhead{align-items:center;gap:8px}
.sd-modal .sd-mtitle{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.sd-modal .sd-mtitle .n{font:500 12px/1 var(--font-mono);color:var(--ink-4)}
.sd-modal .sd-mnav{border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);border-radius:8px;width:32px;height:32px;
  padding:0;display:grid;place-items:center;font:500 18px/1 var(--font-sans);cursor:pointer}
.sd-modal .sd-mnav:hover{background:var(--sheet);color:var(--ink);border-color:var(--rule-strong)}
.sd-modal .sd-msite{margin-left:8px}
.sd-modal .sd-mbody{--sd-h:min(calc(92vh - 120px), calc(94vw - 470px))}

/* 격자 칸 오른쪽 위 «상세» 버튼 — 원형 도판이라 모서리가 비어 그림을 가리지 않는다.
   사이트 전역 button 규칙(width:100%·진한 배경)을 여기서 다시 정한다. */
.cell .sd-open{position:absolute;top:10px;right:12px;z-index:2;width:auto;min-width:0;margin:0;
  font:500 12px/1 var(--font-sans);padding:5px 10px;border:1px solid var(--rule);border-radius:999px;
  background:var(--sheet);color:var(--ink-2);cursor:pointer;transition:none;box-shadow:none}
.cell .sd-open:hover{background:var(--sheet);color:var(--ink);border-color:var(--rule-strong)}
/* 비로그인(무료 모드)이면 잠금 — 칸 아래 SVG·색 버튼과 같은 모양(흐리게 + 작은 🔒). 누르면 로그인 창 */
body.freemode .cell .sd-open[data-pro]{opacity:.5;cursor:not-allowed;white-space:nowrap}
body.freemode .cell .sd-open[data-pro]::after{content:" 🔒";font-size:10px}
/* 범례 — 아래에 늘어놓던 범례 묶음 대신 상세 창에서 그 도판 것만(영빈님 2026-10-01). 도판 위에 얹히므로 옅은 바탕 */
.sd-detail .sd-legend{background:oklch(99.7% 0.002 240 / .88);border-radius:var(--r-md,8px);padding:7px 10px;color:var(--ink-2)}
.sd-detail .sd-legend[hidden]{display:none}
/* 지도 설정(2026-10-01, 밀도의 지표·퍼짐 반경) — 정보 카드 아래. 전역 button 규칙을 여기서 다시 정한다 */
.sd-detail .sd-ctl{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-lg,12px);padding:12px 18px 14px}
.sd-detail .sd-ctl[hidden]{display:none}
.sd-detail .sd-crow{display:flex;align-items:center;gap:12px}
.sd-detail .sd-crow + .sd-crow{margin-top:10px}
.sd-detail .sd-crow > span{flex:none;width:64px;font-size:12.5px;color:var(--ink-3)}
.sd-detail .sd-seg{display:flex;flex:1;min-width:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.sd-detail .sd-seg button{flex:1;width:auto;min-width:0;margin:0;padding:6px 6px;border:0;border-radius:0;box-shadow:none;transition:none;
  background:var(--sheet);color:var(--ink-2);font:500 12.5px/1.3 var(--font-sans);cursor:pointer;white-space:nowrap}
.sd-detail .sd-seg button + button{border-left:1px solid var(--rule)}
.sd-detail .sd-seg button:hover{background:var(--field);color:var(--ink);border-color:var(--rule)}
.sd-detail .sd-seg button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
/* 밀도의 «가장 짙은 곳» 둘레 원 */
.sd-detail .sd-peak{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}
/* 구성비(2026-10-01) — 분석의 «구성비» 탭과 같은 숫자·색. 누적 띠 + 두 줄 격자 목록 */
.sd-detail .sd-comp{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.sd-detail .sd-comph{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.sd-detail .sd-comph span{font-weight:400;color:var(--ink-3)}
.sd-detail .sd-cbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--field)}
.sd-detail .sd-cbar i{display:block;height:100%}
.sd-detail .sd-crows{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:9px;font-size:12px}
.sd-detail .sd-crows.one{grid-template-columns:1fr}
.sd-detail .sd-crows div{display:flex;align-items:center;gap:6px;min-width:0}
.sd-detail .sd-crows i{flex:none;width:9px;height:9px;border-radius:2px}
.sd-detail .sd-crows b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-detail .sd-crows em{margin-left:auto;font-style:normal;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 예시(체험) 안내 줄 — 창 머리 아래(2026-10-02). 청사진 강조색으로 눈에 띄게 */
.sd-modal .sd-mdemo{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:12px 24px 0;padding:12px 16px;
  border:1.5px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);font-size:14px}
.sd-modal .sd-mdemo[hidden]{display:none}
.sd-modal .sd-mdemo .tag{flex:none;margin:0;padding:4px 11px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:700}
.sd-modal .sd-mdemo .t{flex:1 1 280px;color:var(--ink-2,#3a3a3a);line-height:1.5}
.sd-modal .sd-mdemo button{width:auto;padding:9px 16px;font-size:14px}
/* 예시 창은 판 둘레도 강조색 */
.sd-modal:has(.sd-mdemo:not([hidden])){outline:3px solid var(--accent-line);outline-offset:-3px}
/* 무료라도 «상세»는 명동 예시로 열린다 — 흐리게·🔒 하지 않는다 */
body.freemode.demo .cell .sd-open[data-pro]{opacity:1;cursor:pointer}
body.freemode.demo .cell .sd-open[data-pro]::after{content:none}
.sd-modal:has(.sd-mdemo:not([hidden])) .sd-mbody{--sd-h:min(calc(92vh - 250px), calc(94vw - 470px))}