:root {
  color-scheme: dark;
  --bg: #0d0b1e;
  --bg-2: #18142f;
  --ink: #f2ecff;
  --ink-dim: #a59dc4;
  --line: rgba(232, 196, 122, 0.28);
  --gold: #e8c47a;
  --gold-hi: #fbe3a6;
  --gold-lo: #9c7a37;
  --ko: #ff9fb5;
  --er: #7fe3d3;
  --a: #ffd2a1;
  --b: #c9b8ff;
  --err: #ff9aa8;
  --paper: #f4ead3;
  --paper-ink: #2e2238;
  --paper-brown: #7b5a36;
  --paper-err: #a3304a;
  --serif: "Gowun Batang", "AppleMyungjo", "Batang", serif;
  --roman: "Cinzel", "Times New Roman", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --radius: 16px;
  --maxw: 640px;
  --garden: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: radial-gradient(120% 70% at 50% 0%, #2a2150 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
p, .v-title, .v-type { text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.nl { white-space: pre-line; }

.seo-fallback-data { display: none; }
#root:not(.is-ready) { min-height: 100vh; min-height: 100dvh; }
#root:not(.is-ready)::before {
  content: ""; position: fixed; left: 50%; top: 50%; width: 140px; height: 3px; margin: -2px 0 0 -70px;
  border-radius: 3px; background: rgba(232, 196, 122, .18);
}
#root:not(.is-ready)::after {
  content: ""; position: fixed; left: 50%; top: 50%; width: 46px; height: 3px; margin: -2px 0 0 -70px;
  border-radius: 3px; background: var(--gold); animation: loadbar 1.1s ease-in-out infinite;
}
@keyframes loadbar { 0% { transform: translateX(0); } 50% { transform: translateX(94px); } 100% { transform: translateX(0); } }

.bg-stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(251,227,166,.7), transparent),
    radial-gradient(1px 1px at 63% 44%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 78% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 90% 28%, rgba(251,227,166,.6), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.45), transparent);
  background-size: 420px 420px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
#root { position: relative; min-height: 100vh; min-height: 100dvh; }
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #1b1640 url("https://lwi.nexon.com/m_mabinogim/brand/snack/namematch/bg-scene-m_1zewzsb5i1jn.webp") center 40% / cover no-repeat; transition: filter 1.2s ease;
  filter: brightness(var(--lit, 1)) saturate(var(--sat, 1)); }
.bg-scene::before, .bg-scene::after { content: ""; position: absolute; inset: 0; }
.bg-scene::before { background: linear-gradient(180deg, rgba(13, 11, 30, .82) 0, rgba(13, 11, 30, .74) 240px, rgba(13, 11, 30, .15) 380px, rgba(13, 11, 30, .1) 60%, rgba(13, 11, 30, .5) 100%); }
.bg-scene::after { background: linear-gradient(180deg, rgba(13, 11, 30, .97) 0%, rgba(13, 11, 30, .9) 60%, rgba(13, 11, 30, .84) 100%); transition: opacity 1.6s ease; }
body.reveal .bg-scene::after { opacity: 0; }
@media (min-aspect-ratio: 1/1) { .bg-scene { background-image: url("https://lwi.nexon.com/m_mabinogim/brand/snack/namematch/bg-scene-pc_fr2yq3hbf1c0.webp"); } }
body.reveal .bg-stars { animation: none; opacity: 0; transition: opacity 1.2s ease; }
body.reveal .names .and { color: var(--ink); }
body.reveal .actions { padding: 18px 14px 6px; border-radius: 14px; background: rgba(13, 11, 30, .84); }
body.mood-low .bg-scene { filter: grayscale(.7) brightness(var(--lit, .5)); animation: lampsOut 1.4s steps(1) 1; }
body.mood-low .bg-stars { opacity: .45; }
@keyframes lampsOut { 0% { filter: brightness(.85); } 18% { filter: brightness(.4); } 30% { filter: brightness(.85); } 48% { filter: brightness(.35); } 60% { filter: brightness(.75); } 100% { filter: grayscale(.85) brightness(.45); } }
.petals { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.petal { position: absolute; top: -16px; width: 10px; height: 6px; border-radius: 60% 40% 60% 40%; background: #f3efe4; opacity: .9;
  animation: petalFall 6s linear forwards; }
.petal.p-p { background: #f6c6d2; }
.petal.p-g { background: #f1d38a; }
@keyframes petalFall { to { transform: translate(var(--dx, 0), 110vh) rotate(540deg); opacity: .25; } }

#app { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: 28px max(16px, env(safe-area-inset-right)) calc(var(--garden) * .55 + max(24px, env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left)); }
.screen { display: none; }
.screen.active { display: block; animation: fadeIn .5s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.erinn { font-family: "MM Erinn", var(--serif); letter-spacing: .02em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); font-size: 15px; font-weight: 700;
  transition: transform .15s var(--ease), background .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2b1f0b; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-lg { min-height: 56px; font-size: 17px; width: 100%; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-link { background: none; border: 0; color: var(--ink-dim); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 8px; min-height: 44px; }

.intro { text-align: center; padding-top: 8px; }
.logo { display: block; margin: 0 auto 22px; opacity: .9; }
.title { font-family: var(--serif); font-weight: 700; font-size: clamp(48px, 15vw, 72px); line-height: 1.05; letter-spacing: 0; color: var(--gold-hi); }
.title-pre { display: block; font-size: .5em; color: var(--gold-hi); }
.title-main { display: block; }
.title.title-sm { font-size: 34px; }
.title.title-sm .title-pre { font-size: .5em; }
.invite-desc { margin: 10px auto 0; max-width: 30em; color: var(--ink-dim); font-size: 14px; text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.voice.lede { margin-top: 12px; font-size: 18px; text-wrap: balance; }

.intro-home .intro-hero > *, .intro-home .note { animation: rise .6s var(--ease) both; }
.intro-home .letter { animation: riseTilt .7s var(--ease) both; }
.invite .letter { animation: letterOut .4s var(--ease) both; }
@keyframes letterOut { from { opacity: 0; transform: scale(.96) rotate(-.6deg); } to { opacity: 1; transform: rotate(-.6deg); } }
.intro-home .intro-hero > :nth-child(2) { animation-delay: .08s; }
.intro-home .intro-hero > :nth-child(3) { animation-delay: .16s; }
.intro-home .intro-hero > :nth-child(4) { animation-delay: .26s; }
.intro-home .letter { animation-delay: .34s; }
.intro-home .note { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes riseTilt { from { opacity: 0; transform: translateY(24px) rotate(-2deg); } to { opacity: 1; transform: rotate(-.6deg); } }

.form-msg { min-height: 20px; color: var(--err); font-size: 13px; text-align: center; }
.note { color: var(--ink-dim); font-size: 12px; text-align: center; line-height: 1.6; margin-top: 4px; }

.names { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.nm { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.names:not(.long) { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 14px; }
.names:not(.long) .nm:first-child { justify-self: end; }
.names:not(.long) .nm:last-child { justify-self: start; }
.nm b { font-family: var(--serif); font-size: 26px; letter-spacing: .06em; }
.nm .erinn { font-size: clamp(13px, 4.2vw, 20px); line-height: 1.3; color: var(--gold); min-height: 1.3em; overflow-wrap: anywhere; text-align: center; text-wrap: balance; }
.nm .erinn:empty { min-height: 0; }
.nm:first-child b { color: var(--a); }
.nm:last-child b { color: var(--b); }
.names .and { display: inline-flex; align-items: center; font: 700 20px/1 var(--serif); color: var(--ink-dim); }
.names:not(.long) { align-items: start; }
.names:not(.long) .and { height: 1.7em; }
.names.long { flex-direction: column; gap: 4px; }
.names.long .nm { max-width: 100%; }
.names.long .nm b { font-size: clamp(18px, 5.5vw, 26px); word-break: break-all; text-align: center; }
.names.long .nm .erinn { white-space: normal; word-break: break-all; text-align: center; font-size: clamp(12px, 3.6vw, 18px); }
.er-ch { display: inline-block; opacity: 0; animation: ink .5s var(--ease) forwards; }
@keyframes ink { from { opacity: 0; filter: blur(4px); transform: translateY(-4px); } to { opacity: 1; filter: none; transform: none; } }

.calc { display: grid; gap: 14px; position: relative; }
.pyr {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px 12px;
  background: rgba(20, 16, 40, .62);
}
.pyr header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.pyr-k { font-family: var(--serif); font-weight: 700; font-size: 16px; }
.pyr-ko .pyr-k { color: var(--ko); }
.pyr-er .pyr-k { color: var(--er); }
.pyr header small { color: var(--ink-dim); font-size: 12px; }
.pyr-grid { --cell: clamp(3px, calc((min(100vw, var(--maxw)) - 64px) / var(--n, 6)), 30px); overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.pyr-row { display: flex; justify-content: center; width: max-content; min-width: 100%; margin: 0 auto; }
.pyr-row span { width: var(--cell); height: calc(var(--cell) * .9); display: grid; place-items: center; flex: none;
  font: 700 calc(var(--cell) * .55) / 1 var(--roman); color: var(--ink); }
.pyr-row.label { margin-bottom: 6px; }
.pyr-row.label span { height: calc(var(--cell) * 1.3); font: 700 calc(var(--cell) * .62) / 1 var(--serif); }
.pyr-er .pyr-row.label span { font-family: "MM Erinn", var(--serif); font-size: calc(var(--cell) * .72); }
.pyr-row .wa { color: var(--a); }
.pyr-row .wb { color: var(--b); }
.pyr-row.first span { color: var(--ink); border-top: 1px solid rgba(255,255,255,.08); }
.pyr-row.last span { color: var(--gold-hi); font-size: calc(var(--cell) * .75); }
.pyr-row.wait { visibility: hidden; }
.pyr-row.pop { animation: rowIn .35s var(--ease) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pyr.dense .pyr-row span { font-size: calc(var(--cell) * .8); }
.pyr.dense .pyr-row.label span { font-size: calc(var(--cell) * .85); height: calc(var(--cell) * 1.2); }
.pyr.dense .pyr-row.label { margin-bottom: 2px; }
.pyr-zoom { --cell: 28px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(232,196,122,.25); }
.pyr-zoom small { display: block; text-align: center; color: var(--ink-dim); font-size: 11px; margin-bottom: 4px; }
.pyr.dense .pyr-zoom .pyr-row span { font-size: calc(var(--cell) * .55); }
.pyr.dense .pyr-zoom .pyr-row.last span { font-size: calc(var(--cell) * .75); }
.pyr-er .pyr-row:not(.label) span { font-family: "MM Erinn", var(--roman); font-weight: 400; font-size: calc(var(--cell) * .42); }
.pyr-er .pyr-row.last span { font-size: calc(var(--cell) * .58); }
.pyr.pyr-er.dense .pyr-zoom .pyr-row span { font-size: calc(var(--cell) * .42); }
.pyr.pyr-er.dense .pyr-zoom .pyr-row.last span { font-size: calc(var(--cell) * .58); }
.pyr-er-num { text-align: center; color: var(--er); font-size: 30px; letter-spacing: .25em; padding-left: .25em; line-height: 1.25; min-height: 1.25em; margin-top: 8px; }
.pyr-score { text-align: center; margin-top: 8px; font-family: var(--serif); color: var(--ink-dim); font-size: 18px; }
.pyr-score b { font: 800 40px/1 var(--roman); color: var(--ink); margin-right: 2px; }
.pyr-ko .pyr-score b.on { color: var(--ko); }
.pyr-er .pyr-score b.on { color: var(--er); }
.skip { justify-self: center; position: sticky; bottom: 12px; z-index: 2; background: rgba(13, 11, 30, .82); border-radius: 10px; }

.ko-result { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 8px; animation: fadeIn .6s var(--ease); }
.kr-k { font: 700 16px/1.4 var(--serif); color: var(--ko); }
.kr-score { font: 700 28px/1 var(--serif); color: var(--ko); margin-top: 6px; }
.kr-score b { font: 800 clamp(72px, 22vw, 104px)/1 var(--roman); }
.kr-key { margin-top: 16px; font: 700 clamp(22px, 6.4vw, 28px)/1.35 var(--serif); color: var(--gold-hi); text-wrap: balance; }
#ko-result:focus, #res-voice:focus { outline: none; }
.kr-desc { margin-top: 8px; max-width: 30em; color: var(--ink); font-size: 15px; line-height: 1.7; }
.voice.kr-hint { margin-top: 34px; margin-bottom: 12px; }
.ko-result .btn-primary { width: 100%; max-width: 340px; margin-top: 4px; }

.answer { text-align: center; }
.v-cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; column-gap: 14px; margin: 14px 0 18px; }
.v-cmp .c-ko { justify-self: end; }
.v-cmp .c-er { justify-self: start; }
.v-cmp > span:not(.c-arrow) { display: flex; flex-direction: column; align-items: center; }
.v-cmp small { font: 700 13px/1.4 var(--serif); }
.v-cmp b { font: 800 clamp(40px, 12vw, 56px)/1 var(--roman); }
.c-ko { color: #9e3d5e; }
.c-er { color: #1d6b62; }
.c-arrow { font: 700 26px/1 var(--serif); color: var(--paper-brown); padding-bottom: 8px; }
.v-mini { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 14px; align-items: end; margin: 6px 0 0; }
.v-mini[hidden] { display: none; }
.v-mini .mini-ko { justify-self: end; }
.v-mini .mini-er { justify-self: start; }
.v-mini .mini-gap { width: 26px; }
.mini-row { display: flex; justify-content: center; }
.mini-row span { width: 18px; height: 17px; display: grid; place-items: center; flex: none; font: 700 14px/1 var(--roman); color: rgba(46, 34, 56, .55); }
.mini-er .mini-row span { font: 400 11px/1 "MM Erinn", var(--roman); }
.mini-row.last span { font-size: 17px; font-weight: 800; color: #9e3d5e; }
.mini-er .mini-row.last span { font-size: 15px; color: #1d6b62; }
.v-mini + .v-cmp { margin-top: 2px; }
.v-desc { margin-top: 10px; font: 400 16px/1.7 var(--serif); color: var(--paper-ink); }
.v-type { margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(70, 50, 30, .3); font: 700 20px/1.4 var(--serif); color: var(--paper-ink); text-align: left; }

.verdict { scroll-margin-top: 52px; margin-top: 26px; animation: fadeIn .6s var(--ease); }
.badge { display: inline-flex; align-items: center; justify-content: center; color: var(--gold-hi); font-size: 12px; letter-spacing: .1em; margin-bottom: 10px; }
.v-title { font-family: var(--serif); font-size: clamp(24px, 7vw, 32px); line-height: 1.3; color: var(--gold-hi); }
.v-sub { margin-top: 8px; color: var(--ink); font-size: 15px; }
.readings { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.reading { border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.04); }
.r-ko { --c: var(--ko); }
.r-er { --c: var(--er); }
.r-k { display: block; font-size: 12px; color: var(--c); font-weight: 700; letter-spacing: .04em; }
.reading b { display: block; font-family: var(--serif); font-size: 17px; margin: 2px 0 4px; }
.reading p { color: var(--ink-dim); font-size: 14px; }

.actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.actions > .btn-primary, .actions > .btn-wide { width: 100%; max-width: 340px; }
.ugc { margin-top: 2px; color: var(--ink-dim); font-size: 13px; text-align: center; }
.ugc b { color: var(--gold); }
#reply-btn { padding: 8px 20px; line-height: 1.3; }
.vow-note { margin-top: 2px; color: var(--gold-hi); font: 700 14px/1.5 var(--serif); text-align: center; }
.vow-note a { margin-left: 8px; color: var(--gold); text-underline-offset: 3px; }
.actions .how { width: 100%; }
.how { margin-top: 8px; text-align: left; color: var(--ink-dim); font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.how summary { cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--gold); }
.how p { margin-top: 8px; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: rgba(24,20,47,.95); border: 1px solid var(--line); color: var(--ink);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; padding: 10px 18px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.voice { font-family: var(--serif); font-weight: 700; color: var(--gold-hi); font-size: 17px; line-height: 1.6; text-align: center; margin-top: 14px; }
.result > .voice { margin: 0 0 14px; }
.result > .voice.gone { visibility: hidden; }
@media (max-width: 374px) { .result > .voice { font-size: 15.5px; letter-spacing: -.02em; } }

@media (max-width: 959px) { .intro-home .letter { margin-top: 38px; } }
.memo { margin-top: 18px; text-align: center; }
.memo-ex.in { animation: memoIn .6s var(--ease) both; }
@keyframes memoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.memo-n { font: 700 16px/1.5 var(--serif); color: var(--ink); }
.memo-n b { font: 800 24px/1 var(--roman); font-variant-numeric: tabular-nums; }
.m-ko { color: var(--ko); }
.m-er { color: var(--er); }
.memo-t { min-height: 1.5em; font: 700 17px/1.5 var(--serif); color: var(--gold-hi); }
.memo-t.in { animation: memoIn .5s var(--ease) both; }
.ps { margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(70, 50, 30, .3); text-align: left; }
.ps-k { font: 700 14px/1.4 var(--serif); color: var(--paper-brown); margin-bottom: 6px; }
.ps-row { display: flex; align-items: baseline; gap: 12px; font: 400 15px/1.8 var(--serif); color: var(--ink-soft); }
.ps-row.cur { color: var(--paper-ink); font-weight: 700; }
.ps-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ps-s { min-width: 5.4em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-v { display: inline-block; min-width: 2.6em; text-align: right; font-weight: inherit; }
.ps-line { margin-top: 8px; font: 400 15px/1.7 var(--serif); color: var(--paper-ink); }
@media (max-width: 479px) {
  .ps-row { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
  .ps-row + .ps-row { margin-top: 10px; }
  .ps-n { flex-basis: 100%; }
  .ps-n + .ps-s { margin-left: auto; }
}
@media (min-width: 480px) {
  .ps-table { display: grid; grid-template-columns: minmax(0, max-content) max-content max-content; justify-content: start; column-gap: 20px; align-items: baseline; }
  .ps-row { display: contents; }
}
.ps-go { display: block; margin: 6px auto 0; min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 700 15px/1 var(--serif); color: var(--paper-brown); text-decoration: underline; text-underline-offset: 4px; }

.verdict.is-special { padding: 18px 0 8px; }
.verdict.is-special .v-title { font-size: clamp(28px, 8.6vw, 72px); text-wrap: balance; line-height: 1.15; letter-spacing: -.01em; }
.verdict.beat .v-title { animation: beat .45s cubic-bezier(.16, 1, .3, 1) .45s both; }
@keyframes beat { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.v-title:focus { outline: none; }

.letter {
  --paper-bg: var(--paper); --paper-line: rgba(70, 50, 30, .13); --ink-on-paper: var(--paper-ink); --ink-soft: rgba(46, 34, 56, .74);
  position: relative; display: grid; gap: 0; text-align: left; margin-top: 8px;
  padding: 34px 22px 22px;
  color: var(--ink-on-paper);
  transform: rotate(-.6deg);
}
.letter::before, .paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 6px 3px 7px 4px;
  background-color: var(--paper-bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    radial-gradient(130% 120% at 50% 45%, rgba(0, 0, 0, 0) 58%, rgba(120, 80, 40, .16) 100%),
    repeating-linear-gradient(to bottom, transparent 0 39px, var(--paper-line) 39px 40px);
  background-position: 0 0, 0 0, 0 22px;
  filter: url(#paper-edge) drop-shadow(0 16px 22px rgba(0, 0, 0, .4));
}
.letter .l-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: end; column-gap: 8px; }
.letter .l-k { font: 700 20px/1 var(--serif); color: var(--paper-brown); padding-bottom: 12px; }
.letter .l-in {
  width: 100%; min-height: 48px; padding: 8px 2px 6px; border: 0; border-bottom: 1.5px solid rgba(46, 34, 56, .58);
  border-radius: 0; background: transparent; color: var(--ink-on-paper); font: 700 21px/1.2 var(--serif); letter-spacing: .02em;
}
.letter .l-in::placeholder { color: rgba(46, 34, 56, .6); font-weight: 400; font-size: 17px; }
.letter .l-in:focus { outline: none; border-bottom: 2px solid var(--paper-brown); box-shadow: 0 1px 0 var(--paper-brown); padding-bottom: 5.5px; }
.letter .l-in.bad { border-bottom-color: var(--paper-err); }
.letter :focus-visible { outline-color: var(--paper-brown); }
.letter .l-blank { height: 52px; }
.letter .form-msg { color: var(--paper-err); text-align: left; margin-top: 8px; }
.letter .form-msg:empty { display: none; }
.letter .btn { margin-top: 18px; }
.btn-ink { background: var(--paper-ink); color: var(--paper); border-color: transparent; }
.btn-ink:hover { filter: brightness(1.15); }
.btn-line { background: transparent; color: var(--paper-ink); border-color: var(--paper-ink); }
.btn-line:hover { background: rgba(46, 34, 56, .06); }
.letter .l-hint { min-height: 23px; margin-top: 10px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.letter .btn.done, .actions .btn.done { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2b1f0b; }
.letter .l-hint.done { font: 700 15px/1.5 var(--serif); color: var(--paper-ink); }
.wax {
  user-select: none;
  position: absolute; top: -24px; right: 18px; z-index: 2; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 47% 53% 50% 50% / 53% 46% 54% 47%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 196, 196, .5) 0 8%, rgba(255, 196, 196, 0) 30%),
    radial-gradient(circle at 50% 52%, #a23a4f 0 46%, #8b2c41 62%, #651b2c 100%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .38), inset 0 -4px 7px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .2);
  transform: rotate(-12deg);
  color: #5e1828; font-size: 13px; letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 210, 210, .35), 0 -1px 0 rgba(0, 0, 0, .3);
}
.wax::before {
  content: ""; position: absolute; inset: -3px -5px -5px -3px; z-index: -1;
  border-radius: 58% 42% 55% 45% / 44% 58% 42% 56%;
  background: radial-gradient(circle at 45% 40%, #7a2537 0 55%, #57141f 100%);
  box-shadow: 20px 26px 0 -19px #5e1724;
}
.wax::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(60, 10, 22, .45), inset 0 2px 2px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 200, 200, .22);
}
.intro > .note { margin-top: 18px; }

.letter .l-from.long { font-size: 15px; }
.letter .l-from { display: block; min-height: 48px; padding: 8px 2px 6px; border-bottom: 1.5px solid rgba(46, 34, 56, .58);
  font: 700 21px/1.3 var(--serif); color: var(--ink-on-paper); word-break: keep-all; overflow-wrap: anywhere; }
.invite .letter { margin-top: 34px; }
.invite .voice { margin-top: 18px; text-wrap: balance; min-height: 3.2em; }
.invite #inv-home { display: block; margin: 14px auto 0; }

.paper { position: relative; isolation: isolate; color: var(--paper-ink); --paper-bg: var(--paper); --ink-soft: rgba(46, 34, 56, .74); --paper-line: rgba(70, 50, 30, .13); }
.paper .reading { background: none; border-radius: 0; padding: 0; }
.paper .r-k { font: 700 14px/1.4 var(--serif); letter-spacing: .02em; }
.paper .r-ko { --c: #9e3d5e; }
.paper .r-er { --c: #1d6b62; }
.paper .reading b { font: 700 19px/1.4 var(--serif); color: var(--paper-ink); margin: 4px 0 4px; }
.paper .reading p { font: 400 15px/1.75 var(--serif); color: var(--ink-soft); }

.verdict.paper { margin-top: 40px; padding: 44px 24px 28px; text-align: left; transform: rotate(.5deg); animation: riseTilt2 .7s var(--ease) both; }
@keyframes riseTilt2 { from { opacity: 0; transform: translateY(24px) rotate(2deg); } to { opacity: 1; transform: rotate(.5deg); } }
.paper .badge { color: var(--paper-brown); font: 700 13px/1.4 var(--serif); letter-spacing: .04em; }
.paper .v-title { color: var(--paper-ink); font-size: clamp(24px, 6.4vw, 30px); }
.paper .v-sub { color: var(--paper-ink); font: 400 16px/1.8 var(--serif); margin-top: 10px; }
.paper .readings { gap: 22px; margin-top: 26px; padding-top: 22px; border-top: 1px dashed rgba(70, 50, 30, .3); }
.verdict.paper.is-special { text-align: center; padding: 52px 24px 48px; }
.verdict.paper.is-special .v-sub { text-align: left; }
@media (max-width: 420px) { .verdict.is-special .v-cmp b { font-size: 28px; } }
.verdict.paper.is-special .v-title { font-size: clamp(28px, 8.6vw, 72px); margin-top: 18px; }
.wax.opened { transform: rotate(10deg);
  background:
    linear-gradient(118deg, transparent 47%, rgba(48, 8, 18, .75) 48% 50%, rgba(255, 200, 200, .25) 50.5% 51.5%, transparent 52.5%),
    radial-gradient(circle at 33% 28%, rgba(255, 196, 196, .5) 0 8%, rgba(255, 196, 196, 0) 30%),
    radial-gradient(circle at 50% 52%, #a23a4f 0 46%, #8b2c41 62%, #651b2c 100%); }

.logo-link { display: inline-block; border-radius: 6px; }
.intro .logo-link { display: block; width: max-content; margin: 0 auto 22px; }
@media (max-width: 400px) and (max-height: 760px) { .intro .logo-link { margin-bottom: 12px; } }
.intro .logo-link .logo { margin: 0; }

.envelope { position: relative; width: min(100%, 380px); aspect-ratio: 8 / 5; margin: calc(24px + min(100%, 380px) * .29) auto 44px;
  perspective: 900px; cursor: pointer;
  animation: envBeat 1.6s ease-in-out .6s 3; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.env-back, .env-front { position: absolute; inset: 0; border-radius: 6px; }
.env-back { background: #efe3c8; box-shadow: 0 16px 30px rgba(0, 0, 0, .42); }
.env-front { z-index: 2; background: #e4d5b4; clip-path: polygon(0 0, 50% 44%, 100% 0, 100% 100%, 0 100%); }
.env-letter { position: absolute; left: 7%; right: 7%; top: 6%; height: 88%; z-index: 1; border-radius: 3px; background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(70, 50, 30, .13) 27px 28px); box-shadow: 0 2px 6px rgba(60, 40, 20, .18);
  transition: transform .55s cubic-bezier(.3, .7, .3, 1), opacity .35s ease; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 3; background: #f4e9d0; transform-origin: top;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .5s cubic-bezier(.3, .7, .3, 1), opacity .25s ease; }
.env-from { position: absolute; left: 8%; right: 8%; bottom: 8%; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--paper-ink); }
.env-from .l-k { font: 700 16px/1 var(--serif); color: var(--paper-brown); }
.env-from .env-name { font: 700 18px/1.3 var(--serif); color: var(--paper-ink); word-break: break-all; }
.wax.env-seal { top: calc(46% - 34px); left: 50%; right: auto; z-index: 4; border: 0; padding: 0; cursor: pointer;
  transform: translateX(-50%) rotate(-10deg); transition: transform .3s ease, opacity .3s ease; }
.wax.env-seal:hover { transform: translateX(-50%) rotate(-10deg) scale(1.06); }
.wax.env-seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.envelope.open { animation: none; cursor: default; }
.envelope.open .env-flap { transform: rotateX(180deg); }
.envelope.open .env-seal { opacity: 0; transform: translateX(-50%) rotate(20deg) scale(.6); }
.envelope.pull .env-flap { z-index: 0; }
.envelope.pull .env-letter { transform: translateY(-50%); }
.env-back, .env-front, .env-from { transition: opacity .35s ease; }
.envelope.drop .env-back, .envelope.drop .env-front, .envelope.drop .env-from { opacity: 0; }
.envelope.drop .env-flap, .envelope.drop .env-letter { opacity: 0; }
.env-hint { position: absolute; left: 0; right: 0; top: calc(100% + 12px); text-align: center; color: var(--gold); font: 700 14px/1.4 var(--serif); }
@media (max-width: 480px) { .envelope { aspect-ratio: 4 / 3; margin-top: calc(24px + min(100%, 380px) * .35); } }
@supports not (aspect-ratio: 8 / 5) {
  .envelope { height: 0; padding-top: calc(min(100%, 380px) * .625); }
  @media (max-width: 480px) { .envelope { padding-top: calc(min(100%, 380px) * .75); } }
}
@keyframes envBeat { 0%, 100% { transform: none; } 30% { transform: scale(1.025) rotate(-.4deg); } 55% { transform: scale(1); } }

.copy-sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(5, 4, 14, .6); padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.cs-box { width: 100%; max-width: 480px; display: grid; gap: 10px; padding: 18px; border-radius: 18px;
  background: var(--bg-2); border: 1px solid var(--line); text-align: center; }
.cs-box p { font-size: 15px; color: var(--ink); }
.save-img { width: 100%; max-height: 62vh; max-height: 62dvh; object-fit: contain; border-radius: 10px; -webkit-touch-callout: default; }
.cs-box input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(13,11,30,.8); color: var(--ink); font: 16px var(--sans); }

@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  #app { padding-top: 16px; }
  .intro .logo-link { margin-bottom: 10px; }
  .intro.intro-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 28px; align-items: start; text-align: left; }
  .intro-home .logo-link { margin-left: 0; }
  .intro-home .title { font-size: 44px; }
  .intro-home .voice.lede { font-size: 15px; text-align: left; }
  .intro-home .intro-hero, .intro-home .intro-side { padding-bottom: 0; }
  .intro-home .note, .intro-home .memo { text-align: left; }
  .letter { padding: 26px 18px 16px; }
  .letter .l-blank { height: 14px; }
  .letter .btn-lg { min-height: 48px; }
  .title.title-sm { font-size: 28px; }
  .intro.invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 28px; align-items: start; text-align: left; }
  .intro.invite > * { grid-column: 1; }
  .intro.invite .logo-link { margin-left: 0; }
  .intro.invite .envelope { grid-column: 2; grid-row: 1 / -1; margin-top: calc(26px + min(100%, 380px) * .29); }
  .intro.invite .invite-desc { margin-left: 0; }
  .intro.invite .voice { text-align: left; font-size: 15px; }
  .intro.invite #invite-form { grid-column: 2; grid-row: 1 / -1; margin-top: 26px; }
  .invite #inv-home { margin: 8px 0 0 -8px; justify-self: start; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .kr-score b { font-size: 56px; }
  .kr-key { margin-top: 8px; }
  .voice.kr-hint { margin-top: 12px; }
  .names { margin-bottom: 6px; }
  .result > .voice { margin-bottom: 6px; }
  .names.long { flex-direction: row; gap: 14px; align-items: start; }
  .names.long .and { height: 26px; }
  .names.long .nm b { font-size: 20px; }
  .names.long .nm { flex: 1 1 0; }
  .names.long .nm .erinn { font-size: 12px; }
}
@media (min-width: 760px) {
  :root { --maxw: 880px; }
  .pyr-grid { --cell: clamp(3px, calc((600px - 64px) / var(--n, 6)), 30px); }
  .intro, .answer, .calc, .ko-result { max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 960px) {
  :root { --maxw: 1120px; }
  .intro.intro-home { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 64px;
    align-items: center; text-align: left; min-height: calc(100vh - 84px - var(--garden) * .55); min-height: calc(100dvh - 84px - var(--garden) * .55); }
  .intro-home .logo-link { margin: 0 0 28px; }
  .intro-home .title { font-size: clamp(72px, 8vw, 116px); }
  .intro-home .voice.lede { text-align: left; font-size: 20px; margin-top: 16px; }
  .intro-home .intro-hero, .intro-home .intro-side { padding-bottom: 0; }
  .memo-n { font-size: 18px; } .memo-n b { font-size: 28px; } .memo-t { font-size: 20px; }
  .intro-home .note, .intro-home .memo { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}