/* roadsafe.ayo.pe.kr — 단속카메라·보호구역·사고다발지 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **어린이보호구역 붉은 노면 × 교통안전 표지**. 스쿨존 입구의 붉은 미끄럼방지 포장과 흰 노면 글씨,
 * 제한속도 원형 표지, 노란 주의표지, 횡단보도 줄무늬를 화면 말투로 쓴다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-roadsafe 아래로 가둔다. 마크업은 공유 템플릿 그대로 — CSS 만.
 *
 *   헤더   : 붉은 노면(자갈 알갱이 점) + 흰 정지선 · 상호 앞 제한속도 원형 표지
 *   탭     : 흰 규제표지 판(빨간 테두리)
 *   제목   : 앞에 빨간 삼각 주의표지
 *   요약표 : 노란 주의표지판(검은 테두리)
 *   질답   : 질문 번호가 제한속도 표지(빨간 고리 흰 원)
 *   목록   : 행마다 왼쪽에 횡단보도 줄무늬
 *   지역   : 노랑·검정 경계석 막대가 붙은 칩
 *   글꼴   : 제목 Jua(노면 글씨 같은 둥근 굵은 글씨) · 본문 시스템 고딕
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다.
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 * ⚠️ 제한속도 원 안의 숫자는 질문 번호다 — 실제 제한속도 값처럼 보이지 않게 작은 번호(1·2·3…)만 쓴다.
 */

body.site-roadsafe {
  --fg: #221b18;
  --fg-soft: #4b403b;
  --muted: #7d706a;
  --line: #eadbd0;
  --line-soft: #f3e9e1;
  --bg: #ffffff;
  --bg-soft: #fbf5f0;
  --accent: #c8332b;          /* 규제표지 빨강 */
  --accent-strong: #9e231c;
  --accent-soft: #fde6e2;
  --accent-wash: #fff6f3;
  --accent-line: #f0b5aa;
  --paint: #b33a2e;           /* 스쿨존 붉은 포장 */
  --caution: #ffcc00;         /* 주의표지 노랑 */
  --road: #26292c;
  --jua: "Jua", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --radius: 8px;
  --wrap: 880px;
  background: #f6f1ec;
}

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

body.site-roadsafe h1,
body.site-roadsafe .brand,
body.site-roadsafe .qa-head,
body.site-roadsafe .mapsec-head,
body.site-roadsafe .near h2,
body.site-roadsafe section.list > h2,
body.site-roadsafe section.children > h2,
body.site-roadsafe section.other-sites > h2,
body.site-roadsafe .menu-cards li > a,
body.site-roadsafe .site-head nav a { font-family: var(--jua); font-weight: 400; }

/* ── 헤더: 붉은 노면 + 정지선 ─────────────────────────────────────────── */
body.site-roadsafe .site-head {
  max-width: none;
  margin: 0;
  padding: 20px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 30px;
  border-bottom: 0;
  background:
    linear-gradient(#fff, #fff) 0 calc(100% - 8px) / 100% 7px no-repeat,
    radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.6px) 3px 4px / 9px 9px,
    var(--paint);
}
body.site-roadsafe .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  font-size: 26px;
  line-height: 1.1;
}
/* 제한속도 원형 표지 */
body.site-roadsafe .brand::before {
  content: "30";
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 6px var(--accent), 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .3);
  color: #111;
  font-family: var(--jua);
  font-size: 19px;
}
body.site-roadsafe .brand a { color: #fff; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
body.site-roadsafe .brand a:hover { color: #fff; text-decoration: none; opacity: .9; }

/* 탭: 흰 규제표지 판 */
body.site-roadsafe .site-head nav { gap: 8px; }
body.site-roadsafe .site-head nav a {
  padding: 5px 13px;
  border-radius: 6px;
  background: #fff;
  border: 3px solid var(--accent);
  color: #1d1d1d;
  font-size: 16px;
}
body.site-roadsafe .site-head nav a:hover,
body.site-roadsafe .site-head nav a.on {
  background: var(--caution);
  border-color: #111;
  color: #111;
  text-decoration: none;
}

/* 검색 */
body.site-roadsafe .top-search { margin-top: 16px; }
body.site-roadsafe .site-search input[type="search"] {
  border: 2.5px solid var(--road);
  border-radius: 8px;
  background: #fff;
}
body.site-roadsafe .site-search button {
  border-radius: 8px;
  background: var(--accent);
  font-family: var(--jua);
  font-size: 17px;
  font-weight: 400;
}
body.site-roadsafe .site-search button:hover { background: var(--accent-strong); }

/* ── 제목·경로 ───────────────────────────────────────────────────────── */
body.site-roadsafe main { padding-bottom: 20px; }
body.site-roadsafe .crumb { font-size: 13px; }
body.site-roadsafe .crumb a { color: var(--fg-soft); }
body.site-roadsafe .crumb a::after { content: " ›"; color: var(--accent); }

body.site-roadsafe h1 {
  position: relative;
  margin: 14px 0 20px;
  padding-left: 50px;
  font-size: 31px;
  line-height: 1.3;
  color: var(--fg);
}
/* 빨간 삼각 주의표지 — 바깥 빨강(::before) 위에 안쪽 흰 삼각 + 검정 느낌표(::after) */
body.site-roadsafe h1::before,
body.site-roadsafe h1::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.site-roadsafe h1::before { left: 0; top: 2px; width: 38px; height: 34px; background: var(--accent); }
body.site-roadsafe h1::after {
  left: 8px; top: 13px; width: 22px; height: 19px;
  background:
    linear-gradient(#111, #111) 50% 45% / 3px 7px no-repeat,
    linear-gradient(#111, #111) 50% 88% / 3px 3px no-repeat,
    #fff;
}
body.site-roadsafe .lead { margin: 0 0 22px; color: var(--fg-soft); }
body.site-roadsafe .data-date {
  display: inline-block;
  margin: 0 0 16px;
  padding: 2px 10px;
  border-radius: 4px;
  background: #111;
  color: var(--caution);
  font-size: 12.5px;
}

/* ── 요약표: 노란 주의표지판 ─────────────────────────────────────────── */
body.site-roadsafe .summary {
  border: 3px solid #111;
  border-radius: 10px;
  background: var(--caution);
  box-shadow: inset 0 0 0 3px var(--caution), inset 0 0 0 5px #111;
  font-size: 15px;
}
body.site-roadsafe .summary tr + tr th,
body.site-roadsafe .summary tr + tr td { border-top: 1.5px solid rgba(0, 0, 0, .22); }
body.site-roadsafe .summary th {
  width: 108px;
  padding-left: 18px;
  background: transparent;
  color: #3b2f00;
  font-size: 13px;
  font-weight: 800;
}
body.site-roadsafe .summary td { padding-right: 18px; color: #111; font-weight: 700; }
body.site-roadsafe .summary td a { color: #111; text-decoration: underline; }
body.site-roadsafe .phone-note { color: #4b3d00; }
body.site-roadsafe .btn-phone {
  border: 2px solid #111;
  background: #fff;
  color: #111;
  font-weight: 800;
}
body.site-roadsafe .btn-phone::before { border-color: #111; }
body.site-roadsafe .btn-phone:hover { background: #111; color: var(--caution); }

/* ── 질답: 제한속도 표지 번호 ────────────────────────────────────────── */
body.site-roadsafe .qa-head { font-size: 21px; color: var(--fg); }
body.site-roadsafe .qa-head::before {
  content: "";
  width: 20px; height: 20px;
  margin: 0 4px;
  border-radius: 3px;
  background: var(--caution);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px #111;
}
body.site-roadsafe .qa-list {
  counter-reset: rsq;
  padding: 4px 22px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
}
body.site-roadsafe section.qa { counter-reset: rsq; }
body.site-roadsafe .qa-item {
  counter-increment: rsq;
  padding: 18px 0 18px 48px;
  position: relative;
  border-bottom: 2px dashed var(--line-soft);
}
body.site-roadsafe .qa-item h2 { font-size: 17px; color: var(--fg); }
body.site-roadsafe .qa-item h2::before {
  content: counter(rsq);
  position: absolute;
  left: 0; top: 14px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4.5px var(--accent);
  color: #111;
  font-family: var(--jua);
  font-size: 15px;
  font-weight: 400;
}
body.site-roadsafe .qa-item p { padding-left: 0; color: var(--fg-soft); }

/* ── 지도·주변 ───────────────────────────────────────────────────────── */
body.site-roadsafe .mapsec-head { font-size: 19px; }
body.site-roadsafe .map-canvas,
body.site-roadsafe .pano-canvas { border-radius: 10px; border: 3px solid var(--road); }
body.site-roadsafe .near {
  border-top: 0;
  padding-top: 16px;
  background: repeating-linear-gradient(90deg, var(--road) 0 18px, transparent 18px 30px) 0 0 / 100% 8px no-repeat;
}
body.site-roadsafe .near h2 {
  border-left: 0;
  padding-left: 0;
  font-size: 19px;
  color: var(--fg);
}
body.site-roadsafe .near h2::before {
  content: "같은 길";
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--paint);
  color: #fff;
  font-size: 13px;
  vertical-align: 2px;
}
body.site-roadsafe .near > .near-block > p,
body.site-roadsafe .near ul,
body.site-roadsafe .near .more { padding-left: 0; }
body.site-roadsafe .near li { padding: 3px 0; }
body.site-roadsafe .dist {
  border-radius: 4px;
  background: #111;
  color: var(--caution);
}

/* ── 목록: 횡단보도 줄 ───────────────────────────────────────────────── */
body.site-roadsafe section.list > h2,
body.site-roadsafe section.children > h2,
body.site-roadsafe section.other-sites > h2 {
  font-size: 18px;
  color: var(--fg);
  border-bottom: 3px solid var(--road);
}
body.site-roadsafe .place-list li:not(.ad-row) {
  position: relative;
  padding: 14px 12px 14px 58px;
  border-bottom: 1px solid var(--line);
}
body.site-roadsafe .place-list li:not(.ad-row)::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 42px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, #fff 0 5px, transparent 5px 10px) 7px 5px / 28px calc(100% - 10px) no-repeat,
    var(--road);
}
body.site-roadsafe .place-list li:not(.ad-row):hover { background: var(--accent-wash); }
body.site-roadsafe .place-list li > a { color: var(--fg); font-weight: 700; }
body.site-roadsafe .cat {
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

/* 지역·조건·다른 사이트: 경계석 칩 */
body.site-roadsafe .region-links { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.site-roadsafe .region-links li {
  padding: 10px 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, var(--caution) 0 14px, #111 14px 28px) left bottom / 100% 5px no-repeat,
    #fff;
}
body.site-roadsafe .region-links li:hover { border-color: var(--accent); background:
    repeating-linear-gradient(90deg, var(--caution) 0 14px, #111 14px 28px) left bottom / 100% 5px no-repeat,
    var(--accent-wash); }
body.site-roadsafe .region-links li > a { color: var(--fg); }
body.site-roadsafe .count { color: var(--accent); font-weight: 700; }

/* 홈: 표지판 네 장 */
body.site-roadsafe .menu-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
body.site-roadsafe .menu-cards li {
  position: relative;
  padding: 22px 18px 18px 78px;
  border: 3px solid var(--road);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 0 var(--road);
  min-height: 86px;
}
body.site-roadsafe .menu-cards li::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 46px; height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 7px var(--accent);
}
body.site-roadsafe .menu-cards li:nth-child(2)::before {
  border-radius: 0;
  background: var(--caution);
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
body.site-roadsafe .menu-cards li:nth-child(3)::before {
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 92%, 0 92%);
}
body.site-roadsafe .menu-cards li:nth-child(4)::before {
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, #fff 0 6px, var(--road) 6px 12px);
  box-shadow: inset 0 0 0 3px var(--road);
}
body.site-roadsafe .menu-cards li:hover { background: var(--accent-wash); }
body.site-roadsafe .menu-cards li > a { color: var(--fg); font-size: 22px; }

/* ── 출처·삭제요청·바닥 ───────────────────────────────────────────────── */
body.site-roadsafe .source { border-top: 3px solid var(--road); }
body.site-roadsafe .removal {
  border: 2px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-wash);
  box-shadow: none;
}
body.site-roadsafe .removal::before { display: none; }
body.site-roadsafe .removal-icon {
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--accent);
  color: #111;
}
body.site-roadsafe .btn-removal { background: var(--road); box-shadow: none; }
body.site-roadsafe .btn-removal:hover { background: var(--accent-strong); }

body.site-roadsafe .site-foot {
  max-width: none;
  margin-top: 30px;
  padding: 44px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 36px;
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, #f2f2f2 0 26px, transparent 26px 48px) 0 0 / 100% 26px no-repeat,
    var(--road);
  color: #cfcac6;
  font-size: 13px;
}
body.site-roadsafe .site-foot a { color: var(--caution); }

@media (max-width: 600px) {
  body.site-roadsafe .site-head { padding: 16px 16px 28px; }
  body.site-roadsafe .brand { font-size: 21px; }
  body.site-roadsafe .brand::before { width: 38px; height: 38px; font-size: 16px; box-shadow: inset 0 0 0 5px var(--accent), 0 0 0 2px #fff; }
  body.site-roadsafe h1 { font-size: 25px; padding-left: 44px; }
  body.site-roadsafe .summary th { width: 84px; padding-left: 14px; }
  body.site-roadsafe .qa-list { padding: 2px 14px; }
  body.site-roadsafe .region-links { grid-template-columns: 1fr 1fr; }
  body.site-roadsafe .site-foot { padding-inline: 16px; }
}

/* ── 다크 모드: 야간 반사 표지 ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-roadsafe {
    --fg: #f1ebe7;
    --fg-soft: #cdc3bd;
    --muted: #a0958f;
    --line: #3d3431;
    --line-soft: #2e2826;
    --bg: #1c1918;
    --bg-soft: #262120;
    --accent: #ff6a5c;
    --accent-strong: #ff9588;
    --accent-soft: #3d201c;
    --accent-wash: #2a1c1a;
    --accent-line: #6b3a33;
    --paint: #7e2820;
    --road: #0d0f10;
    background: #151312;
  }
  body.site-roadsafe .qa-list,
  body.site-roadsafe .menu-cards li,
  body.site-roadsafe .site-search input[type="search"] { background: #1f1b1a; }
  body.site-roadsafe .menu-cards li { border-color: #cdc3bd; box-shadow: 0 4px 0 #000; }
  body.site-roadsafe .qa-item h2::before { background: #f1ebe7; }
  body.site-roadsafe .region-links li {
    background:
      repeating-linear-gradient(90deg, var(--caution) 0 14px, #111 14px 28px) left bottom / 100% 5px no-repeat,
      #1f1b1a;
  }
  body.site-roadsafe .place-list li:not(.ad-row)::before { box-shadow: inset 0 0 0 1px #3d3431; }
  body.site-roadsafe section.list > h2,
  body.site-roadsafe section.children > h2,
  body.site-roadsafe section.other-sites > h2 { border-bottom-color: #cdc3bd; }
  body.site-roadsafe .source { border-top-color: #cdc3bd; }
}

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