/* Hallmark · shape: Workbench · genre: modern-minimal · theme: custom, warm paper workbench beside the invitation preview · job: try · draw: manual
 * hero: none, an app screen; the form and the live invitation side by side · nav: a wordmark, the save status and the phone tabs · footer: none · imagery: the couple's own photographs, previewed · signature: the invitation itself, edited in place inside the preview
 * axes: light/sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: V, a form beside a preview is the expected tool shape; the inline editing in the preview is where it differs */
/* Hallmark · waive 72 · the measured text sits inside closed details steps, laid out but not shown · the form steps stay folded until a person opens one */
/* Hallmark · answered F4 · plain buttons carry the panel fill as their outline style; the one accent fill is the zip download, the seg and tab fills mark the chosen state */

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --color-paper: #f6f3ee; --color-panel: #fdfbf8; --color-well: #efeae2; --color-ink: #26221e; --color-ink-2: #48413a; --color-muted: #6c635a;
  --color-rule: #e2dbd1; --color-field-edge: #8d8378; --color-accent: #2f4a6b; --color-accent-deep: #243a55; --color-accent-ink: #fdfbf8; --color-focus: #2f4a6b;
  --color-hover: rgba(47, 74, 107, 0.07); --color-press: rgba(47, 74, 107, 0.14); --color-warn-bg: #fbeedd; --color-warn-ink: #6b4313;
  --color-toast: #26221e; --color-toast-ink: #f6f3ee; --color-dot: #fffdf8; --color-dot-edge: #26221e;
  --radius: 6px; --radius-lg: 14px; --control-h: 44px; --top-h: 56px;
  --dur-micro: 120ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-field-edge) var(--color-paper); }
body { caret-color: var(--color-accent); margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; word-break: keep-all; -webkit-font-smoothing: antialiased; }
p { margin: 0; }
h3 { margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, iframe:focus-visible, .file-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-well); color: var(--color-ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* 머리 줄 */
.mk-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-md);
  min-height: var(--top-h); padding: 0 var(--space-lg); background: var(--color-panel); border-bottom: 1px solid var(--color-rule);
}
.mk-brand { font-weight: 700; font-size: var(--text-lg); }
.mk-status { color: var(--color-muted); font-size: var(--text-xs); }
.mk-help { display: inline-flex; align-items: center; min-height: var(--control-h); margin-left: auto; padding: 0 var(--space-xs); font-size: var(--text-sm); font-weight: 500; }
.mk-help:hover { color: var(--color-accent-deep); }
.mk-tabs { display: none; }
.mk-noscript { padding: var(--space-lg); }

/* 두 칸 */
.mk { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; max-width: 92rem; margin-inline: auto; }
.mk-form { padding: var(--space-lg) var(--space-lg) var(--space-2xl); border-right: 1px solid var(--color-rule); background: var(--color-panel); min-height: calc(100svh - var(--top-h)); }
.mk-preview { position: sticky; top: var(--top-h); display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: var(--space-sm); height: calc(100svh - var(--top-h)); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.mk-intro { color: var(--color-ink-2); font-size: var(--text-sm); }
.mk-example, .mk-warn { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: var(--text-sm); }

/* 단계 */
.step { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.step > summary {
  display: flex; align-items: center; gap: var(--space-sm); min-height: 3.25rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--text-lg);
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary::after { content: ""; margin-left: auto; width: 0.55em; height: 0.55em; border-right: 1.5px solid var(--color-muted); border-bottom: 1.5px solid var(--color-muted); transform: rotate(45deg); transition: transform var(--dur-micro) var(--ease-out); }
.step[open] > summary::after { transform: rotate(-135deg); }
.step-n { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-well); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.step[open] { padding-bottom: var(--space-lg); }
.step > :not(summary) + :not(summary) { margin-top: var(--space-md); }

.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.lb { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; }
.hint { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.count { color: var(--color-muted); font-weight: 400; }
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select, textarea {
  width: 100%; min-height: var(--control-h); padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-field-edge); border-radius: var(--radius); background: var(--color-panel); color: var(--color-ink);
  font: inherit; font-size: var(--text-md);
}
textarea { resize: vertical; line-height: 1.6; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
.grid2, .grid3 { display: grid; gap: var(--space-sm); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 날짜 칸은 브라우저마다 달력 단추까지 들어가 좁은 칸에서 옆 칸을 덮으니 한 줄을 다 쓴다 */
.when > :first-child { grid-column: 1 / -1; }
.group { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-sm); }
.group + .group { margin-top: var(--space-lg); }
.group legend { padding: 0; margin-bottom: var(--space-xs); font-weight: 600; }

/* 디자인 고르기 */
.themes { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.theme-card { position: relative; display: grid; gap: var(--space-2xs); padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-panel); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.theme-card:hover { background: var(--color-hover); }
.theme-card:active { background: var(--color-press); }
.theme-card:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.theme-card:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.tc-sw { height: 3rem; border-radius: var(--radius); border: 1px solid var(--color-rule); background: linear-gradient(90deg, var(--a) 68%, var(--b) 68%); }
.tc-name { font-weight: 600; }
.tc-desc { color: var(--color-muted); font-size: var(--text-xs); }

/* 단추 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-md);
  border: 1px solid var(--color-field-edge); border-radius: var(--radius); background: var(--color-panel); color: var(--color-ink);
  font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-hover); }
.btn:active { background: var(--color-press); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-deep); }
.btn-primary:active { background: var(--color-accent-deep); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule); }
.btn-small { padding: 0 var(--space-sm); }
.btn-icon { min-width: var(--control-h); padding: 0 var(--space-xs); }
.file-btn { position: relative; }
.row-acts, .out-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.checks { display: grid; gap: var(--space-2xs); }
.check { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--control-h); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); }

/* 목록 줄 */
.rows { display: grid; gap: var(--space-sm); }
.row { display: grid; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-lg); background: var(--color-well); }
.row:not(.row-acct) { grid-template-columns: 6rem minmax(0, 1fr); align-items: start; }
.row:not(.row-acct) .btn { grid-column: 1 / -1; justify-self: end; }
.row-acct .btn { justify-self: end; }
.more > summary { cursor: pointer; color: var(--color-ink-2); font-size: var(--text-sm); min-height: var(--control-h); display: flex; align-items: center; }
.more[open] > summary { margin-bottom: var(--space-xs); }
.more > :not(summary) + :not(summary) { margin-top: var(--space-sm); }

/* 사진 */
.cover-pick { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.cover-thumb { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--color-well); overflow: clip; cursor: crosshair; display: grid; place-items: center; }
.cover-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cover-dot { position: absolute; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border-radius: 50%; background: var(--color-dot); border: 2px solid var(--color-dot-edge); pointer-events: none; }
.cover-empty { padding: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.cover-side { display: grid; gap: var(--space-xs); justify-items: start; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.thumb { display: grid; gap: var(--space-2xs); }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--color-well); }
.thumb-acts { display: flex; gap: var(--space-2xs); }
.thumb-acts .btn { flex: 1; min-width: 0; padding: 0; }

/* 받기 */
.out-h { margin-top: var(--space-xl); font-size: var(--text-lg); }
.guide { display: grid; gap: var(--space-2xs); }
.guide ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.guide p { color: var(--color-ink-2); font-size: var(--text-sm); }

/* 미리보기 */
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); }
.pv-hint { color: var(--color-muted); font-size: var(--text-xs); }
.seg { display: inline-flex; border: 1px solid var(--color-field-edge); border-radius: var(--radius); overflow: clip; }
.seg button { min-height: 2.5rem; padding: 0 var(--space-md); border: 0; background: var(--color-panel); color: var(--color-ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-field-edge); }
.seg button:hover { background: var(--color-hover); }
.seg button:active { background: var(--color-press); }
.seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.pv-frame { width: min(100%, 24.375rem); height: 100%; min-height: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: clip; background: var(--color-panel); }
.pv-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pv-frame iframe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

.mk-toast {
  position: fixed; left: 50%; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); z-index: 40; max-width: calc(100% - var(--space-xl));
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius); background: var(--color-toast); color: var(--color-toast-ink); font-size: var(--text-sm);
  opacity: 0; transform: translate(-50%, var(--space-xs)); pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.mk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 폰 · 좁은 화면: 고치기와 미리보기를 단추로 바꾼다 */
@media (max-width: 59.99rem) {
  .mk-top { padding: 0 var(--space-md); gap: var(--space-sm); }
  .mk-status { display: none; }
  .mk-tabs { display: inline-flex; border: 1px solid var(--color-field-edge); border-radius: var(--radius); overflow: clip; }
  .mk-tabs button { min-height: 2.5rem; padding: 0 var(--space-md); border: 0; background: var(--color-panel); color: var(--color-ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; }
  .mk-tabs button + button { border-left: 1px solid var(--color-field-edge); }
  .mk-tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
  .mk { grid-template-columns: minmax(0, 1fr); }
  .mk-form { border-right: 0; padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .mk-preview { padding: var(--space-sm) 0 0; height: calc(100svh - var(--top-h)); }
  .pv-bar { padding-inline: var(--space-md); }
  .pv-frame { width: 100%; border-radius: 0; border-inline: 0; border-bottom: 0; }
  body[data-tab="form"] .mk-preview { display: none; }
  body[data-tab="preview"] .mk-form { display: none; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 > :first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}