/* ─────────────────────────────────────────────────────────────────────────
 * massing.css — 건물 덩어리 그림의 색과 모양
 *
 * ⚠️ assets/massing.js 를 부르는 곳은 **이 파일도 같이** 불러야 한다.
 *    지금 쓰는 곳 셋: 지도 상세 카드(/map/) · 현장 페이지(/site/…) · 검수(/lab/massing/)
 *    2026-08-18 에 map.css 에서 빼냈다 — 현장 페이지는 map.css 를 안 부르는데
 *    그림만 그려 놓으니 색이 하나도 안 입혀졌다.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── 본건 덩어리 그림 (massing.js) ──
   필지 위에 층수만큼 세운 모양. 금액은 넣지 않는다 —
   계획과 실제가 다르기 때문이다(토니 2026-08-16). */
.dmass {
  margin-top: 12px;
  background: #f4f6f8;
  border: 1px solid var(--line);
  padding: 8px;
}
.dmass:empty {
  display: none;
}
.dmass::after {
  content: attr(data-note) " · 모양만 보여주는 그림입니다";
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--steel);
  word-break: keep-all;
}
.mssvg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  margin: 0 auto;
}
.ms-land {
  fill: #dfe4ea;
  stroke: #3d434b;
  stroke-width: 1;
  stroke-linejoin: round;
}
.ms-floor {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 0.35;
}
/* 신축 — 지도 마커와 같은 빨강 */
.dmass.red .ms-wall {
  fill: #c0392b;
  stroke: #7b1f16;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.dmass.red .ms-wall.l {
  fill: #9d2c20;
}
.dmass.red .ms-wall.r {
  fill: #d8503c;
}
.dmass.red .ms-roof {
  fill: #e05f49;
  stroke: #7b1f16;
  stroke-width: 0.55;
  stroke-linejoin: round;
}
/* 대수선 — 파랑 */
.dmass.blue .ms-wall {
  fill: #2a6db5;
  stroke: #17406d;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.dmass.blue .ms-wall.l {
  fill: #1f5695;
}
.dmass.blue .ms-wall.r {
  fill: #3d84cf;
}
.dmass.blue .ms-roof {
  fill: #4f95dc;
  stroke: #17406d;
  stroke-width: 0.55;
  stroke-linejoin: round;
}
/* 철거 — 회색 */
.dmass.grey .ms-wall {
  fill: #5b6169;
  stroke: #2b3037;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.dmass.grey .ms-wall.l {
  fill: #474d54;
}
.dmass.grey .ms-wall.r {
  fill: #71787f;
}
.dmass.grey .ms-roof {
  fill: #838a92;
  stroke: #2b3037;
  stroke-width: 0.55;
  stroke-linejoin: round;
}

html.embed .mssvg {
  max-height: 130px;
}

/* 상세 카드 그림의 배경 — 옆 필지와 도로 */
.ms-near {
  fill: #eceff2;
  stroke: #b6bcc3;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.ms-road {
  fill: #ffd54a;
  fill-opacity: 0.45;
  stroke: #d9a800;
  stroke-width: 0.45;
  stroke-linejoin: round;
}

/* ═══ 돌리고 확대하는 큰 도면 (회전가능:true) — 2026-08-18 ═══ */
.dmass.spin {
  position: relative;
  cursor: grab;
  touch-action: none; /* 지도·페이지가 제스처를 가로채지 않게 */
  user-select: none;
}
.dmass.spin.grabbing {
  cursor: grabbing;
}
/* 스크롤되는 칸(상세 카드) 안의 작은 도면.
   ⚠️ touch-action:none 이면 도면 위에서 손가락을 세로로 쓸 때 카드가 안
      내려간다. pan-y 로 두고, 가로로 갈 때만 massing.js 가 잡아 돌린다.
      (토니 2026-08-19 "조그만 도면을 돌아가게 할 수 있어??") */
.dmass.spin.spin-card {
  touch-action: pan-y;
}
.dmass.spin .mssvg {
  max-height: none;
}
/* 옆 건물 — 속을 채우지 않고 외곽선만. 채우면 본건이 묻힌다 */
.nb-base,
.nb-floor,
.nb-top {
  fill: none;
  stroke: #9aa1a9;
  stroke-width: 0.35;
  stroke-linejoin: round;
}
.nb-top {
  fill: #ffffff;
  fill-opacity: 0.5;
  stroke: #7d858e;
  stroke-width: 0.45;
}
.nb-base {
  stroke: #7d858e;
  stroke-width: 0.45;
}
.nb-edge {
  stroke: #9aa1a9;
  stroke-width: 0.35;
}
/* 나침반 — 돌리면 같이 돈다 */
.mscompass {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 58px;
  height: 58px;
  pointer-events: none;
}
.mscompass svg {
  width: 100%;
  height: 100%;
}
.mscompass .cc-bg {
  fill: rgba(255, 255, 255, 0.82);
  stroke: #d8d9db;
  stroke-width: 1.5;
}
.mscompass .cc-n {
  stroke: #f4581c;
  stroke-width: 3;
  stroke-linecap: round;
}
.mscompass .cc-t {
  font-size: 15px;
  font-weight: 700;
  fill: #6b6e73;
}
.mscompass .cc-t.on {
  fill: #1b1d21;
}

/* ═══════════════ 겉모습 — 외벽 재질과 창 ═══════════════
   ⚠️ **설계가 아니다.** 창의 개수·크기는 기둥 간격(3m 안팎)에서 기계적으로
      나눈 것이고, 실제 건물이 이렇게 생겼다는 뜻이 아니다.
      덩어리만 있는 회색 상자를 사람이 건물로 못 읽어서 넣은 것이다.
   ⚠️ 색은 「멋있게」가 아니라 **면이 갈라져 보이게** 쓴다. 왼쪽 면은 어둡게,
      오른쪽 면은 밝게 — 그래야 입체로 읽힌다. */

/* 유리(커튼월·1층 상가) */
.ms-glass {
  fill: #6aa9d8;
  stroke: none;
}
.ms-glass.l {
  fill: #4b83b0;
}
.ms-glass.r {
  fill: #86c3ea;
}
/* 보통 창 */
.ms-win {
  fill: #46545f;
  stroke: none;
}
.ms-win.l {
  fill: #37444e;
}
.ms-win.r {
  fill: #55677a;
}
/* 기둥선 — 커튼월이 유리처럼 읽히게 */
.ms-mull {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.16;
}

/* 「모던」 — 로드뷰 옆에 세우는 신축 그림. 콘크리트·석재 느낌의 중간 회색 */
.dmass.real .ms-wall {
  fill: #b6bdc5;
  stroke: #7d858e;
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.dmass.real .ms-wall.l {
  fill: #99a2ad;
}
.dmass.real .ms-wall.r {
  fill: #ccd2d8;
}
.dmass.real .ms-roof {
  fill: #dde2e7;
  stroke: #7d858e;
  stroke-width: 0.55;
  stroke-linejoin: round;
}
.dmass.real .ms-floor {
  stroke: rgba(255, 255, 255, 0.5);
}