/* ==========================================================
   도련드르 마을 기록 : 스타일
   - 색은 맨 위 :root 의 변수만 고치면 사이트 전체가 바뀝니다.
   - 모서리는 모두 각지게(0). 둥근 카드, 큰 그림자, 반짝임은 쓰지 않습니다.
   ========================================================== */

:root {
  /* 바탕: 깨끗한 흰 종이 (누런 기 없이, 아주 살짝만 따뜻하게) */
  --paper: #f8f8f6;
  --paper-2: #efeeeb;      /* 한 톤 짙은 바탕 (구역 구분) */
  --paper-3: #e4e2de;      /* 사진 자리표시 */
  /* 글자: 먹 */
  --ink: #1f1d1b;
  --ink-2: #57534e;        /* 보조 글자 */
  --line: #d5d2cc;
  /* 포인트: 감 (한 가지만) */
  --gam: #9e4219;
  --gam-strong: #84350f;
  --gam-wash: #f6e7dc;     /* 감빛 아주 옅게 */
  --on-gam: #fbf7f0;

  --font-head: "MaruBuri", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --font-body: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  /* 첫 화면 (관리 화면 "디자인 설정"에서 바뀜) */
  --hero-text: #fbfaf8;
  --hero-dim: 0.55;
  --hero-title: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a17;
    --paper-2: #25221e;
    --paper-3: #302c26;
    --ink: #ede6d9;
    --ink-2: #bdb2a2;
    --line: #443e35;
    --gam: #e3925f;
    --gam-strong: #f0a776;
    --gam-wash: #3a271b;
    --on-gam: #1c1a17;
  }
}

/* ---------- 글꼴 ----------
   마루 부리(네이버, OFL)를 자주 쓰는 한글 2,350자로 줄여 담았습니다.
   그 밖의 글자는 Noto Serif KR 등 대체 글꼴로 보입니다. */
@font-face {
  font-family: "MaruBuri"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/MaruBuri-Regular.subset.woff2") format("woff2");
}
@font-face {
  font-family: "MaruBuri"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/MaruBuri-Bold.subset.woff2") format("woff2");
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%; /* 16px. 젊고 가벼운 느낌으로 (처음엔 어르신 기준 18px이었음) */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: -0.01em;
  word-break: keep-all;          /* 한국어 낱말 중간에서 줄이 끊기지 않게 */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gam); }
:focus-visible { outline: 3px solid var(--gam); outline-offset: 3px; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.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;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: 38rem; }
.prose p, .prose li { font-size: 1.05rem; }
.prose img { margin: 1.5rem 0; }
.muted { color: var(--ink-2); }
.section { padding-block: var(--space-section); }
.section + .section { padding-top: 0; }

/* ---------- 머리글과 메뉴 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}
.brand { display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.brand-sub { font-size: 0.85rem; color: var(--ink-2); }
.brand:hover .brand-name { color: var(--gam); }

.nav-list, .sub { list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 500; text-decoration: none; padding: 0.5rem 0.15rem;
}
.nav-link[aria-current="page"], .nav-item.is-current > .nav-top > .nav-link {
  color: var(--gam);
  box-shadow: inset 0 -2px 0 var(--gam);
}
.sub a { display: block; text-decoration: none; padding: 0.7rem 1.25rem; }
.sub a:hover, .sub a:focus-visible { background: var(--paper-2); color: var(--ink); }
.sub a[aria-current="page"] { color: var(--gam); font-weight: 600; }

.chev {
  display: inline-block; width: 0.45em; height: 0.45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}

.menu-toggle, .sub-toggle {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 40px; padding: 0 0.75rem; border: 1px solid var(--ink); font-size: 0.875rem;
  font-weight: 700;
}
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.nav-open .burger { background: transparent; }
.nav-open .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-open .burger::after { transform: translateY(-6px) rotate(-45deg); }

/* 기본(스마트폰·태블릿): "메뉴" 단추로 열고, 각 메뉴 옆 단추로 아래 메뉴를 펼침 */
.brand-sub { display: none; }
.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 0.5rem var(--gutter) 1.5rem;
}
.nav-open .site-nav { display: block; }
.nav-item { border-bottom: 1px solid var(--line); }
.nav-top { display: flex; align-items: center; justify-content: space-between; }
.nav-link { flex: 1; font-size: 1.05rem; min-height: 52px; }
.nav-link .chev { display: none; }
.sub-toggle {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-left: 1px solid var(--line);
}
.sub-toggle[aria-expanded="true"] .chev { transform: translateY(0.05em) rotate(225deg); }
.sub { display: none; padding: 0 0 0.8rem 0.75rem; }
.nav-item[data-open="true"] > .sub { display: block; }
.sub a { padding: 0.6rem 0.8rem; font-size: 0.92rem; border-left: 2px solid var(--line); }
.sub a[aria-current="page"] { border-left-color: var(--gam); }

/* 넓은 화면 + 마우스: 마우스를 올리거나 탭으로 들어가면 펼침 */
@media (hover: hover) and (min-width: 1024px) {
  .menu-toggle, .sub-toggle { display: none; }
  .brand-sub { display: inline; }
  .site-nav {
    display: block; position: static; max-height: none; overflow: visible;
    background: none; border: 0; padding: 0;
  }
  .nav-item { border: 0; }
  .nav-top { justify-content: flex-start; }
  .nav-link { flex: none; font-size: 0.92rem; min-height: 0; }
  .nav-link .chev { display: inline-block; }
  .sub { display: block; }
  .sub a { padding: 0.3rem 0.7rem; font-size: 0.82rem; line-height: 1.55; border-left: 0; white-space: nowrap; }
  .sub a:hover, .sub a:focus-visible { background: rgb(31 29 27 / 0.06); }
  .nav-list { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); }
  .nav-item { position: relative; }
  .nav-top { display: flex; align-items: center; min-height: var(--header-h); }
  .sub {
    /* 글자 시작선(큰 메뉴 글자와 같은 줄)에 맞춘, 내용만큼만 큰 상자 */
    position: absolute; top: calc(100% - 14px); left: -0.5rem;
    width: max-content; min-width: calc(100% + 1rem);
    background: rgb(248 248 246 / 0.97); border: 1px solid rgb(31 29 27 / 0.1); border-top: 2px solid var(--gam);
    padding: 0.25rem 0;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }
  .nav-item:hover > .sub,
  .nav-item:focus-within > .sub,
  .nav-item[data-open="true"] > .sub {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .nav-item.dismissed > .sub { opacity: 0; visibility: hidden; }
  .nav-item:hover .chev, .nav-item:focus-within .chev { transform: translateY(0.05em) rotate(225deg); }
}

/* ---------- 단추와 링크 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 42px; padding: 0 1.1rem; font-size: 0.9rem; letter-spacing: -0.005em;
  font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--gam); background: var(--gam); color: var(--on-gam);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--gam-strong); border-color: var(--gam-strong); color: var(--on-gam); }
.btn:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; text-decoration: none; color: var(--gam);
  padding-block: 0.4rem; border-bottom: 1px solid currentColor;
}
.more::after { content: "→"; transition: transform 0.15s ease; }
.more:hover::after { transform: translateX(3px); }

/* ---------- 사진, 캡션, 자리표시 ---------- */
.photo { margin: 0; }
.photo img { width: 100%; object-fit: cover; background: var(--paper-3); }
.cap {
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem;
  margin-top: 0.65rem; font-size: 0.85rem; line-height: 1.55; color: var(--ink-2);
}
@media (min-width: 600px) { .cap > span + span:not(.cap-title + span) { padding-left: 1rem; border-left: 1px solid var(--line); } }
.cap .cap-title { color: var(--ink); font-weight: 600; flex-basis: 100%; border: 0; padding: 0; }
.cap a { color: inherit; }
.ph {
  display: grid; place-content: center; text-align: center; gap: 0.3rem;
  width: 100%; padding: 1.5rem;
  background: var(--paper-3);
  outline: 1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink) 5%, transparent) 14px 15px),
    var(--paper-3);
  color: var(--ink-2);
  outline: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset: -10px;
}
.ph-label { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ph-hint { font-size: 0.85rem; }

.badge {
  display: inline-block; vertical-align: 0.2em;
  margin-right: 0.45rem; padding: 0.05rem 0.45rem;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--gam); border: 1px solid var(--gam);
}
.badge-solid { background: var(--gam); color: var(--on-gam); }
.notice-example {
  margin: 0 0 1.5rem; padding: 0.8rem 1rem;
  background: var(--gam-wash); border-left: 3px solid var(--gam); font-size: 0.95rem;
}

/* ---------- 유튜브 ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt-link { position: absolute; inset: 0; display: block; color: #fbf7f0; }
.yt-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 16 12 / 0.55), transparent 55%); }
.yt-play {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 1.1rem; background: var(--gam); color: #fbf7f0; font-weight: 700;
}
.yt-link:hover .yt-play { background: #84350f; }
.yt-icon { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.video-ph { aspect-ratio: 16 / 9; }

/* ---------- 쪽 머리 (각 섹션 첫 부분) ---------- */
.page-head { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.crumbs { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.8rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin-inline: 0.45rem; }
.page-head h1 { margin-bottom: 0.4em; }
.page-head .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 36rem; margin: 0; }

/* ---------- 첫 화면 ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  color: #fbfaf8; background: #2a2622;
}
.hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgb(14 12 10 / calc(var(--hero-dim) * 0.82)), transparent 22%),
    linear-gradient(to top, rgb(14 12 10 / calc(var(--hero-dim) * 1.42)), rgb(14 12 10 / calc(var(--hero-dim) * 0.45)) 55%, transparent 80%);
}
.hero-inner { width: 100%; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(4.5rem, 4rem + 4vw, 7.5rem); }
.hero-place { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; color: #f3c9ad; margin-bottom: 1.1rem; }
.hero h1 {
  color: var(--hero-text); font-size: var(--hero-title);
  line-height: 1.22; letter-spacing: -0.02em; margin-bottom: 0.45em; max-width: 14ch; text-wrap: initial;
}
.hero .lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--hero-text); opacity: 0.9; max-width: 30rem; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.hero .btn-quiet { color: #fbfaf8; border-color: rgb(251 250 248 / 0.8); background: rgb(14 12 10 / 0.15); }
.hero .btn-quiet:hover { background: #fbfaf8; color: #1f1d1b; border-color: #fbfaf8; }
/* 글자를 가운데에 둘 때 */
.hero.is-centered { align-items: center; text-align: center; }
.hero.is-centered .hero-inner { padding-bottom: calc(var(--header-h) + 2rem); }
.hero.is-centered h1, .hero.is-centered .lede { margin-inline: auto; }
.hero.is-centered .hero-actions { justify-content: center; }
.hero-cap {
  position: absolute; right: var(--gutter); bottom: 1rem; margin: 0;
  font-size: 0.75rem; color: rgb(236 231 225 / 0.85); text-align: right; max-width: 70%;
}
.hero-cap a { color: inherit; }
@media (max-width: 600px) {
  .hero-img { object-position: 32% 60%; }
  .hero-cap { left: var(--gutter); text-align: left; max-width: none; }
  .hero-inner { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: hero-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-inner > * { animation: hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-inner > :nth-child(2) { animation-delay: 0.12s; }
  .hero-inner > :nth-child(3) { animation-delay: 0.24s; }
  .hero-inner > :nth-child(4) { animation-delay: 0.36s; }
}
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 첫 화면에서는 머리글이 사진 위에 투명하게 떠 있다가, 사진을 지나면 바탕색이 생김 */
.is-home .site-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; color: #fbfaf8; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.is-home .site-header .brand-sub { color: rgb(251 250 248 / 0.8); }
.is-home .site-header .menu-toggle { border-color: rgb(251 250 248 / 0.85); }
.is-home .site-header.is-solid,
.is-home .site-header.nav-open { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
.is-home .site-header.is-solid .brand-sub,
.is-home .site-header.nav-open .brand-sub { color: var(--ink-2); }
.is-home .site-header.is-solid .menu-toggle,
.is-home .site-header.nav-open .menu-toggle { border-color: var(--ink); }
.is-home .site-header:not(.is-solid):not(.nav-open) .nav-link[aria-current], 
.is-home .site-header:not(.is-solid):not(.nav-open) .nav-link:hover { color: #f3c9ad; }
.site-nav, .sub { color: var(--ink); }
@media (hover: hover) and (min-width: 1024px) {
  .site-nav { color: inherit; }
  .sub { color: var(--ink); }
  /* 살짝 비치는 유리 같은 바탕 (흐림 효과를 지원하는 브라우저에서만) */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sub {
      background: rgb(248 248 246 / 0.5);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
    }
  }
}
@media (prefers-color-scheme: dark) and (hover: hover) and (min-width: 1024px) {
  .sub { background: rgb(28 26 23 / 0.97); border-color: rgb(237 230 217 / 0.12); }
  .sub a:hover, .sub a:focus-visible { background: rgb(237 230 217 / 0.08); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sub { background: rgb(28 26 23 / 0.5); } }
}
@media (prefers-reduced-transparency: reduce) and (hover: hover) and (min-width: 1024px) {
  .sub { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 어르신 이야기: 큰 영상 하나 + 글 목록 */
.oral-feature { display: grid; gap: 1.5rem 3rem; }
.oral-feature .meta { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 0.8rem; }
.oral-feature h3 { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem); }
.oral-feature blockquote {
  margin: 0 0 1.2rem; padding-left: 1.1rem; border-left: 3px solid var(--gam);
  font-family: var(--font-head); font-size: 1.12rem; line-height: 1.8;
}
@media (min-width: 900px) { .oral-feature { grid-template-columns: 7fr 5fr; align-items: end; } }

.row-list { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.row-list li { border-bottom: 1px solid var(--line); }
.row-list a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; align-items: baseline;
  padding: 1.1rem 0; text-decoration: none;
}
.row-list .row-title { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
.row-list .row-meta { color: var(--ink-2); font-size: 0.92rem; white-space: nowrap; }
.row-list a:hover .row-title { color: var(--gam); }
@media (max-width: 600px) {
  .row-list a { grid-template-columns: 1fr; }
  .row-list .row-meta { white-space: normal; }
}

/* 옛 사진 띠: 옆으로 넘겨 보기, 사진마다 비율이 다름 */
.strip-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.strip-head h2 { margin: 0; }
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 22rem);
  gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 1rem;
  scrollbar-color: var(--line) transparent;
}
.strip > * { scroll-snap-align: start; }
.strip .photo.is-wide { grid-column: span 1; }
.strip .photo img, .strip .ph { aspect-ratio: 3 / 4; }
.strip .photo:nth-child(3n+2) img, .strip .photo:nth-child(3n+2) .ph { aspect-ratio: 1 / 1; margin-top: 3rem; }
.strip a { text-decoration: none; }
@media (min-width: 1024px) {
  .strip {
    grid-auto-columns: 19rem;
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
}

/* 마을의 시간: 진짜 마을 사진 + 연혁 일부 */
.timeflow { display: grid; gap: 2.5rem; }
.timeflow .photo img { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .timeflow { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: start; }
  .timeflow .photo { position: sticky; top: calc(var(--header-h) + 2rem); margin-left: calc(-1 * var(--gutter)); }
}
.years { list-style: none; margin: 0 0 2rem; padding: 0; }
.years li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.years .y { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--gam); line-height: 1.4; }
.years h3 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.years p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }

/* 지도 띠: 사진 위에 글 (어두운 막을 깔아 글이 잘 읽히게) */
.band {
  position: relative; isolation: isolate; color: #fbf7f0;
  min-height: min(70vh, 34rem); display: grid; align-items: end;
}
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgb(22 18 14 / 0.82), rgb(22 18 14 / 0.35) 70%, rgb(22 18 14 / 0.1)); }
.band .wrap { padding-block: 3.5rem; }
.band h2 { color: #fbf7f0; max-width: 18ch; }
.band p { max-width: 30rem; font-size: 1.08rem; color: #ece4d6; }
.band .btn { margin-top: 0.8rem; }
.band .band-cap { position: absolute; right: var(--gutter); bottom: 0.8rem; font-size: 0.78rem; color: #d9cfbf; margin: 0; }
@media (max-width: 760px) {
  .band .wrap { padding-bottom: 4.5rem; }
  .band .band-cap { left: var(--gutter); }
}
.band .band-cap a { color: inherit; }

/* 마을 광장: 날짜가 큰 소식 목록 */
.square-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .square-grid { grid-template-columns: 7fr 4fr; gap: 5rem; } }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-top: 1px solid var(--line); }
.news-list a { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.2rem; padding: 1.2rem 0; text-decoration: none; }
.news-date { font-family: var(--font-head); line-height: 1.2; color: var(--ink-2); }
.news-date b { display: block; font-size: 1.45rem; color: var(--ink); white-space: nowrap; }
.news-cat { font-size: 0.85rem; font-weight: 700; color: var(--gam); }
.news-title { display: block; font-weight: 700; font-size: 1.1rem; }
.news-list a:hover .news-title { color: var(--gam); }

.events { background: var(--paper-2); padding: 1.6rem; align-self: start; }
.events h3 { margin-bottom: 1rem; }
.event { padding: 1rem 0; border-top: 1px solid var(--line); }
.event:first-of-type { border-top: 0; padding-top: 0; }
.event-when { font-weight: 700; color: var(--gam); }
.event-title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; display: block; text-decoration: none; }
.event-where { font-size: 0.95rem; color: var(--ink-2); }
.events-empty { color: var(--ink-2); margin: 0; }

/* 기증 부탁: 감빛 구역 */
.ask { background: var(--gam-wash); }
.ask .wrap { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.ask h2 { margin: 0; }
.ask p { margin: 0; max-width: 36rem; font-size: 1.08rem; }
@media (min-width: 900px) { .ask .wrap { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- 섹션 첫 화면 (마을 소개, 기록관 등) ---------- */
.doors { display: grid; gap: 3rem 4rem; }
.door { text-decoration: none; display: block; }
.door h2 { margin: 1.1rem 0 0.4rem; }
.door p { color: var(--ink-2); margin: 0 0 0.6rem; }
.door:hover h2 { color: var(--gam); }
.door .photo img, .door .ph { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .doors { grid-template-columns: 7fr 5fr; align-items: start; }
  .doors .door:nth-child(2) { margin-top: 6rem; }
  .doors .door:nth-child(2) .photo img, .doors .door:nth-child(2) .ph { aspect-ratio: 4 / 5; }
}

.archive-index { display: grid; gap: 4rem; }
.archive-index > * { min-width: 0; }
.archive-index > .wrap { width: 100%; }
.ai-photos .strip { margin-inline: calc(-1 * var(--gutter)); }
.ai-pair { display: grid; gap: 3rem; }
@media (min-width: 900px) { .ai-pair { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.ai-block h2 a { text-decoration: none; }
.ai-block h2 a:hover { color: var(--gam); }

/* ---------- 목록 화면 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.filter {
  font: inherit; font-size: 0.95rem; cursor: pointer;
  min-height: 44px; padding: 0 1rem; background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter:hover { border-color: var(--ink); }

.oral-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.oral-item a { display: grid; gap: 1rem 2rem; text-decoration: none; }
.oral-item .thumb img, .oral-item .thumb .ph { aspect-ratio: 16 / 9; }
.oral-item h2 { font-size: 1.35rem; margin: 0 0 0.3rem; }
.oral-item a:hover h2 { color: var(--gam); }
.oral-item .meta { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 0.5rem; }
.oral-item p { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; list-style: none; padding: 0; margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--gam); }
@media (min-width: 760px) {
  .oral-item a { grid-template-columns: 2fr 3fr; align-items: center; }
  .oral-item:first-child a { grid-template-columns: 3fr 2fr; }
  .oral-item:first-child h2 { font-size: 1.7rem; }
}

.gallery { display: grid; gap: 2.5rem 2rem; }
.gallery a { text-decoration: none; }
.gallery .photo img, .gallery .ph { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .gallery > * { grid-column: span 3; }
  .gallery > *:nth-child(5n+1) { grid-column: span 4; }
  .gallery > *:nth-child(5n+2) { grid-column: span 2; align-self: end; }
  .gallery > *:nth-child(5n+2) img, .gallery > *:nth-child(5n+2) .ph { aspect-ratio: 3 / 4; }
}

.empty {
  padding: 2rem; border: 1px dashed var(--line); color: var(--ink-2);
}
.empty strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: 1.1rem; margin-bottom: 0.3rem; }

/* 연혁 전체 */
.decade { display: grid; gap: 1rem 3rem; padding: 2rem 0; border-top: 1px solid var(--ink); }
.decade h2 { font-size: 1.6rem; color: var(--gam); margin: 0; }
@media (min-width: 900px) {
  .decade { grid-template-columns: 12rem 1fr; }
  .decade h2 { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.decade .years { margin: 0; }
.decade .years li:first-child { border-top: 0; padding-top: 0; }
.years .rel { margin-top: 0.4rem; font-size: 0.92rem; }

/* 장소 목록 */
.place-list { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 3rem; }
.place-list li { break-inside: avoid; padding: 1rem 0; border-top: 1px solid var(--line); }
.place-list a { text-decoration: none; }
.place-list h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.place-list a:hover h3 { color: var(--gam); }
.place-list p { margin: 0; color: var(--ink-2); font-size: 0.97rem; }

/* 이야기 목록: 글 중심 */
.story-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.story-list li { border-top: 1px solid var(--ink); }
.story-list a { display: grid; gap: 0.6rem 3rem; padding: 2rem 0; text-decoration: none; }
.story-list .theme { font-weight: 700; color: var(--gam); font-size: 0.95rem; }
.story-list h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.story-list p { margin: 0; color: var(--ink-2); max-width: 36rem; }
.story-list a:hover h2 { color: var(--gam); }
@media (min-width: 900px) { .story-list a { grid-template-columns: 12rem 1fr; } .story-list p { grid-column: 2; } }

/* ---------- 자료 한 건 화면 ---------- */
.record { padding-bottom: var(--space-section); }
.record-grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 960px) { .record-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.2rem; font-size: 0.97rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 600; }
.aside-box { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.aside-box + .aside-box { margin-top: 2.5rem; }
.aside-box h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.related { list-style: none; margin: 0; padding: 0; }
.related li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.related a { text-decoration: none; font-weight: 600; }
.related small { display: block; color: var(--ink-2); font-weight: 400; }
.record-photo img { width: 100%; max-height: 80vh; object-fit: contain; background: var(--paper-2); }
.record-photo .ph { aspect-ratio: 4 / 3; }
.summary-title { font-size: 1.3rem; margin-top: 2.5rem; }
.back { margin-top: 3rem; }

/* ---------- 지도 ---------- */
.map-layout { display: grid; gap: 1.5rem; }
.map-box { height: min(70vh, 38rem); min-height: 22rem; border: 1px solid var(--line); background: var(--paper-2); }
@media (min-width: 960px) { .map-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.map-places { list-style: none; margin: 0; padding: 0; max-height: min(70vh, 38rem); overflow: auto; }
.map-places li { border-bottom: 1px solid var(--line); }
.map-places button {
  width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 0.9rem 0.6rem; min-height: 48px;
}
.map-places button:hover, .map-places button[aria-current="true"] { background: var(--paper-2); }
.map-places strong { display: block; font-family: var(--font-head); }
.map-places span { font-size: 0.92rem; color: var(--ink-2); }
.leaflet-container { font-family: var(--font-body); font-size: 16px; }
.leaflet-popup-content { font-size: 12px; line-height: 1.5; margin: 0; width: 220px !important; }
.leaflet-popup-content-wrapper { padding: 0; }
.pop { padding: 12px 14px 12px; }
.pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-right: 14px; }
.pop-img { flex: none; width: 52px; height: 52px; object-fit: cover; background: #eee; }
.pop-title { font-family: var(--font-head); font-size: 14px; line-height: 1.35; margin: 0; }
.pop-text { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: #57534e; }
.pop-link { font-size: 12px; font-weight: 700; color: #9e4219; }
.pop .badge { font-size: 10px; padding: 0 4px; margin-right: 4px; }
.leaflet-container a.leaflet-popup-close-button { top: 4px; right: 4px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0; }
.pin {
  width: 22px; height: 22px; background: var(--gam); border: 3px solid #fbf7f0;
  box-shadow: 0 1px 4px rgb(40 30 20 / 0.35); transform: rotate(45deg);
}
.pin.is-active { background: var(--ink); }

/* ---------- 바닥글 ---------- */
.site-footer { border-top: 1px solid var(--ink); padding-block: 3rem 4rem; font-size: 0.95rem; }
.footer-grid { display: grid; gap: 2rem 3rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 3fr; } }
.footer-name { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin-bottom: 0.4rem; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 900px) { .footer-nav { grid-template-columns: repeat(4, 1fr); } }
.footer-nav h2 { font-family: var(--font-body); font-size: 0.95rem; margin-bottom: 0.5rem; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { padding: 0.2rem 0; }
.footer-nav a { text-decoration: none; color: var(--ink-2); }
.footer-nav a:hover { color: var(--gam); text-decoration: underline; }
.footer-note { color: var(--ink-2); margin-top: 2rem; font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .hero-actions, .filters { display: none; }
  .hero { min-height: 0; color: #000; }
  body { background: #fff; color: #000; }
}

/* 구술 한 줄 인용 */
.pull {
  margin: 2rem 0 0; padding-left: 1.2rem; border-left: 3px solid var(--gam);
  font-family: var(--font-head); font-size: 1.25rem; line-height: 1.8;
}

/* ---------- 검색 ---------- */
/* 돋보기: 동그라미 + 손잡이 (글꼴·그림 파일 없이 선으로) */
.search-icon {
  position: relative; display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-radius: 50%;
}
.search-icon::after {
  content: ""; position: absolute; width: 2px; height: 7px; background: currentColor;
  right: -4px; bottom: -6px; transform: rotate(-45deg);
}

/* 첫 화면 사진 위 검색창: 반투명 바탕으로 사진과 어울리게 */
.hero-search {
  display: flex; width: min(100%, 30rem); margin-top: 1.6rem;
  background: rgb(251 250 248 / 0.94); border: 1px solid rgb(251 250 248 / 0.6);
  box-shadow: 0 6px 24px rgb(14 12 10 / 0.18);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-search { background: rgb(251 250 248 / 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.hero-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #1f1d1b;
  font: inherit; font-size: 0.95rem; padding: 0 1rem; height: 48px;
}
.hero-search input::placeholder { color: #6b6560; }
.hero-search input:focus { outline: none; }
.hero-search:focus-within { outline: 3px solid var(--gam); outline-offset: 2px; }
.hero-search button {
  flex: none; width: 52px; border: 0; cursor: pointer;
  background: var(--gam); color: var(--on-gam); display: grid; place-items: center;
}
.hero-search button:hover { background: var(--gam-strong); }
.hero.is-centered .hero-search { margin-inline: auto; }
.hero-actions { margin-top: 1.1rem; }

/* 머리글의 검색 바로가기 */
.header-search {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 0.6rem;
  text-decoration: none; font-weight: 600; font-size: 0.875rem; margin-left: auto;
}
.header-search:hover { color: var(--gam); }
.header-search .search-icon { width: 13px; height: 13px; }
@media (max-width: 420px) { .header-search-text { display: none; } }
@media (hover: hover) and (min-width: 1024px) {
  .header-search { order: 3; margin-left: 0.25rem; font-size: 0.92rem; font-weight: 500; }
  .header-inner { gap: 1.25rem; }
  .site-nav { margin-left: auto; }
}

/* 검색 결과 쪽 */
.search-page-form { display: flex; max-width: 36rem; margin-top: 1.4rem; border: 1px solid var(--ink); }
.search-page-form input { flex: 1; min-width: 0; border: 0; background: var(--paper); color: var(--ink); font: inherit; padding: 0 1rem; height: 50px; }
.search-page-form input:focus { outline: none; }
.search-page-form:focus-within { outline: 3px solid var(--gam); outline-offset: 2px; }
.search-page-form button { border: 0; background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; padding: 0 1.4rem; cursor: pointer; }
.search-status { color: var(--ink-2); margin: 0 0 1.5rem; }
.search-status b { color: var(--ink); }
.search-group { margin-bottom: 2.5rem; }
.search-group h2 { font-size: 1.15rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.search-group h2 span { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-2); font-weight: 500; margin-left: 0.3rem; }
.search-group ul { list-style: none; margin: 0; padding: 0; }
.search-group li { border-bottom: 1px solid var(--line); }
.search-group a { display: grid; gap: 0.15rem; padding: 1rem 0; text-decoration: none; }
.search-title { font-weight: 700; font-size: 1.05rem; }
.search-group a:hover .search-title { color: var(--gam); }
.search-meta { font-size: 0.85rem; color: var(--ink-2); }
.search-snippet { font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; }
.search-results mark { background: var(--gam-wash); color: inherit; padding: 0 1px; }
.search-hint { color: var(--ink-2); }
.search-examples a { display: inline-block; margin: 0.3rem 0.4rem 0 0; padding: 0.25rem 0.7rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.search-examples a:hover { border-color: var(--gam); color: var(--gam); }

/* ---------- 문의 팝업 ---------- */
.inq-dialog {
  width: min(30rem, calc(100vw - 2rem)); max-width: none; max-height: min(92dvh, 46rem);
  overflow: auto; padding: 1.2rem 1.35rem 1.3rem; font-size: 0.8125rem; line-height: 1.6;
  border-radius: 14px; /* 사용자 요청: 팝업만 부드럽게 (사이트 나머지는 각진 모서리 그대로) */ border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); box-shadow: 0 10px 32px rgb(0 0 0 / 0.2);
}
.inq-dialog [hidden] { display: none !important; } /* 보내기 전 "보냈습니다"가 같이 보이던 문제 */
.inq-dialog::backdrop { background: rgb(18 16 14 / 0.68); }
.inq-form { display: grid; gap: 0.8rem; margin: 0; }
.inq-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; }
.inq-top h2, .inq-done h2 { margin: 0; font-size: 1.05rem; }
.inq-close {
  position: relative; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
.inq-close span::before, .inq-close span::after {
  content: ""; position: absolute; left: 9px; top: 15px; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; transform: rotate(45deg);
}
.inq-close span::after { transform: rotate(-45deg); }
.inq-close:hover { color: var(--gam); background: var(--paper-2); }
.inq-lede { margin: 0; color: var(--ink-2); font-size: 0.78rem; }
.inq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 0.75rem; }
.inq-field { min-width: 0; }
.inq-field label { display: block; margin-bottom: 0.2rem; font-weight: 600; font-size: 0.75rem; }
.inq-field input, .inq-field textarea {
  display: block; width: 100%; min-height: 36px; padding: 0.35rem 0.65rem; font-size: 0.8125rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit;
}
.inq-field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.inq-field input:focus, .inq-field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--gam-wash); border-color: var(--gam); }
.inq-field:has(#inq-name), .inq-field:has(#inq-message), .inq-hint { grid-column: 1 / -1; } /* 성명은 한 줄, 전화·메일은 나란히 */
.inq-hint { margin: -0.45rem 0 0; color: var(--ink-2); font-size: 0.72rem; }
.req { color: var(--gam); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.inq-privacy { border-top: 1px solid var(--line); padding-top: 0.55rem; font-size: 0.75rem; color: var(--ink-2); }
.inq-privacy summary { width: fit-content; color: var(--ink); font-weight: 650; cursor: pointer; text-underline-offset: 3px; }
.inq-privacy ul { padding-left: 1.2rem; margin: 0.65rem 0 0; }
.inq-privacy li + li { margin-top: 0.25rem; }
.inq-agree { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.76rem; }
.inq-agree input { flex: none; width: 0.95rem; height: 0.95rem; margin: 0.2rem 0 0; accent-color: var(--gam); }
.inq-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inq-msg { margin: 0; padding: 0.5rem 0.7rem; font-size: 0.76rem; border-radius: 8px; border-left: 3px solid #a83226; background: var(--paper-2); color: var(--ink); }
.inq-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inq-actions .btn, .inq-done .btn { min-height: 34px; padding: 0 1.1rem; font-size: 0.78rem; font-weight: 600; border-radius: 8px; letter-spacing: 0; }
.inq-actions .btn-quiet { border-color: var(--line); }
.inq-actions .btn-quiet:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-2); }
.inq-actions .btn:disabled { cursor: wait; opacity: 0.65; }
.inq-done { display: grid; gap: 0.6rem; justify-items: start; }
.inq-done p { margin: 0; color: var(--ink-2); }
.inquiry-page { max-width: 42rem; padding-block: 1.5rem 4rem; }
.inquiry-page h2 { margin-bottom: 0.4rem; }
.inquiry-page .btn { margin-top: 0.4rem; }
@media (max-width: 560px) {
  .inq-dialog { width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); }
  .inq-fields { grid-template-columns: 1fr; }
  .inq-field:has(#inq-name), .inq-field:has(#inq-message), .inq-hint { grid-column: auto; }
  .inq-field input, .inq-field textarea { font-size: 16px; }
  .inq-field textarea { min-height: 6rem; }
  .inq-actions { display: grid; grid-template-columns: 1fr 1fr; }
}