/* 청첩장 스타일. 폰트는 build.py 가 서브셋해 dist/fonts/ 에 넣는다.
   ⚠️ Soomyungjo210 · Cherishline 은 웹 라이선스가 없다. 여기에 쓰면
   scripts/check_font_license.py 가 빌드를 실패시킨다. */

@font-face {
  font-family: 'Gowun Batang';
  src: url('fonts/gowun-batang.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('fonts/great-vibes.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  --ink: #2b2723;
  --ink-soft: #6c635b;
  --line: #e2dbd2;
  --paper: #fbf9f6;
  --accent: #8c7a63;
  --w: 26rem;            /* 본문 최대폭 */
  --serif: 'Gowun Batang', 'Apple SD Gothic Neo', serif;
  --script: 'Great Vibes', cursive;
  --sans: 'Archivo', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 16px; line-height: 1.9;
  word-break: keep-all;   /* 한국어 줄바꿈을 어절 단위로 */
}
img { display: block; max-width: 100%; height: auto; }

section { max-width: var(--w); margin: 0 auto; padding: 4.5rem 1.75rem; text-align: center; }
section + section { border-top: 1px solid var(--line); }

.eyebrow { font-family: var(--script); font-size: 2rem; color: var(--accent);
           margin: 0 0 2rem; line-height: 1; }
.script  { font-family: var(--script); }

/* ── 표지 ── */
.cover {
  position: relative; max-width: none; padding: 0;
  min-height: 100svh;                 /* iOS 사파리 주소창 대응 */
  /* 글자를 가운데가 아니라 아래에 둔다. 가운데에 두면 인물 얼굴과 겹친다. */
  display: grid; align-items: end; justify-items: center; overflow: hidden;
}
@supports not (height: 100svh) { .cover { min-height: 100vh; } }
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 글자가 앉는 아래쪽을 확실히 눌러 준다. 표본 사진의 하단 밝기가 192 로
   매우 밝아 이 정도가 필요했다. 어두운 사진으로 바꾸면 완화해도 된다. */
.cover-veil  { position: absolute; inset: 0;
               background: linear-gradient(180deg,
                 rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 30%,
                 rgba(0,0,0,.34) 62%, rgba(0,0,0,.72) 100%); }
.cover-text  { position: relative; color: #fff; padding: 0 1.5rem 5.5rem;
               text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.cover-text .script { font-size: 3.1rem; line-height: 1.15; margin: 0 0 .5rem; }
.cover-text .amp    { font-size: .8em; opacity: .85; }
.cover-text h1      { font-size: 1.35rem; font-weight: 400; letter-spacing: .22em;
                      margin: 0 0 1.3rem; }
.cover-text h1 .dot { opacity: .6; margin: 0 .2em; }
.cover-text .when   { font-family: var(--sans); font-size: .84rem; letter-spacing: .14em;
                      margin: 0 0 .25rem; }
.cover-text .where  { font-family: var(--sans); font-size: .84rem; letter-spacing: .14em;
                      margin: 0; opacity: .88; }
.scroll-cue { position: absolute; bottom: 1.6rem; left: 50%; width: 1px; height: 2.4rem;
              background: linear-gradient(#fff0, #fffc); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity:.25; transform: translateY(-6px); } 50% { opacity:.9; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ── 인사말 ── */
.invite .body { margin: 0 0 3rem; }
/* 인사말은 연 단위 문단이다. <br> 를 겹쳐 쓰면 연 사이가 두 줄씩 벌어진다. */
.invite .body p { margin: 0; }
.invite .body p + p { margin-top: 1.15em; }
.parents { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.parents div { display: flex; justify-content: center; }
/* 조사 '의' 는 앞말에 붙어야 한다. dt/dd 사이에 gap 을 주면 '정문희 의' 로 떨어진다. */
.parents .of { margin-right: .3rem; }
.parents dt, .parents dd { margin: 0; }
.parents b { color: var(--ink); font-weight: 400; }

/* ── 예식 안내 ── */
.date-big   { font-family: var(--sans); font-size: 1.05rem; letter-spacing: .1em; margin: 0 0 2.2rem; }
.place-name { font-size: 1.15rem; margin: 0 0 .2rem; }
.place-sub, .place-addr { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ── 갤러리 ── */
/* 3열 촘촘한 격자. 22장을 2열로 깔면 3.5화면을 잡아먹어 그 아래 실용 정보가
   너무 멀어진다(실측 2,970px → 1,594px). 크게 보는 것은 뷰어가 맡는다. */
.gallery { max-width: none; padding-left: 0; padding-right: 0; }
.gallery .eyebrow { padding: 0 1.75rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.grid figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #efeae4;
               cursor: pointer; }
.grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.grid figure:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid-hint { font-size: .74rem; letter-spacing: .06em; color: var(--ink-soft);
             margin: 1rem 0 0; padding: 0 1.75rem; }

/* 전체화면 뷰어 */
.viewer { position: fixed; inset: 0; z-index: 50; background: #0f0e0d;
          display: flex; flex-direction: column; justify-content: center; }
.viewer[hidden] { display: none; }
/* pan-x 는 좌우로 넘기는 것만 허용하고 핀치 줌을 막는다.
   페이지 전체의 줌은 건드리지 않는다 — 글자를 키워 읽는 분들이 있다. */
.viewer-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch; scrollbar-width: none;
                touch-action: pan-x; }
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-strip figure { margin: 0; flex: 0 0 100%; scroll-snap-align: center;
                       display: flex; align-items: center; justify-content: center;
                       padding: 0 .5rem; }
/* 길게 눌러 저장하는 것을 어렵게 한다. 완전 차단은 불가능하다(화면 캡처는 못 막는다). */
.grid img, .viewer-strip img, .cover-photo {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.viewer-strip figure { position: relative; }
/* 사진 위에 투명한 판을 덮는다. 길게 누르면 이 판이 눌려 저장 메뉴가 뜨지 않는다. */
.viewer-strip figure::after { content: ''; position: absolute; inset: 0; }
.viewer-strip img { max-width: 100%; max-height: 78svh; object-fit: contain; border-radius: 2px;
                    pointer-events: none; }
@supports not (height: 100svh) { .viewer-strip img { max-height: 78vh; } }
/* 닫기 버튼은 또렷해야 한다. 반투명하게 두니 사진 위에서 거의 안 보였다. */
.viewer-close { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem;
                z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%;
                border: 1px solid #ffffff5c; background: #000000a6; color: #fff;
                font-size: 1.05rem; line-height: 1; cursor: pointer;
                display: grid; place-items: center; }
.viewer-close:hover, .viewer-close:focus-visible { background: #000000d9; }
.viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer-count { position: absolute; left: 0; right: 0;
                bottom: max(1.4rem, env(safe-area-inset-bottom));
                text-align: center; color: #fffc; font-family: var(--sans);
                font-size: .78rem; letter-spacing: .1em; margin: 0; }

/* ── 오시는 길 ── */
.map { width: 100%; height: auto; margin: 0 0 1.8rem; background: #fff;
       border: 1px solid var(--line); border-radius: .5rem; }
.way-list { list-style: none; padding: 0; margin: 0; font-size: .92rem; text-align: left; }
.way-list li { display: flex; gap: .9rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.way-list span { color: var(--accent); min-width: 3.2rem; flex: none; }
.map-links { display: flex; gap: .6rem; justify-content: center; margin: 1.4rem 0 0; }
.map-links a { flex: 1; padding: .7rem; font-family: var(--sans); font-size: .82rem;
               text-decoration: none; color: var(--ink); border: 1px solid var(--line);
               border-radius: .4rem; background: #fff; }
.church-rules { list-style: none; padding: 1rem 1.1rem; margin: 2rem 0 0; text-align: left;
                font-size: .85rem; line-height: 1.8; color: var(--ink-soft);
                background: #f3efe9; border-radius: .4rem; }
.church-rules li { padding-left: .9rem; position: relative; }
.church-rules li::before { content: '·'; position: absolute; left: 0; color: var(--accent); }

/* ── 방명록 ── */
.gb-lead { font-size: .95rem; margin: 0 0 1.5rem; }
.gb-form { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.gb-name, .gb-msg {
  font-family: var(--serif); font-size: .95rem; color: var(--ink);
  padding: .75rem .9rem; background: #fff; border: 1px solid var(--line);
  border-radius: .4rem; width: 100%; resize: none;
}
.gb-name:focus, .gb-msg:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.gb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.gb-count { font-family: var(--sans); font-size: .72rem; color: var(--ink-soft);
            font-variant-numeric: tabular-nums; }
.gb-submit { font-family: var(--serif); font-size: .88rem; color: #fff;
             padding: .6rem 1.5rem; background: var(--accent); border: 0;
             border-radius: 2rem; cursor: pointer; }
.gb-submit[disabled] { opacity: .5; cursor: default; }
.gb-status { font-size: .8rem; margin: .2rem 0 0; min-height: 1.2em; color: var(--accent); }
.gb-status.err { color: #a8503f; }

.gb-list { list-style: none; padding: 0; margin: 2rem 0 0; text-align: left; }
.gb-list li { padding: .9rem 0; border-top: 1px solid var(--line); }
.gb-list li:last-child { border-bottom: 1px solid var(--line); }
.gb-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
           margin: 0 0 .3rem; }
.gb-who { font-size: .88rem; color: var(--accent); }
.gb-when { font-family: var(--sans); font-size: .7rem; color: var(--ink-soft);
           font-variant-numeric: tabular-nums; flex: none; }
.gb-text { font-size: .92rem; line-height: 1.75; margin: 0; white-space: pre-wrap; }
.gb-empty { font-size: .88rem; color: var(--ink-soft); text-align: center;
            padding: 1.6rem 0; margin: 0; }

/* ── 마음 전하실 곳 ── */
.giving-label  { font-size: .95rem; margin: 0 0 1.4rem; }
.giving-toggle { font-family: var(--serif); font-size: .9rem; color: var(--ink);
                 padding: .8rem 2rem; background: #fff; border: 1px solid var(--line);
                 border-radius: 2rem; cursor: pointer; }
.accounts { margin: 1.4rem 0 0; text-align: left; }
.account  { display: flex; align-items: center; gap: .7rem; padding: .85rem .95rem;
            border: 1px solid var(--line); border-radius: .4rem; background: #fff;
            font-size: .88rem; }
.account + .account { margin-top: .6rem; }
.account .who  { color: var(--accent); flex: none; }
.account .num  { font-family: var(--sans); flex: 1; letter-spacing: .01em; }
.account .copy { font-family: var(--sans); font-size: .75rem; padding: .35rem .6rem;
                 border: 1px solid var(--line); border-radius: .3rem; background: var(--paper);
                 cursor: pointer; flex: none; }

footer { text-align: center; padding: 3.5rem 1.5rem 4.5rem; border-top: 1px solid var(--line); }
footer .script { font-size: 2.2rem; color: var(--accent); margin: 0 0 .4rem; line-height: 1.2; }
.footer-date { font-family: var(--sans); font-size: .76rem; letter-spacing: .12em;
               color: var(--ink-soft); margin: 0; }