/* 홈 (design 01 홈: 2428:254 desktop, 2430:524 mobile, poster popup 2747:10042 / 2747:10171) */

/* hero: video with the current exhibition panel (cream, convex right edge) */
.h-hero { position: relative; height: 600px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 48px 55px; background: var(--lacquer); color: var(--deep); }
.h-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 411px; background: #FAF7E8; z-index: 1; }
.h-hero .h-edge { position: absolute; left: 410px; top: 0; width: 57px; height: 100%; fill: #FAF7E8; z-index: 1; }
.h-panel { display: contents; }
.h-hero > :not(.h-media):not(.h-edge), .h-panel > * { position: relative; z-index: 2; max-width: 301px; }
.h-media { position: absolute; inset: 0; z-index: 0; }
.h-media img, .h-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-media .vctl { right: calc(52px + var(--rail)); bottom: 32px; top: auto; z-index: 2; }
.h-now-h { font: 600 18px/28px var(--sans); color: #000; }
.h-title { font: 600 48px/64px var(--sans); }
.h-sub { font: 500 22px/32px var(--sans); }
.h-date { font: 400 20px/32px var(--sans); }
.h-lede { font: 400 18px/30px var(--sans); }
.h-hero .lnk .i { --s: 18px; }

/* visit essentials band */
.h-visit { display: flex; align-items: center; gap: 40px; padding: 32px calc(52px + var(--rail)) 32px 52px; background: var(--deep); color: var(--paper); }
.h-vlist { flex: 1; display: flex; gap: 40px; margin: 0; }
.h-vlist > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h-vlist dt { font: 600 14px/26px var(--sans); color: #BBCDC1; }
.h-vlist dd { margin: 0; font: 400 16px/26px var(--sans); color: var(--paper); }
.h-vbtn { color: var(--deep); }

/* programmes */
.h-prog { background: #F4F3EF; padding: 64px calc(52px + var(--rail)) 64px 52px; }
.h-prog .in { display: flex; flex-direction: column; gap: 40px; }
.h-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.h-head-end { align-items: flex-end; }
.h-h2 { font: 600 40px/52px var(--sans); color: #000; }
.h-h2s { font: 600 36px/44px var(--sans); }
.h-track { display: flex; justify-content: center; gap: 24px; }
.h-track > li { flex: 0 0 408px; min-width: 0; }
.h-pcard { height: 100%; }
.h-pcard .im { aspect-ratio: auto; height: 275px; }

/* latest news: five rows */
.h-news { background: var(--white); padding: 64px calc(52px + var(--rail)) 64px 52px; }
.h-news .in { display: flex; flex-direction: column; gap: 24px; }
.h-more { font: 600 16px/normal var(--sans); color: var(--deep); text-decoration: none; }
.h-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.h-nrow { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid #D9DED6; color: #000; text-decoration: none; }
.h-nmeta { flex: 0 0 240px; display: flex; align-items: center; gap: 10px; }
.h-nmeta .chip { padding: 6px 14px 6px 12px; }
.h-nmeta time { font: 400 14px/normal var(--sans); color: var(--grey); }
.h-nt { flex: 1; min-width: 0; font: 600 22px/32px var(--sans); }
.h-nlast { white-space: nowrap; }
.h-npin { display: inline-block; --s: 20px; color: var(--deep); margin-left: 8px; vertical-align: 0; }
.h-nrow:hover .h-nt { text-decoration: underline; text-underline-offset: 4px; }

/* poster popup (modal dialog) */
.h-pop { padding: 0; border: 0; margin: auto; background: none; color: #FAF7F0; overflow: visible; max-height: none; max-width: none;
  --pw: min(420px, calc(100vw - 64px), calc((100dvh - 96px - 32px) * .70707)); width: var(--pw); }
.h-pop::backdrop { background: rgba(5, 10, 8, .78); }
.h-pop[open] { display: flex; flex-direction: column; }
.h-pop-bar { display: flex; justify-content: flex-end; background: rgba(41, 41, 41, .94); }
.h-pop-x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #FAF7F0; }
.h-pop-x .i { --s: 20px; }
.h-pop-img { display: block; width: 100%; height: auto; aspect-ratio: 1260 / 1782; background: var(--white); }
.h-pop-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 10px; background: rgba(41, 41, 41, .94); }
.h-pop-act a, .h-pop-act button { min-height: 44px; display: inline-flex; align-items: center; color: #FAF7F0; text-decoration: none; }
.h-pop-act a { font: 500 14px/22px var(--sans); }
.h-pop-act button { font: 400 13px/24px var(--sans); opacity: .8; }
.h-pop-act a:hover, .h-pop-act button:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.h-pop :focus-visible { outline-color: #FAF7F0; box-shadow: none; outline-offset: -3px; }
.h-pop[open] { animation: h-pop-in .2s ease-out; }
@keyframes h-pop-in { from { opacity: 0; transform: translateY(8px); } }
html.h-lock { overflow: hidden; }

@media (max-width: 1100px) and (min-width: 900px) {
  .h-track > li { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 899px) {
  /* phone: full-bleed tall video, cream panel rising on a soft convex curve */
  .h-hero { height: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0; padding: 0 0 40px; background: #FAF7E8; }
  .h-hero::before, .h-hero .h-edge { display: none; }
  .h-hero > :not(.h-media):not(.h-edge), .h-panel > * { max-width: none; }
  .h-media { order: 0; position: relative; inset: auto; flex: 0 0 100%; width: 100%; height: min(calc(100vw * 600 / 390), 78svh); overflow: hidden; background: var(--lacquer); }
  .h-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 49px; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 49' preserveAspectRatio='none'%3E%3Cpath d='M0 45C120 1 270 1 390 45V49H0Z' fill='%23FAF7E8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
  .h-media .vctl { top: 16px; right: 16px; bottom: auto; }
  .h-now-h { order: 1; flex: 0 0 100%; display: flex; align-items: center; gap: 8px; margin: 0 24px 14px; font: 500 14px/20px var(--sans); color: var(--deep); }
  .h-now-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25A45B; flex: none; }
  .h-panel > * { order: 2; }
  .h-title { flex: 0 0 100%; padding: 0 24px; font: 600 40px/48px var(--sans); color: #000; margin-bottom: 8px; }
  .h-sub { margin-left: 24px; font: 500 16px/24px var(--sans); color: #000; }
  .h-date { display: flex; align-items: center; gap: 12px; margin-left: 12px; font: 400 15px/22px var(--sans); color: var(--grey); }
  .h-date::before { content: ""; width: 1px; height: 14px; background: currentColor; opacity: .4; }
  .h-lede { display: none; }
  .h-hero .btn { order: 3; margin: 20px 24px 0; }

  .h-visit { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 20px; }
  .h-vlist { flex-direction: column; gap: 16px; width: 100%; }

  .h-prog { padding: 48px 20px; }
  .h-prog .in { gap: 24px; }
  .h-h2, .h-h2s { font: 600 26px/34px var(--sans); }
  .h-track { justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .h-track::-webkit-scrollbar { display: none; }
  .h-track > li { flex: 0 0 min(320px, 91.5%); scroll-snap-align: start; }
  .h-pcard .im { height: 217px; }
  .h-allbtn { align-self: flex-start; }

  .h-news { padding: 48px 20px; }
  .h-news .in { gap: 20px; }
  .h-head-end { align-items: center; }
  .h-more { font-size: 15px; }
  .h-nrow { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; }
  .h-nmeta { flex: none; }
  .h-nt { font: 600 18px/26px var(--sans); }
  .h-npin { --s: 16px; vertical-align: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-pop[open] { animation: none; }
}

/* 고정 소식 · 핀 아이콘 */
.h-npin { color: var(--deep); }