/*
  주변 시설 및 커뮤니티 — 계산기 공통 섹션 (docs/nearby-facilities.md)

  마크업은 /nearby.js가 만든다. 앞쪽은 골격(섹션 여백·탭 줄·목록 리듬·모달),
  뒤쪽 「카드 생김새」부터가 채택한 ①안(타일)이다 — 실험실의 base.css + v1.css를
  한 벌로 합친 것이고, 세 안의 비교는 nearby-lab/에 그대로 남아 있다.
*/
.nearby .nb-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;
}
.nearby .nb-tab{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--sub);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; line-height:1.2;
  transition:background .15s, color .15s, border-color .15s;
}
.nearby .nb-tab i{
  font-style:normal; font-size:13.5px; font-weight:800; color:#b6bcc6;
  font-variant-numeric:tabular-nums;
}
.nearby .nb-tab:hover{border-color:#c9d2e0; color:var(--txt);}
.nearby .nb-tab.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.nearby .nb-tab.on i{color:rgba(255,255,255,.72);}
.nearby .nb-tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.nearby .nb-grid{display:grid; gap:16px;}
.nearby .nb-card[hidden]{display:none;}

.nearby .nb-cat{
  font-size:13px; font-weight:800; letter-spacing:.06em; line-height:1.2;
  color:var(--accent); margin:0 0 7px;
}
.nearby .nb-title{font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.4;
  word-break:keep-all;}
.nearby .nb-statlbl{font-size:14px; color:var(--sub); margin-top:5px; line-height:1.55;
  word-break:keep-all;}
.nearby .nb-stat{font-variant-numeric:tabular-nums; letter-spacing:-.03em;}

.nearby .nb-items{list-style:none; margin:0; padding:0;}
.nearby .nb-items li{font-size:15.5px; line-height:1.7; word-break:keep-all;}

/* 공고문에서 옮겨 온 문장에는 띄어쓰기가 없는 긴 덩어리가 섞여 있다
   (`건축물가액에토지가액이포함되지않는비주거용건축물…`). `word-break:keep-all`만
   두면 이 덩어리를 어디서도 끊지 못해 칸 밖으로 흘러 나가고, 981px 이상에서
   목록이 두 단(`columns:2`)이라 **옆 단 글자와 겹쳐** 읽힌다. 띄어쓰기가 있는
   보통 문장은 그대로 어절 단위로 끊기고, 넘칠 때만 아무 자리에서 끊는다
   (2026-08-30). */
.nearby .nb-lead,
.nearby .nb-items li,
.nearby .nb-note,
.nb-modal .nb-dialog-lead,
.nb-modal .nb-quote{overflow-wrap:anywhere;}
.nearby .nb-note{font-size:14.5px; line-height:1.75; color:var(--sub);}
.nearby .nb-note b{color:#3c4553; font-weight:700;}
.nearby .nb-src{font-size:14px; color:#b0b7c3; font-weight:600;}
.nearby .nb-foot{
  margin-top:30px; font-size:14px; line-height:1.8; color:#8b95a7;
  padding-top:22px; border-top:1px solid var(--line);
}
.nearby .nb-foot b{color:#6b7684; font-weight:700;}

/* 탭을 바꿀 때 카드가 '갈아 끼워졌다'는 걸 아주 짧게만 알린다 */
@media (prefers-reduced-motion:no-preference){
  .nearby .nb-grid.is-swap .nb-card{animation:nbIn .26s ease both; animation-delay:calc(var(--i,0) * 18ms);}
  @keyframes nbIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
}

@media (max-width:640px){
  .nearby .nb-tabs{
    /* 탭이 두 줄로 접히면 카드보다 커 보인다 — 좁은 화면에선 옆으로 민다 */
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:-16px; margin-right:-16px; padding:0 16px 2px;
  }
  .nearby .nb-tabs::-webkit-scrollbar{display:none;}
  .nearby .nb-tab{flex:0 0 auto;}
}

/* ── 머리말 · 카드 발치 줄 ─────────────────────────────────────── */
.nearby .nb-lead{
  margin:-2px 0 24px; font-size:14.5px; line-height:1.8; color:var(--sub);
  word-break:keep-all;
}
.nearby .nb-foot-row{
  display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap;
}
.nearby .nb-src{min-width:0;}
/* 출처가 길어 줄이 접혀도 「공고문 원문」은 늘 오른쪽 끝에 붙는다 —
   space-between이면 버튼만 남은 줄에서 왼쪽으로 떨어진다(auto 여백이 그 줄을 밀어준다) */
.nearby .nb-more{
  margin-left:auto;
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--accent);
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:-.02em;
  padding:5px 11px; border-radius:8px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
  transition:background .15s, border-color .15s;
}
.nearby .nb-more .nb-arrow{width:12px; height:12px; flex:0 0 auto; transition:transform .15s;}
.nearby .nb-more:hover .nb-arrow{transform:translate(1px,-1px);}
.nearby .nb-more:hover{background:var(--accent-bg); border-color:#bcd0f7;}
.nearby .nb-more:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ── 모달 — 카드에 다 못 담은 공고문 원문 ────────────────────────── */
.nb-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;}
.nb-modal[hidden]{display:none;}
.nb-modal .nb-dim{position:absolute; inset:0; background:rgba(16,20,28,.52);}
/* 모달 전체가 하나의 스크롤 영역이다 — 제목·안내·광고를 화면에 붙박아 두지 않는다.
   좁은 화면일수록 그만큼이 정작 읽을 원문 자리를 잡아먹기 때문이고,
   PC·태블릿에서도 같은 이유로 함께 굴린다. */
.nb-modal .nb-dialog{
  position:relative; width:min(720px,calc(100vw - 40px)); max-height:min(84vh,760px);
  display:flex; flex-direction:column; background:#fff; border-radius:16px;
  box-shadow:0 24px 60px rgba(16,20,28,.28); padding:36px 40px 30px;
  font-family:"SUIT Variable","Pretendard","Apple SD Gothic Neo",sans-serif;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nb-modal .nb-dialog:focus{outline:none;}
.nb-modal .nb-dialog-head{display:flex; align-items:flex-start; gap:14px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.nb-modal .nb-dialog-head h3{font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.4; color:var(--txt);}
.nb-modal .nb-dialog-lead{margin-top:11px; font-size:14.5px; line-height:1.8; color:var(--sub); word-break:keep-all;}
.nb-modal .nb-close{
  flex:0 0 auto; width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--sub); font-size:15px; cursor:pointer; line-height:1;
}
.nb-modal .nb-close:hover{background:#f5f6f8; color:var(--txt);}
/* 인용문 — 관통 레일(2026-08-29, quote-lab ⑤안). 앞서는 문단마다 연한 배경 상자에
   둥근 모서리와 왼쪽 컬러바를 둘렀는데, 같은 상자가 대여섯 번 반복돼 공고문 원문이
   아니라 찍어낸 카드처럼 읽혔다. 지금은 상자를 버리고 **원문 전체를 관통하는 세로선
   하나**에 문단마다 점을 찍는다 — 같은 공고문에서 이어 온 문장들이라는 관계가 선
   하나로 드러난다. 점은 흰 속에 2px 테두리라 선 위에 얹힌 것처럼 보인다.
   상자가 사라진 만큼 글이 여백에 기대므로, 대화상자 안쪽·머리·광고 칸·발치까지
   한 단계씩 벌려 옵션 카드(44px 패딩)와 호흡을 맞췄다. */
.nb-modal .nb-dialog-body{position:relative; padding:32px 4px 12px 30px;}
.nb-modal .nb-dialog-body::before{      /* 레일 — 첫 점의 중심에서 시작한다 */
  content:''; position:absolute; left:5px; top:47px; bottom:24px;
  width:1px; background:#e3e8f0;
}
.nb-modal .nb-quote{
  position:relative; padding:0 0 0 18px; margin:0 0 30px;
  font-size:16px; line-height:1.95; color:#39424f; letter-spacing:-.01em;
  word-break:keep-all;
}
.nb-modal .nb-quote:last-child{margin-bottom:6px;}
.nb-modal .nb-quote::before{
  content:''; position:absolute; left:-30px; top:10px; box-sizing:border-box;
  width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid #bfcde4;
}
.nb-modal .nb-dialog-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:26px; margin-top:14px; border-top:1px solid var(--line);
}
.nb-modal .nb-dialog-src{font-size:13.5px; color:#98a1af; font-weight:600; min-width:0;}
.nb-modal .nb-close-btn{
  flex:0 0 auto; appearance:none; border:1px solid var(--line); background:#fff;
  color:var(--txt); font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
  padding:8px 18px; border-radius:9px; cursor:pointer; transition:background .15s, border-color .15s;
}
.nb-modal .nb-close-btn:hover{background:#f5f6f8; border-color:#c9d2e0;}
.nb-modal .nb-close-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@media (max-width:640px){
  .nb-modal .nb-dialog{width:calc(100vw - 20px); max-height:88vh; padding:26px 20px 22px; border-radius:14px;}
  .nb-modal .nb-dialog-head{padding-bottom:20px;}
  .nb-modal .nb-dialog-head h3{font-size:18.5px;}
  .nb-modal .nb-dialog-body{padding:26px 2px 10px 24px;}
  .nb-modal .nb-dialog-body::before{top:40px; bottom:20px;}
  .nb-modal .nb-quote{font-size:15.5px; padding-left:14px; margin-bottom:24px;}
  .nb-modal .nb-quote::before{left:-24px; top:9px;}
  .nb-modal .nb-dialog-foot{padding-top:20px; margin-top:10px;}
}

/* 형광펜은 페이지 공통 클래스(.kp)를 그대로 쓴다 — 카드 안에서 줄 간격만 지킨다 */
.nearby .nb-items .kp, .nearby .nb-note .kp{ -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.nearby .nb-note .kp{ color:#2f3a4a; }

/* ── 광고 자리 ─────────────────────────────────────────────────────
   이 섹션의 칸은 `od-adfit-slot` 클래스를 쓰지 않는다 — 쓰면 async로 늦게 오는
   adfit.js가 「이미 배치됨」으로 보고 페이지의 다른 광고를 전부 포기한다
   (nearby.js의 adSlot 주석). 그래서 크기·기기별 노출을 여기서 직접 정한다.
   값은 사이트 규칙과 같다 — 320×50, 경계는 adfit.js와 같은 `.99`.
   `ins.kakao_ad_area`에는 아무 CSS도 걸지 않는다 — width·transform을 걸면 그 칸이
   아예 안 그려진다(docs/ads-adfit.md 실험 5). 상자(div)만 만진다.

   상자에 `overflow:hidden`을 두지 않는다(2026-08-29). 칸 폭(320px)과 소재 폭이
   딱 같아 여유가 0인데, 소수점 폭이나 다른 규격 소재가 오면 **조용히 잘린다** —
   같은 날 `.area-facts{overflow:hidden}`이 360px 폰에서 320px 소재를 273px로
   자른 것과 같은 성질의 면이다(docs/ads-adfit.md · tools/check-ad-render.js).
   넘치면 감추지 말고 보이게 두고, 넘침 자체는 렌더 검사로 잡는다. */
.nearby .nb-ad, .nb-modal .nb-ad-modal{
  width:320px; min-height:50px; margin:0 auto; text-align:center; line-height:0;
  grid-column:1 / -1; justify-self:center;
}
.nearby .nb-ad .kakao_ad_area{margin:0 auto;}
.nb-modal .nb-ad-modal{margin:26px auto 6px;}
.nearby .nb-ad[hidden]{display:none;}

/* 기기별 노출 — adfit.js와 같은 경계값(.99)을 쓴다 */
@media (min-width:981px){ .nearby .nb-ad.nb-ad-mobile{display:none;} }
@media (max-width:980.99px), (min-width:1770px){ .nearby .nb-ad.nb-ad-tablet{display:none;} }
@media (max-width:1769.99px){ .nearby .nb-ad.nb-ad-pc{display:none;} }

/* 로컬 자리 표시 — adfit.js가 localhost에서 켜는 `.od-ad-debug`에 얹는다 */
.od-ad-debug .nb-ad{outline:2px dashed #e11; background:#fff6f6;}
.od-ad-debug .nb-ad::before{
  content:attr(data-ad-label); display:block; padding:8px 4px;
  font:11px/1.5 -apple-system,sans-serif; color:#e11; word-break:break-all;
}

/* 404px 미만에서는 카드 안쪽 폭(뷰포트 − 84px)이 320px보다 좁다.
   소재를 줄이지 않고(줄이면 렌더가 죽는다) 칸을 카드 좌우 패딩(24px)만큼
   밖으로 물려 320px 자리를 만든다 — adfit.js가 카드 안 칸에 쓰는 방식 그대로. */
@media (max-width:403.99px){
  .nearby .nb-ad{width:auto; margin-left:-24px; margin-right:-24px; justify-self:stretch;}
}

/* ── 카드 생김새 ────────────────────────────────────────────────────
   카드 한 장이 한 줄을 통째로 쓴다. 공고문 문장을 줄이지 않고 그대로 실으니
   좁은 칸에 넣으면 넉 줄씩 접혀서다. 대신 문장 목록을 카드 안에서 두 단으로
   흘려 높이를 줄인다(981px 이상). 제목 옆 파란 알약(.nb-stat)은 쓰지 않는다 —
   같은 값이 부제와 목록에 이미 있어 두 번 읽힌다.

   머리는 **분류 캡션**이다(2026-08-29, nb-head-lab ③안). 앞서는 옅은 파란 라운드
   타일에 선 아이콘을 넣었는데, 어느 사이트에나 있는 기본값인 데다 카드마다 그림을
   하나씩 골라야 해서 같은 분류 안에서도 그림이 갈렸다. 캡션은 색을 **하나(--accent)**
   로 맞춘다 — 분류마다 색을 달리하면 탭 줄의 파랑과 어긋나 카드가 시끄러워진다.
   마크업이 한 줄로 흐르므로 격자는 한 칸이고, 행은 마크업 차례 그대로 쌓인다. */
.nearby .nb-grid{grid-template-columns:1fr; gap:16px;}

.nearby .nb-card{
  border:1px solid var(--line); border-radius:12px; background:#fff; padding:24px 22px 20px;
  display:grid; grid-template-columns:minmax(0,1fr);
  transition:border-color .15s, box-shadow .15s;
}
.nearby .nb-card:hover{border-color:#c9d2e0; box-shadow:0 4px 14px rgba(28,35,48,.06);}

/* 제목 옆 파란 알약(수치)은 쓰지 않는다 — 같은 값이 라벨과 목록에 이미 있다 */
.nearby .nb-stat{display:none;}

.nearby .nb-items{
  margin-top:18px; display:flex; flex-direction:column; gap:3px;
}
.nearby .nb-items li{padding-left:14px; position:relative; color:#3c4553; font-weight:600;}
.nearby .nb-items li + li{margin-top:12px;}
.nearby .nb-items li::before{
  content:''; position:absolute; left:2px; top:10px;
  width:4px; height:4px; border-radius:50%; background:#c9d2e0;
}

.nearby .nb-note{
  margin-top:22px; padding-top:16px; border-top:1px dashed var(--line);
}
.nearby .nb-foot-row{margin-top:18px;}

/* 본문 칸이 630px쯤 되는 PC에서만 문장 목록을 두 단으로.
   여백은 페이지 테마(카드 44px 패딩·행 28px)의 리듬에 맞춰 한 단계 넓게 잡는다 */
@media (min-width:981px){
  .nearby .nb-grid{gap:22px;}
  .nearby .nb-card{padding:30px 30px 26px;}
  .nearby .nb-items{display:block; columns:2; column-gap:38px; margin-top:24px;}
  .nearby .nb-items li{break-inside:avoid;}
  .nearby .nb-items li + li{margin-top:0;}
  .nearby .nb-items li{margin-bottom:12px;}
  .nearby .nb-note{margin-top:26px; padding-top:20px;}
  .nearby .nb-foot-row{margin-top:22px;}
  .nearby .nb-lead{margin-bottom:28px;}
  .nearby .nb-tabs{margin-bottom:30px;}
}