/* drive.ayo.pe.kr — 주차장·주유소·LPG충전소 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **도로 안내표지판 × 아스팔트 노면 × 주차권**. 운전 중에 "어디로 빠질지" 를 알려 주는 녹색 안내표지와
 * 노면 차선, 주차장 입구에서 뽑는 주차권을 화면 말투로 쓴다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-drive 아래로 가둔다. 마크업은 공유 템플릿 그대로 — CSS 만.
 *
 *   헤더   : 아스팔트 띠 + 노란 중앙 복선 · 상호는 녹색 안내표지(흰 테두리 안쪽 선)
 *   탭     : 파란 주차 안내표지판, 선택 시 녹색
 *   요약표 : 주차권 — 윗단 검은 자기띠, 왼쪽 절취 구멍
 *   질답   : 방향 표지 — 질문마다 녹색 화살표 판에 번호, 목록 왼쪽은 흰 점선 차로
 *   목록   : 주차면 — 칸마다 노란 주차선, 거리 칩은 녹색 거리표지
 *   지역   : 녹색 행선지 표지판 칩
 *   글꼴   : Nanum Gothic(표지판 굵기 800 · 본문 400)
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다 — 목록 배경은 li 에만 준다.
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 */

body.site-drive {
  --fg: #1b1e22;
  --fg-soft: #40464f;
  --muted: #6c737d;
  --line: #d4d8dd;
  --line-soft: #e6e9ec;
  --bg: #ffffff;
  --bg-soft: #f1f3f5;
  --accent: #00704a;          /* 안내표지 녹색 */
  --accent-strong: #005236;
  --accent-soft: #e2f2ea;
  --accent-wash: #f3faf6;
  --accent-line: #a9d6c0;
  --sign: #00704a;
  --info: #1d5aa8;            /* 주차 안내 파랑 */
  --asphalt: #2c2f33;
  --lane: #f5c400;            /* 노란 차선 */
  --radius: 6px;
  --wrap: 880px;
  background: #e9ebee;
  font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body.site-drive main,
body.site-drive .site-foot,
body.site-drive .ad-top,
body.site-drive .top-search { max-width: var(--wrap); }

body.site-drive h1,
body.site-drive .brand,
body.site-drive .site-head nav a,
body.site-drive .qa-item h2,
body.site-drive .near h2,
body.site-drive section.list > h2,
body.site-drive section.children > h2,
body.site-drive section.other-sites > h2,
body.site-drive .menu-cards li > a { font-weight: 800; }

/* ── 헤더: 아스팔트 + 노란 복선 ───────────────────────────────────────── */
body.site-drive .site-head {
  max-width: none;
  margin: 0;
  padding: 20px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 30px;
  border-bottom: 0;
  background:
    linear-gradient(var(--lane), var(--lane)) 0 calc(100% - 13px) / 100% 3px no-repeat,
    linear-gradient(var(--lane), var(--lane)) 0 calc(100% - 7px) / 100% 3px no-repeat,
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 5px 5px,
    var(--asphalt);
}
body.site-drive .brand {
  margin-right: auto;
  font-size: 21px;
  letter-spacing: -.3px;
  line-height: 1.2;
}
body.site-drive .brand a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 8px;
  background: var(--sign);
  color: #fff;
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff, 0 3px 0 rgba(0, 0, 0, .35);
}
/* 위쪽 화살표(직진) */
body.site-drive .brand a::before {
  content: "";
  width: 14px; height: 18px;
  flex: none;
  background: #fff;
  clip-path: polygon(50% 0, 100% 45%, 68% 45%, 68% 100%, 32% 100%, 32% 45%, 0 45%);
}
body.site-drive .brand a:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

/* 탭: 파란 안내판 */
body.site-drive .site-head nav { gap: 8px; }
body.site-drive .site-head nav a {
  padding: 7px 14px;
  border-radius: 5px;
  background: var(--info);
  color: #fff;
  font-size: 14.5px;
  box-shadow: inset 0 0 0 2px var(--info), inset 0 0 0 3.5px rgba(255, 255, 255, .9);
}
body.site-drive .site-head nav a:hover,
body.site-drive .site-head nav a.on {
  background: var(--sign);
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px #fff;
  color: #fff;
  text-decoration: none;
}

/* 검색 */
body.site-drive .top-search { margin-top: 16px; }
body.site-drive .site-search input[type="search"] {
  border: 2px solid var(--asphalt);
  border-radius: 6px;
  background: #fff;
}
body.site-drive .site-search button {
  border-radius: 6px;
  background: var(--sign);
  font-weight: 800;
}
body.site-drive .site-search button:hover { background: var(--accent-strong); }

/* ── 본문 ─────────────────────────────────────────────────────────────── */
body.site-drive main {
  margin-top: 16px;
  padding-top: 8px;
  padding-bottom: 28px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
body.site-drive .crumb { font-size: 13px; }
body.site-drive .crumb a { color: var(--fg-soft); }
body.site-drive .crumb a::after { content: " ›"; color: var(--sign); font-weight: 800; }

body.site-drive h1 {
  margin: 12px 0 20px;
  padding-bottom: 14px;
  font-size: 30px;
  letter-spacing: -.8px;
  line-height: 1.3;
  color: var(--fg);
  /* 흰 노면 점선 차선(회색 바탕 위) */
  background: repeating-linear-gradient(90deg, var(--asphalt) 0 26px, transparent 26px 42px) left bottom / 100% 4px no-repeat;
}
body.site-drive .lead { margin: 0 0 22px; color: var(--fg-soft); }
body.site-drive .data-date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 1px 10px;
  border-radius: 4px;
  background: var(--asphalt);
  color: #fff;
  font-size: 12.5px;
}

/* ── 요약표: 주차권 ──────────────────────────────────────────────────── */
body.site-drive .summary {
  position: relative;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(#1b1e22, #1b1e22) 0 0 / 100% 12px no-repeat,
    radial-gradient(circle at 0 50%, #e9ebee 6px, transparent 6.5px) 0 12px / 14px 22px repeat-y,
    #eef4fa;
  box-shadow: 0 0 0 1px #c9d6e3;
  font-size: 15px;
}
body.site-drive .summary tr:first-child th,
body.site-drive .summary tr:first-child td { padding-top: 22px; }
body.site-drive .summary tr + tr th,
body.site-drive .summary tr + tr td { border-top: 1px dashed #b7c7d8; }
body.site-drive .summary th {
  width: 110px;
  padding-left: 24px;
  background: transparent;
  color: var(--info);
  font-size: 13px;
  font-weight: 800;
}
body.site-drive .summary td { color: var(--fg); font-weight: 700; }
body.site-drive .btn { border-radius: 6px; }
body.site-drive .btn-phone {
  border: 2px solid var(--info);
  background: #fff;
  color: var(--info);
  font-weight: 800;
}
body.site-drive .btn-phone:hover { background: var(--info); color: #fff; }

/* ── 질답: 방향 표지 ─────────────────────────────────────────────────── */
body.site-drive .qa-head {
  font-size: 17px;
  font-weight: 800;
  color: var(--fg);
}
body.site-drive .qa-head::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 3px;
  background: var(--lane);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);   /* 마름모 주의표지 */
}
body.site-drive .qa-list {
  counter-reset: drq;
  position: relative;
  padding: 4px 18px 4px 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, #fff 0 18px, transparent 18px 32px) 11px 12px / 4px calc(100% - 24px) no-repeat,
    linear-gradient(var(--asphalt), var(--asphalt)) 0 0 / 26px 100% no-repeat,
    #fff;
  box-shadow: none;
}
body.site-drive .qa-item { counter-increment: drq; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
body.site-drive .qa-item h2 {
  align-items: flex-start;
  gap: 10px;
  font-size: 17px;
  letter-spacing: -.4px;
  color: var(--fg);
}
body.site-drive .qa-item h2::before {
  content: counter(drq);
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 14px 0 8px;
  background: var(--sign);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
body.site-drive .qa-item p { padding-left: 52px; color: var(--fg-soft); }

/* 지역 허브 질답(.qa 안에 .qa-list 가 없는 곳) */
body.site-drive section.qa:not(:has(.qa-list)) {
  padding: 4px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  counter-reset: drq;
}

/* ── 지도·주변 ───────────────────────────────────────────────────────── */
body.site-drive .mapsec-head { font-weight: 800; color: var(--fg); }
body.site-drive .map-canvas,
body.site-drive .pano-canvas { border-radius: 8px; border: 3px solid var(--asphalt); }
body.site-drive .near {
  border-top: 0;
  padding-top: 18px;
  background: linear-gradient(var(--lane), var(--lane)) 0 0 / 100% 3px no-repeat,
              linear-gradient(var(--lane), var(--lane)) 0 6px / 100% 3px no-repeat;
}
body.site-drive .near h2 {
  border-left: 0;
  padding-left: 0;
  font-size: 17.5px;
  letter-spacing: -.4px;
}
body.site-drive .near h2::before {
  content: "출구";
  display: inline-block;
  margin-right: 8px;
  padding: 0 7px;
  border-radius: 3px;
  background: var(--lane);
  color: #1b1e22;
  font-size: 12px;
  vertical-align: 2px;
}
body.site-drive .near > .near-block > p,
body.site-drive .near ul,
body.site-drive .near .more { padding-left: 0; }
body.site-drive .near li { padding: 3px 0; }
body.site-drive .dist {
  border-radius: 3px;
  background: var(--sign);
  color: #fff;
  font-weight: 800;
}

/* ── 목록: 주차면 ────────────────────────────────────────────────────── */
body.site-drive section.list > h2,
body.site-drive section.children > h2,
body.site-drive section.other-sites > h2 {
  font-size: 16px;
  color: var(--fg);
  border-bottom: 0;
  padding-bottom: 0;
}
body.site-drive .place-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
body.site-drive .place-list li:not(.ad-row) {
  position: relative;
  padding: 16px 16px 14px 18px;
  border-bottom: 0;
  background: #f1f2f4;
  border-left: 4px solid var(--lane);
  border-top: 4px solid var(--lane);
}
body.site-drive .place-list li:not(.ad-row):nth-child(2n) { border-right: 4px solid var(--lane); }
body.site-drive .place-list li:not(.ad-row)::after {
  content: "P";
  position: absolute;
  right: 12px; top: 10px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--info);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: .9;
}
body.site-drive .place-list li > a { color: var(--fg); padding-right: 28px; }
body.site-drive .place-list li:not(.ad-row):hover { background: var(--accent-wash); }
body.site-drive .place-list li.ad-row { grid-column: 1 / -1; padding: 8px 0; border: 0; }
body.site-drive .cat {
  border-radius: 3px;
  background: var(--info);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

/* 지역·조건·다른 사이트: 녹색 행선지 표지 */
body.site-drive .region-links { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.site-drive .region-links li {
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--sign);
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
}
body.site-drive .region-links li:hover { background: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent-strong), inset 0 0 0 3.5px #fff; }
body.site-drive .region-links li > a { color: #fff; font-weight: 800; }
body.site-drive .region-links .count { color: #cfeadc; }

/* 홈: 대형 안내표지 */
body.site-drive .menu-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
body.site-drive .menu-cards li {
  position: relative;
  padding: 26px 20px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--info);
  box-shadow: inset 0 0 0 4px var(--info), inset 0 0 0 6px #fff, 0 4px 0 #173f75;
}
body.site-drive .menu-cards li:first-child { background: var(--info); }
body.site-drive .menu-cards li:nth-child(n+2) { background: var(--sign); box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px #fff, 0 4px 0 #003d27; }
body.site-drive .menu-cards li::after {
  content: "";
  position: absolute;
  right: 18px; top: 16px;
  width: 22px; height: 18px;
  background: #fff;
  clip-path: polygon(0 32%, 60% 32%, 60% 0, 100% 50%, 60% 100%, 60% 68%, 0 68%);
}
body.site-drive .menu-cards li:hover { filter: brightness(1.08); }
body.site-drive .menu-cards li > a { color: #fff; font-size: 21px; letter-spacing: -.5px; }
body.site-drive .menu-cards .count { color: rgba(255, 255, 255, .85); font-weight: 700; }

/* ── 출처·삭제요청·바닥 ───────────────────────────────────────────────── */
body.site-drive .source { border-top: 3px solid var(--asphalt); }
body.site-drive .removal {
  border: 2px solid var(--info);
  border-radius: 10px;
  background: #f1f6fc;
}
body.site-drive .removal::before { display: none; }
body.site-drive .removal-icon {
  border-radius: 0;
  background: var(--lane);
  color: #1b1e22;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: 10px;
}
body.site-drive .btn-removal { background: var(--info); box-shadow: none; }
body.site-drive .btn-removal:hover { background: #154481; }

body.site-drive .site-foot {
  max-width: none;
  margin-top: 30px;
  padding: 28px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 36px;
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, #fff 0 40px, transparent 40px 70px) 0 10px / 100% 4px no-repeat,
    var(--asphalt);
  color: #cdd1d6;
  font-size: 13px;
}
body.site-drive .site-foot a { color: var(--lane); }

@media (max-width: 600px) {
  body.site-drive .site-head { padding: 16px 16px 28px; }
  body.site-drive .brand { font-size: 18px; }
  body.site-drive main { border-radius: 0; margin-top: 12px; }
  body.site-drive h1 { font-size: 25px; }
  body.site-drive .summary th { width: 88px; padding-left: 20px; }
  body.site-drive .qa-list { padding: 2px 12px 2px 34px; }
  body.site-drive .qa-item p { padding-left: 0; }
  body.site-drive .place-list { grid-template-columns: 1fr; }
  body.site-drive .place-list li:not(.ad-row) { border-right: 4px solid var(--lane); }
  body.site-drive .region-links { grid-template-columns: 1fr 1fr; }
  body.site-drive .site-foot { padding-inline: 16px; }
}

/* ── 다크 모드: 야간 도로(반사 표지) ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-drive {
    --fg: #eceff2;
    --fg-soft: #c3c9d0;
    --muted: #939aa4;
    --line: #353a40;
    --line-soft: #2a2e33;
    --bg: #1b1e22;
    --bg-soft: #24282d;
    --accent: #46c08e;
    --accent-strong: #6fd6ab;
    --accent-soft: #173327;
    --accent-wash: #16261f;
    --accent-line: #2a5a45;
    --asphalt: #0e1012;
    background: #131518;
  }
  body.site-drive main { background: #1b1e22; box-shadow: none; }
  body.site-drive h1 { background: repeating-linear-gradient(90deg, #d9dde2 0 26px, transparent 26px 42px) left bottom / 100% 4px no-repeat; }
  body.site-drive .summary {
    background:
      linear-gradient(#000, #000) 0 0 / 100% 12px no-repeat,
      radial-gradient(circle at 0 50%, #131518 6px, transparent 6.5px) 0 12px / 14px 22px repeat-y,
      #20262e;
    box-shadow: 0 0 0 1px #34404e;
  }
  body.site-drive .summary th { color: #8fb8ee; }
  body.site-drive .qa-list {
    background:
      repeating-linear-gradient(180deg, #d9dde2 0 18px, transparent 18px 32px) 11px 12px / 4px calc(100% - 24px) no-repeat,
      linear-gradient(#000, #000) 0 0 / 26px 100% no-repeat,
      #1b1e22;
  }
  body.site-drive .place-list li:not(.ad-row) { background: #24282d; }
  body.site-drive .removal { background: #18222f; }
  body.site-drive .btn-phone,
  body.site-drive .site-search input[type="search"] { background: #24282d; color: var(--fg); }
  body.site-drive .btn-phone { color: #8fb8ee; border-color: #8fb8ee; }
}

/* 띄어쓰기 없는 긴 이름(예: 기관명 30자)이 좁은 화면에서 가로 스크롤을 만들지 않게 */
body.site-drive .place-list li > a,
body.site-drive .near li > a,
body.site-drive h1 { min-width: 0; overflow-wrap: anywhere; }