/* ============================================================
 * 연극 〈디오라마〉 초대장 스타일
 * ============================================================ */
:root{
  --beige:#F5F7FA;
  --beige-2:#F5F7FA;
  --white:#FFFFFF;
  --navy:#131326;
  --taupe:#736D63;
  --wine:#56273C;
  --line:rgba(19,19,38,.13);
  --div:rgba(19,19,38,.2);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:#EDEFF2;font-family:'Noto Serif KR',serif;color:var(--navy);
  line-height:1.95;font-weight:300;letter-spacing:-.005em;
}
body.lock{overflow:hidden;}
.wrap{
  max-width:430px;margin:0 auto;background:var(--beige);
  box-shadow:0 0 60px rgba(19,19,38,.12);overflow:hidden;position:relative;
}
body.has-booking .wrap{padding-bottom:86px;}
.cz{font-family:'Cinzel',serif;}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.3,1);}
.rv.on{opacity:1;transform:none;}

section{padding:78px 30px;border-top:1px solid var(--line);position:relative;}
.sec-label{text-align:center;font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.46em;color:var(--wine);text-transform:uppercase;margin-bottom:13px;}
.sec-title{text-align:center;font-size:19px;font-weight:400;margin:0;color:var(--navy);letter-spacing:.1em;}
.sec-rule{position:relative;width:92px;height:7px;margin:26px auto 42px;}
.sec-rule::before{content:'';position:absolute;top:3px;left:0;right:0;height:1px;background:var(--wine);opacity:.45;}
.sec-rule::after{
  content:'';position:absolute;top:0;left:50%;margin-left:-3.5px;width:7px;height:7px;
  background:var(--beige);border:1px solid var(--wine);transform:rotate(45deg);
}

/* ── HERO : 포스터 전체화면 ── */
.hero{
  padding:0;border-top:0;position:relative;overflow:hidden;
  height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:#0F1420;
}
/* 포스터가 화면을 가득 채웁니다 (넘치는 부분은 잘림)
 * 어디를 기준으로 자를지는 js/config.js 의 posterFocus 로 조정 */
.hero-poster{
  position:absolute;inset:0;z-index:1;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-fallback{
  position:relative;z-index:1;width:78%;aspect-ratio:2/3;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.3em;color:var(--taupe);
}
.hero-fallback::after{content:'';position:absolute;inset:9px;border:1px solid rgba(86,39,60,.25);}
.scroll-cue{
  position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  width:1px;height:38px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.75));
  animation:cue 2.1s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:translate(-50%,-6px);}50%{opacity:1;transform:translate(-50%,4px);}}

/* ── 연출의 말 ── */
.greeting p{text-align:center;font-size:14.5px;line-height:2.5;color:rgba(19,19,38,.82);margin:0 0 26px;font-weight:200;}
.greeting p:last-of-type{margin-bottom:0;}
.sign{text-align:center;margin-top:42px;font-size:11.5px;color:var(--taupe);letter-spacing:.14em;}
.sign b{color:var(--wine);font-weight:400;font-size:14.5px;margin-left:10px;letter-spacing:.02em;}

/* ── 캐스팅 ── */
.cast-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 15px;}
.cast{text-align:center;}
.cast-img{
  width:100%;aspect-ratio:3/4;margin-bottom:16px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FFFFFF,#F5F7FA);
  display:flex;align-items:center;justify-content:center;
}
.cast-img::after{content:'';position:absolute;inset:7px;border:1px solid rgba(86,39,60,.22);pointer-events:none;}
.cast-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cast-img span{font-size:9px;letter-spacing:.28em;color:var(--wine);font-family:'Cinzel',serif;}
.cast-role{font-size:10px;letter-spacing:.32em;color:var(--wine);font-family:'Cinzel',serif;line-height:1.5;margin-bottom:1px;}
.cast-name{font-size:16.5px;color:var(--navy);letter-spacing:.06em;line-height:1.45;}
.cast-note{text-align:center;font-size:11px;color:var(--taupe);margin-top:34px;line-height:2.1;letter-spacing:.02em;}

/* ── 스탭 ── */
.more{
  width:100%;margin-top:32px;padding:15px 0;background:none;border:1px solid var(--div);
  font-family:'Noto Serif KR',serif;font-size:12px;letter-spacing:.18em;color:var(--navy);cursor:pointer;
}
.more .ar{display:inline-block;margin-left:8px;font-size:10px;color:var(--wine);transition:transform .3s;}
.more.open .ar{transform:rotate(180deg);}
.staff{max-height:0;overflow:hidden;transition:max-height .5s ease;}
.staff.open{max-height:3800px;}
.staff-in{padding-top:28px;}
.st-block{margin-bottom:26px;}
.st-block:last-child{margin-bottom:0;}
.st-team{
  font-size:12.5px;color:var(--navy);letter-spacing:.22em;text-align:center;
  padding-bottom:12px;margin-bottom:10px;position:relative;
}
.st-team::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:34px;height:1px;background:var(--wine);opacity:.45;
}
.st-row{display:grid;grid-template-columns:66px 1fr auto;align-items:baseline;gap:10px;padding:7px 2px;}
.st-row + .st-row{border-top:1px solid rgba(19,19,38,.05);}
.st-row .r{font-size:10px;letter-spacing:.14em;color:var(--taupe);}
.st-row .r.lead{color:var(--wine);}
.st-row .n{font-size:13.5px;color:var(--navy);letter-spacing:.04em;}
.st-row .g{font-size:10.5px;color:var(--taupe);letter-spacing:.02em;text-align:right;white-space:nowrap;}

/* ── 축사 · 작품 소개 (alumni 페이지 전용) ── */
.extra-btns{display:grid;gap:10px;}
.extra-btns .more{margin-top:0;}
.extra-btns .more .ar{transition:transform .25s;}
.extra-btns .more:hover .ar{transform:translateX(3px);}

.gr-item{text-align:left;}
.gr-sep{margin-top:44px;padding-top:40px;border-top:1px solid var(--line);}
.gr-head{text-align:center;margin-bottom:26px;}
.gr-role{font-size:10.5px;letter-spacing:.14em;color:var(--taupe);line-height:1.9;}
.gr-name{font-size:16px;color:var(--wine);letter-spacing:.22em;margin-top:5px;}
.gr-title{
  text-align:center;font-size:13px;color:var(--navy);letter-spacing:.02em;
  line-height:1.9;margin-bottom:22px;
}
.gr-p{
  margin:0 0 16px;font-size:12.5px;font-weight:200;line-height:2.15;
  color:rgba(19,19,38,.82);letter-spacing:-.005em;word-break:keep-all;
  white-space:pre-line;   /* config 의 줄바꿈(\n)을 그대로 표시 */
}
.gr-p:last-child{margin-bottom:0;}

/* 작품 소개는 가운데 정렬 · 문단 사이를 조금 더 넓게
 * text-wrap:balance — 긴 줄이 넘칠 때 두 줄 길이를 고르게 나눠 줍니다 */
.sy-p{text-align:center;margin-bottom:26px;line-height:2.3;text-wrap:balance;}
.gr-closing{
  text-align:center;margin-top:26px;font-size:14px;color:var(--wine);
  letter-spacing:.06em;line-height:1.9;
}
.sy-title{
  text-align:center;font-size:23px;font-weight:500;color:var(--navy);
  letter-spacing:.2em;margin-bottom:9px;
}
.sy-work{
  text-align:center;font-size:11px;color:var(--taupe);letter-spacing:.1em;margin-bottom:28px;
}

/* ── 갤러리 ── */
.slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.slider::-webkit-scrollbar{display:none;}
.slide{
  flex:0 0 78%;scroll-snap-align:center;aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#FFFFFF,#F5F7FA);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.26em;color:var(--taupe);
}
.slide img{width:100%;height:100%;object-fit:cover;display:block;}
.slide::after{content:'';position:absolute;inset:8px;border:1px solid rgba(86,39,60,.22);pointer-events:none;}
.slide{cursor:zoom-in;}
.dots{display:flex;justify-content:center;gap:6px;margin-top:24px;}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(86,39,60,.25);transition:all .3s;}
.dot.on{background:var(--wine);width:16px;border-radius:3px;}
.slide-cap{text-align:center;font-size:11px;color:var(--taupe);margin-top:16px;letter-spacing:.1em;}

/* ── 방명록 ── */
.gb-list{margin-bottom:30px;}
.gb-item{border-bottom:1px solid var(--line);padding:20px 2px;}
.gb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px;}
.gb-name{
  font-size:13.5px;color:var(--wine);letter-spacing:.06em;
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.6;
}
.gb-date{
  font-size:10.5px;color:var(--taupe);flex:0 0 auto;
  font-family:'Noto Serif KR',serif;font-weight:300;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.gb-msg{font-size:12.5px;color:rgba(19,19,38,.78);font-weight:200;line-height:2.1;white-space:pre-wrap;}
.gb-empty{padding:34px 0;}
.gb-page{display:flex;justify-content:center;align-items:center;gap:3px;margin:24px 0 34px;}
.gb-page button{
  flex:0 0 auto;min-width:27px;height:27px;padding:0 5px;background:none;border:0;cursor:pointer;
  font-family:'Noto Serif KR',serif;font-weight:300;font-size:12.5px;color:var(--taupe);
  letter-spacing:.02em;line-height:27px;transition:color .2s;
  font-variant-numeric:tabular-nums;
}
.gb-page button.on{color:var(--wine);font-weight:400;border-bottom:1px solid var(--wine);}
.gb-page button.ar{font-size:15px;color:var(--wine);}
.gb-page button:disabled{opacity:.22;cursor:default;}

.field{margin-bottom:17px;}
.field label{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--taupe);margin-bottom:8px;}
.field input,.field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--div);background:var(--white);
  font-family:inherit;font-weight:300;font-size:13.5px;color:var(--navy);outline:none;
  transition:border-color .25s;border-radius:1px;
}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(115,109,99,.6);}
.field input:focus,.field textarea:focus{border-color:var(--wine);}
.btn{
  display:block;width:100%;padding:16px;border:0;cursor:pointer;border-radius:1px;
  background:var(--navy);color:#FFFFFF;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.24em;transition:opacity .25s;
}
.btn:active{opacity:.8;}
.btn:disabled{opacity:.45;cursor:default;}
/* 한글 전용 버튼 — 영문 세리프(Cinzel) 대신 본문 글씨체 */
.btn-ko{font-family:'Noto Serif KR',serif;font-size:14px;font-weight:400;letter-spacing:.12em;}
.btn-ghost{background:none;border:1px solid var(--navy);color:var(--navy);font-family:'Noto Serif KR',serif;font-size:13px;letter-spacing:.16em;}

/* ── 섹션 안내 문구 (방명록 · 마음 전하기 · 축하 화환 공통) ── */
.gb-empty,
.acc-lead,
.sp-lead{
  text-align:center;
  font-family:'Noto Serif KR',serif;
  font-size:12.5px;
  font-weight:200;
  line-height:2.25;
  letter-spacing:-.005em;
  color:rgba(19,19,38,.75);
}

/* ── 마음 전하기 ── */
.acc-lead{margin-bottom:34px;}
.acc{border:1px solid var(--div);background:var(--white);}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:17px 18px;cursor:pointer;}
.acc-head .t{font-size:13px;color:var(--navy);letter-spacing:.08em;}
.acc-head .c{font-size:11px;color:var(--wine);transition:transform .3s;}
.acc.open .acc-head .c{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.acc.open .acc-body{max-height:240px;}
.acc-item{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;}
.acc-item .info{font-size:13.5px;color:var(--navy);line-height:1.75;font-family:'Noto Serif KR',serif;font-weight:400;letter-spacing:.01em;font-variant-numeric:tabular-nums;}
.acc-item .info b{display:block;font-weight:400;color:var(--taupe);font-size:10.5px;letter-spacing:.16em;margin-bottom:2px;}
.copy{flex-shrink:0;padding:8px 13px;border:1px solid var(--wine);background:none;color:var(--wine);font-size:10.5px;cursor:pointer;font-family:inherit;}

/* ── 후원 ── */
.sponsor{background:var(--beige-2);text-align:center;}
.sp-lead{margin-bottom:32px;}
/* 가로로 긴 배너를 한 줄에 하나씩 */
.sp-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.sp-box{
  border:1px solid var(--div);background:var(--beige);padding:0;overflow:hidden;
  font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.2em;color:var(--taupe);
  display:flex;align-items:center;justify-content:center;min-height:74px;
}
.sp-box .sp-img{width:100%;height:auto;display:block;}

/* 글자 카드 (배너 이미지가 없을 때) — 눌러서 펼치는 형태
 * .sp-box 의 영문 장식 글씨체(Cinzel · 넓은 자간)를 본문 글씨로 되돌립니다 */
.sp-card{
  display:block;padding:0;text-align:center;min-height:0;background:var(--white);
  font-family:'Noto Serif KR',serif;font-weight:300;letter-spacing:-.005em;
}
.sp-head{padding:20px 18px;position:relative;}
.sp-card.has-more .sp-head{cursor:pointer;padding-left:38px;padding-right:38px;}
.sp-name{font-size:14.5px;color:var(--navy);letter-spacing:.03em;line-height:1.6;font-weight:400;}
.sp-summary{font-size:11px;color:var(--wine);letter-spacing:.01em;line-height:1.8;margin-top:6px;}
.sp-caret{
  position:absolute;right:16px;top:50%;margin-top:-8px;
  font-size:10px;line-height:1;color:var(--wine);transition:transform .3s;
}
.sp-card.open .sp-caret{transform:rotate(180deg);}

.sp-body{max-height:0;overflow:hidden;transition:max-height .38s ease;}
.sp-card.open .sp-body{max-height:340px;}
.sp-body-in{padding:15px 18px 21px;border-top:1px solid var(--line);}
.sp-body-in > * + *{margin-top:8px;}
.sp-tagline{font-size:11px;color:var(--taupe);line-height:1.85;}
.sp-addr{font-size:11px;color:var(--taupe);line-height:1.85;}
.sp-sub{font-size:10.5px;color:var(--taupe);line-height:1.8;opacity:.85;}
.sp-tel{font-size:11.5px;color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.sp-mail{font-size:10.5px;color:var(--taupe);letter-spacing:.01em;}

/* ── 오시는 길 ── */
/* 약도는 가로로 긴 그림이라 섹션 여백을 넘어 화면 끝까지 씁니다 */
.map-box{margin:0 -20px 26px;padding:12px;border:1px solid var(--wine);}
.map-box img{display:block;width:100%;height:auto;}
.lo-venue{text-align:center;font-size:13.5px;color:var(--navy);letter-spacing:.04em;line-height:1.9;margin:0;}
.lo-addr{text-align:center;font-size:11.5px;color:var(--taupe);letter-spacing:.02em;line-height:1.9;margin:5px 0 26px;}
.lo-transit{
  display:grid;grid-template-columns:46px 1fr;gap:9px 14px;
  margin:0;padding-top:22px;border-top:1px solid var(--line);
}
.lo-transit dt{
  font-size:10.5px;letter-spacing:.16em;color:var(--wine);
  line-height:1.95;text-align:right;
}
.lo-transit dd{
  grid-column:2;margin:0;font-size:12px;color:var(--taupe);
  line-height:1.95;letter-spacing:.01em;word-break:keep-all;
  font-variant-numeric:tabular-nums;
}
.lo-transit dd + dd{margin-top:-3px;}
.lo-transit dd b{color:var(--navy);font-weight:400;}
.lo-transit dt + dd{grid-row:auto;}

/* ── 예식 안내서 ── */
.sign-btn-wrap{text-align:center;margin-top:30px;}
.sign-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;background:none;border:1px solid var(--div);cursor:pointer;
  font-family:'Noto Serif KR',serif;font-size:12.5px;font-weight:300;
  letter-spacing:.14em;color:var(--navy);
}
.sign-btn .ar{font-size:10px;color:var(--wine);transition:transform .25s;}
.sign-btn:hover .ar{transform:translateX(3px);}
.nt-title{
  text-align:center;font-size:15px;color:var(--navy);letter-spacing:.1em;margin-bottom:30px;
}
/* 줄 간격을 넉넉히 — 큐 번호가 윗줄 글자에 닿지 않도록 */
.nt-p{text-align:center;margin-bottom:26px;line-height:2.95;text-wrap:balance;}

/* 대본에 손으로 적어 둔 큐 표시 — 동그라미 친 글자 + 위의 번호 */
.cue{position:relative;display:inline-block;}
.cue::after{
  content:'';position:absolute;top:-2px;bottom:-2px;left:-5px;right:-5px;
  border:1.4px solid #BE3455;border-radius:50%;pointer-events:none;
}
.cue-num{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin-bottom:3px;font-style:normal;font-size:9px;line-height:1;
  color:#BE3455;letter-spacing:0;font-variant-numeric:tabular-nums;
}
/* 글자 아래에 붙는 번호 */
.cue-num.down{bottom:auto;top:100%;margin-bottom:0;margin-top:3px;}

/* ── FOOTER ── */
footer{background:var(--beige);text-align:center;padding:62px 30px 50px;border-top:1px solid var(--line);}
.f-orn{width:64px;height:1px;background:var(--wine);opacity:.45;margin:0 auto 24px;position:relative;}
.f-orn::after{content:'';position:absolute;top:-3px;left:50%;margin-left:-3.5px;width:7px;height:7px;background:var(--beige);border:1px solid var(--wine);transform:rotate(45deg);}
.f-title{font-family:'Cinzel',serif;font-size:25px;letter-spacing:.26em;color:var(--navy);margin-bottom:14px;}
.f-date{font-size:11px;letter-spacing:.14em;color:var(--taupe);line-height:2.1;}
.f-share{display:flex;gap:8px;margin-top:32px;}
.f-share button,.f-share .f-ig{
  flex:1;padding:13px 0;background:none;border:1px solid var(--div);color:var(--navy);
  font-size:11px;font-family:inherit;cursor:pointer;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.14em;
}
.f-share .f-ig{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:.2em;}
.f-copy{margin-top:30px;font-size:9.5px;color:var(--taupe);letter-spacing:.12em;font-family:'Cinzel',serif;}

/* ── 하단 예매바 ── */
.fab{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(245,247,250,.95);
  backdrop-filter:blur(8px);border-top:1px solid var(--div);z-index:80;transition:transform .35s;
}
.fab.hide{transform:translate(-50%,120%);}

/* ── 예매 시트 ── */
.sheet{
  position:fixed;top:0;bottom:0;left:50%;width:100%;max-width:430px;background:var(--beige);
  transform:translate(-50%,100%);transition:transform .42s cubic-bezier(.3,.8,.3,1);
  z-index:120;display:flex;flex-direction:column;
}
.sheet.on{transform:translate(-50%,0);}
.sh-head{flex-shrink:0;padding:18px 20px;border-bottom:1px solid var(--div);display:flex;align-items:center;justify-content:space-between;}
.sh-head .ttl{font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:.3em;color:var(--navy);}
.sh-head .ttl.ko{font-family:'Noto Serif KR',serif;font-size:14px;font-weight:400;letter-spacing:.1em;}
.sh-head .x{background:none;border:0;font-size:20px;line-height:1;color:var(--navy);cursor:pointer;padding:0 2px;}
.sh-body{flex:1;overflow-y:auto;padding:28px 20px;-webkit-overflow-scrolling:touch;}
.sh-foot{flex-shrink:0;padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--div);background:var(--beige);}

/* 시트 상단 안내 문구 */
.sh-intro{
  margin:0 0 26px;text-align:center;
  font-size:12.5px;font-weight:200;line-height:2.25;
  letter-spacing:-.005em;color:rgba(19,19,38,.75);
}
/* 선예매 링크 안내 배지 */
.sh-preset{
  margin:0 0 28px;padding:14px 16px;text-align:center;
  border:1px solid var(--wine);background:rgba(86,39,60,.05);
}
.sh-preset b{
  display:block;font-family:'Noto Serif KR',serif;font-size:12.5px;letter-spacing:.1em;
  color:var(--wine);font-weight:400;margin-bottom:6px;
}
.sh-preset span{font-size:11.5px;color:var(--taupe);font-weight:300;line-height:1.9;}

.step-h{display:flex;align-items:center;gap:9px;margin-bottom:15px;}
.step-n{width:19px;height:19px;border:1px solid var(--wine);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:9.5px;color:var(--wine);flex-shrink:0;}
.step-t{font-size:12.5px;letter-spacing:.1em;color:var(--navy);}
.step-t small{color:var(--taupe);font-size:11px;}
.blk-gap{height:36px;}

.rounds{display:flex;gap:8px;}
.round{flex:1;padding:15px 6px;border:1px solid var(--div);background:var(--white);text-align:center;cursor:pointer;transition:all .28s;}
.round.sel{border-color:var(--navy);background:var(--navy);}
.round .d{
  font-family:'Noto Serif KR',serif;font-size:16px;font-weight:400;
  letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums;
}
.round .t{font-size:10.5px;color:var(--taupe);letter-spacing:.06em;margin-top:4px;}
.round .left{font-size:9.5px;color:var(--taupe);margin-top:5px;}
.round.sel .d{color:#FFFFFF;}
.round.sel .t,.round.sel .left{color:rgba(255,255,255,.7);}

.panel{border:1px solid var(--div);background:var(--white);padding:20px 14px;}
.stage{margin:0 0 20px;padding:9px 0;text-align:center;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5em;color:#FFFFFF;background:var(--navy);border-radius:0 0 40% 40%/0 0 100% 100%;}
.seatmap{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.seat-rows{min-width:528px;padding:0 8px;}
.srow{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:4px;}
.rlab{width:14px;font-family:'Cinzel',serif;font-size:8.5px;color:var(--taupe);text-align:center;flex-shrink:0;}
.blk{display:flex;gap:2px;}
.seat{width:13px;height:13px;border-radius:2px 2px 3px 3px;border:1px solid var(--div);background:transparent;cursor:pointer;transition:all .16s;flex-shrink:0;padding:0;}
.seat:active{transform:scale(.85);}
.seat.sel{background:var(--wine);border-color:var(--wine);}
.seat.taken{background:var(--navy);border-color:var(--navy);cursor:not-allowed;}
.seat.blocked{background:var(--taupe);border-color:var(--taupe);cursor:not-allowed;}
.seat.none{border-color:transparent;background:transparent;cursor:default;}
.seat.wc{background:#FFFFFF;border:1px dashed var(--wine);}
.seat.wc.sel{background:var(--wine);border:1px solid var(--wine);}
.seat.wc.taken{background:var(--navy);border:1px solid var(--navy);}
.row-gap{height:16px;position:relative;margin:4px 0 8px;}
.row-gap::after{content:'';position:absolute;top:50%;left:8%;right:8%;height:1px;background:var(--line);}
.seat.sp{border-color:var(--wine);background:#E3DDAD;}
.seat.sp.sel{background:var(--wine);border-color:var(--wine);box-shadow:inset 0 0 0 1.5px #FFFFFF;}
.seat.sp.taken{background:var(--navy);border-color:var(--navy);box-shadow:none;}
/* 하객석·휠체어석이라도 예매할 수 없으면 '예매불가' 색으로 */
.seat.sp.blocked,
.seat.wc.blocked{background:var(--taupe);border:1px solid var(--taupe);box-shadow:none;}
.scroll-hint{text-align:center;font-size:9.5px;color:var(--taupe);letter-spacing:.12em;margin-top:10px;}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 6px;margin:18px 4px 16px;}
.lg{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--taupe);white-space:nowrap;}
.lg i{width:10px;height:10px;border-radius:2px;display:block;border:1px solid var(--div);background:transparent;flex-shrink:0;}
.lg.p i{background:#E3DDAD;border-color:var(--wine);}
.lg.s i{background:var(--wine);border-color:var(--wine);}
.lg.t i{background:var(--navy);border-color:var(--navy);}
.lg.b i{background:var(--taupe);border-color:var(--taupe);}
.lg.w i{background:#FFFFFF;border:1px dashed var(--wine);}
.sp-note{font-size:10px;color:var(--taupe);line-height:1.9;text-align:center;border-top:1px solid var(--line);padding-top:13px;}
.sp-note b{color:var(--wine);font-weight:400;}

.selbar{border-top:1px solid var(--div);border-bottom:1px solid var(--div);padding:16px 4px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.selbar .k{font-family:'Cinzel',serif;font-size:10px;color:var(--taupe);letter-spacing:.22em;flex-shrink:0;}
.selbar .v{
  font-size:13px;color:var(--wine);text-align:right;line-height:1.8;
  font-family:'Noto Serif KR',serif;font-weight:300;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

.agree{display:flex;gap:9px;align-items:flex-start;margin-top:22px;cursor:pointer;}
.cb{width:15px;height:15px;border:1px solid var(--div);background:var(--white);flex-shrink:0;margin-top:5px;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:all .2s;}
.agree.on .cb{background:var(--navy);border-color:var(--navy);color:#FFFFFF;}
.agree p{margin:0;font-size:11px;color:var(--taupe);line-height:1.9;}
.note{font-size:10.5px;color:var(--taupe);text-align:center;margin-top:15px;line-height:2;}

/* ── 데스크탑 ── */
@media (min-width:760px){
  body{
    background:radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, #F5F7FA 42%, #E7E9ED 100%);
    background-attachment:fixed;
  }
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%2356273C' stroke-width='1' opacity='0.07'%3E%3Cpath d='M48 34 L62 48 L48 62 L34 48 Z'/%3E%3Ccircle cx='48' cy='48' r='1.2' fill='%2356273C' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  }
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
    box-shadow:inset 0 0 220px rgba(19,19,38,.07);
  }
  .wrap{
    margin:56px auto 72px;position:relative;z-index:1;
    box-shadow:0 36px 90px rgba(19,19,38,.16);
    border:1px solid rgba(86,39,60,.14);
  }
  .hero{height:auto;aspect-ratio:2/3;}
  .desk-side{
    position:fixed;top:50%;z-index:1;pointer-events:none;
    font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:.5em;
    color:rgba(86,39,60,.5);white-space:nowrap;
  }
  .desk-side.l{left:44px;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;}
  .desk-side.r{right:44px;transform:translateY(-50%) rotate(90deg);transform-origin:right center;}
}
@media (max-width:759px){ .desk-side{display:none;} }

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:var(--navy);color:#FFFFFF;font-size:12px;padding:12px 24px;opacity:0;pointer-events:none;transition:all .3s;z-index:200;letter-spacing:.04em;max-width:86%;text-align:center;line-height:1.7;}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ── 티켓 ── */
.ovl{position:fixed;inset:0;background:rgba(19,19,38,.55);z-index:150;display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .3s;}
.ovl.on{opacity:1;pointer-events:auto;}
.ticket{width:100%;max-width:320px;background:var(--beige);padding:36px 26px 28px;text-align:center;transform:translateY(16px);transition:transform .35s;position:relative;}
.ticket::before{content:'';position:absolute;inset:9px;border:1px solid rgba(86,39,60,.3);pointer-events:none;}
.ovl.on .ticket{transform:none;}
.tk-en{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.42em;color:var(--wine);}
.tk-title{font-family:'Cinzel',serif;font-size:24px;letter-spacing:.18em;color:var(--navy);margin:10px 0 22px;}
.tk-dash{border-top:1px dashed var(--div);margin:20px -26px;}
.tk-row{display:flex;justify-content:space-between;font-size:11.5px;padding:5px 0;gap:12px;}
.tk-row .k{color:var(--taupe);letter-spacing:.12em;flex-shrink:0;}
.tk-row .v{color:var(--navy);text-align:right;}
.tk-close{margin-top:26px;width:100%;padding:13px;background:var(--navy);border:0;color:#FFFFFF;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.22em;cursor:pointer;}

/* ── 갤러리 확대 보기 ── */
.lb{
  position:fixed;inset:0;z-index:170;background:rgba(12,14,22,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .28s;
}
.lb.on{opacity:1;pointer-events:auto;}
.lb-img{
  max-width:calc(100% - 32px);max-height:calc(100% - 132px);
  object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;
  opacity:0;transform:scale(.985);transition:opacity .22s ease,transform .22s ease;
}
.lb-img.ready{opacity:1;transform:none;}
.lb-x{
  position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;
  width:42px;height:42px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.9);font-size:26px;line-height:1;padding:0;
}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:66px;background:none;border:0;cursor:pointer;padding:0;
  color:rgba(255,255,255,.72);font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1;
  transition:color .2s;
}
.lb-nav:hover{color:#fff;}
.lb-nav.prev{left:2px;}
.lb-nav.next{right:2px;}
.lb-count{
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;color:rgba(255,255,255,.62);
  font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:.22em;
}
@media (min-width:760px){
  .lb-img{max-width:min(760px,calc(100% - 140px));}
  .lb-nav.prev{left:16px;}
  .lb-nav.next{right:16px;}
}

/* ── 데모 배지 ── */
.demo-badge{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:100;
  background:var(--wine);color:#FFFFFF;font-size:10px;letter-spacing:.06em;
  padding:5px 14px;max-width:430px;text-align:center;
}