/* Color Shake — 공통 스타일
   기준: 티저 사이트 (Figma @1440: 본문 26px, 좌우 여백 40px, 국문 단 497px / 영문 단 565px부터) */
@font-face{
  font-family:"ABC Areal Mono";
  src:url("fonts/areal-mono.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:block;
}
@font-face{
  font-family:"YMG MuncheGothic";
  src:url("fonts/ymg-subset.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:block;
}

:root{
  --form-bg:#E1E1E4;                       /* 사전 등록 양식이 화면 가운데에 있을 때의 바탕 */
  --page:#FF6600;                          /* 페이지 바탕색 (기록마다 다름, <html style>에서 지정) */
  --ink:#000;
  --fs:clamp(15px, 1.8056vw, 31px);        /* 26px @1440 */
  --fs-s:clamp(12px, .9722vw, 16px);       /* 14px @1440 — 사진 캡션·약관 세부 */
  --land-fs:clamp(16px, 2.3611vw, 40px);
  --nav-fs:var(--fs);
  --nav-top:clamp(14px, 2.5694vw, 44px);
  --edge:40px;
  --col-gap:28px;
  --lh-ko:1.3694;                          /* Figma 108.685% × YMG 기본 행간 1.26 */
  --lh-ko-mono:1.1825;
  --lh-en:1.369;
  --line:calc(var(--fs) * var(--lh-en));
  --block:calc(var(--line) * 3);           /* 덩어리 사이 간격 (빈 줄 3개) */
  --top:max(110px, min(23vh, 16.32vw));    /* 본문 시작 235px @1440×1024 */
  --pg:12px;                               /* 사진 사이 간격 */
  --mono:"ABC Areal Mono","YMG MuncheGothic",ui-monospace,Menlo,monospace;
  --ko:"YMG MuncheGothic","ABC Areal Mono","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%;transition:background-color .9s ease}
body{
  margin:0;min-height:100vh;background:var(--page);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs);line-height:var(--lh-en);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;
  transition:background-color .9s ease;
}
html.form-on,html.form-on body{background-color:var(--form-bg)}
html.form-on{--ink:#000!important}                  /* 회색 위에서는 늘 검정 글자 (검정 바탕일 때도) */
html.arrive,html.arrive body{transition:none!important}   /* 서울 페이지에서 /rsvp/#form 으로 넘어올 때 처음부터 회색 */
/* 전시 페이지: 바탕은 #bg가 칠하고(스캐너 빛), 본문은 투명. 사전 등록 구역에서는 본문 바탕이 회색으로 덮음 */
.cyc{transition:none}
.cyc body{background-color:transparent;transition:background-color .9s ease,color .6s ease}
.cyc #bg{z-index:-1}
::selection{background:var(--ink);color:var(--page)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;letter-spacing:inherit;
  text-align:left;touch-action:manipulation;-webkit-appearance:none;appearance:none}
p,h1,h2,h3,ul,ol,figure,dl,dd{margin:0}
h1,h2,h3{font:inherit}
:focus{outline:none}
:focus-visible{outline:1px dashed currentColor;outline-offset:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.it{font-variation-settings:"slnt" -12}
/* 링크: 밑줄 없음. 영문 글자는 마우스를 올리면 살짝 기울어짐 */
a,.lnk{transition:font-variation-settings .25s ease}
@media (hover:hover){ a:hover,.lnk:hover{font-variation-settings:"slnt" -12} }
.lnk{display:inline;white-space:nowrap}

/* ---------- 상단 메뉴 ---------- */
.nav{position:absolute;z-index:30;top:var(--nav-top);left:var(--edge);right:var(--edge);
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  font-size:var(--nav-fs);line-height:1.088;white-space:nowrap;transition:color .6s ease}
.nav .r{display:flex;gap:1.1em}
.nav a,.nav button{position:relative}
.nav a::before,.nav button::before{content:"";position:absolute;inset:-12px -8px}
.lang-toggle{display:none}

/* ---------- 2단 (국문 | 영문) ---------- */
.bi,.cols{display:grid;grid-template-columns:calc((100% + 2 * var(--edge)) * .375 - var(--edge) - 3px) minmax(0,1fr);
  column-gap:var(--col-gap);align-items:start}
.bi{padding:0 var(--edge)}
.ko{font-family:var(--ko);line-height:var(--lh-ko);word-break:keep-all;overflow-wrap:break-word}
.txt p,.lines p,.dual p,.foot p{text-wrap:pretty}
.ko .mono{font-family:var(--mono);line-height:var(--lh-ko-mono)}
.en{font-family:var(--mono);line-height:var(--lh-en)}
.k,.en .k{font-family:var(--ko);word-break:keep-all}
.txt p + p{margin-top:1.369em}
.txt .hd + p,.txt h2 + p{margin-top:0}
.lines p.gap{height:1.3em}
/* 국문 속 영문·숫자 (site.js가 감쌈) */
.lat{font-family:"ABC Areal Mono",var(--ko);font-size:var(--lat-size,.94em);line-height:1;font-variant-ligatures:none;white-space:nowrap}
.lat > span{display:inline}

main{position:relative;z-index:1;padding-bottom:var(--block)}
.sec + .sec{margin-top:var(--block)}
.head{padding-top:var(--top)}
.head h1,.head .t{display:block}

/* ---------- 사진 (한 줄의 사진들은 같은 높이로) ---------- */
.ph{display:flex;gap:var(--pg);padding:0 var(--edge);align-items:flex-start;
  max-width:calc(var(--sum) * 84vh + (var(--n) - 1) * var(--pg) + 2 * var(--edge));
  max-width:calc(var(--sum) * 84svh + (var(--n) - 1) * var(--pg) + 2 * var(--edge))}
.sec.ph + .sec.ph{margin-top:calc(var(--line) * 1.2)}
.ph figure{flex:var(--r) 1 0;min-width:0}
.ph .m{position:relative;aspect-ratio:var(--ar);background:rgba(0,0,0,.07);overflow:hidden}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{font-size:var(--fs-s);line-height:1.4;margin-top:.6em;display:flex;flex-wrap:wrap;column-gap:.9em}
.ph figcaption .k{font-family:var(--ko);word-break:keep-all}

/* ---------- 캡션 블록·목록 ---------- */
.records{list-style:none;padding:0 var(--edge)}
.records li + li{margin-top:calc(var(--line) * .9)}
.records .cols{width:100%}
.records .no{display:inline-block;min-width:2.4em}
/* 번호는 왼쪽에 걸고 글줄은 모두 같은 들여쓰기에서 시작 (줄이 넘어가도 정렬 유지) */
.records .cols > .ko{position:relative;padding-left:2.4em}
.records .cols > .ko > .no.mono{position:absolute;left:0;top:0}
.records .st{white-space:nowrap}
.records .st{opacity:.55}
.records .n-en{display:none}
.pager{display:flex;justify-content:space-between;gap:1em;padding:0 var(--edge)}
.pager .next{text-align:right;margin-left:auto}

/* ---------- 하단 ---------- */
.foot{position:relative;z-index:1;padding-bottom:calc(var(--line) * 2)}
.foot .small{font-size:var(--fs-s);line-height:1.45}
.mt1{margin-top:var(--line)}
.mt2{margin-top:calc(var(--line) * 2)}

/* ---------- 구획 제목 (가는 선 + 국문 | 영문) ---------- */
.label{position:relative;padding-top:.7em;margin-bottom:calc(var(--line) * 1.1)}
.label::before{content:"";position:absolute;top:0;left:var(--edge);right:var(--edge);border-top:1px solid currentColor}
.home #about{padding-top:calc(var(--top) * .55)}
.head .label{margin-bottom:calc(var(--line) * .9)}

/* ---------- 문의 (하단) ---------- */
.foot{margin-top:calc(var(--block) * .4)}
.foot .row + .row{margin-top:.55em}
.foot .row .v p + p{margin-top:.15em}
.foot .row .k{font-family:var(--ko)}

/* ---------- 메뉴: 데스크톱은 항목이 늘 보이고, 모바일은 [Menu]로 위에서 내려오는 화면 ---------- */
.menu-btn{display:none}
.nav [aria-current="true"]{font-variation-settings:"slnt" -12}
.menu{position:fixed;inset:0;z-index:45;background:var(--page);color:var(--ink);overflow-y:auto;
  visibility:hidden;clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0);
  transition:clip-path .75s cubic-bezier(.5,0,.75,0),-webkit-clip-path .75s cubic-bezier(.5,0,.75,0),visibility 0s linear .75s}
.menu-open .menu{visibility:visible;clip-path:inset(0);-webkit-clip-path:inset(0);
  transition:clip-path .75s cubic-bezier(.5,0,.75,0),-webkit-clip-path .75s cubic-bezier(.5,0,.75,0),visibility 0s}
.menu-in{padding:calc(var(--nav-top) + 4.2em) var(--edge) 3em}
.menu-list,.menu-list ul{list-style:none;margin:0;padding:0}
.menu-list{font-size:calc(var(--fs) * 1.4);line-height:1.3}
.menu-list > li + li{margin-top:.9em}
.menu-list ul{margin:0;font-size:1em}
html:not([data-l="en"]) .menu .me,html[data-l="en"] .menu .mk{display:none}
.menu-list .no{display:inline-block;min-width:2.4em}
.menu-open body{overflow:hidden}
.menu-open .nav{z-index:46;position:fixed}
.menu-open .nav a,.menu-open .nav button{color:var(--ink)!important}

/* ---------- 알림 (화면 아래 고정) — 사전 등록 기간에는 커서가 깜빡임 ---------- */
.notice{position:fixed;z-index:35;left:var(--edge);bottom:calc(var(--edge) * .6 + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:.18em;max-width:calc(100% - 2 * var(--edge));
  background:var(--ink);color:var(--page);font-size:max(13px, calc(var(--nav-fs) * .66));line-height:1.25;
  padding:.6em .9em .7em;transition:color .6s ease,opacity .45s ease,transform .45s ease}
.notice[hidden]{display:none}
.js .notice{animation:notice-in .7s cubic-bezier(.22,.61,.36,1) 1.2s backwards}
@keyframes notice-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.notice .k{font-family:var(--ko)}
.notice.away,.menu-open .notice,.intro .notice{opacity:0;transform:translate3d(0,10px,0);pointer-events:none}
.records .st.on{opacity:1;background:var(--ink);color:var(--page);padding:.05em .35em .1em;margin-left:.25em;transition:color .6s ease}
.records .st[hidden]{display:none}

/* ---------- 홈: 배경·히어로·인트로 ---------- */
.home{background:transparent;transition:color .6s ease}
#bg{position:fixed;inset:0;z-index:0;background:var(--page)}
.hero{position:relative;z-index:1;height:100vh;height:100svh;min-height:420px;overflow:hidden}
.hero svg{position:absolute;display:block;overflow:visible}
.hero path{transition:color .55s ease}
/* 유리 세 장 (glass.js): WebGL 캔버스가 로고 위, 메뉴 아래 */
.hero canvas.glass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.glass-pane{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border-radius:9px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 40%,rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(255,255,255,.18),0 24px 60px rgba(0,0,0,.22)}
#landing{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:var(--page);color:#fff;
  transition:opacity .9s ease;cursor:default;-webkit-user-select:none;user-select:none}
.intro #landing{display:grid}
.intro body{overflow:hidden}
#landing.out{opacity:0}
#type{margin:0;white-space:pre;font-size:var(--land-fs);line-height:1.088;padding:0 16px}
#type .r{visibility:hidden}
.caret{position:relative;display:inline-block;width:0;height:1.088em;vertical-align:-.21em}
.caret::after{content:"";position:absolute;left:.02em;top:0;bottom:0;width:.075em;background:currentColor;animation:blink 1.06s steps(1,end) infinite}
.caret.typing::after{animation:none}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
.intro .hero,.intro .nav{opacity:0}
.hero,.nav{transition:opacity 1.2s ease,color .6s ease}

/* ---------- 캘린더 칩 ---------- */
#calmenu{position:fixed;left:0;top:0;z-index:40;display:flex;flex-direction:column;gap:.3em;
  font-size:max(13px, calc(var(--nav-fs) * .7));line-height:1.15;padding:.55em .75em .65em;
  background:var(--ink);color:var(--page);
  opacity:0;visibility:hidden;transform:translate3d(0,-4px,0);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
#calmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
#calmenu a,#calmenu button{white-space:nowrap}
#calmenu.right{align-items:flex-end;text-align:right}

/* ---------- 사전 등록 폼 ---------- */
.reg .state{margin-top:var(--line)}
.fields label{display:block}
.fields > label:not(:first-of-type){margin-top:.75em}
.fields .lb{display:flex;gap:.6em;margin-bottom:.3em}
.fields .lb .num{margin-right:-.25em}
.fields .lb .k{font-family:var(--ko)}
.sheet{margin-top:calc(var(--line) * 2)}
.fields input{display:block;width:100%;font:inherit;font-family:var(--mono);font-size:max(16px,1em);color:#000;
  background:#fff;border:0;border-radius:0;padding:.32em .5em;line-height:1.25;
  -webkit-appearance:none;appearance:none}
.fields input::placeholder{color:rgba(0,0,0,.3)}
.fields input:focus{box-shadow:inset 0 -2px 0 #000}
.fields input:focus-visible{outline:none}
.dual{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col-gap);font-size:var(--fs-s);line-height:1.5}
.dual .ko{line-height:1.6}
.consent + .consent{margin-top:calc(var(--line) * 1.1)}
.consent .ttl{margin-bottom:.2em}
.consent .more{display:block;font-size:var(--fs-s);line-height:1.4;margin:.1em 0 .1em;font-variation-settings:normal}
.consent .more .m-close,.consent.open .more .m-open{display:none}
.consent.open .more .m-close{display:inline}
.consent .dual{margin-top:.5em}
.js .consent:not(.open) .dual{display:none}
html:not(.js) .consent .more{display:none}
.reg .full{margin-top:.7em;font-size:var(--fs-s)}
.reg .err{display:inline-flex;flex-direction:column;gap:.15em;margin-top:.45em;padding:.45em .75em .5em;background:var(--ink);color:var(--page);
  font-size:max(13px, calc(var(--nav-fs) * .62));line-height:1.3}
.reg .err[hidden]{display:none}
.reg .err .k{font-family:var(--ko)}
.reg .msg .L-ko,.reg .msg .L-en{display:block}
.reg .msg .L-sep{display:none}
.chk{position:relative;display:flex;gap:.55em;margin-top:.55em;cursor:pointer;align-items:baseline}
.chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chk{align-items:center}
.chk .box{flex:none;width:.8em;height:.8em;background:#fff;transition:background-color .15s ease}
.chk input:checked + .box{background:#000}
.chk input:focus-visible + .box{outline:1px dashed currentColor;outline-offset:3px}
.chk .k{font-family:var(--ko)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.submit{margin-top:calc(var(--line) * 1.1)}
.submit[disabled]{opacity:.45;cursor:default}
.msg{margin-top:.6em;min-height:1.4em}
.msg:empty{display:none}
.reg[data-state="before"] .sheet,.reg[data-state="closed"] .sheet,.reg[data-state="done"] form{display:none}
.reg[data-state="done"] .msg{margin-top:0}
.reg .only-before,.reg .only-closed{display:none}
.reg[data-state="before"] .only-before,.reg[data-state="closed"] .only-closed{display:block}
/* 등록 완료: 양식 대신 완료 안내 (/rsvp/ 맨 위 제목 자리) */
.done-box[hidden]{display:none!important}
.reg-done .head .intro-lines,.reg-done .reg{display:none}
.done-box{outline:none}
.done-box .chip{display:inline-block;background:var(--ink);color:var(--page);padding:.06em .4em .12em;margin-bottom:.35em}
.done-box .t-dup,.done-box.dup .t-ok{display:none}
.done-box.dup .t-dup{display:inline-block}
.js .done-box:not([hidden]){animation:done-in .7s ease both}
@keyframes done-in{from{opacity:0;transform:translate3d(0,.4em,0)}to{opacity:1;transform:none}}

/* ---------- 서울: 포스터·크레딧 ---------- */
.poster{max-width:calc(min(44vw, 640px) + 2 * var(--edge))}
.credits > div{display:grid;grid-template-columns:var(--cw,5.6em) minmax(0,1fr);column-gap:.8em}
.credits > div + div{margin-top:.35em}
.credits dt{opacity:.6}
.credits.en{--cw:8.6em}
.support{display:flex;flex-wrap:wrap;align-items:center;gap:1.2em 2.2em}
.support img{display:block;height:calc(var(--fs) * 1.6);width:auto}

/* ---------- 약관 ---------- */
.terms .row + .row{margin-top:calc(var(--line) * 1.6)}
.terms .row .ko p + p,.terms .row .ko p + ul,.terms .row .ko ul + p{margin-top:.7em}
.dash{list-style:none;margin:.4em 0 0;padding:0}
.dash li{position:relative;padding-left:1.1em}
.dash li::before{content:"–";position:absolute;left:0}

/* ---------- 나타나기 (스크롤) — JS가 있을 때만 ---------- */
.js .rv{opacity:0;transform:translate3d(0,.4em,0);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.15s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- 데스크톱 본문: 티저보다 조금 작게, 행간은 조금 넓게 (모바일은 티저 그대로) ---------- */
@media (min-width:760px){
  :root{--fs:clamp(15px, 1.5278vw, 27px);       /* 22px @1440 (티저 26px → 25px → 22px) */
        --nav-fs:clamp(15px, 1.8056vw, 31px);   /* 메뉴는 티저 크기 26px 유지 */
        --lh-ko:1.6; --lh-ko-mono:1.38; --lh-en:1.5}   /* 글자가 작아진 만큼 행간 비율을 조금 넓힘 (국문 35px, 영문 33px @1440) */
}

@media (min-width:760px){
  .reg .msg{grid-column:2}
  .reg[data-state="done"] .msg{grid-column:1 / -1}
}

/* ---------- 모바일 ---------- */
@media (max-width:759px){
  :root{--fs:16px;--fs-s:12.5px;--nav-fs:clamp(12px, 3.8vw, 15px);--nav-top:18px;--edge:16px;--top:max(96px, 16vh);--block:calc(var(--line) * 2.6)}
  .bi,.cols{grid-template-columns:minmax(0,1fr)}
  .bi > .en{margin-top:calc(var(--line) * 1.4)}
  .bi > .en:first-child{margin-top:0}
  .records .cols > .en{margin-top:.15em;padding-left:2.4em}
  .label{display:flex;flex-wrap:wrap;column-gap:.9em}
  .label > .en{margin-top:0}
  .notice{font-size:12px;bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  #records-h > .en{margin-top:0}
  .reg form > .consents{margin-top:calc(var(--line) * 1.6)}
  .ph{flex-direction:column;max-width:none}
  .ph figure{flex:none;width:100%}
  .dual{grid-template-columns:minmax(0,1fr);row-gap:.8em}
  .lang-toggle{display:inline}
  .nav .desk{display:none}
  .menu-btn{display:inline}
  /* 모든 페이지: 한 언어만 보이게 (상단 [EN]/[KO] 전환). 제목, 링크, 양식, 하단까지 */
  html[data-l="ko"] .L-en,html[data-l="en"] .L-ko,html[data-l] .L-sep{display:none!important}
  html[data-l="en"] .bi > .L-en{margin-top:0}
  html[data-l="en"] .records .cols > .en{position:relative;margin-top:0}
  html[data-l="en"] .records .n-en{display:block;position:absolute;left:0;top:0}
  .poster{max-width:none}
  .credits.en{--cw:7.6em}
  .sheet{margin-top:calc(var(--line) * 1.6)}
  .consent .more{display:none}
  .js .consent:not(.open) .dual{display:grid}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{transform:none;transition:opacity .6s ease}
  #bg{transition:background-color 1.2s ease}
  .js .done-box:not([hidden]){animation-name:done-fade}
}
@keyframes done-fade{from{opacity:0}to{opacity:1}}