/* ---------------------------------------------------------------
   농촌생태여행 — 사단법인 식량과기후
   빌드 툴 없음. 이 파일 하나가 /ecotour/ 전체의 스타일이다.
   --------------------------------------------------------------- */

:root {
  /* 라이트 고정. 브라우저가 스크롤바·폼 컨트롤을 임의로 어둡게 칠하지 않도록 못박는다. */
  color-scheme: light;

  /* 기본 팔레트 — --bg 와 --ink 는 본사이트 실측값 */
  --ink: #18220f;
  --muted: #5f6b60;
  --accent: #2f6b4f;
  --accent-deep: #1e4635;
  --accent-soft: #eaf1ec;
  --bg: #f7f5ee;
  --surface: #ffffff;
  --rule: #e2e0d9;

  /* 계절 서브컬러 — 프로그램 뱃지·구분선에만 쓴다 */
  --spring: #7fa650;
  --summer: #2f6b4f;
  --autumn: #b07a2e;
  --winter: #5b7484;

  /* 레이아웃 */
  --w-wide: 72rem;
  --w-text: 42rem;
  --pad-x: 1.5rem;

  --radius: 14px;
  --shadow: 0 1px 2px rgb(26 29 26 / 0.04), 0 8px 24px -12px rgb(26 29 26 / 0.14);
  --shadow-lift: 0 2px 4px rgb(26 29 26 / 0.05), 0 18px 40px -18px rgb(26 29 26 / 0.22);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", "Noto Sans KR", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

/* <picture>는 WebP/JPEG 폴백을 고르는 역할만 하고 레이아웃에는 관여하지 않는다.
   display:contents로 래퍼 박스를 없애야 안쪽 img가 부모의 직계 자식으로 남는다.
   이게 없으면 .hero__bg의 absolute 기준, .card__photo의 flex 항목 지위,
   .feature__art의 height:100%가 전부 picture 기준으로 바뀌어 깨진다. */
picture { display: contents; }

/* display:contents가 picture의 박스를 없애면 안쪽 <source>까지 부모의 항목으로
   올라온다. .feature 그리드에서 source가 1열을 차지해 사진이 2열로, 본문이
   2행으로 밀리는 걸 실제로 확인했다. source는 렌더링 대상이 아니므로 뺀다. */
picture > source { display: none; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration: none; }

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

/* 키보드 사용자용 본문 바로가기 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ── 공통 레이아웃 ─────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

.band { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.band--tint { background: var(--accent-soft); }
.band--rule { border-top: 1px solid var(--rule); }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.band__head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

/* 캐러셀 좌우 버튼을 제목 줄 오른쪽 끝에 붙이는 변형.
   버튼을 카드 위에 겹치지 않으므로 사진을 가리지 않고, 좁은 화면에서
   위치 계산이 어긋날 일도 없다. */
.band__head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.band__head--split > div:first-child { max-width: 40rem; }

.band__head h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.band__head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ── 버튼 ─────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost { border-color: rgb(255 255 255 / 0.45); color: #fff; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

.btn--outline { border-color: var(--rule); color: var(--ink); background: var(--surface); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ── 헤더 ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(247 245 238 / 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.25;
  flex-shrink: 0;
}

.brand__logo { height: 2.5rem; width: auto; }

.brand__divider {
  width: 1px;
  align-self: stretch;
  margin-block: 0.4rem;
  background: var(--rule);
}

.brand__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--accent-soft); color: var(--accent); }

.site-nav a.is-external {
  margin-left: 0.4rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ── 히어로 ───────────────────────────────────────────────── */

.hero {
  position: relative;
  color: #fff;
  /* 사진이 늦게 뜨거나 실패해도 흰 글씨가 읽히도록 바탕을 깔아 둔다 */
  background: linear-gradient(168deg, #24523d 0%, #1a3b2c 55%, #14291f 100%);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* 사진 위 글씨 대비를 확보하는 스크림 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(14 32 24 / 0.9) 0%, rgb(14 32 24 / 0.72) 42%, rgb(14 32 24 / 0.3) 100%),
    linear-gradient(to top, rgb(14 32 24 / 0.78), transparent 45%);
  pointer-events: none;
}

/* 폭은 .shell 그대로 두고 본문만 좁힌다 — 헤더·트랙 스트립과 좌측 정렬을 맞추기 위해서다 */
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4.5rem, 12vw, 7.5rem);
}

.hero .eyebrow { color: #a8d5b8; }

.hero h1 {
  margin: 0 0 1.5rem;
  max-width: 18ch;
  font-size: clamp(2rem, 5.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

/* 어두운 히어로 위에서는 초록 채움 버튼의 대비가 부족하다 */
.hero .btn--primary { background: #fff; color: var(--accent-deep); }
.hero .btn--primary:hover { background: #dcece2; }

.hero__lead {
  margin: 0 0 2.5rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: rgb(255 255 255 / 0.92);
  max-width: 34rem;
}

/* 히어로 하단 트랙 스트립 — 실적 숫자가 생기면 이 자리를 지표로 교체한다 */
.hero__tracks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.hero__tracks a {
  padding: 1.25rem 0.25rem 1.5rem;
  color: rgb(255 255 255 / 0.72);
  text-decoration: none;
  font-size: 0.9375rem;
  border-right: 1px solid rgb(255 255 255 / 0.1);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.hero__tracks a:last-child { border-right: 0; }
.hero__tracks a:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.hero__tracks strong { display: block; font-size: 1.0625rem; color: #fff; font-weight: 600; }

/* ── 카드 그리드 ──────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
}

/* 사진을 얹는 카드 — 패딩은 본문 쪽으로 옮긴다 */
.card--photo { padding: 0; overflow: hidden; }

.card__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.75rem 1.75rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.card__more {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.card__more.is-pending { color: var(--muted); font-weight: 500; }

/* ── 카드 캐러셀 ──────────────────────────────────────────
   협력 농장이 늘어도 페이지가 세로로 길어지지 않게 가로로 넘긴다.
   JS가 없어도 트랙 자체가 가로 스크롤 영역이라 손가락·트랙패드로
   넘어가고, 스크롤 스냅이 카드를 물어 준다. 좌우 버튼은 JS가
   붙을 때만 드러난다.
   ═══════════════════════════════════════════════════════ */

.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 카드의 hover translateY와 그림자가 잘리지 않도록 여백을 주고,
     레이아웃상 원래 자리는 음수 마진으로 되돌린다. */
  padding: 0.5rem 0.25rem 1rem;
  margin: -0.5rem -0.25rem -1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* 데스크톱에서 3장 남짓 보이고 다음 장이 살짝 걸친다 — 더 있다는 신호다.
   좁은 화면에서는 화면폭의 82%라 역시 다음 장이 걸친다. */
.carousel__item {
  flex: 0 0 min(22rem, 82%);
  scroll-snap-align: start;
}

.carousel__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* display:flex 가 UA 의 [hidden]{display:none} 을 이기므로 되살려 준다.
   JS가 붙기 전과, 넘길 카드가 없을 때 버튼이 보이면 안 된다. */
.carousel__nav[hidden] { display: none; }

.carousel__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-deep);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.carousel__btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: var(--accent-soft);
}

.carousel__btn:active { transform: scale(0.94); }
.carousel__btn svg { width: 1.125rem; height: 1.125rem; }

/* ── 서술 섹션 ────────────────────────────────────────────── */

/* 읽기 좋은 폭으로 좁히되 가운데 정렬하지 않는다 — 나머지 섹션과 좌측을 맞춘다 */
.prose { max-width: var(--w-text); }

.prose p {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  margin: 0 0 1.25rem;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

/* ── 취지문 패널 (왜 농촌인가) ────────────────────────────── */

/* 앞뒤 섹션과 분리된 하나의 컨테이너로 읽히게 한다.
   .prose 를 쓰지 않는 이유 — .prose 는 하위 페이지 두 곳이 공유하고 있어
   여기만 키우면 그쪽까지 따라 커진다. */
/* 폭을 따로 제한하지 않는다 — .shell(72rem) 을 그대로 채운다.
   안쪽 __body / __ref 도 같이 풀어 글줄이 컨테이너 끝까지 간다. */
.manifesto {
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.manifesto__label {
  margin: 0 0 1.5rem;
  padding-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  /* 라벨 위 짧은 강조선 — 패널의 시작점을 눈에 박아 준다 */
  border-top: 3px solid var(--accent);
  display: inline-block;
}

/* 첫 문단은 선언문처럼 크게 */
.manifesto__lead {
  margin: 0 0 1.75rem;
  font-size: clamp(1.375rem, 3.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* 나머지는 본문보다 한 단계 크게 — 읽는 폭은 좁혀 준다 */
.manifesto__body {
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.manifesto__body p {
  margin: 0 0 1.1rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--muted);
}
.manifesto__body p:last-child { margin-bottom: 0; }

.manifesto__body strong { font-weight: 700; color: var(--ink); }

/* 선례 각주 — 본문보다 한 단계 물러난 목소리로 둔다 */
.manifesto__ref {
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.manifesto__ref strong { font-weight: 600; color: var(--accent); }

/* ── 이 계절의 프로그램 ───────────────────────────────────── */

/* feature 를 두 장 이상 쌓을 때의 간격. 한 장만 쓸 때는 감싸지 않아도 된다. */
.features { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* 사진을 오른쪽에 두는 변형 — 여러 장이 이어질 때 시선이 지그재그로 흐른다.
   1열로 접히면 사진이 먼저 와야 하므로 반응형 블록에서 되돌린다. */
.feature--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.feature--flip .feature__art { grid-area: 1 / 2; }
.feature--flip .feature__body { grid-area: 1 / 1; }

.feature__art {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
}

/* 콤바인이 원본 가로 57~86% 지점에 있다. 기본값(center)이면 잘려서
   노출 창을 오른쪽으로 민다 — 화면상으로는 사진이 왼쪽으로 밀린다. */
.feature__art--offset-right { object-position: 80% center; }

.feature__body { padding: clamp(1.75rem, 4vw, 2.75rem); }

.badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--autumn) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--autumn) 12%, transparent);
  color: var(--autumn);
  font-size: 0.8125rem;
  font-weight: 600;
}

.feature__body h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.feature__body > p { margin: 0 0 1.5rem; color: var(--muted); }

.meta {
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.meta div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }
.meta dd.is-pending { color: var(--muted); font-style: italic; }

/* 요약 지표를 가로로 늘어놓는 변형. 항목이 많아지면 알아서 줄바꿈된다. */
.meta--wide {
  margin-top: 2.5rem;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.meta--wide div {
  display: block;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.meta--wide dt {
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.meta--wide dd { font-size: 1.0625rem; font-weight: 600; }

/* ── 현장학습 페이지 조각 ─────────────────────────────────
   /ecotour/rural-field-learning/ 에서만 쓴다.
   ═══════════════════════════════════════════════════════ */

.card__num {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.ticks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--muted);
}

.ticks li { padding-left: 1rem; text-indent: -1rem; }
.ticks li + li { margin-top: 0.35rem; }
.ticks li::before { content: "· "; color: var(--accent); font-weight: 700; }

/* 경고가 아니라 덧붙이는 설명일 때 — 가을색 대신 기본 강조색을 쓴다. */
.notice--plain {
  max-width: none;
  margin-top: 1.75rem;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--rule));
  border-left-color: var(--accent);
  background: var(--surface);
}

.notice__title { margin: 0 0 0.35rem; font-weight: 700; }
.notice--plain p:last-child { margin: 0; color: var(--muted); }

/* 일정표 — 두 날을 나란히, 좁아지면 위아래로 */
.days {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.day {
  padding: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.day__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.day__tag {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.sched { margin: 0; padding: 0; list-style: none; }

.sched li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.sched__time {
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.sched__what { font-size: 0.9375rem; }
.sched__what strong { display: block; font-weight: 600; }
.sched__what { color: var(--muted); }
.sched__what strong { color: var(--ink); }

/* 진행 절차 */
.steps {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.steps li {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

.steps__num {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.steps strong { display: block; margin-bottom: 0.35rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* 자주 묻는 질문 — <details> 를 그대로 쓴다. JS가 없어도 열리고 닫힌다. */
.faq { border-top: 1px solid var(--rule); max-width: var(--w-text); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  padding: 1.125rem 2rem 1.125rem 0.25rem;
  position: relative;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.5rem;
  color: var(--accent);
  font-weight: 700;
}

.faq details[open] summary::after { content: "−"; }

.faq p {
  margin: 0;
  padding: 0 2rem 1.25rem 0.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ── 자료 목록 ────────────────────────────────────────────── */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.list li { border-bottom: 1px solid var(--rule); }

/* 자료가 공개되면 .list__row 를 <a> 로 바꾸면 호버 동작까지 그대로 붙는다 */
.list a,
.list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start 0.18s ease;
}
.list a:hover { padding-inline-start: 0.75rem; }
.list a:hover .list__title { color: var(--accent); }

.list__title { font-weight: 600; }

.list__kind {
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.list__desc { grid-column: 1 / -1; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ── 준비 중 안내 ─────────────────────────────────────────── */

.notice-band { padding-block: clamp(2rem, 5vw, 3rem); }

/* 취지문 패널과 나란히 보이도록 폭을 제한하지 않는다 — .shell 을 그대로 채운다 */
.notice {
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--autumn) 32%, var(--rule));
  border-left-width: 4px;
  border-left-color: var(--autumn);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--autumn) 7%, var(--surface));
}

.notice__label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--autumn);
}

.notice__body { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.notice__body:last-child { margin-bottom: 0; }
.notice__body strong { font-weight: 600; }

/* ── 빈 상태 ──────────────────────────────────────────────── */

.empty {
  margin: 0;
  padding: 2.5rem 1.75rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  font-size: 0.9375rem;
}

/* ── 소식 카드 ────────────────────────────────────────────── */

.news time {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 소식 캐러셀 카드의 머리줄 — 표지와 날짜를 한 줄에 둔다.
   .card p 의 색·크기를 물려받지 않도록 여기서 다시 잡는다. */
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.news-card__meta time {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 실제 진행 기록이 아니라 예시임을 카드마다 밝히는 표지.
   실제 소식으로 교체할 때 이 <span> 만 지우면 된다. */
.news-card__flag {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--autumn) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--autumn) 12%, transparent);
  color: var(--autumn);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 참여 유도 밴드 ───────────────────────────────────────── */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: #fff;
}

.cta h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cta p { margin: 0; color: rgb(255 255 255 / 0.78); }

/* ── 푸터 ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem 4rem;
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 2rem;
}

.site-footer h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

.site-footer__legal {
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

/* ── 약관·방침 문서 ───────────────────────────────────────── */

.doc { max-width: 48rem; }

.doc h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.doc__meta {
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc__lead { margin: 0 0 1.25rem; font-size: 1.0625rem; }

.doc section { margin-top: 2.75rem; }

.doc h2 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.doc p { margin: 0 0 1rem; }
.doc p:last-child { margin-bottom: 0; }

.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.doc ol li { margin-bottom: 0.5rem; }
.doc ol li:last-child { margin-bottom: 0; }

.doc code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  word-break: break-all;
}

/* 부연 설명 — 본문보다 한 단계 낮은 목소리 */
.doc__note {
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rule);
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc__inline-note { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.875rem; }

/* 좁은 화면에서 표가 페이지를 밀지 않도록 표만 가로 스크롤한다 */
.doc__table { margin: 0 0 1rem; overflow-x: auto; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.doc th,
.doc td {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.doc thead th { background: var(--accent-soft); font-weight: 600; white-space: nowrap; }
.doc tbody th { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); font-weight: 600; white-space: nowrap; }

.doc__back {
  margin: 3.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}

/* ── 모달 (문의 · 소식 받아보기) ──────────────────────────── */

.modal {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(90dvh, 52rem);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 64px -24px rgb(26 29 26 / 0.45);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal::backdrop { background: rgb(14 32 24 / 0.55); }

.modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.modal__head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal__x {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.modal__x:hover { background: var(--accent-soft); color: var(--ink); }

.modal__form { padding: 1.5rem; }
.modal__form[hidden] { display: none; }

.modal__intro {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.field { margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }

.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.field__hint { margin: -0.15rem 0 0.6rem; color: var(--muted); font-size: 0.8125rem; }

/* 입력칸 아래에 붙는 도움말은 반대 방향으로 띄운다 */
.field input + .field__hint,
.field select + .field__hint,
.field textarea + .field__hint { margin: 0.35rem 0 0; }

.req { color: var(--autumn); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
}

.field textarea { resize: vertical; line-height: 1.6; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.check {
  display: flex;
  align-items: start;
  gap: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.55;
  cursor: pointer;
}

.check input { margin: 0.2rem 0 0; flex-shrink: 0; accent-color: var(--accent); }

/* 최상위 동의 체크박스만 위에 여백을 준다 */
.modal__form > .check { margin-top: 0.5rem; color: var(--muted); }

/* 허니팟 — 화면에서 감추되 display:none 은 피한다 */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.modal__foot .btn { padding-block: 0.7rem; }
.modal__foot .btn[disabled] { opacity: 0.55; pointer-events: none; }

.modal__status {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9375rem;
}
.modal__status:empty { display: none; }
.modal__status[data-kind="pending"] { color: var(--muted); }
.modal__status[data-kind="error"] { color: #a8322a; }

.modal__status[data-kind="ok"] {
  margin: 0 1.5rem 1.5rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; text-align: center; }
}

/* ── 반응형 ───────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .hero__tracks { grid-template-columns: repeat(2, 1fr); }
  .hero__tracks a:nth-child(2n) { border-right: 0; }
  .hero__tracks a:nth-child(-n + 2) { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
  .feature,
  .feature--flip { grid-template-columns: 1fr; }
  /* 좌우를 못박아 둔 자리를 풀어 준다 — 안 그러면 두 칸이 한 칸에 겹친다 */
  .feature--flip .feature__art,
  .feature--flip .feature__body { grid-area: auto; }
  /* 1열이 되면 높이를 잡아 줄 형제가 없으므로 비율로 고정한다 */
  .feature__art { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .cta { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  /* 시간 열을 위로 올린다. 7.5rem을 떼어 주면 본문이 두세 글자씩 끊긴다. */
  .sched li { grid-template-columns: 1fr; gap: 0.15rem; }
  .band__head--split { flex-direction: column; align-items: stretch; }
  .band__head--split .carousel__nav { justify-content: flex-end; }
}

@media (max-width: 34rem) {
  .site-header__inner { gap: 0.75rem; }
  .brand { gap: 0.5rem; }
  .brand__logo { height: 2rem; }
  .brand__name { font-size: 0.9375rem; }
  .meta div { grid-template-columns: 1fr; gap: 0; }

  /* 메뉴가 가로로 잘릴 때 더 있다는 신호를 준다 */
  .site-nav {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}

/* 다크 모드는 두지 않는다.
   본사이트(foodandclimate.or.kr)가 prefers-color-scheme 를 쓰지 않아
   항상 크림색으로 나오므로, 여기만 어두워지면 이동할 때 배경이 튄다.
   색은 본사이트 실측값에 맞췄다 — 배경 #f7f5ee, 본문 #18220f. */

/* ── 접근성 ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}