/* ==========================================================================
   들녘하루 — 농촌체험 · 로컬마켓 (DREXLY 템플릿)
   00-디자인보드.png 의 색·활자, 02-페이지시안.png 의 면 구성을 옮긴 단일 스타일시트.
   두 축(체험 / 마켓)이 섞이지 않도록 카드·배지·강조색을 계열로 갈라 둔다.
   ========================================================================== */

:root {
  /* 색 — 00-디자인보드.png COLOR 에서 읽은 값 */
  --soil: #5a3e2b;          /* 들녘 브라운 */
  --soil-deep: #432d1e;
  --rice: #6fa54e;          /* 벼 이삭 그린 — 체험 축 */
  --rice-deep: #55843a;
  --tomato: #e94b3c;        /* 토마토 레드 — 예약·주문 축 */
  --tomato-deep: #c93a2d;
  --clay: #c1a384;          /* 황토 */
  --straw: #dec9a8;         /* 볏짚 */
  --stone: #e4dfda;         /* 돌 */

  --paper: #f7f2ee;
  --paper2: #f1ebe4;
  --surface: #fffdfb;
  --ink: #2b2119;
  --ink2: #6b5b4c;
  --muted: #948578;
  --line: rgba(90, 62, 43, 0.17);
  --line-soft: rgba(90, 62, 43, 0.085);
  --line-ink: rgba(43, 33, 25, 0.85);

  /* 의미색 — 디자인보드 STATES(초록 체크 / 빨강 엑스)에서 파생.
     색만으로 상태를 알리지 않는다: 반드시 글자와 표식을 함께 쓴다. */
  --ok: #4f8b36;
  --ok-bg: #eef4e7;
  --warn: #b0761c;
  --warn-bg: #f7efdf;
  --stop: #a8443a;
  --stop-bg: #f6e6e3;
  --soon: #6b5b4c;
  --soon-bg: #efe8e0;

  /* 계절 색 — 계절 카드·스크롤 띠에 공통으로 쓴다 */
  --spring: #e8f0dd;
  --summer: #dcebd6;
  --autumn: #f5ead0;
  --winter: #eadfd3;

  /* 글꼴 — 디자인보드 TYPOGRAPHY */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --myeongjo: "Nanum Myeongjo", "Noto Serif KR", Georgia, "Batang", serif;

  /* 조판 */
  --wrap: 1240px;
  --gutter: 40px;
  --section: 112px;
  --radius: 3px;
  --radius-lg: 6px;
  --ease: cubic-bezier(0.22, 0.7, 0.28, 1);
  --shadow: 0 1px 1px rgba(90, 62, 43, 0.05), 0 10px 26px rgba(90, 62, 43, 0.07);
}

/* --------------------------------------------------------------- 기본 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.005em;
  /* 한국어는 어절 단위로 끊는다 — "2층"·"한나절"이 갈라지지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 종이결 — 비주얼 지시의 「종이·잉크 질감」 */
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(90, 62, 43, 0.017) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 62, 43, 0.012) 0 1px, transparent 1px 4px);
}

img {
  max-width: 100%;
  display: block;
  /* 사진을 끌면 브라우저 기본 드래그가 포인터를 가로채 가로 스크롤 트랙이 죽는다 */
  -webkit-user-drag: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.36; letter-spacing: -0.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--soil); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--soil); color: #fff; padding: 12px 20px; font-size: 14px;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 940px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 사진 액자 — 인라인 요소엔 aspect-ratio 가 안 먹으므로 반드시 블록 */
.frame { display: block; overflow: hidden; background: var(--stone); position: relative; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; stroke-width: 1.6; }
.ico-lg { width: 30px; height: 30px; stroke-width: 1.2; }

/* ------------------------------------------------------- 활자 계층 */
.masthead-title {
  font-family: var(--myeongjo);
  font-weight: 800;
  font-size: clamp(38px, 5.1vw, 62px);
  line-height: 1.24;
  letter-spacing: -0.035em;
}
.page-title {
  font-family: var(--myeongjo);
  font-weight: 800;
  font-size: clamp(31px, 3.6vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}
.section-title {
  font-family: var(--myeongjo);
  font-weight: 800;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.38;
  letter-spacing: -0.033em;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--soil);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--clay); flex: none;
}
.lead { color: var(--ink2); font-size: 17px; line-height: 1.88; }
.muted { color: var(--muted); }
.caption { font-size: 13px; color: var(--muted); line-height: 1.7; }
.caption .ico-sm { display: inline-block; vertical-align: -3px; }
.num { font-variant-numeric: tabular-nums; }

.section { padding-block: calc(var(--section) / 2); }
.section-lead { padding-top: var(--section); }
.section-last { padding-bottom: var(--section); }
.section-tint { background: var(--paper2); }
.section-soil { background: var(--soil); color: #f3e9df; }
.section-soil .section-title, .section-soil h3 { color: #fff; }
.section-soil .eyebrow { color: var(--straw); }
.section-soil .eyebrow::before { background: rgba(255, 255, 255, 0.4); }

/* 절 머리 — 종이 위 괘선 */
.section-head { margin-bottom: 44px; border-top: 2px solid var(--line-ink); padding-top: 18px; }
.section-head .eyebrow { margin-bottom: 10px; }
.section-head p { margin-top: 14px; color: var(--ink2); max-width: 62ch; }
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.section-soil .section-head { border-top-color: rgba(255, 255, 255, 0.45); }

/* --------------------------------------------------------------- 버튼 */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; font-weight: 600; letter-spacing: -0.015em;
  cursor: pointer; text-align: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.16s var(--ease);
}
.btn span[aria-hidden] { transition: transform 0.25s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* 디자인보드 COMPONENTS 3종 */
.btn-soil { --btn-bg: var(--soil); --btn-fg: #fff; --btn-bd: var(--soil); }
.btn-soil:hover { --btn-bg: var(--soil-deep); --btn-bd: var(--soil-deep); }
.btn-line { --btn-bg: var(--surface); --btn-fg: var(--rice-deep); --btn-bd: rgba(111, 165, 78, 0.5); }
.btn-line:hover { --btn-bd: var(--rice); --btn-bg: #f2f7ec; }
.btn-book { --btn-bg: var(--tomato); --btn-fg: #fff; --btn-bd: var(--tomato); }
.btn-book:hover { --btn-bg: var(--tomato-deep); --btn-bd: var(--tomato-deep); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink2); --btn-bd: var(--line); }
.btn-ghost:hover { --btn-fg: var(--soil); --btn-bd: var(--clay); }
.btn-on-soil { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.55); }
.btn-on-soil:hover { --btn-bg: #fff; --btn-fg: var(--soil); --btn-bd: #fff; }
.btn-sm { min-height: 46px; padding: 0 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

.btn-text {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--soil); font-size: 14px; font-weight: 700;
  padding: 6px 0; border-bottom: 1px solid var(--clay);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.btn-text:hover { gap: 12px; color: var(--tomato); }

/* --------------------------------------------------------------- 상태 표시 */
/* 색만으로 알리지 않는다 — 표식(◆●▲■◇)과 글자를 항상 함께 둔다 */
.st {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
  border: 1px solid transparent; white-space: nowrap;
}
.st::before { font-size: 10px; line-height: 1; }
.st-open  { color: var(--ok);   background: var(--ok-bg);   border-color: rgba(79, 139, 54, 0.3); }
.st-open::before  { content: "●"; }
.st-few   { color: var(--warn); background: var(--warn-bg); border-color: rgba(176, 118, 28, 0.32); }
.st-few::before   { content: "▲"; }
.st-rain  { color: var(--warn); background: var(--warn-bg); border-color: rgba(176, 118, 28, 0.32); }
.st-rain::before  { content: "◆"; }
.st-full  { color: var(--stop); background: var(--stop-bg); border-color: rgba(168, 68, 58, 0.3); }
.st-full::before  { content: "■"; }
.st-soon  { color: var(--soon); background: var(--soon-bg); border-color: rgba(107, 91, 76, 0.28); }
.st-soon::before  { content: "◇"; }

/* 축 표식 — 체험(초록)과 마켓(붉은흙)을 한눈에 가른다 */
.axis {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 2px;
}
.axis-exp { color: #fff; background: var(--rice-deep); }
.axis-mkt { color: #fff; background: var(--soil); }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border: 1px solid var(--line);
  border-radius: 2px; font-size: 12px; color: var(--ink2); background: var(--surface);
}
.tag-season { color: var(--tomato-deep); border-color: rgba(233, 75, 60, 0.35); background: #fdefed; }

.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; }
.rating .ico { color: #e8a33d; width: 15px; height: 15px; fill: #e8a33d; stroke: none; }
.rating span { color: var(--muted); font-weight: 500; }

/* --------------------------------------------------------------- 헤더 */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 242, 238, 0.92);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-stuck {
  -webkit-backdrop-filter: saturate(1.15) blur(9px);
  backdrop-filter: saturate(1.15) blur(9px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 18px rgba(90, 62, 43, 0.07);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 84px; }

.brand { display: block; flex: none; }
.brand-name {
  display: block; font-family: var(--myeongjo); font-weight: 800;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.04em; color: var(--soil);
}
.brand small {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em;
  color: var(--muted); margin-top: 4px;
}

.navlinks { display: flex; align-items: center; gap: 30px; }
.navlinks a {
  position: relative; font-size: 15px; font-weight: 600; color: var(--ink2);
  padding: 8px 0; transition: color 0.25s var(--ease);
}
.navlinks a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rice); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.navlinks a:hover { color: var(--ink); }
.navlinks a:hover::after { transform: scaleX(1); }
.navlinks a[aria-current="page"] { color: var(--soil); }
.navlinks a[aria-current="page"]::after { transform: scaleX(1); background: var(--soil); }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px;
  font-weight: 600; color: var(--ink2); transition: color 0.25s var(--ease);
}
.nav-tel:hover { color: var(--soil); }
.nav-tel .ico { color: var(--rice-deep); }

.cart-btn, .menu-btn {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; position: relative;
}
.cart-btn:hover, .menu-btn:hover { border-color: var(--clay); }
.menu-btn { display: none; }
.cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px;
  padding: 0 5px; display: grid; place-items: center;
  background: var(--tomato); color: #fff; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
}

/* 모바일 서랍 */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 90;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 22px 22px 40px; transform: translateX(101%);
  transition: transform 0.4s var(--ease); overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-close, .cart-close {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  flex: none;
}
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  font-family: var(--myeongjo); font-weight: 700; font-size: 19px;
  padding: 15px 2px; border-bottom: 1px solid var(--line-soft);
}
.drawer nav a[aria-current="page"] { color: var(--soil); }
.drawer-foot { margin-top: 22px; display: grid; gap: 9px; }
.drawer-foot .btn { justify-content: flex-start; }
.scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(43, 33, 25, 0.42);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.scrim.open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- 장터 서랍 */
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(392px, 92vw); z-index: 95;
  background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(101%); transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: none; }
.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-family: var(--myeongjo); font-size: 20px; }
.cart-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.cart-empty { text-align: center; padding: 44px 10px; color: var(--muted); font-size: 14.5px; }
.cart-empty .ico { margin: 0 auto 12px; color: var(--stone); }
.cart-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line .frame { width: 62px; height: 56px; border-radius: 2px; }
.cart-line-name { font-size: 14.5px; font-weight: 700; }
.cart-line-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cart-line-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; }
.qty button {
  width: 46px; height: 46px; background: none; border: 0; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--ink2);
}
.qty span { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; }
.cart-foot { border-top: 1px solid var(--line); padding: 18px 22px 24px; background: var(--paper2); }
.cart-sum { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink2); padding: 4px 0; }
.cart-sum.total { font-size: 17px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.cart-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 14px; line-height: 1.65; }

/* --------------------------------------------------------------- 홈: 제호 + 히어로 */
.masthead { padding-top: 34px; }
.masthead-rule {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-top: 3px solid var(--line-ink); border-bottom: 1px solid var(--line-ink);
  padding: 9px 0; font-size: 12.5px; font-weight: 600; color: var(--ink2);
  letter-spacing: 0.02em; flex-wrap: wrap;
}
.masthead-rule b { color: var(--soil); font-weight: 800; }

.hero { padding: 46px 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 56px; align-items: start; }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy .masthead-title { margin-bottom: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 26px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--ink2); }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .ico { color: var(--rice-deep); }

.hero-open { margin-top: 34px; border-top: 1px solid var(--line-ink); padding-top: 13px; }
.hero-open h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.hero-open ul { margin-top: 6px; }
.hero-open li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 6px 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px;
}
.hero-open li:last-child { border-bottom: 0; }
.hero-open b { font-weight: 700; }
.hero-open .when { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }

.hero-figure { margin: 0; }
.hero-figure .frame { aspect-ratio: 580 / 708; border: 1px solid var(--line); }
.hero-figure figcaption {
  margin-top: 12px; font-size: 12.5px; color: var(--muted);
  border-left: 2px solid var(--clay); padding-left: 10px; line-height: 1.6;
}

/* 빠른 안내 4칸 — 흙빛 띠 */
.quickbar { background: var(--soil); }
.quickbar ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.quickbar a {
  display: flex; align-items: center; gap: 14px; padding: 26px 22px; min-height: 96px;
  color: #f0e5da; border-left: 1px solid rgba(255, 255, 255, 0.13);
  transition: background 0.25s var(--ease);
}
.quickbar li:first-child a { border-left: 0; }
.quickbar a:hover { background: rgba(255, 255, 255, 0.07); }
.quickbar .ico { color: var(--straw); }
.quickbar b { display: block; font-size: 15.5px; color: #fff; font-weight: 700; }
.quickbar small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); margin-top: 3px; }

/* --------------------------------------------------------------- 계절 매거진 */
.season-flow { background: var(--paper2); transition: background-color 0.6s linear; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .season-flow {
      animation: seasonTint linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }
  }
}
@keyframes seasonTint {
  0%   { background-color: var(--spring); }
  34%  { background-color: var(--summer); }
  67%  { background-color: var(--autumn); }
  100% { background-color: var(--winter); }
}

.season-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.season-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.season-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.season-card .frame { aspect-ratio: 290 / 189; }
.season-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.season-mark {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 2px; color: var(--soil);
}
.season-card[data-season="봄"] .season-mark { background: var(--spring); }
.season-card[data-season="여름"] .season-mark { background: var(--summer); }
.season-card[data-season="가을"] .season-mark { background: var(--autumn); }
.season-card[data-season="겨울"] .season-mark { background: var(--winter); }
.season-card h3 { font-size: 19px; font-family: var(--myeongjo); font-weight: 800; }
.season-card-desc { font-size: 14px; color: var(--ink2); line-height: 1.7; }
.season-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin-top: 2px; }
.season-card dt { color: var(--muted); }
.season-card dd { margin: 0; color: var(--ink2); font-weight: 600; }
.season-card-foot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.rail-nav { display: none; }

/* --------------------------------------------------------------- 두 마당 */
.yard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.yard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px 32px;
  background: var(--surface); display: flex; flex-direction: column; gap: 16px;
}
.yard-exp { border-top: 5px solid var(--rice); }
.yard-mkt { border-top: 5px solid var(--soil); }
.yard h3 { font-family: var(--myeongjo); font-size: 24px; font-weight: 800; }
.yard-desc { font-size: 15px; color: var(--ink2); line-height: 1.85; }
.yard-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 4px; }
.yard-keys li {
  border: 1px solid var(--line-soft); background: var(--paper); border-radius: 2px;
  padding: 12px 14px;
}
.yard-keys b { display: block; font-size: 14px; }
.yard-keys small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.55; }
.yard-foot { margin-top: auto; padding-top: 8px; }

/* --------------------------------------------------------------- 날씨 */
.wx { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.wx-top {
  display: flex; align-items: center; gap: 18px; padding: 24px 26px; flex-wrap: wrap;
  background: var(--wx-bg, var(--paper2)); border-bottom: 1px solid var(--line);
}
.wx[data-weather="rain"]   { --wx-bg: #e8eef1; --wx-ink: #3f5a68; }
.wx[data-weather="cloudy"] { --wx-bg: #eeece8; --wx-ink: #5c554c; }
.wx[data-weather="clear"]  { --wx-bg: #f6efdc; --wx-ink: #8a6a20; }
.wx-top .ico-lg { color: var(--wx-ink, var(--soil)); }
.wx-now b { display: block; font-size: 17px; font-weight: 800; }
.wx-now span { font-size: 13.5px; color: var(--ink2); }
.wx-policy { margin-left: auto; font-size: 14px; color: var(--ink2); max-width: 46ch; }
.wx-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.wx-day { padding: 16px 10px; text-align: center; border-left: 1px solid var(--line-soft); }
.wx-day:first-child { border-left: 0; }
.wx-day b { display: block; font-size: 13px; font-weight: 700; }
.wx-day .ico { margin: 8px auto 6px; color: var(--ink2); }
.wx-day small { display: block; font-size: 12px; color: var(--muted); }
.wx-day .wx-run { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700; }
.wx-day[data-run="on"] .wx-run { color: var(--ok); }
.wx-day[data-run="alt"] .wx-run { color: var(--warn); }
.wx-day[data-run="off"] .wx-run { color: var(--muted); }

/* --------------------------------------------------------------- 상품 카드 */
.goods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.goods-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 11px;
}
.goods-card .frame { aspect-ratio: 192 / 168; border-radius: 2px; }
.goods-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.goods-card h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.03em; }
.goods-maker { font-size: 12.5px; color: var(--muted); }
.goods-spec { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; line-height: 1.6; }
.goods-spec dt { color: var(--muted); }
.goods-spec dd { margin: 0; color: var(--ink2); }
.goods-price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 10px; }
.goods-price b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.goods-price small { font-size: 12.5px; color: var(--muted); }
.goods-card .btn { margin-top: 4px; }

/* --------------------------------------------------------------- 체험 카드 */
.exp-list { display: grid; gap: 18px; }
.exp-card {
  display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; align-items: stretch;
}
/* 격자 칸이 늘어난 높이에서 aspect-ratio 가 폭을 역산해 칸을 뚫고 나왔다 — 비율 대신 최소 높이로 */
.exp-card .frame { border-radius: 2px; min-height: 174px; }
.exp-body { display: flex; flex-direction: column; gap: 10px; }
.exp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-card h3 { font-family: var(--myeongjo); font-size: 22px; font-weight: 800; }
.exp-where { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.exp-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.exp-facts li {
  font-size: 12.5px; color: var(--ink2); background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 2px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px;
}
.exp-facts b { font-weight: 700; color: var(--ink); }
.exp-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.exp-price b { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.exp-price small { font-size: 12.5px; color: var(--muted); margin-left: 5px; }
.exp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-card.is-hidden { display: none; }
.goods-card.is-hidden { display: none; }

/* --------------------------------------------------------------- 지도 갈래 */
.split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 30px; align-items: start; }
.map-panel {
  position: sticky; top: 104px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.map-fig { display: block; background: #eef0e9; }
.map-fig svg { display: block; width: 100%; height: auto; }
.map-pin { cursor: pointer; }
.map-pin circle { fill: var(--rice-deep); stroke: #fff; stroke-width: 2; }
.map-pin:hover circle, .map-pin:focus-visible circle { fill: var(--tomato); }
.map-pin text { font-size: 12px; font-weight: 700; fill: var(--soil); stroke: #eef1e8; stroke-width: 3px; paint-order: stroke; }
.map-list { border-top: 1px solid var(--line); }
.map-list li { border-bottom: 1px solid var(--line-soft); }
.map-list li:last-child { border-bottom: 0; }
.map-list a { display: flex; align-items: center; gap: 10px; padding: 13px 18px; min-height: 46px; font-size: 13.5px; }
.map-list a:hover { background: var(--paper2); }
.map-list b { font-weight: 700; }
.map-list small { color: var(--muted); margin-left: auto; font-size: 12px; }

/* 필터 줄 */
.filters { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; margin-bottom: 22px; }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.filter-row + .filter-row { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 12px; }
.filter-label { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 44px; }
.chip {
  min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font-size: 13.5px; font-weight: 600; color: var(--ink2); cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--clay); }
.chip[aria-pressed="true"] { background: var(--soil); border-color: var(--soil); color: #fff; }
.filter-count { margin-left: auto; font-size: 13px; color: var(--ink2); font-weight: 600; }

/* 빈 결과 — 디자인보드 EMPTY 상태 */
.empty-state {
  display: none; text-align: center; padding: 62px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.empty-state.show { display: block; }
.empty-state .ico-lg { margin: 0 auto 14px; color: var(--clay); }
.empty-state b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.empty-state p { font-size: 14px; color: var(--muted); }

/* 비교표 — 넘친 표가 문서 폭을 밀지 않도록 position:relative 를 반드시 둔다 */
.table-scroll { overflow-x: auto; position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cmp { width: 100%; min-width: 720px; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp thead th { background: var(--paper2); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.cmp tbody th { font-weight: 700; color: var(--muted); font-size: 13px; white-space: nowrap; width: 132px; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* 쪽 넘김 */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; }
.pager a, .pager span {
  min-width: 46px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 2px; font-size: 14px; font-weight: 600; background: var(--surface);
}
.pager [aria-current="page"] { background: var(--soil); border-color: var(--soil); color: #fff; }
.pager .is-off { color: var(--muted); background: var(--paper2); }

/* --------------------------------------------------------------- 체험 상세 */
.detail-banner { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--stone); }
.detail-banner .frame { aspect-ratio: 788 / 151; }
.detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 26px 0 20px; }
.detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.detail-price { text-align: right; }
.detail-price b { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; display: block; }
.detail-price small { font-size: 13px; color: var(--muted); }

.tabs { display: flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.tabs a {
  flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700; color: var(--ink2); border-left: 1px solid var(--line-soft);
  padding: 0 8px; text-align: center;
}
.tabs a:first-child { border-left: 0; }
.tabs a:hover { background: var(--paper2); color: var(--soil); }
.tabs a.is-active { background: var(--soil); color: #fff; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 44px; align-items: start; margin-top: 40px; }
.detail-block + .detail-block { margin-top: 46px; }
.detail-block h2 { font-family: var(--myeongjo); font-size: 25px; font-weight: 800; margin-bottom: 16px; padding-top: 14px; border-top: 2px solid var(--line-ink); }
.detail-block h3 { font-size: 17px; margin: 22px 0 8px; }
.detail-block p { color: var(--ink2); line-height: 1.9; }
.detail-block p + p { margin-top: 12px; }
.bullets { display: grid; gap: 9px; margin-top: 12px; }
/* flex 로 두면 <b> 와 뒤따르는 글이 각각 칸이 돼 좁은 화면에서 두 단으로 갈라진다 */
.bullets li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink2); line-height: 1.7; }
.bullets li .ico-sm { position: absolute; left: 0; top: 6px; color: var(--rice-deep); }

.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.pack-grid > div { border: 1px solid var(--line); border-radius: 2px; padding: 16px 18px; background: var(--surface); }
.pack-grid b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.pack-grid p { font-size: 13.5px; }

/* 하루 여정 — SVG 경로 동선 */
.journey { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px 24px 26px; position: sticky; top: 104px; }
.journey h2 { font-family: var(--myeongjo); font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.journey > p { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.rail { position: relative; padding-left: 40px; }
.rail-svg { position: absolute; left: 6px; top: 4px; width: 22px; height: calc(100% - 8px); overflow: visible; }
.rail-path { fill: none; stroke: var(--rice); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rail-path.drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .rail-path { animation: railDraw linear both; animation-timeline: view(); animation-range: cover 6% cover 62%; }
  }
}
@keyframes railDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.rail-track { display: grid; gap: 2px; }
.rail-step { position: relative; padding: 11px 0 11px 4px; }
.rail-step::before {
  content: ""; position: absolute; left: -40px; top: 18px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--rice); z-index: 1;
}
.rail-step time { font-size: 13px; font-weight: 800; color: var(--soil); font-variant-numeric: tabular-nums; }
.rail-step b { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; }
.rail-step small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.journey-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.journey-sum { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.journey-sum b { font-size: 22px; font-weight: 800; }

/* 후기 */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.review-q { font-size: 14.5px; color: var(--ink2); line-height: 1.85; }
.review-by { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------- 생산자 */
.producer-row { display: flex; gap: 10px; flex-wrap: wrap; }
.producer-chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px;
  padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.producer-chip[aria-pressed="true"] { background: var(--soil); border-color: var(--soil); color: #fff; }
.producer-chip .ico-sm { color: var(--rice-deep); }
.producer-chip[aria-pressed="true"] .ico-sm { color: var(--straw); }

.producer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.producer {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.producer h3 { font-family: var(--myeongjo); font-size: 20px; font-weight: 800; }
.producer-where { font-size: 12.5px; color: var(--muted); }
.producer p { font-size: 14px; color: var(--ink2); line-height: 1.8; }
.producer dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; margin-top: 2px; }
.producer dt { color: var(--muted); }
.producer dd { margin: 0; color: var(--ink2); }

/* 사진 콜라주 — 비정형 */
.collage-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
/* 사진을 살짝 기울여 두었다 — 회전분이 문서 가로 스크롤을 밀지 않게 자기 상자 안에서 자른다 */
.collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 16px; overflow: hidden; }
.collage figure { margin: 0; align-self: start; background: #fff; padding: 8px 8px 10px; border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.collage figure .frame { border-radius: 0; }
.collage figcaption { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.collage .c1 { grid-column: 1 / 5; transform: rotate(-1.4deg); }
.collage .c1 .frame { aspect-ratio: 224 / 164; }
.collage .c2 { grid-column: 5 / 7; transform: rotate(2deg); align-self: start; }
.collage .c2 .frame { aspect-ratio: 161 / 192; }
.collage .c3 { grid-column: 1 / 3; transform: rotate(1.8deg); }
.collage .c3 .frame { aspect-ratio: 135 / 161; }
.collage .c4 { grid-column: 3 / 7; transform: rotate(-0.9deg); }
.collage .c4 .frame { aspect-ratio: 198 / 276; }

/* --------------------------------------------------------------- 아코디언 */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.acc-item + .acc-item { border-top: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 62px; padding: 16px 22px; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: 15.5px; font-weight: 700;
}
.acc-trigger .ico { color: var(--soil); transition: transform 0.28s var(--ease); flex: none; }
.acc-item.open .acc-trigger .ico { transform: rotate(180deg); }
.acc-panel { padding: 0 22px 22px; color: var(--ink2); font-size: 14.5px; line-height: 1.85; }
.acc-panel p + p { margin-top: 10px; }
/* JS 가 없으면 전부 펼친 상태가 완성본이다 */
.js .acc-panel { display: none; }
.js .acc-item.open .acc-panel { display: block; }

/* --------------------------------------------------------------- 폼 */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; align-items: start; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 28px 28px 30px; margin: 0 0 22px; }
.fieldset legend { padding: 0 10px; font-family: var(--myeongjo); font-size: 19px; font-weight: 800; color: var(--soil); }
.fieldset > p.caption { margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid2 > .field, .people-row > .field { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink2); }
.field .req { color: var(--tomato); margin-left: 3px; }
.control {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  font: inherit; font-size: 15px; color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.control:focus { border-color: var(--soil); background: var(--surface); outline: none; }
textarea.control { min-height: 118px; resize: vertical; line-height: 1.7; }
select.control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.field-hint { font-size: 12.5px; color: var(--muted); }
.field.invalid .control { border-color: var(--tomato); background: #fdf2f0; }
.field-err { display: none; font-size: 12.5px; color: var(--tomato); font-weight: 600; }
.field.invalid .field-err { display: block; }
.counter { font-size: 12px; color: var(--muted); text-align: right; }

.check-row { display: flex; align-items: flex-start; gap: 11px; padding: 14px 0; }
/* input 은 label 밖에 둔다 — label 이 감싸면 클릭이 이중 토글돼 상쇄된다 */
.check-row input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--rice-deep); }
.check-row label { font-size: 14px; color: var(--ink2); line-height: 1.7; }
.check-row a { text-decoration: underline; text-underline-offset: 3px; }

.people-row { display: grid; grid-template-columns: repeat(2, 1fr) auto; gap: 16px; align-items: end; }
.people-total {
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper2);
  padding: 12px 18px; min-height: 50px; display: flex; align-items: center; gap: 10px;
  font-size: 14px; white-space: nowrap;
}
.people-total b { font-size: 18px; font-weight: 800; }

/* 주문 요약 */
.summary { position: sticky; top: 104px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.summary h2 { font-family: var(--myeongjo); font-size: 20px; font-weight: 800; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--paper2); }
.summary-sec { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.summary-sec h3 { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; color: var(--ink2); }
.sum-line b { color: var(--ink); font-weight: 700; }
.sum-total { padding: 20px 24px; background: var(--paper2); }
.sum-total .sum-line { font-size: 18px; font-weight: 800; color: var(--ink); }
.policy-split { display: grid; gap: 10px; padding: 20px 24px; border-top: 1px solid var(--line); }
.policy-box { border: 1px solid var(--line-soft); border-radius: 2px; padding: 14px 16px; background: var(--paper); }
.policy-box b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 6px; }
.policy-box ul { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); line-height: 1.6; }
.policy-exp b { color: var(--rice-deep); }
.policy-mkt b { color: var(--soil); }

.done-panel { display: none; border: 1px solid var(--rice); background: var(--ok-bg); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px; }
.done-panel.show { display: block; }
.done-panel b { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: var(--ok); margin-bottom: 8px; }
.done-panel p { font-size: 14.5px; color: var(--ink2); line-height: 1.8; }
.done-code { font-family: var(--myeongjo); font-size: 21px; font-weight: 800; letter-spacing: 0.04em; color: var(--soil); margin-top: 10px; display: block; }

.saved-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--line); border-radius: 2px; padding: 14px 18px; margin-top: 16px; font-size: 13px; color: var(--ink2); }
.saved-note .ico-sm { color: var(--soil); }

/* --------------------------------------------------------------- 안내 상자 */
.notice {
  border: 1px solid var(--line); border-left: 4px solid var(--clay);
  border-radius: 2px; background: var(--surface); padding: 20px 24px;
  font-size: 14px; color: var(--ink2); line-height: 1.85;
}
.notice b { color: var(--ink); }
.notice p + p { margin-top: 9px; }
.notice-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; }
.info-card .ico-lg { color: var(--rice-deep); margin-bottom: 12px; }
.info-card h3 { font-size: 17px; margin-bottom: 8px; }
.info-card p { font-size: 14px; color: var(--ink2); line-height: 1.8; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 24px 22px; }
.stat b { display: block; font-family: var(--myeongjo); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--soil); }
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 띠 배너 */
.band { position: relative; overflow: hidden; background: var(--soil); }
.band .frame { position: absolute; inset: 0; opacity: 0.24; }
.band-inner { position: relative; padding: 76px 0; text-align: center; color: #fff; }
.band-inner h2 { font-family: var(--myeongjo); font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.band-inner p { margin: 14px auto 26px; max-width: 54ch; color: rgba(255, 255, 255, 0.82); font-size: 15.5px; }
.band-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- 푸터 */
.site-footer { background: var(--soil-deep); color: #ddd0c3; padding: 64px 0 34px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.25fr; gap: 40px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand small { color: rgba(255, 255, 255, 0.5); }
.footer-brand p { margin-top: 16px; font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, 0.66); }
.site-footer h3 { font-size: 13px; letter-spacing: 0.1em; color: #fff; margin-bottom: 16px; }
.site-footer nav { display: grid; gap: 10px; }
.site-footer nav a, .footer-info li { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.site-footer nav a:hover { color: #fff; }
.footer-info { display: grid; gap: 9px; }
.footer-info li { display: flex; gap: 9px; line-height: 1.7; }
.footer-info .ico-sm { color: var(--straw); margin-top: 4px; flex: none; }
.social { display: flex; gap: 8px; margin-top: 16px; }
.social a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2px; color: rgba(255, 255, 255, 0.75);
}
.social a:hover { border-color: #fff; color: #fff; }
.footer-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.52); line-height: 1.8;
}
.footer-bottom nav { display: flex; gap: 18px; }
.demo-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.52); max-width: 72ch; line-height: 1.8; }

/* --------------------------------------------------------------- 맨 위로·토스트 */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--soil); color: #fff; border: 0; border-radius: 50%; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }

.toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 130;
  transform: translate(-50%, 18px);
  min-width: 270px; max-width: calc(100vw - 40px);
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; background: var(--ink); color: #fff;
  border-radius: var(--radius); font-size: 14px; line-height: 1.6;
  box-shadow: 0 12px 34px rgba(43, 33, 25, 0.28);
  opacity: 0; visibility: hidden;
  /* 알림일 뿐이므로 아래 제출 버튼을 가로막지 않는다 */
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast .ico { color: var(--straw); flex: none; }

.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- 등장 */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* 생산자 → 상품 전환 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(goods-area) { animation: vtOut 0.18s var(--ease) both; }
  ::view-transition-new(goods-area) { animation: vtIn 0.26s var(--ease) both; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
.goods-area { view-transition-name: goods-area; }

/* =============================================================== 반응형 */
@media (max-width: 1180px) {
  :root { --wrap: 1024px; --section: 100px; }
  .navlinks { gap: 20px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .split { grid-template-columns: 330px minmax(0, 1fr); gap: 24px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .book-grid { grid-template-columns: minmax(0, 1fr) 344px; gap: 32px; }
  .goods-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  :root { --gutter: 30px; --section: 88px; }
  .nav { height: 74px; }
  .navlinks, .nav-tel { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-figure .frame { aspect-ratio: 16 / 10; }
  .quickbar ul { grid-template-columns: repeat(2, 1fr); }
  .quickbar li:nth-child(3) a, .quickbar li:nth-child(4) a { border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .quickbar li:nth-child(odd) a { border-left: 0; }
  .season-track { grid-template-columns: repeat(2, 1fr); }
  .yard-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .map-panel { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .journey { position: static; }
  .book-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .collage-grid { grid-template-columns: 1fr; gap: 34px; }
  .producer-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .wx-days { grid-template-columns: repeat(4, 1fr); }
  .wx-day:nth-child(5) { border-left: 0; }
  .wx-day:nth-child(n + 5) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; --section: 66px; }
  body { font-size: 15.5px; }

  .masthead { padding-top: 20px; }
  .masthead-rule { font-size: 11.5px; gap: 8px; }
  .hero { padding: 30px 0 var(--section); }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .hero-actions .btn { width: 100%; }

  .quickbar ul { grid-template-columns: 1fr; }
  .quickbar a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.13); min-height: 78px; padding: 18px; }
  .quickbar li:first-child a { border-top: 0; }

  /* 계절은 모바일에서 가로로 넘긴다 — 스크롤 스냅 + 이전/다음 */
  .season-track {
    display: flex; gap: 14px; overflow-x: auto; position: relative;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .season-track::-webkit-scrollbar { display: none; }
  .season-card { flex: 0 0 78%; scroll-snap-align: start; }
  .rail-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
  .rail-nav button {
    width: 46px; height: 46px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  }
  .rail-dots { display: flex; gap: 0; }
  .rail-dots button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
  .rail-dots button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clay); transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
  .rail-dots button[aria-current="true"]::after { background: var(--soil); transform: scale(1.5); }

  /* 향상층 — 브라우저가 스크롤 표식을 직접 그릴 수 있으면 그쪽에 맡기고 내 점은 접는다.
     지원하지 않는 브라우저는 위의 이전/다음 버튼과 점을 그대로 쓴다. */
  @supports (scroll-marker-group: after) {
    /* 크롬은 표식 무리를 흐름 밖에 그린다 — 아래 여백으로 자리를 비워 준다 */
    .season-track { scroll-marker-group: after; margin-bottom: 54px; }
    .season-track::scroll-marker-group { display: flex; justify-content: center; }
    .season-track > .season-card::scroll-marker {
      content: ""; width: 44px; height: 44px;
      background: radial-gradient(circle at 50% 50%, var(--clay) 0 3.5px, transparent 4px);
    }
    .season-track > .season-card::scroll-marker:target-current {
      background: radial-gradient(circle at 50% 50%, var(--soil) 0 5px, transparent 5.5px);
    }
    .rail-nav { display: none; }
  }

  .exp-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .exp-card .frame { aspect-ratio: 16 / 10; min-height: 0; }
  .exp-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .exp-actions { width: 100%; }
  .exp-actions .btn { flex: 1; }

  .goods-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .goods-card { padding: 12px 12px 16px; }
  .goods-card h3 { font-size: 15px; }
  .goods-spec { grid-template-columns: 40px minmax(0, 1fr); font-size: 11.5px; }

  .tabs { flex-wrap: nowrap; overflow-x: auto; position: relative; }
  .tabs a { flex: 0 0 auto; padding: 0 18px; }

  .detail-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .detail-price { text-align: left; }
  .detail-banner .frame { aspect-ratio: 16 / 9; }
  .pack-grid { grid-template-columns: 1fr; }
  .grid2, .people-row { grid-template-columns: 1fr; }
  .producer-grid { grid-template-columns: 1fr; }
  .collage { gap: 8px; }
  .collage figure { padding: 5px 5px 7px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .wx-top { padding: 18px; gap: 12px; }
  .wx-policy { margin-left: 0; }
  .wx-days { grid-template-columns: repeat(2, 1fr); }
  .wx-day:nth-child(odd) { border-left: 0; }
  .wx-day:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .fieldset { padding: 22px 18px 24px; }
  .section-head { margin-bottom: 30px; }
  .band-inner { padding: 54px 0; }
  .to-top { right: 14px; bottom: 14px; }
}

@media (max-width: 420px) {
  /* 320px 에서 헤더가 가로로 밀렸다 — 예약 버튼은 서랍·히어로에 그대로 있으니 여기서만 접는다 */
  .nav-actions .btn-book { display: none; }
  .nav-actions { gap: 10px; }
}

@media (max-width: 380px) {
  :root { --gutter: 15px; }
  .season-card { flex-basis: 86%; }
  .goods-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .brand-name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* 스크롤로만 나타나게 짜면 모션을 끈 사용자에겐 영영 안 보인다 — 최종 상태를 즉시 보여준다 */
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .rail-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .season-flow { background-color: var(--paper2) !important; }
}

@media print {
  .site-header, .drawer, .scrim, .cart-drawer, .to-top, .toast, .quickbar { display: none !important; }
  body { background: #fff; }
}