/* ══════════════════════════════════════════════════════════════════════
   희망드림 판매전 — 디자인 v2 (2026-10-02 대표님 지시)
   「포스터는 확정. 홈페이지는 포스터 이미지를 쓰고, 디자인은 전부 보령머드축제(mudfestival.or.kr)를 따른다」
   이 파일 하나가 모든 쪽의 모양을 정한다. (옛 concept-3d.css · 아랫부분.css 는 더 이상 싣지 않는다)

   보령에서 가져온 틀 → 이 파일의 이름
     검정 머리줄 · 점(•) 구분 메뉴 · 오른쪽 위 색 버튼 · 햄버거   → .bar
     큰 제목 히어로 · 색 강조 슬로건 · 둥근 얼룩(blob) · 스크롤 쥐  → .hero
     왼쪽 세로 점 메뉴 (분홍 알약 HOME)                             → .dots
     오른쪽 떠 있는 동그라미 배지 두 개                             → .fbadge
     히어로 아래 물결 얼룩 · 구역 옆 얼룩                           → .hero-waves · .sec-blob
     가운데 제목 + 물방울 장식                                     → .sec-title (우리는 은행잎)
     행사내용 카드(그림 + 동그란 분류 배지 + 「일시/장소」 이름표)    → .ev-card
     NEWS 흰 카드 두 장 + 「더보기 ＋」                             → .news-card
     축제 영상 남색 구역 + 구름 실루엣                              → .dark-sec
     바로가기 작은 색 카드 세 장                                    → .promo
     후원 & 협력 하늘색 + 흰 동그라미 로고                           → .partners
     짙은 회색 바닥 · 「|」 구분 링크 · FamilySite                   → .ft
     서브 비주얼(가운데 큰 제목 · 좌우 이전/다음) + 흰 경로 상자       → .sv · .crumb
     게시판 탭 · 총 N 개 · 키워드 검색 · 표 · 쪽 번호                → .b-tabs · .b-top · .b-list · .pager
     내용 쪽(동그라미 머리 제목 · 테두리 소개 상자 · 노란 이름표)     → .cont-head · .intro-box · .lbl
   🔴 색은 포스터에서 뽑은 값만 쓴다 (도구/포스터요소.py 머리말과 보고서에 표).
   🔴 CSS content 에 한글을 쓰지 않는다 (폰트 굽기 스크립트가 CSS 는 안 읽는다).
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sky:#89CADE; --sky2:#B3DCDE; --cream:#FFFBFA;
  --blue:#0082CB; --blue-d:#0764A1; --navy:#12355D;
  --red:#E73B36; --purple:#402A8B; --green:#43A763; --mint:#00AD79; --pink:#E8597A;
  --orange:#E98C20; --yellow:#F5AA29; --yellow2:#FBCA2D; --ground:#EDC26B; --flag:#DB6347; --flag2:#FBE8E7;
  --black:#000000; --text:#3E464C;
  /* 위 색에서 만든 옅은 바탕 (보령의 베이지·분홍 구역 자리) */
  --beige:#FBF1DE; --pinkbg:#FDEEEB; --skybg:#EAF5F8; --line:#E4DFD8; --muted:#6E747A;
  --wrap:1200px;
}
*{box-sizing:border-box}
/* 작업 #29 (2026-10-06 백운석 이사 「누르면 위로 안 올라가고 하단에서 뜬다」) : 부드러운 스크롤 끔 — 쪽 이동 때 맨 위로는 gm.js 가 */
html{scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:17px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;border:0;background:none;cursor:pointer}
img{max-width:100%}
p,h1,h2,h3,h4,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:200;background:#fff;color:var(--navy);padding:12px 20px;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:min(var(--wrap),calc(100% - 80px));margin-inline:auto}
.c-toast{position:fixed;z-index:120;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--black);color:#fff;font-size:.875rem;
  padding:14px 22px;border-radius:999px;max-width:calc(100% - 32px);width:max-content;opacity:0;pointer-events:none;transition:.2s}
.c-toast.visible{opacity:1;transform:translate(-50%,0)}
.preview-badge{position:relative;z-index:61}

/* ── 머리줄 (보령 : 검정 바탕 · 왼쪽 로고 · • 구분 메뉴 · 오른쪽 위 색 버튼 · 햄버거) ── */
.bar{position:sticky;top:0;z-index:60;background:var(--black);color:#fff}
.bar-in{position:relative;display:flex;align-items:center;gap:26px;max-width:1440px;margin:0 auto;padding:30px 36px 0;height:98px}
.bar-logo{flex:0 0 auto;display:block;margin-top:-28px}
.bar-logo img{display:block;width:190px;height:auto}
.bar-nav{flex:1 1 auto;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;min-width:0}
.bar-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.03em;white-space:nowrap;transition:color .2s}
.bar-nav a+a::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(255,255,255,.45)}
.bar-nav a:hover,.bar-nav a:focus-visible{color:var(--yellow)}
.bar-nav a[aria-current=page]{color:var(--yellow)}
.bar-nav a.is-wip>span.w{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin:-12px 0 0 3px}
.bar-util{position:absolute;top:0;right:36px;display:flex;gap:4px}
.bar-util a{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;font-size:.75rem;font-weight:700;color:#fff;border-radius:0 0 6px 6px}
.bar-util a.u-blue{background:var(--blue)}.bar-util a.u-green{background:var(--green)}.bar-util a.u-red{background:var(--red)}
.bar-util a:hover{filter:brightness(1.1)}
.c-menu{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;width:44px;height:44px}
.c-menu span{display:block;width:34px;height:2px;background:#fff;transition:.2s}
.c-menu span:last-child{width:24px}
.c-menu[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg);width:28px}
.c-menu[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg);width:28px}
/* 햄버거 = 전체 메뉴(사이트맵). 보령처럼 넓은 화면에서도 보인다 */
.drawer{position:sticky;top:98px;z-index:59;background:var(--black);color:#fff;border-top:1px solid rgba(255,255,255,.12);
  max-height:calc(100vh - 98px);overflow:auto}
.drawer-in{max-width:1440px;margin:0 auto;padding:22px 36px 30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 24px}
.drawer a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:6px 2px;font-size:1rem;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.12)}
.drawer a[aria-current=page]{color:var(--yellow)}
.drawer .drawer-util{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.drawer .drawer-util a{border:0;min-height:36px;padding:0 14px;border-radius:999px;font-size:.8125rem}
.drawer .drawer-util a.u-blue{background:var(--blue)}.drawer .drawer-util a.u-green{background:var(--green)}.drawer .drawer-util a.u-red{background:var(--red)}
.wip-tag{display:inline-flex;align-items:center;flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;
  background:var(--red);color:#fff;white-space:nowrap}
@media(max-width:1240px){.bar-nav a{padding:0 11px;font-size:.9688rem}.bar-logo img{width:170px}}
@media(max-width:1100px){.bar-nav{display:none}.bar-in{justify-content:space-between}}
@media(max-width:700px){
  .bar-in{height:64px;padding:0 16px}
  .bar-logo{margin:0}.bar-logo img{width:150px}
  .bar-util{display:none}
  .drawer{top:64px;max-height:calc(100vh - 64px)}
  .drawer-in{grid-template-columns:1fr;padding:8px 16px 24px}
  html{scroll-padding-top:76px}}

/* ── 제작중 창 ── */
.gm-wip{border:0;padding:0;width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);border-radius:24px;background:#fff;color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.35)}
.gm-wip::backdrop{background:rgba(0,0,0,.6)}
.gm-wip-in{padding:34px 28px 28px;text-align:center;border-top:8px solid var(--yellow)}
.gm-chars{display:flex;justify-content:center;gap:10px;margin-bottom:16px}
.gm-chars img{display:block;width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 2px var(--black)}
.gm-wip h2{font-size:1.625rem;font-weight:800;color:var(--black);letter-spacing:-.04em;line-height:1.3}
.gm-wip h2 small{display:block;font-size:.875rem;font-weight:700;color:var(--orange);margin-bottom:6px}
.gm-wip p{font-size:.9375rem;line-height:1.7;color:var(--muted);margin-top:12px}
.gm-wip .gm-wip-desc{color:var(--text);font-weight:600}
.gm-wip-actions{display:flex;gap:8px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font-size:.9375rem;
  font-weight:700;background:var(--black);color:#fff;transition:.2s}
.btn:hover{background:var(--navy)}
.btn.line{background:#fff;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)}
.btn.line:hover{background:var(--black);color:#fff}
.btn.yellow{background:var(--yellow);color:var(--black)}

/* ── 오른쪽 떠 있는 동그라미 배지 (보령 : 국가유산야행 · 뷰티치유관) ── */
.fbadge{position:fixed;right:22px;top:46%;z-index:45;display:none;flex-direction:column;gap:14px}
.fbadge a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:124px;height:124px;border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,.22);line-height:1.25;transition:transform .2s}
.fbadge a:hover{transform:scale(1.05)}
.fbadge .fb-on{background:var(--purple);color:#fff}
.fbadge .fb-on small{font-size:.6875rem;font-weight:600;opacity:.85}
.fbadge .fb-on b{font-size:1rem;font-weight:800;margin:4px 0 2px}
.fbadge .fb-on span{font-size:.75rem;font-weight:700;color:var(--yellow2)}
.fbadge .fb-ch{background:#fff;color:var(--black)}
.fbadge .fb-ch span.f{display:flex;margin-bottom:4px}
.fbadge .fb-ch img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff}
.fbadge .fb-ch img+img{margin-left:-8px}
.fbadge .fb-ch b{font-size:.75rem;font-weight:800}
@media(min-width:1100px){.fbadge{display:flex}}
@media(max-width:1300px){.fbadge a{width:104px;height:104px}.fbadge .fb-ch img{width:34px;height:34px}}

/* ── 왼쪽 세로 점 메뉴 (보령 : HOME 분홍 알약) ── */
.dots{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:45;display:none;flex-direction:column;gap:6px}
.dots a{display:flex;align-items:center;gap:8px;min-height:24px;font-size:.75rem;font-weight:700;color:var(--black);
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.dots a::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.dots a span{padding:2px 9px;border-radius:999px;transition:.2s}
.dots a[aria-current=true]::before{background:var(--pink);box-shadow:0 0 0 2px #fff}
.dots a[aria-current=true] span{background:var(--pink);color:#fff;text-shadow:none}
.dots.on-dark a{color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6)}
@media(min-width:1100px){.dots{display:flex}
  body.has-dots .wrap{width:min(var(--wrap),calc(100% - 300px))}}

/* ── 히어로 (보령 : 슬로건 → 아주 큰 제목 → 날짜, 제목 뒤 둥근 얼룩, 화면 가득한 그림) ── */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 40%,var(--cream) 78%);
  padding:70px 0 6.5vw;text-align:center;color:var(--black)}
.hero-bunting{position:absolute;top:0;width:min(470px,46vw);height:auto;pointer-events:none}
.hero-bunting.l{left:0}.hero-bunting.r{right:0;transform:scaleX(-1)}
.hero-leaf{position:absolute;pointer-events:none;height:auto;animation:leaf 7s ease-in-out infinite}
.hero-leaf.a{width:84px;left:8%;top:300px;animation-delay:-2s}
.hero-leaf.b{width:92px;right:7%;top:120px}
.hero-leaf.c{width:70px;right:16%;top:420px;animation-delay:-4s}
@keyframes leaf{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(14px) rotate(9deg)}}
.hero-in{position:relative;z-index:3;width:min(1100px,calc(100% - 32px));margin:0 auto}
.hero-slogan{position:relative;z-index:2;font-size:clamp(1.3rem,2.6vw,2.25rem);font-weight:900;letter-spacing:-.04em;line-height:1.3;color:var(--text)}
/* 작업 #29 : 그림자 4개 테두리는 획 모서리가 갈라졌다 → 바깥 획.
   작업 #36 : 본 글자에 준 획(paint-order)은 이를 모르는 휴대폰 브라우저에서 글자 안쪽을 파먹어 여전히 갈라졌다
   → 흰 획은 뒤에 깐 사본(-ol)에만 주고, 본 글자(-tx)는 획 없이 그 위에 얹는다. 슬로건 전체는 노란 원(z 1)보다 위(z 2) */
.hero-slogan-ol{position:absolute;inset:0;color:#fff;-webkit-text-stroke:8px #fff;pointer-events:none;user-select:none}
.hero-slogan-tx{position:relative}
.hero-slogan em{font-style:normal}
.hero-slogan .r{color:var(--red)}.hero-slogan .b{color:var(--blue)}
.hero-title{position:relative;margin:26px auto 0;width:min(1000px,100%)}
.hero-ed{position:relative;z-index:2;font-size:clamp(1.6rem,3.6vw,3.1rem);font-weight:900;letter-spacing:-.04em;line-height:1;text-align:left;margin:0 0 10px 3%}
.hero-ed .p{color:var(--purple)}.hero-ed .g{color:var(--green);margin-left:.3em}
.hero-title img{position:relative;z-index:2;display:block;width:100%;height:auto}
/* 작업 #29 : 노란 원이 「2026년」 글자 뒤에 깔려 겹쳐 보였다 → 글자가 없는 오른쪽 위(「판매전」 뒤)로 */
.hero-blob{position:absolute;z-index:1;right:-4%;left:auto;top:-16%;width:24%;height:auto;opacity:.95}
.hero-date{margin-top:22px;font-size:clamp(1.15rem,2.4vw,2.05rem);font-weight:800;letter-spacing:-.03em;color:var(--black)}
.hero-date b{color:var(--red)}
.hero-online{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:14px;padding:8px 18px;border-radius:999px;
  background:#fff;box-shadow:0 4px 0 rgba(64,42,139,.18);font-size:.9375rem;font-weight:700}
.hero-online .tag{background:var(--purple);color:#fff;border-radius:999px;padding:2px 10px;font-size:.8125rem}
.hero-online b{color:var(--purple)}
.hero-count{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}
.count-label{display:inline-flex;align-items:center;gap:10px;background:var(--black);color:#fff;border-radius:999px;padding:6px 8px 6px 18px;font-size:.8125rem;font-weight:700}
.count-label strong{display:inline-block;background:var(--yellow);color:var(--black);border-radius:999px;padding:3px 14px;font-size:1.125rem;font-weight:900;
  font-variant-numeric:tabular-nums;overflow:hidden}
.count-label strong i{font-style:normal}
.hero-scroll{display:block;width:26px;height:42px;border:2px solid var(--black);border-radius:14px;position:relative}
.hero-scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--black);animation:scroll 1.6s infinite}
@keyframes scroll{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
/* 작업 #29 : 장터 그림 아래가 일자로 잘려 보였다 → 그림을 히어로 바닥까지 내리고 물결을 그림 위(z 3)에 얹어 끝을 덮는다.
   물결의 첫 판(윗변이 곧은 땅색 띠)은 그림 위에 일자 선을 만들므로 감춘다 */
.hero{padding-bottom:0}
.hero-scene{position:relative;z-index:2;display:block;width:100%;height:auto;margin-top:-30px}
.hero-waves{position:absolute;z-index:3;left:0;right:0;bottom:-2px;width:100%;height:9.6vw;display:block}
.hero-waves path:first-child{display:none}
@media(max-width:700px){
  /* 작업 #29 : 가랜드는 머리줄 바로 밑 가장자리에 작게 고정 · 슬로건은 그 아래에서 시작해 겹치지 않는다 */
  .hero{padding-top:calc(15vw + 10px)}
  .hero-bunting{width:34vw}.hero-bunting.r{display:block}
  .hero-waves{height:14vw}
  .hero-leaf.a{width:48px;left:2%;top:250px}.hero-leaf.b{width:54px;right:3%;top:60px}.hero-leaf.c{display:none}
  .hero-title{margin-top:18px}
  .hero-ed{margin-left:2%}
  .hero-online{font-size:.8125rem;padding:8px 14px;border-radius:18px}
  .hero-scene{margin-top:0}}
@media(prefers-reduced-motion:reduce){.hero-leaf,.hero-scroll::after{animation:none}html{scroll-behavior:auto}*{transition:none!important}}

/* ── 공통 구역 (보령 : 가운데 큰 제목 + 오른쪽 위 물방울 → 우리는 은행잎) ── */
.sec{position:relative;padding:100px 0;overflow:hidden}
.sec-title{position:relative;width:max-content;max-width:calc(100% - 40px);margin:0 auto;text-align:center;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.25;color:var(--black)}
.sec-title::after{content:"";position:absolute;right:-34px;top:-16px;width:34px;height:28px;background:url(img/poster/leaf-ginkgo.webp) center/contain no-repeat}
.sec-kicker{display:block;text-align:center;font-size:clamp(1.5rem,2.8vw,2.375rem);font-weight:800;letter-spacing:-.04em;color:var(--red);margin-bottom:18px}
.sec-lead{text-align:center;font-size:1.0625rem;line-height:1.8;color:var(--text);margin:18px auto 0;max-width:720px}
.sec-head{margin-bottom:54px}
.sec-foot{text-align:center;margin-top:44px}
.footnote{font-size:.875rem;color:var(--muted);text-align:center;margin-top:26px;line-height:1.7}
.footnote a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.footnote a.btn{color:#fff;text-decoration:none;min-height:40px;padding:0 20px;margin:4px 6px;vertical-align:middle}
.sec-blob{position:absolute;z-index:0;pointer-events:none;width:280px;height:auto}
.sec>.wrap{position:relative;z-index:1}
@media(max-width:700px){.sec{padding:64px 0}.sec-head{margin-bottom:34px}.sec-title::after{right:-26px;top:-12px;width:26px;height:22px}
  .sec-lead{font-size:.9688rem}.sec-blob{width:150px}.wrap{width:calc(100% - 32px)}}

/* ① 판매전은 + 바로가기 (보령 「보령머드축제는」 분홍 그라데이션 구역) */
.sec-intro{background:linear-gradient(180deg,var(--beige) 0%,#fff 100%);padding-top:70px}
/* 작업 #95 (10/12 이사님 「가운데 바로가기가 센터가 안맞자나」) : 8칸 격자에 7개라 왼쪽으로 쏠렸다 → 칸 폭은 그대로(1/8 · 1/4), 줄은 가운데로 */
.q-list{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 10px;margin-top:50px}
.q-list>li{flex:0 0 calc((100% - 70px) / 8);min-width:0}
.q-list a{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.q-ico{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition:transform .25s}
.q-ico img{display:block;width:74px;height:74px;object-fit:contain}
.q-list a:hover .q-ico{transform:translateY(-5px)}
.q-list li:nth-child(1) .q-ico{box-shadow:0 0 0 4px var(--blue),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(2) .q-ico{box-shadow:0 0 0 4px var(--red),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(3) .q-ico{box-shadow:0 0 0 4px var(--purple),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(4) .q-ico{box-shadow:0 0 0 4px var(--green),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(5) .q-ico{box-shadow:0 0 0 4px var(--orange),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(6) .q-ico{box-shadow:0 0 0 4px var(--pink),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(7) .q-ico{box-shadow:0 0 0 4px var(--mint),0 8px 20px rgba(0,0,0,.12)}
.q-list li:nth-child(8) .q-ico{box-shadow:0 0 0 4px var(--yellow),0 8px 20px rgba(0,0,0,.12)}
.q-no{position:absolute;top:-2px;left:-2px;width:30px;height:30px;border-radius:50%;background:var(--black);color:#fff;font-size:.8125rem;font-weight:800;
  display:grid;place-items:center}
.q-label{font-size:1.0625rem;font-weight:800;color:var(--black);letter-spacing:-.04em;line-height:1.3}
.q-list .wip-tag{margin-top:-4px}
@media(max-width:1100px){.q-list{gap:26px 10px}.q-list>li{flex-basis:calc((100% - 30px) / 4)}}
@media(max-width:700px){.sec-intro{padding-top:46px}.q-list{gap:20px 4px;margin-top:34px}.q-list>li{flex-basis:calc((100% - 12px) / 4)}.q-ico{width:66px;height:66px}.q-ico img{width:44px;height:44px}
  .q-no{width:22px;height:22px;font-size:.6875rem}.q-label{font-size:.8125rem}.q-list .wip-tag{font-size:.625rem;padding:4px 6px}}

/* ② 숫자 카드 (보령 NEWS 흰 카드 모양) */
.stat-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.stat{position:relative;background:#fff;border-radius:20px;padding:30px 32px;box-shadow:0 6px 24px rgba(0,0,0,.08);overflow:hidden;min-height:170px}
.stat .lbl{margin-bottom:12px}
.stat-num{font-size:3rem;font-weight:900;color:var(--black);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-num span{font-size:1rem;font-weight:700;color:var(--orange);margin-left:6px}
.stat-say{font-size:.9375rem;color:var(--muted);margin-top:10px;max-width:70%}
.stat img{position:absolute;right:16px;bottom:12px;width:86px;height:86px;object-fit:contain}
@media(max-width:900px){.stat-cards{grid-template-columns:1fr;gap:14px}.stat{min-height:0;padding:24px 22px}.stat-num{font-size:2.4rem}.stat img{width:64px;height:64px}}

/* 이름표 (보령 : 「일시」 「장소」 베이지 알약 · 캐릭터 노란 띠) */
.lbl{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:700;color:var(--text);background:var(--beige);border-radius:999px;padding:3px 11px;white-space:nowrap}
.lbl.y{background:var(--yellow2);color:var(--black);border-radius:4px}

/* ③ 품목 — 보령 「행사내용」 카드 (그림 위 · 동그란 분류 배지 · 이름표 줄) */
.sec-picks{background:#fff}
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ev-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.25s}
.ev-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.1);transform:translateY(-4px)}
.ev-img{position:relative;display:grid;place-items:center;height:200px;background:var(--skybg)}
.ev-grid li:nth-child(2) .ev-img{background:var(--pinkbg)}
.ev-grid li:nth-child(3) .ev-img{background:var(--beige)}
.ev-grid li:nth-child(4) .ev-img{background:#EEF7F0}
.ev-grid li:nth-child(5) .ev-img{background:#EFEBF7}
.ev-grid li:nth-child(6) .ev-img{background:var(--flag2)}
.ev-img img{width:140px;height:140px;object-fit:contain}
.ev-badge{position:absolute;right:18px;bottom:-26px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:#fff;font-size:.8125rem;
  font-weight:800;line-height:1.15;text-align:center;box-shadow:0 0 0 4px #fff}
.ev-grid li:nth-child(1) .ev-badge{background:var(--blue)}
.ev-grid li:nth-child(2) .ev-badge{background:var(--red)}
.ev-grid li:nth-child(3) .ev-badge{background:var(--purple)}
.ev-grid li:nth-child(4) .ev-badge{background:var(--green)}
.ev-grid li:nth-child(5) .ev-badge{background:var(--orange)}
.ev-grid li:nth-child(6) .ev-badge{background:var(--pink)}
.ev-body{padding:30px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.ev-body h3{font-size:1.375rem;font-weight:800;color:var(--black);letter-spacing:-.04em}
.ev-info{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;font-size:.9375rem}
.ev-info dt{margin:0}
.ev-info dd{color:var(--text)}
.ev-info dd.o{color:var(--orange);font-weight:800}
@media(max-width:1000px){.ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:600px){.ev-grid{grid-template-columns:1fr}.ev-img{height:150px}.ev-img img{width:104px;height:104px}.ev-body h3{font-size:1.1875rem}}

/* ④ 참가기업 — 보령 NEWS (베이지 바탕 · 흰 카드 두 장 · 「더보기 ＋」) */
.sec-news{background:var(--beige)}
.news-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.news-card{background:#fff;border-radius:20px;padding:28px 30px 24px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.news-card header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.news-card h3{font-size:1.5rem;font-weight:800;color:var(--black);letter-spacing:-.04em}
.more{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--text);min-height:36px}
.more i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-weight:800;line-height:1}
.news-list li a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;font-size:1rem;font-weight:600;color:var(--black)}
.news-list li a:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
.news-list li a span:last-child{flex:0 0 auto;color:var(--muted);font-weight:500;font-size:.9375rem;font-variant-numeric:tabular-nums}
.news-list .bar-g{flex:1 1 auto;height:6px;border-radius:3px;background:var(--line);overflow:hidden;max-width:46%}
.news-list .bar-g i{display:block;height:100%;background:var(--orange);border-radius:3px}
@media(max-width:800px){.news-cards{grid-template-columns:1fr;gap:16px}.news-card{padding:22px 20px 18px}.news-card h3{font-size:1.25rem}
  .news-list li a{font-size:.9375rem}}

/* ⑤ 프로그램 — 보령 「축제 영상」 남색 구역 · 구름 실루엣 · 아래 산 물결 */
.dark-sec{background:linear-gradient(180deg,#0E2A4A 0%,var(--navy) 55%,#1B4472 100%);color:#fff}
.dark-sec .sec-title,.dark-sec .sec-lead{color:#fff}
.dark-sec .footnote{color:rgba(255,255,255,.75)}
.cloud{position:absolute;z-index:0;width:240px;height:90px;opacity:.14;pointer-events:none;border-radius:60px 60px 0 0;background:#fff}
.cloud::before,.cloud::after{content:"";position:absolute;bottom:0;border-radius:50%;background:#fff}
.cloud::before{left:30px;width:110px;height:110px}
.cloud::after{right:24px;width:90px;height:90px}
.cloud.l{left:-60px;top:90px}.cloud.r{right:-40px;top:40px;transform:scale(1.3)}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:160px;pointer-events:none;z-index:0}
.c-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.35)}
.c-tabs>button{display:flex;justify-content:center;align-items:baseline;gap:10px;min-height:66px;padding:10px;color:#fff;transition:.2s}
.c-tabs>button strong{font-size:1.75rem;font-weight:900;font-variant-numeric:tabular-nums}
.c-tabs>button span{font-size:.9375rem;font-weight:600}
.c-tabs>button[aria-selected=true]{background:var(--yellow);color:var(--black);border-radius:24px 0 0 0}
.sched{margin-top:26px;background:#fff;color:var(--text);border-radius:22px;overflow:hidden}
.sched-head{display:grid;grid-template-columns:200px 1fr;background:var(--sky);color:var(--black);font-weight:800;text-align:center;padding:16px 0}
#c-schedule{padding:6px 26px}
.c-row{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.c-row:last-child{border-bottom:0}
.c-row .ico{display:none}
.c-row time{justify-self:center;background:#EDEDED;color:var(--black);border-radius:999px;padding:6px 16px;font-size:.875rem;font-weight:800}
.c-row h3{font-size:1.125rem;font-weight:800;color:var(--black)}
.c-row p{font-size:.9375rem;color:var(--muted);margin-top:2px}
.schedule-pending{padding:30px 0;text-align:center}
@media(max-width:700px){.c-tabs>button{flex-direction:column;align-items:center;gap:0;min-height:72px}.c-tabs>button strong{font-size:1.5rem}
  .c-tabs>button span{font-size:.75rem}.sched-head{display:none}#c-schedule{padding:4px 16px}
  .c-row{grid-template-columns:1fr;gap:8px;padding:16px 0}.c-row time{justify-self:start}}

/* ⑥ 이벤트 — 보령 하단 작은 색 카드 세 장 (제목 · 설명 · 「바로가기」 알약 · 오른쪽 아래 그림) */
.sec-promo{background:var(--beige)}
.promo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.promo{position:relative;border-radius:20px;padding:30px 28px 28px;min-height:250px;box-shadow:0 6px 22px rgba(0,0,0,.07);display:flex;flex-direction:column;gap:10px}
.promo.p1{background:#FCE6C4}.promo.p2{background:var(--flag2)}.promo.p3{background:#fff}
.promo h3{font-size:1.4375rem;font-weight:800;color:var(--black);letter-spacing:-.04em}
.promo p{font-size:.9375rem;color:var(--text);max-width:72%}
.promo .note{font-size:.8125rem;color:var(--muted)}
.promo .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;font-size:.8125rem;font-weight:700;
  background:rgba(0,0,0,.08);color:var(--black)}
.promo .go:hover{background:var(--black);color:#fff}
.promo img{position:absolute;right:14px;bottom:12px;width:92px;height:92px;object-fit:contain}
@media(max-width:900px){.promo-cards{grid-template-columns:1fr;gap:14px}.promo{min-height:0}.promo img{width:70px;height:70px}}

/* ⑦ 주최·주관 · 협업기관 — 보령 「후원 & 협력」 (하늘색 · 구름 · 흰 동그라미) */
.partners{background:var(--sky);padding-bottom:120px}
.partners .cloud{opacity:.55}
.partners .cloud.l{top:auto;bottom:30px}.partners .cloud.r{top:auto;bottom:10px}
.p-circles{display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.p-circle{position:relative;display:grid;place-items:center;width:210px;height:210px;border-radius:50%;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.15);padding:30px}
.p-circle img{display:block;width:100%;height:auto}
.p-circle .rib{position:absolute;top:-6px;right:14px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:.6875rem;font-weight:800;line-height:1.15;text-align:center;box-shadow:0 0 0 3px #fff}
.p-names{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:44px}
.p-names li{background:#fff;border-radius:999px;padding:12px 22px;font-size:.9375rem;font-weight:700;color:var(--navy);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.p-names .k{background:var(--navy);color:#fff}
@media(max-width:700px){.p-circles{gap:14px}.p-circle{width:104px;height:104px;padding:14px}.p-circle .rib{width:38px;height:38px;font-size:.5625rem;right:0}
  .p-names{gap:8px;margin-top:28px}.p-names li{padding:9px 14px;font-size:.8125rem}.partners{padding-bottom:90px}}

/* ── 바닥 (보령 : 짙은 회색 · 왼쪽 로고 · 「|」 구분 노란 링크 · 오른쪽 FamilySite · 저작권) ── */
.ft{background:#333333;color:#BDBDBD;padding:46px 0 40px;font-size:.875rem}
.ft-in{width:min(1320px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 46px;align-items:start}
.ft-logo img{display:block;width:170px;height:auto}
.ft-links{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ft-links a{display:inline-flex;align-items:center;gap:5px;min-height:32px;font-weight:700;color:var(--yellow)}
.ft-links a:first-child{color:#fff}
.ft-links a+a::before{content:"";display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.35);margin:0 14px}
.ft-links .wip-tag{font-size:.5625rem;padding:3px 5px}
.ft-info p{line-height:1.8}
.ft-info b{color:#fff;font-weight:700}
.ft-side{display:flex;flex-direction:column;align-items:flex-end;gap:40px}
.ft-family{position:relative}
.ft-family summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:200px;min-height:44px;
  padding:0 20px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#ddd;font-weight:600}
.ft-family summary::-webkit-details-marker{display:none}
.ft-family summary::after{content:"";width:7px;height:7px;border-right:2px solid #ddd;border-top:2px solid #ddd;transform:rotate(-45deg);margin-top:4px}
.ft-family[open] summary::after{transform:rotate(135deg);margin-top:-4px}
.ft-family ul{position:absolute;bottom:52px;right:0;min-width:200px;background:#fff;color:var(--black);border-radius:14px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ft-family li a{display:block;padding:10px 12px;border-radius:8px;font-weight:600}
.ft-family li a:hover{background:var(--beige)}
.ft-copy{font-size:.8125rem;color:#BDBDBD}
.ft-copy b{color:var(--yellow)}
@media(max-width:900px){.ft-in{grid-template-columns:1fr;width:calc(100% - 32px)}.ft-side{align-items:flex-start;gap:16px}
  .ft-family ul{right:auto;left:0}}

/* ══ 서브 쪽 ══════════════════════════════════════════════════════════ */
/* 서브 비주얼 (보령 : 사진 위 가운데 큰 흰 제목 + 물방울 · 왼쪽/오른쪽 이전·다음 메뉴) */
/* 작업 #29 (2026-10-06 백운석 이사 「서브배너들 애매하게 들어간 이미지」) : 어둡게 덮은 장터 그림을 빼고 하늘색 바탕 + 은행잎 띠 */
.sv{position:relative;height:330px;overflow:hidden;color:var(--navy);text-align:center;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 70%,var(--cream) 100%)}
.sv::before{content:"";position:absolute;left:0;right:0;bottom:58px;height:46px;pointer-events:none;
  background:url(img/poster/leaf-ginkgo.webp) 3% 30%/34px auto no-repeat,url(img/poster/leaf-maple.webp) 13% 80%/26px auto no-repeat,
    url(img/poster/leaf-ginkgo2.webp) 23% 20%/32px auto no-repeat,url(img/poster/leaf-ginkgo.webp) 77% 70%/30px auto no-repeat,
    url(img/poster/leaf-maple.webp) 87% 20%/28px auto no-repeat,url(img/poster/leaf-ginkgo2.webp) 97% 60%/34px auto no-repeat}
.sv-in{position:relative;z-index:1;height:100%;width:min(1320px,calc(100% - 80px));margin:0 auto;display:flex;align-items:center;justify-content:center}
.sv h1{position:relative;font-size:clamp(2.2rem,4.6vw,3.75rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;padding-bottom:30px}
.sv h1::after{content:"";position:absolute;right:-40px;top:-18px;width:40px;height:32px;background:url(img/poster/leaf-ginkgo.webp) center/contain no-repeat}
.sv-nav{position:absolute;top:50%;margin-top:-30px;display:flex;flex-direction:column;gap:6px;font-size:.9375rem;font-weight:700;min-width:150px}
.sv-nav::after{content:"";display:block;height:1px;background:var(--navy)}
.sv-prev{left:0;align-items:flex-end;text-align:right}
.sv-prev::before{content:"";position:absolute;left:0;bottom:-1px;width:26px;height:1px;background:var(--navy);transform-origin:left;transform:rotate(-28deg)}
.sv-next{right:150px;align-items:flex-start}
.sv-next::before{content:"";position:absolute;right:0;bottom:-1px;width:26px;height:1px;background:var(--navy);transform-origin:right;transform:rotate(28deg)}
.sv-nav a{display:block;min-height:30px;padding:0 4px}
.sv-nav a:hover{color:var(--red)}
/* 흰 경로 상자 (보령 : 집 아이콘 | 1단 ▾ | 2단 ▾) */
.crumb{position:relative;z-index:5;width:min(1260px,calc(100% - 80px));margin:-42px auto 0;background:#fff;border-radius:10px 10px 0 0;
  box-shadow:0 6px 24px rgba(0,0,0,.12);display:flex;align-items:stretch;min-height:84px}
.crumb>a.home{display:grid;place-items:center;width:84px;border-right:1px solid var(--line)}
.crumb>a.home svg{width:20px;height:20px}
.crumb details{position:relative;min-width:260px;border-right:1px solid var(--line)}
.crumb summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%;min-height:84px;padding:0 26px;
  font-size:1rem;font-weight:600;color:var(--black)}
.crumb summary::-webkit-details-marker{display:none}
.crumb summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(45deg);margin-top:-5px}
.crumb details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.crumb details ul{position:absolute;left:0;right:0;top:100%;background:#fff;border-radius:0 0 12px 12px;box-shadow:0 14px 26px rgba(0,0,0,.14);padding:8px;z-index:6}
.crumb details li a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font-weight:600}
.crumb details li a:hover,.crumb details li a[aria-current=page]{background:var(--beige);color:var(--orange)}
.sub-body{padding:70px 0 100px}
@media(max-width:900px){.sv-nav{display:none}}
@media(max-width:700px){.sv{height:200px}.sv::before{bottom:32px;height:36px;background-size:24px auto,20px auto,22px auto,22px auto,20px auto,24px auto}.sv h1{padding-bottom:20px}.sv h1::after{right:-28px;top:-10px;width:28px;height:22px}
  .crumb{width:calc(100% - 32px);margin-top:-28px;min-height:56px}
  .crumb>a.home{width:52px}.crumb details{min-width:0;flex:1 1 0}.crumb details:first-of-type{display:none}
  .crumb summary{min-height:56px;padding:0 16px;font-size:.9375rem}
  .sub-body{padding:40px 0 70px}.sv-in{width:calc(100% - 32px)}}

/* 내용 쪽 (보령 「캐릭터 소개」 : 동그라미 머리 제목 · 테두리 소개 상자 · 주황 점 목록 · 노란 이름표) */
/* 작업 #24 (2026-10-05 백운석 이사 「정렬 깨지자나」) : 원은 글자 뒤(z-index -1) · 첫 줄 가운데 · 글자는 원 옆(여백 40px)에서 시작해 겹치지 않는다 */
.cont-head{position:relative;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--black);letter-spacing:-.04em;line-height:1.35;margin:60px 0 26px;padding-left:40px;z-index:0}
.cont-head::before{content:"";position:absolute;left:0;top:calc(.675em - 14px);width:28px;height:28px;border-radius:50%;background:var(--yellow);z-index:-1}
.cont-head:first-child{margin-top:0}
.intro-box{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;align-items:center;border:1px solid var(--line);
  border-radius:22px;padding:34px 40px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.intro-box::before{content:"";position:absolute;left:-1px;top:-1px;width:120px;height:60px;border-top:5px solid var(--yellow);border-left:5px solid var(--yellow);border-radius:22px 0 0 0}
.intro-box.solo{grid-template-columns:1fr}
.intro-box+.intro-box{margin-top:18px}
.intro-box .pics{display:flex;justify-content:center}
.intro-box .pics img{width:118px;height:118px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--black)}
.intro-box .pics img+img{margin-left:-18px}
/* 작업 #29 (2026-10-06 백운석 이사 「판매전 소개에는 포스터 이미지가 좋을듯」) : 캐릭터 원 두 개 → 포스터 장터 그림 (포스터처럼 하늘색 바탕) */
.intro-box.has-poster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.intro-box .pics.poster{display:block;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 45%,var(--cream) 100%)}
.intro-box .pics.poster img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;object-fit:contain}
/* 작업 #43 (2026-10-08 백운석 이사 「왼쪽에 정식 포스터 오른쪽에 개요표」「이미지가 짤려서 내용이 안보이자나」) :
   소개+개요를 한 상자로. 그림 칸은 그림 비율(2400:1008)로 고정해 어떤 폭에서도 전체가 보이고, 오른쪽 표는 반 폭에 맞게 이름 칸을 좁힌다 */
.intro-box.overview{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
.intro-box.overview .pics.poster{aspect-ratio:2400/1008;width:100%}
.intro-box.overview .pics.poster img{width:100%;height:100%;object-fit:contain}
.intro-box.overview .tbl{box-shadow:none;border:1px solid var(--line)}
.intro-box.overview .tbl-head,.intro-box.overview .tbl-row{grid-template-columns:116px minmax(0,1fr)}
.intro-box.overview .tbl-head{padding:12px 0}
.intro-box.overview .tbl-row{gap:12px;padding:12px 16px 12px 0}
.intro-box.overview .tbl-row>span{padding:5px 12px;font-size:.8125rem;white-space:nowrap}
.intro-box.overview .tbl-row>div{font-size:.9375rem;line-height:1.55;overflow-wrap:anywhere}
.intro-box h2{font-size:1.5rem;font-weight:800;color:var(--black);letter-spacing:-.04em;margin-bottom:14px}
.bul li{position:relative;padding-left:18px;margin-top:8px;font-size:1rem;line-height:1.7}
.bul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.bul li b{color:var(--black)}
.note{font-size:.875rem;color:var(--muted);margin-top:16px}
/* 보령 「행사일정표」 표 (하늘 머리줄 · 회색 알약 이름) */
.tbl{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.tbl-head{display:grid;grid-template-columns:220px 1fr;background:var(--sky);color:var(--black);font-weight:800;text-align:center;padding:18px 0;border-bottom:2px solid var(--black)}
.tbl-row{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:18px;padding:20px 28px 20px 0;border-bottom:1px solid var(--line)}
.tbl-row:last-child{border-bottom:0}
.tbl-row>span{justify-self:center;background:#EDEDED;color:var(--black);font-weight:800;border-radius:999px;padding:7px 20px;font-size:.9375rem}
.tbl-row>div{font-size:1rem;color:var(--text)}
.tbl-row>div b{color:var(--black)}
.tbl-row>div small{display:block;color:var(--muted);font-size:.875rem}
.tbl-row a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.chars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.chars figure{text-align:center}
/* 작업 #29 (「원형으로 잘린 이미지」) : 원형 자르기 해제 — 그림 전체를 그대로 보인다 */
.chars img{display:block;margin:0 auto;width:220px;height:auto;max-width:100%;border-radius:0;object-fit:contain;box-shadow:0 0 0 3px var(--black)}
.chars figcaption{margin-top:18px}
.chars p{margin-top:8px;font-size:.9375rem;color:var(--muted)}
.wipbox{display:flex;gap:12px;align-items:flex-start;border:1px dashed #D6CDBE;background:var(--beige);border-radius:14px;padding:16px 18px;font-size:.9375rem}
.wipbox+.wipbox{margin-top:10px}
.wipbox .wip-tag{margin-top:2px}
.wipbox .btn{white-space:nowrap}
/* 작업 #24 : 휴대폰 폭에서는 세로 배치 · 「농사랑 기획전 바로가기」 단추는 폭 100% 한 줄 */
@media(max-width:700px){.wipbox{flex-direction:column;align-items:stretch;gap:10px}.wipbox .wip-tag{align-self:flex-start;margin-top:0}
  .wipbox .btn{display:flex;width:100%}}
@media(max-width:700px){.intro-box{grid-template-columns:1fr;padding:26px 20px;gap:18px}.intro-box .pics img{width:90px;height:90px}
  .intro-box.has-poster{grid-template-columns:1fr}.intro-box .pics.poster img{width:100%;height:auto}
  .tbl-head{display:none}.tbl-row{grid-template-columns:1fr;gap:8px;padding:16px 18px}.tbl-row>span{justify-self:start}
  .intro-box.overview{grid-template-columns:1fr}.intro-box.overview .tbl-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .chars{gap:14px}.chars img{width:140px;height:auto}.cont-head{margin-top:44px}}

/* 기업검색 (보령 게시판 : 분류 탭 · 「총 N 개」 · 키워드 검색 · 표 · 쪽 번호) */
.b-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:46px}
.b-tabs button{min-height:58px;padding:6px;font-size:1rem;font-weight:700;color:var(--black);border-top:1px solid #999;border-bottom:1px solid #999;
  background:#fff;transition:.2s}
.b-tabs button small{margin-left:4px;font-size:.8125rem;color:var(--muted);font-weight:600}
.b-tabs button[aria-pressed=true]{background:var(--yellow);color:var(--black);border-color:var(--yellow);border-radius:24px 0 0 0}
.b-tabs button[aria-pressed=true] small{color:var(--black)}
.b-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:2px solid var(--black)}
.b-total{font-size:.9375rem;font-weight:600}
.b-total strong{color:var(--orange);font-weight:800}
.b-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-search>span{font-size:.9375rem;font-weight:700;color:var(--black);margin-right:4px}
.b-search select,.b-search input{height:46px;border:1px solid #B9B9B9;background:#fff;font:inherit;font-size:.9375rem;color:var(--black);padding:0 12px;border-radius:0}
.b-search select{min-width:130px}
.b-search input{width:260px}
.b-search button{display:grid;place-items:center;width:46px;height:46px;background:#333;color:#fff}
.b-search button svg{width:22px;height:22px}
.b-reset{white-space:nowrap;font-size:.875rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:44px}
.b-list{border-bottom:1px solid #999}
.b-row{display:grid;grid-template-columns:70px 120px minmax(0,1.3fr) minmax(0,1.4fr) 100px;align-items:center;gap:12px;min-height:58px;padding:10px 0;
  border-bottom:1px solid var(--line);text-align:center;font-size:.9688rem}
.b-head{font-weight:700;color:var(--black);border-bottom:1px solid #999}
.b-list li:last-child .b-row{border-bottom:0}
a.b-row:hover .b-name{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.b-no{color:var(--muted);font-variant-numeric:tabular-nums}
.b-cat{justify-self:center;display:inline-flex;align-items:center;border:1px solid var(--blue);color:var(--blue);border-radius:999px;padding:2px 12px;font-size:.8125rem;font-weight:700;white-space:nowrap}
.b-name{text-align:left;font-weight:700;color:var(--black)}
.b-prod{text-align:left;color:var(--text)}
.b-reg{color:var(--muted)}
.b-list li[hidden]{display:none}
.b-empty{padding:60px 0;text-align:center;color:var(--muted)}
.pager{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:40px;flex-wrap:wrap}
.pager button{min-width:34px;height:34px;font-size:.9375rem;font-weight:600;color:var(--text);border-radius:50%}
.pager button[aria-current=page]{color:var(--orange);font-weight:800}
.pager button.arw{border:1px solid #ccc}
.pager button[disabled]{opacity:.35;cursor:default}
@media(max-width:1000px){.b-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b-tabs button{border:1px solid #bbb;border-radius:10px}}
@media(max-width:800px){.b-head{display:none}
  .b-row{grid-template-columns:auto 1fr auto;grid-template-areas:"cat reg no" "name name name" "prod prod prod";gap:4px 8px;text-align:left;padding:14px 0}
  .b-no{grid-area:no;font-size:.8125rem}.b-cat{grid-area:cat;justify-self:start}.b-reg{grid-area:reg;font-size:.875rem}
  .b-name{grid-area:name;font-size:1.0625rem}.b-prod{grid-area:prod;font-size:.875rem;color:var(--muted)}
  .b-search{width:100%}.b-search>span{display:none}.b-search select{min-width:0;flex:0 0 110px}.b-search input{flex:1 1 0;width:auto;min-width:0}
  .b-tabs{margin-bottom:30px}}
@media(max-width:480px){.b-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.b-tabs button{font-size:.875rem;min-height:50px}
  .b-search select{flex:0 0 100%}}   /* 작업 #24 : 지역 칸을 한 줄 전체로 — 「전체 지역」·검색칸 안내 글자가 잘리지 않게 */

/* 기업 상세 (보령 게시판 보기 : 제목 줄 · 내용 상자 · 이전/다음 줄 · 목록 단추) */
.v-head{border-top:2px solid var(--black);border-bottom:1px solid var(--line);padding:26px 10px;text-align:center}
.v-head .b-cat{margin-bottom:12px}
.v-head h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:800;color:var(--black);letter-spacing:-.04em}
.v-head p{color:var(--muted);margin-top:8px}
.v-body{padding:40px 10px;border-bottom:1px solid var(--line)}
.v-nav a,.v-nav span.none{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;min-height:56px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:.9688rem}
.v-nav b{color:var(--black)}
.v-nav a:hover span{text-decoration:underline}
.v-list{text-align:right;margin-top:26px}
@media(max-width:700px){.v-body{padding:26px 0}.v-nav a,.v-nav span.none{grid-template-columns:76px 1fr}}
/* 기업 상세 「판매상품」 (작업 #15 — 상품명 · 용량 · 현장가 · 농사랑 상세) */
.goods{list-style:none;margin:0;padding:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.goods-head,.goods li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) 156px 128px;gap:14px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.goods-head{background:var(--sky);color:var(--black);font-weight:800;font-size:.9375rem;border-bottom:2px solid var(--black)}
.goods li:last-child{border-bottom:0}
.goods .g-name{min-width:0;overflow-wrap:anywhere}.goods .g-name b{color:var(--black);font-size:1rem}
.goods .g-name small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.6;margin-top:4px}
.goods .g-opt{min-width:0;overflow-wrap:anywhere;font-size:.9375rem;color:var(--text)}
.goods .g-price{font-weight:800;color:var(--black);white-space:nowrap;text-align:right}
.goods .g-price.none{font-weight:600;color:var(--muted);font-size:.875rem}
.goods .g-price.raw{white-space:normal;word-break:keep-all;overflow-wrap:break-word;min-width:0;font-size:.9375rem;line-height:1.4}   /* 작업 #114 엑셀 원문 현장가 — 칸 안에서 줄바꿈 */
.goods .g-link a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 12px;border-radius:999px;background:var(--blue-d);color:#fff;font-size:.8125rem;font-weight:700;white-space:nowrap}
.goods .g-link span{color:var(--muted);font-size:.8125rem}
.goods-note{margin-top:10px;color:var(--muted);font-size:.875rem}
@media(max-width:700px){
  .goods li.goods-head{display:none}
  .goods li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "o l";gap:6px 12px;padding:14px 16px}
  .goods .g-name{grid-area:n}.goods .g-price{grid-area:p}.goods .g-opt{grid-area:o;font-size:.875rem;color:var(--muted)}.goods .g-link{grid-area:l;justify-self:end}
  .goods .g-price.raw{max-width:9.5em}
}

/* map.html (스티치 조립본) — 옛 색을 포스터 색으로 */
.stitch [class*="bg-[#183BCE]"]{background-color:var(--blue)!important}
.stitch [class*="text-[#183BCE]"]{color:var(--blue)!important}
.stitch [class*="border-[#183BCE]"]{border-color:var(--blue)!important}
.stitch [class*="bg-[#FF773D]"]{background-color:var(--yellow)!important}
.stitch [class*="bg-[#F8F4E8]"]{background-color:#fff!important}
.stitch [class*="bg-[#EFE"]{background-color:var(--beige)!important}
.stitch [class*="text-[#22261F]"]{color:var(--black)!important}
.b-search .b-reset{width:auto;height:auto;background:none;color:var(--muted);padding:0 4px}

/* 2026-10-09 백운석 이사: 캐릭터는 전신 그림을 네모 틀 없이 */
.chars img.full{width:auto;height:300px;max-width:100%;box-shadow:none;object-fit:contain}
@media (max-width:700px){.chars img.full{height:190px}}
/* 2026-10-09: 행사소개 왼쪽 = 정식 포스터(세로 4:5) 전체가 보이게 */
.intro-box.overview .pics.poster{aspect-ratio:auto;align-self:start}
.intro-box.overview .pics.poster img{height:auto}
/* 2026-10-09: 이사님 10/06 「(2026) 뒤에 원형이 글자랑 겹치는 거」 — 제목 뒤 주황 원(포스터에 없는 장식)이 모바일에서 「판매전」 글자를 덮었다 → 뺀다 */
.hero-blob{display:none}