/* banchan.ayo.pe.kr — 반찬가게·떡집·방앗간 독자 스킨 (2026-09-27 사용자 지시).
 *
 * "색만 바꾼 테마" 가 아니라 **시장 반찬가게** 느낌으로 글꼴·헤더·카드·목록 배치까지 바꾼다.
 * site.css(디자인 A) 위에 덮어쓰고, 전부 body.site-banchan 아래로 가둔다 — 다른 사이트에 새지 않는다.
 * 마크업(templates/place/*)은 공유하므로 **CSS 만** 고친다. base.html 은 이 파일과 글꼴 링크만 조건부로 얹는다.
 *
 *   헤더   : 줄무늬 차양막(시장 가판 천막) + 나무 간판 상호
 *   탭     : 가격표(구멍 뚫린 꼬리표)
 *   요약표 : 영수증(점선 줄·톱니 가장자리)
 *   질답   : 레시피 카드 — 질문마다 된장색 원형 Q 딱지, 답은 공책 줄
 *   목록   : 2열 반찬통 카드(뚜껑 색 띠가 돌아가며 바뀐다)
 *   글꼴   : 제목 Do Hyeon(가판 손글씨 간판) · 본문 Gowun Dodum
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 */

body.site-banchan {
  --fg: #2b2118;
  --fg-soft: #5a4a3a;
  --muted: #8a7563;
  --line: #e6d6bf;
  --line-soft: #efe3d1;
  --bg: #fffaf2;
  --bg-soft: #f6ecdc;
  --accent: #b3261e;          /* 고추장 */
  --accent-strong: #8c1d17;
  --accent-soft: #fbe3d6;
  --accent-wash: #fff4ea;
  --accent-line: #eab9a3;
  --doenjang: #7a4a1f;        /* 된장 */
  --sesame: #d99a1e;          /* 참기름 */
  --ssuk: #4d7c0f;            /* 쑥떡 */
  --paper: #f7efe2;           /* 크라프트지 바탕 */
  --radius: 14px;
  --wrap: 880px;
  background: var(--paper);
  background-image: radial-gradient(rgba(122, 74, 31, .07) 1px, transparent 1.2px);
  background-size: 14px 14px;
  font-family: "Gowun Dodum", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body.site-banchan h1,
body.site-banchan .brand,
body.site-banchan .qa-head,
body.site-banchan section.list > h2,
body.site-banchan section.children > h2,
body.site-banchan .near h2,
body.site-banchan .menu-cards li > a {
  font-family: "Do Hyeon", "Gowun Dodum", sans-serif;
  font-weight: 400;
}

/* ── 헤더: 차양막 + 나무 간판 ─────────────────────────────────────────── */
body.site-banchan .site-head {
  position: relative;
  max-width: none;
  margin: 0 0 6px;
  padding: 58px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 16px;
  border-bottom: 0;
  background:
    linear-gradient(#fffaf2, #fffaf2) 0 44px / 100% calc(100% - 44px) no-repeat,
    repeating-linear-gradient(90deg, #b3261e 0 34px, #fff4e4 34px 68px) 0 0 / 100% 34px no-repeat;
  box-shadow: 0 3px 0 var(--line);
}
/* 차양막 아래 물결 가장자리 */
body.site-banchan .site-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34px;
  height: 12px;
  background: radial-gradient(circle at 17px 0, #b3261e 16px, transparent 17px) 0 0 / 68px 12px repeat-x,
              radial-gradient(circle at 51px 0, #f1dcc0 16px, transparent 17px) 0 0 / 68px 12px repeat-x;
}
body.site-banchan .brand {
  font-size: 25px;
  letter-spacing: 0;
  line-height: 1;
}
body.site-banchan .brand a {
  display: inline-block;
  padding: 10px 18px 8px;
  color: #fff4e4;
  background: linear-gradient(180deg, #7a4a1f, #5c3515);
  border: 3px solid #3f230c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 228, .25), 0 3px 0 #3f230c;
  transform: rotate(-1.2deg);
}
body.site-banchan .brand a:hover { color: #fff; text-decoration: none; }

/* 탭: 가격표 꼬리표 */
body.site-banchan .site-head nav { gap: 10px; }
body.site-banchan .site-head nav a {
  position: relative;
  padding: 6px 14px 6px 24px;
  border-radius: 4px 12px 12px 4px;
  background: #fff;
  border: 1.5px dashed var(--sesame);
  color: var(--doenjang);
  font-size: 15px;
  font-weight: 700;
}
body.site-banchan .site-head nav a::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--sesame);
}
body.site-banchan .site-head nav a.on,
body.site-banchan .site-head nav a:hover {
  background: #fff1c9;
  border-style: solid;
  color: #5c3515;
  text-decoration: none;
}

/* 검색창: 공책 메모 */
body.site-banchan .top-search { max-width: var(--wrap); }
body.site-banchan .site-search input[type="search"] {
  border: 2px solid var(--doenjang);
  border-radius: 10px;
  background: #fff;
}
body.site-banchan .site-search button {
  border-radius: 10px;
  background: var(--doenjang);
  font-family: "Do Hyeon", sans-serif;
  font-size: 17px;
  font-weight: 400;
}
body.site-banchan .site-search button:hover { background: #5c3515; }

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

/* ── 제목·경로 ─────────────────────────────────────────────────────────── */
body.site-banchan .crumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
body.site-banchan .crumb a,
body.site-banchan .crumb span {
  padding: 2px 10px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--fg-soft);
}
body.site-banchan .crumb a::after { content: ""; }
body.site-banchan .crumb span { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }

body.site-banchan h1 {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #3f230c;
  margin: 16px 0 22px;
}
/* 붓 형광펜 밑줄 */
body.site-banchan h1 {
  background: linear-gradient(transparent 62%, rgba(217, 154, 30, .38) 62%, rgba(217, 154, 30, .38) 92%, transparent 92%);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.site-banchan h1 + * { margin-top: 22px; }
body.site-banchan .lead { margin: 22px 0 22px; font-size: 16.5px; }
body.site-banchan .data-date { margin: 18px 0 16px; }

/* ── 요약표: 영수증 ───────────────────────────────────────────────────── */
body.site-banchan .summary {
  border: 0;
  border-radius: 0;
  background: #fff;
  font-size: 15px;
  box-shadow: 0 2px 0 var(--line);
  position: relative;
}
body.site-banchan .summary tr + tr th,
body.site-banchan .summary tr + tr td { border-top: 1.5px dashed var(--line); }
body.site-banchan .summary th {
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .5px;
}
body.site-banchan .summary td { font-weight: 700; color: var(--fg); }

/* 전화번호 검색 버튼: 도장 */
body.site-banchan .btn { border-radius: 10px; font-family: "Gowun Dodum", sans-serif; }
body.site-banchan .btn-phone {
  border: 2px solid var(--accent);
  color: var(--accent);
  background: #fff;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 var(--accent-line);
}

/* ── 질답: 레시피 카드 ────────────────────────────────────────────────── */
body.site-banchan .qa-head { font-size: 22px; color: #3f230c; letter-spacing: 0; }
body.site-banchan .qa-head::before {
  content: "찬";
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent);
  font-family: "Do Hyeon", sans-serif;
  font-size: 17px;
  font-weight: 400;
  transform: rotate(-6deg);
}
body.site-banchan .qa-list {
  padding: 6px 22px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 38px, rgba(179, 38, 30, .18) 38px 40px, transparent 40px),
    #fffdf8;
  box-shadow: 0 1px 0 var(--line), 0 6px 0 -2px #efe3d1, 0 10px 18px rgba(92, 53, 21, .08);
}
body.site-banchan .qa-item { padding: 18px 0 18px 30px; border-bottom: 1.5px dashed var(--line); }
body.site-banchan .qa-item:last-child { border-bottom: 0; }
body.site-banchan .qa-item h2 {
  position: relative;
  font-size: 17.5px;
  color: #3f230c;
}
body.site-banchan .qa-item h2::before {
  content: "Q";
  position: absolute;
  left: -40px; top: -1px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--doenjang);
  color: #fff4e4;
  font-family: "Do Hyeon", sans-serif;
  font-size: 15px;
  font-weight: 400;
}
body.site-banchan .qa-item p {
  padding-left: 0;
  color: var(--fg-soft);
  line-height: 1.85;
}

/* ── 목록: 반찬통 카드 ────────────────────────────────────────────────── */
body.site-banchan section.list > h2,
body.site-banchan section.children > h2 {
  font-size: 21px;
  color: #3f230c;
  border-bottom: 0;
  padding-bottom: 0;
}
body.site-banchan .place-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.site-banchan .place-list li {
  --lid: var(--accent);
  position: relative;
  padding: 20px 16px 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 0 var(--line-soft);
  align-content: start;
}
/* 반찬통 뚜껑 띠 — 네 가지 색이 돌아가며 바뀐다(고추장·참기름·쑥·된장) */
body.site-banchan .place-list li::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: -1.5px;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: var(--lid);
}
body.site-banchan .place-list li:nth-child(4n+2) { --lid: var(--sesame); }
body.site-banchan .place-list li:nth-child(4n+3) { --lid: var(--ssuk); }
body.site-banchan .place-list li:nth-child(4n)   { --lid: var(--doenjang); }
body.site-banchan .place-list li > a { font-size: 16.5px; color: #3f230c; }
body.site-banchan .place-list li:hover { border-color: var(--sesame); }
/* 광고 행은 카드가 아니다 — 두 칸을 다 쓰고 장식을 모두 걷는다 */
body.site-banchan .place-list li.ad-row {
  grid-column: 1 / -1;
  padding: 0; border: 0; background: none; box-shadow: none;
}
body.site-banchan .place-list li.ad-row::before { content: none; }

body.site-banchan .cat {
  background: #fff1c9;
  color: #5c3515;
  border: 1px solid #f0d58a;
  border-radius: 4px;
  font-weight: 700;
}
body.site-banchan .dist { background: var(--accent-soft); color: var(--accent-strong); border-radius: 4px; }

/* 지역·메뉴 링크: 동그란 반찬 접시 칩 */
body.site-banchan .region-links {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
body.site-banchan .region-links li {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
body.site-banchan .region-links li:hover { border-color: var(--accent); background: var(--accent-wash); }
body.site-banchan .region-links li > a { color: #3f230c; }

body.site-banchan .menu-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.site-banchan .menu-cards li {
  position: relative;
  padding: 30px 20px 20px;
  border: 2px solid #3f230c;
  border-radius: 18px;
  background: #fff;
  box-shadow: 4px 4px 0 #3f230c;
}
body.site-banchan .menu-cards li::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 14px;
  border-radius: 18px 18px 0 0;
  background: repeating-linear-gradient(90deg, #b3261e 0 18px, #fff4e4 18px 36px);
  border-bottom: 2px solid #3f230c;
}
body.site-banchan .menu-cards li:hover { background: #fff8e8; }
body.site-banchan .menu-cards li > a { font-size: 23px; color: #3f230c; }
body.site-banchan .count {
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--bg-soft);
  color: var(--doenjang);
  font-weight: 700;
}

/* ── 주변 정보: 장보기 쪽지 ───────────────────────────────────────────── */
body.site-banchan .near { border-top: 2px dashed var(--doenjang); }
body.site-banchan .near h2 {
  font-size: 20px;
  border-left: 0;
  padding-left: 0;
  color: #3f230c;
}
body.site-banchan .near h2::before { content: "장보기 · "; color: var(--accent); }
body.site-banchan .near-block {
  padding: 2px 18px 16px;
  border-radius: 12px;
  background: #fffdf8;
  border: 1.5px solid var(--line);
}
body.site-banchan .near ul { padding-left: 0; }

/* 출처·삭제요청·푸터 */
body.site-banchan .removal { border-radius: 14px; }
body.site-banchan .site-foot {
  border-top: 0;
  margin-top: 56px;
  padding: 22px 20px 44px;
  color: #e9d8bf;
  background: linear-gradient(180deg, #5c3515, #3f230c);
  border-radius: 14px 14px 0 0;
}
body.site-banchan .site-foot a { color: #ffd98a; }

@media (max-width: 600px) {
  body.site-banchan .site-head { padding: 54px 16px 14px; }
  body.site-banchan .brand { font-size: 21px; }
  body.site-banchan h1 { font-size: 27px; }
  body.site-banchan .place-list { grid-template-columns: 1fr; }
  body.site-banchan .qa-list { padding: 4px 14px; background: #fffdf8; }
  body.site-banchan .qa-item { padding-left: 32px; }
  body.site-banchan .qa-item h2::before { left: -34px; }
}

/* ── 다크 모드: 늦은 저녁 시장 ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-banchan {
    --fg: #f1e6d6;
    --fg-soft: #cdbca6;
    --muted: #a18f7a;
    --line: #4a3a2b;
    --line-soft: #3a2d21;
    --bg: #211912;
    --bg-soft: #2c2218;
    --accent: #ef6b5e;
    --accent-strong: #ff8e82;
    --accent-soft: #3d201b;
    --accent-wash: #2d1b16;
    --accent-line: #6b3a31;
    --paper: #1a140e;
  }
  body.site-banchan .site-head {
    background:
      linear-gradient(#211912, #211912) 0 44px / 100% calc(100% - 44px) no-repeat,
      repeating-linear-gradient(90deg, #8c1d17 0 34px, #3a2d21 34px 68px) 0 0 / 100% 34px no-repeat;
  }
  body.site-banchan .site-head::before {
    background: radial-gradient(circle at 17px 0, #8c1d17 16px, transparent 17px) 0 0 / 68px 12px repeat-x,
                radial-gradient(circle at 51px 0, #3a2d21 16px, transparent 17px) 0 0 / 68px 12px repeat-x;
  }
  body.site-banchan h1,
  body.site-banchan .qa-head,
  body.site-banchan .qa-item h2,
  body.site-banchan section.list > h2,
  body.site-banchan section.children > h2,
  body.site-banchan .near h2,
  body.site-banchan .place-list li > a,
  body.site-banchan .region-links li > a,
  body.site-banchan .menu-cards li > a { color: #f6e7cf; }
  body.site-banchan .summary,
  body.site-banchan .place-list li,
  body.site-banchan .region-links li,
  body.site-banchan .menu-cards li,
  body.site-banchan .crumb a,
  body.site-banchan .site-head nav a,
  body.site-banchan .site-search input[type="search"],
  body.site-banchan .btn-phone { background: #2a2017; }
  body.site-banchan .qa-list,
  body.site-banchan .near-block {
    background:
      linear-gradient(90deg, transparent 38px, rgba(239, 107, 94, .25) 38px 40px, transparent 40px),
      #261d15;
  }
  body.site-banchan .near-block { background: #261d15; }
  body.site-banchan .menu-cards li { border-color: #d9b98c; box-shadow: 4px 4px 0 #6b4a26; }
  body.site-banchan .site-head nav a { color: #f1d9a8; }
  body.site-banchan .site-head nav a.on,
  body.site-banchan .site-head nav a:hover { background: #3d2f1a; color: #ffe2a6; }
  body.site-banchan .cat { background: #3d2f1a; color: #ffe2a6; border-color: #6b5427; }
}