@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   홈 전용 스타일
   ══════════════════════════════════════════════════════════ */

/* ── HERO ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--hdh) + 24px) 0 clamp(28px,4vw,56px);overflow:hidden;
}
.hero::after{ /* 종이 질감 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 키비주얼 자리. 높이를 뷰포트로 못 박는다 —
   섹션 높이에 비례시키면 화면이 낮을 때 섹션이 길어지며 키비주얼도 같이 커진다. */
.hero__kv{
  position:absolute;left:0;right:0;top:0;height:100svh;max-height:100%;
  pointer-events:none;z-index:1;
  perspective:1400px;perspective-origin:50% 45%;
}
/* 우측 벽에 붙여 헤더 바로 아래(상단)에 앉힌다.
   상자 비율을 아트워크(1700:1840)에 고정하면 contain 이 잘라낼 여지가 없어
   어떤 화면에서도 전체 모양이 그대로 보인다. */
/* 마우스를 따라 3D 로 기우는 래퍼.
   변형 값은 app.js 의 kv3d() 가 직접 써 넣는다 (CSS 변수 calc 는 쓰지 않는다). */
.kv{
  position:absolute;display:block;will-change:transform;
  /* transform-style:preserve-3d 는 넣지 말 것 —
     이 조합에서 transform 이 통째로 무시된다(실측: translateX(40px) → 적용 0px). */
}
.kv__i{width:100%;height:100%;object-fit:contain}
/* 우상단 매듭 */
.kv--1{top:0;right:0;width:min(38%,560px,42vw);aspect-ratio:1700/1840;max-height:min(58svh,560px,58vh)}
.kv--1 .kv__i{object-position:right top}
/* 좌하단 밴드 */
.kv--2{left:0;bottom:0;width:min(32%,480px,38vw);aspect-ratio:1600/621;max-height:min(26svh,240px,26vh)}
.kv--2 .kv__i{object-position:left bottom}
.kv--back{z-index:1}
/* 포스터에서 뽑아낸 실제 젤리 아트워크.
   SVG 를 그려 내던 draw 애니메이션은 래스터에 쓸 수 없어, 떠오르며 커지는 등장으로 바꾼다. */
.kv--img{
  z-index:1;
  opacity:0;transform:scale(1.1) translate3d(2%,3%,0);
  animation:kvIn 1.5s var(--ez) .25s forwards, kvFloat 17s ease-in-out 1.8s infinite alternate;
}
@keyframes kvIn{to{opacity:1;transform:scale(1) translate3d(0,0,0)}}
@keyframes kvFloat{
  0%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(-1.1%,1.2%,0) rotate(-.7deg)}
  100%{transform:translate3d(.6%,-.9%,0) rotate(.5deg)}
}
.kv--img2{
  opacity:0;transform:scale(1.08) translate3d(-2%,3%,0);
  animation:kvIn 1.5s var(--ez) .5s forwards, kvFloat 21s ease-in-out 2s infinite alternate-reverse;
}
html.rm .kv--img,html.rm .kv--img2{opacity:1;transform:none;animation:none}
html.rm .kv{transform:none;transition:none}
@media (max-width:900px){
  .hero__in{padding-bottom:clamp(60px,11vh,130px)}
  .kv--1{width:min(50%,260px,52vw);max-height:min(20svh,180px)}
  .kv--2{width:min(62%,300px,64vw);max-height:min(16svh,130px)}
  .kv--img{opacity:.95}
}

/* 좌하단 젤리 밴드 높이만큼 본문을 띄워 글자가 젤리 위에 올라가지 않게 한다 */
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding-inline:var(--gut);padding-bottom:clamp(90px,15vh,210px)}

.hero__eyeb{display:flex;align-items:center;gap:12px;font-size:clamp(11px,1.15vw,14px);font-weight:800;letter-spacing:.2em;margin-bottom:clamp(14px,2vw,26px);
  opacity:0;transform:translateY(12px);animation:hUp .8s var(--ez) .25s forwards}
.hero__eyeb i{width:clamp(26px,5vw,72px);height:8px;border-radius:99px;background:var(--grad)}
@keyframes hUp{to{opacity:1;transform:none}}

/* 포스터처럼 네 줄로 쌓는다.
   글자가 마스크에 잘리지 않도록 줄상자는 1em 을 유지하고,
   줄 간격은 음수 마진으로 좁혀 포스터의 밀도를 낸다. */
/* 2026 / 성남테크아트 / 페스티벌 — 가장 긴 줄(6글자)이 좌측 단에 들어가야 한다 */
.hero__t{margin:0;font-weight:900;letter-spacing:-.055em;font-size:min(7.4vw,11.4vh)}
.hero__ln--y{letter-spacing:-.02em}
/* 마스크(줄상자)는 글자보다 넉넉히 두어 잘리지 않게 하고,
   줄 간격은 음수 마진으로 되돌린다. 받침이 있는 줄까지 고려해 0.92em 간격. */
.hero__ln{display:block;overflow:hidden;line-height:1.16}
.hero__ln + .hero__ln{margin-top:-.2em}
.hero__ln i{
  display:block;font-style:normal;line-height:1.16;
  transform:translateY(101%);
  animation:hRise 1s var(--ez) forwards;
  animation-delay:calc(.34s + var(--i) * .095s);
}
@keyframes hRise{to{transform:none}}
@keyframes gsh{to{background-position:200% 0}}

/* 수정사항 요청(261002) — 메인 부제. 제목 바로 아래, 날짜 블록 위. */
.hero__sub{
  margin-top:clamp(14px,1.8vw,24px);max-width:22ch;
  font-size:clamp(17px,2.1vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.35;
  opacity:0;transform:translateY(14px);animation:hUp .9s var(--ez) .85s forwards;
}
.hero__meta{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,54px);margin-top:clamp(22px,3vw,44px);
  opacity:0;transform:translateY(16px);animation:hUp .9s var(--ez) .95s forwards}
.hero__ve{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:3px solid var(--ink)}
.hero__ve b{font-size:clamp(17px,2.1vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.hero__ve span{font-size:clamp(13px,1.25vw,17px);font-weight:700;color:var(--ink-70)}
.hero__ve em{font-style:normal;font-size:.8em;letter-spacing:.12em;color:var(--ink-45);margin-left:4px}

.hero__cue{
  position:absolute;z-index:5;right:var(--gut);bottom:clamp(28px,4vw,56px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--ink);
  padding:12px 10px 0;border-radius:99px;background:rgba(245,251,32,.72);backdrop-filter:blur(3px);
  opacity:0;animation:hUp 1s var(--ez) 1.3s forwards;
}
.hero__cue i{display:block;width:2px;height:54px;background:var(--ink-14);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:cue 2.1s var(--ez) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:820px){.hero__cue{display:none}}

/* ── 정보 바 ────────────────────────────────────────────── */
.hbar{background:var(--ink);color:var(--yl);border-block:3px solid var(--ink)}
.hbar__in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;justify-content:space-between;padding-block:22px}
.hbar__l{display:flex;flex-wrap:wrap;gap:14px 44px}
.hbar__l div{display:flex;flex-direction:column;gap:3px}
.hbar__l dt{font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(245,251,32,.5)}
.hbar__l dd{font-size:clamp(14px,1.4vw,18px);font-weight:800;letter-spacing:-.02em}
.hbar__l dd i{font-style:normal;font-size:.72em;letter-spacing:.1em;opacity:.65;margin-inline:2px}
.hbar__dd{display:flex;align-items:center;gap:14px}
.hbar__ddl{font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(245,251,32,.5)}
.hbar__dd strong{
  font-size:clamp(26px,3.4vw,46px);font-weight:900;letter-spacing:-.04em;line-height:1;
  background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-size:200% 100%;animation:gsh 6s linear infinite;
}
.hbar__dd b{font-variant-numeric:tabular-nums}

/* ── ABOUT ──────────────────────────────────────────────── */
/* 포스터 하단 주최·주관 CI 를 최대한 읽히게 하려고 포스터 단을 넓혔다(261006).
   CI 가독성은 해상도가 아니라 '화면에 몇 px 로 그려지느냐' 가 좌우한다. */
.about__g{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,3.4vw,60px);align-items:center}
/* 본문이 두 문단이 되었다 — 첫 문단만 제목과 간격을 크게 둔다 */
.about__lead{margin-top:26px;max-width:58ch}
.about__lead + .about__lead{margin-top:18px}
.about__b{margin-top:34px}

.about__po{margin:0}
.about__po-in{
  display:block;border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--ink);
  box-shadow:14px 18px 0 var(--ink);background:var(--ink);
  transform:rotate(-2.2deg);transition:transform .6s var(--ez),box-shadow .6s var(--ez);
  will-change:transform;
}
.about__po-in img{width:100%;height:auto}
.about__po:hover .about__po-in{transform:rotate(0) translateY(-8px);box-shadow:20px 26px 0 var(--ink)}
.about__po figcaption{margin-top:18px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-45)}

/* 칸 수는 PHP 가 --cols 로 넘긴다 — 항목을 숨겨도 남은 칸이 폭을 고르게 나눠 갖는다 */
.stats{
  margin-top:clamp(52px,6vw,92px);display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.stats li{padding:30px 22px;display:flex;flex-direction:column;gap:4px;position:relative}
.stats li + li::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1.5px;background:var(--ink-14)}
.stats b{font-size:clamp(34px,4.6vw,66px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:14px;font-weight:800;letter-spacing:-.02em}
.stats i{font-style:normal;font-size:12.5px;color:var(--ink-45);font-weight:600}

/* ── ZONE ───────────────────────────────────────────────── */
.zones{position:relative}
.zone{position:relative;padding-block:clamp(74px,9vw,136px);overflow:hidden}
.zone--pro{background:var(--ink);color:var(--yl)}
.zone--pro .eyeb{color:var(--yl)}
.zone--pro .zone__t span:nth-child(2) i{background-image:var(--grad)}  /* 검정 배경이라 원색 사용 */
.zone--friendly{background:var(--yl)}

.zone__hd{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px clamp(22px,3vw,50px);align-items:start}
.zone__n{
  grid-row:1 / span 3;font-size:clamp(56px,10vw,158px);font-weight:900;line-height:.8;letter-spacing:-.06em;
  /* 외곽선만 남기는 숫자.
     color:transparent 를 쓰면 stroke 의 currentColor 까지 투명해져 글자가 통째로 사라진다.
     color 는 그대로 두고 -webkit-text-fill-color 로 속만 비운다. */
  -webkit-text-stroke:2.6px currentColor;
  -webkit-text-fill-color:transparent;
}
.zone__ti{grid-column:2}
.zone__t{margin:12px 0 0;font-size:clamp(34px,6.4vw,92px);font-weight:900;line-height:.9;letter-spacing:-.05em}
.zone__t span{display:block;overflow:hidden}
.zone__t span:nth-child(2) i{
  background-image:var(--grad-lt);   /* 기본(노랑 배경 friendly 존) */-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.zone__m{grid-column:2;display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:26px;padding-top:20px;border-top:2px solid currentColor}
.zone__m div{display:flex;gap:10px;align-items:baseline}
.zone__m dt{font-size:11px;font-weight:800;letter-spacing:.14em;opacity:.55}
.zone__m dd{font-size:15px;font-weight:800;letter-spacing:-.02em}
.zone__d{grid-column:2;margin-top:20px;max-width:60ch}
.zone--pro .zone__d{color:rgba(245,251,32,.72)}

/* ── 프로그램 레일 ──────────────────────────────────────── */
.rail{margin-top:clamp(38px,4.5vw,66px)}
.rail__t{
  display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
  /* 레일은 전체폭이지만 첫 카드는 .wrap 의 본문 시작선에 맞춘다.
     (--wrap 보다 넓은 화면에서 섹션 제목과 카드가 어긋나지 않게)
     scroll-padding 을 같은 값으로 주지 않으면 mandatory 스냅이 첫 카드를
     스크롤포트 왼쪽 끝으로 끌어당겨 padding 이 무시된다. */
  --rail-pad:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
  /* 상단 14px : overflow-x:auto 때문에 overflow-y 도 auto 로 계산돼 이 박스는
     padding-box 상단에서 잘린다. 카드 hover 리프트(-10px)가 잘리지 않게 그보다 크게. */
  padding-block:14px 26px;
  padding-inline:var(--rail-pad) var(--gut);
  scroll-padding-inline-start:var(--rail-pad);
}
.rail__t::-webkit-scrollbar{display:none}
.rail__ui{display:flex;align-items:center;gap:16px;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.rail__b{
  width:46px;height:46px;flex:none;border-radius:50%;border:2.5px solid currentColor;
  display:grid;place-items:center;transition:background-color .3s,color .3s,transform .3s var(--ez);
}
.rail__b svg{width:17px}
.rail__b:hover{transform:scale(1.08)}
.zone--pro .rail__b:hover{background:var(--yl);color:var(--ink)}
.zone--friendly .rail__b:hover{background:var(--ink);color:var(--yl)}
.rail__bar{flex:1;height:3px;background:currentColor;opacity:.2;border-radius:2px;position:relative}
.rail__bar i{position:absolute;left:0;top:-1px;height:5px;width:22%;border-radius:3px;background:var(--grad);transition:transform .16s linear}

.pcard{flex:0 0 clamp(266px,26vw,340px);scroll-snap-align:start}
.pcard > a{
  position:relative;display:flex;flex-direction:column;height:100%;min-height:clamp(380px,40vw,440px);
  border-radius:var(--r-lg);border:2.5px solid currentColor;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ez);
}
.zone--pro .pcard > a{background:#111;color:var(--yl);border-color:rgba(245,251,32,.3)}
.zone--friendly .pcard > a{background:var(--pp);color:var(--ink)}
.pcard > a::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--ac,var(--c-pink));
  transform:translateY(100%);transition:transform .58s var(--ez);
}
/* 키보드 포커스에서도 배경과 글자색이 반드시 함께 바뀌어야 한다.
   (글자만 흰색이 되면 흰 카드 위 흰 글자로 사라진다) */
.pcard > a:hover,
.pcard > a:focus-visible{transform:translateY(-10px);color:#fff;border-color:transparent}
.pcard > a:hover::before,
.pcard > a:focus-visible::before{transform:translateY(0)}

.pcard__n{
  position:absolute;right:20px;top:16px;z-index:2;font-size:13px;font-weight:900;letter-spacing:.1em;
  opacity:.5;font-variant-numeric:tabular-nums;
}
.pcard__vi{position:relative;z-index:1;display:block;height:clamp(128px,14vw,164px);overflow:hidden;border-bottom:2.5px solid currentColor;opacity:.95;transition:opacity .5s,filter .5s}
.pcard__vi svg{width:100%;height:100%}
.pcard > a:hover .pcard__vi,
.pcard > a:focus-visible .pcard__vi{opacity:.24;filter:grayscale(1) brightness(3)}

/* 사진이 없는 카드는 포스터 젤리를 쓴다. --jx 로 카드마다 다른 구간을 보여 준다. */
.pcard__vi--jl img{width:100%;height:100%;object-fit:cover;object-position:var(--jx,40%) 52%;display:block;transition:transform .7s var(--ez)}
.pcard > a:hover .pcard__vi--jl,
.pcard > a:focus-visible .pcard__vi--jl{opacity:.5;filter:none}
.pcard > a:hover .pcard__vi--jl img,
.pcard > a:focus-visible .pcard__vi--jl img{transform:scale(1.06)}
.pcard:has(.pcard__vi--jl) .pcard__n{color:#fff;opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* 사진 썸네일 — 매듭 그래픽을 흰색으로 날리던 호버는 사진에 쓰면 그냥 하얗게 탄다.
   사진은 살짝 당기면서 어둡게 눌러 글자가 먼저 읽히게 한다. */
.pcard__vi--ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .7s var(--ez)}
/* 번호가 사진 위로 올라오면 밝은 사진에선 묻히고 어두운 사진에선 안 보인다.
   우상단에만 옅은 먹 그라데이션을 깔아 어떤 사진이든 흰 번호가 읽히게 한다. */
.pcard__vi--ph::after{
  content:"";position:absolute;inset:0 0 auto auto;width:46%;height:62%;pointer-events:none;
  background:linear-gradient(215deg,rgba(10,10,10,.55),rgba(10,10,10,0) 68%);
}
.pcard:has(.pcard__vi--ph) .pcard__n{color:#fff;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pcard > a:hover .pcard__vi--ph,
.pcard > a:focus-visible .pcard__vi--ph{opacity:.62;filter:none}
.pcard > a:hover .pcard__vi--ph img,
.pcard > a:focus-visible .pcard__vi--ph img{transform:scale(1.09)}
html.rm .pcard__vi--ph img{transition:none}

.pcard__b{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;flex:1}
.pcard__en{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.18em;opacity:.55}
.pcard__t{font-size:clamp(21px,2.2vw,27px);font-weight:900;letter-spacing:-.04em;line-height:1.15}
.pcard__d{font-size:13.5px;line-height:1.7;opacity:.72;flex:1}
.pcard__m{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;padding-top:12px;border-top:1.5px solid currentColor;opacity:.72}
.pcard__m i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:-.01em}
.pcard__go{
  position:absolute;right:18px;bottom:18px;z-index:3;width:40px;height:40px;border-radius:50%;
  border:2.2px solid currentColor;display:grid;place-items:center;
  transform:translateX(-6px) scale(.8);opacity:0;transition:transform .45s var(--ez),opacity .35s;
}
.pcard__go svg{width:16px}
.pcard > a:hover .pcard__go,
.pcard > a:focus-visible .pcard__go{transform:none;opacity:1}

.pcard--more > a{align-items:center;justify-content:center;gap:20px;text-align:center;min-height:100%;
  border-style:dashed;background:transparent!important}
.pcard--more b{position:relative;z-index:2;font-size:20px;font-weight:900;letter-spacing:-.03em;line-height:1.4}
.pcard--more span{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;transition:transform .4s var(--ez)}
.pcard--more svg{width:18px}
.pcard--more > a:hover span,
.pcard--more > a:focus-visible span{transform:translateX(6px)}

/* ── VISIT ──────────────────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.vcard{display:flex;flex-direction:column;gap:9px;padding:clamp(26px,3vw,42px)}
.vcard__en{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--ink-45)}
.vcard__t{font-size:clamp(26px,3.4vw,44px);font-weight:900;letter-spacing:-.045em;line-height:1.05}
.vcard__d{font-size:15px;font-weight:800;letter-spacing:-.01em}
.vcard__d i{font-style:normal;font-size:.76em;letter-spacing:.1em;color:var(--ink-45);margin-inline:2px}
.vcard__x{font-size:14.5px;line-height:1.75;color:var(--ink-70);margin-top:6px}
.vcard .tags{margin-top:16px}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .about__g{grid-template-columns:1fr}
  .about__po{max-width:340px;margin-inline:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats li:nth-child(3)::before,.stats li:nth-child(1)::before{display:none}
  .stats li:nth-child(n+3){border-top:1.5px solid var(--ink-14)}
  .vgrid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{align-items:center;min-height:92svh}
  .hero__ln i{font-size:min(19vw,13.5vh)}
  .zone__hd{grid-template-columns:1fr}
  .zone__n{grid-row:auto}
  .zone__ti,.zone__m,.zone__d{grid-column:1}
  .nlist a{grid-template-columns:auto 1fr;padding:20px 6px}
  .nlist__t{grid-column:1 / -1;order:3}
  .nlist__a{display:none}
  .nlist__d{justify-self:end}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr}
  .stats li + li{border-top:1.5px solid var(--ink-14)}
  .stats li::before{display:none!important}
}

/* 모션 최소화 — 히어로는 즉시 최종 상태로 */
html.rm .hero__eyeb,
html.rm .hero__ln i,
html.rm .hero__meta,
html.rm .hero__cue{animation:none;opacity:1;transform:none}
html.rm .hero__cue i::after{animation:none;transform:none}

/* ══════════════════════════════════════════════════════════
   홍보영상 섹션
   배경에 소리 없는 루프를 은은하게 깔고,
   재생을 누르면 같은 자리에서 소리 있는 본편으로 전환된다.
   ══════════════════════════════════════════════════════════ */
.vsec{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:var(--yl);
  min-height:clamp(520px,54vw,760px);
  display:flex;align-items:center;
  padding-block:clamp(64px,7vw,110px);
  border-block:3px solid var(--ink);
}
.vsec__bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ez)}
.vsec__bg.ready{opacity:.72}
/* scale(1.22) 로 살짝 키워, 유튜브가 얹는 상단 제목 줄과 하단 로고를
   화면 밖으로 밀어낸다(배경으로만 쓰이므로 잘려도 무방). */
.vsec__bg iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.22);
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100%;
  border:0;pointer-events:none;
}
/* 글자가 놓인 좌측만 눌러 주고, 우측은 영상이 밝게 보이도록 빠르게 걷어낸다 */
.vsec__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.6) 44%,rgba(10,10,10,.12) 100%),
    linear-gradient(180deg,rgba(10,10,10,.34) 0%,transparent 26%,transparent 74%,rgba(10,10,10,.34) 100%);
}
.vsec__in{position:relative;z-index:2;width:100%}
.vsec__tx{max-width:62ch}
.vsec .eyeb{color:var(--yl)}
.vsec__lead{margin-top:20px;color:rgba(245,251,32,.72);max-width:52ch}

/* 재생 버튼 */
.vplay{
  display:inline-flex;align-items:center;gap:18px;margin-top:clamp(30px,3.6vw,48px);
  padding:10px 26px 10px 10px;border-radius:99px;
  border:2.5px solid rgba(245,251,32,.4);background:rgba(10,10,10,.35);
  backdrop-filter:blur(6px);color:var(--yl);text-align:left;
  transition:border-color .3s,background-color .3s,transform .4s var(--ez);
}
.vplay:hover,.vplay:focus-visible{border-color:var(--yl);background:rgba(10,10,10,.6)}
.vplay__ic{
  position:relative;z-index:2;display:grid;place-items:center;flex:none;
  width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;
}
.vplay__ic svg{width:20px;margin-left:3px}
.vplay__ring{
  position:absolute;left:10px;top:50%;width:56px;height:56px;margin-top:-28px;
  border-radius:50%;border:2px solid var(--yl);opacity:.55;
  animation:vring 2.6s var(--ez) infinite;
}
@keyframes vring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.55);opacity:0}}
html.rm .vplay__ring{animation:none;opacity:0}
.vplay__t b{display:block;font-size:clamp(15px,1.6vw,18px);font-weight:900;letter-spacing:-.03em}
.vplay__t em{display:block;font-style:normal;margin-top:3px;font-size:12px;font-weight:700;letter-spacing:.02em;color:rgba(245,251,32,.55)}

.vsec__out{margin-top:22px;font-size:13px;color:rgba(245,251,32,.5)}
.vsec__out a{font-weight:800;color:rgba(245,251,32,.8);border-bottom:1.5px solid currentColor}
.vsec__out a:hover{color:var(--yl)}

/* ── 영상 모달 ───────────────────────────────────────────── */
/* 재생 버튼을 누르면 화면 전체를 덮는 팝업 플레이어가 열린다 */
.vmod{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:clamp(16px,4vw,56px)}
.vmod[hidden]{display:none}
.vmod__bd{
  position:absolute;inset:0;background:rgba(10,10,10,.9);
  backdrop-filter:blur(8px);opacity:0;transition:opacity .32s var(--ez);
}
.vmod__box{
  position:relative;width:min(1180px,100%);aspect-ratio:16/9;max-height:100%;
  border-radius:var(--r-lg);overflow:visible;
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .32s var(--ez),transform .42s var(--ez);
}
.vmod.on .vmod__bd{opacity:1}
.vmod.on .vmod__box{opacity:1;transform:none}
html.rm .vmod__bd,html.rm .vmod__box{transition:none}

.vmod__fr{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:#000;border:3px solid var(--yl);
}
.vmod__fr iframe{width:100%;height:100%;border:0;display:block}

.vmod__x{
  position:absolute;right:-6px;top:-62px;z-index:2;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,10,.7);border:2px solid var(--yl);color:var(--yl);
  backdrop-filter:blur(6px);transition:background-color .3s,transform .3s var(--ez);
}
.vmod__x svg{width:18px}
.vmod__x:hover,.vmod__x:focus-visible{background:var(--yl);color:var(--ink);transform:rotate(90deg)}

@media (max-width:760px){
  .vsec{min-height:0;padding-block:clamp(54px,9vw,80px)}
  /* 모바일은 글자가 영상 전체 위에 얹히므로 균일하게 눌러 준다 */
  .vsec__scrim{background:linear-gradient(180deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.88) 100%)}
  .vplay{padding-right:20px;gap:14px}
  .vplay__ic{width:48px;height:48px}
  .vplay__ring{width:48px;height:48px;margin-top:-24px}
  /* 좁은 화면에서는 닫기 버튼을 영상 위로 올릴 자리가 없어 안쪽 모서리에 둔다 */
  .vmod__x{right:8px;top:8px;width:42px;height:42px}
}

/* ══════════════════════════════════════════════════════════
   지난 축제 기록 (아카이브 사진)
   ══════════════════════════════════════════════════════════ */
.arch__cr{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-45)}
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.agrid figure{margin:0}
.agrid__ph{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);border:2.5px solid var(--ink);
  aspect-ratio:4/3;background:var(--ink);
}
.agrid__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ez),filter .5s}
.agrid li:hover .agrid__ph img{transform:scale(1.06)}
.agrid figcaption{margin-top:14px}
.agrid figcaption b{display:block;font-size:clamp(15px,1.5vw,17px);font-weight:800;letter-spacing:-.03em;line-height:1.4}
.agrid figcaption span{display:block;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-45)}
@media (max-width:860px){
  .agrid{grid-template-columns:1fr 1fr}
  .agrid li:last-child{grid-column:1 / -1}
  .agrid li:last-child .agrid__ph{aspect-ratio:16/7}
}
@media (max-width:560px){
  .agrid{grid-template-columns:1fr}
  .agrid li:last-child .agrid__ph{aspect-ratio:4/3}
}

/* ══════════════════════════════════════════════════════════
   메인 배경 리듬 (261004 피드백 반영)
   ──────────────────────────────────────────────────────────
   "노란 배경이 상단에 들어가는 건 괜찮은데, 중간중간 섹션이 나뉘면서
    노란색이 반복돼 눈이 피로하다. 하단은 일부를 검정으로 바꿔 안정감 있게."

   그래서 순서를 한 가지로 고정한다.
     히어로   노랑  ← 노랑은 여기서 한 번만
     ABOUT    흰색
     영상     검정  (원래부터 검정)
     VISIT    검정  ← 하단을 검정으로 잠가 검정 푸터까지 이어지게
   ══════════════════════════════════════════════════════════ */
.sec{background:var(--pp)}

/* 하단 마무리 — 검정 */
.visit-h{background:var(--ink);color:var(--yl);border-top:3px solid var(--ink)}
.visit-h .eyeb{color:rgba(245,251,32,.6)}
.visit-h .h2{color:var(--yl)}
.visit-h .lnk{color:var(--yl)}
.visit-h .vcard{background:#111;border-color:var(--yl);color:var(--yl)}
.visit-h .vcard__en{color:rgba(245,251,32,.5)}
.visit-h .vcard__d i{color:rgba(245,251,32,.5)}
.visit-h .vcard__x{color:rgba(245,251,32,.72)}
.visit-h .vcard .tags li{border-color:rgba(245,251,32,.34);color:rgba(245,251,32,.82)}
.visit-h .vcard:hover{box-shadow:12px 16px 0 var(--yl)}

/* 영상 섹션과 VISIT 이 맞닿으면 경계선이 겹쳐 두꺼워 보인다 */
.vsec + .visit-h{border-top:0}

/* ── 공지 팝업 (1022) ──────────────────────────────────────
   인트로가 걷힌 뒤 한 번 뜬다. 포스터 두 장을 나란히, 좁으면 한 줄씩.
   자바스크립트가 열어 주기 전까지는 hidden 이라 화면을 가리지 않는다. */
.pop[hidden]{display:none}
.pop{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,40px)}
.pop__bg{position:absolute;inset:0;background:rgba(8,8,8,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;cursor:pointer;
  opacity:0;transition:opacity .45s var(--ez)}
.pop.is-on .pop__bg{opacity:1}
.pop__in{position:relative;width:min(900px,100%);min-width:0;max-height:100%;
  display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);
  transform:translateY(22px) scale(.97);opacity:0;
  transition:transform .55s var(--ez),opacity .45s var(--ez)}
.pop.is-on .pop__in{transform:none;opacity:1}
.pop__l{list-style:none;padding:0;margin:0;display:grid;gap:clamp(12px,1.6vw,18px);
  grid-template-columns:repeat(2,1fr);
  /* 포스터가 화면보다 길면 여기만 굴러가고 아래 버튼 줄은 늘 보인다 */
  min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.pop__i{margin:0;min-width:0}
.pop__a{display:block;max-width:100%;border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink);box-shadow:7px 8px 0 var(--yl);
  transition:transform .4s var(--ez),box-shadow .4s var(--ez)}
.pop__a:hover,.pop__a:focus-visible{transform:translate(-3px,-4px);box-shadow:11px 13px 0 var(--yl)}
.pop__a img{display:block;width:100%;max-width:100%;height:auto}
.pop__cta{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 14px;background:var(--yl);color:var(--ink);
  font-size:clamp(13px,1.2vw,15.5px);font-weight:900;letter-spacing:-.03em;text-align:center}
.pop__cta svg{width:17px;height:17px;flex:none;transition:transform .4s var(--ez)}
.pop__a:hover .pop__cta svg{transform:translateX(4px)}
.pop__b{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pop__today,.pop__x{border:0;background:none;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;gap:8px;
  font-size:clamp(13px,1.2vw,15px);font-weight:800;letter-spacing:-.02em;color:#fff}
.pop__today{padding:11px 16px;border:2px solid rgba(255,255,255,.4);border-radius:99px;
  transition:border-color .3s var(--ez),background-color .3s var(--ez)}
.pop__today:hover,.pop__today:focus-visible{border-color:#fff;background:rgba(255,255,255,.12)}
.pop__x{padding:11px 18px;border-radius:99px;background:var(--yl);color:var(--ink)}
.pop__x svg{width:17px;height:17px}
.pop__x:hover,.pop__x:focus-visible{background:#fff}
@media (max-width:680px){
  .pop{padding:14px}
  .pop__l{grid-template-columns:1fr}
  .pop__in{gap:11px}
  .pop__b{justify-content:center}
  .pop__today,.pop__x{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .pop__bg,.pop__in{transition:none}
}

/* 끝난 프로그램 포스터가 내려가 한 장만 남은 경우 — 두 칸을 그대로 두면 반쪽이 빈다 (1023) */
.pop__l--one{grid-template-columns:min(420px,100%);justify-content:center}