@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   2026 성남테크아트페스티벌 — 공통 스타일
   키비주얼(공식 포스터)에서 추출한 색·형태를 토큰으로 고정
   ══════════════════════════════════════════════════════════ */

/* ── 토큰 ───────────────────────────────────────────────── */
/* 포스터 젤리 래스터를 띠처럼 쓰는 자리 — 가로로 긴 칸은 가운데를 잘라 쓴다 */
.end__img,.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.end__svg,.phero__svg{display:none}

:root{
  /* 포스터 원본 색 */
  --yl:#F5FB20;          /* 배경 옐로 — 2026 옐로 포스터 실측 */
  --yl-d:#DDE21D;
  --ink:#0A0A0A;
  --ink-70:rgba(10,10,10,.7);
  --ink-45:rgba(10,10,10,.45);
  --ink-14:rgba(10,10,10,.14);
  --ink-08:rgba(10,10,10,.08);
  --pp:#FFFFFF;

  /* 젤리(인플레이터블) 6색 — 포스터 블롭에서 실측 추출 */
  --c-mag:#FA52B0;       /* 마젠타  */
  --c-pink:#FD155E;      /* 핫핑크  */
  --c-red:#FD4B46;       /* 코랄    */
  --c-org:#FF6628;       /* 오렌지  */
  --c-amb:#FEA92D;       /* 앰버    */
  --c-grn:#1EBD7B;       /* 에메랄드 */

  --grad: linear-gradient(100deg,#FA52B0 0%,#FD155E 20%,#FD4B46 40%,#FF6628 60%,#FEA92D 80%,#1EBD7B 100%);
  --grad-r: linear-gradient(260deg,#1EBD7B 0%,#FEA92D 26%,#FF6628 50%,#FD155E 76%,#FA52B0 100%);
  /* 밝은 배경 위에 글자로 쓸 때의 그라디언트. 5색 모두 흰 배경 대비 4.9:1 이상 */
  /* 노랑·흰 배경용 어두운 판 — 젤리 색상의 명도만 낮춰 4.8:1 이상을 맞춘다.
     앰버는 어둡게 하면 올리브빛으로 탁해져 노랑 위에서 얼룩처럼 보이므로 뺐다. */
  --grad-lt: linear-gradient(100deg,#BA337F 0%,#D30244 20%,#C6302B 46%,#BA4111 72%,#0B794C 100%);

  /* 레이아웃 */
  --wrap:1600px;
  --gut:clamp(20px,4.6vw,64px);
  --hdh:76px;
  --r:18px;
  --r-lg:30px;

  /* 타이포 */
  --ff:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  /* 모션 */
  --ez:cubic-bezier(.22,1,.36,1);
  --ez-in:cubic-bezier(.62,.05,.36,1);
  --ez-bk:cubic-bezier(.34,1.56,.64,1);
}

/* ── 리셋 ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdh) + 24px)}
html.lock,body.lock{overflow:hidden}
body{
  margin:0;font-family:var(--ff);color:var(--ink);background:var(--yl);
  font-size:16px;line-height:1.72;letter-spacing:-.017em;
  font-weight:450;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;word-break:keep-all;
}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
address{font-style:normal}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--yl)}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:50%;top:-80px;transform:translateX(-50%);z-index:9999;background:var(--ink);color:var(--yl);padding:14px 26px;border-radius:0 0 14px 14px;font-weight:800;transition:top .25s}
.skip:focus{top:0}

/* ── 레이아웃 유틸 ──────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:clamp(84px,11vw,168px)}
.sec--tight{padding-block:clamp(60px,7vw,104px)}

/* ── 타이포 ─────────────────────────────────────────────── */
.eyeb{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(11px,1vw,13px);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;color:var(--ink);
}
.eyeb::before{content:"";width:26px;height:8px;border-radius:99px;background:var(--grad)}

.h1{
  font-weight:900;line-height:.87;letter-spacing:-.045em;
  font-size:clamp(44px,9.4vw,138px);
}
.h2{
  font-weight:900;line-height:.95;letter-spacing:-.04em;
  font-size:clamp(30px,5vw,68px);margin-top:18px;
}
.h3{font-weight:800;line-height:1.16;letter-spacing:-.035em;font-size:clamp(21px,2.3vw,32px)}
.lead{font-size:clamp(16px,1.35vw,20px);line-height:1.85;color:var(--ink-70);font-weight:500}
.h2 em,.h1 em{font-style:normal;position:relative;display:inline-block}
/* 그라디언트 강조 글자.
   젤리 6색은 밝은 노랑 위에서 대비가 1.7:1 까지 떨어지므로,
   기본은 어두운 판(--grad-lt)을 쓰고 검정 배경 섹션에서만 원색을 쓴다. */
mark{
  background:none;color:transparent;
  background-image:var(--grad-lt);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blk--ink mark,.zone--pro mark,.phero--dark mark,
.vsec mark,.end mark,.hbar mark,.ov mark{background-image:var(--grad)}

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  height:56px;padding:0 30px;border-radius:99px;
  border:2.5px solid var(--ink);font-weight:800;font-size:15px;letter-spacing:-.02em;
  overflow:hidden;isolation:isolate;background:transparent;
  transition:color .34s var(--ez),border-color .34s var(--ez);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ink);
  transform:translateY(101%);transition:transform .46s var(--ez);
}
.btn:hover,.btn:focus-visible{color:var(--yl)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn--fill{background:var(--ink);color:var(--yl)}
.btn--fill::before{background:var(--grad);transform:translateY(101%)}
.btn--fill:hover,.btn--fill:focus-visible{color:#fff}
.btn--sm{height:46px;padding:0 22px;font-size:14px;border-width:2px}
.btn__ar{position:relative;z-index:2;width:17px;height:17px;flex:none}
/* 길찾기 버튼의 앞 아이콘 — ::before 채움막(z-index:1) 위로 올려야 호버 때 안 가려진다 */
.btn__ic{position:relative;z-index:2;width:18px;height:18px;flex:none}
.btn--sm .btn__ic{width:16px;height:16px}

.lnk{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
  padding-bottom:4px;border-bottom:2.5px solid var(--ink);
}
.lnk svg{width:15px;transition:transform .34s var(--ez)}
.lnk:hover svg{transform:translateX(5px)}

/* ── 섹션 헤더 ──────────────────────────────────────────── */
.shd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(36px,4.4vw,64px)}

/* ── 스크롤 리빌 ──────────────────────────────────────────
   초기 숨김은 반드시 html.js 로 게이트한다.
   JS 가 꺼져 있거나 app.js 가 죽으면 .in 이 영영 안 붙어 전 페이지가
   빈 화면이 되기 때문. 해제 규칙에도 같은 접두사를 붙여야 특이도가 역전되지 않는다. */
html.js [data-rv]{opacity:0;transform:translateY(38px);transition:opacity .82s var(--ez),transform .82s var(--ez);transition-delay:calc(var(--d,0) * 90ms)}
html.js [data-rv].in{opacity:1;transform:none}
html.js .sw,html.js .sp{display:inline-block;opacity:0;transform:translateY(.85em) rotate(2.6deg);transition:opacity .62s var(--ez),transform .74s var(--ez);transition-delay:calc(var(--i,0) * 34ms)}
html.js .in .sw,html.js .in .sp,html.js .sw.in,html.js .sp.in{opacity:1;transform:none}
[data-split]{overflow:hidden}
[data-split] > span{display:block;overflow:hidden}
[data-split] > span > i{display:block;font-style:normal}
html.js [data-split] > span > i{transform:translateY(105%);transition:transform .9s var(--ez);transition-delay:calc(var(--i,0) * 110ms)}
html.js [data-split].in > span > i{transform:none}

html.rm [data-rv],html.rm .sw,html.rm .sp{opacity:1!important;transform:none!important}
html.rm [data-split] > span > i{transform:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ══════════════════════════════════════════════════════════
   인트로
   ══════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:2000;background:var(--yl);
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ez);
}
/* JS 자체가 꺼져 있으면 커튼을 아예 렌더하지 않는다 (영구 노랑 화면 방지) */
html.no-intro .intro,
html:not(.js) .intro{display:none}
.intro.off{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro__in{text-align:center;padding-inline:24px}
.intro__en{
  display:block;font-size:clamp(11px,1.5vw,15px);font-weight:800;letter-spacing:.34em;
  opacity:0;transform:translateY(14px);animation:iUp .8s var(--ez) .1s forwards;
}
.intro__ko{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .06em;margin-top:14px;overflow:hidden}
.intro__ko em{
  font-style:normal;font-weight:900;letter-spacing:-.05em;line-height:1;
  font-size:clamp(38px,10vw,120px);
  transform:translateY(110%);animation:iRise .95s var(--ez) forwards;
  animation-delay:calc(.22s + var(--i) * .1s);
}
.intro__date{
  display:block;margin-top:20px;font-size:clamp(12px,1.5vw,16px);font-weight:700;letter-spacing:.18em;
  color:var(--ink-45);opacity:0;animation:iUp .8s var(--ez) .8s forwards;
}
.intro__bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(10,10,10,.1)}
.intro__bar i{display:block;height:100%;width:0;background:var(--grad)}
@keyframes iUp{to{opacity:1;transform:none}}
@keyframes iRise{to{transform:none}}

/* ══════════════════════════════════════════════════════════
   페이지 전환 커튼
   ══════════════════════════════════════════════════════════ */
.wipe{position:fixed;inset:0;z-index:1900;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}
.wipe span{background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ez)}
.wipe span:nth-child(2){transition-delay:.05s}
.wipe span:nth-child(3){transition-delay:.1s}
.wipe span:nth-child(4){transition-delay:.15s}
.wipe span:nth-child(5){transition-delay:.2s}
.wipe.on span{transform:scaleY(1);transform-origin:bottom}

/* ══════════════════════════════════════════════════════════
   커스텀 커서 — 크롬 구슬
   ══════════════════════════════════════════════════════════ */
.cur{position:fixed;left:0;top:0;z-index:1800;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cur i{
  display:block;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;transition:width .3s var(--ez),height .3s var(--ez),margin .3s var(--ez);
}
.cur.on{opacity:1}
.cur.big i{width:72px;height:72px;margin:-36px 0 0 -36px}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ══════════════════════════════════════════════════════════
   헤더
   ══════════════════════════════════════════════════════════ */
.hd{
  position:fixed;left:0;right:0;top:0;z-index:1000;height:var(--hdh);
  transition:transform .48s var(--ez),background-color .34s,box-shadow .34s;
}
/* 헤더는 투명 — 키비주얼이 헤더 뒤까지 올라와 보이게 한다.
   스크롤 후에는 불투명 판 대신 옅은 흐림만 깔아 글자 가독성을 지킨다. */
/* 스크롤 후 깔리는 판.
   섹션 배경이 흰색·검정으로도 바뀌면서(261004 피드백) 뒤에 뭐가 오든 헤더가 같은 색으로
   읽혀야 한다. 반투명도를 .52 → .82 로 올렸다 — 검정 섹션 위에서 먹글자 대비가
   5.15:1 에서 11.8:1 로 올라가고, 노랑 히어로 위에서는 보이는 색이 그대로다. */
.hd::before{
  content:"";position:absolute;inset:0;background:rgba(245,251,32,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .34s;
}
.hd.solid::before{opacity:1}
/* 헤더가 투명해지면서 메뉴 글자가 키비주얼 위로 올라온다.
   판을 깔면 '투명하게' 가 깨지므로, 글자에만 배경색 헤일로를 입혀 읽히게 한다. */
.hd .gnb__i > a,
.hd .hsns a,
.hd .bg{
  text-shadow:0 0 2px var(--yl),0 0 5px var(--yl),0 1px 7px rgba(245,251,32,.9);
}
.hd .hsns svg,.hd .bg__ln i{filter:drop-shadow(0 0 2px var(--yl)) drop-shadow(0 0 5px var(--yl))}
/* 검정 히어로 페이지에서는 글자가 노랑이므로 헤일로도 먹으로 뒤집는다 */
body.hero-dark .hd:not(.solid) .gnb__i > a,
body.hero-dark .hd:not(.solid) .hsns a,
body.hero-dark .hd:not(.solid) .bg{
  text-shadow:0 0 2px var(--ink),0 0 6px var(--ink),0 1px 8px rgba(10,10,10,.9);
}
body.hero-dark .hd:not(.solid) .hsns svg,
body.hero-dark .hd:not(.solid) .bg__ln i{filter:drop-shadow(0 0 2px var(--ink)) drop-shadow(0 0 6px var(--ink))}
/* 로고도 같은 처리 */
.hd .lg__t b,.hd .lg__t em{text-shadow:0 0 2px var(--yl),0 0 5px var(--yl)}
body.hero-dark .hd:not(.solid) .lg__t b,
body.hero-dark .hd:not(.solid) .lg__t em{text-shadow:0 0 2px var(--ink),0 0 6px var(--ink)}
.hd.hide{transform:translateY(-101%)}
.hd__in{position:relative;z-index:2;height:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);display:flex;align-items:center;gap:22px}
.hd__prog{position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--grad);z-index:3;transition:width .1s linear}

/* 좁은 화면에서 줄어들어야 할 것은 생략 가능한 로고 텍스트다.
   .lg 를 flex:none 으로 두면 우측 메뉴 버튼이 대신 0폭까지 찌그러진다. */
.lg{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.lg__t{min-width:0;overflow:hidden}
.lg__t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg__t b{display:block;font-size:16px;font-weight:900;letter-spacing:-.05em;line-height:1.05}
.lg__t em{display:block;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-45);line-height:1.4}

/* 메뉴 묶음이 우측(SNS·MENU) 블록을 밀지 않도록 줄어들 수 있게 둔다.
   overflow 는 절대 쓰지 말 것 — 드롭다운 패널이 통째로 잘린다. */
.gnb{margin-left:auto;min-width:0;flex:0 1 auto}
.gnb__l{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(4px,1.1vw,22px)}
.gnb__i > a{
  position:relative;display:block;padding:10px clamp(6px,0.8vw,14px);white-space:nowrap;
  font-size:clamp(15px,1.15vw,19px);font-weight:800;letter-spacing:-.032em;
}
.gnb__i > a span{position:relative;display:block}
.gnb__i > a span::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ez);
}
.gnb__i:hover > a span::after,.gnb__i.on > a span::after{transform:scaleX(1);transform-origin:left}
.gnb__i.on > a span::after{background:var(--grad)}

/* 메뉴마다 자기 자리 아래로 떨어지는 세로 드롭다운.
   전폭 가로 띠가 아니라 개별 패널이므로 .gnb__i 를 기준 상자로 잡는다. */
.gnb__i{position:relative}
.gnb__d{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:max-content;
  background:var(--ink);color:var(--yl);border-radius:16px;
  box-shadow:0 18px 40px rgba(10,10,10,.28);
  padding:10px 0;margin-top:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ez),transform .34s var(--ez),visibility .28s;
}
/* 메뉴와 패널 사이 빈틈에서 마우스가 빠지지 않도록 다리를 놓는다 */
.gnb__d::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.gnb__i:hover .gnb__d,.gnb__i:focus-within .gnb__d{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.gnb__d ul{display:flex;flex-direction:column;gap:0;padding:0 8px}
.gnb__d li{opacity:0;transform:translateY(8px);transition:opacity .34s var(--ez),transform .34s var(--ez);transition-delay:calc(.04s + var(--i) * 38ms)}
.gnb__i:hover .gnb__d li,.gnb__i:focus-within .gnb__d li{opacity:1;transform:none}
.gnb__d a{display:block;padding:10px 18px;border-radius:10px;white-space:nowrap;transition:background-color .22s}
.gnb__d a:hover,.gnb__d a:focus-visible{background:rgba(245,251,32,.08)}
.gnb__d b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.03em;transition:color .25s}
/* 오른쪽 끝 메뉴는 패널이 화면 밖으로 나가지 않도록 오른쪽 정렬 */
.gnb__l > .gnb__i:last-child .gnb__d{left:auto;right:0;transform:translateX(0) translateY(-6px)}
.gnb__l > .gnb__i:last-child:hover .gnb__d,
.gnb__l > .gnb__i:last-child:focus-within .gnb__d{transform:translateX(0) translateY(0)}
.gnb__d a:hover b,.gnb__d a.on b{
  color:transparent;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* 헤더 배경이 투명한 동안 글자를 노랑으로 뒤집는다.
   ① 검정 히어로 페이지 ② 전체 메뉴 오버레이가 열린 상태(검정 위에 헤더가 얹힌다) */
body.hero-dark .hd:not(.solid),
body.nav-open  .hd:not(.solid){color:var(--yl)}
body.hero-dark .hd:not(.solid) .lg__t em,
body.nav-open  .hd:not(.solid) .lg__t em{color:rgba(245,251,32,.5)}
body.hero-dark .hd:not(.solid) .bg__ln i,
body.nav-open  .hd:not(.solid) .bg__ln i{background:var(--yl)}
body.hero-dark .hd:not(.solid) .gnb__i > a span::after,
body.nav-open  .hd:not(.solid) .gnb__i > a span::after{background:var(--yl)}
body.hero-dark .hd:not(.solid) .hsns a:hover,
body.nav-open  .hd:not(.solid) .hsns a:hover{background:var(--yl);color:var(--ink)}
body.hero-dark .hd:not(.solid) .hd__prog,
body.nav-open  .hd:not(.solid) .hd__prog{opacity:.85}
/* 포커스 링도 검정 위에서는 보이지 않으므로 같이 뒤집는다 */
.ov :focus-visible,
body.nav-open .hd :focus-visible{outline-color:var(--yl)}

/* 우측 컨트롤(햄버거·SNS)은 어떤 폭에서도 찌그러지지 않는다 */
.hd__r{display:flex;align-items:center;gap:14px;margin-left:8px;flex:none}
.hsns{display:flex;gap:4px}
.hsns a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background-color .26s,transform .26s var(--ez)}
.hsns svg{width:21px;height:21px}
.hsns a:hover{background:var(--ink);color:var(--yl);transform:translateY(-2px)}

.bg{display:flex;align-items:center;gap:9px;height:40px;padding:0 6px}
.bg__ln,.bg__tx{flex:none}
.bg__ln{position:relative;display:block;width:26px;height:14px}
.bg__ln i{position:absolute;left:0;right:0;height:2.6px;border-radius:2px;background:var(--ink);transition:transform .44s var(--ez),width .44s var(--ez)}
.bg__ln i:nth-child(1){top:0}
.bg__ln i:nth-child(2){bottom:0;width:70%}
.bg:hover .bg__ln i:nth-child(2){width:100%}
.bg__tx{position:relative;display:block;height:15px;overflow:hidden;width:52px}
.bg__tx em{display:block;font-style:normal;font-size:13px;font-weight:900;letter-spacing:.12em;line-height:15px;transition:transform .42s var(--ez)}
body.nav-open .bg__tx em{transform:translateY(-13px)}
body.nav-open .bg__ln i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .bg__ln i:nth-child(2){width:100%;transform:translateY(-5.4px) rotate(-45deg)}
@media (max-width:1300px){.gnb{display:none}.hd__r{margin-left:auto}}
/* 초협소 화면 — 로고 말줄임만으로 부족한 구간에서 SNS 아이콘을 회수한다.
   (같은 링크가 전체 메뉴 .ov__sns 와 푸터 .ft__sns 에 그대로 남는다) */
@media (max-width:430px){
  .hd__in{gap:12px}
  .hsns{display:none}
}

/* ══════════════════════════════════════════════════════════
   전체 메뉴 오버레이
   ══════════════════════════════════════════════════════════ */
.ov{position:fixed;inset:0;z-index:999;background:var(--ink);color:var(--yl);overflow-y:auto;overscroll-behavior:contain}
.ov[hidden]{display:none}
/* 전체 메뉴 배경 — CSS 원형 블롭 대신 실제 젤리 아트워크를 쓴다 */
.ov__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ov__kv{
  /* 메뉴 네 열 아래로 내려 앉힌다 — 위쪽에 두면 "오시는 길" 열과 겹쳐 글자가 묻힌다 */
  position:absolute;top:34vh;right:0;
  width:min(46%,660px);aspect-ratio:1700/1840;height:auto;max-height:min(56svh,560px);
  object-fit:contain;object-position:right top;opacity:.78;
  animation:ovKv 24s ease-in-out infinite alternate;
}
@keyframes ovKv{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-2%,2%,0) rotate(2deg)}}
html.rm .ov__kv{animation:none}
@media (max-width:760px){.ov__kv{width:min(70%,340px);max-height:32svh;opacity:.5}}
@keyframes blob{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(9vmin,-7vmin,0) scale(1.18)}
  100%{transform:translate3d(-6vmin,10vmin,0) scale(.88)}
}
.ov__in{position:relative;z-index:2;min-height:100%;max-width:var(--wrap);margin:0 auto;padding:calc(var(--hdh) + 40px) var(--gut) 52px;display:flex;flex-direction:column}
.ov__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(30px,3.4vw,54px);flex:1}
.ov__g{opacity:0;transform:translateY(30px)}
body.nav-open .ov__g{opacity:1;transform:none;transition:opacity .66s var(--ez) calc(.1s + var(--i)*.07s),transform .66s var(--ez) calc(.1s + var(--i)*.07s)}
.ov__gt{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid rgba(245,251,32,.24)}
.ov__en{font-size:10.5px;font-weight:800;letter-spacing:.24em;color:rgba(245,251,32,.5)}
.ov__h{
  position:relative;display:inline-block;font-size:clamp(22px,2.5vw,32px);font-weight:900;letter-spacing:-.04em;line-height:1.1;
}
.ov__h::after{
  content:attr(data-txt);position:absolute;left:0;top:0;width:0;overflow:hidden;white-space:nowrap;
  color:transparent;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:width .48s var(--ez);
}
.ov__h:hover::after{width:100%}
.ov__s li a{display:inline-block;padding:7px 0;font-size:16px;font-weight:600;color:rgba(245,251,32,.72);transition:color .24s,transform .34s var(--ez)}
.ov__s li a:hover{color:var(--yl);transform:translateX(7px)}

.ov__ft{margin-top:54px;padding-top:26px;border-top:2px solid rgba(245,251,32,.24);display:flex;flex-wrap:wrap;gap:22px 48px;justify-content:space-between;align-items:flex-end}
.ov__info{display:flex;flex-wrap:wrap;gap:8px 34px}
.ov__info div{display:flex;gap:10px;align-items:baseline}
.ov__info dt{font-size:11px;font-weight:800;letter-spacing:.14em;color:rgba(245,251,32,.5)}
.ov__info dd{font-size:14.5px;font-weight:700}
.ov__sns{display:flex;flex-wrap:wrap;gap:6px 22px}
.ov__sns a{font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(245,251,32,.66);transition:color .22s}
.ov__sns a:hover{color:var(--yl)}

/* ══════════════════════════════════════════════════════════
   공통 카드 / 태그 / 표
   ══════════════════════════════════════════════════════════ */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li,.tag{
  display:inline-block;padding:7px 15px;border-radius:99px;border:2px solid var(--ink);
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.3;
}
.tag--fill{background:var(--ink);color:var(--yl);border-color:var(--ink)}
.tag--grad{background:var(--grad);color:#fff;border-color:transparent}

.card{
  position:relative;display:block;padding:28px;border-radius:var(--r-lg);
  background:var(--pp);border:2.5px solid var(--ink);overflow:hidden;isolation:isolate;
  transition:transform .48s var(--ez),box-shadow .48s var(--ez);
}
.card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ez);
}
.card:hover{transform:translateY(-8px);box-shadow:10px 14px 0 var(--ink)}
.card:hover::after{transform:scaleX(1)}

.tbl{width:100%;border-top:3px solid var(--ink)}
.tbl th,.tbl td{padding:16px 14px;border-bottom:1.5px solid var(--ink-14);text-align:left;font-size:15px;vertical-align:top}
.tbl th{font-weight:800;white-space:nowrap;letter-spacing:-.02em}
/* 표 머리글은 전부 가운데 정렬. 본문 칸은 읽는 흐름대로 왼쪽을 그대로 둔다. */
.tbl thead th{background:var(--ink);color:var(--yl);border-bottom:0;text-align:center}
.tbl tbody tr{transition:background-color .24s}
.tbl tbody tr:hover{background:rgba(10,10,10,.045)}
.tbl .t-time{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap;width:1%}

.note{
  margin-top:20px;padding:16px 20px;border-radius:14px;background:rgba(10,10,10,.06);
  font-size:13.5px;line-height:1.7;color:var(--ink-70);
}
.note b{font-weight:800;color:var(--ink)}

/* TBD 블록 — 확정 전 정보 자리 */
.tbd{
  position:relative;display:grid;place-items:center;gap:10px;text-align:center;
  min-height:190px;padding:32px;border-radius:var(--r-lg);
  border:2.5px dashed rgba(10,10,10,.28);background:rgba(255,255,255,.4);
}
/* 흰 배경 위에 놓이므로 밝은 5색 그라디언트는 읽히지 않는다 → 어두운 판 사용 */
.tbd b{font-size:clamp(20px,2.2vw,28px);font-weight:900;letter-spacing:-.03em;background-image:var(--grad-lt);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.blk--ink .tbd b{background-image:var(--grad)}
.tbd span{font-size:13.5px;color:var(--ink-45);font-weight:600}

/* ══════════════════════════════════════════════════════════
   공지 리스트 (홈 · 공지사항 목록 공용)
   ══════════════════════════════════════════════════════════ */
.nlist{border-top:3px solid var(--ink)}
.nlist li{border-bottom:1.5px solid var(--ink-14)}
.nlist a{
  position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:10px clamp(14px,2vw,30px);padding:24px 12px;transition:padding .4s var(--ez);
}
.nlist a::before{content:"";position:absolute;left:0;bottom:-1.5px;height:3px;width:0;background:var(--grad);transition:width .5s var(--ez)}
.nlist a:hover{padding-inline:22px 12px}
.nlist a:hover::before{width:100%}
.nlist__c{font-size:11px;font-weight:900;letter-spacing:.06em;padding:5px 12px;border-radius:99px;border:2px solid var(--ink);white-space:nowrap}
.nlist__c.is-pin{background:var(--ink);color:var(--yl)}
.nlist__t{font-size:clamp(15px,1.7vw,21px);font-weight:800;letter-spacing:-.035em;line-height:1.4}
.nlist__d{font-size:13px;font-weight:700;color:var(--ink-45);font-variant-numeric:tabular-nums;white-space:nowrap}
.nlist__a{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink-14);display:grid;place-items:center;transition:background-color .3s,color .3s,border-color .3s,transform .4s var(--ez)}
.nlist__a svg{width:14px}
.nlist a:hover .nlist__a{background:var(--ink);color:var(--yl);border-color:var(--ink);transform:rotate(-45deg)}
@media (max-width:760px){
  .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}
}

/* ══════════════════════════════════════════════════════════
   마퀴
   ══════════════════════════════════════════════════════════ */
.mq{overflow:hidden;border-block:3px solid var(--ink);background:var(--ink);color:var(--yl);padding-block:14px}
.mq__t{display:flex;width:max-content;will-change:transform}
.mq__t span{
  display:inline-flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;
  font-size:clamp(18px,2.4vw,34px);font-weight:900;letter-spacing:-.03em;
}
.mq__t span::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--grad);flex:none}
/* 노랑 배경 마퀴 — 글자는 먹으로 꽉 채워 대비를 확보한다.
   (외곽선 처리는 color:transparent 와 currentColor 가 맞물려 글자가 아예 사라져서 걷어냄) */
.mq--yl{background:var(--yl);color:var(--ink)}
.mq--yl .mq__t span{color:var(--ink);-webkit-text-stroke:0}

/* ══════════════════════════════════════════════════════════
   클로징 + 푸터
   ══════════════════════════════════════════════════════════ */
.end{position:relative;overflow:hidden;background:var(--ink);color:var(--yl);padding-block:clamp(90px,11vw,170px)}
.end__tube{position:absolute;inset:-18% -8%;opacity:.5;pointer-events:none}
.end__tube svg{width:100%;height:100%}
/* 튜브 위에서도 문구가 읽히도록 가운데를 살짝 어둡게 */
.end::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 52% at 50% 46%,rgba(10,10,10,.82) 0%,rgba(10,10,10,.52) 55%,transparent 100%);
}
.endp{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.4s var(--ez) forwards}
.endp--2{animation-delay:.34s}
@keyframes draw{to{stroke-dashoffset:0}}
.end__in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);text-align:center}
.end .eyeb{color:var(--yl)}
.end__t{font-size:clamp(38px,7.6vw,110px);font-weight:900;line-height:.94;letter-spacing:-.048em;margin-top:18px}
.end__d{margin-top:22px;font-size:clamp(14px,1.5vw,19px);font-weight:700;letter-spacing:-.01em;color:rgba(245,251,32,.72)}
.end__d i{font-style:normal;font-size:.7em;letter-spacing:.1em;opacity:.7;margin-inline:2px}
.end__b{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.end .btn{border-color:var(--yl);color:var(--yl)}
.end .btn::before{background:var(--yl)}
.end .btn:hover{color:var(--ink)}
.end .btn--fill{background:var(--yl);color:var(--ink)}
.end .btn--fill::before{background:var(--grad)}
.end .btn--fill:hover{color:#fff}

.ft{position:relative;background:var(--ink);color:rgba(245,251,32,.78);padding-block:clamp(46px,5vw,72px) 34px;border-top:2px solid rgba(245,251,32,.18)}
.ft__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
/* 로고 | 메뉴 2단. flex 로 두면 .ft__nav 의 가용 폭이 불확정이 되어
   repeat(auto-fit,…) 이 1열로 계산되고, 메뉴 전체가 오른쪽 한 줄로 쏠린다. */
.ft__top{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.ft__lg b{display:block;font-size:22px;font-weight:900;letter-spacing:-.045em;color:var(--yl)}
.ft__lg em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(245,251,32,.45);margin-top:5px}
/* 1fr 트랙 안이라 폭이 확정되므로 auto-fit 이 실제로 열을 나눈다 */
.ft__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:26px 30px}
.ft__col p{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--yl);margin-bottom:10px}
.ft__col li a{display:inline-block;padding:4px 0;font-size:13.5px;transition:color .22s,transform .3s var(--ez)}
.ft__col li a:hover{color:var(--yl);transform:translateX(4px)}
.ft__bot{margin-top:46px;padding-top:24px;border-top:1.5px solid rgba(245,251,32,.18);display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.ft__meta{display:flex;flex-wrap:wrap;gap:8px 28px}
.ft__meta div{display:flex;gap:9px;align-items:baseline}
.ft__meta dt{font-size:11px;font-weight:800;letter-spacing:.12em;color:rgba(245,251,32,.45)}
.ft__meta dd{font-size:14px;font-weight:700;color:var(--yl)}
/* 주최·주관 기관 CI — 흰 글자 원본이라 어두운 푸터에서만 쓴다 */
.ft__ci{display:block;opacity:.85;transition:opacity .25s}
.ft__ci:hover{opacity:1}
.ft__ci img{height:26px;width:auto}
.ft__sns{display:flex;gap:18px}
.ft__sns a{font-size:12.5px;font-weight:800;letter-spacing:.06em}
.ft__sns a:hover{color:var(--yl)}
.ft__cp{width:100%;font-size:12px;color:rgba(245,251,32,.4);letter-spacing:.01em}

.totop{
  position:fixed;right:clamp(16px,2.6vw,36px);bottom:clamp(16px,2.6vw,36px);z-index:900;
  width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--yl);
  display:grid;place-items:center;border:2.5px solid var(--yl);
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .4s var(--ez),transform .4s var(--ez),background-color .3s;
}
.totop svg{width:20px}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--grad);border-color:transparent;color:#fff}

/* 태블릿 이하 — 로고를 위로 빼고 메뉴가 전폭을 쓰게 한다.
   (.ft__top 기본 규칙보다 뒤에 있어야 캐스케이드에서 이긴다) */
@media (max-width:1000px){
  .ft__top{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  :root{--hdh:64px}
  .lg__t em{display:none}
  .ft__top{gap:30px}
  .ft__nav{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px}
  .btn{height:52px;padding:0 24px;font-size:14px}
}

/* ══════════════════════════════════════════════════════════
   모션 최소화 설정 존중
   앞에서 쓴 animation 단축 지정을 확실히 덮도록 파일 맨 끝에 모은다.
   ══════════════════════════════════════════════════════════ */
html.rm .intro__en,
html.rm .intro__ko em,
html.rm .intro__date{animation:none;opacity:1;transform:none}
html.rm .ov__bg b,
html.rm .totop,
html.rm .hbar__dd strong{animation:none}
html.rm .endp{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
html.rm .wipe{display:none}

/* ── 포스터 아래 주최 · 주관 ────────────────────────────────
   포스터 아트워크 안에도 CI 가 인쇄돼 있지만 젤리 배경 위라
   성남문화재단 CI 가 거의 안 읽힌다는 의견이 있었다(261006).
   원본 아트워크는 그대로 두고, 흰 바탕에 또렷한 CI 를 따로 얹는다. */
.pocredit{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px clamp(20px,2.6vw,38px);
  margin:clamp(16px,1.8vw,24px) 0 0;padding-top:clamp(14px,1.6vw,20px);
  border-top:1.5px solid var(--ink-14);
}
.pocredit__i{display:flex;align-items:center;gap:10px}
.pocredit__i em{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--ink-45);white-space:nowrap;
}
.pocredit__i img{height:26px;width:auto;display:block}
@media (max-width:420px){
  .pocredit{gap:12px 18px}
  .pocredit__i img{height:22px}
}