/* /site/<슬러그>/ — 현장별 페이지 */

.crumb {
  font-size: 12.5px;
  color: var(--steel);
  margin-bottom: 14px;
}
.crumb a {
  color: var(--steel);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--orange-deep);
  text-decoration: underline;
}

.sitename {
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.25;
  margin-bottom: 6px;
}
.siteaddr {
  font-size: 15px;
  color: var(--steel);
  margin-bottom: 12px;
}
.badge {
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
}

/* ── 개요 ── */
.facts {
  background: var(--concrete);
}
.factgrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  align-items: start;
}
.factmain h2,
.guide h2,
.neigh h2 {
  font-size: clamp(18px, 2.3vw, 23px);
  margin-bottom: 14px;
}
.ftable {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
}
.ftable th,
.ftable td {
  padding: 11px 14px;
  font-size: 14.5px;
  text-align: left;
  border-bottom: 1px solid #eceded;
  vertical-align: top;
}
.ftable tr:last-child th,
.ftable tr:last-child td {
  border-bottom: 0;
}
.ftable th {
  width: 132px;
  background: #f7f7f6;
  color: #44474c;
  font-weight: 500;
  white-space: nowrap;
}

.factside {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.factside h3 {
  font-size: 14.5px;
  color: var(--steel);
  margin-bottom: 8px;
}
.factside .big {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 30px;
  color: var(--orange-deep);
  line-height: 1.2;
  margin-bottom: 10px;
}
.factside .small {
  font-size: 13.5px;
  line-height: 1.7;
  color: #33363b;
}
.factside .alert {
  margin-top: 11px;
  padding: 10px 12px;
  background: #f6efff;
  border-left: 3px solid #8e24aa;
  font-size: 13px;
  line-height: 1.6;
}
.factside .note-ok {
  margin-top: 11px;
  padding: 10px 12px;
  background: #eef7f1;
  border-left: 3px solid var(--ok);
  font-size: 13px;
  line-height: 1.6;
}
.factside .tiny {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #eceded;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--steel);
}

/* ── 안내 ── */
.lead-s {
  font-size: 14.5px;
  color: var(--steel);
  margin-bottom: 16px;
}
.glist {
  list-style: none;
  counter-reset: g;
  margin-bottom: 24px;
}
.glist li {
  counter-increment: g;
  position: relative;
  padding: 15px 0 15px 46px;
  border-top: 1px solid var(--line);
}
.glist li:first-child {
  border-top: 0;
}
.glist li::before {
  content: counter(g);
  position: absolute;
  left: 0;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.glist b {
  display: block;
  font-size: 15.5px;
  margin-bottom: 5px;
}
.glist span {
  font-size: 14.5px;
  line-height: 1.75;
  color: #33363b;
}

/* ── 인근 현장 ── */
.neigh {
  background: var(--concrete);
}
.nlist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.nlist a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 13px 15px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s;
}
.nlist a:hover {
  border-color: var(--orange);
}
.nlist b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nlist span {
  font-size: 12.5px;
  color: var(--steel);
}
.more a {
  font-size: 14px;
  color: var(--orange-deep);
  font-weight: 700;
  text-decoration: none;
}
.more a:hover {
  text-decoration: underline;
}
.notice-sect {
  padding-top: 0;
}

@media (max-width: 820px) {
  .factgrid {
    grid-template-columns: 1fr;
  }
  .ftable th {
    width: 96px;
  }
}

/* ── 위치도 · 로드뷰 ── */
.locsect {
  padding-bottom: 0;
}
.locbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.locmsg {
  font-size: 13.5px;
  color: var(--steel);
}
.btn-sm {
  padding: 8px 15px;
  font-size: 13.5px;
}
#locmap {
  width: 100%;
  height: 400px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #eceded;
}
#rvwrap {
  margin-top: 12px;
}
#roadview {
  width: 100%;
  height: 360px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: #1b1d21;
}
@media (max-width: 820px) {
  /* 여기가 지적경계(필지 도면)를 보는 자리다. 작으면 볼 이유가 없어진다.
     화면 높이의 60% 를 주되 300~560px 사이로 묶는다. */
  #locmap {
    height: clamp(300px, 60vh, 560px);
  }
  #roadview {
    height: clamp(260px, 45vh, 420px);
  }
}

/* 현장 페이지 → 지도로 돌아가는 문.
   제목 오른쪽에 두어, 지도에서 넘어온 사람이 곧장 되돌아갈 수 있게 한다. */
.sitehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.backmap {
  flex: none;
  margin-top: 4px;
  padding: 11px 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  border-left: 3px solid var(--orange);
}
.backmap:hover {
  background: var(--orange);
}
@media (max-width: 640px) {
  .sitehead {
    flex-direction: column;
    gap: 12px;
  }
  .backmap {
    margin-top: 0;
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* ═══ 지역 목록(허브) 페이지 — 2026-08-17 ═══
   전국 → 시도 → 시군구 → 현장 으로 내려가는 계단.
   크롤러가 타고 다닐 길이면서, 사람에게도 「우리 동네」를 찾는 입구다. */
.hubstat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 14px;
  padding: 0;
  list-style: none;
}
.hubstat li {
  background: var(--concrete);
  border: 1px solid var(--line);
  padding: 12px 10px;
  text-align: center;
}
.hubstat b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  word-break: keep-all;
}
.hubstat span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--steel);
}
.hubh2 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 7px;
}
.hubh2 em {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--steel);
}
/* 시도·시군구 카드는 여러 줄로 촘촘히 — 목록이 길어 한 줄씩이면 끝없이 내려간다 */
.hubgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
@media (max-width: 640px) {
  .hubstat {
    grid-template-columns: 1fr 1fr;
  }
  .hubstat b {
    font-size: 18px;
  }
  .hubgrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══ 건물 덩어리 그림 — 2026-08-18 ═══
   지적 경계를 불러온 뒤에 그린다. 지도 상세 카드·검수 화면과 같은 그리기
   (assets/massing.js)를 쓰므로 색·모양 규칙은 map.css 쪽에 있다. */
.sitemass {
  margin-top: 14px;
  background: #f4f6f8;
  border: 1px solid var(--line);
  padding: 10px;
}
.sitemass:empty {
  display: none;
}
.sitemass::after {
  content: attr(data-note) " · 모양만 보여주는 그림입니다";
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--steel);
  word-break: keep-all;
}
/* ⚠️ 그림칸의 **폭**을 묶는다. 높이로 묶으면 안 된다 (2026-08-18).
   massing.js 가 뽑는 SVG 는 viewBox 가 정사각(0 0 46 46)이다. 현장 페이지
   본문은 1,000px 이 넘어서, width:100% + max-height 로 두면 1014×190 짜리
   납작한 상자가 되고 그 안에 정사각 그림이 letterbox 로 들어가 **가운데에
   손톱만 하게** 그려진다(실측). 폭을 묶으면 height:auto 가 정사각을 따라와
   그림이 상자를 가득 채운다. */
/* ⚠️ 380px 이었다. 필지 하나만 그릴 때는 그것으로 충분했는데, 2026-08-19
   부터 옆 필지와 도로까지 같이 그려서 담을 것이 많아졌다. 조금 넓힌다.
   (그림틀은 정사각형이라 더 키우면 위아래 여백만 늘어난다) */
#siteMass,
.sitemass .dmass {
  max-width: 520px;
}
#siteMass .mssvg,
.sitemass .mssvg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
}
.masscap {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--steel);
  word-break: keep-all;
}
.masscap b {
  color: #3d434b;
}