:root {
  --night: #11182b;
  --night-soft: #1a2339;
  --paper: #f7eedb;
  --ink: #2a2433;
  --moon: #f3ead8;
  --muted: #b9b6c4;
  --ink-muted: #6b6270;
  --lamp: #f2b75c;
  --lamp-deep: #8a4f12;
  --line: #3a4560;
  --paper-line: #dccfb6;
  --stamp: #a63d2f;
  --plum: #4f3f6e;
  --brass: #c9a15a;
  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23f7eedb' stroke='%232a2433' stroke-width='1.5'%3E%3Cellipse cx='16' cy='21' rx='7.5' ry='6.5'/%3E%3Ccircle cx='6.5' cy='14' r='3'/%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Ccircle cx='20' cy='8' r='3.2'/%3E%3Ccircle cx='25.5' cy='14' r='3'/%3E%3C/g%3E%3C/svg%3E") 16 6, auto;
  --paw-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23ffb65c' stroke='%232a2433' stroke-width='1.5'%3E%3Cellipse cx='16' cy='21' rx='7.5' ry='6.5'/%3E%3Ccircle cx='6.5' cy='14' r='3'/%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Ccircle cx='20' cy='8' r='3.2'/%3E%3Ccircle cx='25.5' cy='14' r='3'/%3E%3C/g%3E%3C/svg%3E") 16 6, pointer;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar, 88px); }
body {
  margin: 0;
  background: var(--night);
  color: var(--moon);
  font-family: "Gowun Dodum", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  cursor: var(--paw);
}
h1, h2, h3, .logo { font-family: "Gowun Batang", serif; font-weight: 400; }
a, button, select, summary, .spot, .object { cursor: var(--paw-on); }
a { color: inherit; }
button { font: inherit; }
button:disabled { cursor: var(--paw); }
:focus, :focus-visible { outline: none; }
body.using-keyboard :focus-visible { outline: 2px solid #ffdf9e; outline-offset: 3px; border-radius: 6px; }
* { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px 10px;
  font-size: 13px;
  background: rgba(17, 24, 43, .94);
  border-bottom: 1px solid var(--line);
}
/* 별빛이 지나가는 나무 간판 */
.sign-name {
  position: relative;
  grid-column: 2;
  padding: 10px 38px 11px;
  text-align: center;
  background:
    repeating-linear-gradient(92deg, transparent 0 23px, rgba(0, 0, 0, .22) 23px 24px, transparent 24px 61px, rgba(0, 0, 0, .15) 61px 62px),
    repeating-linear-gradient(1deg, transparent 0 5px, rgba(0, 0, 0, .1) 5px 6px),
    linear-gradient(#4a2c16, #2c1a0c);
  border: 1.5px solid #c9a15a;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #2c1a0c, inset 0 0 0 4px rgba(201, 161, 90, .45), 0 0 16px rgba(255, 205, 100, .45), 0 0 44px rgba(255, 190, 70, .28);
  animation: sign-glow 6s ease-in-out infinite;
}
@keyframes sign-glow {
  50% { box-shadow: inset 0 0 0 3px #2c1a0c, inset 0 0 0 4px rgba(201, 161, 90, .45), 0 0 26px rgba(255, 215, 120, .7), 0 0 64px rgba(255, 190, 70, .42); }
}
.sign-name::before, .sign-name::after {
  content: "\2726";
  position: absolute;
  top: 50%;
  font-size: 15px;
  line-height: 1;
  color: #ffe9a8;
  text-shadow: 0 0 8px #ffd873;
  transform: translateY(-50%);
  animation: twinkle 3.2s ease-in-out infinite;
}
.sign-name::before { left: 13px; }
.sign-name::after { right: 13px; animation-delay: -1.6s; }
.logo {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  color: transparent;
  text-decoration: none;
  text-wrap: balance;
  background: linear-gradient(100deg, #ffdb7a 42%, #fffdf0 50%, #ffdb7a 58%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 7px rgba(255, 214, 110, .75));
  animation: star-sweep 8s ease-in-out infinite;
}
@keyframes star-sweep {
  0%, 25% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}
@keyframes starlight { 50% { opacity: .8; } }
.topbar nav { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 11px; }
@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr; }
  .sign-name { grid-column: 1; justify-self: center; }
  .topbar nav { grid-column: 1; }
}
.topbar nav a { text-decoration: none; }
.topbar nav a:hover { color: var(--lamp); }
.cart-button {
  padding: 0 9px;
  color: var(--moon);
  background: transparent;
  border: 1px solid var(--lamp);
  border-radius: 999px;
}
#cart-count { color: var(--lamp); }
.lang-select {
  padding: 0 2px;
  color: var(--moon);
  font: inherit;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 999px;
}
:lang(ja), :lang(zh) { word-break: normal; }
:lang(ja) .hand { font-family: "Klee One", serif; font-size: 25px; }
:lang(zh) .hand { font-family: "Ma Shan Zheng", serif; }
:lang(en) .hand, :lang(es) .hand { font-family: "Caveat", cursive; }
.hero .whisper:lang(ja) { font-size: 21px; }

.guide {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 76px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .5s, transform .5s;
}
.guide.show { opacity: 1; transform: none; }
.guide-cat {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 92px;
  padding: 0;
  background: none;
  border: 0;
  filter: drop-shadow(0 0 7px rgba(255, 197, 111, .55));
  transition: transform .25s linear;
}
.guide.show .guide-cat { pointer-events: auto; }
.guide-cat svg { display: block; width: 100%; height: auto; overflow: visible; }
.guide-cat.hop svg { animation: hop .6s ease-out; }
.guide-bubble {
  position: absolute;
  bottom: 78px;
  left: 0;
  width: min(340px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .4s;
}
.guide-bubble.show { opacity: 1; }
.guide-tail { transform-box: fill-box; transform-origin: 100% 100%; animation: tail 4s ease-in-out infinite; }
.leg { transform-box: fill-box; transform-origin: 50% 0; }
.guide.walking .leg { animation: step .36s ease-in-out infinite alternate; }
.guide.walking .leg.l2 { animation-direction: alternate-reverse; }
@keyframes step {
  from { transform: rotate(-20deg); }
  to { transform: rotate(20deg); }
}

.hero-track { height: 190vh; }
.hero {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  padding: calc(var(--bar, 88px) + 8px) 24px 12px;
  text-align: center;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 26% 62%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 41% 12%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 24%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 83% 58%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 14%, #fff 0 1px, transparent 2px);
}
.hero > * { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 38% 34% at 24% 28%, rgba(63, 179, 176, .3), transparent),
    radial-gradient(ellipse 40% 36% at 76% 24%, rgba(122, 92, 214, .38), transparent),
    radial-gradient(ellipse 50% 34% at 50% 46%, rgba(217, 104, 143, .16), transparent);
  animation: aurora 26s ease-in-out infinite;
}
.cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .4s;
}
.cursor-light.on { opacity: 1; }
.cursor-light::before {
  content: "";
  position: absolute;
  top: -190px;
  left: -190px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle closest-side, rgba(255, 197, 111, .17), transparent);
}
.house { display: block; flex: 1 1 0; width: 100%; min-height: 0; margin: 0 auto -3vh; overflow: visible; }
.door-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: #ffc56f; }
.hero .whisper, .open-sign, .hero h1, .doors { opacity: var(--fade, 1); }
.hero.entering .doors { pointer-events: none; }
.hero.entering .whisper, .hero.entering .open-sign, .hero.entering h1, .hero.entering .doors { visibility: hidden; }
.lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lights i {
  position: absolute;
  bottom: 10%;
  width: 5px;
  height: 5px;
  background: #ffe2a8;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255, 214, 140, .55);
  opacity: 0;
  animation: float-light 26s ease-in-out infinite;
}
.lights i:nth-child(1) { left: 7%; }
.lights i:nth-child(2) { left: 19%; animation-delay: -8s; animation-duration: 31s; }
.lights i:nth-child(3) { left: 31%; animation-delay: -16s; }
.lights i:nth-child(4) { left: 44%; animation-delay: -3s; animation-duration: 34s; }
.lights i:nth-child(5) { left: 59%; animation-delay: -21s; animation-duration: 29s; }
.lights i:nth-child(6) { left: 72%; animation-delay: -12s; }
.lights i:nth-child(7) { left: 84%; animation-delay: -24s; animation-duration: 33s; }
.lights i:nth-child(8) { left: 94%; animation-delay: -6s; animation-duration: 30s; }
@keyframes float-light {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: .7; }
  55% { transform: translate(18px, -280px); }
  85% { opacity: .35; }
  100% { opacity: 0; transform: translate(-12px, -560px); }
}
.divider {
  height: 18px;
  margin: 8px 0;
  opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='18' viewBox='0 0 180 18'%3E%3Cg fill='%23c9a15a'%3E%3Crect x='6' y='8.5' width='62' height='1'/%3E%3Crect x='112' y='8.5' width='62' height='1'/%3E%3Ccircle cx='76' cy='9' r='1.5'/%3E%3Ccircle cx='104' cy='9' r='1.5'/%3E%3Cpath d='M90 2l1.800 5.200 5.200 1.800-5.200 1.800-1.800 5.200-1.800-5.200-5.200-1.800 5.200-1.800z'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
}
.spot { transition: filter .3s; }
.spot:hover, body.using-keyboard .spot:focus-visible { filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 214, 140, .8)); }
.glass { animation: glass 18s linear infinite; }
.shooting { opacity: 0; pointer-events: none; animation: shoot 19s linear infinite; }
.shooting.now { animation: shoot-now 1.4s ease-out; }
.drift {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: drift 21s ease-in-out infinite;
}
.drift.d2 { animation-delay: -7s; }
.drift.d3 { animation-delay: -14s; }
.cat-heart { opacity: 0; pointer-events: none; }
.cat.hop { animation: hop .6s ease-out; }
.cat.hop .cat-heart { animation: heart 1.2s ease-out; }
.saturday-night #window-up { filter: brightness(1.3) saturate(1.2); }
.saturday-night .drift { animation-duration: 10s; }
.zzz { display: none; pointer-events: none; }

/* 낮: 불은 꺼져 있지만, 노을빛 하늘 아래 꿈결처럼 반짝입니다. 고양이는 낮잠을 잡니다. */
.day-only { display: none; }
.daytime .day-only { display: block; }
.daytime .hero {
  background-image: linear-gradient(#3c4a94, #7560b4 30%, #d68cab 50%, #f4bd92 60%, #2a2148 70%, #11182b 100%);
}
.daytime .hero::before { opacity: .5; }
.daytime .house a.spot { filter: hue-rotate(165deg) saturate(.75) brightness(.92); }
.daytime .house a.spot:hover { filter: hue-rotate(165deg) saturate(.9) brightness(1.1) drop-shadow(0 0 6px rgba(255, 240, 194, .9)); }
.daytime .door-leaf circle { filter: hue-rotate(165deg) saturate(.75); animation: none; }
.daytime .house > .breathe, .daytime .house g[filter], .daytime .house > path[fill="url(#path-light)"],
.daytime .house > g[fill="#ffe3a6"], .daytime .cat ~ .breathe, .daytime .house > .firefly { display: none; }
.daytime #moon { opacity: .75; }
.daytime .house .stars { opacity: .55; }
.daytime .house > g circle.twinkle { opacity: .85; animation: none; }
.daytime .house rect[fill="#ffe2a8"] { fill: #cfe3ee; }
.daytime .house .cat-eyes { transform: scaleY(.14); animation: none; }
.daytime .cat-tail { animation-duration: 11s; }
.daytime .zzz { display: block; animation: breathe 4s ease-in-out infinite; }
.sun-halo { opacity: .75; animation: breathe 7s ease-in-out infinite; }
.sun-rays { opacity: .16; transform-box: view-box; transform-origin: 262px 170px; animation: rays 90s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.flower { transform-box: fill-box; transform-origin: 50% 100%; animation: flower 5s ease-in-out infinite; }
.flower.f2 { animation-delay: -2.5s; }
@keyframes flower {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.butterfly { pointer-events: none; animation: flutter 26s ease-in-out infinite; }
.butterfly.b2 { animation-delay: -13s; animation-duration: 32s; }
.wings { transform-box: fill-box; transform-origin: center; animation: wings .5s ease-in-out infinite alternate; }
@keyframes wings { to { transform: scaleX(.45); } }
@keyframes flutter {
  0%, 100% { transform: translate(120px, 300px); }
  20% { transform: translate(190px, 240px) rotate(10deg); }
  40% { transform: translate(350px, 270px) rotate(-8deg); }
  60% { transform: translate(450px, 190px) rotate(12deg); }
  80% { transform: translate(300px, 120px) rotate(-10deg); }
}
.hero .whisper {
  min-height: 26px;
  max-width: 560px;
  margin: 0 auto 4px;
  font-size: 20px;
  color: #ffdf9e;
}
.breathe { animation: breathe 5s ease-in-out infinite; }
.flicker { animation: flicker 7s ease-in-out infinite; }
.flicker.slow { animation-duration: 11s; }
.smoke { opacity: .35; animation: smoke 8s ease-in-out infinite; }
.firefly { fill: #ffe2a8; animation: firefly 9s ease-in-out infinite; }
.firefly.f2 { animation-delay: -2s; animation-duration: 11s; }
.firefly.f3 { animation-delay: -4s; }
.firefly.f4 { animation-delay: -6s; animation-duration: 12s; }
.firefly.f5 { animation-delay: -1s; animation-duration: 10s; }
.twinkle { animation: twinkle 4s ease-in-out infinite; }
.twinkle.t2 { animation-delay: -1.3s; }
.twinkle.t3 { animation-delay: -2.6s; }
.cat-tail { transform-box: fill-box; transform-origin: 0 100%; animation: tail 5s ease-in-out infinite; }
.cat-eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s linear infinite; }
.door-leaf { transform-box: fill-box; transform-origin: 0 50%; transition: transform .6s ease-in-out; }
.house-door:hover .door-leaf, .house-door:focus-visible .door-leaf { transform: scaleX(.86); }
.house-door.open .door-leaf { transform: scaleX(.1); }
@keyframes aurora {
  0%, 100% { transform: translate(-3%, 0) scale(1); }
  50% { transform: translate(4%, 3%) scale(1.08); }
}
@keyframes glass { to { filter: hue-rotate(360deg); } }
@keyframes shoot {
  0%, 90% { opacity: 0; transform: translate(0, 0); }
  91% { opacity: 1; }
  96%, 100% { opacity: 0; transform: translate(-230px, 88px); }
}
@keyframes shoot-now {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-230px, 88px); }
}
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0) rotate(-12deg); }
  12% { opacity: .9; }
  50% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 20px)) rotate(10deg); }
  88% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(0) scale(.3); }
}
@keyframes hop { 40% { transform: translateY(-9px); } }
@keyframes heart {
  0% { opacity: 0; transform: translateY(6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-22px); }
}
@keyframes breathe { 50% { opacity: .7; } }
@keyframes twinkle { 50% { opacity: .3; } }
@keyframes tail { 50% { transform: rotate(10deg); } }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(.1); }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: .92; }
  50% { opacity: .78; }
  55% { opacity: .95; }
}
@keyframes smoke {
  0%, 100% { opacity: .15; transform: translateY(4px); }
  50% { opacity: .4; transform: translateY(-6px); }
}
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 1; transform: translate(12px, -14px); }
  60% { opacity: .35; transform: translate(-6px, -26px); }
  80% { opacity: .9; transform: translate(8px, -10px); }
}
.hero h1 { margin: 0 0 6px; font-size: clamp(21px, 3.2vw, 30px); line-height: 1.3; text-wrap: balance; }
.doors { display: flex; justify-content: center; gap: 12px; margin-top: 2px; }
.arch { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 4px 8px; text-decoration: none; border-radius: 12px; transition: transform .35s, background .35s; }
.arch:hover, .arch:focus-visible { background: rgba(255, 224, 138, .1); }
button.arch { font: inherit; color: inherit; background: none; border: 0; }
.arch svg { width: 58px; height: 72px; filter: drop-shadow(0 0 9px rgba(255, 197, 111, .35)); transition: filter .35s; }
.arch .hand { font-size: 20px; color: #ffdf9e; }
.jar-sub { font-size: 13px; line-height: 1.2; color: #e3cf9f; }
.arch:hover, .arch:focus-visible { transform: translateY(-4px); }
.arch:hover svg, .arch:focus-visible svg { filter: drop-shadow(0 0 16px rgba(255, 197, 111, .8)); }
.primary, .secondary {
  display: inline-block;
  padding: 8px 20px;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
}
.primary { color: var(--night); background: var(--lamp); border: 2px solid var(--lamp); }
.primary:disabled { color: var(--ink-muted); background: var(--paper-line); border-color: var(--paper-line); }
.secondary { color: var(--moon); background: transparent; border: 2px solid var(--muted); }

.shelf-section { max-width: 920px; margin: 0 auto; padding: 36px 24px 56px; }
.section-head { text-align: center; }
.section-head h2 {
  position: relative;
  display: inline-block;
  margin: 18px 0 0;
  padding: 3px 22px;
  font-size: 21px;
  color: #f3e2bd;
  background: var(--plum);
  border: 1px solid var(--brass);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
.section-head h2::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -18px;
  height: 18px;
  border: solid #c9a15a;
  border-width: 0 1.5px;
}
.section-head p { margin: 8px 0 18px; font-size: 14.5px; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; }
.filter {
  padding: 1px 13px;
  font-size: 14px;
  color: var(--moon);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.filter[aria-pressed="true"] { color: var(--night); background: var(--lamp); border-color: var(--lamp); }

.cabinet {
  position: relative;
  background: #3a2415;
  border: 10px solid #5c3a20;
  border-top: 0;
  border-radius: 6px;
  box-shadow: 0 0 70px rgba(255, 182, 92, .22), inset 0 0 0 2px #2a190d;
}
.awning {
  display: flex;
  height: 40px;
  margin: 0 -10px;
  padding-top: 6px;
  background: linear-gradient(var(--brass), #8f6f38) 0 0 / 100% 6px no-repeat;
  border-radius: 6px 6px 0 0;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4));
}
.awning span { flex: 1; background: var(--plum); border-radius: 0 0 999px 999px; }
.awning span:nth-child(2n) { background: #d9cdb5; }
.motes { position: absolute; inset: 40px 0 0; overflow: hidden; pointer-events: none; }
.motes span {
  position: absolute;
  bottom: 12%;
  width: 4px;
  height: 4px;
  background: #ffe2a8;
  border-radius: 50%;
  opacity: 0;
  animation: mote 14s ease-in-out infinite;
}
.motes span:nth-child(1) { left: 8%; }
.motes span:nth-child(2) { left: 26%; animation-delay: -3s; animation-duration: 17s; }
.motes span:nth-child(3) { left: 43%; animation-delay: -6s; }
.motes span:nth-child(4) { left: 61%; animation-delay: -9s; animation-duration: 19s; }
.motes span:nth-child(5) { left: 78%; animation-delay: -11s; }
.motes span:nth-child(6) { left: 93%; animation-delay: -1s; animation-duration: 16s; }
@keyframes mote {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: .85; }
  70% { opacity: .5; }
  90% { opacity: 0; transform: translate(26px, -280px); }
}
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  background:
    radial-gradient(ellipse 70% 180px at 50% 0, rgba(255, 182, 92, .28), transparent),
    linear-gradient(#2a190d, #3a2415);
}
.item { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.object {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 112px;
  padding-top: 18px;
  background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255, 197, 111, .42), transparent);
}
.object svg {
  display: block;
  width: 88px;
  height: 80px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
  transition: transform .25s;
}
.item:not(.soon):hover .object svg { transform: translateY(-6px); }
.item.soon .object svg { opacity: .5; filter: grayscale(.45) drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.object.wobble svg { animation: wobble .6s ease-in-out; }
.steam { animation: breathe 3s ease-in-out infinite; }
.sparkle { animation: twinkle 2.5s ease-in-out infinite; }
@keyframes wobble {
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}
.plank {
  height: 10px;
  background: linear-gradient(#a06c3f, #6e4524 70%, #4a2d16);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .45);
}
.label {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  margin: 8px 12px 22px;
  padding: 16px 12px 10px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 5px 9px rgba(0, 0, 0, .35);
}
.label::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: #3a2415;
  border-radius: 50%;
}
.item:nth-child(2n) .label { transform: rotate(.7deg); }
.item:nth-child(3n) .label { transform: rotate(-.7deg); }
.item.soon .label { background: #d9cdb5; }
.item.soon .tag, .item.soon .desc, .item.soon .soon-label { color: #5a5160; }
.tag { margin: 0; font-size: 14px; color: var(--lamp-deep); }
.item h3 { margin: 0 0 4px; font-size: 15.5px; line-height: 1.4; }
.title-button { padding: 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-bottom: 1px dotted var(--ink-muted); }
.desc { flex: 1; margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.item-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.price { padding: 0 8px; font-size: 13.5px; font-weight: 700; color: #fff6e0; background: var(--plum); border-radius: 999px; }
#cart-items .price, .total .price { color: inherit; background: none; }
.soon-label { font-size: 12.5px; }
.text-button {
  margin-left: auto;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  text-decoration: underline;
}
.add {
  padding: 4px 14px;
  font-size: 14px;
  color: var(--moon);
  background: var(--night);
  border: 0;
  border-radius: 999px;
}
.add:disabled { color: var(--ink-muted); background: var(--paper-line); }

.shop-room {
  background: linear-gradient(#ffc56f, #6e4524 110px, #2c1b12 300px, #241610);
}
.attic-room {
  padding: calc(var(--bar, 88px) + 16px) 16px 64px;
  background: linear-gradient(#d9d2f0, #3b3160 70px, #1a1530 190px);
}
.stair-track { height: 260vh; }
.stair-scene { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #150f1c; }
.stair-scene svg { display: block; width: 100%; height: 100%; }
#stair-world { transform-origin: 200px 112px; }
.attic-scene { position: relative; max-width: 780px; margin: 0 auto; }
.attic-art { display: block; width: 100%; height: auto; border-radius: 10px; }
.attic-art:not(:hover) { transition: filter .5s; }
.attic-scene.open .attic-art { filter: brightness(.6); }
.envelope { cursor: var(--paw-on); transition: filter .3s, opacity .4s; }
.envelope:hover, .envelope:focus-visible { filter: brightness(1.15); }
.attic-scene.open .envelope { opacity: 0; pointer-events: none; }
.envelope-to { font: italic 11px Georgia, "Times New Roman", serif; letter-spacing: .5px; fill: #8a6a48; }
.letter {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(390px, 92%);
  margin-left: calc(min(390px, 92%) / -2);
  padding: 24px 24px 12px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 0 46px rgba(255, 214, 140, .45), 0 10px 22px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%;
  animation: unfold .8s ease-out;
}
.letter[hidden] { display: none; }
@keyframes unfold {
  0% { opacity: 0; transform: translateY(40px) scaleY(.12); }
  60% { opacity: 1; }
  100% { transform: none; }
}
.letter p { margin: 0 0 6px; }
.letter .sign { margin: 12px 0 4px; }
.letter .close { top: 6px; right: 10px; font-size: 26px; }
.hand { font-family: "Nanum Pen Script", cursive; font-size: 25px; line-height: 1.3; color: #3f2f52; }
.sign { text-align: end; font-size: 22px; color: #6b4a2c; }
.signature { display: flex; align-items: center; justify-content: flex-end; margin: 8px 0 6px; }
.signature .sign { margin: 0; }
.seal { flex: none; width: 46px; height: 46px; margin-left: 3px; opacity: .86; mix-blend-mode: multiply; pointer-events: none; transform: rotate(-9deg); }
.closed { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--stamp); }
.after-letter { max-width: 620px; margin: 0 auto; text-align: center; animation: fade-in .8s ease-out; }
.after-letter[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.after-letter .closed { margin-top: 12px; color: #ff9c8c; }
.lang-note { margin: 12px 0 0; font-size: 14px; color: #e3cf9f; }
.lang-note:lang(ko) { display: none; }
.letter-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.letter-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 8px 4px 7px; font-size: 13px; line-height: 1.3; color: #5c3f26; background: #efe0bd; border: 0; border-radius: 12px; box-shadow: 0 3px 0 #cdb88c; transition: transform .15s, box-shadow .15s, background .15s; }
.letter-tile svg { width: 30px; height: 30px; }
.letter-tile:hover { background: #f6eacb; transform: translateY(-2px); box-shadow: 0 5px 0 #cdb88c; }
.letter-tile:active, .letter-tile[aria-expanded="true"] { transform: translateY(2px); box-shadow: 0 1px 0 #cdb88c; }
#letter-help { margin: 0 0 10px; font-size: 13.5px; text-align: center; }
.veil { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: #0b0a16; opacity: 0; transition: opacity .45s; }
.veil.on { opacity: 1; }
.candle-smoke { opacity: 0; pointer-events: none; }
.candle-flame, #candle .breathe { transition: opacity .3s; }
#candle.out .candle-flame, #candle.out .breathe { opacity: 0; animation: none; }
#candle.out .candle-smoke { animation: smoke 1.6s ease-out; }
.desk-note { min-height: 30px; margin: 18px 0 0; font-size: 22px; text-align: center; color: #ffdf9e; }

#attic { color: var(--moon); background: #1b1530; box-shadow: 0 0 80px rgba(242, 133, 74, .3); }
#attic .close { color: var(--moon); }
#attic .primary { color: var(--night); background: var(--lamp); border-color: var(--lamp); }
#attic .primary:disabled { color: var(--muted); background: transparent; border-color: var(--line); }
#attic .hand { color: #ffdf9e; }
#attic-text {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 16px;
  color: var(--ink);
  cursor: text;
  font: 16px/1.7 "Gowun Batang", serif;
  background: var(--paper);
  border: 0;
  border-radius: 3px;
  resize: vertical;
}
#attic.burning #attic-text { pointer-events: none; animation: burn 1.8s ease-in forwards; }
#attic.burning #attic-burn { visibility: hidden; }
.hearth { position: relative; width: 120px; margin: 16px auto 0; }
.hearth svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; transition: transform .5s; }
.hearth .f-in { animation-duration: 1.7s; }
#attic.burning .hearth svg { transform: scale(1.5); }
.hearth i {
  position: absolute;
  bottom: 30px;
  width: 4px;
  height: 4px;
  background: #ffb65c;
  border-radius: 50%;
  opacity: 0;
}
.hearth i:nth-of-type(1) { left: 22%; }
.hearth i:nth-of-type(2) { left: 34%; animation-delay: .25s !important; }
.hearth i:nth-of-type(3) { left: 46%; animation-delay: .5s !important; }
.hearth i:nth-of-type(4) { left: 56%; animation-delay: .15s !important; }
.hearth i:nth-of-type(5) { left: 66%; animation-delay: .4s !important; }
.hearth i:nth-of-type(6) { left: 78%; animation-delay: .65s !important; }
#attic.burning .hearth i { animation: ember 1.4s ease-out; }
@keyframes burn {
  0% { transform: none; filter: none; opacity: 1; }
  45% { filter: sepia(1) brightness(.7); opacity: 1; }
  100% { transform: translateY(170px) scale(.3); filter: sepia(1) brightness(.2); opacity: 0; }
}
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(12px, -120px); }
}

footer {
  padding: 48px 24px 56px;
  text-align: center;
  background: radial-gradient(ellipse 60% 120% at 50% 100%, rgba(255, 205, 110, .13), transparent);
}
footer p {
  margin: 0;
  font-family: "Gowun Batang", serif;
  font-size: 17px;
  color: #ffe08a;
  text-shadow: 0 0 9px rgba(255, 214, 110, .9), 0 0 26px rgba(255, 190, 70, .55);
  animation: starlight 7s ease-in-out infinite;
}

dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 32px;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: 6px;
}
dialog::backdrop { background: rgba(8, 11, 22, .75); }
dialog h3 { margin: 4px 36px 16px 0; font-size: 24px; line-height: 1.4; }
dialog .primary { color: var(--moon); background: var(--night); border-color: var(--night); }
dialog .primary:disabled { color: var(--ink-muted); background: var(--paper-line); border-color: var(--paper-line); }
.close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 0;
}
.fade-note { padding-top: 12px; color: var(--ink-muted); border-top: 1px dashed var(--paper-line); }
#cart-items { margin: 0; padding: 0; list-style: none; }
#cart-items li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-line);
}
#cart-items .text-button { margin: 0; }
#cart-empty { color: var(--ink-muted); }
.total { text-align: right; font-size: 20px; }
#checkout { width: 100%; }


/* 쓰기 화면 */
.write-open { display: block; clear: both; margin: 8px auto 6px; }
#write { max-width: 560px; color: var(--ink); background: #f7eedb; }
#write .hand { margin: 0 36px 4px 0; font-size: 30px; }
.write-notice { margin: 0 0 12px; padding: 8px 12px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: #7a2f22; background: #f1dcc0; border-radius: 8px; }
#write-text {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font: 20px/34px "Nanum Pen Script", cursive;
  color: var(--ink);
  cursor: text;
  background: repeating-linear-gradient(transparent 0 33px, rgba(120, 90, 50, .22) 33px 34px) #fffaf0;
  background-attachment: local;
  border: 0;
  border-radius: 6px;
  resize: vertical;
}
.tones { margin: 14px 0 0; padding: 0; border: 0; }
.tones legend { padding: 0; margin-bottom: 6px; font-size: 15.5px; font-weight: 700; }
.tones label { display: inline-block; margin: 0 6px 6px 0; cursor: var(--paw-on); }
.tones input { position: absolute; opacity: 0; }
.tones span { display: block; padding: 3px 13px; font-size: 14.5px; background: #fffaf0; border: 1px solid var(--paper-line); border-radius: 999px; transition: background .2s; }
.tones input:checked + span { color: #fff6e0; background: var(--plum); border-color: var(--plum); }
body.using-keyboard .tones input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 2px; }
.write-who { margin: 8px 0 12px; font-size: 14.5px; color: #4f4358; }
.write-done { text-align: center; }
.write-done[hidden] { display: none; }
.write-done svg { display: block; width: 130px; margin: 12px auto; animation: unfold .8s ease-out; }
#write.sealing #write-form { animation: seal 1s ease-in forwards; pointer-events: none; }
@keyframes seal {
  to { opacity: 0; transform: scale(.25) translateY(120px); }
}

.write-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.write-actions .text-button { margin: 0; font-size: 14.5px; }
.write-keep { padding: 8px 18px; font-size: 15px; color: var(--ink); background: #fffaf0; border: 1px solid #b9a988; border-radius: 999px; }
.write-keep:disabled { color: var(--ink-muted); border-color: var(--paper-line); }

/* 뒤집히는 팻말 */
.open-sign {
  position: relative;
  margin: 0 0 5px;
  padding: 0 13px;
  font-size: 13.5px;
  color: #3a2415;
  background: #e7dcc0;
  border: 1px solid #c9a15a;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
  animation: sign-flip .9s ease-out;
}
@keyframes sign-flip {
  from { transform: perspective(300px) rotateX(-90deg); }
}

/* 나만의 선반 */
.my-shelf { max-width: 780px; margin: 26px auto 0; text-align: center; }
.my-shelf h3 { margin: 0 0 8px; font-size: 19px; color: #f3e2bd; }
#my-count { font-size: 14.5px; color: #e3cf9f; }
.my-items { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; min-height: 44px; }
.my-item { width: 44px; padding: 2px; background: none; border: 0; transition: transform .25s, opacity .25s; }
.my-item svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .5)); }
.my-item:hover { transform: translateY(-4px); }
.my-slot { display: block; width: 7px; height: 7px; margin: 0 auto 6px; background: #4a3b5c; border-radius: 50%; }
.my-plank { height: 10px; background: linear-gradient(#8a5a33, #4a2d16); border-radius: 3px; box-shadow: 0 6px 12px rgba(0, 0, 0, .5); }
.my-empty { margin: 10px 0 0; font-size: 14.5px; color: #cfc8dc; }
.my-empty[hidden] { display: none; }

/* 찾은 물건 알림 */
.found {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 7;
  display: flex;
  gap: 12px;
  align-items: center;
  width: min(400px, calc(100vw - 32px));
  padding: 12px 16px;
  color: var(--ink);
  background: #fffaf0;
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(255, 214, 140, .55), 0 10px 22px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .45s, transform .45s;
}
.found.show { opacity: 1; transform: translate(-50%, 0); }
.found-icon svg { display: block; width: 44px; height: 44px; }
.found strong { font-size: 16px; }
.found p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: #4f4358; }

/* 숨은 물건 */
.glint { animation: twinkle 3.5s ease-in-out infinite; }
.treasure.taken .glint { display: none; }
.daytime .night-only { display: none; }
.treasure-btn { position: absolute; right: 8px; bottom: 6px; z-index: 2; width: 34px; height: 34px; padding: 6px; background: none; border: 0; }
.win-cat { animation: win-walk 34s ease-in-out infinite; }
@keyframes win-walk {
  0%, 62%, 100% { opacity: 0; transform: translateX(0); }
  66% { opacity: 1; }
  88% { opacity: 1; transform: translateX(34px); }
  92% { opacity: 0; transform: translateX(34px); }
}
.daytime .win-cat { display: none; }
.print {
  position: fixed;
  z-index: 9;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ffd166'%3E%3Cellipse cx='16' cy='21' rx='7.5' ry='6.5'/%3E%3Ccircle cx='6.5' cy='14' r='3'/%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Ccircle cx='20' cy='8' r='3.2'/%3E%3Ccircle cx='25.5' cy='14' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: print-fade 1.2s ease-out forwards;
}
@keyframes print-fade {
  from { opacity: .75; transform: scale(.7); }
  to { opacity: 0; transform: scale(1.15); }
}

/* 살며시 펼치는 도움말 */
.help { max-width: 560px; margin: 26px auto 0; font-size: 14.5px; text-align: center; color: #cfc8dc; }
.help summary { display: inline-block; padding-bottom: 1px; list-style: none; border-bottom: 1px dotted #8f84a8; }
.help summary::-webkit-details-marker { display: none; }
.help summary::before { content: "\2726  "; color: #ffd98f; }
.help-body { margin-top: 10px; padding: 12px 14px; line-height: 1.6; color: #fff6e0; background: #2b2345; border-radius: 12px; }
.phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.phones a { padding: 3px 12px; font-size: 14.5px; font-weight: 700; color: #1a1530; text-decoration: none; background: #f3e2bd; border-radius: 999px; }
.help .abroad { display: inline-block; margin-top: 8px; font-size: 13.5px; color: #e3cf9f; }
#write .help, #attic .help { margin-top: 10px; font-size: 13.5px; }
#write .help { color: #5a5160; }
#write .help summary { border-color: #b9a988; }
#write .help summary::before { color: #a06c3f; }

/* 안내판 */
.sign-text { font-size: 22px; fill: #fff6e0; }
#notice { max-width: 500px; color: var(--ink); background: #f7eedb; }
#notice .hand { margin: 0 36px 10px 0; font-size: 30px; }
.notice-list { margin: 0 0 14px; padding: 0; list-style: none; }
.notice-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15.5px; line-height: 1.55; border-bottom: 1px dashed var(--paper-line); }
.notice-list svg { flex: none; width: 26px; height: 26px; margin-top: 1px; }

/* 오르골, 서랍, 별 병, 고양이 별자리 */
.music-note { opacity: 0; }
#music-box.playing .music-note { animation: note-rise 1.8s ease-out infinite; }
@keyframes note-rise {
  0% { opacity: 0; transform: translateY(6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px); }
}
.crank { transform-box: fill-box; transform-origin: 0 100%; }
#music-box.playing .crank { animation: crank 1.2s linear infinite; }
@keyframes crank { to { transform: rotate(360deg); } }
#desk-drawer rect { transition: transform .4s; }
#desk-drawer.opened rect { transform: translateY(5px); }
.cat-star { fill: #d9d2f0; opacity: .55; transition: opacity .4s, fill .4s; }
.cat-star.lit { fill: #ffe9a8; opacity: 1; }
#cat-lines { fill: none; stroke: #ffe9a8; stroke-width: 1; opacity: 0; transition: opacity 1.2s; }
#cat-lines.drawn { opacity: .75; }

/* 음악 단추와 별 병 */
.music-toggle { display: flex; padding: 2px 6px; color: var(--moon); background: none; border: 1px solid var(--line); border-radius: 999px; }
.music-toggle svg { width: 14px; height: 14px; }
.music-toggle .mute-line { display: inline; }
.music-toggle[aria-pressed="true"] { color: #ffdf9e; border-color: var(--lamp); }
.music-toggle[aria-pressed="true"] .mute-line { display: none; }
#jar { max-width: 460px; color: var(--ink); background: #f7eedb; }
#jar .hand { margin: 0 36px 8px 0; font-size: 30px; }
.jar-big { display: flex; gap: 18px; align-items: center; padding: 12px 18px; margin-bottom: 12px; color: #fff6e0; background: #1a1530; border-radius: 14px; }
.jar-big svg { flex: none; width: 76px; height: 95px; }
.jar-big p { margin: 0; }
.jar-count { font-size: 21px; font-family: "Gowun Batang", serif; color: #ffe9a8; }
.jar-stamps { font-size: 15.5px; }
.jar-steps { margin: 0 0 16px; padding: 0; list-style: none; }
.jar-steps li { display: flex; gap: 12px; align-items: center; padding: 11px 0; font-size: 16px; line-height: 1.55; border-bottom: 1px dashed var(--paper-line); }
.jar-steps svg { flex: none; width: 24px; height: 24px; }
.jar-need { margin: 8px 0 0; font-size: 14.5px; font-weight: 700; color: #6e4524; }
.jar-need:empty { display: none; }

/* 결제 안내 */
.pay-items { margin: 0; padding: 0; list-style: none; }
.pay-items li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.pay-items li > span:first-child { flex: 1 1 100%; }
.pay-soon { font-size: 14px; color: var(--ink-muted); }
.pay-seller { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }

/* 선택 사항인 구글 로그인 */
.account { max-width: 480px; margin: 18px auto 0; text-align: center; }
.account[hidden] { display: none; }
.account p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: #cfc8dc; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 14.5px; color: #1f1f1f; background: #fff; border: 1px solid #747775; border-radius: 999px; }
.account-btn svg { width: 18px; height: 18px; }
.account.signed-in .account-btn svg { display: none; }

/* 포션 컬렉션: 모을수록 빛이 강해집니다. */
.potion-halo { fill: var(--potion, transparent); opacity: var(--potion-power, 0); filter: blur(10px); pointer-events: none; animation: breathe 5s ease-in-out infinite; }
.object svg { overflow: visible; }
.potion-bubble { animation: bubble 3.2s ease-in infinite; }
.potion-bubble.b2 { animation-delay: -1.6s; }
@keyframes bubble {
  0% { opacity: 0; transform: translateY(14px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}
.potions { text-align: center; }
.potions.glow-up { animation: glow-up 1.3s ease-out; }

/* 요술항아리 */
.pot-label { font-size: 20px; fill: #ffe08a; }
.pot-potion { fill: var(--potion, #c8d6ff); }
#pot-light stop { stop-color: var(--potion, #c8d6ff); }
.pot-body { transform-box: fill-box; transform-origin: 50% 100%; }
#magic-pot.popping .pot-body { animation: pot-wiggle .5s ease-in-out; }
@keyframes pot-wiggle {
  20% { transform: rotate(-7deg) scale(1.04, .94); }
  45% { transform: rotate(7deg) scale(.96, 1.08); }
  70% { transform: rotate(-4deg) scale(1.1, .9); }
}
.pot-burst { position: fixed; z-index: 20; width: 0; height: 0; pointer-events: none; }
.pot-burst i {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px;
  background: var(--c);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: burst-star .85s ease-out forwards;
}
@keyframes burst-star {
  from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.3); }
  to { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.1); }
}
.pot-burst::before {
  content: "";
  position: absolute;
  left: -70px;
  top: -70px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 240, 190, .95), rgba(255, 209, 102, .45) 40%, transparent 70%);
  border-radius: 50%;
  animation: burst-flash .7s ease-out forwards;
}
@keyframes burst-flash {
  from { opacity: 1; transform: scale(.2); }
  to { opacity: 0; transform: scale(1.5); }
}
#potion-room {
  color: var(--moon);
  background: #1b1530;
  border: 1px solid #5d4f82;
  border-radius: 16px;
  box-shadow: 0 0 calc(30px + var(--potion-power, 0) * 90px) var(--potion, transparent);
}
#potion-room { padding: 28px 18px 16px; }
#potion-room .close { z-index: 2; color: var(--moon); }
#potion-room[open] { animation: poof-in .6s cubic-bezier(.2, 1.5, .4, 1); }
#potion-room[open]::backdrop { animation: fade-in .4s ease-out; }
@keyframes poof-in {
  from { opacity: 0; transform: translateY(70px) scale(.15) rotate(-7deg); filter: brightness(2.2); }
  to { filter: none; }
}
@keyframes glow-up { 40% { filter: brightness(1.4); } }

/* 포션 찻장 */
.cupboard { position: relative; margin-top: 16px; padding: 26px 12px 12px; background: linear-gradient(90deg, #4a2d16, #7a4d2a 12%, #7a4d2a 88%, #4a2d16); border-radius: 110px 110px 10px 10px / 34px 34px 10px 10px; box-shadow: inset 0 0 0 2px #c9a15a, 0 10px 22px rgba(0, 0, 0, .55); }
.potions .cupboard-sign { position: absolute; top: -16px; left: 50%; z-index: 1; margin: 0; padding: 1px 22px 2px; font-size: 27px; white-space: nowrap; color: #3a2415; background: linear-gradient(#ecd59c, #c9a15a); border-radius: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); transform: translateX(-50%); }
.cupboard-inside { padding: 10px 6px 8px; background: radial-gradient(ellipse at 50% 18%, #6a4f8e, #2a1f45 62%, #181228); border-radius: 90px 90px 4px 4px / 24px 24px 4px 4px; box-shadow: inset 0 4px 16px rgba(0, 0, 0, .75); }
.potion-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 0; }
.potion-item { display: block; min-width: 0; padding: 0 2px; background: linear-gradient(#b5834b, #5c3a20) 0 74px / 100% 8px no-repeat; border: 0; }
.potion-item svg { display: block; width: 80px; max-width: 100%; height: 74px; margin: 0 auto 10px; overflow: visible; filter: drop-shadow(0 0 7px var(--glow, transparent)); transition: transform .25s, filter .25s; }
button.potion-item:hover svg { transform: translateY(-4px); }
.potion-item[aria-pressed="true"] svg { transform: translateY(-7px); filter: drop-shadow(0 0 14px var(--glow)) brightness(1.15); }
.potion-tag { display: inline-block; max-width: 100%; padding: 1px 5px; font-size: 11.5px; line-height: 1.25; color: #3a2415; background: #efe0bd; border-radius: 3px; }
.potion-item.fresh svg { animation: bottle-pop .8s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bottle-pop { from { opacity: 0; transform: translateY(-28px) scale(.3); } }
.potion-item.asleep svg { filter: saturate(.3) brightness(.68); }
.potion-item.asleep[aria-pressed="true"] svg { filter: saturate(.55) brightness(.95) drop-shadow(0 0 8px rgba(255, 246, 224, .55)); }
.potion-item.awake svg { animation: bottle-awake 3.4s ease-in-out infinite; }
@keyframes bottle-awake { 50% { filter: drop-shadow(0 0 15px var(--glow)) brightness(1.12); } }
.me-card { margin-bottom: 10px; padding: 7px 12px 8px; color: #3a2415; text-align: center; background: #f7eedb; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.me-title { margin: 0; font-size: 22px; line-height: 1.15; color: #6b4a2c; }
.me-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.35; }
.me-list li { padding: 1px 9px; background: #efd9a5; border-radius: 999px; }
.me-list li.me-empty-line { background: none; color: #6b5a48; }
.me-list li.fresh { animation: bottle-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
.me-note { margin: 3px 0 0; font-size: 19px; line-height: 1.2; color: #7a4d2a; }
.me-note:empty { display: none; }
.potion-detail { min-height: 76px; margin: 10px 0 12px; }
.potion-pick { margin: 26px 0 0; font-size: 21px; color: #ffdf9e; }
.potion-name { display: block; font-size: 16px; color: #ffe08a; }
.potion-skill { margin: 2px 0 6px; font-size: 14px; line-height: 1.45; color: #e7e2f5; }
.drink-go { padding: 5px 26px; font: 22px/1.2 "Nanum Pen Script", cursive; color: #3a2415; background: radial-gradient(circle at 40% 30%, #fff2c0, #ffd166 65%, #d9ad5a); border: 0; border-radius: 999px; box-shadow: 0 0 14px rgba(255, 209, 102, .7); transition: transform .2s; }
.drink-go:hover { transform: scale(1.06); }
.drink-hint { margin: 5px 0 0; font-size: 12.5px; color: #b9aecb; }
.potion-after { margin: 0; font-size: 22px; line-height: 1.25; color: #ffdf9e; }
.potion-date { margin: 2px 0 0; font-size: 12.5px; color: #b9aecb; }
.drink-undo { margin-left: 6px; padding: 0; font-size: 12.5px; color: #b9aecb; background: none; border: 0; border-bottom: 1px dotted #8f84a8; }
.spell-note { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: #ffdf9e; }
.bench { display: flex; flex-direction: column; align-items: center; padding: 8px 10px 12px; background: rgba(255, 255, 255, .05); border-radius: 14px; }
.bench-title { margin: 0; font-size: 24px; color: #ffe08a; }
.bench-hint { flex: 1; margin: 0 0 9px; font-size: 13px; line-height: 1.4; color: #cfc8dc; }
.spell-line { display: flex; align-items: center; width: 100%; max-width: 280px; margin-top: auto; padding: 3px 3px 3px 14px; background: #120e22; border-radius: 999px; animation: spell-glow 3.2s ease-in-out infinite; }
.spell-line:focus-within { animation: none; box-shadow: 0 0 0 1.500px #ffe08a, 0 0 22px #ffd166; }
.spell-line.fizzle { animation: fizzle .45s ease-in-out; }
@keyframes spell-glow {
  0%, 100% { box-shadow: 0 0 0 1.500px #8f7bc8, 0 0 8px rgba(168, 146, 216, .55); }
  50% { box-shadow: 0 0 0 1.500px #e7cf96, 0 0 18px rgba(255, 209, 102, .65); }
}
@keyframes fizzle {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
.spell-line input { flex: 1; width: 100%; min-width: 0; padding: 0; font: 22px/1.3 "Nanum Pen Script", cursive; color: #ffe9b0; cursor: text; background: none; border: 0; outline: 0; }
.spell-line input::placeholder { color: #a79bc9; opacity: 1; }
.spell-star { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: radial-gradient(circle at 40% 35%, #fff2c0, #ffd166 60%, #c9a15a); border: 0; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 209, 102, .8); transition: transform .3s; }
.spell-star svg { width: 20px; height: 20px; }
.spell-star:hover { transform: rotate(45deg) scale(1.08); }
.found-icon svg { overflow: visible; }

/* 문구 안의 줄바꿈을 그대로 보여 줍니다 */
.section-head p, footer p, .spell-note, .me-list li, .decor-hint, .write-notice, #write-done p, #attic-write p, #attic-done p, #pay > p, .notice-list span, .my-empty, .found p, .guide-bubble { white-space: pre-line; }
.quiet-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: #b9aecb; }
.shelf-note { margin-top: 12px; text-align: center; color: #d9c7a8; }
.attic-note { max-width: 780px; margin: 30px auto 0; text-align: end; }
.quiet-help { max-width: 780px; margin: 6px auto 0; font-size: 12.5px; text-align: end; color: #b9aecb; }
.quiet-help .help-body { font-size: 13.5px; text-align: center; }

.filters[hidden], .lang-select[hidden] { display: none; }
.shelf:has(> .item:only-child) { grid-template-columns: minmax(0, 340px); justify-content: center; }

/* 쥐구멍 */
.mouse { opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s; }
#mouse-hole.peek .mouse { opacity: 1; transform: none; }

/* 방 꾸미기 */
.rug { fill: var(--rug, #5b3a58); }
#moonbeam stop { stop-color: var(--beam, #fff6e0); }
.attic-art { background: var(--wall, #1a1530); }
.decor { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 560 / 420; z-index: 1; pointer-events: none; }
.piece { position: absolute; padding: 0; line-height: 0; background: none; border: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.decorating .piece { pointer-events: auto; cursor: grab; touch-action: none; filter: drop-shadow(0 0 7px rgba(255, 224, 138, .95)); }
.piece.dragging { cursor: grabbing; }
.piece svg { display: block; width: 100%; height: auto; }
.plate {
  position: absolute;
  top: 3%;
  left: 4%;
  z-index: 2;
  max-width: 34%;
  margin: 0;
  padding: 1px 10px;
  font-size: 13.5px;
  color: #3a2415;
  background: linear-gradient(#e7cf96, #c9a15a);
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.plate[hidden] { display: none; }
.letter { z-index: 3; }
/* 천장에 매달린 나무 팻말 */
.decorate { position: absolute; top: 26px; right: 16px; z-index: 2; padding: 3px 16px 4px; font: 24px/1.2 "Nanum Pen Script", cursive; color: #fff6e0; background: #8a5a33; border: 2px solid #4a2d16; border-radius: 7px; box-shadow: 0 4px 8px rgba(0, 0, 0, .5); transform-origin: 50% -26px; transition: transform .3s, filter .3s; }
.decorate::before, .decorate::after { content: ""; position: absolute; bottom: 100%; width: 1.500px; height: 28px; background: #c9a15a; }
.decorate::before { left: 16px; }
.decorate::after { right: 16px; }
.decorate:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 214, 140, .8)); transform: rotate(-2.500deg); }
.decorate[hidden] { display: none; }
.decor-panel { max-width: 620px; margin: 12px auto 0; padding: 14px 16px; color: var(--ink); background: #f7eedb; border-radius: 14px; }
.decor-panel[hidden] { display: none; }
.decor-hint { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.decor-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14.5px; }
.decor-row > span { flex: none; width: 58px; font-weight: 700; }
.swatches, .furniture-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px #b9a988; }
.swatch[aria-pressed="true"] { border-color: #f7eedb; box-shadow: 0 0 0 2px var(--plum); }
.furn { width: 42px; height: 42px; padding: 4px; background: #231d36; border: 2px solid transparent; border-radius: 10px; }
.furn svg { display: block; width: 100%; height: 100%; }
.furn[aria-pressed="true"] { border-color: var(--brass); }
#plate-input { flex: 1; min-width: 0; padding: 4px 10px; font: inherit; color: var(--ink); cursor: text; background: #fffaf0; border: 1px solid var(--paper-line); border-radius: 8px; }
.decor-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.decor-actions .text-button { margin: 0; }

/* 편지지는 한 장에 모두 보입니다 */
html { scrollbar-width: thin; scrollbar-color: #8a6f4a #15111f; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #15111f; }
::-webkit-scrollbar-thumb { background: linear-gradient(#d9b877, #8a6f4a); border-radius: 999px; }
#write[open], #attic[open] { display: flex; flex-direction: column; height: min(92dvh, 660px); max-height: 92dvh; overflow: hidden; }
#write-form, #attic-write { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#write-form[hidden], #attic-write[hidden] { display: none; }
#write-text, #attic-text { flex: 1; min-height: 70px; resize: none; scrollbar-width: thin; scrollbar-color: #c9a15a transparent; }
#attic .primary { flex: none; align-self: flex-start; }
#write .write-notice, #write .tones, #write .write-who, .write-actions { flex: none; }
#write-done { margin: auto 0; }
#attic-done { margin: auto 0; }
.hearth { flex: none; width: 90px; margin-top: 8px; }

@media (max-width: 720px) {
  .hero { padding: calc(var(--bar, 110px) + 8px) 16px 10px; }
  .house { flex: 1 1 0; width: 124%; max-width: none; margin: 0 -12% -2vh; }
  .arch { min-width: 88px; padding: 4px 4px; }
  .topbar { padding: 8px 10px; }
  .sign-name { justify-self: stretch; padding: 8px 30px 9px; }
  .sign-name::before { left: 9px; }
  .sign-name::after { right: 9px; }
  .logo { font-size: 18px; }
  .hero .whisper { min-height: 34px; font-size: 20px; }
  .shelf-section { padding: 28px 12px 44px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .label { margin: 8px 7px 18px; padding: 15px 9px 9px; }
  .letter { position: relative; left: auto; bottom: auto; width: 100%; margin: 10px 0 0; padding: 18px 16px 8px; }
  .letter .hand { font-size: 22px; }
  .decorate { top: 14px; right: 8px; padding: 1px 10px 2px; font-size: 18px; transform-origin: 50% -14px; }
  .decorate::before, .decorate::after { height: 16px; }
  .decorate::before { left: 10px; }
  .decorate::after { right: 10px; }
  #potion-room { padding: 26px 12px 12px; }
  .cupboard { padding: 24px 6px 8px; }
  .potion-tag { font-size: 10.5px; padding: 1px 3px; }
  dialog { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-track { height: auto; }
  .potion-halo, .potion-bubble, .potions.glow-up, #potion-room[open], #potion-room[open]::backdrop, .spell-line, .spell-line.fizzle, .potion-item.fresh svg, .potion-item.awake svg, .me-list li.fresh { animation: none; }
  .spell-line { box-shadow: 0 0 0 1.500px #e7cf96; }
  .sign-name, .sign-name::before, .sign-name::after, .logo, #music-box.playing .music-note, #music-box.playing .crank { animation: none; }
  .stair-track { height: auto; }
  .stair-scene { position: relative; height: 50vh; }
  .open-sign, .win-cat, .glint, .write-done svg, #write.sealing #write-form, .print { animation: none; }
  .win-cat { display: none; }
  .print { display: none; }
  .hero { position: relative; height: auto; min-height: 100vh; }
  .letter, .after-letter { animation: none; }
  .veil { display: none; }
  .breathe, .flicker, .smoke, .twinkle, .cat-tail, .cat-eyes, .candle-flame, .glass, .steam, .sparkle,
  .hero::before, .cat.hop, .cat.hop .cat-heart, .object.wobble svg, #candle.out .candle-smoke,
  #attic.burning #attic-text, #attic.burning .hearth i, .shooting, .shooting.now,
  .guide-tail, .guide.walking .leg, .guide-cat.hop svg { animation: none; }
  .guide, .guide-cat, .guide-bubble { transition: none; }
  .firefly { animation: none; opacity: .8; }
  .drift, .motes span, .lights, .cursor-light, .butterfly { display: none; }
  .sun-rays, .sun-halo, .flower, .wings { animation: none; }
  .door-leaf, .hearth svg { transition: none; }
}