/* ================================================================
   style.css — 청첩장 '디자인' 파일
   · 레퍼런스가 확정되면 이 파일만 교체/수정합니다.
   · 색·글꼴은 맨 위 :root 블록에서 한 번에 바꿀 수 있습니다.

   레이아웃: 휴대폰 너비(최대 430px)의 '종이 한 장'을 화면 가운데 세우고
            결 있는 웜그레이 종이 위에 브라운 잉크로 찍은 듯한 인쇄물 톤.
            (첨부 레퍼런스 3·4·5번의 종이 질감 + 브라운 포인트를 따름)
   ================================================================ */
:root{
  --outer:#E4DED5;        /* PC에서 청첩장 바깥 배경 */
  --paper:#F4F1EC;        /* 종이색 */
  --paper-2:#EDE8E0;      /* 섹션 교차 배경 */
  --card:#FFFFFF;         /* 흰 버튼·카드 */
  --line:#DDD5CA;         /* 가는 선 */
  --ink:#3A3330;          /* 본문 글자 */
  --muted:#8E857C;        /* 보조 글자 */
  --brown:#8A5426;        /* 포인트 (제목·버튼) */
  --brown-deep:#6E4019;   /* 날짜 원 */
  --rose:#E09A98;         /* 일요일·공휴일 */
  --kakao:#FEE500;        /* 카카오 노랑 */
  --kakao-ink:#191600;
  --scrim:rgba(40,34,30,.5);
  --lb:rgba(28,24,21,.96);
  --lb-fg:#EFE8DD;

  --f-display:'Gowun Batang','Nanum Myeongjo','AppleMyungjo',serif;  /* 이름·제목·인용 */
  --f-body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif; /* 본문 */
  --f-num:'Cormorant Garamond','Times New Roman',serif;               /* 숫자·영문 */

  --w:430px;
  color-scheme:light;
}

/* 종이 질감 (아주 옅은 노이즈) */
.page{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* 숨긴 창이 화면을 가리지 않도록 (지우지 마세요) */
html{background:var(--outer);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--outer);color:var(--ink);font-family:var(--f-body);
  font-size:19.5px;line-height:1.85;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}

.page{max-width:var(--w);margin:0 auto;box-shadow:0 0 50px rgba(58,48,40,.12);overflow:hidden}
.sec{padding:88px 20px;text-align:center}
.sec.alt{background:rgba(222,212,198,.32)}
.eyebrow{font-family:var(--f-num);font-size:17px;letter-spacing:.32em;text-transform:uppercase;color:var(--brown);margin:0 0 6px}
.title{font-family:var(--f-display);font-weight:400;font-size:27.5px;color:var(--brown);margin:0 0 36px;text-wrap:balance}
.desc{color:var(--muted);font-size:18px;margin:-18px 0 30px;line-height:1.75}
.hair{width:44px;height:1px;background:var(--line);margin:40px auto;border:0}

/* 공통 버튼 */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:6px 14px;font-size:17px;color:var(--brown);line-height:1.4;text-decoration:none}
.pill svg{width:18px;height:18px}
.btn-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:340px;margin:0 auto;
  border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 18px;font-size:19.5px;color:var(--brown);text-decoration:none}
.btn-wide svg{width:22px;height:22px}
.btn-wide + .btn-wide{margin-top:10px}
.btn-kakao{background:var(--kakao);border-color:var(--kakao);color:var(--kakao-ink)}
.btn-kakao .kakao-ic{width:20px;height:20px}

/* ---------- 배경음악 버튼 (오른쪽 위 고정) ---------- */
/* 어르신도 알아보기 쉽게: 아이콘 + 'ON/OFF' 글자 */
.bgm{position:fixed;z-index:40;top:calc(env(safe-area-inset-top,0px) + 12px);
  right:max(12px, calc(50vw - (var(--w) / 2) + 12px));
  height:36px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--muted);
  display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(58,48,40,.12);backdrop-filter:blur(4px)}
.bgm.playing{background:var(--brown);border-color:var(--brown);color:#fff}
.bgm-ic{display:flex;align-items:center;gap:2px;width:16px;height:16px;justify-content:center}
.bgm-ic.on{display:none}
.bgm.playing .bgm-ic.on{display:flex}
.bgm.playing .bgm-ic.off{display:none}
.bgm-ic i{display:block;width:2.5px;height:6px;border-radius:1px;background:currentColor}
.bgm.playing .bgm-ic i{animation:eq 1s ease-in-out infinite}
.bgm.playing .bgm-ic i:nth-child(2){animation-delay:-.6s}
.bgm.playing .bgm-ic i:nth-child(3){animation-delay:-.3s}
.bgm-tip{position:fixed;z-index:40;margin:0;top:calc(env(safe-area-inset-top,0px) + 56px);
  right:max(12px, calc(50vw - (var(--w) / 2) + 12px));
  background:rgba(58,51,48,.9);color:#F4F1EC;font-size:12.5px;padding:7px 12px;border-radius:10px;
  animation:tip 1.6s ease-in-out infinite}
.bgm-tip::before{content:"";position:absolute;top:-5px;right:26px;border:5px solid transparent;border-top:0;border-bottom-color:rgba(58,51,48,.9)}
@keyframes tip{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}

/* ---------- ① 첫 화면 (레퍼런스 3) ---------- */
.hero{padding:72px 20px 56px;display:flex;flex-direction:column;align-items:center;text-align:center}
.vnames{display:flex;align-items:flex-start;justify-content:center;gap:26px;margin:0 0 36px;
  font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.55}
.vname{display:flex;flex-direction:column}
.vslash{width:1px;height:38px;background:var(--ink);transform:rotate(32deg);align-self:center;margin-top:10px}
.hero-photo{width:100%;aspect-ratio:4/5;max-width:100%;overflow:hidden;margin:0 0 30px}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-when{font-family:var(--f-display);font-size:21px;margin:0}
.hero-rule{width:100%;max-width:300px;height:1px;background:var(--line);margin:16px auto}
.hero-where{font-family:var(--f-display);font-weight:700;font-size:21px;margin:0}

/* 첫 화면 등장 연출 */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero > *{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero > :nth-child(2){animation-delay:.2s}
.hero > :nth-child(3){animation-delay:.4s}
.hero > :nth-child(4){animation-delay:.5s}
.hero > :nth-child(5){animation-delay:.6s}

/* 사진 자리 */
.ph{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:6px;
  color:#8A7560;font-size:15.5px;letter-spacing:.04em;background:linear-gradient(160deg,#E9E1D5,#D6C8B6)}
.ph svg{width:22px;height:22px;opacity:.55}
.ph.t2{background:linear-gradient(160deg,#ECE6DE,#D3C9BD)}
.ph.t3{background:linear-gradient(160deg,#EEE4DD,#D8C4B8)}
.ph.t4{background:linear-gradient(160deg,#E8E4DC,#CFC6B9)}

/* ---------- ② 인사말 (레퍼런스 4) ---------- */
.quote{font-family:var(--f-display);font-size:19.5px;line-height:2;margin:0}
.quote-src{font-size:17.5px;color:var(--muted);margin:14px 0 0}
.greeting{font-family:var(--f-display);font-size:19.5px;line-height:2.1;margin:44px 0 0}
.greeting p{margin:0 0 1.4em}
.greeting p:last-child{margin:0}
.family{display:grid;gap:10px;margin:0 0 36px;font-size:20px}
.family-row{display:flex;justify-content:center;align-items:baseline;gap:6px;flex-wrap:wrap}
.family-row .dot{color:var(--muted);margin:0 2px}
.family-row .rel{color:var(--muted);font-size:18px}
.family-row .child{font-weight:700;min-width:3.4em;text-align:left}

/* ---------- ③ 신랑 신부 소개 (레퍼런스 2) ---------- */
.couple{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.who{min-width:0;display:flex;flex-direction:column;align-items:center}
.who-photo{width:100%;aspect-ratio:1;max-width:100%;overflow:hidden;border-radius:6px;margin-bottom:16px}
.who-photo img{width:100%;height:100%;object-fit:cover}
.who-name{display:flex;align-items:center;gap:6px;font-size:21px;margin:0}
.who-role{font-size:17px}
.who-role.g{color:#7C7A55}
.who-role.b{color:#B86C6A}
.who-call{border:0;background:none;padding:2px;color:var(--ink);display:grid;place-items:center}
.who-call svg{width:15px;height:15px}
.who-birth{font-size:18px;margin:6px 0 18px}
.who-traits{font-size:19px;line-height:1.7;margin:0 0 18px}
.who-promise{font-family:var(--f-display);font-size:19.5px;line-height:1.7;margin:0 0 18px}
.who-parents{font-size:16px;color:var(--muted);margin:0}

/* ---------- ④ 달력 + 카운트다운 (레퍼런스 5) ---------- */
.big-date{font-family:var(--f-num);font-weight:500;font-size:44px;letter-spacing:.06em;line-height:1;margin:0 0 10px;font-variant-numeric:lining-nums}
.big-sub{font-size:19.5px;color:var(--muted);margin:0}
.cal{max-width:340px;margin:30px auto 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0 16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:8px;font-size:19.5px;font-variant-numeric:tabular-nums}
.cal-grid .wd{padding-bottom:8px;font-size:19.5px}
.cal-grid .d{height:46px;display:grid;place-items:center}
.cal-grid .red{color:var(--rose)}
.cal-grid .on span{width:44px;height:44px;border-radius:50%;background:var(--brown-deep);color:#fff;font-weight:700;display:grid;place-items:center}
.count{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:0 0 18px}
.count-cell{display:flex;flex-direction:column;align-items:center;min-width:54px}
.count-lab{font-family:var(--f-num);font-size:14.5px;letter-spacing:.14em;color:var(--muted)}
.count-num{font-family:var(--f-num);font-weight:500;font-size:39px;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.count-sep{font-family:var(--f-num);font-size:26px;color:var(--muted);padding-bottom:6px}
.dday-msg{font-size:19.5px;margin:0 0 30px}
.dday-msg b{color:var(--brown);font-weight:700}

/* ---------- ⑤ 갤러리 ---------- */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gal button{padding:0;border:0;background:none;aspect-ratio:4/5;max-width:100%;overflow:hidden;display:block;min-width:0;border-radius:3px}
.gal img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s ease}
.gal-more{margin-top:20px}
.gal button:hover img{transform:scale(1.04)}
.gal .ph{font-family:var(--f-num);font-size:19.5px;letter-spacing:.1em}
.gal .ph svg{width:18px;height:18px}
.gal-hint{font-size:15.5px;color:var(--muted);margin:16px 0 0}

/* 사진 크게 보기 */
.lb{position:fixed;inset:0;z-index:60;background:var(--lb);display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 64px)}
.lb-stage{margin:0;width:100%;max-width:var(--w);height:100%;display:grid;place-items:center}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-stage .ph{width:min(100%,48vh);height:auto;aspect-ratio:4/5;border-radius:4px;font-size:18px}
.lb-btn{position:absolute;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--lb-fg);display:grid;place-items:center}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:calc(env(safe-area-inset-top,0px) + 12px);right:12px}
.lb-prev{left:8px;top:50%;transform:translateY(-50%)}
.lb-next{right:8px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);margin:0;text-align:center;
  color:var(--lb-fg);opacity:.7;font-family:var(--f-num);font-size:19.5px;letter-spacing:.24em}

/* ---------- ⑥ 오시는 길 ---------- */
.venue-name{font-family:var(--f-display);font-weight:700;font-size:24.5px;margin:0}
.venue-hall{color:var(--muted);font-size:18px;margin:2px 0 12px}
.addr{font-size:19px;margin:0}
.landmark{font-size:17px;color:var(--muted);margin:0 0 14px}
.chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.map{position:relative;margin:28px 0 12px;aspect-ratio:20/17;max-width:100%;border-radius:12px;overflow:hidden;
  background:
    linear-gradient(90deg,transparent 46%,var(--line) 46% 50%,transparent 50%),
    linear-gradient(0deg,transparent 56%,var(--line) 56% 60%,transparent 60%),
    linear-gradient(28deg,transparent 30%,#E6DED3 30% 32%,transparent 32%),
    var(--paper-2)}
.map img{width:100%;height:100%;object-fit:cover}
.map > a{display:block;width:100%;height:100%}
.map-zoom{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:4px;font-size:15px;color:var(--brown);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:3px 9px;pointer-events:none}
.map-zoom svg{width:13px;height:13px}
/* 카카오 지도 */
.map.live{background:var(--paper-2)}
.kmap-label{background:var(--brown);color:#fff;font-size:15px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.map-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;color:var(--muted);font-size:15px;text-align:center;padding:16px}
.map-wait svg{width:34px;height:34px;color:var(--brown)}
.map-pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);display:grid;justify-items:center;gap:2px}
.map-pin svg{width:30px;height:30px;color:var(--brown);fill:var(--card)}
.map-pin span{font-size:15.5px;background:var(--card);border:1px solid var(--line);padding:2px 9px;border-radius:999px;white-space:nowrap}
.map-note{position:absolute;right:10px;bottom:8px;font-size:13.5px;color:var(--muted)}
.nav-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:40px}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;min-width:0;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;font-size:17px}
.nav-btn svg{width:22px;height:22px;color:var(--brown)}
.ways{text-align:left;border-top:1px solid var(--line)}
.way{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.way svg{width:24px;height:24px;color:var(--brown);margin-top:3px}
.way h3{font-size:19px;font-weight:700;margin:0 0 2px}
.way ul{margin:0;padding:0;list-style:none;font-size:18px;color:var(--muted);line-height:1.75}

/* ---------- ⑦ 마음 전하실 곳 ---------- */
.acc{border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:left;overflow:hidden}
.acc + .acc{margin-top:10px}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:none;border:0;font-size:19.5px;text-align:left}
.acc-head svg{width:18px;height:18px;color:var(--brown);transition:transform .3s ease}
.acc-head[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-wrap.open{grid-template-rows:1fr}
.acc-inner{overflow:hidden;visibility:hidden;transition:visibility 0s .35s}
.acc-wrap.open .acc-inner{visibility:visible;transition:visibility 0s}
.acc-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.acc-info{min-width:0}
.acc-who{font-size:16px;color:var(--muted)}
.acc-num{font-size:19px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.acc-item .pill{flex:none}

/* ---------- ⑨ 푸터 ---------- */
.footer{padding-block:96px calc(80px + env(safe-area-inset-bottom,0px))}
.foot-date{font-family:var(--f-num);font-weight:500;font-size:41.5px;letter-spacing:.12em;line-height:1;margin:0 0 14px}
.foot-msg{font-family:var(--f-display);font-size:21px;margin:0 0 40px}
.foot-copy{font-family:var(--f-num);font-size:17px;letter-spacing:.16em;color:var(--muted);margin:40px 0 0}

/* ---------- 아래에서 올라오는 창 (연락하기·캘린더·참석) ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{width:100%;max-width:var(--w);max-height:88svh;overflow:auto;background:var(--card);
  border-radius:20px 20px 0 0;padding:26px 24px calc(28px + env(safe-area-inset-bottom,0px));animation:up .3s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sheet-title{font-family:var(--f-display);font-size:23.5px;font-weight:700;margin:0}
.sheet-x{width:36px;height:36px;border:0;background:none;display:grid;place-items:center;margin-right:-8px}
.sheet-x svg{width:20px;height:20px}
.sheet-group + .sheet-group{margin-top:22px}
.sheet-group h4{font-size:17px;color:var(--muted);font-weight:400;margin:0 0 4px}
.c-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.c-row .r{font-size:17px;color:var(--muted);margin-right:6px}
.c-acts{display:flex;gap:8px}
.c-acts a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--brown)}
.c-acts svg{width:16px;height:16px}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);text-decoration:none;color:var(--ink);text-align:left}
.opt + .opt{margin-top:10px}
.opt svg{width:22px;height:22px;color:var(--brown);flex:none}
.opt b{display:block;font-size:19.5px;font-weight:700}
.opt small{display:block;font-size:16px;color:var(--muted);line-height:1.5}
.sheet-note{font-size:15.5px;color:var(--muted);margin:16px 0 0;line-height:1.6}

/* 참석 의사 폼 (레퍼런스 1) */
.rsvp{display:grid;gap:22px}
.q{border:0;margin:0;padding:0;min-width:0}
.q legend,.q-label{font-size:19px;font-weight:700;margin:0 0 10px;padding:0;display:block}
.req{color:#D9534F;font-size:18px;margin-left:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 14px;font-size:19px;color:var(--muted);cursor:pointer}
.seg.four{grid-template-columns:1fr 1fr}
.ck{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center}
.ck svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.seg input:checked + label{border-color:var(--brown);color:var(--ink);font-weight:700;background:#FBF5EE}
.seg input:checked + label .ck{background:var(--brown);border-color:var(--brown)}
.seg input:checked + label .ck svg{opacity:1}
.seg input:focus-visible + label{outline:2px solid var(--brown);outline-offset:2px}
.line-in{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 0;font-size:21px;border-radius:0}
.line-in:focus{outline:none;border-color:var(--ink)}
select.line-in{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233A3330' stroke-width='2.4'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 4px center}
.rsvp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rsvp-foot small{font-size:15px;color:var(--muted);line-height:1.5}
.btn-dark{border:0;border-radius:6px;background:#6B6560;color:#fff;padding:13px 26px;font-size:19.5px;font-weight:700;flex:none}
.btn-dark:disabled{opacity:.5}

/* ---------- 알림(토스트) ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);z-index:70;transform:translate(-50%,16px);
  max-width:calc(100% - 32px);width:max-content;text-align:center;background:rgba(58,51,48,.94);color:#F4F1EC;
  padding:11px 20px;border-radius:999px;font-size:17.5px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 스크롤 등장 효과(AOS) ---------- */
[data-aos].aos-init{transition:opacity .9s ease-out,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-aos="fade-up"].aos-init:not(.aos-animate){opacity:0;transform:translate3d(0,22px,0)}
[data-aos][data-aos-delay="100"].aos-animate{transition-delay:.1s}
[data-aos][data-aos-delay="200"].aos-animate{transition-delay:.2s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-aos]{opacity:1!important;transform:none!important}
}

/* ---------- 참석 양식: 동반 인원(− 숫자 +) · 특이사항 ---------- */
.stepper{display:flex;align-items:center;gap:10px}
.step-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  color:var(--brown);font-size:24px;line-height:1;display:grid;place-items:center;padding:0}
.step-btn:active{background:#FBF5EE}
.step-val{display:flex;align-items:baseline;gap:4px}
.step-val input{width:3.2em;text-align:center;border:0;border-bottom:1.5px solid var(--line);background:none;
  font-size:22px;font-weight:700;padding:4px 0;border-radius:0;-moz-appearance:textfield}
.step-val input::-webkit-outer-spin-button,.step-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step-val input:focus{outline:none;border-color:var(--ink)}
.step-val span{font-size:18px;color:var(--muted)}
.note-in{width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;
  font-size:18px;line-height:1.6;resize:vertical;min-height:84px}
.note-in::placeholder{color:#B8AEA3}
.note-in:focus{outline:none;border-color:var(--brown)}

/* ---------- 감사 팝업 (화면 아무 곳이나 누르면 닫힘) ---------- */
.thanks{position:fixed;inset:0;z-index:80;background:rgba(40,34,30,.55);display:flex;align-items:center;justify-content:center;
  padding:24px;cursor:pointer;animation:fadein .25s ease-out}
.thanks-card{width:100%;max-width:340px;background:var(--paper);border-radius:20px;padding:38px 26px 26px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25);animation:pop .3s cubic-bezier(.2,.8,.3,1.2)}
.thanks-ic{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--brown);display:grid;place-items:center}
.thanks-ic svg{width:26px;height:26px;fill:#fff}
.thanks-msg{font-family:var(--f-display);font-size:20px;line-height:1.8;color:var(--ink);margin:0 0 22px;word-break:keep-all}
.thanks-hint{font-size:14px;color:var(--muted);margin:0}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}

/* ---------- 맨 아래 저작권 문구 ---------- */
.foot-legal{font-size:13px;color:#A39A90;line-height:1.7;margin:28px 0 0;word-break:keep-all}