/* ==========================================================================
   성주대재보존회 - Design Tokens & Base Styles
   ========================================================================== */

:root {
  /* Color */
  --ink: #1C1A18;          /* 묵색 - 메인 텍스트, 헤더 */
  --paper: #F5F1E8;        /* 한지색 - 배경 */
  --paper-deep: #ECE6D8;   /* 한지색 진한 톤 - 섹션 구분 배경 */
  --danchong: #8C2F1E;     /* 단청 적색 - 포인트 */
  --danchong-dim: #8C2F1E1a; /* 단청 적색 투명 */
  --gold: #A8915C;         /* 금동색 - 보조 포인트 */
  --stone: #5C5650;        /* 회갈색 - 본문 보조 텍스트 */
  --line: #D8D0BE;         /* 구분선 */
  --white: #FFFFFF;

  /* Type */
  --font-display: "Noto Serif KR", serif;
  --font-body: "Noto Sans KR", sans-serif;
  /* 히어로 타이틀 전용 (Google Fonts) */
  --font-title: "Gowun Batang", "Noto Serif KR", serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* Layout — 본문 폭을 좁혀 글자 주위에 숨 쉴 공간을 준다 */
  --content-width: 1140px;
  --content-narrow: 680px;

  /* 먹의 농담(濃淡) — 색을 늘리지 않고 먹의 짙고 옅음만으로 위계를 만든다.
     짙은 먹(제목) → 옅은 먹(본문 보조) → 스민 먹(가장 여린 주석) */
  --ink-soft: #6E6862;     /* 옅은 먹 */
  --ink-faint: #A19A92;    /* 스민 먹 */

  /* Motion — 향이 퍼지는 속도. 웹사이트의 속도가 아니라 한 박자 느리게. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 0.9s;
  --dur-base: 0.6s;

  /* ------------------------------------------------------------------
     한지(韓紙) — 색은 그대로 두고, 그 위에 '종이의 물성'만 얹는다.
     실제 한지는 세 가지가 겹쳐 있다.
       1) 닥섬유(楮纖維) 가닥이 길게 흩어진 결
       2) 종이를 뜰 때 두께가 고르지 않아 생긴 얼룩덜룩한 농담(濃淡)
       3) 표면의 아주 미세한 알갱이
     한 겹만으로는 '노이즈'로 보이지만, 겹쳐 놓으면 비로소 '종이'가 된다.
     ------------------------------------------------------------------ */

  /* (1) 닥섬유 — 가로로 길게 늘인 난류로 섬유 가닥의 흐름을 만든다 */
  --hanji-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)' opacity='0.112'/%3E%3C/svg%3E");

  /* (3) 표면의 결 — 곱고 촘촘한 알갱이 */
  --hanji-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.068'/%3E%3C/svg%3E");

  /* (2) 농담 — 종이를 뜰 때 생긴 얼룩. 새 색을 들이지 않고, 이미 쓰는
         금동색/단청색/회갈색을 옅게 번지게 한다. */
  --hanji-mottle:
    radial-gradient(ellipse 62% 44% at 18% 12%, rgba(168, 145, 92, 0.104), transparent 62%),
    radial-gradient(ellipse 54% 40% at 82% 26%, rgba(140, 47, 30, 0.04), transparent 60%),
    radial-gradient(ellipse 70% 50% at 64% 78%, rgba(168, 145, 92, 0.088), transparent 64%),
    radial-gradient(ellipse 48% 38% at 8% 68%, rgba(92, 86, 80, 0.056), transparent 60%),
    radial-gradient(ellipse 58% 42% at 92% 92%, rgba(92, 86, 80, 0.048), transparent 62%);

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(28,26,24,0.06);
  --shadow-md: 0 18px 40px rgba(28,26,24,0.10), 0 4px 10px rgba(28,26,24,0.06);
  --shadow-lg: 0 30px 60px rgba(28,26,24,0.16), 0 8px 20px rgba(28,26,24,0.08);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  line-height: 1.9;   /* 행간을 넓혀 글줄 사이에도 여백을 둔다 */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

/* 텍스트 선택 색상 — 브라우저 기본 파란색 대신 브랜드 톤 */
::selection {
  background: var(--danchong);
  color: var(--paper);
}

/* 스크롤바 — 얇고 차분한 브랜드 톤 (webkit 계열) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid var(--paper);
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
html { scrollbar-color: var(--line) var(--paper); scrollbar-width: thin; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.01em;
}

/* 넓은 화면에서만 적용되는 강제 줄바꿈. 좁은 화면에서는 무시되어
   문장이 화면 폭에 맞게 자연스럽게 흐른다. */
.br-wide { display: none; }
@media (min-width: 761px) {
  .br-wide { display: inline; }
}

/* 한글은 기본적으로 글자 단위로 줄바꿈되어 "점안법 / 회" 처럼 단어가 잘린다.
   keep-all을 주면 띄어쓰기(어절) 단위로만 줄이 넘어가 훨씬 깔끔해진다.
   단, 띄어쓰기 없는 아주 긴 문자열(URL 등)은 화면을 넘칠 수 있으므로
   overflow-wrap으로 그런 예외만 강제로 끊어준다. */
h1, h2, h3, h4, p, li, a, span, figcaption, blockquote {
  word-break: keep-all;
  overflow-wrap: break-word;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--danchong);
  outline-offset: 3px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.wrap-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section {
  padding: var(--space-7) 0;   /* 산사의 마당처럼, 콘텐츠보다 여백이 먼저 반기도록 */
}

.section-deep {
  background-color: var(--paper-deep);
}

/* Signature divider — stylized eave/dancheong motif line */
.motif-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-4) 0;
  height: 28px;
}
.motif-divider svg {
  width: 120px;
  height: 24px;
  color: var(--gold);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--danchong);
  font-weight: 700;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}
.section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-bottom: var(--space-3);
}

.section-lead {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 640px;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: box-shadow 0.4s var(--ease-premium), background-color 0.4s var(--ease-premium);
}
.site-header.is-scrolled {
  /* backdrop-filter(blur)를 쓰지 않는다.
     고정 헤더 뒤로 재생 중인 영상이 지나갈 때, 브라우저가 뒤쪽 픽셀을 매 프레임
     다시 흐리게 계산해야 해서 스크롤이 끊긴다. 한지색 배경을 거의 불투명하게
     깔면 blur 없이도 보이는 결과는 사실상 같으면서, 비용은 0에 가깝다. */
  background: rgba(245, 241, 232, 0.97);
  box-shadow: var(--shadow-sm);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  color: inherit;
}
.brand .brand-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* 로고 이미지 배경(아이보리)이 투명 헤더일 때 살짝 떠 보이지 않도록 다듬어줌 */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18));
}

.main-nav {
  display: flex;
  gap: var(--space-4);
}
.main-nav > li {
  position: relative;
}
.main-nav > li > a {
  font-size: 0.94rem;
  font-weight: 500;
  padding: 1.15rem 0;
  display: block;
  position: relative;
  color: inherit;
}
.main-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.95rem;
  width: 0%;
  height: 2px;
  background: var(--danchong);
  transition: width 0.25s ease;
}
.main-nav > li > a:hover::after,
.main-nav > li.is-active > a::after {
  width: 100%;
}

.sub-nav {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0;
  list-style: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-5);
}
.sub-nav > li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-nav > li:hover .sub-nav,
.main-nav > li:focus-within .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-nav li a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
}
.sub-nav li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--danchong);
  transition: width 0.2s ease;
}
.sub-nav li a:hover {
  color: var(--danchong);
}
.sub-nav li a:hover::after {
  width: 100%;
}

/* 상위 소메뉴(종조·밀인종·소의경전·종단문장)는 조금 더 크고 또렷하게 —
   맨 하위 항목과 크기 차이를 두어 계층이 분명히 드러나게 한다. */
.sub-nav > li > a {
  font-size: 1rem;
  font-weight: 500;
}

/* 하위 항목을 가진 상위 소메뉴(종조·소의경전 등)에는 펼침 표시(▾)를 붙인다.
   클릭하면 아래 3단계 항목이 펼쳐진다. */
.sub-nav-group > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
/* 펼침 화살표 — 깔끔한 SVG 꺾쇠(∨). 클릭해 펼치면 위(∧)로 뒤집힌다. */
.sub-caret {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  flex-shrink: 0;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A8915C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 4.5 L6 7.75 L9.25 4.5'/%3E%3C/svg%3E");
  transition: transform 0.25s var(--ease-premium);
}
.sub-nav-group.is-open .sub-caret {
  transform: rotate(180deg);
}
/* 펼쳐진(활성) 상위 항목은 단청색으로 표시해 지금 열려 있음을 나타낸다. */
.sub-nav-group.is-open > a {
  color: var(--danchong);
}

/* ---- 소메뉴 안의 3단계(맨 하위) 항목(예: 종조 > 사명당유정) ----
   기본은 접혀 있고(display:none), 상위 항목을 클릭하면 펼쳐진다.
   펼쳐졌을 때는 상위 항목보다 작은 글씨와 위쪽 구분선으로 하위임을 나타낸다. */
.sub-nav-children {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0.35rem 0 0;
  display: none;               /* 기본 접힘 */
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  border-top: 1px solid var(--line);
}
.sub-nav-group.is-open .sub-nav-children {
  display: flex;               /* 클릭 시 펼침 */
}
.sub-nav-children li a {
  padding: 0.22rem 0;
  font-size: 0.8rem;
  color: var(--ink);
}
.sub-nav-children li a:hover {
  color: var(--danchong);
}

/* 4단계 하위그룹(예: 성주대재보존회 > 관련단체 > 일불회) —
   '관련단체'는 링크가 아닌 작은 소제목으로 두고, 그 아래에 일불회를 얹는다. */
.sub-nav-subgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--line);
}
.sub-nav-sublabel {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.sub-nav-subchildren {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  z-index: 0;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
  background: var(--ink);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  overflow: hidden;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  filter: grayscale(8%) contrast(108%) brightness(88%);
  transform: scale(1.04);
  transition: transform 9s ease-out;
}
/* 활성화된 슬라이드는 천천히 확대되는 켄 번즈 효과 (한 슬라이드가 떠 있는 5초 동안 은은하게) */
.hero-slide.is-active img {
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide img { transition: none; transform: scale(1); }
}

/* 광선/잔향 같은 은은한 빛 번짐 - 시그니처 요소를 너무 강하게 가져오지 않고 묵색 톤에 맞게 약화 */
.hero-light-leak {
  position: absolute;
  top: -15%;
  left: -10%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(168, 145, 92, 0.10) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* 향연(향 연기)처럼 아주 은은하게 떠다니는 입자 효과 - 캔버스, opacity 매우 낮춤 */
.hero-ambient-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  /* <canvas>는 기본 display가 inline이라 position:absolute + inset:0만으로는
     실제 화면 크기로 늘어나지 않고 브라우저 기본 내재 크기(300x150)로 남는 경우가
     있다. display:block + width/height 100%를 명시해 항상 부모(.hero-media) 전체
     크기를 채우도록 한다. (캔버스 픽셀 해상도는 JS에서 별도로 맞춤) */
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 38%, transparent 0%, rgba(28,26,24,0.12) 55%, rgba(28,26,24,0.55) 100%),
    linear-gradient(180deg, rgba(28,26,24,0.22) 0%, rgba(28,26,24,0.08) 30%, rgba(28,26,24,0.78) 100%);
}
.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: center;
}
.hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  color: var(--gold);
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.08rem, 5.6vw, 4.32rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--white);
  text-shadow:
    0 2px 16px rgba(0,0,0,0.65),
    0 12px 70px rgba(0,0,0,0.85),
    0 0 90px rgba(168, 145, 92, 0.18);
}
.hero-desc {
  margin: var(--space-3) auto 0;
  max-width: 620px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hero-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* 히어로는 배경 자체가 묵색(--ink)이라, 기본 btn-primary(잉크색 배경)는 묻혀 보이므로
   금동색 계열로 대비를 살려 히어로 안에서만 다르게 보이도록 함 */
.hero-actions .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.hero-actions .btn-primary:hover {
  background: var(--danchong);
  border-color: var(--danchong);
  color: var(--paper);
}
.hero-actions .btn-ghost {
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.hero-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
}

/* 우측 세로 문구 */
.hero-vertical-text {
  position: absolute;
  z-index: 4;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.7em;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 860px) {
  .hero-vertical-text { display: none; }
}

/* 히어로 사진 선택 점(닷) 인디케이터 */
.hero-dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-dot:hover {
  background: rgba(255, 255, 255, 0.75);
}
.hero-dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}

.hero-scroll {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.75);
}
.hero-scroll .line {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0; right: 0;
  height: 50%;
  background: var(--white);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll .line::after { animation: none; top: 0; }
}

/* 히어로 바로 다음에 오는 모든 콘텐츠(소개/말씀/갤러리/푸터)를 감싸는 래퍼.
/* 히어로 바로 다음에 오는 모든 콘텐츠(소개/말씀/갤러리/푸터)를 감싸는 래퍼.
   둥근 모서리와 그림자로, 사진 위로 콘텐츠가 올라오는 듯한 느낌을 살린다.
   일반 자유 스크롤이며 별도의 스크롤 동작 제어는 하지 않는다.
   음수 마진으로 히어로 하단과 약간 겹치게 해, 보통의 마우스 휠 한 번(약 100~150px)
   정도만 스크롤해도 콘텐츠 상단이 화면에 바로 들어와 "스크롤하면 곧장 내용이
   보인다"는 느낌을 살린다. */
.page-body-overlay {
  position: relative;
  z-index: 1;
  background-color: var(--paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 28px rgba(28, 26, 24, 0.14);
  overflow: hidden; /* 내부 섹션의 배경색이 둥근 모서리 밖으로 새지 않도록 */
}
@media (max-width: 760px) {
  .page-body-overlay { border-radius: 18px 18px 0 0; }
}

/* ==========================================================================
   Cards / Grid
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* 선(線)의 절제 — 카드를 감싸던 네모 상자와 흰 배경을 걷어낸다.
   한국 전통 건축의 기둥과 보처럼, 위쪽 가로선 하나만으로 공간을 나눈다.
   상자가 사라진 자리는 여백이 대신 채운다. */
.info-card {
  position: relative;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: var(--space-3) 0 0;
}
/* 마우스를 올리면 그 가로선만 조용히 금동색으로 물든다 */
.info-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-premium);
}
.info-card:hover::before {
  transform: scaleX(1);
}
.info-card .num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.info-card h3 {
  font-size: 1.2rem;
  margin: 0 0 var(--space-1);
}
.info-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid currentColor;
  transition: background 0.3s var(--ease-premium), color 0.3s var(--ease-premium),
              transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium),
              border-color 0.3s var(--ease-premium);
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--danchong);
  border-color: var(--danchong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  transition-duration: 0.1s;
}
.btn-ghost {
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.9);
}
.btn-ghost:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: rgba(245,241,232,0.78);
  padding: var(--space-6) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(245,241,232,0.14);
}
.footer-brand {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.2rem;
  margin-bottom: var(--space-2);
}
.footer-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  max-width: 420px;
  color: rgba(245,241,232,0.6);
}
.footer-col h4 {
  color: var(--paper);
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.footer-col li {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: rgba(245,241,232,0.45);
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ==========================================================================
   Page header (sub pages)
   ========================================================================== */

.page-header {
  position: relative;
  padding: 150px 0 var(--space-5);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 20%, rgba(168,145,92,0.18), transparent 55%);
}
.page-header .wrap { position: relative; z-index: 1; }
.breadcrumb {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
}
.breadcrumb a:hover { color: var(--gold); }
.page-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--white);
  position: relative;
  padding-bottom: var(--space-3);
}
.page-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--gold);
}
.page-tabs {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--space-3);
  flex-wrap: wrap;
}
.page-tabs a {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
}
.page-tabs a:hover,
.page-tabs a.is-active {
  color: var(--white);
  border-color: var(--gold);
}

/* ==========================================================================
   Content (prose) page styles
   ========================================================================== */

.content-section {
  padding: var(--space-7) 0;
}
.prose h2 {
  font-size: 1.5rem;
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-2);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  margin-bottom: var(--space-3);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.9;
}
.prose p.lead {
  font-size: 1.1rem;
  color: var(--stone);
}

.figure-cite {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--white);
  border-left: 3px solid var(--danchong);
}
.figure-cite img {
  width: 220px;
  flex-shrink: 0;
}
.figure-cite .cap {
  font-size: 0.95rem;
  color: var(--stone);
}

.quote-block {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-5) 0;
  margin: var(--space-5) 0;
}
.quote-block::before {
  content: "\201C";
  position: absolute;
  top: var(--space-4);
  left: -0.15em;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.quote-block p {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 2.1;
  color: var(--ink);
  white-space: pre-line;
}

/* 게송/법문 4행 (메인 큰스님 말씀 미리보기).
   각 행이 한 줄에 온전히 들어가는 것이 핵심이므로, 좁은 화면에서는
   글자 크기를 줄여 행이 접히지 않도록 한다. */
.verse {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 2;
  color: var(--ink);
}

/* Profile block (총무원장 소개) */
.profile-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.profile-photo {
  aspect-ratio: 3/4;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-size: 0.85rem;
}
.profile-list li {
  display: flex;
  gap: var(--space-3);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.profile-list li:first-child { padding-top: 0; }
.profile-list .yr {
  color: var(--gold);
  font-weight: 600;
  flex-shrink: 0;
  width: 70px;
}

/* Org chart */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}
.org-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.org-node {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.9rem 1.6rem;
  font-size: 0.92rem;
  text-align: center;
  font-weight: 600;
}
.org-node.is-root {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.org-connector {
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* ==========================================================================
   Video board (성주대재보존회 행사)
   ========================================================================== */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
/* 영상 카드도 같은 원칙 — 상자를 걷어내고 사진만 남긴다.
   떠오르는 대신 사진이 조용히 확대되며 반응한다. */
.video-card {
  background: transparent;
  border: 0;
  cursor: pointer;
}
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-premium);
}
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-thumb .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb .play svg {
  width: 52px; height: 52px;
  color: var(--white);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}
.video-card:hover .play svg { transform: scale(1.1); }
.video-body {
  padding: var(--space-3);
}
.video-body .v-date {
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.video-body h3 {
  font-size: 1.02rem;
  margin-top: 0.4rem;
  font-weight: 500;
  line-height: 1.5;
}

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,18,16,0.92);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.video-modal.is-open { display: flex; }
.video-modal-inner {
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
}
.video-modal-inner iframe {
  width: 100%; height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute;
  top: -44px; right: 0;
  color: var(--white);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   "준비중입니다" 팝업 모달
   ========================================================================== */

.soon-modal {
  position: fixed;
  inset: 0;
  background: rgba(20,18,16,0.55);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-premium), visibility 0.3s var(--ease-premium);
}
.soon-modal.is-open {
  opacity: 1;
  visibility: visible;
}
/* "준비 중입니다" 팝업 — 기존 대비 약 절반 크기로 축소 */
.soon-modal-inner {
  width: 100%;
  max-width: 200px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem 0.9rem 0.9rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.35s var(--ease-premium);
}
.soon-modal.is-open .soon-modal-inner {
  transform: scale(1) translateY(0);
}
.soon-modal-msg {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.soon-modal-close {
  min-width: 58px;
  padding: 0.38rem 0.8rem;
  font-size: 0.58rem;
  border-radius: 999px;
  justify-content: center;
}

/* ==========================================================================
   Map section (신고달사)
   ========================================================================== */

.map-frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  filter: grayscale(0.15) contrast(1.02);
}
.map-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.map-info .addr-label {
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  font-weight: 700;
}
.map-info .addr {
  font-size: 1.05rem;
  margin-top: 0.3rem;
}

/* Temple gallery strip */
.gallery-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: repeat(2, 220px);
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.gallery-strip .g-item {
  overflow: hidden;
  background: var(--paper-deep);
}
.gallery-strip .g-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-premium);
}
.gallery-strip .g-item:hover img { transform: scale(1.05); }
.gallery-strip .g-item:first-child {
  grid-row: span 2;
}

/* ==========================================================================
   News list (큰스님말씀 등)
   ========================================================================== */

.news-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  gap: var(--space-3);
}
.news-list li:first-child { border-top: 1px solid var(--line); }
.news-list a {
  font-size: 1rem;
  flex: 1;
}
.news-list a:hover { color: var(--danchong); }
.news-list .n-date {
  font-size: 0.85rem;
  color: var(--stone);
  flex-shrink: 0;
}
.news-list .pogyo-state-msg {
  justify-content: flex-start;
  color: var(--stone);
  font-style: italic;
}
.pogyo-state-msg {
  color: var(--stone);
  font-style: italic;
  padding: var(--space-3) 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer-brand-block { grid-column: 1 / -1; }
  .gallery-strip { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); }
  .gallery-strip .g-item:first-child { grid-row: span 1; grid-column: span 2; }
}

@media (max-width: 760px) {
  .wrap, .wrap-narrow { padding: 0 var(--space-3); }

  .main-nav { display: none; }
  .nav-toggle { display: block; }

  /* ---- 모바일 헤더 배치 ----
     메뉴 버튼을 왼쪽으로, 로고를 가운데로 보낸다.
     (HTML 순서는 그대로 두고 flex order로만 위치를 바꾼다) */
  .site-header .wrap {
    position: relative;
    justify-content: center;
  }
  .nav-toggle {
    order: -1;
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
  }
  .brand { margin: 0 auto; }

  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-scroll { display: none; }
  .hero-dots { bottom: var(--space-3); }

  /* 히어로 버튼은 하나이므로 가운데 정렬하되, 좁은 화면에서 과하게 커 보이지 않도록 조정 */
  .hero-actions {
    justify-content: center;
    width: 100%;
    padding: 0 var(--space-3);
  }
  .hero-actions .btn {
    padding: 0.75rem 1.4rem;
    font-size: 0.86rem;
    white-space: nowrap;
    justify-content: center;
  }

  .card-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  .profile-block { grid-template-columns: 1fr; }
  .profile-photo { max-width: 220px; }

  .gallery-strip { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 140px); }

  .figure-cite { flex-direction: column; }
  .figure-cite img { width: 100%; }

  .map-info { flex-direction: column; }

  .page-header { padding: 112px 0 var(--space-4); }
  .page-tabs { gap: var(--space-3); overflow-x: auto; }

  /* ---- 모바일 타이포 정리 ----
     좁은 화면에서 글자가 너무 커서 문장이 두세 줄로 뚝뚝 끊겨 보이던 문제 보정 */

  /* 히어로 한 줄 문구: 강제 줄바꿈(.br-wide)이 해제되므로 화면 폭에 맞게 자연스럽게 흐른다 */
  .hero-desc {
    font-size: 0.95rem;
    line-height: 1.9;
    padding: 0 var(--space-2);
  }

  /* 큰스님 말씀 등 인용구: 글자를 줄여 원문 줄바꿈이 그대로 한 줄에 들어가도록 */
  .quote-block p {
    font-size: 1rem;
    line-height: 1.95;
  }
  .verse {
    font-size: 0.92rem;
    line-height: 2.05;
  }
  .quote-block::before {
    font-size: 3rem;
    top: var(--space-3);
  }

  /* 섹션 위아래 여백이 모바일에선 과하게 넓어 빈 화면처럼 보이던 문제 */
  .section { padding: var(--space-5) 0; }
  .content-section { padding: var(--space-5) 0; }
}

/* ==========================================================================
   Scroll reveal — 스크롤에 따라 콘텐츠가 은은하게 떠오르는 연출
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.3s var(--ease-premium), transform 1.3s var(--ease-premium);
}
/* will-change는 '앞으로 움직일 요소'에만 준다.
   아직 나타나지 않은 요소에만 걸고, 한 번 나타난 뒤에는 거둬들인다.
   (그러지 않으면 수십 개 요소가 영원히 GPU 레이어를 붙들고 있어
    스크롤할 때마다 합성 비용이 쌓인다) */
.reveal:not(.is-visible) {
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Feature film section (메인 페이지 영상 — 뷰포트 진입 시 자동 재생)
   ========================================================================== */

.section-film {
  background: var(--paper-deep);
}

.film-frame {
  position: relative;
  margin: var(--space-5) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* 영상을 독립된 합성 레이어로 떼어낸다. 영상 프레임이 바뀔 때마다 주변 요소까지
     함께 다시 그리지 않고, 이 상자 안에서만 갱신되도록 가둔다. */
  contain: paint;
  transform: translateZ(0);
}
.film-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 소리 켜기 / 끄기 토글 버튼 — 영상 우측 하단에 조용히 얹힘 */
.film-sound-btn {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  /* 재생 중인 영상 바로 위에 얹히는 버튼이므로 backdrop-filter(blur)를 쓰지 않는다.
     매 프레임 바뀌는 영상 픽셀을 계속 다시 흐리게 계산하게 되어 스크롤이 끊긴다.
     반투명 먹색만으로도 글자 가독성은 충분하다. */
  background: rgba(28, 26, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: background 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium),
              transform 0.3s var(--ease-premium);
}
.film-sound-btn:hover {
  background: rgba(28, 26, 24, 0.78);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}
.film-sound-btn:active { transform: translateY(0); transition-duration: 0.1s; }

/* 음소거 상태: 음소거 아이콘만 / 소리 켜짐 상태: 스피커 아이콘만 */
.film-sound-btn .ico-unmuted { display: none; }
.film-sound-btn[aria-pressed="true"] .ico-muted { display: none; }
.film-sound-btn[aria-pressed="true"] .ico-unmuted { display: inline-block; }

@media (max-width: 760px) {
  .film-sound-btn {
    right: var(--space-2);
    bottom: var(--space-2);
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   모바일 메뉴 드로어 (왼쪽에서 슬라이드)
   --------------------------------------------------------------------------
   왼쪽 세로 열에 대메뉴, 오른쪽 넓은 열에 선택된 대메뉴의 소메뉴가 나타나는
   2단 구조. 대메뉴를 탭하면 오른쪽 소메뉴가 즉시 바뀐다.
   이 요소들은 JS(common.js)가 기존 데스크톱 메뉴를 읽어 자동으로 생성한다.
   ========================================================================== */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(20, 18, 16, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-premium), visibility 0.35s var(--ease-premium);
}
.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  z-index: 1600;
  width: min(88vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-premium);
  visibility: hidden;
}
.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* ---- 상단 인사말 영역 ---- */
.drawer-head {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-3) 56px var(--space-3) var(--space-3);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.drawer-greeting {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.drawer-sub {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--stone);
}
.drawer-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

/* ---- 2단 메뉴 본문 ---- */
.drawer-body {
  flex: 1;
  display: grid;
  grid-template-columns: 106px 1fr;
  min-height: 0;   /* 자식이 넘칠 때 스크롤이 생기도록 */
}

/* 왼쪽: 대메뉴 */
.drawer-main {
  background: var(--paper-deep);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer-main button {
  display: block;
  width: 100%;
  padding: 1.15rem 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--stone);
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.25s var(--ease-premium), color 0.25s var(--ease-premium);
}
.drawer-main button.is-active {
  background: var(--gold);
  color: var(--white);
}

/* 오른쪽: 소메뉴 */
.drawer-sub-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0;
}
.drawer-sub-panel ul { display: none; }
.drawer-sub-panel ul.is-active { display: block; }

.drawer-sub-panel a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 1.1rem var(--space-3);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s var(--ease-premium), background 0.25s var(--ease-premium);
}
.drawer-sub-panel a:hover,
.drawer-sub-panel a:active {
  color: var(--danchong);
  background: var(--paper);
}
/* 모바일 메뉴 항목 앞에 "-" 표식을 붙인다. */
.drawer-sub-panel a::before {
  content: "-";
  margin-right: 0.5rem;
  flex-shrink: 0;
}
/* 링크 항목(하위하위 메뉴가 없는 항목)에는 화살표(>)를 붙이지 않는다.
   펼칠 것이 있는 상위 항목만 별도의 펼침 표시(∨)를 갖는다. */

/* 3단계 항목(예: 종조 > 사명당유정) — 표식 없이, 들여쓰기(위치)로 하위임을
   나타내되, 글자를 조금 작고 살짝 연하게 하여 상위 항목과 은은히 구분한다.
   상위 항목보다 조금 더 오른쪽에 놓는다. */
.drawer-sub-panel li.drawer-child-item a {
  padding-left: calc(var(--space-3) + 2.3rem);
  font-size: 0.93rem;
  color: var(--ink-soft);
}

/* 4단계 하위그룹(예: 성주대재보존회 > 관련단체 > 일불회) ----
   '관련단체'는 작은 소제목으로 두고, 그 아래 일불회는 한 단 더 들여쓴다. */
.drawer-sub-panel li.drawer-subgroup-label {
  padding: 0.75rem var(--space-3) 0.3rem calc(var(--space-3) + 2.3rem);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.drawer-sub-panel li.drawer-subgroup-item a {
  padding-left: calc(var(--space-3) + 3.4rem);
}

/* ---- 모바일 접이식 그룹 ----
   하위(3단계) 항목을 가진 상위 항목은 '펼침 버튼'으로 만든다. 기본은 접혀 있고,
   버튼을 누르면 아래 3단계 항목이 펼쳐진다. 화살표(>) 대신 아래꺾쇠(▾)를 붙여
   '누르면 펼쳐지는 항목'임을 나타내고, 펼치면 위로 뒤집힌다. */
.drawer-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 1.1rem var(--space-3);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.25s var(--ease-premium), background 0.25s var(--ease-premium);
}
.drawer-group-toggle:hover,
.drawer-group-toggle:active {
  color: var(--danchong);
  background: var(--paper);
}
/* 펼침 그룹(총무원·종조 등)의 이름 앞에도 "-" 표식을 붙인다. */
.drawer-group-label::before {
  content: "-";
  margin-right: 0.5rem;
}
.drawer-group-caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease-premium);
}
.drawer-group.is-open .drawer-group-caret {
  transform: translateY(1px) rotate(225deg);
}
.drawer-grandchildren {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;              /* 기본 접힘 */
}
.drawer-group.is-open .drawer-grandchildren {
  display: block;             /* 버튼을 누르면 펼침 */
}

/* ==========================================================================
   일원상(一圓相) — 선가에서 깨달음을 나타내는 원.
   --------------------------------------------------------------------------
   아이콘으로 붙이지 않는다. 배경 저 멀리, 붓으로 한 번 그은 듯한 옅은 원이
   여백의 일부로 떠 있게 한다. 있는 줄도 모르고 지나치는 것이 맞다.
   ========================================================================== */

.section-deep {
  position: relative;
  overflow: hidden;
}
.section-deep::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* 붓이 한 바퀴 돌며 힘이 빠지는 느낌: 획의 굵기와 농도가 고르지 않게 */
  border: 1.5px solid var(--gold);
  opacity: 0.16;
  -webkit-mask-image: conic-gradient(from 200deg,
    transparent 0deg,
    #000 18deg,
    #000 300deg,
    transparent 342deg);
  mask-image: conic-gradient(from 200deg,
    transparent 0deg,
    #000 18deg,
    #000 300deg,
    transparent 342deg);
  pointer-events: none;
  z-index: 0;
}
/* 원 위로 글이 얹히도록 */
.section-deep > .wrap,
.section-deep > .wrap-narrow {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .section-deep::before { width: 74vw; opacity: 0.13; }
}

/* ==========================================================================
   영상 로딩 표시 — 버퍼가 찰 때까지 잠깐 보였다가 조용히 사라진다.
   포스터 이미지만 멈춰 있으면 '고장난 것'처럼 보이기 때문에,
   "지금 불러오는 중"임을 알려 주는 최소한의 신호만 둔다.
   ========================================================================== */

.film-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 26, 24, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-premium), visibility 0.5s var(--ease-premium);
  pointer-events: none;
}
.film-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 향이 한 바퀴 도는 듯한 가는 원. 요란한 스피너 대신 조용한 선 하나. */
.film-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--gold);
  animation: film-spin 1.1s linear infinite;
}
@keyframes film-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .film-spinner { animation-duration: 3s; }
}

/* ==========================================================================
   한지 — 콘텐츠(종이) 영역만 덮는 '종이 한 장'
   --------------------------------------------------------------------------
   [문제] 예전에는 body, 각 섹션, 콘텐츠 래퍼에 한지 무늬를 '각각' 그렸다.
          요소마다 배경의 원점이 따로라서, 섹션이 바뀌는 경계에서 무늬가
          처음부터 다시 시작됐다. 종이를 여러 조각으로 나눠 붙인 꼴이라
          이음매가 타일처럼 눈에 띄었다. 이후 화면 전체를 덮는 fixed 한 장으로
          바꿨더니 이음매는 사라졌지만, 이번엔 사진·영상 위에까지 무늬가 덮여
          매체가 탁하게 보였다.

   [해법] 무늬를 '한지(종이) 배경이 실제로 깔리는 영역'인 .page-body-overlay
          안에만 한 장으로 띄운다. 이렇게 하면
          - 히어로(사진)와 헤더에는 무늬가 닿지 않아 사진이 깨끗하게 보인다.
          - 본문 콘텐츠(글·카드·푸터) 위에는 종이 질감이 그대로 얹힌다.
          - 그리고 본문 안의 사진·영상만 무늬층 위로 끌어올려(z-index) 매체는
            탁해지지 않고 선명하게 유지한다.

          - position: absolute + inset:0 → 오버레이 전체 높이를 한 장으로 덮는다.
          - 얼룩(농담)은 no-repeat + cover → 아예 반복하지 않는다.
          - pointer-events: none → 클릭을 가로막지 않는다.
   ========================================================================== */

.page-body-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;            /* 본문 글·카드 위에는 얹히고, 사진·영상(z:4) 아래에 둔다 */
  pointer-events: none;

  background-image:
    var(--hanji-fiber),
    var(--hanji-grain),
    var(--hanji-mottle);

  /* 섬유와 결은 촘촘히 반복시키고, 큰 얼룩은 한 번만 펼친다 */
  background-size:
    420px 420px,
    180px 180px,
    cover, cover, cover, cover, cover;
  background-repeat:
    repeat,
    repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* 본문 속 사진·영상은 한지 무늬층(z:3) 위로 끌어올려 선명하게 유지한다.
   (.page-body-overlay가 stacking context라 이 z-index는 그 안에서만 겨룬다) */
.section-film .film-frame,
.gallery-strip .g-item {
  position: relative;
  z-index: 4;
}