:root{--y:#ffd23f;--k:#0a0a0a;--g:#1a1a1a;--w:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:var(--k);color:var(--w);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.bar{background:var(--y);color:var(--k);text-align:center;font-weight:800;font-size:13px;letter-spacing:.18em;padding:10px 12px}
.bar a{text-decoration:underline}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 48px;position:sticky;top:0;z-index:20;background:rgba(10,10,10,.92);backdrop-filter:blur(8px)}
.logo{font-weight:900;font-style:italic;font-size:38px;letter-spacing:-.03em;color:var(--y)}
.menu{display:flex;gap:34px}
.menu a{font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.menu a:hover{color:var(--y)}
.hero{position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero img{position:absolute;inset:0;filter:brightness(.42) contrast(1.05)}
.hero .in{position:relative;padding:40px 24px}
.hero small{display:block;letter-spacing:.4em;font-size:13px;color:var(--y);font-weight:700;margin-bottom:18px}
.huge{font-weight:900;font-size:clamp(54px,12.5vw,190px);line-height:.95;letter-spacing:-.065em}
.huge em{font-style:normal;color:var(--y)}
.cta{display:inline-block;margin-top:38px;background:var(--y);color:var(--k);font-weight:900;padding:16px 34px;letter-spacing:.14em;font-size:14px}
.ticker{overflow:hidden;background:var(--y);color:var(--k);padding:14px 0;white-space:nowrap}
.ticker div{display:inline-block;animation:t 40s linear infinite}
.ticker span{font-size:26px;font-weight:900;font-style:italic;margin:0 28px;text-transform:uppercase}
.ticker span::after{content:"/";margin-left:56px}
@keyframes t{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}
.sec{padding:110px 48px 20px}
.label{letter-spacing:.4em;font-size:12px;color:var(--y);font-weight:800}
.title{font-weight:900;font-size:clamp(64px,13vw,200px);line-height:.92;letter-spacing:-.07em;margin:8px 0 38px}
.title i{font-style:normal;-webkit-text-stroke:2px var(--w);color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--g)}
.card img{transition:transform .6s,filter .3s;filter:brightness(.75)}
.card:hover img{transform:scale(1.05);filter:brightness(1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.85))}
.cap{position:absolute;left:30px;bottom:26px;z-index:2}
.cap small{color:var(--y);letter-spacing:.3em;font-size:11px;font-weight:800}
.cap h3{font-size:clamp(30px,3.6vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.1}
.cap p{opacity:.8;font-size:15px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.strip div{aspect-ratio:3/2;overflow:hidden}
.strip img{filter:brightness(.8)}
.edu{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.edu .pic{aspect-ratio:3/2;overflow:hidden}
.edu .box{background:var(--y);color:var(--k);padding:36px;display:flex;flex-direction:column;justify-content:space-between}
.edu h3{font-size:clamp(34px,4.4vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1}
.edu b{font-size:26px}
.edu a.b{align-self:flex-start;background:var(--k);color:var(--y);padding:12px 22px;font-weight:800;font-size:14px;letter-spacing:.1em}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.about .pic{aspect-ratio:3/2;overflow:hidden}
.about p{font-size:19px;max-width:440px;margin-bottom:24px;opacity:.9}
.about ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.about li a{display:block;border:2px solid var(--y);color:var(--y);padding:8px 16px;font-weight:800;font-size:14px}
.about li a:hover{background:var(--y);color:var(--k)}
.contact{padding:130px 48px 70px;text-align:center}
.contact .tel{display:block;font-weight:900;font-size:clamp(52px,12vw,180px);letter-spacing:-.06em;line-height:1;color:var(--y)}
.contact dl{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:34px}
.contact dt{font-size:12px;letter-spacing:.3em;opacity:.6}
.contact dd{font-size:18px;font-weight:700}
.foot{padding:40px 48px 60px;font-size:13px;line-height:1.9;opacity:.6;border-top:1px solid #333}
@media(max-width:860px){
 .nav{padding:14px 18px}.logo{font-size:26px}.menu{gap:14px}.menu a{font-size:11px;letter-spacing:.06em}
 .sec{padding:70px 18px 10px}
 .two,.edu,.about{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}
 .about{gap:24px}.contact{padding:80px 18px 40px}.foot{padding:30px 18px 50px}
}
/* 공연 중심 재편 */
.show{display:grid;grid-template-columns:2fr 1fr;gap:6px;margin-bottom:6px}
.show.rev{grid-template-columns:1fr 2fr}
.show .big{aspect-ratio:auto;min-height:420px}
.poster{display:block;overflow:hidden;background:var(--g)}
.poster img{transition:transform .6s}.poster:hover img{transform:scale(1.04)}
.more{display:inline-block;margin-top:24px;border:2px solid var(--y);color:var(--y);padding:14px 26px;font-weight:900;letter-spacing:.1em}
.more:hover{background:var(--y);color:var(--k)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal div{overflow:hidden;aspect-ratio:3/2}.gal .g1{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.band{margin:110px 0 0;background:var(--y);color:var(--k);padding:70px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.band h2{font-weight:900;font-size:clamp(40px,7vw,104px);line-height:1;letter-spacing:-.06em}
.band .label{color:var(--k)}
.band .cta{background:var(--k);color:var(--y);margin:0}
@media(max-width:860px){.show,.show.rev{grid-template-columns:1fr}.show .big{min-height:300px}.show.rev .poster{order:2}.gal{grid-template-columns:1fr 1fr}.gal .g1{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}.band{padding:50px 18px;margin-top:70px}}
.poster{display:flex;align-items:center}.poster img{height:auto;object-fit:contain}
.show .big img{position:absolute;inset:0}

/* 공연 2개 사진 중심 */
.act{margin-bottom:6px}
.stage{position:relative;display:block;height:min(78vh,760px);overflow:hidden;background:var(--g)}
.stage img{position:absolute;inset:0;transition:transform .8s;filter:brightness(.85)}
.stage:hover img{transform:scale(1.03)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85))}
.stage .cap{left:40px;bottom:36px}.stage .cap h3{font-size:clamp(44px,7vw,110px);letter-spacing:-.06em}.stage .cap p{font-size:18px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.row3 div{overflow:hidden;aspect-ratio:3/2;background:#000;display:flex;align-items:center}
.row3 .po img{object-fit:contain}
.act+.act{margin-top:70px}
@media(max-width:860px){.stage{height:60vh}.stage .cap{left:18px;bottom:20px}.row3{grid-template-columns:1fr 1fr}.row3 div:first-child{grid-column:span 2}}
#twomen .row3{grid-template-columns:1fr 1fr}#twomen .row3 div:first-child{grid-column:auto}
.hero img{object-position:50% 55%}
#haku .row3 .tall{aspect-ratio:3/2}#haku .row3 .tall img{object-fit:cover;object-position:50% 40%}
.hero img{object-position:50% 22%;filter:brightness(.68) contrast(1.08) saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 60%);pointer-events:none}
.hero .in{z-index:2}

/* 메인 4장 슬라이드 (20초 순환, CSS만) */
.hero .sl{opacity:0;animation:sl 20s infinite}
.hero .s0{opacity:1}
.hero .s1{animation-delay:5s;object-position:50% 40%}.hero .s2{animation-delay:10s;object-position:50% 60%}.hero .s3{animation-delay:15s;object-position:50% 55%}
@keyframes sl{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
.hero .s0{animation-delay:0s}
@media(prefers-reduced-motion:reduce){.hero .sl{animation:none}.hero .s1,.hero .s2,.hero .s3{opacity:0}}