:root {
  --ink: #2b1c17;
  --paper: #f6ead3;
  --paper2: #ead6b2;
  --wood: #8a5530;
  --accent: #d9a441;
  --accent2: #b84a3e;
  --night: #1b1424;
  --sans: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --round: 'Jua', var(--sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--night);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(217, 164, 65, .12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

.screen { min-height: 100vh; display: grid; place-items: center; padding: 8px; }

/* 픽셀 계단형 테두리 */
.pxbox, .card, .tab, .primary, input, .animals button, .previewBox, .toast {
  border: none;
  box-shadow:
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink),
    inset 0 -3px 0 0 rgba(0,0,0,.12);
}
.card {
  width: min(560px, 94vw);
  background: var(--paper);
  padding: 26px 26px 20px;
  text-align: center;
  margin: 3px;
  box-shadow:
    0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    inset 0 -6px 0 0 var(--paper2), 0 12px 0 0 rgba(0,0,0,.35);
}
.logo img { display: block; width: 96px; height: auto; margin: auto; }
.hud .px, .acorn-earn .px { height: 1.4em; vertical-align: -0.38em; }
.toast .px, .sub .px, .primary .px { height: 1.3em; vertical-align: -0.32em; }
.bubble .px, .bt .px { height: 1.25em; vertical-align: -0.3em; }
h1, h2, .primary, .tab, .book { font-family: var(--round); font-weight: 400; }
h1 { font-size: 30px; margin: 4px 0 6px; }
h2 { font-size: 20px; margin: 10px 0 8px; }
.sub { margin: 0 0 14px; font-size: 14px; color: #6b4a36; }
.small { font-size: 12px; }

.tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.tab { background: var(--paper2); padding: 7px 14px; cursor: pointer; font-size: 13px; }
.tab.active { background: var(--accent); }

.form { display: grid; gap: 12px; text-align: left; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
input { width: 100%; min-width: 0; background: #fffaf0; padding: 9px 10px; outline: none; font-size: 14px; font-weight: 400; }
input:focus { background: #fff; box-shadow: 0 -3px 0 0 var(--accent2), 0 3px 0 0 var(--accent2), -3px 0 0 0 var(--accent2), 3px 0 0 0 var(--accent2); }

.avatarPick { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.previewBox { background: #4a2e26; margin: 3px; position: relative; }
.previewBox canvas { width: 144px; height: 144px; display: block; image-rendering: pixelated; }
.pickName { text-align: center; color: var(--paper); font-size: 14px; font-weight: 600; padding: 0 0 7px; }
.label { font-size: 12px; margin-bottom: 7px; }
.pickers { min-width: 0; }
.animals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 3px; }
.animals button {
  background: var(--paper2); padding: 2px 0 0; cursor: pointer; aspect-ratio: 1;
  display: grid; place-items: center;
}
.animals button canvas { width: 48px; height: 48px; image-rendering: pixelated; display: block; }
.animals button:hover { background: #f3dfb9; }
.animals button.on { background: var(--accent); transform: translateY(-2px); }

.primary {
  background: var(--accent2); color: #fff6e6; padding: 10px 16px; cursor: pointer;
  font-size: 16px; margin: 3px; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(2px); }
.primary:disabled { filter: grayscale(.6) brightness(.85); cursor: default; }
.link { background: none; border: none; text-decoration: underline; cursor: pointer; margin-top: 10px; font-size: 12px; color: #6b4a36; }
.err { color: var(--accent2); min-height: 1em; font-size: 12px; margin: 10px 0 0; }
#lobby p { font-size: 14px; line-height: 1.6; }

/* ------------------------------------------------------------------ room: 위 메뉴 · 책방 · 아래 독서 바 */
#room { padding: 8px; }
.frame {
  --hudh: 46px; --barh: 112px;
  /* 아주 낮은 창에서도 메뉴 · 버튼이 겹치지 않게 최소 폭을 지키고, 모자란 높이는 스크롤로 */
  width: max(min(calc(100vw - 16px), 480px), min(calc(100vw - 16px), calc((100vh - 16px - var(--hudh) - var(--barh)) * 16 / 9)));
  display: flex; flex-direction: column; container-type: inline-size;
  box-shadow: 0 -4px 0 0 #0c0810, 0 4px 0 0 #0c0810, -4px 0 0 0 #0c0810, 4px 0 0 0 #0c0810;
}
#room.fadeout .stage, #room.fadeout .bar, #room.fadeout .hud { opacity: 0; transition: opacity 1s; }
.stage { position: relative; background: #000; overflow: hidden; transition: opacity .6s; }
.frame .stage { width: 100%; aspect-ratio: 16 / 9; }
#scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.hud { display: flex; justify-content: space-between; align-items: center; pointer-events: none; background: #2a1a1f; }
.frame .hud { height: var(--hudh); padding: 0 12px; box-shadow: 0 3px 0 0 #0c0810; position: relative; z-index: 1; }
.pill {
  font-size: clamp(12px, 1.1vw, 15px); color: #fff3d6; padding: 4px 10px;
  background: rgba(27, 16, 22, .55);
  box-shadow: 0 -2px 0 0 rgba(255,236,200,.3), 0 2px 0 0 rgba(255,236,200,.3), -2px 0 0 0 rgba(255,236,200,.3), 2px 0 0 0 rgba(255,236,200,.3);
}
.toast {
  position: absolute; top: 6%; left: 50%; transform: translate(-50%, -8px);
  background: var(--paper); padding: 8px 14px; font-size: 13px; opacity: 0; transition: .25s; pointer-events: none;
  white-space: pre-line; text-align: center; line-height: 1.5;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 아래 독서 바: 오늘 현황 · 입력창 · 퇴장하기 / 오늘의 한 문장 */
.bar { background: linear-gradient(#2a1a1f, var(--night)); box-shadow: 0 -3px 0 0 #0c0810; }
.frame .bar {
  min-height: var(--barh); padding: 12px 14px 10px; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) minmax(0, 1fr);
  align-items: center; column-gap: 16px; row-gap: 8px;
}
.frame .today { grid-column: 1; grid-row: 1; }
.frame .dock { grid-column: 2; grid-row: 1; }
.frame .barrow { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.frame .quote { grid-column: 1 / -1; grid-row: 2; }
.frame .td span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 1150px) { .frame .bar { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) auto; } }
.frame .td b { font-size: 14px; }
/* 좁거나 낮은 창: 현황을 한 줄 위로 올려 라벨이 잘리지 않게 */
@media (max-width: 900px), (max-height: 680px) {
  .frame { --barh: 168px; }
  .frame .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .frame .today { grid-column: 1 / -1; }
  .frame .dock { grid-column: 1; grid-row: 2; }
  .frame .barrow { grid-column: 2; grid-row: 2; }
  .frame .quote { grid-row: 3; }
}
.dock {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  background: rgba(40, 22, 26, .38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 -2px 0 0 rgba(255,236,200,.45), 0 2px 0 0 rgba(255,236,200,.45), -2px 0 0 0 rgba(255,236,200,.45), 2px 0 0 0 rgba(255,236,200,.45);
}
.dock input {
  width: auto; flex: 1; min-width: 0; background: rgba(255, 250, 240, .12); color: #fff6e2;
  box-shadow: none; padding: 7px 9px; font-size: 14px;
}
.dock input::placeholder { color: rgba(255, 240, 215, .65); }
.dock input:focus { background: rgba(255, 250, 240, .2); box-shadow: none; }
.dock input:disabled { opacity: 1; }
.dock.reading input { padding-left: 28px; background: rgba(255, 250, 240, .12) var(--px-book) 7px 50% / 17px auto no-repeat; image-rendering: pixelated; }
.dock .primary { padding: 7px 12px; font-size: 15px; margin: 0; white-space: nowrap;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); }
.dock.reading .primary { background: #5b6f8c; }
.timer { color: #ffe3a6; font-size: 14px; font-variant-numeric: tabular-nums; }
.timer::before { content: ""; display: inline-block; height: 1.25em; aspect-ratio: 1; margin-right: 4px; vertical-align: -0.3em; background: var(--px-clock) center / contain no-repeat; image-rendering: pixelated; }
.demo {
  white-space: nowrap; font-size: 12px; padding: 5px 8px; cursor: pointer; color: #fff3d6;
  background: rgba(40, 22, 26, .5); border: 2px solid rgba(255,236,200,.4);
}

/* 퇴장하기: 독서 바 아래 */
.barrow { display: flex; justify-content: center; align-items: center; gap: 10px; }
.leavebtn {
  border: 0; cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 14px; color: #fff3d6;
  background: rgba(255, 236, 200, .08);
  box-shadow: 0 -2px 0 0 rgba(255,236,200,.35), 0 2px 0 0 rgba(255,236,200,.35), -2px 0 0 0 rgba(255,236,200,.35), 2px 0 0 0 rgba(255,236,200,.35);
}
.leavebtn .px { height: 1.35em; vertical-align: -0.35em; }
.leavebtn:active { transform: translateY(1px); }

/* 오늘의 독서 현황: 독서 · 머문 시간 · 다음 도토리 */
.today { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 6px; }
.td {
  display: flex; flex-direction: column; gap: 0; padding: 3px 7px 4px; min-width: 0; white-space: nowrap;
  background: rgba(255, 236, 200, .07);
  box-shadow: 0 -2px 0 0 rgba(255,236,200,.22), 0 2px 0 0 rgba(255,236,200,.22), -2px 0 0 0 rgba(255,236,200,.22), 2px 0 0 0 rgba(255,236,200,.22);
}
.td span { font-size: 12px; color: rgba(243, 220, 192, .75); }
.td span .px { height: 1.4em; vertical-align: -0.38em; }
.td b { font-size: 13px; line-height: 1.25; color: #ffe3a6; font-variant-numeric: tabular-nums; }
.td-acorn { position: relative; }
.td-bar { display: block; height: 3px; margin-top: 2px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255,236,200,.18); }
.td-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #e9a94a 0 4px, #c97f2f 4px 6px); transition: width 1s steps(6); }

/* 오늘의 한 문장 */
.quote {
  margin: 0; padding: 0 4px; text-align: center; font-size: 13px; line-height: 1.45; color: #fff0d6; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quote q { font-family: var(--round); quotes: "“ " " ”"; }
.quote q::before, .quote q::after { color: #e9a94a; }
.quote cite { font-style: normal; font-size: 12px; color: rgba(243, 220, 192, .6); white-space: nowrap; }


.hudl, .hudr { display: flex; align-items: center; gap: 8px; }
.musicbtn.off { color: rgba(255, 240, 215, .6); }
.musicbtn.blocked { animation: musicNudge 1.6s ease-in-out infinite; }
@keyframes musicNudge { 50% { background: rgba(120, 70, 50, .8); } }
.logbtn { pointer-events: auto; cursor: pointer; border: 0; font-weight: 600; }
.logbtn:hover { background: rgba(60, 34, 30, .75); }
.logbtn:disabled { opacity: .5; cursor: default; }
.acornpill { font-weight: 700; }

/* 백색소음 고르기 */
.ambwrap { position: relative; display: inline-flex; }
.ambpanel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; pointer-events: auto;
  display: grid; gap: 4px; min-width: 210px; padding: 8px; background: #2a1a1f; color: #fff3d6;
  box-shadow: 0 -2px 0 0 rgba(255,236,200,.35), 0 2px 0 0 rgba(255,236,200,.35), -2px 0 0 0 rgba(255,236,200,.35), 2px 0 0 0 rgba(255,236,200,.35), 0 6px 0 2px rgba(12,8,16,.6);
}
.ambttl { margin: 0 2px 2px; font-size: 12px; font-weight: 700; color: rgba(255, 240, 215, .65); }
.ambrow {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; cursor: pointer;
  background: rgba(255, 240, 215, .06); color: rgba(255, 240, 215, .55); font: inherit; font-size: 13px; text-align: left;
}
.ambrow:hover { background: rgba(255, 240, 215, .13); }
.ambrow.on { color: #fff3d6; }
.ambrow span { flex: 1; white-space: nowrap; }
.ambrow:not(.on) .px { opacity: .5; }
.ambsw { flex: none; position: relative; width: 26px; height: 14px; background: #4a3438; box-shadow: 0 0 0 2px var(--ink); }
.ambsw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: #a08a7c; transition: transform .15s steps(2); }
.ambrow.on .ambsw { background: var(--accent); }
.ambrow.on .ambsw::after { transform: translateX(12px); background: #fff6e6; }
.acornpill b { color: #ffd27a; }
.acorn-earn { margin: 6px 0 2px; font-weight: 600; color: #8a5a2b; }
.acorn-earn b { color: #b4632a; }
.acorn-earn .pop { display: inline-block; }
.acorn-earn small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; opacity: .75; }
.acornpill.anim { animation: acornPop .9s cubic-bezier(.3,1.6,.5,1) both; }
.acorn-earn.anim .pop { animation: acornPop .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes acornPop { 0% { transform: translateY(-14px) scale(.3) rotate(-30deg); opacity: 0; } 60% { transform: translateY(0) scale(1.35) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.bye .primary { margin-top: 8px; }
.bye .link { min-height: 44px; padding: 6px 8px; }
.bye .err:empty { display: none; }

/* 머리 위 말풍선 */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.pb { position: absolute; left: 0; top: 0; will-change: transform; }
.bn {
  font-size: clamp(12px, .95vw, 13px); font-weight: 600; color: #fff4dc; white-space: nowrap; padding: 1px 5px;
  background: rgba(27, 16, 22, .5); margin-bottom: 2px;
}
.pb.me .bn { color: #ffe08a; }
.bt {
  position: relative; display: grid; justify-items: center; gap: 1px;
  background: #fff8e8; color: var(--ink); padding: 3px 6px 3px; margin-bottom: 9px;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
  animation: pop .35s steps(3) both;
}
.bt::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; margin-left: -3px;
  background: #fff8e8;
  box-shadow: 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), 0 -2px 0 0 #fff8e8;
}
.ttl { font-size: clamp(12px, 1vw, 14px); font-weight: 700; line-height: 1.25; max-width: 11vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { font-size: 12px; line-height: 1.2; color: #8a6a52; white-space: nowrap; }
.pb.me .bt { background: #ffe8a8; }
.pb.me .bt::after { background: #ffe8a8; box-shadow: 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink), 0 -2px 0 0 #ffe8a8; }
.pb.reading .bt { margin-bottom: calc(9px + var(--lift, 0px)); }
/* 자리가 모자랄 때 단계적으로 작게 (글씨 크기는 그대로, 12px 이상) */
.bubbles[data-fit="1"] .ttl { max-width: 6.5em; }
.bubbles[data-fit="2"] .ttl, .bubbles[data-fit="3"] .ttl { max-width: 5em; }
.bubbles[data-fit="2"] .bt, .bubbles[data-fit="3"] .bt { grid-auto-flow: column; align-items: center; gap: 3px; padding: 2px 5px; }
.bubbles[data-fit="2"] .nk, .bubbles[data-fit="3"] .nk { display: none; }
.bubbles[data-fit="2"] .pb:not(.can-heart) .who, .bubbles[data-fit="3"] .pb:not(.can-heart) .who { display: none; }
.bubbles[data-fit="3"] .pb:not(.me) .tx { display: none; }
.bubbles:not([data-fit="0"]) .pb.can-heart:hover, .bubbles:not([data-fit="0"]) .pb.can-heart:focus-within { z-index: 5 !important; }
.bubbles[data-fit="3"] .pb.can-heart:hover .tx, .bubbles[data-fit="3"] .pb.can-heart:focus-within .tx { display: inline; }
.bubbles:not([data-fit="0"]) .pb.can-heart:hover .ttl, .bubbles:not([data-fit="0"]) .pb.can-heart:focus-within .ttl { max-width: 14em; }
.pb.reading .bt::after { left: calc(50% - var(--dx, 0px)); }
.pb.hi .bt::before { content: ''; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; width: 2px; height: calc(var(--lift, 21px) + 3px); margin-left: -1px; background: var(--ink); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 종료 화면 */
.bye canvas { width: 150px; height: 150px; image-rendering: pixelated; }
.book { font-size: 20px; color: var(--accent2); margin: 4px 0; }

@media (max-width: 520px) {
  .avatarPick { grid-template-columns: 1fr; justify-items: center; }
  .row2 { grid-template-columns: 1fr; }
}

/* 고양이를 쓰다듬으면 머리 위로 "냐옹~" */
.meow { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 4; }
.meow span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; padding: 2px 6px; margin-bottom: 4px;
  font-size: clamp(12px, 1.15vw, 17px); font-weight: 700; color: #8a3a4a; background: #fff0f2;
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
  animation: meowPop 1.4s steps(14) both; }
.meow.shh span { color: #6b3a2a; background: #fff8e8; margin-bottom: 30px; animation-duration: 2.4s; animation-timing-function: steps(24); }
.keeper-alert { position: absolute; bottom: 3px; left: 50%; width: 18px; text-align: center;
  font-size: 22px; line-height: 24px; color: #ffe2a8; text-shadow: -2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink);
  animation: keeperAlert 2.4s steps(24) both; }
@keyframes keeperAlert { 0% { transform: translate(-50%, 6px) scale(.4); opacity: 0; }
  10% { transform: translate(-50%, -9px) scale(1.2); opacity: 1; }
  20%, 38%, 82% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  28% { transform: translate(-50%, -5px) scale(1); }
  100% { transform: translate(-50%, -6px); opacity: 0; } }
@keyframes meowPop { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 14% { transform: translateY(0) scale(1.1); opacity: 1; }
  24% { transform: scale(1); } 70% { transform: translateY(-5px); opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }

/* 퇴장하기 · 확인 창 */
.leavebtn:disabled { opacity: .45; cursor: default; }
.cfm {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(14, 8, 12, .55); animation: cfmIn .18s ease-out;
}
.cfm-card {
  width: min(320px, 92vw); background: var(--paper); padding: 20px 18px 16px; text-align: center;
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
    inset 0 -5px 0 0 var(--paper2), 0 10px 0 0 rgba(0,0,0,.35);
}
.cfm-card p { margin: 0; font-family: var(--round); font-size: 17px; line-height: 1.45; }
.cfm-card .cfm-sub { margin-top: 6px; font-family: inherit; font-size: 12px; opacity: .7; }
.character-card { width: min(560px, 94vw); max-height: 92dvh; overflow-y: auto; text-align: left; }
.character-card h3 { margin: 0 0 10px; font-family: var(--round); font-weight: 400; font-size: 20px; text-align: center; }
.character-card .avatarPick { margin-top: 10px; }
.character-card .cfm-sub { text-align: center; }
.character-card .character-error { margin-top: 8px; color: var(--accent2); font-family: inherit; font-size: 13px; }
.character-card .character-error:empty { display: none; }
.items-card { width: min(560px, 94vw); max-height: 92dvh; overflow-y: auto; text-align: left; }
.items-card h3 { margin: 0 0 8px; font-family: var(--round); font-weight: 400; font-size: 20px; text-align: center; }
.items-card h3 .px { height: 1.15em; vertical-align: -0.22em; }
.items-balance { margin: 0 0 10px; text-align: center; font-size: 13px; }
.items-balance b { color: #a0612c; }
.item-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.item-tile, .item-empty {
  min-width: 0; min-height: 125px; padding: 6px 4px; background: var(--paper2);
  box-shadow: 0 -2px 0 0 rgba(43,28,23,.35), 0 2px 0 0 rgba(43,28,23,.35), -2px 0 0 0 rgba(43,28,23,.35), 2px 0 0 0 rgba(43,28,23,.35);
}
.item-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; gap: 4px; word-break: keep-all; }
.item-tile canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.item-tile b { font-size: 12px; line-height: 1.2; }
.item-tile small { font-size: 12px; opacity: .75; }
.item-tile button {
  width: 100%; padding: 4px 2px; border: 0; color: #fff6e6; background: var(--accent2);
  box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
  font-size: 12px; cursor: pointer;
}
.item-tile button:disabled { opacity: .55; cursor: default; }
.item-tile button.item-unequip { color: var(--ink); background: var(--paper); }
.item-tile.equipped { background: #f3dfb9; }
.item-empty { border: 1px dashed rgba(43,28,23,.3); background: rgba(255,255,255,.16); box-shadow: none; }
.item-pages { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.item-pages button { width: 30px; height: 26px; border: 0; background: var(--paper2); box-shadow: 0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink); cursor: pointer; }
.item-pages button:disabled { opacity: .4; cursor: default; }
.items-card .item-error { min-height: 0; margin-top: 8px; color: var(--accent2); font-family: inherit; font-size: 13px; text-align: center; }
.items-card .item-error:empty { display: none; }
@media (max-width: 520px) {
  .item-grid { gap: 5px; }
  .item-tile, .item-empty { min-height: 145px; padding: 5px 3px; }
  .item-tile canvas { width: 38px; height: 38px; }
}
.cfm-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.cfm-btns button { flex: 1; margin: 0; padding: 9px 10px; font-size: 15px; cursor: pointer; }
.cfm-no {
  background: var(--paper2); color: var(--ink); border: 0;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
}
@keyframes cfmIn { from { opacity: 0; } }

/* ------------------------------------------------------------------ 시작 화면 (로고) */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(242, 176, 106, .28), rgba(242, 176, 106, 0) 42%), var(--night);
  animation: introFade var(--intro-duration, 3900ms) linear var(--intro-delay, 0ms) forwards;
}
.boot-loading {
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 24px; text-align: center; color: var(--paper); background: var(--night);
}
.boot-loading p { margin: 14px 0 8px; font-family: var(--round); font-size: 19px; }
.boot-loading small { font-size: 13px; color: rgba(246, 234, 211, .7); }
.boot-dots { display: flex; justify-content: center; gap: 8px; }
.boot-dots i { width: 7px; height: 7px; background: var(--accent); animation: spDot 1.2s steps(2) infinite; }
.boot-dots i:nth-child(2) { animation-delay: .2s; }
.boot-dots i:nth-child(3) { animation-delay: .4s; }
.boot-retry { padding: 8px 14px; color: var(--paper); border: 1px solid rgba(246, 234, 211, .5); font-size: 13px; }
.sp-in { display: grid; justify-items: center; gap: 10px; text-align: center; animation: spIn .9s steps(9) both; }
.sp-logo { display: block; width: 192px; max-width: 60vw; height: auto; animation: spBob 2.4s steps(4) infinite; }
/* 제목 전용 픽셀 폰트: 갈무리11 Bold(OFL)를 제목 글자만 남겨 자체 호스팅. 11px 격자라 11의 배수 크기로 표시 */
@font-face { font-family: 'Galmuri11 Title'; src: url('/assets/fonts/galmuri11-bold-title.woff2') format('woff2');
  font-weight: 700; font-display: block; unicode-range: U+20, U+B2F4, U+C694, U+C640, U+B3C4, U+D1A0, U+B9AC; }
.sp-title { font-family: 'Galmuri11 Title', var(--round); font-weight: 700; font-size: 33px; line-height: 1.2; color: var(--paper);
  letter-spacing: 0; text-shadow: 3px 3px 0 #0c0810; -webkit-font-smoothing: none; font-smooth: never; }
@font-face { font-family: 'Bookshop Script'; src: url('/assets/fonts/bookshop-script-subtitle.woff2') format('woff2');
  font-weight: 400; font-display: block; }
.sp-sub { font-family: 'Bookshop Script', var(--sans); font-size: 24px; font-style: oblique 10deg; line-height: 1.15;
  color: rgba(246, 234, 211, .85); letter-spacing: 1px; }
.sp-quote { width: min(calc(100vw - 16px), 440px); margin: 0; padding: 2px 8px; text-align: center; }
.sp-quote blockquote { margin: 0; color: var(--paper); font-family: Georgia, serif; font-size: 16px; line-height: 1.35; text-wrap: balance; }
.sp-quote p { margin: 7px 0 0; color: var(--paper); font-size: 15px; line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.sp-quote figcaption { margin-top: 4px; color: rgba(246, 234, 211, .75); font-size: 13px; }
.sp-walk-track { position: relative; top: 24px; width: min(80vw, 360px); height: 72px; overflow: hidden; border-bottom: 1px solid rgba(246, 234, 211, .28); }
.sp-walk-track canvas { position: absolute; left: 0; bottom: 0; width: 72px; height: 72px; image-rendering: pixelated; }
.sp-dots { position: absolute; left: 50%; bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); transform: translateX(-50%); display: flex; gap: 8px; }
.sp-dots i { width: 6px; height: 6px; background: var(--accent); animation: spDot 1.2s steps(2) infinite; }
.sp-dots i:nth-child(2) { animation-delay: .2s; }
.sp-dots i:nth-child(3) { animation-delay: .4s; }
/* 반짝이는 픽셀 별 */
.sp-stars { position: absolute; left: 0; top: 0; width: 3px; height: 3px; color: #fff2c4; animation: spTwinkle 3s steps(3) infinite;
  box-shadow: 12vw 10vh, 28vw 22vh, 44vw 7vh, 63vw 16vh, 81vw 9vh, 92vw 27vh, 7vw 34vh, 86vw 44vh, 16vw 63vh, 74vw 71vh, 34vw 84vh, 58vw 90vh, 93vw 82vh, 4vw 88vh; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes spDot { 0% { opacity: .25; } 50% { opacity: 1; } }
@keyframes spTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes introFade {
  0%, 80% { opacity: 1; visibility: visible; animation-timing-function: ease; }
  100% { opacity: 0; visibility: hidden; }
}
@media (max-height: 620px) {
  .sp-in { gap: 6px; }
  .sp-logo { width: 128px; }
  .sp-walk-track, .sp-walk-track canvas { height: 48px; }
  .sp-walk-track canvas { width: 48px; }
  .sp-dots { bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media (prefers-reduced-motion: reduce) { .sp-in, .sp-logo, .sp-dots i, .sp-stars, .boot-dots i { animation: none; } }

/* ------------------------------------------------------------------ 친구 초대 */
.invitebtn { background: rgba(217, 164, 65, .18); }
.invite-note { margin: 0 0 4px; padding: 7px 10px; font-size: 13px; text-align: center; background: var(--paper2); }
.device-note { margin: 2px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: #6b5a48; }
.inv-card { position: relative; width: min(360px, 94vw); text-align: left; padding: 18px 16px 16px; max-height: 92vh; overflow: auto; }
.inv-card h3 { margin: 0 0 10px; font-family: var(--round); font-weight: 400; font-size: 20px; text-align: center; }
.inv-card section { padding: 10px 12px 12px; background: rgba(255, 250, 240, .55); }
.inv-card section + section { margin-top: 12px; }
.inv-card h4 { margin: 0 0 4px; font-size: 14px; }
.inv-card .inv-sub { margin: 0 0 8px; font-family: inherit; font-size: 13px; opacity: .8; }
.inv-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 16px; }
.inv-form { display: flex; gap: 8px; }
.inv-form .primary { margin: 0; padding: 8px 14px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.inv-form .primary:disabled { opacity: .5; cursor: default; }
.inv-card .inv-msg { margin: 8px 0 0; font-family: inherit; font-size: 12px; line-height: 1.45; opacity: .75; word-break: keep-all; }
.inv-card .inv-msg.ok { opacity: 1; color: #3e6b3a; }
.inv-card .inv-msg.err { opacity: 1; color: var(--accent2); }
.inv-link { display: grid; gap: 2px; padding: 8px 10px; font-size: 13px; background: #fffaf0; word-break: break-all; }
.inv-wait { font-size: 12px; opacity: .65; }
.inv-link b { letter-spacing: 2px; }
.inv-card .cfm-btns { margin-top: 10px; }
.inv-card .cfm-btns button:disabled { opacity: .5; }
.invcards { position: fixed; z-index: 60; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 20px)); display: grid; gap: 8px; pointer-events: none; }
.invcard {
  pointer-events: auto; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center;
  background: var(--paper); padding: 10px 12px; animation: invIn .3s steps(4) both;
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 8px 0 0 rgba(0,0,0,.3);
}
.invcard canvas { width: 40px; height: 40px; image-rendering: pixelated; background: var(--paper2); }
.invcard-txt p { margin: 0; font-size: 14px; line-height: 1.4; word-break: keep-all; }
.invcard-txt small { font-size: 12px; opacity: .7; }
.invcard-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.invcard-btns button { flex: 1; margin: 0; padding: 7px 10px; font-size: 14px; cursor: pointer; }
@keyframes invIn { from { transform: translateY(-12px); opacity: 0; } }

/* ------------------------------------------------------------------ 하트: 책 읽는 다른 독자를 누르면 */
.pb.can-heart .bt { pointer-events: auto; cursor: pointer; }
.pb.can-heart .bt:hover, .pb.can-heart .bt:focus-visible { background: #fff0f2; outline: none; }
.hz { display: inline-block; margin-left: 3px; opacity: .35; filter: grayscale(1); }
.hz .px { height: 1.1em; vertical-align: -0.2em; }
.hz.on { opacity: 1; filter: none; }
.heartfx span { background: none; box-shadow: none; padding: 0; margin-bottom: 40px; animation: heartUp 1.6s steps(16) both; }
.heartfx .px { height: 22px; }
.heartfx.mine .px { height: 26px; }
@keyframes heartUp { 0% { transform: translateY(6px) scale(.3); opacity: 0; } 15% { transform: translateY(0) scale(1.25); opacity: 1; }
  30% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }