/* toll.ayo.pe.kr — 사이트 고유 디자인(2026-09-28). 콘셉트: 고속도로 초록 표지판 × 톨게이트 영수증 × 아스팔트 차선.
   머리는 초록 도로 표지판(흰 테두리 안쪽 선), 질답은 차선 표시(노란 중앙선) 카드, 구간 상세 머리는 감열지 영수증,
   영업소 상세 머리는 방향 표지판. 글꼴: 검은고딕(표지판·질문) + 고딕 A1(본문) + 나눔고딕코딩(영수증 숫자).
   모든 규칙은 body.site-toll 아래로 격리한다 — base.html·다른 사이트 화면은 바뀌지 않는다. */
body.site-toll {
  --tl-sign: #0b6e4f;
  --tl-sign-d: #07513a;
  --tl-asphalt: #2b2f33;
  --tl-yel: #f5c518;
  --tl-ink: #1d2226;
  --tl-sub: #5b6570;
  --tl-line: #d9dee2;
  --tl-bg: #eef1f3;
  --tl-card: #ffffff;
  --tl-paper: #fffdf6;
  background: var(--tl-bg);
  color: var(--tl-ink);
  font-family: "Gothic A1", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

/* ── 머리: 초록 도로 표지판 ────────────────────────── */
body.site-toll .site-head {
  background: var(--tl-sign);
  color: #fff;
  border-bottom: 6px solid var(--tl-asphalt);
  box-shadow: inset 0 0 0 3px var(--tl-sign), inset 0 0 0 5px rgba(255,255,255,.85);
}
body.site-toll .brand a { color: #fff; font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 1.12em; letter-spacing: .5px; }
body.site-toll .brand::before {
  content: "";
  display: inline-block; width: 22px; height: 24px; margin-right: 9px; vertical-align: -5px;
  background: #1f4fa3;
  border: 2px solid #fff;
  border-radius: 3px 3px 11px 11px;   /* 고속도로 노선 방패 */
}
body.site-toll .site-head nav a { color: #fff; background: rgba(0,0,0,.18); border: 2px solid rgba(255,255,255,.75); border-radius: 4px; font-weight: 600; }
body.site-toll .site-head nav a.on,
body.site-toll .site-head nav a:hover { color: var(--tl-asphalt); background: var(--tl-yel); border-color: var(--tl-yel); }
body.site-toll .site-search input[type="search"] { border: 2px solid var(--tl-asphalt); border-radius: 4px 0 0 4px; background: #fff; }
body.site-toll .site-search button { background: var(--tl-asphalt); color: var(--tl-yel); border: 0; border-radius: 0 4px 4px 0; font-weight: 700; }

/* ── 제목·요약 ──────────────────────────────────── */
body.site-toll h1 { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 28px; line-height: 1.35; margin: 18px 0 14px; color: var(--tl-sign-d); letter-spacing: .3px; }
body.site-toll .lead { font-size: 14.5px; line-height: 1.8; color: var(--tl-sub); }
body.site-toll .data-date, body.site-toll .crumb a { color: var(--tl-sub); }
body.site-toll .summary { background: var(--tl-card); border: 0; border-left: 6px solid var(--tl-sign); border-radius: 6px; overflow: hidden; margin-bottom: 26px; box-shadow: 0 1px 0 var(--tl-line); }
body.site-toll .summary th { font-size: 13.5px; color: var(--tl-sign-d); font-weight: 800; padding: 12px 16px; white-space: nowrap; background: #e7f1ec; }
body.site-toll .summary td { font-size: 14.5px; padding: 12px 18px; line-height: 1.6; }
body.site-toll .summary tr + tr td, body.site-toll .summary tr + tr th { border-top: 1px solid var(--tl-line); }

/* ── 구간 상세 머리: 감열지 영수증 ─────────────────── */
body.site-toll .tl-receipt {
  position: relative;
  max-width: 440px;
  margin: 6px 0 26px;
  padding: 20px 22px 16px;
  background: var(--tl-paper);
  color: #222;
  font-family: "Nanum Gothic Coding", ui-monospace, monospace;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  /* 위아래 톱니 */
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) top/14px 51% repeat-x,
                radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/14px 51% repeat-x;
          mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) top/14px 51% repeat-x,
                radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) bottom/14px 51% repeat-x;
}
body.site-toll .tl-rc-head { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: 1.5px; color: #777; border-bottom: 1px dashed #bbb; padding-bottom: 8px; }
body.site-toll .tl-rc-route { margin: 12px 0 10px; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.site-toll .tl-rc-route b { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 20px; color: var(--tl-sign-d); }
body.site-toll .tl-rc-route i { font-style: normal; color: var(--tl-sub); }
body.site-toll .tl-rc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; background: transparent; border: 0; }
body.site-toll .tl-rc-table th, body.site-toll .tl-rc-table td { padding: 6px 2px; text-align: right; border: 0; background: transparent; font-weight: 400; }
body.site-toll .tl-rc-table th:first-child { text-align: left; color: #444; }
body.site-toll .tl-rc-table thead th { font-size: 11.5px; color: #888; border-bottom: 1px dashed #bbb; }
body.site-toll .tl-rc-table tbody tr + tr td, body.site-toll .tl-rc-table tbody tr + tr th { border-top: 1px dotted #e0dccd; }
body.site-toll .tl-rc-table .tl-main td, body.site-toll .tl-rc-table .tl-main th { font-weight: 700; font-size: 17px; color: #111; }
body.site-toll .tl-rc-foot { display: flex; gap: 18px; margin: 12px 0 4px; padding-top: 10px; border-top: 1px dashed #bbb; font-size: 13px; }
body.site-toll .tl-rc-foot dt { color: #888; font-size: 11.5px; }
body.site-toll .tl-rc-foot dd { margin: 2px 0 0; font-weight: 700; }
body.site-toll .tl-receipt figcaption { font-size: 11px; color: #999; margin-top: 8px; letter-spacing: .3px; }
body.site-toll .tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── 영업소 상세 머리: 방향 표지판 ─────────────────── */
body.site-toll .tl-sign {
  display: inline-flex; flex-direction: column; gap: 4px;
  min-width: 240px; max-width: 100%;
  margin: 4px 0 24px; padding: 16px 26px 18px;
  background: var(--tl-sign); color: #fff; border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--tl-sign), inset 0 0 0 5px #fff, 0 3px 0 var(--tl-asphalt);
}
body.site-toll .tl-sign b { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; }
body.site-toll .tl-sign-route { align-self: flex-start; background: #1f4fa3; border: 2px solid #fff; border-radius: 4px 4px 12px 12px; padding: 2px 10px 4px; font-size: 12.5px; font-weight: 800; }
body.site-toll .tl-sign-sub { font-size: 11.5px; letter-spacing: 2px; opacity: .85; }
body.site-toll .tl-sign-dest { font-size: 13px; color: var(--tl-yel); font-weight: 700; }

/* ── 질답: 아스팔트 차선 카드 ─────────────────────── */
body.site-toll .qa-list { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.site-toll .qa-item {
  position: relative;
  background: var(--tl-card);
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  padding: 18px 22px 18px 30px;
  margin: 0 0 12px;
}
body.site-toll .qa-item::before {   /* 노란 중앙선 */
  content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 6px;
  background: linear-gradient(90deg, var(--tl-yel) 0 2px, transparent 2px 4px, var(--tl-yel) 4px 6px);
  border-radius: 2px;
}
body.site-toll .qa-item:last-child { border-bottom: 1px solid var(--tl-line); }
body.site-toll .qa-item h2 { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 17.5px; line-height: 1.5; margin: 0 0 8px; color: var(--tl-asphalt); letter-spacing: .2px; }
body.site-toll .qa-item h2::before { content: none; }
body.site-toll .qa-item p { margin: 0; font-size: 14.8px; line-height: 1.9; color: #2b3238; }

/* ── 관련 목록: 목적지 요금표 ─────────────────────── */
body.site-toll .near-block { background: var(--tl-card); border: 1px solid var(--tl-line); border-top: 5px solid var(--tl-sign); border-radius: 6px; padding: 20px 22px; margin: 0 0 16px; }
body.site-toll .near-block h2 { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 17.5px; margin: 0 0 8px; color: var(--tl-sign-d); }
body.site-toll .near-block > p { font-size: 14.3px; line-height: 1.75; color: #2b3238; margin: 0 0 12px; }
body.site-toll .near-block ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 10px; }
body.site-toll .near-block ul li { list-style: none; padding: 8px 10px; font-size: 14px; border-bottom: 1px dashed var(--tl-line); display: flex; flex-direction: column; }
body.site-toll .near-block a { color: var(--tl-sign-d); font-weight: 800; text-decoration: none; }
body.site-toll .near-block a:hover { text-decoration: underline; text-decoration-color: var(--tl-yel); text-decoration-thickness: 3px; }
body.site-toll .near-block .addr, body.site-toll .near-block .dist { color: var(--tl-sub); font-size: 12.5px; margin-top: 2px; font-family: "Nanum Gothic Coding", ui-monospace, monospace; }
body.site-toll .more a { color: var(--tl-sign); font-weight: 800; }

/* ── 목록·허브 ─────────────────────────────────────── */
body.site-toll .place-list li { background: var(--tl-card); border: 1px solid var(--tl-line); border-left: 4px solid var(--tl-sign); border-radius: 4px; margin: 8px 0; padding: 12px 16px; font-size: 14.5px; }
body.site-toll .place-list li > a { color: var(--tl-ink); font-weight: 800; }
body.site-toll .place-list li > a:hover { color: var(--tl-sign); }
body.site-toll .place-list .addr { color: var(--tl-sub); }
body.site-toll .cat { background: #1f4fa3; color: #fff; border-radius: 4px 4px 10px 10px; padding: 1px 10px 3px; display: inline-block; line-height: 1.5; font-size: 12.5px; font-weight: 700; }
body.site-toll .region-links { gap: 8px 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
body.site-toll .region-links li > a { min-width: 0; word-break: keep-all; line-height: 1.35; }
body.site-toll .region-links .count { flex-shrink: 0; }
body.site-toll .region-links li { background: var(--tl-sign); border-radius: 6px; padding: 10px 14px; align-items: center; box-shadow: inset 0 0 0 2px var(--tl-sign), inset 0 0 0 3px rgba(255,255,255,.7); }
body.site-toll .region-links li > a { color: #fff; font-weight: 700; }
body.site-toll .region-links li:hover { background: var(--tl-sign-d); }
body.site-toll .region-links .count { color: var(--tl-yel); font-weight: 800; }
body.site-toll .count { color: var(--tl-sign); font-weight: 800; }
body.site-toll .menu-cards { gap: 14px; }
body.site-toll .menu-cards li { background: var(--tl-sign); color: #fff; border-radius: 8px; box-shadow: inset 0 0 0 3px var(--tl-sign), inset 0 0 0 5px #fff, 0 3px 0 var(--tl-asphalt); padding: 16px 20px; }
body.site-toll .menu-cards li a { color: #fff; font-family: "Black Han Sans", sans-serif; font-weight: 400; }
body.site-toll .menu-cards li p, body.site-toll .menu-cards li span { color: #e6f3ed; }

/* ── 출처·삭제요청·발 ───────────────────────────────── */
body.site-toll .source { border-top: 3px solid var(--tl-asphalt); padding-top: 18px; margin-top: 28px; }
body.site-toll .source h2 { font-family: "Black Han Sans", sans-serif; font-weight: 400; font-size: 17px; margin: 0 0 8px; }
body.site-toll .source p { font-size: 14px; color: var(--tl-sub); }
body.site-toll .source a { color: var(--tl-sign); }
body.site-toll .btn { background: var(--tl-asphalt); color: var(--tl-yel); border-radius: 4px; }
body.site-toll .site-foot { background: var(--tl-asphalt); color: #c9ced3; border-top: 4px dashed var(--tl-yel); }
body.site-toll .site-foot a { color: var(--tl-yel); }

@media (max-width: 640px) {
  body.site-toll h1 { font-size: 23px; }
  body.site-toll .tl-receipt { padding: 18px 16px 14px; }
  body.site-toll .tl-sign b { font-size: 28px; }
  body.site-toll .qa-item { padding: 16px 14px 16px 26px; }
  body.site-toll .qa-item h2 { font-size: 16px; }
  body.site-toll .qa-item p { font-size: 14px; }
  body.site-toll .near-block { padding: 16px 14px; }
  body.site-toll .near-block ul { grid-template-columns: 1fr 1fr; }
  body.site-toll .region-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}