/* 공용 토큰과 기본 요소 — 청첩장(index), 관리 화면(admin), 로그인(login)이 함께 씁니다.
 * 관리·로그인 화면의 기본 색입니다. 청첩장 화면은 themes.css 가 디자인(html[data-template])마다 이 값을 바꿉니다.
 * 글꼴은 이 사이트에서 직접 내려보내는 SUIT 가변 글꼴입니다(assets/fonts, OFL 1.1 라이선스 동봉).
 * 모던 화이트만 영문에 EB Garamond 를 함께 씁니다(themes.css). 굵기는 가변 축의 실제 값이고 가짜 굵기를 만들지 않습니다(font-synthesis: none).
 *   본문·안내·날짜 400 / 버튼·제목 500. 관리·로그인 화면은 SUIT 만 씁니다. */

@font-face {
  font-family: "SUIT Variable";
  src: url("fonts/SUIT-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --wall: #fbfaf6;       /* 바탕: 따뜻한 흰색(전시실 벽) */
  --white: #ffffff;
  --mat: #efede7;        /* 사진 매트 */
  --ink: #1d1d1b;        /* 본문 */
  --ink-2: #4b4a45;      /* 보조 글: 바탕 대비 8:1 이상 */
  --ink-3: #5f5e58;      /* 작은 안내 글: 바탕 대비 6:1 이상 */
  --rule: #dad9d3;       /* 가는 선 */
  --rule-strong: #85847d;/* 입력선: 바탕 대비 3:1 이상 */
  --accent: #566447;     /* 올리브: 보조색. 날짜 표시·선택 상태에만 씁니다 */
  --accent-tint: #eef1e8;
  --ok: #33503c;
  --ok-tint: #edf2ee;
  --danger: #973627;
  --danger-tint: #faf1ef;

  --sans: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --max: 1080px;
  --edge: 22px;
  --touch: 44px;
}
@media (min-width: 900px) { :root { --edge: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--wall);
  font: 400 16px/1.75 var(--sans); letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 500; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button, a, label, summary { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong, b { font-weight: 500; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 8px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--ink); color: var(--wall); }
.skip:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch); padding: 9px 18px; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 500 15px/1.3 var(--sans);
  text-decoration: none; text-align: center;
}
.btn:hover { background: var(--mat); }
.btn-solid { background: var(--ink); color: var(--wall); }
.btn-solid:hover { background: #3a3a37; }
.btn-quiet { border-color: var(--rule-strong); color: var(--ink-2); font-weight: 400; }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-tint); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; }
.btn:disabled:hover { background: transparent; }
.btn-solid:disabled:hover { background: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-btn {
  min-height: var(--touch); padding: 0 2px; border: 0; background: none; color: var(--ink-2);
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }

/* ---------- 입력칸 ---------- */
.field { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.5; }
.field > span, .field > legend, .field-label { padding: 0; color: var(--ink-2); font-weight: 400; }
.field small, .counter { color: var(--ink-3); font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--touch); padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231d1d1b' stroke-width='1.2'/></svg>") no-repeat right 4px center;
}
.field textarea { min-height: 116px; padding: 10px 12px; border: 1px solid var(--rule-strong); resize: vertical; }
.field input:focus-visible, .field select:focus-visible { outline: 0; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field textarea:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 14px; line-height: 1.5; }
.choice { display: flex; flex-wrap: wrap; gap: 0 24px; }
.choice label, .check {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch);
  color: var(--ink); font-size: 15px; line-height: 1.4; cursor: pointer;
}
.choice input, .check input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }

/* ---------- 창(dialog) ---------- */
.dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 14px 18px 18px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--wall); color: var(--ink);
}
.dlg::backdrop { background: rgba(29, 29, 27, 0.78); }
.dlg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dlg-top h2, .dlg-top p { font: 500 16px/1.4 var(--sans); }
.icon-btn {
  min-width: var(--touch); min-height: var(--touch); padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 14px;
}
.icon-btn:hover { border-color: var(--ink); }

/* ---------- 알림 ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px;
  background: var(--ink); color: var(--wall); font-size: 15px; line-height: 1.5;
}
.notice { padding: 12px 14px; border: 1px solid var(--rule); background: var(--white); font-size: 14px; line-height: 1.6; }
.notice-error { border-color: #d6b3ab; background: var(--danger-tint); color: #6f2a1f; }
.notice-ok { border-color: #a9bcae; background: var(--ok-tint); color: var(--ok); }
.notice-warn { border-color: #cfc5a6; background: #f8f5ea; color: #4a4231; }

html.is-locked, html.is-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}