:root {
  --bg-top: #fbf6f0;
  --bg-bottom: #f1e3df;
  --paper: #fffcf6;
  --ink: #2a2622;
  --muted: #8a817a;
  --accent: #e8899f;
  --accent-soft: #fbe4ea;
  --line: #ece4dc;
  --surface: #f5f3eb;
  --sage: #4f6249;
  --border: #ddd5c5;
  --name-font: 'Gowun Batang', 'Nanum Myeongjo', serif; /* 두 사람 이름: 단정한 명조(고운바탕) */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
html, body {
  margin: 0; height: 100%;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  font-family: var(--font); color: var(--ink);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
  word-break: keep-all; overflow-wrap: break-word; /* 한국어를 단어(어절) 단위로 줄바꿈 */
}
#frame {
  position: relative; margin: 0 auto; height: 100%;
  width: 100%; max-width: 430px; overflow: hidden;
  image-rendering: pixelated;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
#game {
  display: block; margin: 0 auto; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#hud, #intro, #overlay, #toast { position: absolute; left: 0; right: 0; }

/* 상단 정보: 반투명 흰 카드 */
#hud {
  top: calc(10px + env(safe-area-inset-top)); padding: 0 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none;
}
#hud .hud-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 8px 14px 8px 12px;
  box-shadow: 0 4px 16px rgba(60, 40, 30, .10);
  font-size: 13px; line-height: 1.25;
}
#hud .hud-names { font-weight: 700; letter-spacing: -0.01em; }
#hud .hud-names .heart { color: var(--accent); margin: 0 3px; }
#hud .hud-date { color: var(--muted); font-size: 11.5px; }
#hud .hud-dday {
  background: var(--accent); color: #fff; font-weight: 700; font-size: 11.5px;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
#hud button { pointer-events: auto; }

#intro, #overlay { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
#intro { background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)); }
#overlay { background: rgba(42, 38, 34, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#toast { bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }

.card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 16px 48px #342d2429, inset 0 1px 0 #fff;
  padding: 24px 22px 20px; width: 100%; max-width: 360px; max-height: 90%; overflow: auto;
  font-size: 15px; line-height: 1.75;
}
.card h2 { margin: 0 0 16px; color: #3f4b38; font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; }
.card p { margin: 4px 0; }
.card p b { font-weight: 600; color: var(--muted); margin-right: 6px; font-size: 13px; }
.card .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.card .muted { color: var(--muted); font-size: 13px; line-height: 1.65; }
.card .notice {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--accent-soft); color: #6d4b55; font-size: 13.5px; line-height: 1.7;
}
.btn {
  font-family: var(--font); font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer;
  background: var(--surface); color: #49513f; border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.45; transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 아이콘 윗줄·글자 아랫줄 버튼(메뉴의 축하 남기기) */
.btn.stacked { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.btn.stacked .btn-icon { font-size: 20px; line-height: 1; }
.btn.ghost {
  background: rgba(255, 255, 255, .86); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(60, 40, 30, .10); font-size: 13px; padding: 9px 14px;
}
input, textarea {
  font-family: var(--font); font-size: 16px; width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 12px; background: #fffefb; line-height: 1.6;
  -webkit-user-select: text; user-select: text; outline: none;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #a9567014; }
textarea { resize: vertical; min-height: 112px; }
input::placeholder, textarea::placeholder { color: #888477; }
.toast-msg {
  background: rgba(42, 38, 34, .92); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.picker { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0 4px; }
.picker canvas {
  width: 72px; height: 108px; image-rendering: pixelated;
  background: linear-gradient(180deg, #e9f2dc, #d7e8c6); border-radius: 16px;
}
.picker-side { display: flex; flex-direction: column; gap: 4px; }
.picker-title { margin: 0; font-size: 15px; font-weight: 650; }
.picker-side .muted { margin: 0; font-size: 13px; }
.picker-steps { display: flex; gap: 8px; margin-top: 4px; }
.picker-steps .btn { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.picker-hint { margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
/* 30종을 처음부터 격자로: 390폭 6열×5줄(칸 약 45px), 좁은 화면 5열×6줄(칸 약 40px) */
.character-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px; margin: 0 0 6px; border: 1px solid var(--border); border-radius: 14px; background: #f5f0e6; }
@media (max-width: 359px) { .character-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.character-option { min-width: 0; min-height: 40px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 2px; border: 2px solid transparent; border-radius: 12px; background: #fffdf8; cursor: pointer; }
.character-option canvas { display: block; width: 100%; height: auto; max-width: 48px; image-rendering: pixelated; }
.character-option[aria-checked="true"] { border-color: #a95670; background: #f5e5e9; }
.character-option:focus-visible { outline: 3px solid #697b50; outline-offset: 1px; }
.character-option:focus-visible { outline: 3px solid #59694e; outline-offset: 1px; }
#viewer { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
#viewer canvas { max-width: 100%; max-height: 100%; -webkit-touch-callout: none; user-select: none; }
#viewer.veiled canvas { visibility: hidden; } /* 포커스를 잃으면 사진을 가린다(viewer.js) */
#viewer .close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; }
#viewer .counter { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); color: #fff; font-size: 13px; }
[hidden] { display: none !important; }

/* Garden v2: scene content and actions stay available outside the canvas. */
:root { --accent: #a95670; --accent-soft: #f5e5e9; --muted: #716b61; }
html, body { height: 100%; min-height: 100%; }
#frame { height: 100dvh; background: #f6f1e8; }
#game, #viewer canvas { touch-action: none; }
#hud { inset: 0; padding: 0; display: block; z-index: 2; }
#intro { z-index: 5; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow: auto; }
#intro:has(.cover) { display: block; background: radial-gradient(ellipse at 50% 30%, #eaf0df, transparent 58%), #faf6ee; }
#overlay { z-index: 10; padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
#toast { z-index: 20; bottom: calc(96px + env(safe-area-inset-bottom)); padding: 0 20px; }
.toast-msg { border-radius: 12px; line-height: 1.5; background: #3f4b38ed; border: 1px solid #ffffff40; }
.btn { min-height: 44px; }
button, a, textarea, input { touch-action: manipulation; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid #697b50; outline-offset: 3px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
.card { max-height: 100%; overscroll-behavior: contain; }
.card:focus { outline: none; }
.dialog-actions { padding-top: 16px; border-top: 1px solid var(--border); gap: 8px; }
.dialog-actions .btn { flex: 1 1 96px; }
.eyebrow { font-size: 10px; letter-spacing: .13em; color: #747c61; font-weight: 700; }
.cover { text-align: center; width: 100%; max-width: 350px; margin: 0 auto; padding: 20px 0 12px; }
.cover > .eyebrow:first-child { margin-top: 0; }
.cover-garden { position: relative; width: 280px; height: 192px; max-width: 100%; margin: 12px auto 22px; border-radius: 48% 48% 12px 12px; background: #dbe5cd; border-bottom: 8px solid #e0cdb2; box-shadow: inset 0 0 30px #adc19955; overflow: hidden; }
.cover-garden img { position: absolute; image-rendering: pixelated; }
.cover-arch { width: 252px; height: 180px; left: 50%; bottom: 0; transform: translateX(-50%); }
.cover-platform { width: 160px; height: 64px; left: 50%; bottom: 0; transform: translateX(-50%); }
.cover-groom { width: 48px; height: 72px; left: calc(50% - 43px); bottom: 16px; }
.cover-bride { width: 48px; height: 72px; left: calc(50% - 8px); bottom: 16px; }
.cover-couple { width: 96px; height: 72px; left: 50%; bottom: 16px; transform: translateX(-50%); }
.cover h1 { font: 700 36px/1.3 var(--name-font); margin: 7px 0 16px; letter-spacing: .06em; }
.cover h1 span { color: #ad7b79; font: italic 30px Georgia,serif; }
.cover-date { font-size: 14px; margin: 0 0 5px; }
.cover .muted { font-size: 13px; margin: 0; }
.cover-letter { font-size: 14px; line-height: 1.9; margin: 22px 0 18px; }
.family-lines { text-align: center; margin: 2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.family-lines p { margin: 3px 0; font-size: 15px; }
.gifts-notice { white-space: pre-line; text-align: center; line-height: 1.85; }
.cover-notice { font-size: 13px; line-height: 1.8; padding: 14px 8px; color: #665d54; border-block: 1px solid #dfdace; white-space: pre-line; word-break: keep-all; text-wrap: balance; }
.cover-enter { display: block; width: 100%; margin: 20px 0 14px; padding: 14px; }
.cover-classic { display: block; color: #6a705a; font-size: 13px; padding: 8px; }
.cover .cover-footnote { font-size: 12px; line-height: 1.6; margin-top: 18px; }
.boot-message { font-size: 13px; color: #716b61; text-align: center; }
/* 지도 위 상시 UI는 레퍼런스처럼 최소: 왼쪽 위 이름 칩, 아래 둥근 메뉴 버튼(방에서는 왼쪽에 "정원으로"). 축하 쓰기는 방명록·메뉴에서. */
.garden-header { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border: 1px solid #fff9; background: #fffcf3e6; border-radius: 999px; box-shadow: 0 4px 14px #3a422614; pointer-events: auto; }
.garden-header strong { font: 700 15px var(--name-font); letter-spacing: .02em; }
.garden-header i { font-size: 11px; color: #ae6b7d; font-style: normal; }
.date-chip { color: #94516a; background: #f4e5e9; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.garden-dock { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.fab { pointer-events: auto; border: 1px solid #dedfcf; border-radius: 999px; min-height: 52px; background: #fffcf5; color: #5c644c; font: 600 14px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px #353d2522; cursor: pointer; }
.fab span { font-size: 18px; line-height: 1; }
.fab-menu { margin-left: auto; } /* "정원으로"가 숨은 광장에서도 메뉴는 오른쪽 */
.fab-return { gap: 10px; padding: 8px 16px 8px 10px; border-radius: 16px; background: var(--paper); color: #3e5138; border-color: #b8c2a8; box-shadow: 0 4px 12px #34452b24, inset 0 1px 0 #fff; }
.fab-return span { font-size: 15px; font-weight: 650; }
.fab-return .return-arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #e9eedf; color: #506548; font-size: 20px; }
.fab-return:active { background: #f0f2e7; }
.fab-menu { width: 52px; height: 52px; padding: 0; font-size: 22px; }
.menu-status { color: #95576a; font-size: 13px; margin: 6px 0 0; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.text-button { flex: 1 1 90px; min-height: 44px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--sage); font-size: 13px; font-weight: 550; cursor: pointer; }
.text-button:active, .space-tile:active { background: #ecebdf; }
.space-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.space-tile { min-width: 0; border-radius: 14px; padding: 15px 8px; border: 1px solid var(--border); background: #f5f5ec; color: #455638; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.space-tile span { font-size: 24px; }
.space-tile strong { font: 600 13px var(--font); }
.space-tile[aria-current] { background: #f5e6eb; border-color: #bd8196; color: #82465c; }
.classic-link { color: #6c7557; font-size: 13px; }
.preview-notice { padding: 10px 12px; border-radius: 10px; background: #edf1e5; color: #51603f; font-size: 12px; line-height: 1.6; margin-bottom: 14px !important; }
.message-count { text-align: right; }
.form-error { color: #a13f51; min-height: 24px; font-size: 12px; }
.share-preview { border: 1px solid #e3d4ca; border-radius: 14px; padding: 20px 14px; margin-bottom: 20px; text-align: center; background: #f7eee8; }
.share-heart { color: #a95670; font-size: 20px; }
.share-preview .share-title { margin: 8px 0; font-size: 17px; font-weight: 650; color: #594b45; line-height: 1.55; }
.share-preview p:last-child { font-size: 13px; color: #75665e; }
.share-url { font-size: 16px; color: #59654e; background: #f4f5ec; }
.card .share-help { margin-top: 8px; }
.account-group + .account-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.account-group h3 { margin: 0 0 8px; color: var(--sage); font-size: 15px; font-weight: 650; }
.account-group p { overflow-wrap: anywhere; }
.account-group .copy { margin: 6px 0 6px 4px; }
.message-item { padding: 15px 0; border-bottom: 1px solid #e8e5da; overflow-wrap: anywhere; }
.message-item strong { font-size: 13px; color: #84556a; }
.message-item p { white-space: pre-wrap; font-size: 14px; margin: 8px 0; }
.message-item small { color: #817c70; font-size: 12px; }
.empty-state { text-align: center; padding: 25px 5px; }
.empty-state > span { font-size: 36px; color: #a2aa8e; }
.empty-state h3 { font-size: 16px; }
.empty-state p { font-size: 13px; color: #706a60; }
@media (max-height: 680px) { .cover-garden { height: 170px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* 화면이 짧으면 입장 버튼을 화면 아래에 붙여 스크롤 없이도 보이게 한다. */
@media (max-height: 740px) { .cover-enter { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1; box-shadow: 0 6px 20px #6a3a4a33; } .cover-enter:disabled { opacity: 1; background: #cfa3b0; border-color: #cfa3b0; } }
/* 가로 화면: 안내 카드를 숨기고 상단 바·아래 버튼을 낮게 줄여 정원을 최대한 보여 준다. */
@media (orientation: landscape) and (max-height: 500px) {
  .garden-header { top: calc(6px + env(safe-area-inset-top)); height: 32px; }
  .garden-dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .fab { min-height: 44px; }
  .fab-menu { width: 44px; height: 44px; }
}
/* 입장 화면: 같은 닉네임이 이미 있을 때 본인 확인 */
.claim-box { margin: 4px 0 8px; padding: 14px 14px 10px; border-radius: 14px; background: #f5e5e9; text-align: left; }
.claim-box p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.claim-box .muted { margin: 8px 0 0; font-size: 13px; }
.claim-box .row { display: flex; gap: 8px; flex-wrap: wrap; }
/* 예식 안내관: 장면 캔버스 바로 아래부터 하단 버튼 위까지 안내 카드(스크롤) */
/* 카드 배경은 화면 맨 아래까지 이어 하단 버튼("정원으로"·메뉴)이 카드 위에 놓이게 하고, 마지막 내용은 버튼에 가리지 않도록 아래 여백을 둔다 */
.ceremony-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px calc(92px + env(safe-area-inset-bottom)); background: linear-gradient(#faf6ee, #f6efe4); -webkit-overflow-scrolling: touch; }
.ceremony-line { position: sticky; top: 0; z-index: 1; margin: 0 -14px 10px; padding: 12px 18px; background: #26211c; color: #fff8e8; font: 15px/1.5 Galmuri11, var(--font); border-top: 3px solid #e9dcc2; border-bottom: 3px solid #e9dcc2; min-height: 48px; }
.ceremony-line::before { content: '▸ '; color: #e8b9c5; }
.ceremony-card { max-width: 440px; margin: 0 auto; }
.ceremony-date { margin: 4px 0 2px; font-size: 17px; font-weight: 650; text-align: center; }
.ceremony-venue { margin: 0 0 12px; font-size: 15px; color: var(--muted); text-align: center; }
.ceremony-map { position: relative; margin: 0 0 10px; border-radius: 14px; overflow: hidden; border: 1px solid #e3dccd; }
.ceremony-map img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.map-label { position: absolute; transform: translate(-50%, 0); padding: 2px 7px; border-radius: 8px; background: #fffcf5ee; color: #3f3a35; font-size: 11px; font-weight: 650; white-space: nowrap; box-shadow: 0 1px 4px #0002; }
.ceremony-address { margin: 0 0 8px; font-size: 15px; text-align: center; }
/* 버튼은 같은 폭 격자로: 지도 줄은 한 줄에 최대 3개, 아래 기능 버튼 4개는 2×2. 하나만 다음 줄로 밀리지 않게 한다 */
.ceremony-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.ceremony-actions.two-col { grid-template-columns: 1fr 1fr; }
.ceremony-actions .btn { min-height: 44px; font-size: 14px; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.ceremony-transport { margin: 0 0 8px; padding: 12px 14px; border-radius: 14px; background: #fffcf5; border: 1px solid #e3dccd; font-size: 14px; }
.ceremony-transport div { display: flex; gap: 10px; padding: 4px 0; }
.ceremony-transport dt { flex: none; width: 48px; font-weight: 650; color: #95576a; }
.ceremony-transport dd { margin: 0; }
/* 메시지 목록: 내가 남긴 축하를 맨 위에 따로 */
.my-messages { margin: 0 0 14px; padding: 4px 14px 2px; border-radius: 14px; background: #f5e5e9; }
.my-messages h3 { margin: 10px 0 0; font-size: 14px; color: #84556a; }
.my-messages .message-item:last-child { border-bottom: 0; }
/* 배경음악 버튼: 오른쪽 위, 이름 칩과 같은 높이 */
.sound-toggle { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; margin-top: -4px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #fff9; border-radius: 999px; background: #fffcf3e6; color: #a95670; box-shadow: 0 4px 14px #3a422614; pointer-events: auto; cursor: pointer; }
.sound-toggle.muted { color: #8a8f78; }
.sound-toggle:focus-visible { outline: 3px solid #697b50; outline-offset: 2px; }