:root{
  --ivory:#F9F6F0; --paper:#F1ECE2; --ink:#2B2B2B; --ink-soft:#5A544D;
  --brown:#5B3A29; --coral:#E8836B; --coral-text:#A8452F;
  --night:#1E1C1A; --night-soft:#B9B2A8;
  --serif:"Noto Serif KR","KoPub Batang","Source Han Serif K",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --gut:clamp(16px,5vw,88px);
  --gap:clamp(96px,14vw,200px);
  --ease:cubic-bezier(.16,1,.3,1);
}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:#BDB4A6 var(--ivory)}
body{background:var(--ivory);color:var(--ink);font:400 1.0625rem/1.85 var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
/* 한지 결 */
body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23h)'/%3E%3C/svg%3E")}
::selection{background:var(--coral);color:#fff}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.28em}
cite{font-style:normal;font-family:var(--serif);font-weight:500}
:focus-visible{outline:2px solid var(--coral-text);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance}
h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.32;letter-spacing:-.02em}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--ink);color:var(--ivory);padding:8px 16px;border-radius:6px}
.skip:focus{top:16px}

/* 세로 낙관과 상단 메뉴 */
.seal{position:absolute;left:clamp(16px,4vw,64px);top:clamp(20px,3vw,36px);z-index:30;writing-mode:vertical-rl;font:500 clamp(1.5rem,2.2vw,2.1rem)/1 var(--serif);letter-spacing:.14em;text-decoration:none}
.bar{position:absolute;top:clamp(12px,2vw,24px);right:var(--gut);z-index:40;display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:6px clamp(14px,2vw,28px)}
/* 스크롤하면 불투명한 상단 띠로 바뀌어 본문과 겹치지 않는다 */
.bar.on{position:fixed;top:0;left:0;right:0;justify-content:space-between;padding:6px var(--gut);background:var(--ivory);border-bottom:1px solid #DDD5C7;animation:barIn .45s var(--ease)}
@keyframes barIn{from{transform:translateY(-100%)}to{transform:none}}
.bar-name{display:none;font:600 1.1rem var(--serif);letter-spacing:.1em;text-decoration:none}
.bar.on .bar-name{display:block}
.bar-name{white-space:nowrap}
.bar-title{margin-left:12px;font:500 .9375rem var(--serif);letter-spacing:.02em;color:var(--ink)}
.bar nav{display:flex;gap:clamp(4px,1.4vw,20px)}
.bar nav a{position:relative;padding:12px 10px;font-size:1rem;font-weight:500;line-height:1.2;text-decoration:none;transition:color .3s}
.bar nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.bar nav a:hover,.bar nav a.cur{color:var(--coral-text)}
.bar nav a.cur::after,.bar nav a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;font:inherit;color:inherit;padding:10px 4px;cursor:pointer}

.seal-title{display:block;margin-left:clamp(10px,1vw,14px);padding-top:.3em;font:500 clamp(.9rem,1.05vw,1rem)/1.2 var(--serif);letter-spacing:.1em;color:var(--ink)}
.seal-name{display:block}

/* 첫 화면 */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:clamp(84px,12.5vh,130px) var(--gut) 18px;text-align:center;overflow:hidden}
.hero h1{font-size:clamp(1.95rem,min(4.1vw,7vh),4.2rem);line-height:1.34;letter-spacing:-.015em}
.ln{display:block}
.who{display:block;margin-top:.5em;font:500 clamp(1.3rem,2vw,1.8rem)/1.4 var(--sans);letter-spacing:.04em;color:var(--coral-text)}
.dancer{flex:1 1 0;min-height:280px;width:100%;display:flex;justify-content:center;margin-top:clamp(4px,1.5vh,20px)}
.fig{position:relative;height:100%;max-height:60vh}
.fig img{position:relative;height:100%;width:auto;max-width:100%;object-fit:contain;transform-origin:68% 96%}
.cue{margin-top:clamp(14px,2.6vh,28px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 16px;font:400 .95rem/1.2 var(--serif);text-decoration:none;color:var(--ink-soft)}

/* 소개 */
.essence{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,8vw,130px);align-items:center;max-width:calc(1240px + 2*var(--gut));margin:var(--gap) auto 0;padding:0 var(--gut)}
.portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;background:#2C2925}
figcaption{font-size:.875rem;line-height:1.6;color:var(--ink-soft)}
.portrait figcaption{margin-top:12px}
.essay h2{margin-bottom:.9em}
.essay>p{max-width:34em;margin-bottom:1.1em}
.facts{margin-top:clamp(28px,4vw,48px);border-top:1px solid #CFC6B7}
.facts div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #E0D9CC;font-size:1rem;line-height:1.7}
.facts dt{font-family:var(--serif);color:var(--brown)}
.facts dd{margin:0}

/* 무대: 스크롤하면 창이 무대 전체로 열린다 */
.stage{height:170vh;margin-top:var(--gap)}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-frame{position:absolute;inset:0;background:var(--night);clip-path:inset(var(--iy,0%) var(--ix,0%))}
.stage-frame video{width:100%;height:100%;object-fit:cover}
.stage-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,16,.72),rgba(10,10,16,0) 52%)}
.stage-copy{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(32px,8vh,84px);color:#FBF8F2;opacity:var(--co,1);transform:translateY(var(--cy,0))}
.stage-toggle{position:absolute;right:var(--gut);bottom:clamp(32px,8vh,84px);width:44px;height:44px;display:grid;place-items:center;color:#FBF8F2;background:rgba(20,18,16,.45);border:1px solid rgba(251,248,242,.5);border-radius:50%;cursor:pointer;opacity:var(--co,1)}
.stage-toggle:focus-visible{outline-color:#FBF8F2}
.stage-copy{padding-right:60px}
.stage-copy p{margin-top:.8em;line-height:1.7}

/* 작품 */
.works{max-width:calc(1240px + 2*var(--gut));margin:var(--gap) auto 0;padding:0 var(--gut)}
.works>h2{margin-bottom:clamp(40px,6vw,80px)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.8vw,28px);row-gap:clamp(28px,6vw,96px);align-items:start}
.w{margin:0;outline-offset:4px}
.w img{width:100%;height:auto;object-fit:cover;filter:saturate(.88) brightness(1.14);transition:filter .6s}
.w:hover img,.w:focus-visible img{filter:saturate(1) brightness(1.14)}
.w1{grid-column:1/8}.w1 img{aspect-ratio:4/3}
.w2{grid-column:9/13;margin-top:clamp(40px,9vw,140px)}.w2 img{aspect-ratio:4/5}
.w3{grid-column:1/9}.w3 img{aspect-ratio:2/1}
.w4{grid-column:10/13;margin-top:clamp(24px,5vw,72px)}.w4 img{aspect-ratio:3/4}
.w5{grid-column:2/6}.w5 img{aspect-ratio:4/5}
.w6{grid-column:6/13;margin-top:clamp(40px,8vw,120px)}.w6 img{aspect-ratio:16/9}
.w figcaption{padding-top:12px;color:var(--ink)}
.w b{display:block;font:500 clamp(1.3rem,2vw,1.8rem)/1.35 var(--serif)}
.w i{display:block;font-style:normal;font-size:.875rem;margin-bottom:.3em;font-variant-numeric:tabular-nums}
.w span{display:block;font-size:.95rem;line-height:1.6;max-width:32em}

.play{position:relative;display:block;width:100%;padding:0;border:0;background:var(--night);cursor:pointer;line-height:0}
.play-ico{position:absolute;left:14px;bottom:14px;width:46px;height:46px;display:grid;place-items:center;color:#FBF8F2;background:rgba(20,16,14,.68);border-radius:50%;transition:background .3s,transform .4s var(--ease)}
.play:hover .play-ico,.play:focus-visible .play-ico{background:var(--coral-text);transform:scale(1.08)}
.video-pop{margin:auto;width:min(720px,94vw,calc((100svh - 120px)*16/9));max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible}
.video-pop::backdrop{background:rgba(15,13,12,.9)}
.video-frame{aspect-ratio:16/9;background:#000}
.video-frame iframe{display:block;width:100%;height:100%;border:0}
.video-close{position:absolute;right:0;top:-48px;width:44px;height:44px;display:grid;place-items:center;color:#FBF8F2;background:none;border:0;cursor:pointer}
.video-close:focus-visible{outline-color:#FBF8F2}
body.pop-open{overflow:hidden}
.all-videos{display:inline-block;margin-top:clamp(36px,5vw,64px)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px}

/* 일정 */
.schedule{max-width:calc(1240px + 2*var(--gut));margin:var(--gap) auto;padding:0 var(--gut)}
.schedule>h2{margin-bottom:clamp(28px,4vw,56px)}
.line{list-style:none;padding:0;border-top:1px solid var(--ink)}
.line li{display:grid;grid-template-columns:minmax(7em,1.1fr) 3fr auto;gap:clamp(12px,3vw,48px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid #D8D0C2}
.when{font:500 1.0625rem var(--serif);font-variant-numeric:tabular-nums;color:var(--brown)}
.line h3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.45}
.line p{font-size:1rem;color:var(--ink-soft);margin-top:.2em;line-height:1.65}
.next .when{color:var(--coral-text)}
.btn{display:inline-block;padding:13px 26px;background:var(--ink);color:var(--ivory);border-radius:4px;text-decoration:none;white-space:nowrap;line-height:1.3;transition:background .3s}
.btn:hover{background:var(--brown)}
.more{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--coral)}
.more:hover{color:var(--coral-text)}

/* 신청 문의 */
.ask{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:start;max-width:calc(1240px + 2*var(--gut));margin:0 auto var(--gap);padding:0 var(--gut)}
.ask-head h2{font-size:clamp(1.9rem,2.8vw,2.5rem);text-wrap:wrap}
.ask-head p{margin-top:1em;max-width:26em;color:var(--ink-soft)}
.ask-form,.ask-done{display:grid;gap:clamp(22px,2.6vw,32px)}
.ask-done[hidden],.ask-form[hidden]{display:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,32px)}
.field{border:0;padding:0;min-width:0}
.field>label,.field>legend{display:block;padding:0;margin-bottom:6px;font:500 1rem/1.5 var(--serif);color:var(--brown)}
.opt{font:400 .875rem var(--sans);color:var(--ink-soft)}
.ask input:not([type=radio],[type=checkbox]),.ask select,.ask textarea{width:100%;padding:11px 2px;font:400 1rem/1.6 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid #8F8678;border-radius:0;transition:border-color .3s}
.ask textarea{resize:vertical}
.ask select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B3A29' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:24px}
.ask ::placeholder{color:#6F675D}
.ask input:not([type=radio],[type=checkbox]):focus,.ask select:focus,.ask textarea:focus{outline:0;border-bottom:2px solid var(--coral-text);padding-bottom:10px}
.ask [aria-invalid=true]{border-bottom-color:var(--coral-text)!important}
.choices{display:flex;flex-wrap:wrap;gap:8px 28px}
.choices label,.agree{display:flex;gap:9px;align-items:flex-start;cursor:pointer;line-height:1.6;min-height:28px}
.agree{font-size:.95rem;color:var(--ink-soft)}
.ask input[type=radio],.ask input[type=checkbox]{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:var(--coral-text)}
.err{margin-top:6px;font-size:.9rem;line-height:1.5;color:var(--coral-text)}
.err:empty{display:none}
.ask .btn{justify-self:start;border:0;font:inherit;cursor:pointer}
.ask-done h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.ask-done:focus{outline:0}
.more-btn{background:none;border:0;padding:8px 0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:.28em}
.more-btn:hover{color:var(--coral-text)}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.send-err a{color:inherit}
.ask .btn:disabled{opacity:.6;cursor:wait}
.ask-done .more-btn{justify-self:start}
footer .foot-main a{color:inherit}

/* 푸터 */
footer{background:var(--night);color:#F3EEE5;padding:clamp(64px,9vw,128px) var(--gut) 28px}
footer :focus-visible{outline-color:var(--coral)}
.foot-main{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;max-width:1240px;margin:auto}
.foot-main p{margin-top:.8em;color:var(--night-soft)}
.fb{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border:1px solid #6B655D;border-radius:4px;text-decoration:none;line-height:1.3;transition:border-color .3s,color .3s}
.fb:hover{border-color:var(--coral);color:var(--coral)}
.copy{max-width:1240px;margin:clamp(48px,7vw,96px) auto 0;padding-top:18px;border-top:1px solid #3A3631;font-size:.875rem;color:var(--night-soft)}

/* 움직임은 스크립트가 켤 때만. 꺼져 있으면 모두 보인다 */
.mo .ln{animation:fog 1.8s var(--ease) both}
.mo .ln:nth-child(2){animation-delay:.25s}
.mo .who{animation:whoFade 6s ease-in-out .6s infinite both}
.mo .fig img{animation:fog 2.4s var(--ease) .35s both,breath 8s ease-in-out 2.8s infinite}
.mo .cue svg{animation:drift 3.2s ease-in-out infinite}
.mo .rise{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.mo .rise.in{opacity:1;transform:none}
@keyframes fog{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes whoFade{0%{opacity:0;filter:blur(6px)}30%,80%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(6px)}}
@keyframes breath{50%{transform:scale(1.014)}}
@keyframes drift{50%{transform:translateY(6px)}}

@media (max-width:860px){
  .bar{right:12px;justify-content:space-between;flex-wrap:wrap;padding:4px 16px}
  .bar.on{padding:4px 16px}
  .bar-title{margin-left:8px;font-size:.75rem;letter-spacing:0}
  .bar.open{left:0;right:0;background:var(--ivory);border-bottom:1px solid #DDD5C7}
  .bar.open:not(.on){top:0}
  .bar.open .bar-name{display:block}
  .seal{font-size:1.35rem;left:18px;top:18px;writing-mode:horizontal-tb;display:flex;align-items:flex-start;gap:10px}
  .seal-name{order:1;writing-mode:vertical-rl}
  .seal-title{order:2;margin:0;padding-top:3px;font-size:.8125rem;letter-spacing:.02em;white-space:nowrap}
  .menu-btn{display:block}
  .bar nav{display:none;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:8px}
  .bar.open nav{display:flex}
  .bar nav a::after{display:none}
  .essence,.ask,.two{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .stage{height:150vh}
  .hero{justify-content:space-evenly;gap:12px;padding-top:88px}
  .dancer{flex:0 0 auto;min-height:0;margin:0}
  .fig{height:auto;max-height:none}
  .fig img{width:min(100%,47svh);height:auto}
  .gallery{row-gap:32px;grid-auto-flow:dense}
  .w1,.w3,.w6{grid-column:1/-1;margin:0}
  .w2,.w4{grid-column:span 6;margin:0}
  .w2 img,.w4 img{aspect-ratio:3/4}
  .w5{grid-column:3/11}
  .line li{grid-template-columns:1fr;gap:8px}
  .line li>a{justify-self:start;margin-top:8px}
}
@media (max-width:339px){.bar{gap:8px}.bar-title{font-size:.6875rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}@view-transition{navigation:none}.stage{height:auto}.stage-pin{position:relative}}