/* ============================================================
   설치형 모바일 청첩장 — 웹·앱 공용 스타일 (app.html 과 web 셸이 함께 로드).
   scoped <style> 금지(앱 주입 시 유실) — 모두 unscoped 클래스.
   테마색은 --wk-theme(주입), 서체는 명조(제목)+Pretendard(본문).
   ============================================================ */
:root {
  --primary: var(--wk-theme, #b08968);
  --soft: var(--wk-soft, #f7f1ea);
  --ink: var(--wk-ink, #4a4038);
  --muted: #9a8f83;
  --line: #e8ddd1;
  --card: #fffdfb;
  --serif: 'Nanum Myeongjo', 'Gowun Batang', serif;
}
body { background: var(--soft); color: var(--ink); font-family: 'Pretendard', -apple-system, system-ui, sans-serif; line-height: 1.7; }
img { max-width: 100%; display: block; }

/* 섹션 공통 */
.sec { padding: 60px 30px; text-align: center; }
.sec__label { font-family: var(--serif); font-size: 12.5px; letter-spacing: .3em; color: var(--primary); font-weight: 700; margin-bottom: 20px; text-transform: uppercase; }
.sec__title { font-family: var(--serif); font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 24px; }
.divider { width: 1px; height: 44px; background: var(--line); margin: 0 auto; }

/* 표지 */
.cover { position: relative; height: 78vh; min-height: 540px; color: #fff; overflow: hidden; }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,10,.28), rgba(20,14,10,.1) 42%, rgba(20,14,10,.62)); }
.cover__top { position: absolute; top: 46px; left: 0; right: 0; text-align: center; }
.cover__label { font-family: var(--serif); font-size: 12px; letter-spacing: .32em; opacity: .92; }
.cover__bottom { position: absolute; bottom: 60px; left: 0; right: 0; text-align: center; padding: 0 26px; }
.cover__names { font-family: var(--serif); font-size: 33px; font-weight: 800; letter-spacing: .04em; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.cover__names .amp { display: inline-block; margin: 0 12px; font-weight: 400; opacity: .9; }
.cover__date { margin-top: 13px; font-size: 13.5px; letter-spacing: .18em; font-weight: 600; opacity: .95; }

/* 인사말 */
.greet { white-space: pre-line; font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 2.1; }
.parents { margin-top: 30px; font-size: 14.5px; }
.parents .prow { margin: 7px 0; }
.parents .fam { color: var(--muted); }
.parents .dot { color: var(--primary); }
.parents b { font-weight: 800; }
.cta-quick { display: inline-block; margin-top: 22px; font-family: var(--serif); font-size: 14px; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); padding-bottom: 3px; }

/* 갤러리 */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gal__it { aspect-ratio: 1; overflow: hidden; border-radius: 4px; display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }
.gal__it img { width: 100%; height: 100%; object-fit: cover; }

/* 갤러리 팝업 라이트박스 (app.html 이 JS로 생성 — #앵커 안 씀) */
.wk-lb { position: fixed; inset: 0; z-index: 9000; background: rgba(20,14,10,.95); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wk-lb img { max-width: 94%; max-height: 82%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
/* 닫기 버튼 — 우상단, 크고 또렷하게 (세이프에어리어 반영) */
.wk-lb__x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wk-lb__x:active { background: rgba(255,255,255,.3); }
/* 이전/다음 */
.wk-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wk-lb__nav.prev { left: 12px; } .wk-lb__nav.next { right: 12px; }
.wk-lb__count { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-family: var(--serif); font-size: 13px; letter-spacing: .1em; }

/* 달력 */
.when__big { font-family: var(--serif); font-size: 21px; font-weight: 800; color: var(--ink); }
.cal { margin: 24px auto 0; max-width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; }
.cal__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 11px; color: var(--muted); font-weight: 700; }
.cal__wd .sun { color: #d06a5f; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal__grid span { font-size: 12.5px; padding: 7px 0; color: var(--ink); font-weight: 600; position: relative; display: flex; align-items: center; justify-content: center; height: 34px; }
.cal__grid .sun { color: #d06a5f; }
.cal__grid .mut { color: transparent; }
.cal__grid .mark { color: #fff; font-weight: 800; isolation: isolate; }
.cal__grid .mark::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; background: var(--primary); border-radius: 50%; z-index: -1; }
.dday { margin-top: 22px; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.dday b { color: var(--primary); font-weight: 800; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 12px 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; }

/* 오시는 길 */
.place__name { font-family: var(--serif); font-size: 19px; font-weight: 800; }
.place__hall { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.place__addr { margin-top: 14px; font-size: 14.5px; }
.map-btns { display: flex; gap: 8px; margin-top: 16px; }
.map-btns .btn { flex: 1; }
.transport { margin-top: 20px; text-align: left; padding: 0; }
.transport li { list-style: none; font-size: 13px; color: var(--ink); padding: 9px 0; border-top: 1px dashed var(--line); }
.transport li:first-child { border-top: 0; }

/* 마음 전하실 곳 */
.acc__note { font-size: 13.5px; color: var(--muted); line-height: 1.9; margin-bottom: 20px; }
.acc { text-align: left; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.acc__head { width: 100%; border: 0; background: none; cursor: pointer; padding: 15px 18px; font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.acc__arw { color: var(--primary); font-size: 18px; transition: transform .3s; }
.acc.open .acc__arw { transform: rotate(180deg); }
.acc__panel { display: none; padding: 0 12px 14px; }
.acc.open .acc__panel { display: block; }
.acc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: var(--soft); }
.acc__row .info .bank { color: var(--muted); font-size: 12.5px; }
.acc__row .info .num { font-weight: 800; color: var(--ink); font-size: 14.5px; }
.acc__row .copy { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--primary); border: 1px solid var(--primary); background: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; }

/* 마무리 */
.closing { position: relative; color: #fff; }
.closing__img { height: 400px; }
.closing__img img { width: 100%; height: 100%; object-fit: cover; }
.closing__msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; background: linear-gradient(180deg, rgba(20,14,10,.12), rgba(20,14,10,.5)); }
.closing__msg p { white-space: pre-line; font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 2; text-align: center; text-shadow: 0 2px 16px rgba(0,0,0,.4); }

/* 웹 상단 네비/푸터 (앱에선 data-spa-ignore 로 제거됨) */
.wnav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: rgba(247,241,234,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.wnav__brand { font-family: var(--serif); font-weight: 800; color: var(--ink); text-decoration: none; font-size: 16px; }
.wnav__brand span { color: var(--primary); }
.wnav__links { display: flex; gap: 16px; }
.wnav__links a { font-size: 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
.wfoot { text-align: center; padding: 26px; font-family: var(--serif); font-size: 12px; color: var(--muted); letter-spacing: .05em; }

/* 토스트 (app.html 복사 핸들러가 생성) */
.wk-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: rgba(74,64,56,.95); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; z-index: 9500; }