/* 단지 3D 그림(complex3d.js). 밤 면 위에 놓는다. 색은 lm-tokens.css 변수만 쓴다.
   창 상태: on(켜짐·참여·열람) · yes(찬성) · no(반대) · invalid(무효) · off(꺼짐). 색만으로 가르지 않도록 범례에 수를 글로 함께 적는다 */
.c3 { display: block; width: 100%; height: auto; overflow: visible; }
.c3-site { fill: var(--lm-night-raised); stroke: var(--lm-night-line); stroke-width: 1; }
.c3-grid { stroke: var(--lm-night-line); stroke-width: 0.6; }
.c3-shadow { fill: rgba(0, 0, 0, 0.35); }
.c3-face-l { fill: var(--lm-pilaster); stroke: var(--lm-night); stroke-width: 0.6; }
.c3-face-r { fill: var(--lm-night-panel); stroke: var(--lm-night); stroke-width: 0.6; }
.c3-roof { fill: var(--lm-night-line); stroke: var(--lm-night-raised); stroke-width: 0.8; }
.c3-name { fill: var(--lm-night-ink-muted); font-family: var(--lm-font-ui); font-size: 10px; font-weight: 700; }
.c3-win { fill: var(--lm-window-off); transition: fill 600ms var(--lm-ease-out); }
.c3-win--side { opacity: 0.8; }
.c3-win.is-on, .c3-win.is-yes { fill: var(--lm-window); }
.c3-win.is-no { fill: var(--lm-window-cool); }
.c3-win.is-abstain { fill: var(--lm-night-ink-muted); }
.c3-win.is-invalid { fill: var(--lm-rail-danger); }
.c3-win.is-off { fill: var(--lm-window-off); }
/* 전용면적 네 구간(한빛아파트 그림): 밝기와 색 온도로 가르고 범례에 수를 글로 적는다 */
.c3-win.is-a1, .c3-swatch.is-a1 { fill: var(--lm-window-bright); background: var(--lm-window-bright); }
.c3-win.is-a2, .c3-swatch.is-a2 { fill: var(--lm-window); background: var(--lm-window); }
.c3-win.is-a3, .c3-swatch.is-a3 { fill: var(--lm-window-deep); background: var(--lm-window-deep); }
.c3-win.is-a4, .c3-swatch.is-a4 { fill: var(--lm-window-cool); background: var(--lm-window-cool); }

/* 그림 판: 그림 + 범례 + 돌리기 단추 */
.c3-panel { margin-block: 16px; padding: 20px 24px 24px; border: 1px solid var(--lm-night-line); border-radius: 18px; background: var(--lm-night); color: var(--lm-night-ink); }
.c3-stage .c3 { max-width: 760px; max-height: 420px; margin-inline: auto; }
.ops-grid .c3-panel { margin-top: 0; }
.c3-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.c3-panel__title { margin: 0; color: var(--lm-night-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.c3-panel__tabs { display: flex; gap: 6px; }
.c3-panel__tabs button, .c3-rotate {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--lm-night-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lm-night-ink-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.c3-panel__tabs button[aria-pressed="true"] { border-color: var(--lm-window); background: var(--lm-window); color: var(--lm-night); }
.c3-panel__tabs button:focus-visible, .c3-rotate:focus-visible { outline: var(--lm-focus-ring-dark); outline-offset: 2px; }
.c3-panel__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 40px; align-items: center; margin-top: 16px; }
.c3-summary { display: grid; align-content: start; gap: 12px; }
.c3-summary__title { margin: 0; color: var(--lm-night-ink); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }
.c3-summary__title:empty { display: none; }
.c3-summary__declared { margin: 0; color: var(--lm-window-bright); font-size: 14px; font-weight: 600; }
.c3-summary .c3-rotate { justify-self: start; margin-top: 8px; }
.c3-legend { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-night-line); }
.c3-legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 48px; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--lm-night-line); font-size: 14px; }
.c3-legend .c3-swatch { align-self: center; }
.c3-legend b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.c3-legend__pct { color: var(--lm-night-ink-muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .c3-panel__body { grid-template-columns: minmax(0, 1fr); }
}
.c3-swatch { width: 14px; height: 10px; border-radius: 2px; background: var(--lm-window-off); }
.c3-swatch.is-on, .c3-swatch.is-yes { background: var(--lm-window); }
.c3-swatch.is-no { background: var(--lm-window-cool); }
.c3-swatch.is-abstain { background: var(--lm-night-ink-muted); }
.c3-swatch.is-invalid { background: var(--lm-rail-danger); }
.c3-swatch.is-off { box-shadow: inset 0 0 0 1px var(--lm-night-line); }
.c3-swatch.is-shop { background: var(--lm-draft-grid-major); box-shadow: inset 0 0 0 2px var(--lm-signal); }
.c3-shop { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0 0; color: var(--lm-night-ink-muted); font-size: 13px; line-height: 1.55; }
.c3-shop .c3-swatch { margin-top: 3px; }
.c3-shop b { color: var(--lm-night-ink); font-weight: 800; margin-right: 6px; }
.c3-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--lm-night-line); color: var(--lm-night-ink-muted); font-size: 12.5px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .c3-win { transition: none; }
}

/* 끌어서 돌리는 단지 그림(complex-orbit.js). 캔버스 위에 정보 창·확대 판·전체 보기 단추를 겹친다 */
.c3o { position: relative; }
.c3o__canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 600px; touch-action: none; cursor: grab; border-radius: 8px; }
.c3o__canvas.is-pointing { cursor: pointer; }
.c3o__canvas.is-dragging { cursor: grabbing; }
.c3o__canvas:focus-visible { outline: var(--lm-focus-ring-dark); outline-offset: 2px; }
.c3o__hint { margin: 8px 0 0; color: var(--lm-night-ink-muted); font-size: 12.5px; }
.c3o__tip {
  position: absolute; left: 0; top: 0; transform: translate(var(--tx, 0), var(--ty, 0));
  width: 300px; padding: 12px 14px; pointer-events: none; z-index: 2;
  background: var(--lm-night-panel); border: 1px solid var(--lm-night-line); border-radius: 8px;
  color: var(--lm-night-ink);
}
.c3o__tip[hidden], .c3o__back[hidden], .c3o__detail[hidden] { display: none; }
.c3o__back {
  position: absolute; top: 12px; left: 12px; z-index: 3; min-height: 40px; padding: 0 14px;
  background: var(--lm-window); color: var(--lm-ink-black); border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.c3o__back:focus-visible { outline: var(--lm-focus-ring-dark); outline-offset: 2px; }
.c3o__detail {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: min(300px, 46%); padding: 14px 16px;
  background: var(--lm-night-panel); border: 1px solid var(--lm-night-line); border-radius: 8px; color: var(--lm-night-ink);
}
.c3o-tip__title, .c3o-info__title { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.c3o-info__title { font-size: 17px; }
.c3o-tip__rows, .c3o-info__rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.c3o-tip__rows dt, .c3o-info__rows dt { color: var(--lm-night-ink-muted); }
.c3o-tip__rows dd, .c3o-info__rows dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c3o-tip__note, .c3o-info__note { margin: 10px 0 0; color: var(--lm-night-ink-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) {
  .c3o__detail { position: static; width: auto; margin-top: 8px; }
}