@font-face {
  font-family: "Galmuri14";
  src: url("assets/fonts/Galmuri14.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri11";
  src: url("assets/fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galmuri11";
  src: url("assets/fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fbf5f2;
  --paper-deep: #f3e7e1;
  --ink: #55564d;
  --green: #a7b99b;
  --green-dark: #7f9278;
  --coral: #c77d7b;
  --peach: #e5b6ad;
  --yellow: #ead5a5;
  --line: rgba(85, 86, 77, 0.17);
  --game-sky: #f0cfcb;
  --serif: "Galmuri14", "Malgun Gothic", sans-serif;
  --korean: "Galmuri11", "Malgun Gothic", sans-serif;
  --sans: "Galmuri11", "Malgun Gothic", sans-serif;
  --pixel-frame: #8f5f69;
  --pixel-frame-light: #fff2ee;
  --pixel-shadow: rgba(117, 75, 86, .28);
  --pixel-grid: rgba(153, 100, 113, .09);
  --pixel-chip: rgba(255, 247, 243, .74);
}

:root.theme-night {
  --paper: #211c27;
  --paper-deep: #2c2430;
  --ink: #eee3e2;
  --green: #64705f;
  --green-dark: #3c443a;
  --coral: #d694a0;
  --peach: #c58f9b;
  --yellow: #d7bd8e;
  --line: rgba(239, 225, 224, .16);
  --game-sky: #242536;
  --pixel-frame: #d99aa8;
  --pixel-frame-light: #514050;
  --pixel-shadow: rgba(7, 5, 12, .38);
  --pixel-grid: rgba(245, 199, 211, .07);
  --pixel-chip: rgba(57, 42, 55, .82);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #ddd6d1; transition: background 1.2s ease; }
body {
  margin: 0;
  color: var(--ink);
  background: #ddd6d1;
  font-family: var(--korean);
  -webkit-font-smoothing: antialiased;
  transition: color 1.2s ease, background 1.2s ease;
}

.falling-heart-layer {
  position: fixed;
  z-index: 12;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, 520px);
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  contain: strict;
}

.pixel-fall-heart {
  --heart-size: 3px;
  position: absolute;
  top: -28px;
  left: var(--heart-left);
  width: var(--heart-size);
  height: var(--heart-size);
  color: var(--heart-color);
  background: currentColor;
  box-shadow:
    6px 0 0 currentColor,
    -3px 3px 0 currentColor,
    0 3px 0 currentColor,
    3px 3px 0 currentColor,
    6px 3px 0 currentColor,
    9px 3px 0 currentColor,
    -3px 6px 0 currentColor,
    0 6px 0 currentColor,
    3px 6px 0 currentColor,
    6px 6px 0 currentColor,
    9px 6px 0 currentColor,
    0 9px 0 currentColor,
    3px 9px 0 currentColor,
    6px 9px 0 currentColor,
    3px 12px 0 currentColor;
  opacity: 0;
  filter: drop-shadow(2px 2px 0 rgba(111, 58, 73, .16));
  image-rendering: pixelated;
  animation: pixelHeartFall var(--heart-duration) linear forwards;
  will-change: transform, opacity;
}

@keyframes pixelHeartFall {
  0% { opacity: 0; transform: translate3d(0, -28px, 0) rotate(-7deg) scale(var(--heart-scale)); }
  10% { opacity: var(--heart-opacity); }
  34% { transform: translate3d(var(--heart-sway-a), 34vh, 0) rotate(7deg) scale(var(--heart-scale)); }
  68% { transform: translate3d(var(--heart-sway-b), 69vh, 0) rotate(-5deg) scale(var(--heart-scale)); }
  90% { opacity: var(--heart-opacity); }
  100% { opacity: 0; transform: translate3d(var(--heart-sway-c), calc(100svh + 42px), 0) rotate(8deg) scale(var(--heart-scale)); }
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.page-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  background: var(--paper);
  overflow: clip;
  box-shadow: 0 0 60px rgba(91, 73, 72, .16);
  transition: background 1.2s ease, box-shadow 1.2s ease;
}

.hero-stage {
  height: 100svh;
  position: relative;
  background: var(--paper);
}

.game-hero {
  --hero-shift: 0px;
  --hero-opacity: 1;
  --hero-blur: 0px;
  width: 100%;
  height: 100svh;
  padding: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #4f5449;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 248, 233, .65) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 25%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(165deg, #fbe9e7 0%, #f7dcda 55%, #f0cfcb 100%);
  transform: translate3d(0, var(--hero-shift), 0);
  opacity: var(--hero-opacity);
  filter: blur(var(--hero-blur));
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition: background 1.2s ease, color 1.2s ease;
}

.game-hero.is-night {
  color: #f8e9e8;
  background:
    radial-gradient(circle at 76% 12%, rgba(255,238,206,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 29%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    linear-gradient(165deg, #3b3047 0%, #302b42 58%, #242536 100%);
}

.game-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.hero-copy { position: absolute; z-index: 6; top: clamp(180px, 29svh, 258px); left: 0; right: 0; padding: 0 18px; text-align: center; }
.hero-date {
  margin: 0 0 14px;
  color: #a46f70;
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: .2em;
  animation: introDrop .7s .22s both ease-out;
}
.game-hero.is-night .hero-date { color: #e7b6ba; }
.eyebrow, .section-kicker {
  margin: 0 0 12px;
  color: var(--coral);
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: .22em;
}
.hero-copy h1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 6vw, 28px);
  width: 100%;
  margin: 0;
  font: 400 clamp(40px, 12.5vw, 60px)/.95 var(--korean);
  letter-spacing: -.07em;
}
.hero-copy h1 span:first-child { animation: nameFromLeft .9s .28s both cubic-bezier(.22,.8,.24,1); }
.hero-copy h1 span:last-child { animation: nameFromRight .9s .28s both cubic-bezier(.22,.8,.24,1); }
.hero-copy h1 i { flex: 0 0 auto; color: #d85f62; font: normal 15px/1 sans-serif; letter-spacing: 0; filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)); animation: heartAppear .65s .8s both ease-out; }
.hero-lead { margin: 17px 0 0; color: rgba(67,75,63,.75); font-size: 12px; line-height: 1.7; animation: introDrop .8s .72s both ease-out; }
.game-hero.is-night .hero-lead { color: rgba(248,233,232,.7); }
.game-hero.is-night .hero-copy h1 i { color: #f08b94; }

.game-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: gameRise 1s .52s both cubic-bezier(.2,.78,.22,1);
}
.game-frame::before {
  display: none;
}
.game-frame::after { display: none; }
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: pan-y;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(0,0,0,.12) 36%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(0,0,0,.12) 36%, #000 60%);
}
.game-score {
  position: absolute;
  z-index: 6;
  top: clamp(365px, 46svh, 410px);
  left: 50%;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transform: translateX(-50%);
  color: rgba(91,68,67,.72);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  font: 700 8px/1 "Courier New", monospace;
  letter-spacing: .16em;
  pointer-events: none;
}
.game-score strong { color: #a95e64; font-size: 13px; letter-spacing: .08em; }
.game-hero.is-night .game-score { color: rgba(248,233,232,.7); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.game-hero.is-night .game-score strong { color: #f0a1aa; }
.game-nudge {
  position: absolute;
  z-index: 7;
  top: clamp(332px, 42svh, 372px);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  color: #b65361;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  font: 700 10px/1.3 "Gowun Batang", serif;
  pointer-events: none;
}
.game-nudge.is-visible { visibility: visible; animation: gameNudgeBlink 1.15s steps(2, end) infinite; }
.game-hero.is-night .game-nudge { color: #ffabb6; text-shadow: 0 1px 0 rgba(0,0,0,.45); }
@keyframes gameNudgeBlink {
  0%, 44% { opacity: 1; }
  45%, 100% { opacity: .16; }
}
.game-message {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 0;
  padding: 7px 11px;
  transform: translateX(-50%);
  color: #6c5c59;
  background: rgba(255,248,244,.62);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  text-align: center;
  font: 700 9px/1.4 "Courier New", monospace;
  font-weight: 600;
  box-shadow: 3px 3px 0 rgba(119,83,85,.13);
  transition: color .8s ease, background .8s ease;
}
.game-hero.is-night .game-message { color: #f7e4e5; background: rgba(50,39,59,.68); border: 1px solid rgba(255,255,255,.12); }
.tap-hint { position: absolute; z-index: 5; top: 53px; width: 100%; text-align: center; color: rgba(88,66,65,.55); font: 500 7px/1 var(--sans); letter-spacing: .15em; pointer-events: none; }
.tap-hint span { color: var(--yellow); padding: 0 5px; }
.game-hero.is-night .tap-hint { color: rgba(248,233,232,.52); }
.scroll-cue {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  padding: 8px 18px 0;
  border: 0;
  color: rgba(79,69,64,.72);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}
.scroll-cue i { display: block; width: 1px; height: 17px; margin: 5px auto 0; background: linear-gradient(#687263, transparent); animation: scrollPulse 1.7s infinite; }
@keyframes scrollPulse { 50% { transform: translateY(7px); opacity: .35; } }
@keyframes introDrop { from { opacity: 0; transform: translateY(-12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nameFromLeft { from { opacity: 0; transform: translateX(-46px); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nameFromRight { from { opacity: 0; transform: translateX(46px); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes heartAppear { from { opacity: 0; transform: scale(.45) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes gameRise { from { opacity: 0; transform: translateY(45px); clip-path: inset(18% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }

.paper-section { padding: 92px 30px; text-align: center; position: relative; }
.paper-section::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--peach);
  box-shadow: -8px 0 0 rgba(199,125,123,.28), 8px 0 0 rgba(199,125,123,.28);
}
.ornament { margin-bottom: 18px; color: var(--coral); font-size: 17px; }
.paper-section h2, .section-heading h2, .rsvp-section h2, .modal-panel h2 {
  margin: 0;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: -.05em;
}
.body-copy { margin: 31px 0; font-size: 14px; line-height: 2.15; color: #5f655c; }
.body-copy.compact { margin-bottom: 25px; line-height: 1.85; }
.family-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 38px; }
.family-lines p { display: flex; min-width: 0; margin: 0; flex-direction: column; align-items: center; gap: 5px; color: #6d6f66; font-size: 13px; }
.family-lines .family-role { margin-bottom: 5px; color: var(--coral); font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: .12em; }
.family-lines .family-parents { white-space: nowrap; font-size: 12px; }
.family-lines small { margin: 0; color: #9b8c87; font-size: 10px; }
.family-lines strong { color: var(--ink); font-size: 17px; }

.portrait-break { padding: 0 18px 70px; }
.photo-placeholder {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: linear-gradient(#e5b8b1 0 55%, #bac9ab 55%);
  border-radius: 220px 220px 2px 2px;
  background-position: center;
  background-size: cover;
}
.photo-placeholder.has-photo > :not(p) { display: none; }
.photo-placeholder.has-photo > p { padding: 10px; background: linear-gradient(transparent, rgba(72,60,58,.48)); }
.photo-placeholder.has-photo.photo-portrait { height: auto; aspect-ratio: 2 / 3; }
.photo-placeholder.has-photo.photo-landscape { height: auto; aspect-ratio: 3 / 2; }
.photo-placeholder.has-photo.photo-square { height: auto; aspect-ratio: 1; }
.photo-placeholder::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(65,55,42,.16); }
.photo-placeholder .sun { width: 110px; height: 110px; position: absolute; border-radius: 50%; background: #f5da8f; left: 50%; top: 135px; transform: translateX(-50%); }
.hill { position: absolute; width: 150%; height: 260px; left: -25%; border-radius: 50% 50% 0 0; }
.hill-back { top: 285px; background: #9db18f; transform: rotate(-6deg); }
.hill-front { top: 360px; background: #7e9875; transform: rotate(5deg); }
.pixel-couple { position: absolute; z-index: 2; left: 50%; bottom: 72px; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; }
.mini-person { width: 18px; height: 27px; display: inline-block; position: relative; background: #39516c; border: 3px solid #26372d; box-shadow: 0 3px 0 #26372d; }
.mini-person::before { content: ""; position: absolute; width: 13px; height: 13px; background: #f3cbb0; border: 3px solid #26372d; left: -1px; top: -15px; }
.mini-person::after { content: ""; position: absolute; width: 13px; height: 5px; background: #352b26; left: 2px; top: -14px; }
.mini-bride { background: #f4e8d4; }
.mini-bride::after { height: 9px; border-radius: 6px 6px 0 0; }
.heart { color: #d9584c; font: 18px/1 sans-serif; animation: heartbeat 1.2s infinite; }
@keyframes heartbeat { 50% { transform: scale(1.25); } }
.photo-placeholder > p { position: absolute; z-index: 3; bottom: 18px; width: 100%; color: rgba(255,255,255,.8); text-align: center; font: 500 9px/1 var(--sans); letter-spacing: .3em; }
.photo-note { margin: 12px 5px 0; color: #8a8b83; text-align: center; font-size: 10px; }

.date-section { background: #f2e6e1; }
.date-time { margin: 9px 0 35px; color: #686e63; font-size: 13px; }
.calendar { padding: 22px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 40px; align-items: center; font: 500 11px/1 var(--sans); }
.week.head { min-height: 30px; font-size: 9px; color: #8c8f87; }
.week span:first-child { color: var(--coral); }
.week.muted span { opacity: .28; }
.week .muted-day { opacity: .28; }
.wedding-day { position: relative; width: 32px; height: 32px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: #fff !important; background: var(--coral); }
.wedding-day i { position: absolute; top: -9px; right: -2px; color: var(--coral); font-size: 8px; }
.countdown { display: flex; justify-content: center; gap: 8px; margin-top: 27px; }
.countdown div { min-width: 56px; padding: 10px 4px; background: #fff9f5; border: 1px solid rgba(85,86,77,.08); }
.countdown strong { display: block; font: 400 23px/1 var(--serif); }
.countdown small { display: block; margin-top: 5px; color: #85887f; font: 500 7px/1 var(--sans); letter-spacing: .1em; }

.gallery-section {
  padding: 92px 14px 75px;
  color: var(--ink);
  background: linear-gradient(180deg, #f2e6e1 0%, #f7e4e6 22%, #efcbd2 100%);
}
.section-heading { text-align: center; margin-bottom: 38px; }
.section-heading.light .section-kicker { color: var(--coral); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.gallery-card { aspect-ratio: 1 / 1; min-width: 0; border: 0; padding: 0; position: relative; overflow: hidden; cursor: pointer; color: #fff; }
.gallery-card.has-photo { background-position: center; background-size: cover; }
.gallery-card.has-photo.photo-portrait { background-position: center 35%; }
.gallery-card.has-photo::before, .gallery-card.has-photo::after { display: none; }
.gallery-card::before, .gallery-card::after { content: ""; position: absolute; border-radius: 50%; }
.card-one { background: #c98482; }
.card-one::before { width: 220px; height: 310px; background: #e5b1a5; bottom: -100px; left: -35px; border-radius: 48% 48% 5% 5%; transform: rotate(12deg); }
.card-one::after { width: 90px; height: 90px; background: #ead29d; top: 65px; right: 20px; }
.card-two { background: #9fb092; }
.card-two::before { width: 180px; height: 120px; background: #cbd5bd; bottom: -30px; left: -20px; }
.card-two::after { width: 60px; height: 95px; background: #788e72; bottom: 0; right: 18px; border-radius: 50% 50% 0 0; }
.card-three { background: #d9bd91; }
.card-three::before { width: 95px; height: 170px; background: #93a589; bottom: -45px; right: -15px; transform: rotate(-20deg); }
.card-three::after { width: 65px; height: 65px; border: 10px solid #f3dfae; top: 23px; left: 22px; }
.card-four { background: #b99292; }
.card-four::before { width: 320px; height: 190px; background: #d8bbbb; bottom: -90px; left: -20px; }
.card-four::after { width: 130px; height: 210px; background: #f0dfc3; bottom: -80px; right: 40px; border-radius: 65px 65px 0 0; }
.gallery-caption { margin: 14px 0 0; color: rgba(85,86,77,.62); text-align: center; font-size: 10px; }

.venue { display: grid; gap: 7px; margin: 27px 0; }
.venue strong { font-size: 17px; }
.venue span { color: #747970; font-size: 11px; }
.map-illustration { height: 265px; position: relative; overflow: hidden; margin: 30px -8px 12px; background: #e2d8c6; border: 1px solid rgba(49,56,46,.14); }
.map-illustration::before { content: ""; position: absolute; width: 110px; height: 75px; left: 25px; top: 35px; background: #b8c3a7; box-shadow: 180px 105px 0 #bdc7ad; }
.road { position: absolute; background: #f6f0e7; box-shadow: 0 0 0 1px rgba(49,56,46,.08); }
.road-horizontal { left: -20px; top: 125px; width: 120%; height: 28px; transform: rotate(-4deg); }
.road-vertical { left: 58%; top: -20px; width: 24px; height: 120%; transform: rotate(12deg); }
.river { position: absolute; left: -20px; bottom: 18px; width: 120%; height: 38px; background: #9fb9bc; transform: rotate(4deg); }
.map-label { position: absolute; z-index: 2; padding: 4px 6px; background: rgba(246,240,231,.88); font: 600 8px/1 var(--sans); }
.station { left: 18px; top: 150px; }
.cafe { right: 25px; top: 50px; }
.venue-pin { position: absolute; z-index: 3; left: 64%; top: 94px; transform: translateX(-50%); display: grid; justify-items: center; }
.venue-pin i { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: white; background: var(--coral); font-style: normal; box-shadow: 3px 3px 0 rgba(49,56,46,.16); }
.venue-pin i::first-letter { transform: rotate(45deg); }
.venue-pin b { margin-top: 9px; padding: 4px 7px; background: var(--green-dark); color: white; font-size: 9px; }
.map-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.map-buttons button, .map-buttons a { padding: 12px; border: 1px solid var(--line); background: transparent; color: inherit; text-decoration: none; text-align: center; font: 600 9px/1 var(--sans); letter-spacing: .06em; cursor: pointer; box-shadow: 3px 3px 0 rgba(126,103,99,.12); }
.rsvp-section { min-height: 520px; display: grid; place-items: center; padding: 80px 20px; text-align: center; color: #fffaf5; background: linear-gradient(rgba(195,124,137,.54), rgba(169,105,123,.7)), linear-gradient(135deg, #f2cbd0, #d99eaa 55%, #edc1c8); }
.rsvp-section .section-kicker { color: #30272b; background: rgba(255, 247, 243, .92); }
.rsvp-section p:not(.section-kicker) { margin: 24px 0 30px; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.9; }
.rsvp-section p.rsvp-copy { white-space: nowrap; font-size: clamp(7px, 2.3vw, 9px); line-height: 1.75; letter-spacing: -.035em; }
.primary-button { min-width: 210px; padding: 15px 22px; border: 0; color: white; background: var(--coral); box-shadow: 4px 4px 0 rgba(28,38,31,.25); cursor: pointer; font-size: 12px; font-weight: 700; }

.account-section { background: #f2e6e1; }
.accordions { text-align: left; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { list-style: none; padding: 19px 4px; display: flex; justify-content: space-between; cursor: pointer; font-size: 13px; }
summary::-webkit-details-marker { display: none; }
summary i { font-style: normal; transition: transform .25s; }
details[open] summary i { transform: rotate(45deg); }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 18px; color: #666c63; font-size: 11px; }
.account-row small { color: #92958e; }
.account-row button { padding: 7px 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 10px; }
.account-row button:disabled { cursor: default; opacity: .48; }

footer { padding: 72px 25px max(50px, env(safe-area-inset-bottom)); text-align: center; background: #bc8994; color: rgba(255,250,245,.78); }
.footer-pixels { height: 48px; display: flex; justify-content: center; align-items: flex-end; gap: 15px; margin-bottom: 25px; }
.footer-script { margin: 0 0 10px; color: #fff9eb; font: italic 28px/1 var(--serif); }
footer > p:not(.footer-script) { font-size: 10px; }
footer button { margin-top: 24px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff9eb; cursor: pointer; font-size: 10px; }

.modal, .lightbox { position: fixed; inset: 0; z-index: 20; display: none; }
.modal.is-open, .lightbox.is-open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22,29,24,.72); backdrop-filter: blur(4px); }
.modal-panel { position: relative; z-index: 1; align-self: end; width: min(100%, 520px); max-height: 92vh; overflow: auto; margin: auto; padding: 38px 28px max(30px, env(safe-area-inset-bottom)); background: var(--paper); border-radius: 22px 22px 0 0; }
.modal-close { position: absolute; right: 20px; top: 15px; border: 0; background: transparent; font-size: 25px; cursor: pointer; }
#rsvpForm { display: grid; gap: 17px; margin-top: 25px; }
#rsvpForm > label { display: grid; gap: 7px; color: #666b63; font-size: 11px; }
input, textarea, select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 0; outline: none; background: #fffaf1; color: var(--ink); }
input:focus, textarea:focus, select:focus { border-color: var(--coral); }
fieldset { display: flex; gap: 20px; margin: 0; padding: 12px; border: 1px solid var(--line); }
legend { color: #666b63; font-size: 11px; }
fieldset label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
fieldset input { width: auto; accent-color: var(--coral); }
#rsvpForm .primary-button { width: 100%; }
.lightbox { place-items: center; background: rgba(22,29,24,.92); padding: 25px; }
.lightbox button { position: absolute; right: 20px; top: 15px; border: 0; color: #fff; background: transparent; font-size: 28px; cursor: pointer; }
#lightboxArt { width: min(92vw, 430px); height: min(72vh, 610px); background: #c98482; background-position: center; background-size: cover; box-shadow: 0 15px 70px rgba(0,0,0,.35); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translate(-50%, 20px); width: max-content; max-width: calc(100% - 40px); padding: 11px 16px; border-radius: 30px; color: white; background: #26372d; opacity: 0; pointer-events: none; transition: .25s; font-size: 11px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 해가 진 뒤에는 초대장 전체가 같은 팔레트로 차분하게 전환됩니다. */
html.theme-night,
html.theme-night body { background: #15131a; }
.theme-night .page-shell { box-shadow: 0 0 70px rgba(0,0,0,.38); }
.theme-night .paper-section,
.theme-night .portrait-break { background: var(--paper); }
.theme-night .date-section,
.theme-night .account-section { background: var(--paper-deep); }
.theme-night .body-copy,
.theme-night .family-lines p,
.theme-night .date-time,
.theme-night .venue span,
.theme-night .transport-list p,
.theme-night .account-row,
.theme-night #rsvpForm > label,
.theme-night legend { color: #c9bdc1; }
.theme-night .family-lines small,
.theme-night .week.head,
.theme-night .countdown small,
.theme-night .account-row small,
.theme-night .photo-note { color: #9f929c; }
.theme-night .countdown div,
.theme-night .account-row button,
.theme-night input,
.theme-night textarea,
.theme-night select { background: #312a35; color: var(--ink); }
.theme-night .photo-placeholder { filter: brightness(.7) saturate(.78); }
.theme-night .gallery-section { background: linear-gradient(180deg, var(--paper-deep) 0%, #3a2938 24%, #49303f 100%); }
.theme-night .map-illustration { background: #3e3842; }
.theme-night .map-illustration::before { background: #566054; box-shadow: 180px 105px 0 #4d594c; }
.theme-night .road { background: #655b64; }
.theme-night .river { background: #526b73; }
.theme-night .map-label { color: #eee3e2; background: rgba(47,40,52,.9); }
.theme-night .rsvp-section { background: linear-gradient(rgba(69,42,59,.76), rgba(76,43,61,.84)), linear-gradient(135deg, #4b3344, #5b394e 55%, #735064); }
.theme-night footer { background: #3d2938; }
.theme-night .toast { background: #4b3e50; }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.gallery-section.reveal { opacity: 0; transform: translateY(54px) scale(.985); filter: blur(16px); transition: opacity 1s ease, transform 1s cubic-bezier(.22,.8,.3,1), filter 1.1s ease; }
.gallery-section.reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .reveal, .gallery-section.reveal { opacity: 1; transform: none; filter: none; } }
@media (min-width: 700px) { body { padding: 28px 0; } .page-shell { border-radius: 3px; } }

/* ─────────────────────────────────────────────
   UNIFIED PIXEL WEDDING SYSTEM
   게임의 픽셀 규칙을 초대장 전체로 확장합니다.
   ───────────────────────────────────────────── */
html {
  background-color: #d8c8ca;
  background-image:
    linear-gradient(90deg, rgba(112, 78, 88, .08) 1px, transparent 1px),
    linear-gradient(rgba(112, 78, 88, .08) 1px, transparent 1px);
  background-size: 8px 8px;
  image-rendering: pixelated;
}

html.theme-night {
  background-color: #15131a;
  background-image:
    linear-gradient(90deg, rgba(240, 184, 203, .045) 1px, transparent 1px),
    linear-gradient(rgba(240, 184, 203, .045) 1px, transparent 1px);
}

body,
html.theme-night body {
  background: transparent;
  font-family: var(--korean);
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

button,
input,
textarea,
select,
summary { font-family: var(--korean); }

button,
a,
summary { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #f19aaa;
  outline-offset: 3px;
}

.page-shell {
  border-right: 3px solid var(--pixel-frame);
  border-left: 3px solid var(--pixel-frame);
  border-radius: 0;
  box-shadow: 8px 0 0 rgba(111, 73, 84, .12), -8px 0 0 rgba(111, 73, 84, .12);
}

.hero-stage {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(var(--pixel-grid) 1px, transparent 1px);
  background-size: 8px 8px;
}

.game-hero {
  background:
    linear-gradient(90deg, rgba(160, 91, 108, .055) 1px, transparent 1px),
    linear-gradient(rgba(160, 91, 108, .055) 1px, transparent 1px),
    radial-gradient(circle at 78% 16%, rgba(255, 248, 233, .72) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 25%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    linear-gradient(165deg, #fbe9e7 0%, #f7dcda 55%, #f0cfcb 100%);
  background-size: 6px 6px, 6px 6px, auto, auto, auto;
}

.game-hero.is-night {
  background:
    linear-gradient(90deg, rgba(245, 199, 211, .04) 1px, transparent 1px),
    linear-gradient(rgba(245, 199, 211, .04) 1px, transparent 1px),
    radial-gradient(circle at 76% 12%, rgba(255,238,206,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.68) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 29%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    linear-gradient(165deg, #3b3047 0%, #302b42 58%, #242536 100%);
  background-size: 6px 6px, 6px 6px, auto, auto, auto, auto;
}

.game-hero::before {
  opacity: .28;
  background-image:
    linear-gradient(45deg, transparent 0 48%, rgba(255,255,255,.18) 49% 52%, transparent 53% 100%);
  background-size: 12px 12px;
}

.hero-copy h1 {
  gap: clamp(12px, 4vw, 20px);
  font-family: var(--serif);
  font-size: clamp(34px, 10.7vw, 51px);
  line-height: 1.05;
  letter-spacing: .015em;
  text-shadow:
    2px 0 0 rgba(255,255,255,.52),
    0 2px 0 rgba(255,255,255,.52),
    0 0 10px rgba(239, 142, 161, .26);
}

.game-hero.is-night .hero-copy h1 {
  text-shadow:
    2px 0 0 rgba(81, 55, 78, .8),
    0 2px 0 rgba(81, 55, 78, .8),
    0 0 12px rgba(245, 174, 191, .38);
}

.hero-copy h1 i {
  font-family: var(--sans);
  font-size: 14px;
  text-shadow: 2px 2px 0 rgba(121, 66, 77, .18), 0 0 9px rgba(255,113,137,.42);
}

.hero-date,
.eyebrow,
.section-kicker,
.game-score,
.game-message,
.tap-hint,
.family-lines .family-role,
.week,
.countdown small,
.map-label,
.map-buttons button,
.map-buttons a,
.transport-list span {
  font-family: var(--sans);
}

.hero-date,
.eyebrow,
.section-kicker {
  letter-spacing: .14em;
}

.hero-lead {
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .025em;
}

.game-score {
  padding: 7px 9px 6px;
  border: 2px solid rgba(148, 83, 98, .44);
  background: rgba(255, 240, 237, .65);
  box-shadow: 3px 3px 0 rgba(124, 73, 86, .18), inset 0 2px 0 rgba(255,255,255,.55);
  text-shadow: none;
}

.game-hero.is-night .game-score {
  border-color: rgba(238, 172, 191, .48);
  background: rgba(45, 35, 53, .7);
  box-shadow: 3px 3px 0 rgba(5,3,8,.3), inset 0 2px 0 rgba(255,255,255,.08);
}

.game-nudge { font-family: var(--korean); }

.game-message {
  border: 2px solid rgba(145, 91, 102, .35);
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: 4px 4px 0 rgba(119,83,85,.16), inset 0 2px 0 rgba(255,255,255,.58);
}

.scroll-cue i {
  width: 5px;
  height: 5px;
  margin-top: 6px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
  animation: scrollPulse 1.4s steps(3, end) infinite;
}

.paper-section,
.portrait-break {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(var(--pixel-grid) 1px, transparent 1px);
  background-size: 8px 8px;
}

.date-section,
.account-section {
  background-color: var(--paper-deep);
}

.paper-section {
  border-top: 3px solid rgba(155, 101, 114, .18);
}

.paper-section::before {
  width: 6px;
  height: 6px;
  background: var(--coral);
  box-shadow:
    -12px 0 0 rgba(199,125,123,.42),
    12px 0 0 rgba(199,125,123,.42),
    0 8px 0 rgba(199,125,123,.18);
}

.paper-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(180,113,128,.34) 0 8px, transparent 8px 16px);
}

.paper-section > * { position: relative; z-index: 1; }

.ornament {
  display: inline-grid;
  width: 31px;
  height: 31px;
  margin-bottom: 20px;
  place-items: center;
  border: 2px solid var(--pixel-frame);
  background: var(--pixel-chip);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
  font-family: var(--sans);
  font-size: 13px;
}

.intro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 8px 12px 7px 10px;
  border: 2px solid rgba(155, 92, 107, .52);
  background: var(--pixel-chip);
  box-shadow: 4px 4px 0 var(--pixel-shadow), inset 0 2px 0 rgba(255,255,255,.46);
  color: var(--coral);
  font-family: var(--sans);
  line-height: 1;
}

.intro-badge span {
  font-size: 12px;
  filter: drop-shadow(1px 1px 0 rgba(121, 70, 82, .12));
}

.intro-badge strong {
  font-size: 9px;
  letter-spacing: .18em;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 17px;
  padding: 6px 8px 5px;
  border: 2px solid rgba(155, 92, 107, .42);
  background: var(--pixel-chip);
  box-shadow: 3px 3px 0 var(--pixel-shadow), inset 0 2px 0 rgba(255,255,255,.46);
  font-size: 8px;
  line-height: 1;
}

.paper-section h2,
.section-heading h2,
.rsvp-section h2,
.modal-panel h2 {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 2px 2px 0 rgba(173, 112, 127, .14), 0 0 9px rgba(241, 163, 179, .12);
}

.intro-section h2 {
  font-weight: 700;
  color: var(--ink);
  text-shadow: 2px 2px 0 rgba(173, 112, 127, .18), 0 0 10px rgba(241, 163, 179, .14);
}

.body-copy {
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .025em;
}

.family-lines { gap: 12px; }

.family-lines p {
  padding: 17px 7px 15px;
  border: 2px solid rgba(151, 96, 109, .28);
  background: rgba(255, 249, 246, .48);
  box-shadow: 4px 4px 0 var(--pixel-shadow), inset 0 2px 0 rgba(255,255,255,.55);
}

.family-lines .family-role {
  padding: 4px 7px;
  background: var(--coral);
  color: #fff8f4;
  box-shadow: 2px 2px 0 rgba(107,66,76,.2);
}

.family-lines .family-parents { font-size: 11px; }
.family-lines strong { margin-top: 3px; font-family: var(--serif); font-size: 17px; }

.portrait-break { padding: 42px 24px 78px; }

.photo-placeholder {
  height: 520px;
  border: 6px solid var(--pixel-frame-light);
  border-radius: 0;
  outline: 3px solid var(--pixel-frame);
  outline-offset: 0;
  box-shadow: 9px 9px 0 var(--pixel-shadow), -4px -4px 0 rgba(255,255,255,.52);
  image-rendering: auto;
}

.photo-placeholder::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 4px;
  border: 2px solid rgba(255,255,255,.48);
  box-shadow: inset 0 0 0 2px rgba(121, 72, 84, .14);
  pointer-events: none;
}

.photo-placeholder::after {
  z-index: 3;
  box-shadow: inset 0 0 0 3px rgba(95, 55, 67, .12);
  pointer-events: none;
}

.theme-night .photo-placeholder { filter: none; }

.calendar {
  padding: 12px;
  border: 3px solid rgba(145, 91, 104, .42);
  background: rgba(255,249,246,.42);
  box-shadow: 5px 5px 0 var(--pixel-shadow), inset 0 3px 0 rgba(255,255,255,.5);
}

.week {
  min-height: 38px;
  font-size: 10px;
}

.week.head {
  min-height: 28px;
  margin-bottom: 5px;
  background: rgba(203, 127, 143, .13);
  border-bottom: 2px solid rgba(145, 91, 104, .24);
}

.week span {
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
}

.wedding-day {
  width: 31px;
  height: 31px;
  border: 2px solid #fff0eb;
  border-radius: 0;
  outline: 2px solid var(--coral);
  background: var(--coral);
  box-shadow: 3px 3px 0 rgba(124,74,86,.25);
}

.wedding-day i { top: -11px; right: -5px; font-family: var(--sans); }

.countdown { gap: 9px; }

.countdown div {
  min-width: 56px;
  border: 2px solid rgba(145, 91, 104, .3);
  background: rgba(255,249,246,.72);
  box-shadow: 4px 4px 0 var(--pixel-shadow), inset 0 2px 0 rgba(255,255,255,.7);
}

.countdown strong {
  font-family: var(--serif);
  font-size: 21px;
}

.gallery-section {
  background:
    linear-gradient(90deg, rgba(164, 93, 113, .07) 1px, transparent 1px),
    linear-gradient(rgba(164, 93, 113, .07) 1px, transparent 1px),
    linear-gradient(180deg, #f2e6e1 0%, #f7e4e6 22%, #efcbd2 100%);
  background-size: 8px 8px, 8px 8px, 100% 100%;
  border-top: 4px solid rgba(151, 91, 107, .28);
}

.theme-night .gallery-section {
  background:
    linear-gradient(90deg, rgba(246, 191, 208, .055) 1px, transparent 1px),
    linear-gradient(rgba(246, 191, 208, .055) 1px, transparent 1px),
    linear-gradient(180deg, var(--paper-deep) 0%, #3a2938 24%, #49303f 100%);
  background-size: 8px 8px, 8px 8px, 100% 100%;
}

.gallery-grid { gap: 14px; padding: 0 5px; }

.gallery-card {
  border: 5px solid var(--pixel-frame-light);
  outline: 2px solid var(--pixel-frame);
  outline-offset: 0;
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--pixel-shadow);
  image-rendering: auto;
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}

.gallery-card:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
}

.gallery-caption {
  width: max-content;
  max-width: calc(100% - 20px);
  margin: 24px auto 0;
  padding: 7px 10px;
  border: 2px solid rgba(145, 91, 104, .25);
  background: rgba(255,247,243,.48);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  font-size: 9px;
}

.venue {
  width: min(100%, 330px);
  margin-right: auto;
  margin-left: auto;
  padding: 15px 12px;
  border: 2px solid rgba(145, 91, 104, .28);
  background: rgba(255,249,246,.45);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
}

.venue strong { font-family: var(--serif); }

.map-illustration {
  border: 4px solid var(--pixel-frame-light);
  outline: 2px solid var(--pixel-frame);
  background-color: #eadbd1;
  background-image:
    linear-gradient(90deg, rgba(138,94,101,.11) 1px, transparent 1px),
    linear-gradient(rgba(138,94,101,.11) 1px, transparent 1px);
  background-size: 12px 12px;
  box-shadow: 6px 6px 0 var(--pixel-shadow);
}

.map-illustration::before {
  border: 3px solid rgba(105,91,78,.18);
  border-radius: 0;
  background: #d7b7b5;
  box-shadow: 180px 105px 0 #dfc4c0;
}

.road {
  background: #fff8ef;
  box-shadow: inset 0 3px 0 rgba(156,112,114,.12), inset 0 -3px 0 rgba(156,112,114,.12);
}

.road-horizontal { left: -4px; top: 124px; width: calc(100% + 8px); height: 30px; transform: none; }
.road-vertical { left: 61%; top: -4px; width: 27px; height: calc(100% + 8px); transform: none; }

.river {
  left: -4px;
  bottom: 17px;
  width: calc(100% + 8px);
  height: 32px;
  transform: none;
  background: repeating-linear-gradient(90deg, #a7c4c7 0 14px, #bad2d2 14px 25px);
  border-top: 3px solid rgba(71,111,120,.18);
  border-bottom: 3px solid rgba(71,111,120,.18);
}

.map-label {
  border: 2px solid rgba(123,82,94,.32);
  background: #fff6ef;
  box-shadow: 3px 3px 0 rgba(99,65,76,.18);
}

.venue-pin i {
  width: 39px;
  height: 39px;
  border: 3px solid #fff0eb;
  border-radius: 0;
  outline: 2px solid var(--coral);
  transform: none;
  box-shadow: 4px 4px 0 rgba(98,62,72,.22), inset 0 3px 0 rgba(255,255,255,.25);
  font-family: var(--sans);
}

.venue-pin b {
  border: 2px solid #fff0eb;
  background: #a55f70;
  box-shadow: 3px 3px 0 rgba(98,62,72,.22);
  font-family: var(--sans);
}

.map-buttons { gap: 10px; }

.map-buttons button,
.map-buttons a,
.primary-button,
.account-row button,
footer button {
  border: 3px solid var(--pixel-frame);
  border-radius: 0;
  background: #fff2ec;
  color: #6e4952;
  box-shadow:
    5px 5px 0 var(--pixel-shadow),
    inset 0 3px 0 rgba(255,255,255,.68),
    inset 0 -3px 0 rgba(167,94,111,.12);
  font-family: var(--sans);
  font-weight: 700;
  transition: transform .12s steps(2, end), box-shadow .12s steps(2, end);
}

.map-buttons button:active,
.map-buttons a:active,
.primary-button:active,
.account-row button:active,
footer button:active {
  transform: translate(4px, 4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
}

.primary-button {
  background: #d9798d;
  color: #fffaf4;
  box-shadow:
    5px 5px 0 rgba(93,53,67,.32),
    inset 0 4px 0 rgba(255,211,219,.4),
    inset 0 -4px 0 rgba(139,66,83,.24);
}

.rsvp-section {
  border-top: 4px solid rgba(126, 69, 85, .3);
  border-bottom: 4px solid rgba(126, 69, 85, .3);
  background:
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(195,124,137,.54), rgba(169,105,123,.7)),
    linear-gradient(135deg, #f2cbd0, #d99eaa 55%, #edc1c8);
  background-size: 8px 8px, 8px 8px, 100% 100%, 100% 100%;
}

.theme-night .rsvp-section {
  background:
    linear-gradient(90deg, rgba(255,220,231,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,220,231,.045) 1px, transparent 1px),
    linear-gradient(rgba(69,42,59,.76), rgba(76,43,61,.84)),
    linear-gradient(135deg, #4b3344, #5b394e 55%, #735064);
  background-size: 8px 8px, 8px 8px, 100% 100%, 100% 100%;
}

.rsvp-section > div {
  width: 100%;
  padding: 32px 12px;
  border: 3px solid rgba(255,240,237,.74);
  box-shadow: 7px 7px 0 rgba(88,46,61,.24), inset 0 0 0 3px rgba(128,66,84,.16);
  background: rgba(155, 83, 105, .14);
}

details {
  margin-bottom: 9px;
  border: 2px solid rgba(145, 91, 104, .3);
  background: rgba(255,249,246,.4);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
}

details:last-child { border-bottom: 2px solid rgba(145, 91, 104, .3); }
summary { padding: 17px 13px; }
summary i { font-family: var(--sans); transition: transform .18s steps(3, end); }
.account-row { padding: 6px 13px 16px; }

footer {
  border-top: 4px solid rgba(255,230,231,.28);
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    #bc8994;
  background-size: 8px 8px, 8px 8px, auto;
}

.theme-night footer {
  background:
    linear-gradient(90deg, rgba(255,220,231,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,220,231,.04) 1px, transparent 1px),
    #3d2938;
  background-size: 8px 8px, 8px 8px, auto;
}

.footer-script {
  font-family: var(--serif);
  font-size: 24px;
  font-style: normal;
  text-shadow: 2px 2px 0 rgba(83,50,60,.25), 0 0 9px rgba(255,222,228,.22);
}

/* 마지막 커플은 게임과 동일한 그리기 함수를 사용하는 픽셀 캔버스입니다. */
.footer-pixels {
  height: 86px;
  align-items: center;
  margin-bottom: 22px;
}

.footer-couple-canvas {
  width: 120px;
  height: 82px;
  display: block;
  image-rendering: pixelated;
}

footer button {
  border-color: rgba(255,242,238,.72);
  background: rgba(117,66,83,.28);
  color: #fff9f4;
}

.modal-backdrop,
.lightbox {
  background-color: rgba(29,20,29,.88);
  background-image:
    linear-gradient(90deg, rgba(255,220,231,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,220,231,.04) 1px, transparent 1px);
  background-size: 8px 8px;
  backdrop-filter: none;
}

.lightbox { background-color: #241a25; }

.modal-panel {
  border: 4px solid var(--pixel-frame);
  border-bottom: 0;
  border-radius: 0;
  box-shadow: 0 -7px 0 var(--pixel-shadow), inset 0 4px 0 rgba(255,255,255,.45);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, var(--pixel-grid) 1px, transparent 1px),
    linear-gradient(var(--pixel-grid) 1px, transparent 1px);
  background-size: 8px 8px;
}

.modal-close,
.lightbox button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  background: rgba(255,245,242,.1);
  box-shadow: 3px 3px 0 rgba(0,0,0,.2);
  font-family: var(--sans);
  line-height: 1;
}

input,
textarea,
select,
fieldset {
  border: 2px solid rgba(145, 91, 104, .36);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 rgba(117,75,86,.08);
  font-family: var(--korean);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--coral);
  box-shadow: inset 3px 3px 0 rgba(117,75,86,.08), 3px 3px 0 var(--pixel-shadow);
}

#lightboxArt {
  border: 7px solid var(--pixel-frame-light);
  outline: 3px solid var(--pixel-frame);
  box-shadow: 10px 10px 0 rgba(0,0,0,.32);
  image-rendering: auto;
}

.lightbox-stage {
  width: min(calc(100vw - 46px), 430px);
  display: grid;
  justify-items: center;
  gap: 18px;
  touch-action: pan-y;
  user-select: none;
}

#lightboxArt {
  width: min(100%, 48vh, 406px);
  height: auto;
  aspect-ratio: 2 / 3;
  max-height: min(72vh, 610px);
  background-color: #3b2937;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, opacity;
}

#lightboxArt.photo-landscape {
  width: 100%;
  aspect-ratio: 3 / 2;
}

#lightboxArt.photo-square {
  width: min(100%, 72vh, 610px);
  aspect-ratio: 1;
}

.lightbox-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border: 2px solid #f9dfe4;
  color: #fff8f4;
  background: #91576b;
  box-shadow: 4px 4px 0 rgba(0,0,0,.28);
  font-family: var(--sans);
  font-size: 10px;
}

.lightbox-meta small {
  padding-left: 10px;
  border-left: 2px solid rgba(255,255,255,.35);
  font-size: 7px;
  letter-spacing: .14em;
}

.lightbox .lightbox-close {
  z-index: 3;
  right: 14px;
  top: 14px;
}

.lightbox .lightbox-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: auto;
  margin-top: -20px;
  color: #fff8f4;
  background: rgba(93, 54, 72, .78);
  font-size: 27px;
}

.lightbox .lightbox-prev { left: 7px; }
.lightbox .lightbox-next { right: 7px; left: auto; }

@media (max-width: 370px) {
  .lightbox { padding-right: 17px; padding-left: 17px; }
  .lightbox-stage { width: min(calc(100vw - 38px), 430px); }
  .lightbox .lightbox-nav { width: 34px; height: 42px; }
}

.toast {
  border: 3px solid #f9dfe4;
  border-radius: 0;
  background: #9f5d70;
  box-shadow: 5px 5px 0 rgba(56,31,43,.3), inset 0 3px 0 rgba(255,255,255,.22);
  font-family: var(--korean);
}

.theme-night .family-lines p,
.theme-night .calendar,
.theme-night .venue,
.theme-night details,
.theme-night .gallery-caption {
  background: rgba(51, 39, 51, .68);
}

.theme-night .countdown div,
.theme-night .account-row button,
.theme-night input,
.theme-night textarea,
.theme-night select {
  border-color: rgba(223, 154, 173, .32);
}

@media (min-width: 700px) {
  .page-shell { border-radius: 0; }
}

/* ─────────────────────────────────────────────
   FLOATING PHOTO STORY
   액자 대신 흐린 픽셀 가장자리와 부유 그림자로 사진을 잇습니다.
   ───────────────────────────────────────────── */
.photo-placeholder.has-photo {
  border: 0;
  outline: 0;
  background-position: center;
  background-size: cover;
  box-shadow:
    0 24px 48px rgba(111, 70, 83, .2),
    0 7px 16px rgba(82, 52, 63, .14);
}

.photo-placeholder.has-photo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -11%;
  border: 0;
  background: var(--photo-url) center / cover no-repeat;
  box-shadow: none;
  opacity: .72;
  filter: blur(20px) saturate(.9);
  transform: scale(1.08);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 48%, #000 84%);
  mask-image: radial-gradient(ellipse at center, transparent 48%, #000 84%);
}

.photo-placeholder.has-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251,245,242,.82), transparent 10%, transparent 90%, rgba(251,245,242,.82)),
    linear-gradient(180deg, rgba(251,245,242,.7), transparent 9%, transparent 91%, rgba(251,245,242,.82)),
    linear-gradient(90deg, rgba(150,91,108,.11) 1px, transparent 1px),
    linear-gradient(rgba(150,91,108,.11) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 8px 8px, 8px 8px;
  box-shadow: inset 0 0 24px rgba(89, 57, 68, .12);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 58%, #000 100%);
  pointer-events: none;
}

.theme-night .photo-placeholder.has-photo {
  box-shadow:
    0 25px 52px rgba(0, 0, 0, .38),
    0 8px 18px rgba(0, 0, 0, .26);
}

.theme-night .photo-placeholder.has-photo::after {
  background:
    linear-gradient(90deg, rgba(33,28,39,.84), transparent 10%, transparent 90%, rgba(33,28,39,.84)),
    linear-gradient(180deg, rgba(33,28,39,.72), transparent 9%, transparent 91%, rgba(33,28,39,.86)),
    linear-gradient(90deg, rgba(230,156,177,.09) 1px, transparent 1px),
    linear-gradient(rgba(230,156,177,.09) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 8px 8px, 8px 8px;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, .24);
}

.gallery-section {
  --gallery-edge: rgba(239, 202, 210, .32);
  --gallery-card-width: clamp(218px, 62vw, 280px);
  --gallery-stack-step: clamp(36px, 10.5vw, 48px);
  min-height: 0;
  padding: 58px 0 72px;
  overflow: hidden;
  border-top: 0;
}

.theme-night .gallery-section {
  --gallery-edge: rgba(44, 34, 47, .38);
}

.gallery-heading {
  position: relative;
  z-index: 8;
  margin-bottom: 18px;
  text-align: center;
}

.gallery-badge { margin: 0; }

.gallery-carousel {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px calc((100% - var(--gallery-card-width)) / 2) 32px;
  scroll-padding-inline: calc((100% - var(--gallery-card-width)) / 2);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.gallery-carousel::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 var(--gallery-card-width);
  min-width: 0;
  min-height: min(56svh, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  z-index: 0;
  opacity: 0;
  transform: translateY(14px) scale(.8);
  transition: opacity .28s ease, transform .4s cubic-bezier(.22,.8,.24,1);
  cursor: grab;
  pointer-events: none;
}

.gallery-slide + .gallery-slide {
  margin-left: calc((var(--gallery-card-width) - var(--gallery-stack-step)) * -1);
}

.gallery-slide.is-prev-2,
.gallery-slide.is-next-2 {
  z-index: 2;
  opacity: .34;
  pointer-events: auto;
}

.gallery-slide.is-prev-2 { transform: translateX(-17px) translateY(13px) scale(.84); }
.gallery-slide.is-next-2 { transform: translateX(17px) translateY(13px) scale(.84); }

.gallery-slide.is-prev-1,
.gallery-slide.is-next-1 {
  z-index: 3;
  opacity: .68;
  pointer-events: auto;
}

.gallery-slide.is-prev-1 { transform: translateX(-8px) translateY(7px) scale(.92); }
.gallery-slide.is-next-1 { transform: translateX(8px) translateY(7px) scale(.92); }

.gallery-slide.is-active {
  z-index: 5;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.gallery-slide:active { cursor: grabbing; }

.gallery-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gallery-photo) center / cover no-repeat;
  box-shadow:
    0 18px 38px rgba(89, 52, 68, .2),
    0 5px 12px rgba(71, 43, 54, .14);
  isolation: isolate;
}

.gallery-photo.photo-landscape { aspect-ratio: 3 / 2; }
.gallery-photo.photo-square { aspect-ratio: 1; }

.gallery-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7%;
  background: var(--gallery-photo) center / cover no-repeat;
  opacity: .34;
  filter: blur(14px) saturate(.92);
  transform: scale(1.05);
}

.gallery-photo img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(ellipse 88% 90% at center, #000 72%, rgba(0,0,0,.98) 88%, rgba(0,0,0,.72) 100%);
  mask-image: radial-gradient(ellipse 88% 90% at center, #000 72%, rgba(0,0,0,.98) 88%, rgba(0,0,0,.72) 100%);
}

.gallery-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, var(--gallery-edge), transparent 5%, transparent 95%, var(--gallery-edge)),
    linear-gradient(180deg, var(--gallery-edge), transparent 5%, transparent 95%, var(--gallery-edge)),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 8px 8px, 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 72%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 72%, #000 100%);
  pointer-events: none;
}

.theme-night .gallery-photo {
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .3),
    0 6px 14px rgba(0, 0, 0, .2);
}

.gallery-carousel-meta {
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: rgba(91, 63, 72, .72);
  background: rgba(255, 239, 239, .42);
  box-shadow: 4px 4px 14px rgba(93, 52, 68, .12);
  font: 700 9px/1 var(--sans);
}

.gallery-carousel-meta i {
  opacity: .45;
  font-style: normal;
}

.gallery-carousel-meta small {
  margin-left: 5px;
  padding-left: 9px;
  border-left: 1px solid currentColor;
  font-size: 7px;
  letter-spacing: .16em;
}

.theme-night .gallery-carousel-meta {
  color: rgba(255, 226, 233, .72);
  background: rgba(77, 51, 66, .38);
  box-shadow: 4px 4px 16px rgba(0,0,0,.2);
}

@media (max-width: 370px) {
  .gallery-section {
    --gallery-card-width: clamp(205px, 61vw, 225px);
    --gallery-stack-step: 34px;
  }

  .gallery-slide { min-height: min(54svh, 420px); }
}

/* ─────────────────────────────────────────────
   NABISQUARE LOCATION GUIDE
   공식 약도의 주요 도로·하천·주차 지점을 픽셀 맵으로 단순화합니다.
   ───────────────────────────────────────────── */
.venue-map {
  height: 320px;
  margin-top: 27px;
  background-color: #eadbd6;
  background-image:
    linear-gradient(90deg, rgba(138,94,101,.09) 1px, transparent 1px),
    linear-gradient(rgba(138,94,101,.09) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 68%);
  background-size: 10px 10px, 10px 10px, 100% 100%;
}

.venue-map::before { content: none; }

.venue-map .road {
  z-index: 1;
  border: 2px solid rgba(150, 111, 113, .14);
  background: #fff5ef;
  box-shadow: none;
}

.venue-map .road-horizontal {
  left: -8px;
  top: 166px;
  width: calc(100% + 16px);
  height: 25px;
  transform: none;
}

.venue-map .road-horizontal span {
  position: absolute;
  left: 11px;
  top: 5px;
  color: #9b737c;
  font: 700 7px/1 var(--sans);
  letter-spacing: .05em;
}

.venue-map .road-west,
.venue-map .road-center,
.venue-map .road-east {
  top: -8px;
  bottom: -8px;
  width: 17px;
  height: auto;
}

.venue-map .road-west { left: 22%; }
.venue-map .road-center { left: 48%; }
.venue-map .road-east { left: 73%; }

.venue-map .river {
  z-index: 0;
  left: 63%;
  top: -8px;
  bottom: -8px;
  width: 24px;
  height: auto;
  border: 0;
  transform: none;
  background: repeating-linear-gradient(180deg, #a8c5cf 0 13px, #b9d3d8 13px 24px);
  box-shadow: inset 3px 0 rgba(255,255,255,.2), inset -3px 0 rgba(80,120,131,.1);
}

.venue-map .river span {
  position: absolute;
  top: 31px;
  left: 7px;
  color: #fff;
  font: 700 7px/1 var(--sans);
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.venue-map .map-label,
.venue-map .map-direction {
  z-index: 3;
  border: 1px solid rgba(123,82,94,.22);
  background: rgba(255, 247, 242, .9);
  box-shadow: 2px 2px 0 rgba(99,65,76,.12);
  color: #775f65;
  font: 700 7px/1.35 var(--sans);
}

.venue-map .fire-station { left: 25%; top: 132px; }
.venue-map .stadium { left: 39%; top: 45px; }
.venue-map .village { right: 4px; bottom: 44px; text-align: right; }

.venue-map .map-direction {
  position: absolute;
  right: 4px;
  top: 198px;
  padding: 4px 6px;
}

.venue-map .map-direction b { color: var(--coral); }

.parking-pin {
  position: absolute;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #76505d;
  font-family: var(--sans);
}

.parking-pin b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #fff3ef;
  outline: 2px solid #bd7d90;
  background: #d99cad;
  color: #fff;
  box-shadow: 3px 3px 0 rgba(98,62,72,.2);
  font-size: 10px;
}

.parking-pin small {
  padding: 3px 4px;
  background: rgba(255,247,242,.9);
  box-shadow: 2px 2px 0 rgba(98,62,72,.12);
  font-size: 6px;
  white-space: nowrap;
}

.venue-map .parking-two { left: 43%; top: 103px; }
.venue-map .parking-one { right: 18px; top: 122px; }

.venue-map .venue-pin {
  left: auto;
  right: 10px;
  top: 42px;
  transform: none;
}

.venue-map .venue-pin i {
  width: 31px;
  height: 31px;
  font-size: 11px;
}

.venue-map .venue-pin b {
  margin-top: 6px;
  padding: 4px 6px;
  font-size: 7px;
}

.venue-map .venue-pin small {
  margin-top: 3px;
  padding: 3px 5px;
  background: #fff1ed;
  color: #9a6071;
  box-shadow: 2px 2px 0 rgba(98,62,72,.14);
  font: 700 6px/1 var(--sans);
}

.map-buttons { gap: 9px; }

.map-buttons a {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255,249,246,.54);
}

.map-app-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 2px 2px 0 rgba(79,58,65,.16);
  color: #fff;
  font: 900 11px/1 Arial, sans-serif;
}

.naver-icon { background: #03c75a; }
.kakao-icon { border-radius: 7px; background: #fee500; color: #332b2b; }

.theme-night .venue-map {
  background-color: #3b303d;
  background-image:
    linear-gradient(90deg, rgba(246,191,208,.065) 1px, transparent 1px),
    linear-gradient(rgba(246,191,208,.065) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 68%);
}

.theme-night .venue-map .road { border-color: rgba(255,218,227,.08); background: #675762; }
.theme-night .venue-map .map-label,
.theme-night .venue-map .map-direction,
.theme-night .parking-pin small { color: #e5d4d9; background: rgba(55,43,56,.92); }
.theme-night .venue-map .venue-pin small { color: #ffd6df; background: #4a3948; }
.theme-night .map-buttons a { background: rgba(51,39,51,.62); }

@media (max-width: 360px) {
  .venue-map .fire-station { left: 24%; }
  .venue-map .stadium { left: 37%; }
}

/* 교통 안내는 개별 카드 대신 하나의 가벼운 세로 흐름으로 읽히게 합니다. */
.venue-hall {
  justify-self: center;
  margin: 1px 0 2px;
  padding: 4px 8px;
  background: rgba(204, 126, 146, .13);
  color: var(--coral);
  font: 700 8px/1 var(--sans);
  font-style: normal;
  letter-spacing: .08em;
}

.arrival-guide {
  position: relative;
  margin-top: 42px;
  padding: 0 8px;
  text-align: left;
}

.arrival-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 31px;
  color: var(--ink);
}

.arrival-title i {
  width: 10px;
  height: 10px;
  background: var(--coral);
  box-shadow: 3px 3px 0 rgba(104, 66, 77, .16);
  transform: rotate(45deg);
}

.arrival-title span {
  font: 700 13px/1 var(--serif);
  letter-spacing: -.02em;
}

.arrival-title small {
  margin-left: auto;
  color: rgba(128, 86, 98, .58);
  font: 700 7px/1 var(--sans);
  letter-spacing: .13em;
}

.transport-list {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.transport-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 16px;
  bottom: 20px;
  left: 14px;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(201,125,144,.54) 0 5px, transparent 5px 9px);
}

.transport-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 29px;
}

.transport-item:last-child { padding-bottom: 0; }

.transport-marker {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(182, 111, 130, .42);
  background: var(--paper);
  color: var(--coral);
  box-shadow: 3px 3px 0 rgba(105, 65, 78, .1);
  font: 700 7px/1 var(--sans);
  letter-spacing: .02em;
}

.transport-copy {
  min-width: 0;
  padding-top: 1px;
}

.transport-copy h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 700 12px/1.2 var(--serif);
  letter-spacing: -.025em;
}

.transport-copy p {
  margin: 0;
  color: #696e65;
  font-size: 11px;
  line-height: 1.85;
}

.transport-copy b { color: var(--ink); }

.transport-copy small {
  display: block;
  margin-top: 4px;
  color: #8c7c80;
  font-size: 9px;
  line-height: 1.75;
}

.theme-night .venue-hall { background: rgba(225, 138, 164, .13); color: #f0a9bb; }
.theme-night .arrival-title small { color: rgba(238, 197, 209, .5); }
.theme-night .transport-marker { background: #2e2631; border-color: rgba(229, 153, 176, .38); }
.theme-night .transport-copy p { color: #c9bdc1; }
.theme-night .transport-copy small { color: #a99ba1; }

@media (max-width: 360px) {
  .arrival-guide { padding-right: 3px; padding-left: 3px; }
  .transport-item { gap: 13px; }
}