/* ===========================================================
   /local/ 전국 나이트 동네 안내 — "강북 네온사인 + 동네 지도"
   기존 assets/style.css 를 그대로 상속하고, 이 파일에서만 확장한다.
   추가 모티프: 지도 핀 / 거리 라인 / 지역 그룹 카드
   =========================================================== */

:root{
  --map-line:#3a3140;
  --pin:#ff2f86;
  --road:#ffb020;
}

/* ---------- 섹션 배지 ---------- */
.local-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--road);
  color:var(--road);
  background:#150f13;
  font-size:12.5px;font-weight:900;letter-spacing:.06em;
  padding:5px 12px;margin:0 0 14px;
}
.local-badge::before{
  content:"";width:10px;height:10px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--pin);box-shadow:0 0 8px rgba(255,47,134,.9);
}

/* ---------- 거리 라인 (본문 구분선) ---------- */
.street{
  height:14px;margin:34px 0;position:relative;
  border-top:2px solid var(--map-line);
  border-bottom:2px solid var(--map-line);
  background:repeating-linear-gradient(90deg,var(--road) 0 22px,transparent 22px 44px);
  background-size:auto 3px;background-position:center;background-repeat:repeat-x;
  opacity:.8;
}

/* ---------- 동네 좌표 카드 (직답 박스 위) ---------- */
.pinbox{
  display:flex;gap:14px;align-items:flex-start;
  border:2px solid var(--map-line);
  background:linear-gradient(180deg,#17131a,#121014);
  padding:16px 16px 14px;margin:22px 0 0;
}
.pinbox .pin{
  flex:0 0 auto;width:26px;height:26px;margin-top:3px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(135deg,var(--orange),var(--pin));
  box-shadow:0 0 14px rgba(255,47,134,.55);
  position:relative;
}
.pinbox .pin::after{
  content:"";position:absolute;inset:8px;border-radius:50%;background:#0d0c0e;
}
.pinbox dl{margin:0;font-size:15px;line-height:1.75}
.pinbox dt{color:var(--txt-3);font-size:12px;font-weight:800;letter-spacing:.05em}
.pinbox dd{margin:0 0 8px;color:#efe7e1;font-weight:700}
.pinbox dd:last-child{margin-bottom:0}

/* ---------- 허브: 지역 그룹 ---------- */
.region{margin:34px 0 0}
.region > h2{
  display:flex;align-items:center;gap:10px;
  border-left:0;padding-left:0;margin-bottom:14px;
}
.region > h2::before{
  content:"";width:16px;height:16px;flex:0 0 auto;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--road);box-shadow:0 0 10px rgba(255,176,32,.7);
}
.region-count{font-size:13px;color:var(--txt-3);font-weight:700;letter-spacing:.02em}

ul.pinlist{list-style:none;margin:0;padding:0;position:relative}
ul.pinlist::before{
  content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;
  background:repeating-linear-gradient(180deg,var(--map-line) 0 7px,transparent 7px 14px);
}
ul.pinlist li{position:relative;margin:0 0 8px}
ul.pinlist a{
  display:block;padding:12px 14px 12px 30px;
  border:1px solid var(--map-line);background:#151217;
  color:#efe7e1;font-weight:800;font-size:15.5px;line-height:1.45;
}
ul.pinlist a::before{
  content:"";position:absolute;left:4px;top:18px;width:12px;height:12px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--pin);box-shadow:0 0 8px rgba(255,47,134,.8);
}
ul.pinlist a:hover{border-color:var(--pin);color:#fff;text-decoration:none}
ul.pinlist a em{
  display:block;font-style:normal;font-size:12.5px;color:var(--txt-3);
  font-weight:600;margin-top:3px;letter-spacing:.01em;
}
ul.pinlist a.home::before{background:var(--road);box-shadow:0 0 10px rgba(255,176,32,.85)}

/* ---------- 광고주 전화 고정 바 ---------- */
.fixbar.tel{
  background:linear-gradient(90deg,#ffb020,#ff6b1f);
  border-top:2px solid #ffe3b8;
  color:#1a0d02;
  letter-spacing:-.02em;
}

/* ---------- 이웃 동네 링크 ---------- */
.near{margin:36px 0 0}
.near h2{margin-top:0;font-size:20px;border-left-color:var(--road)}
.near ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.near a{
  display:block;padding:13px 15px;border:1px solid var(--map-line);background:#151217;
  color:#eee6e0;font-weight:700;font-size:15px;
}
.near a:hover{border-color:var(--road);color:#fff;text-decoration:none}
.near a span{display:block;font-size:12.5px;color:var(--txt-3);font-weight:600;margin-top:3px}

@media (max-width:420px){
  .pinbox{gap:11px;padding:14px}
  ul.pinlist a{font-size:15px}
}