/* 숲속 상영회 시안 — 마루부리 + 프리텐다드 · 아이보리 · 샴페인 버튼 */
:root{ --bg:#FBF8F2; --ink:#2A2620; --body:#3A352E; --sub:#6A645C; --champ:#D9C49A; --champ2:#CDB683;
  --serif:"MaruBuri", serif; --sans:"Pretendard Variable", Pretendard, system-ui, sans-serif; --ease:cubic-bezier(.32,.72,0,1); }
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; height:100%; overflow:hidden; background:#F3E2CC; color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; word-break:keep-all; }
button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#stage{ position:fixed; inset:0; }
#cssLayer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }   /* 영상은 3D 뒤, 스크린 자리만 뚫어서 보임 */
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
body.playing #gl{ pointer-events:none; }

.btn{ min-height:52px; padding:0 26px; border:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; text-decoration:none; transition:scale .14s var(--ease), background-color .2s; }
.btn:active{ scale:.97; }
.btn.main{ background:var(--champ); color:#2A2010; }
.btn.main:active{ background:var(--champ2); }
.btn.sub{ background:rgba(42,38,32,.06); color:var(--ink); }

/* 입장 */
.gate{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(251,248,242,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:opacity .6s; }
.gate.out{ opacity:0; pointer-events:none; }
.gate-in{ width:100%; max-width:360px; display:flex; flex-direction:column; }
.g-who{ margin:0; font-size:15px; color:var(--sub); }
.gate h1{ margin:6px 0 0; font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.15; letter-spacing:-.03em; }
.g-when{ margin:12px 0 0; font-size:16px; color:var(--body); font-variant-numeric:tabular-nums; }
.g-desc{ margin:20px 0 0; font-size:16px; line-height:1.7; color:var(--body); }
.g-l{ margin:32px 0 8px; font-size:15px; font-weight:600; }
#gName{ min-height:52px; padding:0 16px; border:1px solid #E2D8C8; border-radius:14px; background:#fff; font:inherit; font-size:17px; }
#gName:focus{ outline:none; border-color:#866943; box-shadow:0 0 0 3px rgba(134,105,67,.14); }
#gEnter{ margin-top:12px; }
.g-note{ margin:16px 0 0; font-size:13px; color:var(--sub); text-align:center; }

/* 위 */
.hud{ position:fixed; z-index:10; top:calc(10px + env(safe-area-inset-top)); left:10px; right:10px; display:flex; align-items:center; gap:8px; pointer-events:none; }
.hud > *{ pointer-events:auto; }
.h-back{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(251,248,242,.86); color:var(--ink); text-decoration:none; font-size:24px; }
.h-title{ height:44px; padding:0 18px; border-radius:999px; background:rgba(251,248,242,.86); display:flex; align-items:center; gap:10px; font-size:15px; }
.h-title span{ color:var(--sub); font-size:14px; font-variant-numeric:tabular-nums; }
.h-title em{ font-style:normal; font-size:13px; font-weight:600; color:#A4462F; display:inline-flex; align-items:center; gap:6px; }
.h-title em::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; animation:rec 1.6s infinite; }
@keyframes rec{ 50%{ opacity:.25; } }
.tip{ position:fixed; z-index:9; left:50%; top:calc(66px + env(safe-area-inset-top)); translate:-50% 0; margin:0; padding:8px 14px; border-radius:999px; background:rgba(42,38,32,.55); color:#FBF8F2; font-size:13px; white-space:nowrap; transition:opacity .8s; }
.tip.out{ opacity:0; }

/* 아래 */
.dock{ position:fixed; z-index:10; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); translate:-50% 0; width:min(560px, calc(100% - 20px)); display:flex; flex-direction:column; gap:8px; }
.d-acts{ display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; padding:6px; border-radius:24px; background:rgba(251,248,242,.88); }
.d-acts button{ min-height:58px; border:0; border-radius:18px; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:13px; font-weight:500; transition:background-color .2s, scale .14s var(--ease); }
.d-acts button:active{ background:rgba(217,196,154,.45); scale:.95; }
.d-acts button[aria-pressed=true]{ background:rgba(217,196,154,.6); }
.ic{ width:22px; height:22px; display:block; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.ic.sit{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 14h16v3H4zM6 17v3M18 17v3M7 14V8a5 5 0 0 1 10 0v6'/%3E%3C/svg%3E"); }
.ic.clap{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12l4-4a1.6 1.6 0 0 1 2.3 2.3l-1.8 1.8 3.3-3.3a1.6 1.6 0 0 1 2.3 2.3L13 16a5 5 0 0 1-7 0 5 5 0 0 1 0-7l1-1M15 3l1-1M19 5l1.5-.5M18 2.5V1'/%3E%3C/svg%3E"); }
.ic.petal{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 21c-4-2-7-6-7-10a7 7 0 0 1 7-7 7 7 0 0 1 7 7c0 4-3 8-7 10zM12 21V9'/%3E%3C/svg%3E"); }
.ic.heart{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.play{ width:100%; }
body.playing .play{ display:none; }
.skip{ position:fixed; z-index:11; right:12px; top:calc(62px + env(safe-area-inset-top)); min-height:44px; padding:0 16px; border:0; border-radius:999px; background:rgba(251,248,242,.86); font-size:14px; font-weight:600; }
.count{ position:fixed; z-index:12; left:50%; top:38%; translate:-50% -50%; font-family:var(--serif); font-size:96px; color:#FBF8F2; text-shadow:0 2px 30px rgba(42,38,32,.4); pointer-events:none; }

/* 끝 */
.fin{ position:fixed; inset:0; z-index:25; display:flex; align-items:flex-end; justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); background:linear-gradient(to top, rgba(251,248,242,.96) 45%, rgba(251,248,242,0)); }
.fin-in{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:8px; }
.f-k{ margin:0; font-size:15px; color:var(--sub); }
.fin h2{ margin:4px 0 0; font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.3; letter-spacing:-.02em; }
.f-p{ margin:6px 0 18px; color:var(--body); }

@media (prefers-reduced-motion: reduce){ .gate, .btn, .tip{ transition:none; } }
@media (max-width:420px){ #hCount{ display:none; } }

/* 필름한즈 */
.g-line{ margin:8px 0 0; font-size:15px; font-weight:600; color:#866943; }
.g-brand{ margin:28px 0 0; text-align:center; font-family:var(--serif); font-size:18px; letter-spacing:.18em; color:var(--ink); }
.h-brand{ order:3; margin-left:auto; height:44px; padding:0 18px; border:0; border-radius:999px; background:rgba(251,248,242,.86); font-family:var(--serif); font-size:15px; letter-spacing:.14em; }
.brand{ position:fixed; inset:0; z-index:28; display:flex; align-items:flex-end; justify-content:center; background:rgba(42,38,32,0); transition:background-color .35s; }
.brand.on{ background:rgba(42,38,32,.28); }
.b-sheet{ width:100%; max-width:440px; padding:30px 22px calc(22px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:var(--bg); display:flex; flex-direction:column; gap:8px; translate:0 100%; transition:translate .45s var(--ease); box-shadow:0 -10px 40px rgba(42,38,32,.14); }
.brand.on .b-sheet{ translate:0 0; }
.b-k{ margin:0; font-size:14px; font-weight:600; color:#866943; }
.b-sheet h2{ margin:2px 0 0; font-family:var(--serif); font-weight:400; font-size:38px; letter-spacing:.08em; }
.b-p{ margin:8px 0 16px; color:var(--body); line-height:1.7; }
.b-x{ min-height:48px; border:0; background:none; color:var(--sub); font-size:15px; }
@media (max-width:420px){ .h-brand{ padding:0 14px; font-size:13px; } .h-title b{ font-size:14px; } }
@media (max-width:420px){
  .h-title{ padding:0 14px; gap:8px; white-space:nowrap; }
  .h-title em{ font-size:0; gap:0; }          /* 좁은 화면: 빨간 점만 */
  .h-title em::before{ width:8px; height:8px; }
}

.ic.pen{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16v4zM13.5 6.5l4 4'/%3E%3C/svg%3E"); }
/* 방명록 */
.gb-sheet{ max-height:86vh; overflow:auto; gap:10px; }
.gb-hd{ display:flex; align-items:center; justify-content:space-between; }
.gb-hd h2{ margin:0; font-family:var(--serif); font-weight:400; font-size:30px; letter-spacing:0; }
.gb-hd .b-x{ min-height:40px; padding:0 14px; border-radius:999px; background:rgba(42,38,32,.06); }
.gb-sheet .b-p{ margin:0 0 4px; }
#gbForm{ display:flex; flex-direction:column; gap:8px; }
#gbName, #gbText{ width:100%; padding:12px 14px; border:1px solid #E2D8C8; border-radius:14px; background:#fff; font:inherit; font-size:16px; color:var(--ink); }
#gbText{ resize:none; line-height:1.6; }
#gbName:focus, #gbText:focus{ outline:none; border-color:#866943; box-shadow:0 0 0 3px rgba(134,105,67,.14); }
.gb-row{ display:flex; align-items:center; justify-content:space-between; }
.gb-row span{ font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums; }
.gb-row .btn{ min-height:46px; }
.gb-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.gb-list li{ padding:14px 16px; border-radius:14px; background:#F3EEE6; }
.gb-list p{ margin:0; font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink); }
.gb-list span{ display:block; margin-top:6px; font-size:13px; color:#866943; }
@media (max-width:420px){ .d-acts button span{ font-size:12px; } }
/* 소리가 막힌 기기용 안내 (한 번 누르면 사라짐) */
.snd{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;padding:16px 26px;border:0;border-radius:999px;background:#D9C49A;color:#2A2620;font:600 16px "Pretendard Variable",Pretendard,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;animation:sndPulse 1.8s ease-in-out infinite}
@keyframes sndPulse{50%{transform:translate(-50%,-50%) scale(1.05)}}
/* 가로로 보기 버튼 */
.h-rot{ order:4; width:44px; height:44px; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(251,248,242,.86); color:var(--ink); cursor:pointer; padding:0; }
html.rot .h-rot, html.land .h-rot{ background:#D9C49A; }
/* 아이폰 가로 보기: 화면 전체를 90도 돌림 (돌린 상자가 고정 요소들의 기준이 됨) */
html.rot body{ position:fixed; top:0; left:0; width:var(--sh); height:var(--sw); transform:rotate(90deg) translateY(-100%); transform-origin:0 0; }
html.rot .hud{ top:10px; left:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-bottom)); }
/* 하단 바: 더 작게 + 유리 효과 */
.dock{ width:min(400px, calc(100% - 28px)); bottom:calc(12px + env(safe-area-inset-bottom)); }
.d-acts{ gap:2px; padding:4px; border-radius:20px; background:rgba(251,248,242,.34); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(255,255,255,.45); box-shadow:0 8px 28px rgba(42,38,32,.16), inset 0 1px 0 rgba(255,255,255,.5); }
.d-acts button{ min-height:46px; border-radius:16px; gap:2px; font-size:11.5px; color:#2A2620; }
.d-acts button .ic{ width:19px; height:19px; }
.d-acts button:active{ background:rgba(255,255,255,.4); }
.d-acts button[aria-pressed=true]{ background:rgba(217,196,154,.55); }
@media (max-width:420px){ .d-acts button span{ font-size:11px; } }
html.rot .dock{ width:min(380px, calc(100% - 28px)); }
/* 시안용 단계 바꾸기 (입장 화면) */
.stage-sw{ display:flex; align-items:center; justify-content:center; gap:6px; margin:14px auto 0; flex-wrap:wrap; }
.stage-sw span{ font-size:12px; color:var(--sub); margin-right:2px; }
.stage-sw button{ height:32px; padding:0 13px; border-radius:999px; border:1px solid rgba(42,38,32,.14); background:rgba(255,255,255,.55); font:500 13px var(--sans); color:var(--ink); cursor:pointer; }
.stage-sw button[aria-pressed=true]{ background:#D9C49A; border-color:#D9C49A; }
/* ---------- 첫 화면: 청첩장 같은 카드, 뒤로 실제 공간이 은은하게 비침 ---------- */
.gate{ background:radial-gradient(120% 90% at 50% 45%, rgba(251,248,242,.35), rgba(251,248,242,.62)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.gate-in{ max-width:380px; align-items:stretch; text-align:center; padding:40px 28px 30px; border-radius:28px; background:rgba(251,248,242,.8); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); border:1px solid rgba(255,255,255,.7); box-shadow:0 24px 60px rgba(42,38,32,.14); }
.g-date{ margin:0; font-size:13px; letter-spacing:.06em; color:var(--sub); font-variant-numeric:tabular-nums; }
.g-names{ margin:14px 0 0; font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.g-names span{ color:#C9B07E; margin:0 .08em; }
.g-msg{ margin:22px 0 0; font-family:var(--serif); font-size:15.5px; line-height:1.85; color:var(--body); word-break:keep-all; }
.gate .g-line{ margin:20px auto 0; padding-top:18px; border-top:1px solid rgba(201,176,126,.45); width:100%; font-size:14px; font-weight:600; color:#866943; }
.gate .g-l{ margin:26px 0 8px; font-size:14px; font-weight:600; text-align:left; }
.gate input{ text-align:left; }
.g-sound{ margin:10px 0 0; font-size:12.5px; color:var(--sub); }
.g-preview{ margin-top:6px; }
.gate .g-brand{ margin:26px 0 0; font-size:15px; letter-spacing:.24em; color:var(--sub); }
@media (max-width:420px){ .gate{ padding:16px; } .gate-in{ padding:34px 22px 26px; } .g-names{ font-size:32px; } .g-msg{ font-size:15px; } }
/* ---------- 첫 화면 (AFTERWED): 심플 ---------- */
.gate-in{ max-width:360px; padding:46px 30px 30px; }
.g-title{ margin:0; font-family:var(--serif); font-size:30px; letter-spacing:.32em; padding-left:.32em; color:var(--ink); }
.g-by{ margin:6px 0 0; font-size:11px; letter-spacing:.24em; color:var(--sub); }
.g-thanks{ margin:38px 0 0; font-family:var(--serif); font-size:15px; color:var(--body); }
.g-invite{ margin:10px 0 0; font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.55; letter-spacing:-.01em; color:var(--ink); word-break:keep-all; }
.g-couple{ color:#866943; }
.gate-in input#gName{ margin-top:34px; text-align:center; }
.gate-in .btn.main{ margin-top:10px; }
.g-sound{ margin:12px 0 0; font-size:12px; color:var(--sub); }
.g-preview .stage-sw{ margin-top:22px; }
@media (max-width:420px){ .gate-in{ padding:40px 22px 26px; } .g-title{ font-size:27px; } .g-invite{ font-size:21px; } }
.gate h1.g-invite{ margin:10px 0 0; font-size:23px; line-height:1.55; letter-spacing:-.01em; }
.g-couple{ white-space:nowrap; }
@media (max-width:420px){ .gate h1.g-invite{ font-size:21px; } }

/* 단계별 초대장 — 새 소식 뱃지 · 상영 시각 · 다음 단계 예고 */
.gate .g-new{ margin:30px auto 0; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; color:#866943; background:rgba(201,176,126,.16); border:1px solid rgba(201,176,126,.4); }
.gate .g-new + .g-thanks{ margin-top:18px; }
.gate .g-when{ margin:14px 0 0; font-size:13.5px; letter-spacing:.02em; color:#866943; font-variant-numeric:tabular-nums; }
.gate .g-next{ margin:22px 0 0; padding-top:16px; border-top:1px solid rgba(201,176,126,.32); font-size:12.5px; color:var(--sub); font-variant-numeric:tabular-nums; }
/* 시사회: 밤 숲 위 어두운 유리 카드, 버튼은 샴페인 */

/* 조작 안내: 하단 바 바로 위에 작게 (입장 3초 뒤, 안 움직이면 한 번 더) */
.hint{ position:fixed; z-index:9; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); translate:-50% 6px; margin:0; display:flex; align-items:center; gap:6px; padding:7px 13px 7px 11px; border-radius:999px;
  background:rgba(42,38,32,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#FBF8F2; font-size:12.5px; letter-spacing:-.01em; white-space:nowrap; max-width:calc(100% - 28px);
  opacity:0; pointer-events:none; transition:opacity .7s, translate .7s; }
.hint.on{ opacity:1; translate:-50% 0; }
html.night .hint{ background:rgba(20,24,30,.55); border:1px solid rgba(255,255,255,.1); }
html.rot .hint{ bottom:calc(74px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce){ .hint{ transition:none; } }

/* AFTERWED 로고 글씨: Cormorant Garamond (고전 세리프, 얇은 획 대비) */
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
.g-title{ font-family:"Cormorant Garamond", "MaruBuri", serif; font-weight:500; font-size:34px; letter-spacing:.28em; padding-left:.28em; line-height:1.1; }
.g-by{ margin-top:8px; font-size:10.5px; letter-spacing:.32em; padding-left:.32em; }
@media (max-width:420px){ .g-title{ font-size:31px; } }
/* 이름 입력 위 물음 */
.gate .g-ask{ display:block; margin:30px 0 10px; font-family:var(--serif); font-size:15px; color:var(--body); text-align:center; }
.gate-in .g-ask + input#gName{ margin-top:0; }

.gate h1.g-invite{ margin-top:40px; }
/* 상단: 이름 칩 없애고 필름한즈를 왼쪽으로 (세 단계 공통), 로고 글씨 고급스럽게 */
.hud .h-title{ display:none; }
.h-brand{ order:0; margin-left:0; margin-right:auto; font-family:"Cormorant Garamond", var(--serif); font-weight:500; font-size:17px; letter-spacing:.24em; padding:0 18px 0 calc(18px + .24em); }
@media (max-width:420px){ .h-brand{ font-size:15.5px; padding:0 15px 0 calc(15px + .24em); } }

/* 필름한즈 소개: 짧고 고급스럽게 (가운데 정렬 · 로고 세리프 · 얇은 금색 선) */
.b-lux{ align-items:center; text-align:center; gap:0; padding:14px 26px calc(22px + env(safe-area-inset-bottom)); }
.b-lux .b-grip{ width:38px; height:4px; border-radius:4px; background:rgba(42,38,32,.14); margin-bottom:30px; }
.b-lux .b-logo{ margin:0; font-family:"Cormorant Garamond", var(--serif); font-weight:500; font-size:40px; letter-spacing:.26em; padding-left:.26em; line-height:1; }
.b-lux .b-line{ position:relative; margin:22px 0 0; padding-top:22px; font-family:var(--serif); font-size:17px; color:var(--ink); }
.b-lux .b-line::before{ content:""; position:absolute; top:0; left:50%; width:28px; height:1px; translate:-50% 0; background:#C9B07E; }
.b-lux .b-note{ margin:10px 0 30px; font-size:13px; color:var(--sub); line-height:1.6; text-wrap:balance; }
.b-lux .btn{ width:100%; }
.b-lux .btn + .btn{ margin-top:10px; }
.b-lux .b-x{ margin-top:14px; font-size:13.5px; }
/* 방명록 목록: 신랑신부 관리 모드 */
#gbList .gb-own{ padding:10px 12px; border-radius:10px; background:rgba(201,176,126,.16); color:#866943; font-size:13px; }
#gbList .gb-empty{ color:var(--sub); font-size:14px; text-align:center; padding:18px 0; }
#gbList li{ position:relative; }
#gbList li.gb-hid{ opacity:.5; }
#gbList .gb-tg{ position:absolute; top:10px; right:10px; padding:5px 10px; border:0; border-radius:999px; background:rgba(42,38,32,.07); font:inherit; font-size:12px; color:var(--ink); cursor:pointer; }
#gbList li:has(.gb-tg) p{ padding-right:84px; }


/* 첫 화면: 문구가 채워진 뒤에 보이기 */
.gate:not(.ready) .gate-in{ visibility:hidden; }
/* 소리 켜기/끄기 (오른쪽 위, 회전 버튼 옆) */
.snd-tg{ order:4; width:44px; height:44px; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(251,248,242,.86); color:var(--ink); cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.snd-tg[hidden]{ display:none; }
.snd-tg .x{ display:none; } .snd-tg.off .x{ display:inline; } .snd-tg.off .w{ display:none; } .snd-tg.off{ color:var(--sub,#5E5952); }

/* 이름 없이 입장하려 할 때 */
.g-err{ margin:4px 0 0; font-size:13px; color:#A4462F; }
.g-err[hidden]{ display:none; }
.shake{ animation:gshake .38s; } #gbName.shake{ border-color:#D9A99A; }
@keyframes gshake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); } }

/* 방명록 동의 */
.gb-agree{ padding:12px 14px; border-radius:12px; background:rgba(42,38,32,.04); font-size:13px; line-height:1.55; color:var(--sub,#5E5952); text-align:left; }
.gb-agree label{ display:flex; gap:10px; align-items:center; cursor:pointer; color:var(--ink,#2A2620); font-size:14px; }
.gb-agree label b{ color:#A4462F; font-weight:600; }
.gb-agree input{ flex:none; width:18px; height:18px; margin:0; accent-color:#B89B72; }
.gb-sum{ margin:6px 0 0 28px; }
.gb-more{ margin:4px 0 0 28px; }
.gb-more summary{ cursor:pointer; color:#866943; font-size:12.5px; list-style:none; text-decoration:underline; text-underline-offset:2px; }
.gb-more summary::-webkit-details-marker{ display:none; }
.gb-more dl{ display:grid; grid-template-columns:72px 1fr; gap:4px 10px; margin:8px 0 0; font-size:12.5px; }
.gb-more dt{ color:var(--ink,#2A2620); font-weight:600; } .gb-more dd{ margin:0; }
.gb-more a{ color:#866943; }

/* 시트가 열려 있으면 가운데 소리 켜기 버튼은 숨김 */
body:has(#gb:not([hidden])) #snd, body:has(#brand:not([hidden])) #snd{ display:none; }

/* 소개 페이지에 넣는 화면 (?show=1): 버튼 · 안내 · 입장 화면 모두 숨김 */
html.aw-show #gate,html.aw-show #hud,html.aw-show #dock,html.aw-show #tip,html.aw-show #hint,html.aw-show #snd,html.aw-show #sndTg,html.aw-show #gb,html.aw-show #brand{display:none!important}

/* 두 사람의 정원 (청첩장 버전) */
.inv-sheet{ max-height:82vh; overflow:auto; gap:12px; }
.inv-b{ display:flex; flex-direction:column; gap:12px; }
.inv-big{ margin:4px 0 0; font-family:var(--serif); font-size:24px; line-height:1.45; }
.inv-ttl{ margin:6px 0 0; font-family:var(--serif); font-size:20px; text-align:center; }
.inv-p{ margin:0; font-size:15px; line-height:1.7; }
.inv-p span{ color:var(--sub); font-size:14px; }
.inv-c{ text-align:center; font-family:var(--serif); }
.inv-par{ margin:0; text-align:center; font-size:15px; }
.inv-par span{ color:var(--sub); margin:0 6px 0 2px; font-size:13.5px; }
.inv-par .dc{ margin:0; }
.inv-row{ padding:12px 0; border-top:1px solid rgba(42,38,32,.08); }
.inv-row b{ font-size:13px; font-weight:600; color:#A88A55; }
.inv-row p{ margin:4px 0 0; font-size:14.5px; line-height:1.6; }
.inv-sd{ margin:8px 0 0; font-size:13px; font-weight:600; color:#A88A55; }
.inv-line{ display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid rgba(42,38,32,.08); }
.inv-line span{ flex:1; font-size:15px; }
.inv-line em{ display:block; font-style:normal; font-size:12.5px; color:var(--sub); }
.inv .btn.sm{ min-height:38px; padding:0 14px; font-size:13.5px; }
.inv-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.inv-acts .btn{ flex:1; }
.inv-menu{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inv-note{ margin:0; text-align:center; font-size:12.5px; color:var(--sub); }
.inv-ph{ margin:0; border-radius:14px; overflow:hidden; background:#EFE9DF; }
.inv-ph img{ display:block; width:100%; max-height:58vh; object-fit:contain; }
.inv-nav{ align-items:center; }
.inv-nav span{ font-size:13px; color:var(--sub); }
html.aw-inv #snd{ display:none !important; }
.inv .btn{ min-height:46px; padding:0 16px; font-size:14.5px; }
.inv .btn:not(.main){ background:rgba(42,38,32,.06); color:var(--ink); }
html.aw-inv #brand .b-note{ display:none; }   /* 두 사람의 정원: '지금 상영 중인 영상도…' 문구 빼기 */
html.aw-inv #brand .b-line{ margin-bottom:24px; }

/* 소리 창 (오른쪽 위 소리 버튼 아래) — 공간 안에서 소리 크기 조절 */
.vol{ position:fixed; z-index:30; top:calc(env(safe-area-inset-top, 0px) + 64px); right:12px; width:236px; padding:14px 16px 16px; border-radius:18px; background:rgba(251,248,242,.96); color:var(--ink,#2A2620); box-shadow:0 10px 30px rgba(30,24,16,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.vol[hidden]{ display:none; }
.vol-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vol-hd b{ font-size:14px; font-weight:600; }
.vol-m{ border:0; border-radius:999px; padding:7px 13px; font:inherit; font-size:13px; background:rgba(42,38,32,.07); color:inherit; cursor:pointer; }
.vol-m.on{ background:#D9C49A; color:#2A2010; }
.vol-row{ display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--sub,#5E5952); }
.vol-row[hidden]{ display:none; }
.vol-row input{ flex:1; height:28px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; }
.vol-row input::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, #C9A96E var(--p,100%), rgba(42,38,32,.12) var(--p,100%)); }
.vol-row input::-moz-range-track{ height:6px; border-radius:3px; background:rgba(42,38,32,.12); }
.vol-row input::-moz-range-progress{ height:6px; border-radius:3px; background:#C9A96E; }
.vol-row input::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.vol-row input::-moz-range-thumb{ width:22px; height:22px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.vol-n{ width:28px; text-align:right; font-size:12.5px; font-variant-numeric:tabular-nums; }
.vol-ios{ margin:12px 0 0; padding:9px 11px; border-radius:12px; background:rgba(217,196,154,.28); font-size:12.5px; line-height:1.5; color:var(--ink,#2A2620); }