@charset "utf-8";
/* ===========================================================
   2026 공주 국가유산 야행 — 메인 페이지 전용
   · 모든 규칙은 #Main.y26 으로 스코프. 헤더/푸터(main.css)와 충돌 없음
   · 단위는 px/clamp/vw 만 사용 (html font-size:62.5% 영향 배제)
   =========================================================== */

#Main.y26 {
  --paper: #EFE5CC;
  --paper-deep: #E6D8B8;
  --ink: #3B2F22;
  --ink-soft: #6E5D45;
  --rule: #CBB88E;
  --brick: #A8593E;
  --gold: #E3A94F;
  --hero-gold: #D9A648;
  --night: #14121F;
  --cream: #EDE3CB;
  --cream-dim: #B7AA8E;

  display: block;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", "SUIT", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  /* ⚠ overflow-x: clip / hidden 금지.
     WebKit(iOS) 은 조상에 overflow 클리핑이 걸리면 하위 position:sticky 가 죽는다.
     히어로(.y26-stage)와 8夜(.n8-visual) 가 sticky 라 전체 연출이 멈춘다.
     가로 넘침은 각 섹션에서 개별로 막는다. */
  /* 한글이 단어 중간에서 잘리지 않도록 (좁은 폭에서 '소 / 개' 처럼 깨지던 문제) */
  word-break: keep-all;
  overflow-wrap: break-word;
}
#Main.y26 .serif { font-family: "Noto Serif KR", serif; }
#Main.y26 img { max-width: 100%; }

/* main-reset.css 가 모든 article/div/span 에 -webkit-backface-visibility:hidden 을
   걸어 두어, WebKit(iOS) 에서 요소마다 합성 레이어가 생기고 position:sticky 가
   불안정해진다. 메인 페이지 범위에서만 해제한다. */
#Main.y26,
#Main.y26 article,
#Main.y26 div,
#Main.y26 span {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* ══════════ 히어로 : 아치 너머의 밤 ══════════ */
/* svh : iOS 에서 주소창이 접혔다 펴질 때 100vh 가 바뀌어 레이아웃이 튀는 것을 막는다
   (svh 는 주소창이 보이는 '작은 뷰포트' 기준이라 스크롤 중에도 값이 고정) */
#Main.y26 .y26-pin { height: 340vh; height: 340svh; position: relative; }
#Main.y26 .y26-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #1C2036 0%, #12101C 58%, #0C0A14 100%);
}
#Main.y26 .y26-lights {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#Main.y26 .y26-archclip { position: absolute; inset: 0; pointer-events: none; }
#Main.y26 .y26-scene { position: absolute; inset: 0; overflow: hidden; }
#Main.y26 .y26-scene img {
  position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; object-position: center 58%;
  filter: brightness(0.62) saturate(0.85) sepia(0.18) hue-rotate(-12deg) contrast(1.04);
}
#Main.y26 .y26-scene::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(18,16,28,.55), rgba(18,16,28,.08) 40%, rgba(18,16,28,.5));
}
#Main.y26 .y26-archframe {
  position: absolute; pointer-events: none; border: 1.5px solid var(--hero-gold); opacity: .9;
  border-radius: 46% 46% 0 0 / 34% 34% 0 0;
}
#Main.y26 .y26-archframe::before {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(217,166,72,.4);
  border-radius: 46% 46% 0 0 / 34% 34% 0 0;
}

#Main.y26 .y26-invite {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; text-align: center;
  padding: 0 20px 8vh; pointer-events: none; color: var(--cream);
}
#Main.y26 .y26-invite .eyebrow {
  font-size: 11px; letter-spacing: .55em; text-indent: .55em; color: var(--hero-gold);
}
#Main.y26 .y26-invite h2 {
  margin-top: 18px; font-family: "Noto Serif KR", serif; font-weight: 900;
  font-size: clamp(28px, 5vw, 54px); line-height: 1.42; letter-spacing: .02em;
  text-shadow: 0 2px 30px rgba(0,0,0,.6); color: var(--cream);
}
#Main.y26 .y26-invite h2 em { font-style: normal; color: var(--hero-gold); }
#Main.y26 .y26-invite .date {
  margin-top: 20px; font-family: "Noto Serif KR", serif; font-weight: 600;
  font-size: clamp(13px, 1.7vw, 17px); letter-spacing: .22em; color: var(--cream-dim);
}
#Main.y26 .y26-invite .hint {
  margin-top: 4.5vh; font-size: 11px; letter-spacing: .34em; color: var(--cream-dim);
  animation: y26bob 2.2s ease-in-out infinite;
}
@keyframes y26bob {
  0%, 100% { transform: translateY(0); opacity: .6 }
  50% { transform: translateY(7px); opacity: 1 }
}

/* 초대장 카드 — 포스터 원본 오브제 사용 */
#Main.y26 .y26-stamp {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; padding: 0 20px;
}
/* 족자(두루마리) 봉 — 종이는 이 봉 뒤에서 아래로 풀려 나온다 */
#Main.y26 .y26-stamp .scroll { position: relative; }
#Main.y26 .y26-stamp .rod {
  position: absolute; z-index: 4; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  top: -13px; width: calc(100% + 44px); height: 17px; border-radius: 9px;
  background: linear-gradient(180deg,
    #6B4626 0%, #90663A 16%, #C9A063 38%, #A87C45 60%, #6E4A28 82%, #3F2A16 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 236, 190, .38);
}
#Main.y26 .y26-stamp .box {
  position: relative; width: min(600px, 88vw);
  padding: 0;
  /* 종이 텍스처는 높이가 고정된 .sheet 에 둔다.
     .box(클리핑 박스)에 두면 높이가 늘어날 때 cover 가 다시 계산돼 배경이 확대된다. */
  background: #EFE3C7;
  border: 1.5px solid var(--hero-gold);
  outline: 1px solid rgba(217,166,72,.35); outline-offset: 7px;
  box-shadow: 0 34px 90px rgba(0,0,0,.62);
  /* 슬롯에서 뽑혀 나오는 연출 : 높이를 JS 가 제어한다.
     height 는 합성 가능한 속성이 아니라 will-change 가 도움이 안 되고
     불필요한 레이어만 만든다. contain 으로 리플로우 범위만 제한한다. */
  overflow: hidden;
  contain: layout paint;
}
/* 슬롯 입구 그림자 — 다 열리면 사라진다 (--y26-slot : 1 → 0) */
#Main.y26 .y26-stamp .box::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 3;
  pointer-events: none; opacity: var(--y26-slot, 0);
  background: linear-gradient(180deg, rgba(52, 40, 24, .38), rgba(52, 40, 24, 0));
}
#Main.y26 .y26-stamp .sheet {
  padding: clamp(36px, 5.2vw, 60px) clamp(24px, 4.2vw, 48px) clamp(34px, 4.8vw, 54px);
  background: #EFE3C7 url(/images/2026/texture/paper.jpg) center / cover;
}
#Main.y26 .y26-stamp .box img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
/* 제목 → 일시/장소 */
#Main.y26 .y26-stamp .box img.t-title { width: 94%; margin: 0 auto; }
#Main.y26 .y26-stamp .box img.t-info { width: 86%; margin: clamp(24px, 3.4vw, 38px) auto 0; }

/* 태블릿·모바일에서 카드가 세로로 길어지지 않도록 폭/여백을 함께 줄인다 */
@media (max-width: 1024px) {
  #Main.y26 .y26-stamp .box { width: min(520px, 86vw); }
}
@media (max-width: 768px) {
  #Main.y26 .y26-stamp .box { width: min(430px, 88vw); }
  #Main.y26 .y26-stamp .sheet { padding: 32px 20px 30px; }
  #Main.y26 .y26-stamp .rod {
    top: -11px; height: 14px; width: calc(100% + 34px); border-radius: 7px;
  }
  #Main.y26 .y26-stamp .box img.t-title { width: 96%; }
  #Main.y26 .y26-stamp .box img.t-info { width: 92%; margin-top: 22px; }
}

/* ══════════ 공통 섹션 ══════════ */
#Main.y26 .y26-sec {
  padding: clamp(90px, 13vh, 150px) clamp(20px, 6vw, 80px);
  max-width: 1200px; margin: 0 auto;
}
#Main.y26 .y26-sec.center { text-align: center; }
#Main.y26 .y26-eyebrow {
  font-size: 12px; letter-spacing: .42em; text-indent: .42em; color: var(--brick);
}
#Main.y26 .y26-tit {
  font-family: "Noto Serif KR", serif; font-weight: 900;
  font-size: clamp(26px, 4vw, 42px); margin-top: 14px; line-height: 1.3; color: var(--ink);
}
#Main.y26 .y26-desc {
  margin: 20px 0 0; max-width: 600px; line-height: 2;
  color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16px);
}
#Main.y26 .center .y26-desc { margin-left: auto; margin-right: auto; }
#Main.y26 .y26-desc strong { color: var(--brick); font-weight: 700; }

/* 정보 스트립 */
#Main.y26 .y26-strip {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
#Main.y26 .y26-strip .inner {
  max-width: 1340px; margin: 0 auto; padding: 20px clamp(20px, 5vw, 60px);
  display: flex; justify-content: center; flex-wrap: wrap;
  /* 줄바꿈 시 세로 간격까지 넓어지지 않도록 행/열 간격을 분리 */
  row-gap: 8px; column-gap: clamp(18px, 3.2vw, 44px);
  font-family: "Noto Serif KR", serif;
}
/* 줄바꿈된 항목(주최·주관)도 가운데로 — flex item 은 가운데지만 내부 텍스트는
   기본 좌측 정렬이라 2줄이 되는 순간 혼자 어긋나 보인다. */
#Main.y26 .y26-strip .inner > div { line-height: 1.5; text-align: center; }
#Main.y26 .y26-strip b {
  font-weight: 900; color: var(--brick); margin-right: 10px; font-size: 13px; letter-spacing: .2em;
}
#Main.y26 .y26-strip span { font-weight: 600; font-size: clamp(13px, 1.6vw, 16px); }

/* 영상 카드 */
#Main.y26 .y26-video {
  margin: clamp(40px, 7vh, 70px) auto 0; max-width: 860px; position: relative; display: block;
  border: 1px solid #C9B48B; outline: 1px solid #C9B48B; outline-offset: 6px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(59,47,34,.22);
}
#Main.y26 .y26-video img {
  width: 100%; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); filter: sepia(.14);
}
#Main.y26 .y26-video:hover img { transform: scale(1.04); }
#Main.y26 .y26-video .play { position: absolute; inset: 0; display: grid; place-items: center; }
#Main.y26 .y26-video .play span {
  width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); border-radius: 50%;
  background: rgba(235,223,195,.92); display: grid; place-items: center;
  font-size: clamp(20px, 2.6vw, 26px); color: var(--brick);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .4s;
}
#Main.y26 .y26-video:hover .play span { transform: scale(1.1); }
#Main.y26 .y26-video .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px;
  background: linear-gradient(transparent, rgba(30,36,64,.75));
  color: #fff; font-size: 13px; letter-spacing: .08em; text-align: left;
}

/* 마퀴 */
#Main.y26 .y26-marquee {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  overflow: hidden; padding: 20px 0; background: var(--paper);
}
/* 무한 롤링 : 조각 수와 이동 거리를 JS 가 실측해 채운다(--y26-seg / --y26-roll).
   translateX(-50%) 고정이면 화면이 넓을 때 복제본이 모자라 빈칸이 생긴다. */
#Main.y26 .y26-marquee .mtrack {
  display: flex; width: max-content;
  animation: y26roll var(--y26-roll, 26s) linear infinite;
}
#Main.y26 .y26-marquee span {
  font-family: "Noto Serif KR", serif; font-weight: 600; font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: .18em; color: var(--brick); white-space: nowrap; padding-right: 48px;
}
/* ✦ 글리프가 폴백 폰트에서 기준선보다 낮게 앉는다 (실측 4px @22px).
   transform 은 inline 요소에 적용되지 않으므로 inline-block 으로 바꾼 뒤 보정. */
#Main.y26 .y26-marquee span i {
  display: inline-block;
  font-style: normal; color: var(--ink-soft); padding: 0 22px;
  font-size: .7em; line-height: 1; vertical-align: middle;
  transform: translateY(-.21em);
}
@keyframes y26roll { to { transform: translateX(calc(-1 * var(--y26-seg, 50%))) } }

/* ══════════ 8夜 ══════════ */
#Main.y26 .n8-layout {
  display: grid; grid-template-columns: minmax(320px, 46%) 1fr;
  gap: clamp(28px, 5vw, 72px); margin-top: clamp(40px, 7vh, 72px);
}
#Main.y26 .n8-sticky { position: sticky; top: max(120px, calc(50vh - min(31vw, 270px))); }
#Main.y26 .n8-imgbox {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid #C9B48B; outline: 1px solid #C9B48B; outline-offset: 6px;
  box-shadow: 0 26px 60px rgba(59,47,34,.22);
}
#Main.y26 .n8-imgbox img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
}
#Main.y26 .n8-imgbox img.on { opacity: 1; }
#Main.y26 .n8-num {
  position: absolute; left: -10px; top: -26px; font-family: "Noto Serif KR", serif; font-weight: 900;
  font-size: clamp(60px, 7vw, 92px); color: rgba(168,89,62,.16); line-height: 1; z-index: 2;
}
#Main.y26 .n8-cur { margin-top: 20px; font-family: "Noto Serif KR", serif; }
#Main.y26 .n8-cur .no { font-size: 12px; letter-spacing: .4em; color: var(--brick); }
#Main.y26 .n8-cur .nm { font-weight: 900; font-size: clamp(22px, 2.6vw, 30px); margin-top: 4px; }
#Main.y26 .n8-list { list-style: none; border-top: 1px solid var(--rule); margin: 0; padding: 0; }
#Main.y26 .n8-list li {
  display: flex; align-items: baseline; gap: clamp(14px, 2vw, 26px);
  padding: clamp(22px, 3.6vh, 34px) 6px; border-bottom: 1px solid var(--rule);
  transition: background .4s;
}
#Main.y26 .n8-list li > a { display: contents; text-decoration: none; color: inherit; }
#Main.y26 .n8-list .no { font-size: 12px; letter-spacing: .2em; color: var(--ink-soft); width: 30px; flex: none; }
#Main.y26 .n8-list dl { flex: 1; margin: 0; }
#Main.y26 .n8-list dt {
  font-family: "Noto Serif KR", serif; font-weight: 900; font-size: clamp(19px, 2.2vw, 24px);
  transition: color .35s, transform .35s; transform-origin: left;
}
#Main.y26 .n8-list dt small {
  font-weight: 400; font-size: .72em; color: var(--ink-soft); margin-left: 10px; letter-spacing: .06em;
}
#Main.y26 .n8-list dd { margin: 6px 0 0; font-size: clamp(13px, 1.4vw, 14.5px); color: var(--ink-soft); }
#Main.y26 .n8-list li.on { background: rgba(255,255,255,.35); }
#Main.y26 .n8-list li.on dt { color: var(--brick); transform: scale(1.02); }

/* ══════════ 사전예약 ══════════ */
#Main.y26 .y26-reserve { background: var(--night); color: #EDE3CB; position: relative; overflow: hidden; }
#Main.y26 .y26-reserve::before {
  content: ""; position: absolute; inset: 0; opacity: .14;
  background: url(/images/2026/illust/scene.jpg) center 30% / cover; filter: saturate(.6);
}
#Main.y26 .y26-reserve .inner {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: clamp(90px, 13vh, 150px) clamp(20px, 6vw, 80px);
}
#Main.y26 .y26-reserve .y26-eyebrow { color: var(--gold); }
#Main.y26 .y26-reserve .y26-tit { color: #F4EBD8; }
#Main.y26 .y26-reserve .y26-desc { color: #C9BCA0; }
#Main.y26 .rsv-swiper { margin-top: clamp(40px, 7vh, 70px); overflow: visible; }
#Main.y26 .rsv-card {
  background: rgba(244,235,216,.06); border: 1px solid rgba(227,169,79,.35); overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, box-shadow .45s;
  height: 100%; display: flex; flex-direction: column;
}
#Main.y26 .swiper-slide:hover .rsv-card {
  transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
#Main.y26 .rsv-card .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
#Main.y26 .rsv-card .ph img {
  width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) sepia(.18); transition: transform .7s;
}
#Main.y26 .swiper-slide:hover .rsv-card .ph img { transform: scale(1.06); }
#Main.y26 .rsv-card .theme {
  position: absolute; left: 0; top: 0; background: var(--brick); color: #F6EEDC;
  font-family: "Noto Serif KR", serif; font-weight: 900; padding: 8px 14px; font-size: 15px; letter-spacing: .1em;
}
#Main.y26 .rsv-card .rep {
  position: absolute; right: 12px; top: 12px; border: 1px solid var(--gold); color: var(--gold);
  font-size: 10.5px; letter-spacing: .2em; padding: 4px 9px; background: rgba(18,16,28,.5);
}
#Main.y26 .rsv-card .body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
#Main.y26 .rsv-card h3 {
  font-family: "Noto Serif KR", serif; font-weight: 900; font-size: clamp(17px, 1.9vw, 20px); color: #F4EBD8;
}
#Main.y26 .rsv-card .meta { margin-top: 12px; font-size: 12.5px; line-height: 1.85; color: #B9AD93; flex: 1; }
#Main.y26 .rsv-card .meta b { color: var(--gold); font-weight: 600; margin-right: 8px; letter-spacing: .14em; }
#Main.y26 .rsv-card .go {
  margin-top: 16px; align-self: flex-start; font-size: 12.5px; letter-spacing: .2em; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid rgba(227,169,79,.5); padding-bottom: 3px;
}
#Main.y26 .rsv-card .go:hover { color: #fff; border-color: #fff; }
#Main.y26 .rsv-nav {
  margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: "Noto Serif KR", serif; color: var(--cream-dim);
}
#Main.y26 .rsv-nav button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(227,169,79,.45);
  background: transparent; color: var(--gold); cursor: pointer; font-size: 12px; transition: all .3s;
}
#Main.y26 .rsv-nav button:hover { background: var(--gold); color: var(--night); }
#Main.y26 .rsv-frac { font-size: 14px; letter-spacing: .2em; }
#Main.y26 .rsv-frac b { color: var(--gold); font-weight: 900; }

/* ── 사전예약 준비중(지난 회차 예시) 상태 ── */
#Main.y26 .rsv-notice {
  margin-top: 18px; display: inline-block;
  border: 1px solid rgba(227, 169, 79, .45); background: rgba(227, 169, 79, .09);
  padding: 10px 16px; font-size: 13px; line-height: 1.7; color: #D8CBAF; letter-spacing: -.01em;
}
#Main.y26 .rsv-notice b { color: var(--gold); font-weight: 700; }

#Main.y26 .is-pending .rsv-card { border-color: rgba(227, 169, 79, .2); }
#Main.y26 .is-pending .rsv-card .ph img { filter: brightness(.6) saturate(.35) sepia(.3); }
#Main.y26 .is-pending .rsv-card .body { opacity: .6; }
#Main.y26 .is-pending .rsv-card .theme { background: #6E5D45; }
#Main.y26 .is-pending .swiper-slide:hover .rsv-card {
  transform: translateY(-4px); border-color: rgba(227, 169, 79, .5); box-shadow: none;
}
#Main.y26 .is-pending .swiper-slide:hover .rsv-card .ph img { transform: none; }
#Main.y26 .rep.is-wait {
  border-color: rgba(255, 255, 255, .45); color: #EDE3CB; background: rgba(18, 16, 28, .72);
}
#Main.y26 .is-pending .rsv-card .go {
  opacity: 1; font-family: inherit; cursor: pointer;
  border: 0; border-bottom: 1px dashed rgba(227, 169, 79, .55); background: none; padding: 0 0 3px;
}
#Main.y26 .is-pending .rsv-card .body .go { opacity: 1; }

/* ── 준비중 안내 모달 ── */
.y26-modal { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 20px; }
.y26-modal[hidden] { display: none; }
.y26-modal-dim { position: absolute; inset: 0; background: rgba(10, 9, 16, .72); backdrop-filter: blur(3px); }
.y26-modal-box {
  position: relative; width: min(420px, 92vw); text-align: center;
  padding: 40px clamp(24px, 5vw, 40px) 30px;
  background: #EFE3C7 url(/images/2026/texture/paper.jpg) center / cover;
  border: 1.5px solid #D9A648; outline: 1px solid rgba(217, 166, 72, .35); outline-offset: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: "Pretendard Variable", "Pretendard", "SUIT", sans-serif;
  word-break: keep-all;
  animation: y26pop .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes y26pop { from { opacity: 0; transform: translateY(14px) scale(.97) } }
.y26-modal-box .seal {
  position: absolute; right: -11px; top: -11px; width: 48px; height: auto; display: block;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .45));
}
.y26-modal-box h3 {
  font-family: "Noto Serif KR", serif; font-weight: 900;
  font-size: 21px; line-height: 1.45; color: #3B2F22;
}
.y26-modal-box p { margin-top: 16px; font-size: 14px; line-height: 1.85; color: #6E5D45; }
.y26-modal-box p b { color: #A8593E; font-weight: 700; }
.y26-modal-btn {
  margin-top: 26px; min-width: 128px; padding: 12px 26px; cursor: pointer;
  border: 1px solid #A8593E; background: #A8593E; color: #F6EEDC;
  font-family: inherit; font-size: 14px; letter-spacing: .16em;
  transition: background .25s ease, color .25s ease;
}
.y26-modal-btn:hover { background: transparent; color: #A8593E; }
@media (prefers-reduced-motion: reduce) { .y26-modal-box { animation: none } }

/* ══════════ 행사소식 ══════════ */
#Main.y26 .y26-noti { list-style: none; margin: clamp(34px, 5vh, 54px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
#Main.y26 .y26-noti li { border-bottom: 1px solid var(--rule); }
#Main.y26 .y26-noti a {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
  padding: clamp(20px, 3vh, 28px) 6px; text-decoration: none; color: inherit; transition: background .35s;
}
#Main.y26 .y26-noti a:hover { background: rgba(255,255,255,.4); }
#Main.y26 .y26-noti .cat {
  flex: none; font-size: 11px; letter-spacing: .2em; color: var(--brick);
  border: 1px solid var(--brick); padding: 4px 10px;
}
#Main.y26 .y26-noti .tit {
  flex: 1; font-family: "Noto Serif KR", serif; font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#Main.y26 .y26-noti .date { flex: none; font-size: 12.5px; color: var(--ink-soft); letter-spacing: .06em; }
#Main.y26 .y26-more {
  display: inline-block; margin-top: clamp(30px, 4.5vh, 46px); font-size: 12.5px; letter-spacing: .28em;
  color: var(--brick); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 5px;
}
#Main.y26 .y26-more:hover { border-color: var(--brick); }
#Main.y26 .y26-empty { padding: 40px 0; color: var(--ink-soft); font-size: 14px; }

/* ══════════ 반응형 ══════════ */
/* 태블릿·모바일 : 1단 레이아웃에서도 PC 처럼 이미지가 상단에 고정되도록.
   grid item 은 자기 grid area 안에서만 sticky 가 동작하므로(= 붙지 않음)
   레이아웃을 block 으로 바꾸고 .n8-visual 자체를 sticky 로 만든다. */
@media (max-width: 880px) {
  #Main.y26 .n8-layout { display: block; }
  #Main.y26 .n8-visual {
    position: sticky; top: 68px; z-index: 2;
    padding: 8px 0 14px; background: var(--paper);
  }
  #Main.y26 .n8-sticky { position: static; }
  #Main.y26 .n8-imgbox { aspect-ratio: 16 / 10; }
  #Main.y26 .n8-num { display: none; }
  #Main.y26 .n8-cur {
    display: flex; align-items: baseline; gap: 12px; margin-top: 14px;
  }
  #Main.y26 .n8-cur .no { font-size: 11px; letter-spacing: .3em; }
  #Main.y26 .n8-cur .nm { margin-top: 0; font-size: 20px; }
  #Main.y26 .n8-list { margin-top: 8px; }
}
@media (max-width: 768px) {
  #Main.y26 .n8-visual { top: 62px; }
}
@media (max-width: 640px) {
  #Main.y26 .y26-noti a { flex-wrap: wrap; }
  #Main.y26 .y26-noti .tit { flex-basis: 100%; order: 3; white-space: normal; }
}

/* 동작 줄이기(Reduce Motion) : 스크롤 연동 자체는 그대로 두고,
   사용자가 조작하지 않는데 저절로 움직이는 것만 끈다.
   (연출을 통째로 끄면 콘텐츠가 처음부터 다 펼쳐져 오히려 망가져 보인다) */
@media (prefers-reduced-motion: reduce) {
  #Main.y26 .y26-invite .hint { animation: none; }
  /* 마퀴는 멈추되, 흐르던 상태 그대로 멈추면 문구가 중간에서 잘린다
     (390px 화면에서 881px 조각의 44% 만 보임).
     복제본을 숨기고 한 줄을 가운데 정렬·줄바꿈해 온전히 읽히게 한다. */
  #Main.y26 .y26-marquee .mtrack {
    animation: none;
    width: 100%;
    justify-content: center;
    transform: none !important;
  }
  #Main.y26 .y26-marquee .mtrack span { display: none; }
  #Main.y26 .y26-marquee .mtrack span:first-child {
    display: block;
    white-space: normal;
    padding-right: 0;
    text-align: center;
  }
  /* 문구 끝의 ✦ 는 다음 조각과 이어붙이기 위한 것 — 멈춘 상태에선 뗀다 */
  #Main.y26 .y26-marquee .mtrack span:first-child i:last-child { display: none; }
}

/* GSAP 이 로드되지 않았을 때만 정적 레이아웃으로 전환 (JS 가 클래스 부여) */
#Main.y26.y26-static .y26-pin { height: auto; }
#Main.y26.y26-static .y26-stage { position: relative; min-height: 640px; }
#Main.y26.y26-static .y26-stamp { position: static; opacity: 1; padding: 0 20px 8vh; }
#Main.y26.y26-static .y26-invite { position: static; padding-top: 8vh; }

#Main.y26 :focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

/* TOP 버튼 — 히어로 구간에서는 숨김 (이 파일은 메인에서만 로드됨) */
.page-top {
  width: 54px; height: 54px; right: 28px; bottom: 28px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.page-top img { width: 100%; height: 100%; }
body.y26-scrolled .page-top { opacity: 1; pointer-events: auto; }

/* ══════════ 푸터 보정 (메인 전용) ══════════
   기존 테마 푸터가 과도하게 큼 (PC 상단 여백 190px · 블록 간격 137px ·
   하단 구분 200px → 전체 840px). 정보 밀도에 맞게 압축한다.             */
.footer { padding: 62px 0 26px; background: #14121F; }
.footer .inner { max-width: 1240px; padding: 0 40px; }
.footer .flex-wrap { align-items: flex-start; gap: 32px; }

.footer .left { gap: 28px; margin-top: 0; }
.footer .list-wrap { gap: 11px; }
.footer .list-wrap .list { gap: 34px; }
.footer .list-wrap .list li { font-size: 16px; font-weight: 600; }
.footer .list-wrap .list li::before {
  height: 13px; right: -17px; background: rgba(255, 255, 255, .34);
}
.footer .list-wrap .list li a { transition: color .25s ease; }
.footer .list-wrap .list li a:hover,
.footer .list-wrap .list li a:focus { color: #E3A94F; }

.footer .info-wrap { display: flex; flex-direction: column; gap: 11px; }
.footer .info { gap: 16px; }
.footer .info span {
  font-size: 13px; font-weight: 600; letter-spacing: .16em;
  color: #C9BCA0; min-width: 30px;
}
.footer .info .img img { display: block; height: 26px; width: auto; }

.footer .logo { width: 230px; flex: none; }
.footer .logo img { display: block; width: 100%; height: auto; }

.footer .under {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer .under p { font-size: 12.5px; line-height: 1.75; color: #9A937F; }

@media all and (max-width: 85.375rem) {
  .footer { padding: 54px 0 24px; }
  .footer .left { gap: 24px; }
  .footer .logo { width: 200px; }
  .footer .list-wrap .list li { font-size: 15.5px; }
  .footer .under { margin-top: 34px; }
  .page-top { width: 48px; height: 48px; right: 22px; bottom: 22px; }
}
@media all and (max-width: 63.9375rem) {
  .footer { padding: 46px 0 22px; }
  .footer .inner { padding: 0 28px; }
  .footer .left { gap: 22px; }
  .footer .logo { width: 178px; }
  .footer .info span { font-size: 12.5px; min-width: 28px; }
  .footer .info .img img { height: 22px; }
  .footer .under { flex-direction: column; gap: 4px; margin-top: 28px; }
}
@media all and (max-width: 47.9375rem) {
  .footer { padding: 40px 0 22px; }
  .footer .inner { padding: 0 20px; }
  .footer .flex-wrap { flex-direction: column-reverse; gap: 24px; }
  .footer .left { gap: 20px; }
  .footer .logo { width: 158px; }
  .footer .list-wrap { gap: 8px; }
  .footer .list-wrap .list { gap: 26px; }
  .footer .list-wrap .list li { font-size: 14.5px; }
  .footer .list-wrap .list li::before { height: 12px; right: -13px; }
  .footer .info .img img { height: 20px; }
  .footer .under { margin-top: 24px; padding-top: 14px; }
  .footer .under p { font-size: 11.5px; line-height: 1.7; }
  .page-top { width: 42px; height: 42px; right: 16px; bottom: 18px; }
}

/* ══════════ 헤더 보정 (메인 전용) ══════════
   히어로 구간 : 투명 · 밝은 로고/메뉴
   본문 구간   : 양피지 바 · 어두운 로고/메뉴(.bk)
   기존 테마 헤더가 과하게 커서(PC 181px / MO 70px) 전체적으로 축소한다.   */
.header-wrap {
  min-height: 0;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.header-wrap::before { top: 78px; }

.header {
  padding: 22px 40px;
  min-height: 0;
  align-items: center;
}
.header .logo-wrap { gap: 7px; }
.header .logo { height: 40px; width: auto; min-width: 0; margin-top: 0; }
.header .logo > a { height: 100%; }
.header .logo img { display: block; height: 100%; width: auto; }
.header .under-logo { height: 24px; }
.header .under-logo img { display: block; height: 100%; width: auto; }
.header .nav { margin-right: 0; }
.header .gnb { gap: 32px; }
.header .gnb > li { font-size: 16px; }
.header .gnb > li > a { padding: 9px 0; }
.header .lnb { top: 44px; }

/* 태블릿 이하 : 모바일 메뉴 패널 위치도 축소한 헤더에 맞춘다 */
@media all and (max-width: 85.375rem) {
  .header-wrap { min-height: 64px; }
  .header { padding: 14px 32px; min-height: 64px; }
  .header .logo { height: 36px; }
  .header .under-logo { height: 20px; }
  /* 햄버거 : 기존 30×30(막대 29×3)은 축소한 헤더에 비해 과하다.
     탭 영역은 36×36 으로 넉넉히 두고 막대만 줄인다. */
  .header .mobile-btn { margin-top: 0; width: 36px; height: 36px; }
  .header .mobile-btn span { left: 7px; width: 22px; height: 2px; border-radius: 2px; }
  .header .mobile-btn span:nth-of-type(1) { top: 10px; }
  .header .mobile-btn span:nth-of-type(2) { top: 17px; }
  .header .mobile-btn span:nth-of-type(3) { top: 24px; }
  /* 닫기(X) : 원본은 막대의 '오른쪽 끝'을 축으로 회전해서 X 가 오른쪽으로 치우친다.
     두 막대를 버튼 중앙선으로 모은 뒤 각자의 중심에서 회전시켜 정확히 가운데 X 를 만든다. */
  .header .mobile-btn span:nth-of-type(1),
  .header .mobile-btn span:nth-of-type(3) { transform-origin: center center; }
  .header .mobile-btn.active span:nth-of-type(1) { top: 17px; transform: rotate(-45deg); }
  .header .mobile-btn.active span:nth-of-type(3) { top: 17px; transform: rotate(45deg); }
  .header .nav { top: 64px; height: calc(100% - 64px); }
  .header .nav .gnb { padding-top: 6%; }
}
@media all and (max-width: 63.9375rem) {
  .header-wrap { min-height: 58px; }
  .header { padding: 11px 24px; min-height: 58px; }
  .header .logo { height: 32px; width: auto; min-width: 0; }
  .header .under-logo { height: 18px; }
  .header .nav { top: 58px; height: calc(100% - 58px); }
}
@media all and (max-width: 47.9375rem) {
  .header-wrap::before { top: 54px; }
  .header-wrap { min-height: 54px; }
  .header { padding: 10px 18px; min-height: 54px; }
  .header .logo { height: 28px; }
  .header .logo-wrap { gap: 4px; }
  .header .under-logo { height: 15px; }
  .header .nav { top: 54px; height: calc(100% - 54px); }
}

/* ══════════ 모바일/태블릿 전체메뉴 (햄버거 열림) ══════════
   기존 테마는 .nav/.gnb/.lnb 가 각각 absolute + translate 로 잡혀 있어
   헤더 높이를 바꾸면 위치가 어긋난다. 열림 상태 레이아웃을 통째로 재정의한다.
   (.lnb 는 header.js 가 slideUp/Down 으로 inline display 를 넣으므로 !important) */
@media all and (max-width: 85.375rem) {
  .header-wrap.active {
    height: 100%;
    background-color: rgba(12, 10, 20, .95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow: hidden;
  }
  /* .header 를 positioned 로 만들면 .right-wrap 의 % 높이 기준이 헤더 행이 되어
     패널 높이가 0 이 된다. 위치 기준은 .header-wrap(fixed) 으로 유지한다. */
  .header-wrap.active .header {
    position: static;
    height: auto;
    display: flex;
    align-items: center;
  }
  .header-wrap.active .header .logo-wrap { position: relative; z-index: 3; }
  .header-wrap.active .header .mobile-btn { z-index: 3; }
  .header-wrap.active .header .under-logo { opacity: 1; }

  .header-wrap.active .header .right-wrap {
    position: absolute;
    left: 0;
    top: 64px;
    width: 100%;
    height: calc(100% - 64px);
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .header-wrap.active .header .nav {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px 24px 72px;
    transform: none;
    overflow: visible;
  }
  .header-wrap.active .header .nav .gnb,
  .header-wrap.active .header .gnb {
    position: static;
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    text-align: left;
    transform: none;
    top: auto;
    left: auto;
  }
  .header-wrap.active .header .gnb > li {
    display: block;
    width: 100% !important;
    height: auto;
    border-bottom: 1px solid rgba(227, 169, 79, .22);
    text-align: left;
  }
  .header-wrap.active .header .gnb > li > a {
    display: block;
    width: auto;
    margin: 0;
    padding: 18px 2px 10px;
    text-align: left;
    font-family: "Noto Serif KR", serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.35;
    color: #F4EBD8;
  }
  .header-wrap.active .header .gnb > li > a::before,
  .header-wrap.active .header .gnb > li.active::after { display: none; }

  .header-wrap.active .header .lnb {
    display: flex !important;
    position: static;
    flex-wrap: wrap;
    gap: 2px 20px;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 2px 16px;
    top: auto;
    left: auto;
    background-color: transparent;
    box-shadow: none;
    transform: none;
  }
  .header-wrap.active .header .lnb > li {
    width: auto;
    min-width: 0;
    height: auto;
    text-align: left;
    border: 0;
  }
  .header-wrap.active .header .lnb > li > a {
    display: inline-block;
    padding: 7px 0;
    font-size: 14.5px;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #C9BCA0;
    white-space: nowrap;
  }
  .header-wrap.active .header .lnb > li > a:hover,
  .header-wrap.active .header .lnb > li > a:focus { color: var(--y26-gold, #E3A94F); }
}
@media all and (max-width: 63.9375rem) {
  .header-wrap.active .header .right-wrap { top: 58px; height: calc(100% - 58px); }
  .header-wrap.active .header .nav { padding: 14px 20px 72px; }
  .header-wrap.active .header .gnb > li > a { font-size: 18px; padding: 16px 2px 9px; }
}
@media all and (max-width: 47.9375rem) {
  .header-wrap.active .header .right-wrap { top: 54px; height: calc(100% - 54px); }
  .header-wrap.active .header .nav { padding: 10px 18px 72px; }
  .header-wrap.active .header .gnb > li > a { font-size: 17px; padding: 15px 2px 8px; }
  .header-wrap.active .header .lnb { gap: 0 16px; }
  .header-wrap.active .header .lnb > li > a { font-size: 13.5px; padding: 6px 0; }
}
body.y26-scrolled .header-wrap:not(.active) {
  background-color: rgba(239, 229, 204, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(203, 184, 142, .9), 0 6px 24px rgba(59, 47, 34, .1);
}
/* 사전예약 등 어두운 섹션 위에서는 어두운 바 (글자는 .bk 해제로 밝게) */
body.y26-scrolled.y26-darksec .header-wrap:not(.active) {
  background-color: rgba(18, 16, 31, .86);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
body.y26-scrolled .header-wrap:not(.active)::before { background-color: transparent; }
/* 본문 구간에서는 한 단계 더 축소 (와WOW 로고는 .scroll 로 숨김) */
body.y26-scrolled .header-wrap:not(.active) .header {
  padding-top: 15px;
  padding-bottom: 15px;
}
body.y26-scrolled .header-wrap:not(.active) .header .logo { height: 36px; }
/* 와WOW 로고는 opacity 만 0 이라 자리를 차지한다 → 완전히 접는다 */
body.y26-scrolled .header-wrap:not(.active) .header .logo-wrap { gap: 0; }
body.y26-scrolled .header-wrap:not(.active) .header .under-logo {
  height: 0; overflow: hidden; transition: height .35s ease, opacity .3s ease;
}
@media all and (max-width: 63.9375rem) {
  body.y26-scrolled .header-wrap:not(.active) .header { padding-top: 10px; padding-bottom: 10px; }
  body.y26-scrolled .header-wrap:not(.active) .header .logo { height: 30px; }
}

/* 고정 헤더에 가리지 않도록 앵커 오프셋 */
#Main.y26 #about,
#Main.y26 #night8,
#Main.y26 #reserve,
#Main.y26 #news { scroll-margin-top: 110px; }