/* recycle.ayo.pe.kr — 쓰레기 배출요일·봉투판매소 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **벽걸이 배출 달력**. 이 사이트는 "우리 동네는 무슨 요일에 무엇을 내놓나" 를 답하는 곳이라
 * 냉장고에 붙여 두는 분리배출 달력·스프링 제본·요일 칸·일요일 빨강/토요일 파랑 말투로 화면을 짠다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-recycle 아래로 가둔다 — 다른 사이트에 새지 않는다.
 *
 *   헤더   : 청록 달력 머리 + 스프링 링(원 반복) · 제목 Dongle(달력 숫자처럼 둥근 큰 글자)
 *   탭     : 달력 요일 칸(위 색 띠)
 *   요약표 : 달력 표(청록 머리칸 + 모눈 값칸)
 *   질답   : 달력 날짜 칸 — 넓은 화면은 2열 격자, 칸마다 큰 날짜 숫자(counter) · 일/토 색
 *   목록   : 달력 메모 칸(왼쪽 위 날짜 숫자 + 찢는 선)
 *   지역   : 분리배출 스티커(재질별 색 띠 — 일반·음식물·재활용·유리)
 *   글꼴   : 제목 Dongle · 본문 Gothic A1
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 *    질답 격자 안의 <ins> 는 **자리만** 한 줄 전체로 잡는다(grid-column) — 배경·테두리는 주지 않는다.
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 * ⚠️ 날짜 숫자는 질답 순번일 뿐 실제 배출일이 아니다 — 요일 칸 색도 순서대로 돌아가는 장식이다.
 */

body.site-recycle {
  --fg: #152321;
  --fg-soft: #3b4c49;
  --muted: #647472;
  --line: #cfdcd9;
  --line-soft: #e3ecea;
  --bg: #ffffff;
  --bg-soft: #eef5f3;
  --accent: #00796b;          /* 달력 청록 */
  --accent-strong: #005a50;
  --accent-soft: #dcf0ec;
  --accent-wash: #f0f8f6;
  --accent-line: #a5d3cb;
  --sun: #d63a3a;             /* 일요일 */
  --sat: #2f62c9;             /* 토요일 */
  --lime: #8bc34a;            /* 재활용 */
  --food: #f2a91d;            /* 음식물 */
  --glass: #5aa6b9;
  --general: #7a828a;         /* 일반 */
  --paper: #f4f7f4;
  --title: "Dongle", "Jua", "Apple SD Gothic Neo", sans-serif;
  --radius: 6px;
  --wrap: 880px;
  background: var(--paper);
  background-image: linear-gradient(rgba(0, 121, 107, .05) 1px, transparent 1px);
  background-size: 100% 32px;
  font-family: "Gothic A1", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

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

body.site-recycle h1,
body.site-recycle .brand,
body.site-recycle .qa-head,
body.site-recycle section.list > h2,
body.site-recycle section.children > h2,
body.site-recycle section.other-sites > h2,
body.site-recycle .near h2,
body.site-recycle .mapsec-head,
body.site-recycle .source h2,
body.site-recycle .menu-cards li > a {
  font-family: var(--title);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

/* ── 헤더: 달력 머리 + 스프링 ────────────────────────────────────────── */
body.site-recycle .site-head {
  position: relative;
  max-width: var(--wrap);
  margin: 26px auto 12px;
  padding: 30px 22px 16px;
  border-bottom: 0;
  border-radius: 10px 10px 4px 4px;
  background: var(--accent);
  box-shadow: 0 6px 0 var(--accent-strong);
  gap: 10px 22px;
}
/* 스프링 링 — 위로 튀어나온 고리 */
body.site-recycle .site-head::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: -14px;
  height: 30px;
  background:
    radial-gradient(ellipse 5px 14px at 50% 50%, #cfd6d4 0 4px, #6f7b79 4.5px 5px, transparent 5.5px) 0 0 / 34px 30px repeat-x;
}
/* 링 구멍 */
body.site-recycle .site-head::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: 10px;
  height: 8px;
  background: radial-gradient(circle, rgba(0, 0, 0, .35) 3px, transparent 3.5px) 0 0 / 34px 8px repeat-x;
  pointer-events: none;
}
body.site-recycle .brand { font-size: 46px; }
body.site-recycle .brand a { color: #fff; }
body.site-recycle .brand a:hover { color: #e6fff9; text-decoration: none; }
body.site-recycle .site-head nav { gap: 6px; }
body.site-recycle .site-head nav a {
  --bar: var(--lime);
  padding: 9px 16px 5px;
  border-radius: 4px;
  background: linear-gradient(var(--bar), var(--bar)) 0 0 / 100% 5px no-repeat, #fff;
  color: var(--accent-strong);
  font-size: 14.5px;
  font-weight: 800;
}
body.site-recycle .site-head nav a:nth-child(2) { --bar: var(--food); }
body.site-recycle .site-head nav a:nth-child(3) { --bar: var(--glass); }
body.site-recycle .site-head nav a:hover { background: linear-gradient(var(--bar), var(--bar)) 0 0 / 100% 5px no-repeat, #eafaf6; color: var(--accent-strong); text-decoration: none; }
body.site-recycle .site-head nav a.on { background: linear-gradient(var(--bar), var(--bar)) 0 0 / 100% 100% no-repeat; color: #102a26; }

/* 검색창 */
body.site-recycle .site-search input[type="search"] {
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: #fff;
}
body.site-recycle .site-search button {
  border-radius: 6px;
  background: var(--accent-strong);
  font-family: var(--title);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  padding: 0 20px;
}
body.site-recycle .site-search button:hover { background: var(--accent); }

/* ── 제목·경로 ───────────────────────────────────────────────────────── */
body.site-recycle .crumb { font-size: 13px; }
body.site-recycle .crumb a { color: var(--accent-strong); }
body.site-recycle .crumb a::after { content: " / "; color: var(--accent-line); }
body.site-recycle .crumb span { color: var(--fg); font-weight: 700; }

body.site-recycle h1 {
  font-size: 50px;
  color: #10302b;
  margin: 12px 0 18px;
}
body.site-recycle .lead { margin: 0 0 22px; color: var(--fg-soft); }
/* 기준일 — 찢어 쓰는 일력 한 장 */
body.site-recycle .data-date {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 18px;
  padding: 10px 14px 6px;
  border-radius: 4px;
  background: linear-gradient(var(--sun), var(--sun)) 0 0 / 100% 5px no-repeat, #fff;
  box-shadow: 0 1px 0 var(--line), 0 3px 0 -1px #fff, 0 4px 0 -1px var(--line);
  color: var(--fg-soft);
  font-size: 12.5px;
  font-weight: 700;
}

/* ── 요약표: 달력 표 ─────────────────────────────────────────────────── */
body.site-recycle .summary {
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: #fff;
}
body.site-recycle .summary th {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
}
body.site-recycle .summary tr + tr th { border-top-color: rgba(255, 255, 255, .22); }
body.site-recycle .summary tr + tr td { border-top: 1px solid var(--line); }
body.site-recycle .summary td a:not(.btn) { color: var(--accent-strong); font-weight: 700; }

body.site-recycle .btn { border-radius: 6px; }
body.site-recycle .btn-phone { border: 2px solid var(--accent); color: var(--accent-strong); background: #fff; }
body.site-recycle .btn-phone:hover { background: var(--accent-soft); }

/* ── 질답: 달력 날짜 칸 ──────────────────────────────────────────────── */
body.site-recycle .qa-head { font-size: 34px; color: #10302b; gap: 10px; }
body.site-recycle .qa-head::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 4px;
  background:
    linear-gradient(var(--sun), var(--sun)) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, var(--accent-line) 5px 6px) 0 10px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 5px, var(--accent-line) 5px 6px) 0 16px / 100% 1px no-repeat,
    #fff;
  border: 2px solid var(--accent);
}
body.site-recycle .qa-list {
  counter-reset: day;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}
body.site-recycle .qa-list > .qa-item,
body.site-recycle .qa-list > ins.adsbygoogle { box-sizing: border-box; }
body.site-recycle .qa-list > ins.adsbygoogle { grid-column: 1 / -1; margin: 12px 0; }
body.site-recycle .qa-item {
  --day: var(--fg);
  counter-increment: day;
  position: relative;
  margin: 0;
  padding: 44px 18px 18px;
  box-shadow: 1px 1px 0 var(--line);
  border-bottom: 0;
  background: #fff;
}
body.site-recycle .qa-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 날짜 숫자 — 7칸마다 일요일 빨강, 토요일 파랑 */
body.site-recycle .qa-item::before {
  content: counter(day);
  position: absolute;
  left: 16px; top: 4px;
  font-family: var(--title);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--day);
}
body.site-recycle .qa-item:nth-child(7n+1) { --day: var(--sun); }
body.site-recycle .qa-item:nth-child(7n) { --day: var(--sat); }
/* 칸 오른쪽 위 분리배출 점 */
body.site-recycle .qa-item::after {
  content: "";
  position: absolute;
  right: 16px; top: 16px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: -18px 0 0 var(--food), -36px 0 0 var(--glass);
  opacity: .8;
}
body.site-recycle .qa-item h2 { font-size: 16.5px; color: #10302b; font-weight: 800; }
body.site-recycle .qa-item h2::before { content: none; }
body.site-recycle .qa-item p { padding-left: 0; color: var(--fg-soft); font-size: 15px; line-height: 1.75; }

/* ── 지도·주변 ───────────────────────────────────────────────────────── */
body.site-recycle .mapsec-head { color: #10302b; font-size: 28px; }
body.site-recycle .map-box { border-radius: 8px; }
body.site-recycle .near { border-top: 0; margin-top: 44px; }
body.site-recycle .near h2 {
  padding-left: 0;
  border-left: 0;
  font-size: 34px;
  color: #10302b;
}
body.site-recycle .near-block {
  padding: 2px 18px 16px;
  border-radius: 8px;
  background: #fff;
  border: 2px solid var(--line);
  border-top: 8px solid var(--accent);
}
body.site-recycle .near-block:nth-child(3n+2) { border-top-color: var(--food); }
body.site-recycle .near-block:nth-child(3n) { border-top-color: var(--lime); }
body.site-recycle .near > .near-block > p,
body.site-recycle .near ul,
body.site-recycle .near .more { padding-left: 0; }
body.site-recycle .near ul li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
body.site-recycle .dist { background: var(--accent-soft); color: var(--accent-strong); border-radius: 4px; }

/* ── 목록: 달력 메모 칸 ──────────────────────────────────────────────── */
body.site-recycle section.list > h2,
body.site-recycle section.children > h2,
body.site-recycle section.other-sites > h2 {
  font-size: 30px;
  color: #10302b;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 4px;
}
body.site-recycle .place-list {
  counter-reset: memo;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.site-recycle .place-list li {
  counter-increment: memo;
  position: relative;
  padding: 12px 14px 12px 58px;
  border-bottom: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  align-content: start;
}
body.site-recycle .place-list li::before {
  content: counter(memo);
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 44px;
  padding-top: 8px;
  text-align: center;
  font-family: var(--title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-right: 2px dashed var(--accent-line);
  border-radius: 6px 0 0 6px;
}
body.site-recycle .place-list li:nth-child(7n+1)::before { color: var(--sun); }
body.site-recycle .place-list li:nth-child(7n)::before { color: var(--sat); }
body.site-recycle .place-list li:hover { box-shadow: 0 0 0 2px var(--accent); }
body.site-recycle .place-list li > a { color: #10302b; font-weight: 800; }
body.site-recycle .place-list li.ad-row {
  counter-increment: none;
  grid-column: 1 / -1;
  padding: 0; background: none; box-shadow: none; border-radius: 0;
}
body.site-recycle .place-list li.ad-row::before { content: none; }
body.site-recycle .cat { background: #fff6dc; color: #7a5200; border-radius: 4px; font-weight: 700; }

/* ── 지역: 분리배출 스티커 ───────────────────────────────────────────── */
body.site-recycle .region-links {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
body.site-recycle .region-links li {
  --mat: var(--lime);
  padding: 10px 12px 10px 20px;
  border-bottom: 0;
  border-radius: 6px;
  background: linear-gradient(var(--mat), var(--mat)) 0 0 / 8px 100% no-repeat, #fff;
  box-shadow: 0 0 0 1px var(--line);
}
body.site-recycle .region-links li:nth-child(4n+2) { --mat: var(--food); }
body.site-recycle .region-links li:nth-child(4n+3) { --mat: var(--glass); }
body.site-recycle .region-links li:nth-child(4n) { --mat: var(--general); }
body.site-recycle .region-links li:hover { box-shadow: 0 0 0 2px var(--mat); }
body.site-recycle .region-links li > a { color: #10302b; }
body.site-recycle .count { color: var(--accent-strong); font-weight: 700; }

/* 첫 화면 메뉴: 달력 한 장 */
body.site-recycle .menu-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.site-recycle .menu-cards li {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 150px;
  padding: 36px 20px 18px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--line-soft) calc(100% / 7 - 1px) calc(100% / 7)) 0 22px / 100% 100% no-repeat,
    #fff;
}
body.site-recycle .menu-cards li:nth-child(2) { border-color: var(--food); background: linear-gradient(var(--food), var(--food)) 0 0 / 100% 22px no-repeat, repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--line-soft) calc(100% / 7 - 1px) calc(100% / 7)) 0 22px / 100% 100% no-repeat, #fff; }
body.site-recycle .menu-cards li::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: -8px;
  height: 16px;
  background: radial-gradient(ellipse 4px 8px at 50% 50%, #cfd6d4 0 3px, #6f7b79 3.5px 4px, transparent 4.5px) 0 0 / 28px 16px repeat-x;
}
body.site-recycle .menu-cards li:hover { box-shadow: 0 6px 0 var(--accent-line); }
body.site-recycle .menu-cards li > a { font-size: 40px; color: #10302b; }
body.site-recycle .menu-cards .count { font-size: 13px; }

/* ── 출처·삭제요청·바닥 ───────────────────────────────────────────────── */
body.site-recycle .source h2 { color: #10302b; font-size: 32px; }
body.site-recycle .removal {
  border: 2px solid var(--accent-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
body.site-recycle .removal::before { background: var(--accent-soft); }
body.site-recycle .removal-icon { border-radius: 6px; background: var(--accent); color: #fff; }
body.site-recycle .btn-removal { background: var(--accent-strong); box-shadow: 0 4px 0 #003a33; }
body.site-recycle .btn-removal:hover { background: var(--accent); }

body.site-recycle .site-foot {
  max-width: none;
  margin-top: 56px;
  padding: 22px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 44px;
  border-top: 0;
  background:
    linear-gradient(90deg, var(--lime) 0 25%, var(--food) 25% 50%, var(--glass) 50% 75%, var(--general) 75%) 0 0 / 100% 6px no-repeat,
    #103a34;
  color: #cfe3de;
}
body.site-recycle .site-foot a { color: #b9f0a0; }

body.site-recycle main.not-found .lead {
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
  border: 2px dashed var(--accent-line);
}

@media (max-width: 920px) {
  body.site-recycle .site-head { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 600px) {
  body.site-recycle .site-head { margin: 22px 12px 10px; padding: 26px 16px 14px; }
  body.site-recycle .brand { font-size: 38px; }
  body.site-recycle .site-head nav a { padding: 8px 12px 4px; font-size: 13.5px; }
  body.site-recycle h1 { font-size: 38px; }
  body.site-recycle .qa-list { grid-template-columns: 1fr; }
  body.site-recycle .place-list { grid-template-columns: 1fr; }
  body.site-recycle .region-links { grid-template-columns: 1fr 1fr; }
}

/* ── 다크 모드: 밤의 달력 ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-recycle {
    --fg: #e5efed;
    --fg-soft: #bccbc8;
    --muted: #8fa19e;
    --line: #2c3c39;
    --line-soft: #223230;
    --bg: #131b1a;
    --bg-soft: #1a2523;
    --accent: #1f8f80;
    --accent-strong: #7fd3c6;
    --accent-soft: #173330;
    --accent-wash: #122624;
    --accent-line: #2c5a53;
    --sun: #ef6b6b;
    --sat: #7aa2f0;
    --paper: #0f1615;
  }
  body.site-recycle h1,
  body.site-recycle .qa-head,
  body.site-recycle .qa-item h2,
  body.site-recycle section.list > h2,
  body.site-recycle section.children > h2,
  body.site-recycle section.other-sites > h2,
  body.site-recycle .near h2,
  body.site-recycle .mapsec-head,
  body.site-recycle .source h2,
  body.site-recycle .place-list li > a,
  body.site-recycle .region-links li > a,
  body.site-recycle .menu-cards li > a { color: #eaf6f3; }
  body.site-recycle .summary,
  body.site-recycle .qa-item,
  body.site-recycle .near-block,
  body.site-recycle .place-list li,
  body.site-recycle .removal,
  body.site-recycle main.not-found .lead,
  body.site-recycle .site-search input[type="search"],
  body.site-recycle .btn-phone { background-color: #18221f; color: var(--fg); }
  body.site-recycle .region-links li { background: linear-gradient(var(--mat), var(--mat)) 0 0 / 8px 100% no-repeat, #18221f; }
  body.site-recycle .data-date { background: linear-gradient(var(--sun), var(--sun)) 0 0 / 100% 5px no-repeat, #18221f; box-shadow: 0 0 0 1px var(--line); }
  body.site-recycle .site-head nav a { background: linear-gradient(var(--bar), var(--bar)) 0 0 / 100% 5px no-repeat, #e8f4f1; color: #0b3b35; }
  body.site-recycle .menu-cards li,
  body.site-recycle .menu-cards li:nth-child(2) { background-color: #18221f; }
  body.site-recycle .menu-cards li { background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 22px no-repeat, #18221f; }
  body.site-recycle .menu-cards li:nth-child(2) { background: linear-gradient(var(--food), var(--food)) 0 0 / 100% 22px no-repeat, #18221f; }
  body.site-recycle .cat { background: #2e2716; color: #f2cf7a; }
  body.site-recycle .qa-list { background: #18221f; }
  body.site-recycle .site-search button,
  body.site-recycle .btn-removal { background: #1f8f80; color: #fff; }
  body.site-recycle .site-foot { background: linear-gradient(90deg, var(--lime) 0 25%, var(--food) 25% 50%, var(--glass) 50% 75%, var(--general) 75%) 0 0 / 100% 6px no-repeat, #0a1d1a; }
}