/* ===== 기본 / 리셋 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg1: #6a5cff;
  --bg2: #ff7ad9;
  --card: #ffffff;
  --ink: #2b2350;
  --primary: #ff5a8a;
  --primary-d: #e23e70;
  --accent: #ffd23f;
  --good: #3ddc84;
  --ghost: #e9e6ff;
  --shadow: 0 10px 0 rgba(0,0,0,0.12);
}

/* ===== 마우스 커서 (PC 마우스에서만. 그림 못 받으면 시스템 커서) 설계: docs/cursor-plan.md ===== */
:root {
  --cur-default: auto; --cur-pointer: pointer; --cur-walk: auto; --cur-enter: pointer; --cur-talk: pointer;
  --cur-grab: grab; --cur-grabbing: grabbing; --cur-wait: wait; --cur-denied: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  :root {
    --cur-default: image-set(url(../public/img/cursor/default.png) 1x, url(../public/img/cursor/default@2x.png) 2x) 9 8, auto;
    --cur-pointer: image-set(url(../public/img/cursor/pointer.png) 1x, url(../public/img/cursor/pointer@2x.png) 2x) 26 4, pointer;
    --cur-walk: image-set(url(../public/img/cursor/walk.png) 1x, url(../public/img/cursor/walk@2x.png) 2x) 24 24, auto;
    --cur-enter: image-set(url(../public/img/cursor/enter.png) 1x, url(../public/img/cursor/enter@2x.png) 2x) 24 24, pointer;
    --cur-talk: image-set(url(../public/img/cursor/talk.png) 1x, url(../public/img/cursor/talk@2x.png) 2x) 9 40, pointer;
    --cur-grab: image-set(url(../public/img/cursor/grab.png) 1x, url(../public/img/cursor/grab@2x.png) 2x) 24 24, grab;
    --cur-grabbing: image-set(url(../public/img/cursor/grabbing.png) 1x, url(../public/img/cursor/grabbing@2x.png) 2x) 24 24, grabbing;
    --cur-wait: image-set(url(../public/img/cursor/wait.png) 1x, url(../public/img/cursor/wait@2x.png) 2x) 24 24, wait;
    --cur-denied: image-set(url(../public/img/cursor/denied.png) 1x, url(../public/img/cursor/denied@2x.png) 2x) 24 24, not-allowed;
  }
  html, body { cursor: var(--cur-default); }
  input, textarea { cursor: text; }
  #loading-screen, #loading-screen * { cursor: var(--cur-wait); }
  .world-npc { cursor: var(--cur-talk); }
  body.world-wide .world-stage.cur-walk { cursor: var(--cur-walk); }
  body.world-wide .world-stage.cur-enter { cursor: var(--cur-enter); }
  body.world-wide .world-stage.cur-talk { cursor: var(--cur-talk); }
  body.world-wide .world-stage.world-panning { cursor: var(--cur-grabbing); }
}

html, body { height: 100%; }
body {
  font-family: "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(165deg, #ff8a3d 0%, #ff5d7e 50%, #a64dff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  user-select: none;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  /* viewport-fit=cover: 아이폰 가로의 노치 쪽에는 안전 여백을 더 둔다 */
  /* 홈 화면 앱(아이폰)은 상태 표시줄 밑까지 그리므로 위쪽 안전 여백도 둔다 */
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
}

/* ===== 화면 전환 ===== */
.screen { display: none; flex-direction: column; flex: 1; animation: pop 0.28s ease; }
.screen.active { display: flex; }

@keyframes pop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== 타이틀 ===== */
.title {
  text-align: center;
  font-size: 2.6rem;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0,0,0,0.18);
  margin-top: 10px;
}
.title span { display: block; font-size: 3.4rem; letter-spacing: 2px; }
.subtitle { text-align: center; color: #fff; font-size: 1.2rem; margin: 8px 0 22px; opacity: 0.95; }
.title-sm { text-align: center; color: #fff; font-size: 1.8rem; text-shadow: 0 3px 0 rgba(0,0,0,0.18); margin: 8px 0 18px; }

/* ===== 버튼 공통 ===== */
.big-btn {
  border: none;
  border-radius: 18px;
  padding: 16px 18px;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: var(--cur-pointer);
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, filter 0.12s ease;
  color: #fff;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 6px 0 rgba(0,0,0,0.12); }
.primary-btn { background: var(--primary); }
.primary-btn:hover { filter: brightness(1.05); }
.ghost-btn { background: var(--ghost); color: var(--ink); }
.topup-btn { background: var(--accent); color: #6a4b00; }
.new-profile-btn { background: var(--good); margin-top: auto; }

.row { display: flex; gap: 12px; margin-top: 22px; }
.row .big-btn { flex: 1; }

.icon-btn {
  border: none;
  background: rgba(255,255,255,0.25);
  border-radius: 14px;
  font-size: 1.4rem;
  width: 50px; height: 50px;
  cursor: var(--cur-pointer);
  transition: transform 0.08s;
}
.icon-btn:active { transform: scale(0.92); }

/* ===== 프로필 목록 ===== */
.profile-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-card {
  background: var(--card);
  border-radius: 22px;
  padding: 18px 12px;
  text-align: center;
  cursor: var(--cur-pointer);
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.1s;
}
.profile-card:active { transform: translateY(4px); }
.profile-card .pc-avatar { font-size: 3.2rem; display: block; }
.profile-card .pc-name { font-size: 1.2rem; font-weight: 800; margin-top: 6px; }
.profile-card .pc-medals { font-size: 1rem; color: var(--primary-d); font-weight: 700; margin-top: 4px; }
.profile-card .pc-delete {
  position: absolute; top: 6px; right: 8px;
  background: #ffdfe7; color: #d63b63; border: none;
  border-radius: 50%; width: 28px; height: 28px; font-size: 0.95rem; cursor: var(--cur-pointer);
}
.profile-card .pc-world {
  position: absolute; top: 6px; left: 8px;
  background: var(--ghost); border: none;
  border-radius: 50%; width: 28px; height: 28px; font-size: 0.95rem; cursor: var(--cur-pointer);
}
.profile-card .pc-world:active { transform: scale(0.9); }

/* ===== 새 프로필 ===== */
.field-label { color: #fff; font-weight: 700; margin: 14px 4px 8px; display: block; }
.text-input {
  width: 100%; border: none; border-radius: 16px; padding: 14px 16px;
  font-size: 1.3rem; box-shadow: var(--shadow); text-align: center;
}
.text-input:focus { outline: 3px solid var(--accent); }

/* ===== 로그인 / 관리자 계정 관리 ===== */
.auth-screen { justify-content: center; padding-bottom: 32px; }
.auth-card { background: #fffaf0; border: 1px solid #ead9b8; border-radius: 24px; padding: 26px; box-shadow: 0 12px 32px #533c3926; margin-bottom: 20px; }
.auth-card h2 { font-size: 1.4rem; color: #58462d; }
.auth-card .field-label { color: #67563d; }
.auth-card .text-input { text-align: left; background: #fff; border: 1px solid #ddcfb6; border-radius: 12px; font-size: 1rem; box-shadow: none; user-select: text; }
.auth-card .big-btn { width: 100%; background: #729574; box-shadow: none; border-radius: 12px; }
.auth-card .big-btn:disabled { opacity: .6; cursor: var(--cur-wait); }
.auth-message { color: #a3453b; font-size: .95rem; line-height: 1.6; margin: 14px 0; min-height: 24px; overflow-wrap: anywhere; }
.auth-help { color: #887657; font-size: .85rem; line-height: 1.6; margin-top: 14px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-heading .title-sm { margin: 0; }
.admin-heading .big-btn { padding: 12px 16px; font-size: .95rem; box-shadow: none; }
.account-list { display: grid; gap: 10px; margin-top: 16px; }
.account-row { background: #f1e8d4; padding: 14px; border-radius: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.account-row span { color: #806e51; font-size: .9rem; }
@media (max-width: 420px) { .auth-card { padding: 20px; } }

/* ===== 관리자 화면 (admin.js): 탭 + 설정 패널 ===== */
body.admin-wide #app { max-width: 860px; }
.admin-tabs {
  position: sticky; top: 8px; z-index: 5; display: flex; gap: 4px; padding: 5px; margin-bottom: 16px; overflow-x: auto;
  background: #fffaf0; border: 1px solid #ead9b8; border-radius: 16px; box-shadow: 0 6px 18px #533c3926;
}
.admin-tab {
  flex: 1 0 auto; padding: 10px 14px; border: 0; border-radius: 12px; background: none; cursor: var(--cur-pointer);
  font: 700 .95rem "Malgun Gothic", sans-serif; color: #806e51; white-space: nowrap;
}
.admin-tab.is-active { background: #729574; color: #fff; }
.admin-tab:focus-visible, .admin-chip:focus-visible, .admin-text-btn:focus-visible { outline: 3px solid #e0a930; outline-offset: 2px; }
.admin-panel[hidden] { display: none; }
.admin-screen .auth-card h2 { margin-top: 0; }
.admin-screen .auth-message.is-error, .admin-sum.is-error { color: #c0392b; font-weight: 700; }
.admin-grid2, .admin-grid3 { display: grid; gap: 10px 14px; }
.admin-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-grid2 .text-input, .admin-grid3 .text-input { min-width: 0; }
.admin-narrow { max-width: 140px; }
.admin-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #67563d; font-weight: 700; cursor: var(--cur-pointer); }
.admin-check input { width: 20px; height: 20px; }
.admin-amount { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-amount .text-input { flex: 1 1 140px; }
.admin-chips { display: flex; gap: 6px; }
/* 관리자 활동 기록 */
.activity-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.activity-card { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #ddcfb6; border-radius: 12px; background: #fffaf0; color: #58462d; }
.activity-card small { color: #8d816c; font-weight: 700; }
.activity-card strong { font-size: 1.15rem; }
.activity-card span { color: #8d816c; font-size: .8rem; }
.activity-card.is-warn { border-color: #e0a830; background: #fff3d6; }
.activity-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.admin-chip.activity-chip::before { content: none; }
.activity-chip[aria-pressed="true"] { background: #e7efe2; border-color: #79ad91; color: #2f5d3f; }
.activity-day { margin: 14px 0 4px; color: #6a5a3c; font-size: .9rem; }
.activity-row { display: grid; grid-template-columns: 46px 24px 1fr; gap: 6px; align-items: start; padding: 6px 4px; border-bottom: 1px solid #efe5d0; color: #4f3f26; font-size: .92rem; line-height: 1.4; }
.activity-row time { color: #8d816c; font-variant-numeric: tabular-nums; }
.activity-row.is-warn { background: #fff3d6; border-radius: 8px; }
.activity-row.is-good .activity-text { color: #2f6b45; }
.activity-row.is-bad .activity-text { color: #a14a38; }
.activity-text { overflow-wrap: anywhere; }
.notice-admin-list { display: grid; gap: 8px; margin-top: 10px; }
.notice-admin-row { border: 1px solid #ddcfb6; border-radius: 12px; background: #fffaf0; }
.notice-admin-row.is-archived { opacity: .55; }
.notice-admin-main { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; color: #58462d; cursor: var(--cur-pointer); }
.notice-admin-main small { color: #8d816c; }
.notice-body-input { min-height: 180px; resize: vertical; font-family: inherit; line-height: 1.5; }
.admin-chip { padding: 9px 12px; border: 1px solid #ddcfb6; border-radius: 999px; background: #fff; color: #58462d; font-weight: 700; cursor: var(--cur-pointer); }
.admin-chip::before { content: "+"; }
.admin-text-btn { padding: 6px 10px; border: 0; border-radius: 8px; background: #e7efe2; color: #3f6a48; font-weight: 700; cursor: var(--cur-pointer); }
.account-row { align-items: center; }
.account-row .admin-text-btn { margin-left: auto; }
.admin-fold summary { cursor: var(--cur-pointer); list-style: none; }
.admin-fold summary::-webkit-details-marker { display: none; }
.admin-fold summary h2 { display: inline; margin: 0; }
.admin-fold summary::after { content: "펼치기"; float: right; color: #806e51; font-size: .9rem; }
.admin-fold[open] summary::after { content: "접기"; }
.admin-fold[open] summary { margin-bottom: 14px; }
.admin-badge { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: #fff3cd; color: #7a5a00; font-size: .9rem; }

/* 표: 보상 표 · 상품 표 */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.admin-table th { text-align: left; padding: 6px 6px; color: #806e51; font-size: .85rem; border-bottom: 1px solid #ead9b8; }
.admin-table td { padding: 6px; border-bottom: 1px solid #f1e8d4; vertical-align: middle; }
.admin-table .text-input { width: 100%; min-width: 0; padding: 8px; box-sizing: border-box; }
.admin-table input[type="checkbox"] { width: 22px; height: 22px; }
.admin-payout-chance, .admin-resale { color: #58462d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-icon-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f6e3df; color: #c0392b; cursor: var(--cur-pointer); }
.admin-item-name strong { display: block; color: #58462d; }
.admin-item-name small { color: #9a8767; }
.admin-shop-table tr.is-off .admin-item-name, .admin-shop-table tr.is-off .admin-resale { opacity: .5; }
.admin-shop-table th:nth-child(2), .admin-shop-table td:nth-child(2) { width: 52px; text-align: center; }
.admin-shop-table th:nth-child(3), .admin-shop-table td:nth-child(3) { width: 110px; }
.admin-shop-table th:nth-child(4), .admin-shop-table td:nth-child(4) { width: 64px; }

/* 저장 줄: 화면 아래에 붙어 있어 긴 표를 내려도 바로 저장 */
.admin-savebar {
  position: sticky; bottom: 0; z-index: 4; padding: 14px 16px; margin: 0 -4px 20px; border-radius: 18px;
  background: #fffaf0f2; border: 1px solid #ead9b8; box-shadow: 0 -6px 18px #533c391f;
}
.admin-savebar .row { display: flex; gap: 10px; }
.admin-savebar .big-btn { flex: 1; padding: 12px; border-radius: 12px; box-shadow: none; font-size: 1rem; }
.admin-savebar .primary-btn { background: #729574; }
.admin-savebar .auth-message { min-height: 0; margin: 0 0 10px; }
.admin-savebar .auth-message:empty { display: none; }
.admin-savebar .ghost-btn { background: #f1e8d4; color: #58462d; }
.admin-ev { margin: 0 0 8px; font-weight: 800; color: #58462d; }
.admin-ev.is-plus { color: #2e7d4f; }
.admin-ev.is-minus { color: #c0392b; }
@media (max-width: 520px) {
  .admin-grid3, .admin-grid2 { grid-template-columns: 1fr 1fr; }
  .admin-tab { padding: 9px 10px; font-size: .85rem; }
}


.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-cell {
  background: var(--card); border-radius: 16px; font-size: 2rem;
  padding: 10px 0; cursor: var(--cur-pointer); text-align: center; border: 4px solid transparent;
  transition: transform 0.08s;
}
.avatar-cell:active { transform: scale(0.9); }
.avatar-cell.selected { border-color: var(--accent); transform: scale(1.04); }

/* ===== 게임 화면: 창 높이에 맞춰 균일 축소 ===== */
/* 게임 화면일 때만 문서 스크롤을 막고 #app을 실제 창 높이로 고정한다(다른 화면은 그대로 스크롤 가능). */
body.game-screen { overflow: hidden; }
body.game-screen #app { height: 100%; min-height: 0; padding-top: 0; padding-bottom: 0; }
/* 화면을 꽉 채우는 장면(월드·게임)은 문서를 화면에 고정한다. 아이폰 사파리는 회전·주소창 변화 때
   100dvh와 보이는 영역이 잠깐 어긋나 페이지가 스크롤된 채 남는데(위쪽 빈 띠), 고정하면 그럴 여지가 없다. */
/* --app-h: 아이폰 홈 화면 앱에서만 js/viewport.js가 넣는 실제 화면 높이(그 밖에는 100%) */
body.world-wide, body.game-screen { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100%); overflow: hidden; overscroll-behavior: none; }

/* 게임 화면 = 창 높이 박스. 넘치면 .game-fit을 scale로 줄여 넣고, 남으면 가운데 정렬. */
#screen-game { justify-content: center; align-items: center; overflow: hidden; padding-top: calc(22px + env(safe-area-inset-top)); }
/* 모든 게임 요소를 담는 래퍼: JS가 transform:scale을 걸어 통째로 축소한다(가운데 기준). */
.game-fit { width: 100%; transform-origin: center center; will-change: transform; }
.game-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.player-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.9); border-radius: 16px; padding: 6px 12px; flex: 1;
  box-shadow: var(--shadow);
}
.player-avatar { font-size: 1.7rem; }
.player-name { font-weight: 800; font-size: 1.1rem; }
.medal-count { display: inline-block; }
.medal-count.bump { animation: bump 0.4s ease; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* ===== 게임판 ===== */
.board-wrap {
  position: relative;
  width: min(92vw, 500px);
  aspect-ratio: 1 / 1;
  margin: 6px auto 6px;
}
.board-img {
  width: 100%; height: 100%; display: block;
  border-radius: 5%;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.28));
}
.board-stage { position: absolute; inset: 0; }

/* 가운데 연출존 (투명 원 안쪽에 맞춤) — 자식들을 같은 칸에 겹쳐 배치 */
.board-center {
  position: absolute;
  left: 50%; top: 53.5%;
  width: 46.5%; height: 46.5%;   /* 투명 원(반지름 약 23.2%)의 지름에 맞춤 */
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  overflow: visible;
}
.board-center > * { grid-area: 1 / 1; }

/* 손 이미지(내가 낸 것) — 빈 원을 꽉 채움 */
.center-hands {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.hand-img { width: 99%; height: 99%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25)); }
.hand-img.shaking { animation: shake 0.18s linear infinite; }
@keyframes shake {
  0%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-7px) rotate(-6deg)}
  50%{transform:translateY(0) rotate(0)} 75%{transform:translateY(-7px) rotate(6deg)}
  100%{transform:translateY(0) rotate(0)}
}
.hand-img.reveal { animation: reveal 0.32s ease; }
@keyframes reveal { from{transform:scale(0.4);opacity:0.2} to{transform:scale(1);opacity:1} }

/* 승/무/패 반복 연출 이미지 (빈 원 크기에 맞춤) */
.center-anim {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.3));
  animation: animbob 0.9s ease-in-out infinite;
}
@keyframes animbob { 50% { transform: translateY(-3%); } }
/* 승리 확정 후: 이미지를 위로 살짝 올리고 축소(코인 표시 공간 확보) */
.center-anim.shrink {
  animation: none;
  transform: scale(0.72) translateY(-16%);
}

/* 획득 코인(이미지 하단, 안쪽으로 살짝 올림) */
.center-coins {
  position: absolute;
  left: 50%; bottom: 5%;
  transform: translateX(-50%);
  background: linear-gradient(#ffd23f, #ffb01f);
  color: #6a3b00; font-weight: 900;
  font-size: clamp(16px, 5.1vw, 30px);
  line-height: 1;
  padding: 5px 15px; border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
  white-space: nowrap; z-index: 4;
  animation: coinpop 0.45s cubic-bezier(.2,1.6,.4,1);
}
.center-coins.jackpot {
  background: linear-gradient(#ff5a8a, #ff2d6f);
  color: #fff; border-color: #ffe14a;
}
@keyframes coinpop { 0%{transform:translateX(-50%) scale(0.3)} 60%{transform:translateX(-50%) scale(1.2)} 100%{transform:translateX(-50%) scale(1)} }

/* 룰렛 마커 (숫자 링 위를 돈다) */
.roulette-marker {
  position: absolute; left: 50%; top: 50%;
  width: 13%; height: 13%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,170,0.92), rgba(255,205,40,0.3) 65%, rgba(255,205,40,0) 72%);
  box-shadow: 0 0 16px 6px rgba(255,220,90,0.85);
  font-size: clamp(16px, 4.6vw, 30px);
  pointer-events: none; z-index: 3;
}
.roulette-marker span { filter: drop-shadow(0 0 4px #ff9b00); }
.roulette-marker.spin { animation: mpulse 0.45s ease-in-out infinite; }
@keyframes mpulse { 50% { box-shadow: 0 0 22px 9px rgba(255,220,90,1); } }
.roulette-marker.land { animation: mland 0.5s ease; }
@keyframes mland { 0%{transform:translate(-50%,-50%) scale(1)} 45%{transform:translate(-50%,-50%) scale(1.5)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* 진행 상태별 버튼 구역: 고정 높이 + 자식들을 겹쳐 배치해 토글돼도 레이아웃 높이가 안 변한다.
   → 축소 비율/가운데 정렬이 다시 계산되지 않아 board·선택버튼 위치가 고정된다. */
.action-zone { position: relative; min-height: 160px; margin-top: 4px; }
.action-zone > * { position: absolute; left: 0; right: 0; margin: 0; }
/* 멈춤 버튼은 선택 버튼에 살짝 겹치게(원래 느낌), 결과/충전 버튼은 그 바로 아래에 둔다. */
.action-zone .slot-stop-wrap { top: -28px; }
.action-zone #action-buttons,
.action-zone #topup-box { top: 6px; }

/* 멈춤 버튼 (이미지: up/down) */
.slot-stop-wrap { text-align: center; }
.slot-stop-btn {
  display: inline-block;
  width: min(58%, 240px);
  aspect-ratio: 577 / 433;
  border: none; padding: 0; cursor: var(--cur-pointer);
  background: transparent no-repeat center / contain;
  background-image: url(../public/img/game/btn_stop_up.webp);
  animation: stoppulse 0.7s ease-in-out infinite;
}
.slot-stop-btn:active { background-image: url(../public/img/game/btn_stop_down.webp); }
.slot-stop-btn.hidden { display: none; }
@keyframes stoppulse { 50% { transform: scale(1.06); } }

/* ===== 선택 버튼 (이미지: up/down) ===== */
.choice-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: -18px; align-items: center; }
.choice-btn {
  aspect-ratio: 577 / 433;
  border: none; padding: 0; cursor: var(--cur-pointer);
  background: transparent no-repeat center / contain;
  transition: transform 0.06s;
}
.choice-btn[data-hand="rock"]     { background-image: url(../public/img/game/btn_rock_up.webp); }
.choice-btn[data-hand="scissors"] { background-image: url(../public/img/game/btn_scissors_up.webp); }
.choice-btn[data-hand="paper"]    { background-image: url(../public/img/game/btn_paper_up.webp); }
.choice-btn[data-hand="rock"]:active,     .choice-btn[data-hand="rock"].chosen     { background-image: url(../public/img/game/btn_rock_down.webp); }
.choice-btn[data-hand="scissors"]:active, .choice-btn[data-hand="scissors"].chosen { background-image: url(../public/img/game/btn_scissors_down.webp); }
.choice-btn[data-hand="paper"]:active,    .choice-btn[data-hand="paper"].chosen    { background-image: url(../public/img/game/btn_paper_down.webp); }
.choice-btn:active { transform: translateY(2px); }
.choice-btn:disabled { cursor: var(--cur-denied); }
.choice-btn:disabled:not(.chosen) { opacity: 0.45; }

.action-buttons { text-align: center; }
.action-buttons.hidden { display: none; }
.action-buttons .big-btn { width: 95%; }

.topup-box { text-align: center; color:#fff; }
.topup-box.hidden { display: none; }
.topup-box p { font-weight: 800; margin-bottom: 8px; }

/* ===== 기록 ===== */
.stats-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--card); border-radius: 18px; padding: 14px; text-align: center;
  box-shadow: var(--shadow);
}
.stat-card .sv { font-size: 1.9rem; font-weight: 900; color: var(--primary-d); }
.stat-card .sl { font-size: 0.95rem; font-weight: 700; margin-top: 2px; }
#screen-stats .big-btn { margin-top: auto; }

/* ===== 월드(우리 집) ===== */
/* 월드 화면일 때만 모바일 카드(560px) 폭 제한을 풀어 브라우저 가로를 꽉 채운다(다른 화면은 그대로). */
body.world-wide #app { max-width: none; height: 100%; min-height: 0; padding: 0; }
body.world-wide .world-header,
body.world-wide .world-hint { padding-left: 12px; padding-right: 12px; }
body.world-wide .world-stage { min-height: 0; border-radius: 0; }
#screen-world { padding: 0; position: relative; min-height: 0; }
.world-header { position: absolute; z-index: 10; left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); top: calc(12px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.world-header .icon-btn { pointer-events: auto; background: #fffdf3e8; width: 42px; height: 42px; font-size: 20px; }
.world-header [hidden], .world-controls[hidden] { display: none; }
.world-title {
  flex: 1; text-align: center; color: #fff; font-weight: 800; font-size: 1.3rem;
  text-shadow: 0 3px 0 rgba(0,0,0,0.18);
}
.world-header-spacer { visibility: hidden; }   /* 제목 가운데 정렬용 균형 */

.world-stage {
  position: relative;
  width: 100%;
  flex: 1;                     /* 남는 세로 공간을 뷰포트로 사용(카메라가 이 안에서 이동) */
  min-height: 260px;
  margin: 0 auto;
  border-radius: 18px;
  background: transparent;     /* 어두운 배경 제거 → 타일 사이로 어두운 틈이 비치지 않게 */
  overflow: hidden;
  touch-action: none;          /* 캐릭터 드래그 시 터치 스크롤/제스처 방지 */
}
.world-stage.world-grabbing { cursor: none; }   /* 드래그 중엔 실제 커서를 숨기고 가짜 커서를 쓴다 */
/* 가짜 커서: 캐릭터 머리(잡은 지점)에 붙어 캐릭터와 함께 오르내린다 */
.world-cursor {
  position: absolute;
  font-size: 26px; line-height: 1;
  pointer-events: none; user-select: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
  z-index: 5; display: none;
}
/* 오락실 불빛(world-lights.js): 맵 그림 위, 캐릭터·오브젝트 아래. 쌓임 맥락을 만들지 않아야 blend가 맵 그림과 섞인다. */
.world-lights { position: absolute; inset: 0; pointer-events: none; }
.world-lights > * { position: absolute; z-index: 1; }
.lights-veil { mix-blend-mode: multiply; }
.lights-em { position: absolute; overflow: hidden; pointer-events: none; }   /* 켜진 면: 마스크 모양 그대로 색을 입힌다(회백색 면 위에 normal) */
.lights-room { background-repeat: repeat-x; background-size: 100% 100%; animation: lights-flicker 7s steps(1, end) infinite, lights-flow 9s linear infinite; }
.lights-bloom { mix-blend-mode: screen; pointer-events: none; animation: lights-flicker 7s steps(1, end) infinite, lights-flow 9s linear infinite; }
.lights-obj { z-index: 9; animation: lights-blink 2.4s ease-in-out infinite; filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 6px var(--c)); }
.lights-sweep { position: absolute; top: 0; left: 0; width: 300%; height: 100%; will-change: transform; animation: lights-run 3.2s linear infinite;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,1) 50%, transparent 62%); }
.lights-pool { mix-blend-mode: screen; border-radius: 50%; animation: lights-pool 3.4s ease-in-out infinite;
  background: radial-gradient(closest-side, var(--c) 0%, rgba(0,0,0,0) 100%);
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 55%, transparent) 40%, rgba(0,0,0,0) 100%); }
@keyframes lights-flow { from { background-position-x: 0; } to { background-position-x: 100%; } }
@keyframes lights-blink { 0%, 100% { opacity: .8; } 45% { opacity: 1; } 55% { opacity: .55; } 65% { opacity: 1; } }
.lights-spark { mix-blend-mode: screen; pointer-events: none; opacity: 0; animation: lights-twinkle 2.2s ease-in-out infinite;
  background: radial-gradient(closest-side, #fff 0%, var(--c) 28%, transparent 70%),
    linear-gradient(90deg, transparent 8%, #fff 50%, transparent 92%) center / 100% 8% no-repeat,
    linear-gradient(0deg, transparent 8%, #fff 50%, transparent 92%) center / 8% 100% no-repeat; }
@keyframes lights-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lights-run { from { transform: translateX(-66.7%); } to { transform: translateX(0); } }
@keyframes lights-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes lights-pool { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lights-flicker { 0%, 100% { opacity: 1; } 71% { opacity: .72; } 72% { opacity: 1; } 73% { opacity: .55; } 74% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lights-sweep, .lights-room, .lights-bloom, .lights-obj, .lights-pool, .lights-spark { animation: none; } .lights-spark { opacity: .8; } }
.world-water { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; }   /* 물 표면(world-water.js): 땅 위, 캐릭터·오브젝트 아래 */
.world-floor { position: absolute; z-index: 1; left: 0; top: 0; }   /* 캔버스: 크기는 JS가 지정 */
.world-actors { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.world-char {
  position: absolute;
  transform: translate(-50%, -100%);   /* 발밑(하단중앙)을 타일중심에 */
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.32));
}
/* 장착 아이템 레이어: 몸통과 동일 정렬로 겹침(그림자는 몸통만 → 중복 방지) */
.world-char-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.world-hint { text-align: center; color: #fff; opacity: 0.92; margin-top: 12px; font-weight: 700; }

/* 확장 월드맵: 배경 구역과 건물은 동일한 월드 좌표/카메라를 사용한다. */
body.world-wide { background: linear-gradient(180deg, #e9f4e8, #fff8ed 30%); }
body.world-wide .world-title { flex: none; color: #365c48; text-shadow: none; font-size: .9rem; background: #fffdf3dd; border-radius: 20px; padding: 8px 14px; margin-right: auto; }
.world-coins { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #edcc77; border-radius: 24px; background: #fff9e6ef; box-shadow: 0 3px 12px #5b3d151a; color: #705221; font-size: .8rem; }
.world-coins strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
body.world-wide .world-hint { position: absolute; z-index: 10; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 24px); width: max-content; pointer-events: none; color: #52745f; background: #fffdf3dd; border-radius: 18px; font-size: .75rem; padding: 6px 12px; }
body.world-wide .world-stage { overflow: hidden; background: #fff9ee; cursor: var(--cur-walk); }
.world-stage.world-panning { cursor: var(--cur-grabbing); }
.world-map-layer { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.world-map-chunk, .world-map-foreground { position: absolute; display: block; user-select: none; pointer-events: none; }
.world-building { position: absolute; border: 0; padding: 0; background: none; line-height: 0; pointer-events: none; }
.world-building img { display: block; width: 100%; height: auto; pointer-events: none; }
.world-building-label {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  background: #fffdf3; border: 1px solid #e3d2a6; border-radius: 999px; padding: 6px 12px;
  box-shadow: 0 3px 8px #43391920; color: #614827; font: 700 clamp(10px, 1.1vw, 13px)/1.2 "Malgun Gothic", sans-serif;
  white-space: nowrap; cursor: var(--cur-pointer); pointer-events: auto;
}
/* 월드 잔잔한 움직임(world-fx.js): 흔들림은 개별 속성 rotate로(그림 위치를 잡는 transform과 안 부딪힘) */
.fx-sway { animation: fx-sway var(--sway-period, 4.5s) ease-in-out infinite alternate; }
@keyframes fx-sway { from { rotate: calc(var(--sway-deg, 1deg) * -1); } to { rotate: var(--sway-deg, 1deg); } }
.fx-sparkle { position: absolute; pointer-events: none; transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: radial-gradient(circle, #fff 0 32%, rgba(255, 247, 190, .95) 48%, rgba(255, 247, 190, 0) 72%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fx-twinkle var(--tw-period, 3s) ease-in-out infinite; }
@keyframes fx-twinkle { 0%, 52%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; } 68% { transform: translate(-50%, -50%) scale(1) rotate(20deg); opacity: 1; } 84% { transform: translate(-50%, -50%) scale(.45) rotate(45deg); opacity: .8; } }
.fx-sky { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }   /* 오브젝트(2) 위, 조작 버튼(10) 아래 */
.fx-particle { position: absolute; left: 0; top: 0; display: block; pointer-events: none; will-change: transform; }
.fx-particle.has-img { background: center / contain no-repeat; }
/* 스프라이트 시트(가로로 이어 붙인 프레임)를 steps()로 재생: 프레임 수별 클래스 fx-nN. 한 번만 재생(is-once)은 마지막 프레임에 머문다. */
.fx-sprite { display: block; background-repeat: no-repeat; background-position-x: 0; pointer-events: none; animation: fx-frames var(--dur, 1s) infinite; will-change: background-position; }
.fx-sprite.is-once { animation-iteration-count: 1; animation-fill-mode: forwards; }
.fx-n3 { animation-timing-function: steps(3); } .fx-n4 { animation-timing-function: steps(4); } .fx-n5 { animation-timing-function: steps(5); } .fx-n6 { animation-timing-function: steps(6); }
@keyframes fx-frames { to { background-position-x: calc(var(--n, 1) * var(--w, 100px) * -1); } }
/* 하늘을 가로지르는 새 */
.fx-bird { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
/* 꽃덤불 둘레를 도는 나비·벌: 가로·세로 두 겹의 오가기(서로 박자가 달라 떠도는 듯), 향하는 방향에 맞춰 뒤집기 */
.fx-flier { position: absolute; width: 0; height: 0; pointer-events: none; }
.fx-flier-x { position: absolute; left: 0; top: 0; animation: fx-flier-x var(--fdx, 4s) ease-in-out infinite alternate; }
.fx-flier-y { position: absolute; left: 0; top: 0; animation: fx-flier-y var(--fdy, 3s) ease-in-out infinite alternate; }
.fx-flier-face { position: absolute; left: -20px; top: -20px; animation: fx-flier-face var(--fdx2, 8s) steps(1, end) infinite; }
@keyframes fx-flier-x { from { transform: translateX(calc(var(--ax, 30px) * -1)); } to { transform: translateX(var(--ax, 30px)); } }
@keyframes fx-flier-y { from { transform: translateY(calc(var(--ay, 20px) * -1)); } to { transform: translateY(var(--ay, 20px)); } }
@keyframes fx-flier-face { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
/* 땅·물 위 장식(앉은 참새·잉어·연잎): 점 하나(기준점)에 그림 상자를 놓는다 */
.fx-ground { position: absolute; width: 0; height: 0; pointer-events: none; }
.fx-pad-img { position: absolute; display: block; transform: translate(-50%, -85%); pointer-events: none; }
.fx-pad { animation: fx-pad-bob 6s ease-in-out infinite alternate; }
@keyframes fx-pad-bob { from { rotate: -2deg; translate: 0 -1px; } to { rotate: 2deg; translate: 0 1px; } }
.fx-debug-dot { position: absolute; left: -8px; top: -8px; display: block; min-width: 16px; height: 16px; padding: 0 6px 0 4px; border-radius: 999px; background: #ff7a00cc; color: #fff; font: 700 10px/16px "Malgun Gothic", sans-serif; white-space: nowrap; pointer-events: auto; cursor: move; touch-action: none; z-index: 9; box-shadow: 0 0 0 2px #fff8; }
@media (prefers-reduced-motion: reduce) { .fx-sway, .fx-sparkle, .fx-sprite, .fx-flier-x, .fx-flier-y, .fx-flier-face, .fx-pad { animation: none; } }
/* 공지 게시판 느낌표: 둥실둥실 떠 있다(움직임 줄이기면 가만히) */
.notice-alert { position: absolute; left: 50%; bottom: calc(100% + 6px); width: var(--alert-size, 40px); height: var(--alert-size, 40px); transform: translate(calc(-50% + var(--alert-size, 40px) * .24 + var(--alert-dx, 0px)), calc(var(--alert-size, 40px) * .42 + var(--alert-dy, 0px))); pointer-events: auto; cursor: var(--cur-pointer); transition: opacity .35s ease, transform .35s ease; }
.notice-alert[hidden] { display: none; }
.notice-alert img { display: block; width: 100%; height: 100%; animation: notice-bob 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.notice-alert.is-leaving { opacity: 0; transform: translate(calc(-50% + var(--alert-size, 40px) * .24 + var(--alert-dx, 0px)), calc(var(--alert-size, 40px) * .42 + var(--alert-dy, 0px))) scale(1.35); pointer-events: none; }
.notice-alert.is-editing { outline: 2px dashed #ff7a00; outline-offset: 2px; cursor: move; touch-action: none; }
.world-debug-alert { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid #ffffff44; color: #fff; font: 12px/1.3 "Malgun Gothic", sans-serif; }
.world-debug-alert[hidden] { display: none; }
.world-debug-alert .world-debug-alert-title { flex: 1 0 100%; font-weight: 700; }
.world-debug-alert .world-debug-alert-read { font-variant-numeric: tabular-nums; }
.world-debug-alert button { min-width: 34px; padding: 5px 8px; }
@keyframes notice-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .notice-alert img { animation: none; } }
.world-building.world-building-nolabel .world-building-label { display: none; }
.world-building:focus-visible .world-building-label { outline: 3px solid #79ad91; outline-offset: 3px; }
.world-building-baked .world-building-label { position: static; display: block; transform: none; }
body.world-wide { --ctl: clamp(32px, 5.2vmin, 44px); }   /* 확대 패널·안내 문구가 함께 쓰는 기준 크기 */
.world-controls { position: absolute; z-index: 10; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: calc(var(--ctl) * .15); }
.world-controls .icon-btn { width: var(--ctl); height: var(--ctl); font-size: calc(var(--ctl) * .5); }   /* 화면 크기에 맞춰 자동 조절 */
.world-controls .icon-btn { background: #fffef8; box-shadow: 0 3px 0 #d1dec8; color: #486746; }
.world-building-card {
  position: absolute; z-index: 10000; left: 50%; bottom: 108px; transform: translateX(-50%);
  width: min(360px, calc(100% - 32px)); background: #fffef8; border: 1px solid #e5dac0;
  border-radius: 22px; padding: 20px; box-shadow: 0 12px 40px #26443230; text-align: center;
}
.world-building-card[hidden] { display: none; }
.world-building-card strong { color: #365c48; font-size: 1.2rem; }
.world-building-card p { margin: 10px 0 16px; color: #65715b; }
.world-building-card .big-btn { padding: 12px 18px; font-size: 1rem; box-shadow: 0 4px 0 #dc9874; background: #eea169; }
.building-card-close { position: absolute; top: 8px; right: 12px; padding: 5px; border: 0; background: none; color: #768671; cursor: var(--cur-pointer); font-size: 18px; }

/* ===== 컨페티 ===== */
.confetti-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; display: none;
}
.confetti-canvas.on { display: block; }

/* 실내 옷장 인벤토리 */
.shop-menu-btn { pointer-events: auto; border: 1px solid #c7aa70; border-radius: 18px; padding: 10px 14px; background: #fff9ed; color: #534632; font: 700 13px "Malgun Gothic", sans-serif; cursor: var(--cur-pointer); white-space: nowrap; }
.clothing-shop-panel { position: absolute; z-index: 35; top: 66px; right: 12px; bottom: 12px; width: min(440px, calc(100% - 24px)); display: flex; flex-direction: column; border: 2px solid #d4ba85; border-radius: 22px; overflow: hidden; background: #fff9ed; color: #534632; box-shadow: 0 10px 34px #39250f45; }
.clothing-shop-panel[hidden] { display: none; }
.clothing-shop-panel .icon-btn { width: 36px; height: 36px; background: #fff9ed; }
.shop-balance { margin: 4px 0 10px; padding: 12px; background: #f6e6b7; border-radius: 12px; font-weight: 800; color: #705221; }
.shop-intro { font-size: 13px; line-height: 1.6; color: #877452; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-product { display: flex; flex-direction: column; align-items: center; padding: 16px 10px; border: 2px solid #ddcda9; border-radius: 16px; background: #fffdf6; text-align: center; }
.shop-product .wd-item-icon { width: 110px; height: 110px; }
.shop-product h3 { margin: 10px 0 6px; font-size: 15px; }
.shop-product p { margin: 0 0 12px; font-size: 12px; color: #877452; line-height: 1.5; }
.shop-price { margin-top: auto; color: #986b25; font-size: 16px; }
.shop-buy { margin-top: 12px; width: 100%; padding: 10px 4px; border: none; border-radius: 10px; background: #668e6d; color: white; font: 700 12px "Malgun Gothic", sans-serif; cursor: var(--cur-pointer); }
.shop-buy:disabled { background: #e7decb; color: #8d816c; cursor: var(--cur-denied); }
/* 색상 선택 상품(docs/shop-color-variants.md): 둥근 색 단추, 고른 색은 굵은 테두리, 가진 색은 ✓ */
.shop-swatches { display: flex; justify-content: center; gap: 8px; margin: -4px 0 10px; }
.shop-swatch { position: relative; width: 44px; height: 44px; padding: 0; border: 3px solid #fffdf6; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #c9b994; cursor: var(--cur-pointer); color: #4a3d28; font: 800 15px "Malgun Gothic", sans-serif; }
.shop-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #668e6d; }
.shop-swatch:focus-visible { outline: 3px solid #6795ba; outline-offset: 3px; }
.shop-swatch span { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #668e6d; color: #fff; font-size: 11px; line-height: 18px; }
.shop-status { color: #426a4a; line-height: 1.6; font-size: 13px; min-height: 2em; }
@media (max-width: 620px) {
  body.world-wide .world-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px; font-size: 12px; }
  .world-header { gap: 5px; left: 4px; right: 4px; }
  .world-coins { padding: 8px; gap: 4px; font-size: 11px; }
  .shop-menu-btn { padding: 10px 8px; font-size: 12px; }
  .clothing-shop-panel { left: 8px; right: 8px; width: auto; top: 66px; bottom: 8px; }
}
/* 옷가게 패널 머리·본문(예전 옷장 패널과 같은 모양) */
.wardrobe-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-weight: 800; background: #eddfc4; font-size: 1.2rem;
}
.wardrobe-head small { font-weight: 600; opacity: .7; }
.wardrobe-body { padding: 10px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wardrobe-head .icon-btn { width: 36px; height: 36px; font-size: 20px; background: #fff9ed; }
.wd-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.wd-tab { flex: 1; padding: 8px 3px; border: 0; border-radius: 10px; background: #efe6d4; color: #786749; font: 700 12px "Malgun Gothic", sans-serif; cursor: var(--cur-pointer); }
.wd-tab[aria-pressed="true"] { background: #6f9472; color: white; }
.wd-inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px; padding: 9px 5px; border: 2px solid #e0d1b3; border-radius: 14px; background: #fffdf7; color: #655538; cursor: var(--cur-pointer); }
.wd-item:hover { border-color: #99b69a; }
.wd-item[aria-pressed="true"] { border-color: #709975; background: #edf4e8; }
.wd-item-icon { width: 68px; height: 68px; }
.wd-item-icon { object-fit: contain; }
.world-prop, .world-placement { position: absolute; height: auto; pointer-events: none; user-select: none; }
.world-npc { position: absolute; border: 0; padding: 0; background: none; pointer-events: auto; cursor: var(--cur-pointer); }
.world-npc img { display: block; width: 100%; height: 100%; object-fit: contain; }
.npc-flutter img { transform-origin: 50% 92%; animation: npc-flutter 2.6s ease-in-out infinite; }
@keyframes npc-flutter { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-1.5%) rotate(-1.1deg); } 65% { transform: translateY(-.5%) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .npc-flutter img { animation: none; } }
.world-npc:disabled { pointer-events: none; }
.world-npc.nearby img { filter: drop-shadow(0 0 5px #fff5b8); }
.npc-talk-label { display: none; position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 16px; background: #fffdf4; color: #365c48; font: 700 12px "Malgun Gothic",sans-serif; white-space: nowrap; }
.world-npc.nearby .npc-talk-label { display: block; }
.world-npc:hover .npc-talk-label, .world-npc:focus-visible .npc-talk-label { display: block; }
.world-npc:focus-visible { outline: 3px solid #6795ba; border-radius: 40%; }
.world-speech { position: absolute; z-index: 9; max-width: min(240px, 80%); padding: 12px 16px; border: 2px solid #d3b775; border-radius: 20px; background: #fffdf7; color: #54452f; font: 700 14px/1.5 "Malgun Gothic", sans-serif; transform: translate(-50%, -115%); box-shadow: 0 5px 16px #35281c24; pointer-events: none; }
.world-speech::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); margin-left: -7px; bottom: -9px; width: 14px; height: 14px; background: #fffdf7; border-right: 2px solid #d3b775; border-bottom: 2px solid #d3b775; transform: rotate(45deg); }
.world-speech { word-break: keep-all; }
.interaction-panel, .sale-confirm { position: absolute; z-index: 40; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); padding: 24px; border-radius: 24px; border: 2px solid #d4ba85; background: #fff9ed; color: #54452f; box-shadow: 0 12px 36px #39250f40; }
.interaction-panel[hidden], .sale-confirm[hidden] { display: none; }
.interaction-panel strong, .sale-confirm strong { font-size: 18px; }
.interaction-panel p, .sale-confirm p { line-height: 1.6; }
#interaction-actions { display: flex; gap: 8px; }
.interaction-action { flex: 1; border: 0; border-radius: 12px; padding: 14px 6px; background: #3f6a86; color: #fff; font: 700 15px "Malgun Gothic",sans-serif; cursor: var(--cur-pointer); }
.sale-confirm { bottom: auto; top: 50%; transform: translate(-50%, -50%); z-index: 50; }
/* ===== 월드 안내 팝업(공통 시스템 팝업: "안이아빠의 한마디") =====
   그림: public/img/ui/notice/ (제작 규격 prompts/world-notice-assets.md). 카드·리본·버튼은 9칸 나누기(border-image)로 늘린다.
   위에서부터: 안이아빠 얼굴 배지 → 제목 리본 → 주제 아이콘(선택) → 내용(
으로 줄바꿈) → 확인 버튼. */
.world-notice {
  position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 64px 16px 16px;
  background: radial-gradient(circle at 50% 45%, #fff3d033 0%, #4a371f66 100%); backdrop-filter: blur(2px);
  font-family: "Jua", "Malgun Gothic", sans-serif; color: #5b3b1d;
  animation: notice-fade .18s ease;
}
.world-notice[hidden] { display: none; }
.notice-card, .salon-card {
  position: relative; width: min(340px, 100%); padding: 0 0 4px; text-align: center;
  border: solid transparent; border-width: 55px; background: none;
  border-image: url("../public/img/ui/notice/notice_card.webp") 110 fill / 55px stretch;
  filter: drop-shadow(0 14px 18px #3a260c55);
  animation: notice-pop .34s cubic-bezier(.2, 1.5, .4, 1);
}
.notice-card > *, .salon-card > * { position: relative; }
.notice-dad { position: absolute; left: 50%; top: -107px; width: 112px; height: 112px; transform: translateX(-50%); filter: drop-shadow(0 4px 3px #4a2f0a44); }
.notice-ribbon {
  margin: 26px -52px 8px; height: 58px; display: flex; align-items: center; justify-content: center; padding: 0 6px 5px;
  border-style: solid; border-width: 0 57px; border-image: url("../public/img/ui/notice/notice_ribbon.webp") 0 190 0 190 fill / 0 57px stretch;
}
.notice-ribbon strong { font-size: 22px; font-weight: 400; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 #23806a, 0 0 6px #23806a88; white-space: nowrap; }
.notice-icon { display: block; width: 64px; height: 64px; margin: 4px auto 0; filter: drop-shadow(0 3px 2px #4a2f0a33); }
.notice-icon[hidden] { display: none; }
#world-notice-message { margin: 8px 0 14px; font-size: 18px; line-height: 1.55; white-space: pre-line; word-break: keep-all; color: #5b3b1d; }
.notice-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 200px; height: 60px; margin: 0 auto -6px; padding: 0 0 6px; cursor: var(--cur-pointer);
  border: solid transparent; border-width: 0 28px; background: none; border-image: url("../public/img/ui/notice/notice_button.webp") 0 80 0 80 fill / 0 28px stretch;
  color: #6a4208; font: 400 20px "Jua", "Malgun Gothic", sans-serif; text-shadow: 0 1px 0 #fff3b5;
  transition: transform .08s ease;
}
.notice-btn img { width: 26px; height: 26px; flex: none; }
.notice-btn:hover { filter: brightness(1.04); }
.notice-btn:active { transform: translateY(3px); }
.notice-btn:focus-visible { outline: 3px solid #5fcfae; outline-offset: 4px; border-radius: 999px; }
@keyframes notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes notice-pop { 0% { transform: translateY(18px) scale(.82); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .world-notice, .notice-card { animation: none; } }
/* 공지 게시판 오버레이: 안내 팝업 틀(.world-notice·.notice-card)을 그대로 쓰고 목록·본문만 더한다 */
.board-card { width: min(420px, 100%); }
/* 공지 게시판 카드: 리본을 조금 위로, 제목 글자를 리본 한가운데로, 버튼을 조금 아래로 내려 가운데 목록 자리를 넓힌다 */
.board-card .notice-ribbon { margin-top: 10px; margin-bottom: 4px; padding-bottom: 0; }
.board-card .notice-ribbon strong { position: relative; top: 1px; line-height: 1; }
.board-card .board-actions { margin-bottom: -12px; }
.board-list, .board-detail { margin: 6px 0 12px; max-height: min(50vh, 400px); max-height: min(50dvh, 400px); overflow-y: auto; text-align: left; overscroll-behavior: contain; }
.board-list[hidden], .board-detail[hidden] { display: none; }
/* 게시판 스크롤: 나무판에 금 손잡이 */
.board-list, .board-detail { padding-right: 8px; }
@supports not selector(::-webkit-scrollbar) { .board-list, .board-detail { scrollbar-width: thin; scrollbar-color: #e0a830 #f6e6bd; } }   /* 크롬·사파리는 아래 ::-webkit-scrollbar 모양, 파이어폭스는 단색 */
.board-list::-webkit-scrollbar, .board-detail::-webkit-scrollbar { width: 14px; }
.board-list::-webkit-scrollbar-track, .board-detail::-webkit-scrollbar-track { margin: 6px 0; border: 2px solid #e6cf9c; border-radius: 999px; background: #f6e6bd; box-shadow: inset 0 2px 3px #c9a45a55; }
.board-list::-webkit-scrollbar-thumb, .board-detail::-webkit-scrollbar-thumb { border: 2px solid #a8691a; border-radius: 999px; background: linear-gradient(90deg, #ffe07a, #f0b53a 55%, #d9962a); box-shadow: inset 0 1px 0 #fff6c8; }
.board-list::-webkit-scrollbar-thumb:hover, .board-detail::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #fff0a0, #ffc94d 55%, #e8a431); }
.board-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; margin: 0 0 6px; padding: 6px 12px; border: 2px solid #e6c98a; border-radius: 14px; background: #fff8e1; color: #5b3b1d; font: 400 18px/1.3 "Jua", "Malgun Gothic", sans-serif; text-align: left; cursor: var(--cur-pointer); }
.board-row:hover { background: #fff1c4; }
.board-row.is-read { background: #f4ecd9; border-color: #e3d6b8; color: #8a7556; }
.board-row:focus-visible { outline: 3px solid #5fcfae; outline-offset: 2px; }
.board-mark { flex: none; width: 54px; display: grid; place-items: center; color: #4a9a63; font-size: 22px; font-weight: 700; }
.board-mark img { display: block; width: 54px; height: auto; }
.board-text { display: grid; gap: 2px; min-width: 0; }
.board-text strong { font-weight: 400; overflow-wrap: anywhere; word-break: keep-all; }
.board-text small { color: #9a8560; font: 400 13px "Malgun Gothic", sans-serif; }
.board-empty { margin: 18px 0; text-align: center; color: #8a7556; font-size: 18px; }
.board-detail { padding: 4px 6px; }
.board-detail h3 { margin: 4px 0 2px; font: 400 22px/1.35 "Jua", "Malgun Gothic", sans-serif; overflow-wrap: anywhere; word-break: keep-all; }
.board-detail time { display: block; margin-bottom: 10px; color: #9a8560; font: 400 13px "Malgun Gothic", sans-serif; }
.board-detail p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.65; }
/* 아래에 더 있다는 안내: 스크롤 영역 맨 아래에 붙는 높이 0 띠 위로 단추가 뜬다 */
.board-more { position: sticky; bottom: 0; height: 0; overflow: visible; pointer-events: none; }
.board-more button { position: absolute; left: 50%; bottom: 4px; transform: translate(-50%, 8px); padding: 5px 14px; border: 2px solid #a8691a; border-radius: 999px; background: linear-gradient(#ffe07a, #f0b53a); color: #5b3b1d; font: 400 15px "Jua", "Malgun Gothic", sans-serif; box-shadow: 0 3px 6px #4a2f0a55; opacity: 0; transition: opacity .2s, transform .2s; cursor: var(--cur-pointer); white-space: nowrap; }
.board-more.is-on button { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: board-more-bob 1.2s ease-in-out infinite; }
@keyframes board-more-bob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 4px; } }
@media (prefers-reduced-motion: reduce) { .board-more.is-on button { animation: none; } }
.board-actions { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.board-actions .notice-btn { width: 160px; margin-bottom: -6px; }
.board-actions .notice-btn[hidden] { display: none; }
.shop-tabs { margin: 14px 0; }
.clothing-shop-panel { width: min(540px, calc(100% - 24px)); }
.wd-item-name { font: 700 11px/1.4 "Malgun Gothic", sans-serif; margin-top: 5px; }
.wd-item-badge { position: absolute; top: 5px; right: 5px; padding: 2px 5px; border-radius: 6px; background: #709975; color: white; font-size: 9px; }
.wd-remove { font: 700 12px "Malgun Gothic", sans-serif; background: #f1eadd; border-style: dashed; }
.wd-inventory-help { font-size: 12px; line-height: 1.5; margin: 12px 0; color: #85775e; }

/* 잭팟 화면 흔들림 */
.jackpot-flash { animation: jflash 0.6s ease 3; }
@keyframes jflash { 50% { background: var(--accent); } }

.hidden { display: none !important; }

/* ?debug 배치 편집 패널: 종류 고르기·추가 / 선택·삭제 / 저장(서버를 실행한 PC에서만 저장된다) */
.world-debug-panel {
  position: absolute; z-index: 20000; left: 12px; top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: calc(100% - 24px); padding: 8px 10px; border-radius: 14px; background: #1f2a33e6; color: #fff;
  font: 600 13px/1.2 "Malgun Gothic", sans-serif; box-shadow: 0 4px 12px #0005;
}
.world-debug-panel[hidden] { display: none; }
.world-debug-panel select, .world-debug-panel button { font: inherit; padding: 6px 10px; border: 0; border-radius: 8px; }
.world-debug-panel button { background: #e9eef2; color: #1f2a33; cursor: var(--cur-pointer); }
.world-debug-panel button:disabled { opacity: .45; cursor: var(--cur-denied); }
.world-debug-panel .world-debug-save { background: #ff7a00; color: #fff; }
.world-debug-selected { min-width: 9em; color: #ffe14d; }
.world-debug-picker { position: relative; }
.world-debug-pick, .world-debug-pickrow { display: flex; align-items: center; gap: 8px; text-align: left; }
.world-debug-pick img, .world-debug-pickrow img { width: 28px; height: 28px; object-fit: contain; flex: none; background: #ffffffaa; border-radius: 5px; }
.world-debug-pick { min-width: 170px; }
.world-debug-caret { margin-left: auto; opacity: .6; }
.world-debug-picklist { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: max-content; min-width: 100%; max-height: min(60vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #1f2a33f2; border-radius: 10px; box-shadow: 0 6px 18px #0006; }
.world-debug-picklist[hidden] { display: none; }
.world-debug-pickrow { width: 100%; padding: 4px 10px 4px 6px; }
.world-debug-pickrow:hover { background: #fff; }
.world-debug-pickrow[hidden] { display: none; }
.world-debug-chips { position: sticky; top: -6px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 6px; margin-top: -6px; background: #1f2a33; max-width: 340px; }
.world-debug-chip { padding: 3px 8px; border-radius: 999px; font-size: 12px; background: #ffffff33; color: #fff; border: 0; cursor: pointer; }
.world-debug-chip.is-on { background: #ffd34d; color: #222; font-weight: 700; }

/* ===== 관리자 테스트 ===== */
.admin-test-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }   /* 한 줄에 버튼 하나씩 */
.admin-test-actions .big-btn { width: 100%; }

/* ===== 트리움 (english-screen.js) — 칠판 교실 =====
   칠판(분필 글씨) 위에 테이프로 붙인 종이 단어 카드, 단원은 나무 책장의 책등.
   한글 안내는 Jua, 영어 단어는 아이 읽기용 글꼴 Andika(손으로 쓰는 a·g 모양). 인터넷이 없으면 기본 글꼴. */
.english-screen {
  --en-board: #2F5D50; --en-board-dark: #234A3F; --en-wood: #A8693A; --en-wood-dark: #7A4A26;
  --en-chalk: #F7F4E8; --en-crayon: #FFC93C; --en-crayon-dark: #D99A0E;
  --en-ok: #5BC46E; --en-no: #FF7A6B; --en-paper: #FFFDF6; --en-ink: #2B3A35;
  --en-ko: "Jua", "Malgun Gothic", sans-serif; --en-en: "Andika", "Segoe UI", sans-serif;
  --en-star: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  font-family: var(--en-ko); padding: 0 0 24px;
}
body.english-wide #app { max-width: none; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
body.english-wide { background: #D9C3A0 url("../public/img/english/classroom.png") center / cover fixed; }

/* 머리: 나무 선반 */
.english-header {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: repeating-linear-gradient(90deg, #ffffff08 0 3px, transparent 3px 11px), linear-gradient(var(--en-wood), var(--en-wood-dark));
  box-shadow: 0 4px 0 #5E3819, 0 8px 18px #0003; color: var(--en-chalk);
}
.english-header .icon-btn { background: #ffffff22; color: var(--en-chalk); box-shadow: none; }
.english-title { flex: 1; font-size: 1.5rem; letter-spacing: .02em; text-shadow: 0 2px 0 #5E3819; }
.english-today { display: flex; flex-direction: column; gap: 4px; min-width: 92px; font-size: .85rem; }
.en-meter-bar { display: block; height: 8px; border-radius: 999px; background: #0003; overflow: hidden; }
.en-meter-bar i { display: block; height: 100%; background: var(--en-crayon); border-radius: inherit; }

.english-body { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 14px 0; width: 100%; max-width: 980px; margin: 0 auto; box-sizing: border-box; }
.en-test-note { margin: 0 0 -8px; padding: 6px 14px; border-radius: 999px; background: #FFF3CD; color: #7A5A00; font-size: .85rem; }

/* 칠판: 나무 틀 + 분필 번짐 + 분필 받침 */
.en-board {
  position: relative; width: 100%; box-sizing: border-box; min-height: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 22px 48px;
  border: 14px solid var(--en-wood); border-radius: 14px;
  background:
    radial-gradient(ellipse at 22% 18%, #ffffff12, transparent 45%),
    radial-gradient(ellipse at 78% 70%, #ffffff0d, transparent 50%),
    url("../public/img/english/ui/chalkboard.png") center / 512px,
    linear-gradient(160deg, var(--en-board), var(--en-board-dark));
  box-shadow: inset 0 0 0 3px #00000033, inset 0 0 40px #00000055, 0 10px 0 var(--en-wood-dark), 0 18px 30px #0004;
  color: var(--en-chalk);
}
.en-board::after {   /* 분필 받침과 분필 두 자루 */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 12px; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, transparent 12%, var(--en-chalk) 12% 17%, transparent 17% 21%, var(--en-crayon) 21% 25%, transparent 25%), var(--en-wood-dark);
}
.en-chalk-line { margin: 0; font-size: 1.45rem; line-height: 1.35; color: var(--en-chalk); text-shadow: 0 0 1px #fff8, 0 1px 0 #0002; }
.en-chalk-small { margin: 0; font-size: 1.05rem; color: #F7F4E8cc; }

/* 부엉이 선생님 */
.en-teacher { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 640px; }
.en-teacher img { width: 120px; height: auto; flex: none; filter: drop-shadow(0 6px 0 #0003); }
.en-teacher-emoji { font-size: 84px; line-height: 1; flex: none; }
.en-teacher .en-chalk-line { flex: 1; padding: 12px 18px; border: 3px dashed #F7F4E866; border-radius: 22px; }

/* 크레용 버튼(주요 행동) / 분필 버튼(보조) */
.en-crayon-btn {
  font: inherit; font-size: 1.35rem; color: #4A3200; cursor: var(--cur-pointer); border: 0;
  padding: 14px 30px; border-radius: 18px 22px 16px 24px;   /* 손으로 칠한 듯 살짝 고르지 않게 */
  background: var(--en-crayon); box-shadow: 0 6px 0 var(--en-crayon-dark);
  transition: transform .08s, box-shadow .08s;
}
.en-crayon-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--en-crayon-dark); }
.en-chalk-btn { font: inherit; font-size: 1.15rem; color: var(--en-chalk); background: none; cursor: var(--cur-pointer); padding: 12px 22px; border: 3px solid #F7F4E8aa; border-radius: 16px; }
.en-start { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 44px; }
.en-start-main { font-size: 1.7rem; }
.en-start-sub { font-size: 1rem; opacity: .75; }
.en-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.en-round-btn, .en-speaker {
  display: grid; place-items: center; border: 0; cursor: var(--cur-pointer); color: #4A3200; padding: 0;
  border-radius: 50%; background: var(--en-crayon); box-shadow: 0 6px 0 var(--en-crayon-dark);
}
.en-round-btn { width: 64px; height: 64px; }
.en-speaker { width: 124px; height: 124px; }
.en-round-btn:active, .en-speaker:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--en-crayon-dark); }
.en-speaker-icon { display: block; width: 52%; }
.en-speaker-icon svg { display: block; width: 100%; height: auto; }
.english-screen :focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

/* 책장: 단원 = 책등. 아래 막대 = 익힌 비율 */
.en-shelf { width: 100%; padding: 0 10px; box-sizing: border-box; border-bottom: 16px solid var(--en-wood); border-radius: 0 0 6px 6px; box-shadow: 0 6px 0 var(--en-wood-dark); }
.en-books {
  display: flex; justify-content: safe center; align-items: flex-end; gap: 8px; overflow-x: auto; padding: 22px 12px 0;
  scroll-snap-type: x proximity; scroll-padding: 0 12px; overscroll-behavior-x: contain;
  scrollbar-width: none;   /* 회색 브라우저 스크롤 막대 대신 양 끝 나무 손잡이(english-screen.js fillShelf) */
}
.en-books::-webkit-scrollbar { display: none; }
.en-book { scroll-snap-align: center; }
/* 더 있는 쪽 끝을 흐리게 */
.en-books.has-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px); mask-image: linear-gradient(90deg, transparent 0, #000 36px); }
.en-books.has-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%); }
.en-books.has-left.has-right {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.en-shelf-row { position: relative; }
/* 트리움 화면의 페이지 스크롤 막대(PC에서 세로로 긴 레슨)도 나무색으로 가늘게 */
html:has(body.english-wide) { scrollbar-width: thin; scrollbar-color: #A8693A #00000018; }
html:has(body.english-wide)::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(body.english-wide)::-webkit-scrollbar-track { background: #00000014; }
html:has(body.english-wide)::-webkit-scrollbar-thumb { background: #A8693A; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.en-shelf-arrow {   /* 나무 손잡이 */
  position: absolute; z-index: 2; top: calc(50% + 8px); translate: 0 -50%; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: var(--cur-pointer); font-size: 1rem; color: var(--en-chalk);
  background: radial-gradient(circle at 35% 30%, #C98A55, var(--en-wood) 55%, var(--en-wood-dark));
  box-shadow: 0 3px 0 #5E3819, 0 6px 10px #0004, inset 0 0 0 2px #ffffff22;
}
.en-shelf-arrow[hidden] { display: none; }
.en-shelf-arrow:active { translate: 0 calc(-50% + 2px); box-shadow: 0 1px 0 #5E3819, inset 0 0 0 2px #ffffff22; }
.en-shelf-arrow.is-prev { left: -6px; }
.en-shelf-arrow.is-next { right: -6px; }
.en-book {
  position: relative; flex: none; width: 92px; height: 150px; padding: 12px 8px 18px; box-sizing: border-box; cursor: var(--cur-pointer);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  font: inherit; color: #fff; border: 0; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(90deg, #0002 0 6%, transparent 6% 94%, #0002 94%), var(--book);
  box-shadow: inset 0 -6px 0 #0002;
}
.en-book:nth-child(3n+2) { height: 138px; }
.en-book:nth-child(3n) { height: 160px; }
.en-book.is-next { outline: 4px solid var(--en-crayon); outline-offset: 3px; }
.en-book-title { font-size: 1.05rem; line-height: 1.2; text-align: center; word-break: keep-all; text-shadow: 0 1px 0 #0003; }
.en-book-count { font-size: .9rem; opacity: .9; }
.en-book-progress { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 7px; border-radius: 4px; background: #0003; overflow: hidden; }
.en-book-progress::after { content: ""; display: block; width: var(--fill); height: 100%; background: #fff; }
.en-book-sticker { position: absolute; top: -14px; right: -10px; width: 40px; height: 40px; object-fit: contain; }
.en-sticker { display: block; width: 40px; height: 40px; background: var(--en-crayon); clip-path: var(--en-star); }
.en-sticker-crown { background: #FFB300; clip-path: polygon(0 30%, 25% 55%, 50% 10%, 75% 55%, 100% 30%, 90% 90%, 10% 90%); }

/* 진행: 분필 별 */
.en-stars { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.en-star { width: 26px; height: 26px; background: #F7F4E840; clip-path: var(--en-star); }
.en-star.is-done { background: var(--en-crayon); }

/* 종이 단어 카드: 테이프로 붙인 플래시 카드 */
.en-card {
  position: relative; display: grid; place-items: center; width: 150px; height: 150px; box-sizing: border-box;
  background: var(--en-paper); border-radius: 6px; padding: 12px; color: var(--en-ink);
  box-shadow: 0 3px 0 #0000001f, 0 10px 18px #0000003a;
}
.en-card::before {   /* 마스킹 테이프 */
  content: ""; position: absolute; top: -10px; left: 50%; width: 46%; height: 20px; transform: translateX(-50%) rotate(-3deg);
  background: #FFE49Acc; box-shadow: 0 1px 2px #0002;
}
.en-card-face { display: grid; place-items: center; width: 100%; height: 100%; }
.en-card img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.en-card-meaning { font-family: var(--en-ko); font-size: 1.8rem; line-height: 1.15; text-align: center; word-break: keep-all; color: var(--en-ink); }
.en-card-big { width: 230px; height: 230px; transform: rotate(-2deg); }
.en-card-big .en-card-meaning { font-size: 2.6rem; }
.en-card-prompt { width: 190px; height: 190px; transform: rotate(1.5deg); }
.en-card-prompt .en-card-meaning { font-size: 2.2rem; }
.en-card-mini { width: 82px; height: 82px; padding: 6px; }
.en-card-mini::before { height: 12px; top: -6px; }
.en-card-mini .en-card-meaning { font-size: 1rem; }
.is-tappable { cursor: var(--cur-pointer); }

/* 영어 단어 */
.en-word { margin: 0; font-family: var(--en-en); font-weight: 700; font-size: 3rem; line-height: 1.1; }
.en-word-chalk { font-size: 4.2rem; color: var(--en-chalk); text-shadow: 0 0 1px #fff, 0 2px 0 #0003; }
.en-meet { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.en-meet-words { display: flex; flex-direction: column; gap: 8px; }
.en-meet .en-word { font-size: 4rem; color: var(--en-chalk); }
.en-prompt { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* 보기 */
.en-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 20px; width: 100%; }
.en-choice { position: relative; padding: 0; border: 0; background: none; cursor: var(--cur-pointer); font: inherit; }
.en-choice:nth-child(odd) .en-card { rotate: -1.5deg; }
.en-choice:nth-child(even) .en-card { rotate: 1.5deg; }
.en-choice:not(:disabled):active .en-card { translate: 0 3px; }
.en-choices.is-words { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; gap: 22px 18px; }
.en-word-card { width: 100%; height: auto; min-height: 88px; padding: 16px 20px; }
.en-word-card .en-word { font-size: 2.4rem; }
.en-choice.is-correct .en-card { outline: 6px solid var(--en-ok); animation: en-pop .35s ease-out; }
.en-choice.is-correct::after {   /* 정답 동그라미 */
  content: ""; position: absolute; right: -12px; top: -16px; width: 46px; height: 46px; border-radius: 50%; box-sizing: border-box;
  border: 7px solid var(--en-ok); background: #ffffffcc; animation: en-pop .35s ease-out;
}
.en-choice.is-wrong .en-card { filter: grayscale(.8) brightness(.8); animation: en-wobble .35s; }
.en-choice.is-wrong::after {   /* 분필 X */
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 6rem/1 sans-serif; color: var(--en-no); text-shadow: 0 3px 0 #0004;
}
.en-choice.is-reveal .en-card { outline: 6px dashed var(--en-crayon); animation: en-nudge 1s ease-in-out infinite; }
.en-choice:disabled:not(.is-correct):not(.is-reveal):not(.is-wrong) { opacity: .55; cursor: var(--cur-denied); }
.en-help { min-height: 1.4em; }

/* 결과: 코인 + "참 잘했어요" 도장 (이 화면의 한 번뿐인 큰 연출) */
.en-board.is-home { min-height: 0; padding-bottom: 40px; }
.en-prize { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 124px 10px 10px; }
.en-coin, .en-prize-coin { width: 76px; height: 76px; flex: none; object-fit: contain; }
.en-coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF2B0, #FFC93C 45%, #D99A0E); box-shadow: inset 0 0 0 6px #E8AE1E, 0 5px 0 #A87400; }
.en-prize-count { font-family: var(--en-en); font-size: 4.4rem; line-height: 1; color: var(--en-crayon); text-shadow: 0 4px 0 #0004; }
.en-stamp {
  position: absolute; right: 0; top: -20px; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  border: 5px solid #E0362C; color: #E0362C; font-size: 1.2rem; line-height: 1.15; text-align: center; padding: 12px; box-sizing: border-box; white-space: pre-line;
  background: #ffffffe6; transform: rotate(-14deg); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #E0362C55;
  animation: en-stamp .45s cubic-bezier(.2, 1.4, .4, 1) .55s both;
}
.en-bonus { margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--en-crayon); color: #4A3200; font-size: 1.1rem; }
.en-learned { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 12px; padding-top: 6px; }

@keyframes en-pop { 0% { scale: .85; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes en-wobble { 0%, 100% { translate: 0; } 25% { translate: -7px; } 75% { translate: 7px; } }
@keyframes en-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes en-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .english-screen *, .english-screen *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 560px) {
  .english-header { gap: 8px; padding: 8px 10px; }
  .english-title { font-size: 1.15rem; }
  .english-today { min-width: 70px; }
  .en-board { border-width: 10px; padding: 20px 12px 40px; min-height: 0; }
  .en-teacher img { width: 84px; }
  .en-teacher-emoji { font-size: 64px; }
  .en-chalk-line { font-size: 1.2rem; }
  .en-card { width: 112px; height: 112px; }
  .en-card-meaning { font-size: 1.35rem; }
  .en-card-big { width: 180px; height: 180px; }
  .en-meet .en-word { font-size: 3rem; }
  .en-word-chalk { font-size: 3.2rem; }
  .en-speaker { width: 104px; height: 104px; }
  .en-choices { gap: 20px 12px; }
  .en-choices.is-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .en-word-card { width: 100%; height: auto; min-height: 76px; padding: 12px 10px; }
  .en-word-card .en-word { font-size: 1.8rem; }
  .en-stars { gap: 3px; }
  .en-star { width: 21px; height: 21px; }
  .en-prize { padding-right: 96px; }
  .en-stamp { width: 88px; height: 88px; font-size: 1rem; }
  .en-prize-count { font-size: 3.4rem; }
}
.en-board { overflow: visible; }
.en-owl-mini { position: absolute; right: 18px; bottom: 18px; width: 92px; height: auto; pointer-events: none; filter: drop-shadow(0 4px 0 #0003); }
@media (max-width: 560px) { .en-owl-mini { width: 60px; right: 8px; bottom: 12px; } }

/* ===== 트리움 학교 홈 (english-screen.js school) — 2층 학교 정면, 창마다 교실 + 아래 부엉이 대화 상자 =====
   설계: docs/english-school-home.md. 창 자리는 config.english.schoolFront.slots(정면 상자 안 % 좌표).
   정면 그림이 없으면(.is-css) 지붕 그림 + CSS 벽돌 벽·모서리돌·층 띠·현관, 있으면(.has-image) 그 그림이 벽·창틀이 된다.
   쌓는 순서(정면 상자 안): 벽·지붕(0) < 유리(1) < 정면 그림(2) < 아이콘·이름판·스티커(3).
   열린 교실 = 노란 불빛 유리, 잠긴 교실 = 어두운 유리 + 자물쇠, 공사 중 = 나무판자로 막은 창. */
.english-screen {
  --en-brick: #CF6B43; --en-trim: #F6EAD0; --en-trim-dark: #E2CB9C; --en-roof: #4E8B5A;
  --en-light: #FFF1BF; --en-light-2: #FFC94A; --en-dark-window: #2E3A59;
}
body.english-wide.en-outside {
  background: url("../public/img/english/home/school_outside_bg.webp") center bottom / cover fixed, linear-gradient(#8ECDF2, #FFF4DC 70%, #9ED36A 70%) fixed;
}
@media (orientation: portrait) {
  body.english-wide.en-outside { background-image: url("../public/img/english/home/school_outside_bg_portrait.webp"), linear-gradient(#8ECDF2, #FFF4DC 78%, #9ED36A 78%); }
}
/* 학교 홈은 실제로 보이는 높이(--app-h: 아이폰 홈 화면 앱, 그 밖에는 100dvh)에 딱 맞춘다 — 스크롤 없음.
   화면 = 머리띠 + 본문(남은 높이) → 본문 = 안내 + 건물 칸(남은 높이, 크기 컨테이너) + 대화 상자.
   is-school: 학교 홈일 때 english-screen.js place()가 붙인다 */
.english-screen.is-school { flex: none; height: calc(100vh - env(safe-area-inset-top, 0px)); height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top, 0px)); min-height: 0; padding-bottom: 0; overflow: hidden; }
.english-screen.is-school #english-body { flex: 1; min-height: 0; padding-top: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.english-today.is-full .en-meter-bar i { background: #FFB300; }

.en-school {
  flex: 1; min-height: 0; width: 100%; display: grid; gap: 10px; justify-items: center;
  grid-template: "note" auto "front" minmax(0, 1fr) "owl" auto / minmax(0, 1fr);
}
.en-school > .en-test-note { grid-area: note; margin: 0; text-align: center; }

/* 건물 칸: 남은 폭·높이를 그대로 받는 크기 컨테이너. 정면은 그 안에서 폭·높이 중 작은 쪽에 맞추고 비율(aspect)은 고정 */
.en-front-box { grid-area: front; align-self: end; justify-self: stretch; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.en-front {
  position: relative; isolation: isolate; container-type: inline-size; flex: none;
  width: min(100%, 420px);   /* 처음 값. 실제 폭은 english-screen.js fitFront()가 남은 높이를 재서 정한다(최소 160px) */
  min-width: min(160px, 100%);
  margin-bottom: 12px;
}
.en-front::after {   /* 건물 밑 잔디 그림자 */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -8px; height: 16px; border-radius: 50%; background: #5E9A40aa; filter: blur(2px);
}
.en-front > * { position: absolute; box-sizing: border-box; }
.en-front-image { z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.en-front-roof { z-index: 0; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.en-roof-css { z-index: 0; left: 0; top: 4%; width: 100%; height: 20%; background: var(--en-roof); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.en-front-walls {   /* 벽돌 벽 + 양옆 크림 모서리돌 */
  z-index: 0;
  background:
    repeating-linear-gradient(180deg, var(--en-trim) 0 7cqw, var(--en-trim-dark) 7cqw 7.6cqw, #FBF2DF 7.6cqw 14.6cqw, var(--en-trim-dark) 14.6cqw 15.2cqw) left top / 5cqw 100% no-repeat,
    repeating-linear-gradient(180deg, #FBF2DF 0 7cqw, var(--en-trim-dark) 7cqw 7.6cqw, var(--en-trim) 7.6cqw 14.6cqw, var(--en-trim-dark) 14.6cqw 15.2cqw) right top / 5cqw 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M0 .5H32M0 8.5H32M16 .5V8.5M8 8.5V16M24 8.5V16' fill='none' stroke='%23A04A2A' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 32px 16px,
    var(--en-brick);
  box-shadow: inset 0 -6px 0 #00000014;
}
.en-front-band { z-index: 0; background: var(--en-trim); box-shadow: 0 2px 0 var(--en-trim-dark); }
.en-front-door {   /* 나무 현관문(아치) + 문틀 */
  z-index: 0; border: 1.4cqw solid var(--en-trim); border-bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: linear-gradient(90deg, #8A5229 0 49%, #6E3F1E 49% 51%, #8A5229 51%);
  box-shadow: inset 0 0 0 2px #0002;
}

/* 교실 = 창. 버튼은 위치만 잡고(쌓임 맥락 없음) 유리·아이콘·이름판이 각자 층을 가진다 */
.en-room { position: absolute; padding: 0; border: 0; background: none; font: inherit; color: var(--en-ink); cursor: var(--cur-pointer); }
.en-glass {
  position: absolute; z-index: 1; inset: 0; box-sizing: border-box;
  border-radius: 50% 50% 6% 6% / var(--arch, 50%) var(--arch, 50%) 6% 6%;
  background: linear-gradient(var(--en-light), var(--en-light-2));
  box-shadow: inset 0 0 0 2px #00000018;
}
.en-front.is-css .en-glass { border: 1.4cqw solid var(--en-trim); box-shadow: inset 0 0 0 2px #00000018, 0 0.8cqw 0 #9E4A2B; }
.en-room:active .en-glass { filter: brightness(.94); }
.en-room-icon { position: absolute; z-index: 3; left: 50%; top: 56%; width: 64%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.en-room-icon > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.en-room-emoji { font-size: 9cqw; line-height: 1; }
.en-plaque {
  position: absolute; z-index: 3; left: 50%; top: calc(100% + 1cqw); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px; width: max-content; max-width: calc(100% + 4cqw); text-align: center;   /* 좁은 정면에서는 창 폭 안에서 두 줄 */
  padding: .4cqw 2cqw; border-radius: 1.6cqw; background: var(--en-paper); box-shadow: 0 .6cqw 0 #0003;
  font-size: .8rem; font-size: clamp(.66rem, 3.9cqw, 1.2rem); line-height: 1.2;
}
.en-room-name { word-break: keep-all; }
.en-room-meta { display: flex; align-items: center; gap: 4px 6px; font-size: .78em; line-height: 1.1; }
.en-room-crown { display: inline-flex; align-items: center; gap: 2px; }
.en-room-crown img, .en-room-crown .en-sticker { width: 1.3em; height: 1.3em; }
.en-room-ribbon { padding: 0 8px; border-radius: 999px; background: var(--en-no); color: #fff; font-size: .78em; }
.en-room-due {
  position: absolute; z-index: 3; top: -2cqw; right: -2cqw; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 999px; background: var(--en-no); color: #fff; font-size: .85rem; box-shadow: 0 2px 0 #0003;
}
.en-room-new { position: absolute; top: -26%; right: -30%; width: 46%; height: 46%; animation: en-twinkle 1.6s ease-in-out infinite; }
.en-room-lock { position: absolute; right: -14%; bottom: -10%; width: 46%; height: 46%; }
.en-room-lock.is-preview { width: 32%; height: 32%; opacity: .8; }
.en-room-lock-emoji { position: absolute; right: -10%; bottom: -8%; font-size: 6cqw; line-height: 1; }
.en-room.is-mastered .en-glass { box-shadow: inset 0 0 0 .8cqw #FFB300aa; }

/* 잠김: 불 꺼진 창 */
.en-room.is-locked .en-glass { background: linear-gradient(#3B4A70, #26314D); }
.en-room.is-locked .en-room-icon > img:first-child, .en-room.is-locked .en-room-emoji { filter: grayscale(1) brightness(.6); }
.en-room.is-locked .en-room-cond { color: #6B5A3A; }
.en-room.is-shake .en-room-lock, .en-room.is-shake .en-room-lock-emoji { animation: en-wobble .35s; }
.en-room.is-shake .en-plaque { box-shadow: 0 0 0 3px var(--en-crayon), 0 .6cqw 0 #0003; }
/* 공사 중: 나무판자로 막은 창 */
.en-room.is-building .en-glass {   /* 판자 그림(없으면 CSS 줄무늬 판자) */
  background: url("../public/img/english/home/window_boarded.webp") center / 100% 100% no-repeat, repeating-linear-gradient(-14deg, #A8693A 0 3.4cqw, #8A5229 3.4cqw 4cqw);
}
.en-room.is-building .en-room-icon > img:first-child, .en-room.is-building .en-room-emoji { opacity: .35; filter: grayscale(1); }
.en-room.is-building .en-plaque { color: #6B5A3A; }
/* 방금 열림: 어두운 창에 불이 켜지고 자물쇠가 떨어진다 */
.en-room.is-lighting .en-glass { animation: en-light-on .8s ease-out both; }
.en-room.is-lighting .en-room-lock { animation: en-lock-drop .6s ease-in .5s both; }

/* 부엉이 대화 상자: 종이 + 나무 테두리, 왼쪽에 서 있는 부엉이, 말과 [오늘의 레슨] */
.en-owl-talk {
  grid-area: owl; position: relative; box-sizing: border-box; width: min(100%, 460px); align-self: end;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 14px 12px 104px; border: 4px solid var(--en-wood); border-radius: 18px;
  background: var(--en-paper); box-shadow: 0 6px 0 var(--en-wood-dark), 0 10px 20px #0003; color: var(--en-ink);
}
.en-owl-side { position: absolute; left: 4px; bottom: 6px; width: 96px; height: auto; filter: drop-shadow(0 3px 0 #0002); }
span.en-owl-side { width: auto; font-size: 64px; line-height: 1; }
.en-owl-bubble { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.en-owl-talk .en-start { padding: 8px 22px; min-height: 44px; }
.en-owl-talk .en-start-main { font-size: 1.3rem; }
.en-owl-talk .en-start-sub { font-size: .9rem; }

/* 교실 칠판 왼쪽 위에 테이프로 붙인 교실 아이콘 */
.en-board-badge { position: absolute; top: -10px; left: 10px; width: 54px; height: 54px; object-fit: contain; rotate: -8deg; filter: drop-shadow(0 3px 0 #0003); }

@keyframes en-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.15; rotate: 12deg; } }
@keyframes en-light-on { from { filter: brightness(.35) saturate(.4); } to { filter: none; } }
@keyframes en-lock-drop { to { opacity: 0; translate: 0 30px; rotate: 25deg; } }

/* 가로 화면(휴대폰 가로·태블릿·PC): 건물 왼쪽, 대화 상자 오른쪽 아래. 폭이 아니라 방향으로 가른다(아이폰 SE 가로는 568px) */
@media (orientation: landscape) {
  .en-school { grid-template: "note note" auto "front owl" minmax(0, 1fr) / minmax(0, 1fr) minmax(220px, min(36%, 400px)); align-items: end; column-gap: 20px; }
  .en-front-box { justify-content: flex-end; }
  .en-owl-talk { width: 100%; margin-bottom: 16px; padding-left: 112px; }
  .en-owl-side { width: 104px; }
}
/* 휴대폰 가로(낮은 화면): 머리띠·대화 상자를 줄인다. 건물은 칸 높이에 맞춰 저절로 준다 */
@media (orientation: landscape) and (max-height: 500px) {
  .english-header { padding-block: 4px; }
  .english-header .icon-btn { width: 44px; height: 44px; font-size: 1.2rem; }   /* 누르기 최소 44px */
  .english-screen.is-school #english-body { padding-top: 6px; }
  .en-school { row-gap: 4px; }
  .en-school > .en-test-note { font-size: .75rem; padding: 3px 10px; }
  .en-front { margin-bottom: 10px; }
  .en-owl-talk { margin-bottom: 10px; padding: 8px 10px 8px 84px; gap: 6px; border-width: 3px; }
  .en-owl-side { width: 76px; }
  .en-owl-bubble { font-size: .95rem; line-height: 1.35; }
  .en-owl-talk .en-start { padding: 4px 16px; }
  .en-owl-talk .en-start-main { font-size: 1.1rem; }
  .en-owl-talk .en-start-sub { font-size: .8rem; }
}
/* 아주 낮은 가로(주소창이 있는 사파리 등, 높이 360 이하) */
@media (orientation: landscape) and (max-height: 360px) {
  .english-header { gap: 8px; }
  .english-title { font-size: 1.15rem; }
  .en-school > .en-test-note { display: none; }
  .en-owl-talk { padding-left: 70px; }
  .en-owl-side { width: 62px; }
  .en-owl-bubble { font-size: .88rem; }
}
@media (max-width: 560px) { .en-title-school { display: none; } }
/* ===== 트리움 교실·레슨: 휴대폰 가로(낮은 화면) =====
   세로로 쌓던 것을 옆으로 펼쳐 한 화면(높이 320~500px)에 들어오게 한다.
   칠판 종류 클래스(english-screen.js): is-home(교실) · is-meet(새 단어) · is-question(문제) · is-result(결과) */
@media (orientation: landscape) and (max-height: 500px) {
  .english-screen { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .english-body { gap: 8px; padding: 8px 10px 0; }
  .en-test-note { margin: 0; padding: 3px 10px; font-size: .75rem; }
  .en-board { min-height: 0; gap: 8px; padding: 10px 14px 20px; border-width: 8px; }
  .en-board::after { bottom: -8px; height: 8px; }
  .en-chalk-line { font-size: 1.1rem; }
  .en-chalk-small { font-size: .9rem; }
  .en-teacher { gap: 10px; }
  .en-teacher img { width: 64px; }
  .en-teacher-emoji { font-size: 52px; }
  .en-teacher .en-chalk-line { padding: 8px 12px; }
  .en-crayon-btn { font-size: 1.15rem; padding: 10px 22px; min-height: 44px; }
  .en-chalk-btn { font-size: 1rem; padding: 8px 16px; min-height: 44px; }
  .en-start { padding: 8px 28px; }
  .en-start-main { font-size: 1.3rem; }
  .en-start-sub { font-size: .85rem; }
  .en-round-btn { width: 52px; height: 52px; }
  .en-speaker { width: 84px; height: 84px; }
  .en-stars { gap: 3px; }
  .en-star { width: 18px; height: 18px; }
  .en-board-badge { width: 40px; height: 40px; top: -8px; left: 6px; }

  /* 교실: 부엉이 말과 [오늘의 레슨 시작]을 한 줄로, 책장은 낮은 책 */
  .en-board.is-home { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 18px; }
  .en-board.is-home .en-teacher { width: auto; flex: 1 1 280px; max-width: 460px; }
  .en-books { padding-top: 12px; gap: 6px; }
  .en-book { width: 74px; height: 90px; padding: 8px 6px 14px; }
  .en-book:nth-child(3n+2) { height: 82px; }
  .en-book:nth-child(3n) { height: 98px; }
  .en-book-title { font-size: .85rem; }
  .en-book-count { font-size: .75rem; }
  .en-book-sticker { width: 30px; height: 30px; top: -10px; right: -8px; }
  .en-shelf { border-bottom-width: 12px; }

  /* 새 단어: 카드와 단어·버튼을 옆으로 */
  .en-board.is-meet { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; }
  .en-board.is-meet > .en-chalk-small { width: 100%; text-align: center; }
  .en-meet { gap: 12px 24px; }
  .en-card-big { width: 150px; height: 150px; }
  .en-card-big .en-card-meaning { font-size: 1.9rem; }
  .en-meet .en-word { font-size: 2.6rem; }
  .en-board.is-meet .en-actions { flex-direction: column; gap: 10px; }

  /* 문제: 왼쪽 질문(별·안내·소리/단어/그림), 오른쪽 보기 */
  .en-board.is-question {
    display: grid; align-items: center; justify-items: center; gap: 6px 18px;
    grid-template: "stars stars" auto "prompt choices" 1fr "help help" auto / minmax(0, 36%) minmax(0, 1fr);
  }
  .en-board.is-question > .en-stars { grid-area: stars; }
  .en-board.is-question > .en-prompt { grid-area: prompt; gap: 8px; }
  .en-board.is-question > .en-choices { grid-area: choices; }
  .en-board.is-question > .en-help { grid-area: help; }
  .en-board.is-question .en-chalk-line { font-size: 1rem; text-align: center; }
  .en-word-chalk { font-size: 2.6rem; }
  .en-card-prompt { width: 120px; height: 120px; }
  .en-card-prompt .en-card-meaning { font-size: 1.5rem; }
  .en-choices { gap: 14px 12px; }
  .en-card { width: 96px; height: 96px; padding: 8px; }
  .en-card-meaning { font-size: 1.2rem; }
  .en-choices.is-words { grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
  .en-word-card { width: 100%; height: auto; min-height: 60px; padding: 10px; }
  .en-word-card .en-word { font-size: 1.7rem; }
  .en-choice.is-wrong::after { font-size: 4rem; }
  .en-owl-mini { width: 56px; right: 8px; bottom: 8px; }

  /* 결과: 부엉이 말과 코인을 한 줄에, 나머지는 아래로 */
  .en-board.is-result { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
  .en-board.is-result > * { width: 100%; text-align: center; }
  .en-board.is-result > .en-teacher { flex: 1 1 220px; width: auto; text-align: left; }
  .en-board.is-result > .en-prize { width: auto; }
  .en-board.is-result > .en-bonus { width: auto; }
  .en-prize { padding: 4px 96px 4px 4px; }
  .en-coin, .en-prize-coin { width: 56px; height: 56px; }
  .en-prize-count { font-size: 3rem; }
  .en-stamp { width: 80px; height: 80px; font-size: .95rem; }
  .en-card-mini { width: 58px; height: 58px; padding: 5px; }
  .en-learned { gap: 10px; padding-top: 2px; }
}
/* 아주 낮은 가로(높이 360 이하·폭 좁은 아이폰 SE 가로 568 등): 보기를 한 줄에, 교실 줄도 한 줄에 */
@media (orientation: landscape) and (max-height: 360px) {
  .english-body { gap: 6px; padding-top: 6px; }
  .en-board { padding: 8px 12px 16px; gap: 6px; }
  .en-board.is-home { flex-wrap: nowrap; column-gap: 12px; }
  .en-board.is-home .en-teacher { flex: 1 1 auto; }
  .en-teacher img { width: 52px; }
  .en-teacher .en-chalk-line { font-size: .95rem; padding: 6px 10px; }
  .en-start { padding: 6px 18px; }
  .en-start-main { font-size: 1.1rem; }
  .en-books { padding-top: 10px; }
  .en-book { height: 80px; } .en-book:nth-child(3n+2) { height: 74px; } .en-book:nth-child(3n) { height: 86px; }
  .en-board.is-question { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 4px 12px; }
  .en-speaker { width: 72px; height: 72px; }
  .en-choices { flex-wrap: nowrap; gap: 8px; }
  .en-card { width: 78px; height: 78px; padding: 6px; }
  .en-card-meaning { font-size: 1rem; }
  .en-card-prompt { width: 96px; height: 96px; }
  .en-word-card { min-height: 52px; } .en-word-card .en-word { font-size: 1.45rem; }
  .en-card-big { width: 124px; height: 124px; }
  .en-meet .en-word { font-size: 2.2rem; }
  .en-star { width: 14px; height: 14px; }
  .en-test-note { display: none; }   /* 관리자 미리보기 안내(아이 화면엔 없음)는 자리가 없어 숨김 */
  .en-card-mini { width: 52px; height: 52px; padding: 4px; }
  .en-prize-count { font-size: 2.4rem; } .en-coin, .en-prize-coin { width: 44px; height: 44px; }
  .en-stamp { width: 64px; height: 64px; font-size: .8rem; padding: 6px; } .en-prize { padding-right: 72px; }
}

/* ===== 트리움 철자 교실 (english-screen.js spellQuestion) — 칸 + 글자 타일 / abc 화면 키보드 =====
   설계: docs/english-school-v2-plan.md §4.1. 세로: 문제·칸 아래 키보드(7칸 줄, ⌫ 2칸, 아래 ✓ 확인 막대).
   가로: 칠판 두 칸(왼쪽 문제·칸, 오른쪽 키보드 10칸 줄) — 높이 320에서도 키 44px. */
.en-board.is-spell { gap: 10px; }
.en-spell-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.en-spell-media { display: flex; align-items: center; justify-content: center; gap: 14px; }
.en-spell-media .en-card-prompt { width: 120px; height: 120px; }
.en-spell-media .en-card-prompt .en-card-meaning { font-size: 1.5rem; }
.en-card-prompt.is-hidden { display: none; }   /* 받아쓰기: 맞힐 때까지 그림 없이 소리만 */
.en-spell-reveal { margin: 0; font-family: var(--en-en); font-weight: 700; font-size: 2.2rem; letter-spacing: .12em; color: var(--en-crayon); text-shadow: 0 2px 0 #0004; }
.en-spell-hint { padding: 6px 14px; font-size: .95rem; min-height: 40px; }
.en-spell-hint:disabled { opacity: .45; }

/* 칸: 글자 수만큼. 긴 단어는 칸이 줄어든다 */
.en-slots { display: flex; justify-content: center; gap: 5px; width: 100%; max-width: 520px; }
.en-slot {
  flex: 0 1 46px; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 8px 8px 4px 4px;
  font-family: var(--en-en); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--en-ink);
  background: #F7F4E826; box-shadow: inset 0 -4px 0 var(--en-chalk); cursor: var(--cur-pointer);
}
.en-slot.is-filled { background: var(--en-paper); box-shadow: inset 0 -4px 0 #0002; }
.en-slot.is-fixed { background: transparent; color: var(--en-chalk); box-shadow: inset 0 -4px 0 #F7F4E866; cursor: default; }
.en-slot.is-wrong { background: var(--en-no); color: #fff; animation: en-wobble .35s; }
.en-slot.is-correct { background: var(--en-ok); color: #fff; box-shadow: none; }
.en-slot.is-fixed.is-correct { background: #5BC46Ecc; }

/* 글자 타일 */
.en-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; max-width: 520px; }
.en-tile {
  width: 52px; height: 56px; padding: 0; border: 0; border-radius: 10px; cursor: var(--cur-pointer);
  font-family: var(--en-en); font-weight: 700; font-size: 1.8rem; color: var(--en-ink);
  background: var(--en-paper); box-shadow: 0 4px 0 #0003; rotate: -2deg;
}
.en-tile:nth-child(even) { rotate: 2deg; }
.en-tile:active { translate: 0 2px; box-shadow: 0 2px 0 #0003; }
.en-tile:disabled { opacity: .2; cursor: var(--cur-denied); }

/* abc 화면 키보드: 세로는 7칸 줄(a~g, h~n, o~u, v~z + ⌫ 2칸) + 아래 ✓ 확인 */
.en-keyboard { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 440px; }
.en-key {
  height: 48px; padding: 0; border: 0; border-radius: 10px; cursor: var(--cur-pointer);
  font-family: var(--en-en); font-weight: 700; font-size: 1.5rem; color: var(--en-ink);
  background: var(--en-paper); box-shadow: 0 3px 0 #0003;
}
.en-key.is-vowel { background: #FFF1C9; }   /* 모음은 크림색(소리 내어 읽을 때 도움) */
.en-key:active { translate: 0 2px; box-shadow: 0 1px 0 #0003; }
.en-key:disabled, .en-key-ok:disabled { opacity: .45; }
.en-key-back { grid-column: span 2; font-family: var(--en-ko); font-size: 1.3rem; }
.en-key-ok { grid-column: 1 / -1; min-height: 52px; padding: 6px; font-size: 1.25rem; }
.en-result-stars { margin: 0; font-size: 2.2rem; letter-spacing: .1em; color: var(--en-crayon); text-shadow: 0 2px 0 #0004; }

/* 가로: 칠판 두 칸 — 왼쪽 문제·칸, 오른쪽 입력(키보드 10칸 줄: a~j, k~t, u~z + ⌫ + ✓) */
@media (orientation: landscape) {
  .en-board.is-spell {
    display: grid; align-items: center; justify-items: center; gap: 8px 18px;
    grid-template: "stars stars" auto "prompt input" 1fr / minmax(0, 42%) minmax(0, 1fr);
  }
  .en-board.is-spell > .en-stars { grid-area: stars; }
  .en-board.is-spell > .en-spell-prompt { grid-area: prompt; }
  .en-board.is-spell > .en-tiles, .en-board.is-spell > .en-keyboard { grid-area: input; }
  .en-keyboard { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 560px; }
  .en-key-back { grid-column: span 2; }
  .en-key-ok { grid-column: span 2; min-height: 0; height: 48px; padding: 0 4px; font-size: 1rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .en-board.is-spell { gap: 6px 14px; }
  .en-spell-media { gap: 10px; }
  .en-spell-media .en-card-prompt { width: 72px; height: 72px; padding: 5px; }
  .en-spell-media .en-card-prompt .en-card-meaning { font-size: 1rem; }
  .en-spell-media .en-round-btn { width: 48px; height: 48px; }
  .en-board.is-spell .en-chalk-line { font-size: .95rem; text-align: center; }
  .en-slot { height: 42px; font-size: 1.4rem; }
  .en-spell-reveal { font-size: 1.6rem; }
  .en-spell-hint { min-height: 36px; padding: 4px 10px; font-size: .85rem; }
  .en-key { height: 44px; font-size: 1.3rem; }   /* 누르기 최소 44px */
  .en-key-ok { height: 44px; }
  .en-tile { width: 46px; height: 48px; font-size: 1.5rem; }
}
/* 결과: 가로에서 별 줄은 보너스와 한 줄에. 작은 부엉이는 철자 문제에서 오른쪽 위로(확인 버튼과 겹치지 않게) */
@media (orientation: landscape) and (max-height: 500px) {
  .en-board.is-result > .en-result-stars { width: auto; font-size: 1.6rem; }
  .en-board.is-spell > .en-owl-mini { display: none; }   /* 낮은 가로는 자리가 없어 작은 부엉이 생략 */
}
@media (orientation: portrait) {
  .en-board.is-spell > .en-owl-mini { width: 48px; bottom: auto; top: 8px; right: 8px; }
  .en-learned .en-card.en-card-mini { width: 68px; height: 68px; padding: 5px; }
}
/* 아주 낮은 가로(높이 360 이하): 철자 문제 왼쪽 칸을 더 줄인다(키는 44px 그대로) */
@media (orientation: landscape) and (max-height: 360px) {
  .en-spell-prompt { gap: 4px; }
  .en-spell-media .en-card-prompt { width: 56px; height: 56px; padding: 4px; }
  .en-spell-media .en-round-btn { width: 44px; height: 44px; }
  .en-slot { height: 38px; font-size: 1.25rem; }
  .en-spell-hint { min-height: 32px; padding: 2px 10px; }
  .en-board.is-spell .en-help { min-height: 0; font-size: .8rem; }
}
/* 세로 낮은 화면(아이폰 SE 등) */
@media (orientation: portrait) and (max-height: 700px) {
  .en-board.is-spell { gap: 6px; }
  .en-spell-media .en-card-prompt { width: 88px; height: 88px; }
  .en-key { height: 44px; }
  .en-key-ok { min-height: 46px; }
}

/* 관리자: 아이 줄 버튼 여러 개(코인 주기·기록·암호)는 오른쪽에 모아 둔다 */
.account-row .admin-text-btn + .admin-text-btn { margin-left: 0; }
/* 관리자: 코인 기록 */
.coin-ledger { margin-top: 14px; background: #fff; border: 1px solid #ead9b8; border-radius: 12px; padding: 12px; max-height: 360px; overflow: auto; }
.coin-ledger[hidden] { display: none; }
.coin-ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coin-ledger-table td { font-size: .9rem; }
.coin-ledger-table td:nth-child(3), .coin-ledger-table td:nth-child(4) { text-align: right; white-space: nowrap; }
.coin-ledger-table tr.is-plus td:nth-child(3) { color: #2e7d4f; }
.coin-ledger-table tr.is-minus td:nth-child(3) { color: #c0392b; }
#password-form .ghost-btn { margin-top: 10px; }

/* 월드 확대 막대: 끌어서 지도 크기 조절(터치 기기는 핀치도 된다) */
.world-controls { align-items: center; }
.world-zoom-slider {
  -webkit-appearance: none; appearance: none; width: calc(var(--ctl) * 3.75); height: var(--ctl); margin: 0 2px; padding: 0 calc(var(--ctl) * .3);
  background: #fffef8; border-radius: 99px; box-shadow: 0 3px 0 #d1dec8; touch-action: none; cursor: var(--cur-pointer);
}
.world-zoom-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: #d7e6cf; }
.world-zoom-slider::-moz-range-track { height: 8px; border-radius: 99px; background: #d7e6cf; }
.world-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: calc(var(--ctl) * .7); height: calc(var(--ctl) * .7); margin-top: calc((8px - var(--ctl) * .7) / 2); border-radius: 50%;
  background: #79ad91; border: 3px solid #fffef8; box-shadow: 0 2px 4px #26443240;
}
.world-zoom-slider::-moz-range-thumb { width: calc(var(--ctl) * .55); height: calc(var(--ctl) * .55); border-radius: 50%; background: #79ad91; border: 3px solid #fffef8; box-shadow: 0 2px 4px #26443240; }
.world-zoom-slider:focus-visible { outline: 3px solid #79ad91; outline-offset: 2px; border-radius: 8px; }

/* 터치 기기: −/＋ 대신 핀치와 확대 막대를 쓴다. 손가락으로 누르기 쉽게 크게, 길게 눌러도 그림 메뉴·글자 선택이 뜨지 않게. */
@media (pointer: coarse) {
  body.world-wide { --ctl: clamp(36px, 8vmin, 60px); }
  .world-controls .world-zoom-step { display: none; }
  .world-zoom-slider { width: calc(var(--ctl) * 3.5); }
  .world-stage, .world-stage img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* 좁은 화면: 확대 막대는 맨 아래, 안내 문구는 그 위로 올린다(겹치지 않게) */
@media (max-width: 1000px) {
  body.world-wide .world-hint { bottom: calc(var(--ctl) + 24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1000px) and (pointer: coarse) {
  body.world-wide .world-hint { bottom: calc(var(--ctl) + 20px + env(safe-area-inset-bottom, 0px)); }
}
/* 가로 화면: 안내 문구는 맨 아래 한 줄에 두고, 오른쪽 확대 패널과 겹치지 않게 폭만 줄인다(위로 올라가지 않는다) */
@media (max-width: 1000px) and (orientation: landscape) {
  /* 화면 가운데에 두고, 오른쪽 확대 패널(폭 약 --ctl×7.8 + 12px)에 닿지 않을 만큼만 폭·글자를 줄인다 */
  body.world-wide .world-hint { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; white-space: nowrap; font-size: clamp(9.5px, calc((100vw - 15.8 * var(--ctl) - 24px) / 25.7), 12.5px);   /* 글자 크기를 화면 폭에 맞춰 한 줄이 패널 7px 앞에서 끝나게(기본 문구 기준) */ padding: 5px 5px; }
}

/* 코인 그림(금색). 이모지 🪙는 기기 글꼴마다 색이 달라 쓰지 않는다. */
.coin-icon { width: 1.25em; height: 1.25em; flex: none; object-fit: contain; vertical-align: -0.25em; }
.world-coins .coin-icon { width: 20px; height: 20px; }

/* ===== 로딩 화면(docs/loading-screen.md) ===== */
/* 배경 그림이 없을 때는 같은 색감의 그라데이션이 보인다. 가로·세로 화면에 맞는 배경을 따로 쓴다. */
.loading-screen {
  position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100%); z-index: 100000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2.2vh, 16px);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: url("../public/img/ui/loading/loading_bg.webp") center / cover no-repeat, linear-gradient(180deg, #8fbcf5 0%, #ffe6c2 55%, #ffc2b0 100%);
  color: #5b3b1d; font-family: "Jua", "Malgun Gothic", sans-serif;
  opacity: 1; transition: opacity .25s ease; touch-action: none; user-select: none;
}
@media (orientation: portrait) {
  .loading-screen { background-image: url("../public/img/ui/loading/loading_bg_portrait.webp"), linear-gradient(180deg, #8fbcf5 0%, #ffe6c2 55%, #ffc2b0 100%); }
}
.loading-screen[hidden] { display: none; }
.loading-screen.is-leaving { opacity: 0; }
/* 나타날 때도 서서히(장소 이동마다 바로 뜨므로 툭 덮지 않게) */
.loading-screen:not([hidden]):not(.is-leaving) { animation: loading-in .2s ease; }
@keyframes loading-in { from { opacity: 0; } to { opacity: 1; } }
/* 내 캐릭터 제자리 걷기: 512×512 옷 레이어 프레임을 겹친다 */
.loading-char { position: relative; width: clamp(110px, 34vh, 230px); aspect-ratio: 1; margin-bottom: -4%; filter: drop-shadow(0 6px 6px #5b3b1d26); }
.loading-char img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.loading-title, .loading-tip {
  margin: 0; text-align: center; background: #fffaf0e0; border-radius: 999px; box-shadow: 0 4px 14px #5b3b1d1f;
}
.loading-title { padding: 7px 20px; font-size: clamp(17px, 4.6vw, 24px); font-weight: 800; }
.loading-tip { padding: 7px 16px; max-width: min(88vw, 540px); border-radius: 16px; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.45; min-height: 1.45em; }
.loading-tip:empty { visibility: hidden; }
.loading-bar-row { display: flex; align-items: center; gap: 10px; }
.loading-bar {
  position: relative; width: min(70vw, 420px); height: 18px; border-radius: 999px;
  background: #fff6df; box-shadow: inset 0 0 0 2px #e2b65c, 0 3px 10px #5b3b1d26;
}
.loading-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit; background: linear-gradient(180deg, #ffe27a, #f2b51c); box-shadow: inset 0 -2px 0 #d9970e; transition: width .25s ease; }
.loading-star { position: absolute; top: 50%; left: 0%; width: 42px; height: 42px; transform: translate(-50%, -52%); transition: left .25s ease; pointer-events: none; }
.loading-percent { min-width: 3.2em; padding: 4px 10px; border-radius: 999px; background: #fffaf0e0; font-weight: 800; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .loading-screen, .loading-fill, .loading-star { transition: none; } .loading-screen:not([hidden]) { animation: none; } }

/* ===== 아이폰 홈 화면 앱(상태 표시줄 반투명) 높이 보정 =====
   브라우저가 알려 주는 높이(100%·innerHeight)가 상태 표시줄 높이만큼 짧아(예: 844 중 797) 아래가 빈다.
   js/viewport.js가 html에 ios-standalone과 --app-h(실제 높이)를 넣으면, 페이지 전체를 그 높이로 늘린다. */
html.ios-standalone, html.ios-standalone body { height: var(--app-h); min-height: var(--app-h); }
html.ios-standalone body { background-attachment: scroll; background-size: 100% var(--app-h); }   /* 배경 그라데이션도 실제 높이까지 */
html.ios-standalone #app { min-height: var(--app-h); }

/* ===== 탈의실(docs/fitting-room.md) ===== */
.fitting-btn { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.fitting-btn img { width: 32px; height: 32px; object-fit: contain; pointer-events: none; }
/* 배경은 cover + 러그 중심 비율을 background-position에 넣는다 → 화면 비율이 달라도 러그 중심이 늘 화면의 같은 비율 위치에 온다. */
.fitting-room {
  position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100%); z-index: 90000;
  container-type: size; overflow: hidden;
  background: url("../public/img/ui/fitting/fitting_room_bg.webp") 28.3% 78.6% / cover no-repeat, linear-gradient(180deg, #f6e9d2 0%, #e9d5b4 70%, #c9a97c 100%);
  color: #534632; font-family: "Jua", "Malgun Gothic", sans-serif; user-select: none; touch-action: manipulation;
}
.fitting-room[hidden] { display: none; }
.fitting-header {
  position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right));
  display: flex; align-items: center; gap: 8px;
}
/* 공통 나가기 버튼(탈의실 모양): 월드·트리움·게임·탈의실이 함께 쓴다. 막대에 자리가 모자라면 화살표만 */
.exit-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 10px 16px; background: #fffaf0ee; color: #5b3b1d; font: 800 15px "Jua", "Malgun Gothic", sans-serif; box-shadow: 0 3px 12px #5b3d1526; cursor: var(--cur-pointer); pointer-events: auto; }
.exit-btn .exit-arrow { font-size: 1.1em; line-height: 1; }
.exit-btn.compact { padding: 10px 14px; }
.exit-btn.compact .exit-label { display: none; }   /* 상단 막대에 자리가 모자랄 때만(js/exit-fit.js) */
.fitting-title { margin: 0 auto; padding: 6px 18px; border-radius: 999px; background: #fffaf0e0; color: #5b3b1d; font-size: 1.15rem; font-weight: 800; box-shadow: 0 3px 12px #5b3d151f; }
.fitting-stage { position: absolute; inset: 0; z-index: 1; }
/* 512×512 리그 캔버스: 발은 위에서 약 94% 지점 → 그 점을 러그 중심(top)에 맞춘다 */
.fitting-character {
  position: absolute; left: 28.3%; top: 78.6%; height: 64%; aspect-ratio: 1;
  transform: translate(-50%, -94%); filter: drop-shadow(0 8px 8px #3d2a1033); pointer-events: none;
}
.fitting-character img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fitting-character.sparkle { animation: fitting-sparkle .5s ease; }
@keyframes fitting-sparkle {
  0% { filter: drop-shadow(0 8px 8px #3d2a1033); }
  35% { filter: brightness(1.18) drop-shadow(0 0 14px #fff3b0) drop-shadow(0 0 4px #ffd65a); }
  100% { filter: drop-shadow(0 8px 8px #3d2a1033); }
}
.fitting-turn {
  position: absolute; top: 66%; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #fffaf0ee; color: #5b3b1d; font-size: 24px; line-height: 1; box-shadow: 0 3px 12px #5b3d1533; cursor: var(--cur-pointer);
}
.fitting-turn.left { left: calc(28.3% - 15cqh - 52px); }
.fitting-turn.right { left: calc(28.3% + 15cqh + 4px); }
.fitting-turn:active, .exit-btn:active { transform: scale(.94); }
.fitting-panel {
  position: absolute; z-index: 2; display: flex; flex-direction: column;
  top: calc(66px + env(safe-area-inset-top)); bottom: calc(12px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right));
  width: min(calc(52% - 24px), 640px); padding: 12px; border: 2px solid #d4ba85; border-radius: 22px;
  background: #fff9edeb; box-shadow: 0 10px 34px #39250f40; font-family: "Malgun Gothic", sans-serif;
}
.fitting-tabs { margin-bottom: 10px; flex: none; }
.fitting-tabs .wd-tab { padding: 9px 3px; font-size: 13px; }
.fitting-items { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.fitting-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.fitting-grid .wd-item { min-height: 108px; }
.fitting-grid .wd-item:disabled { opacity: .45; cursor: var(--cur-denied); }
.fitting-summary { flex: none; margin: 8px 2px 0; font-size: 12px; line-height: 1.45; color: #6d5b3c; font-weight: 700; word-break: keep-all; }
@media (orientation: portrait) {
  .fitting-room { background-image: url("../public/img/ui/fitting/fitting_room_bg_portrait.webp"), linear-gradient(180deg, #f6e9d2 0%, #e9d5b4 70%, #c9a97c 100%); background-position: 49.9% 52%, 0 0; }
  .fitting-character { left: 49.9%; top: 52%; height: 35%; }
  .fitting-turn { top: 36%; }
  .fitting-turn.left { left: calc(49.9% - 9cqh - 52px); }
  .fitting-turn.right { left: calc(49.9% + 9cqh + 4px); }
  .fitting-panel { top: 58%; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; padding: 10px; }
  .fitting-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .fitting-grid .wd-item { min-height: 100px; padding: 7px 4px; }
  .fitting-grid .wd-item-icon { width: 58px; height: 58px; }
}
/* 들어갈 때·나올 때 커튼: 한 폭 그림을 좌우로 쓰고 가운데서 겹친다(각 55.5%) */
.fitting-curtains { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h, 100%); z-index: 90001; overflow: hidden; pointer-events: none; }
.fitting-curtains[hidden] { display: none; }
.fitting-curtains.closed { pointer-events: auto; }
.fitting-curtains .curtain {
  position: absolute; top: -2px; bottom: -2px; width: 55.5%;
  background: url("../public/img/ui/fitting/fitting_curtain.webp") 0 0 / 100% 100% no-repeat;
  transition: transform .38s ease-in-out; will-change: transform;
}
.fitting-curtains .curtain.left { left: -2px; transform: translateX(-102%); }
.fitting-curtains .curtain.right { right: -2px; transform: translateX(102%) scaleX(-1); }
.fitting-curtains.closed .curtain.left { transform: none; }
.fitting-curtains.closed .curtain.right { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .fitting-curtains .curtain { transition: none; }
  .fitting-character.sparkle { animation: none; }
}

/* ===== 미용실 패널(의자에 앉았을 때): 안내 팝업과 같은 카드·리본·금별 버튼 그림을 쓴다 =====
   왼쪽 미리보기(돌려 보기) + 오른쪽 [헤어스타일][염색] 카드 + 바꾸는 값 + 버튼. docs/hair-salon-plan.md §2.7 */
.salon-panel {
  position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 70px 12px 12px;
  background: radial-gradient(circle at 50% 45%, #fff3d033 0%, #4a371f66 100%); backdrop-filter: blur(2px);
  font-family: "Jua", "Malgun Gothic", sans-serif; color: #5b3b1d; animation: notice-fade .18s ease;
}
.salon-panel[hidden] { display: none; }
.salon-card { width: min(600px, 100%); max-height: 100%; padding: 0 0 4px; border: solid transparent; border-width: 55px; background: none; border-image: url("../public/img/ui/notice/notice_card.webp") 110 fill / 55px stretch; filter: drop-shadow(0 14px 18px #3a260c55); animation: notice-pop .34s cubic-bezier(.2, 1.5, .4, 1); text-align: center; }
.salon-icon { top: -110px; width: 104px; height: 104px; }
.salon-card .notice-ribbon { margin-top: 20px; }
.salon-body { display: flex; gap: 14px; align-items: stretch; margin: 6px 0 4px; text-align: left; }
.salon-preview { flex: none; display: flex; align-items: center; gap: 6px; }
.salon-char { flex: none; position: relative; width: 172px; height: 190px; border-radius: 20px; background: linear-gradient(180deg, #dff7ee 0%, #fff4d9 100%); box-shadow: inset 0 0 0 3px #f0d37a; overflow: hidden; }
.salon-char img { position: absolute; left: -16%; top: -2%; width: 132%; height: auto; pointer-events: none; }
.salon-choose { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.salon-tabs { display: flex; gap: 6px; }
.salon-tabs button { flex: 1; padding: 8px 6px; border: 2px solid #e0bd6a; border-radius: 14px; background: #fff7e0; color: #7a5a22; font: 400 16px "Jua", "Malgun Gothic", sans-serif; cursor: var(--cur-pointer); }
.salon-tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe985, #f7bf2b); border-color: #d9970e; color: #5b3b1d; box-shadow: inset 0 2px 0 #fff6bd; }
.salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; align-content: start; min-height: 120px; max-height: 190px; overflow-y: auto; padding: 2px; }
.salon-card-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px 6px; border: 2px solid #e8d7a8; border-radius: 16px; background: #fffdf6; color: #5b3b1d; font: 400 14px "Jua", "Malgun Gothic", sans-serif; cursor: var(--cur-pointer); }
.salon-card-item img { width: 64px; height: 64px; object-fit: contain; }
.salon-card-item[aria-pressed="true"] { border-color: #f0b933; background: #fff3c8; box-shadow: 0 0 0 2px #f7d35a; }
.salon-card-item em { position: absolute; top: -8px; right: -4px; padding: 1px 7px; border-radius: 999px; background: #5fcfae; color: #fff; font: 400 11px "Jua", sans-serif; font-style: normal; }
.salon-dye i { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #cdb27a, 0 3px 4px #4a2f0a33; }
.salon-price { min-height: 1.6em; margin: 4px 0 8px; font-size: 17px; color: #7a5a22; }
.salon-price.poor { color: #c0452d; }
.salon-actions { display: flex; justify-content: center; gap: 12px; margin-bottom: -4px; }
.salon-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; height: 58px; padding: 0 0 6px; cursor: var(--cur-pointer); border: solid transparent; border-width: 0 28px; background: none; border-image: url("../public/img/ui/notice/notice_button.webp") 0 80 0 80 fill / 0 28px stretch; color: #6a4208; font: 400 20px "Jua", "Malgun Gothic", sans-serif; text-shadow: 0 1px 0 #fff3b5; transition: transform .08s ease; }
.salon-btn img { width: 24px; height: 24px; flex: none; }
.salon-btn.ghost { filter: grayscale(.55) brightness(1.04); }
.salon-btn:disabled { opacity: .5; cursor: var(--cur-denied); filter: grayscale(.8); }
.salon-btn:not(:disabled):active { transform: translateY(3px); }
.salon-btn:focus-visible, .salon-card-item:focus-visible, .salon-tabs button:focus-visible { outline: 3px solid #5fcfae; outline-offset: 3px; }
@media (max-width: 560px) {
  .salon-body { flex-direction: column; align-items: center; }
  .salon-choose { width: 100%; }
  .salon-grid { max-height: 150px; }
  .salon-char { width: 150px; height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .salon-panel, .salon-card { animation: none; } }
.salon-grid { max-height: 232px; }
.is-fit .salon-card { max-height: none; }
/* 가로 화면(낮은 화면): 카드 안쪽을 낮춰 배율이 덜 줄어들게 한다 */
@media (max-height: 480px) {
  .board-list, .board-detail { max-height: 30vh; max-height: 30dvh; }
  .salon-grid { max-height: 128px; min-height: 100px; }
  .salon-char { width: 140px; height: 150px; }
  .salon-body { margin: 2px 0; }
}   /* 화면보다 큰 카드는 overlay-fit.js가 배율(zoom)로 줄여 맞춘다 */
.salon-dye { padding: 6px 2px 4px; }
.salon-dye i { width: 34px; height: 34px; }
.salon-grid { max-height: 262px; }
.salon-card-item img { width: 58px; height: 58px; }
/* 돌려 보기 버튼: 탈의실(.fitting-turn)과 같은 둥근 ↺ ↻ 버튼. 위치만 캐릭터 양옆으로 */
.salon-turn-btn { position: static; flex: none; width: 40px; height: 40px; font-size: 20px; }
@media (max-width: 560px) { .salon-turn-btn { width: 36px; height: 36px; font-size: 18px; } }
.salon-card { width: min(660px, 100%); }
.salon-tabs button { white-space: nowrap; font-size: 15px; padding: 8px 4px; }
.salon-preview { align-self: flex-start; gap: 4px; }
.salon-turn-btn { width: 36px; height: 36px; font-size: 18px; }
.salon-body { gap: 10px; }
.salon-card { min-width: 0; }
@media (max-width: 560px) {
  .salon-char { width: 128px; height: 140px; }
  .salon-turn-btn { width: 32px; height: 32px; font-size: 16px; }
}
@media (max-width: 560px) { .salon-preview { align-self: center; } }
.salon-cost { display: inline-flex; align-items: center; gap: 3px; font: 400 13px "Jua", sans-serif; color: #7a5a22; }
.salon-cost img { width: 15px; height: 15px; }

/* 관리자: 상품·헤어·색 썸네일 */
.admin-item-name { display: flex; align-items: center; gap: 10px; }
.admin-thumb { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 2px #ead9b8; }
.admin-thumb-none { display: grid; place-items: center; color: #b9a67f; font-weight: 800; }
.admin-swatch { flex: none; width: 40px; height: 40px; margin: 8px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #cdb27a; }
.admin-item-label strong { display: block; color: #58462d; }
.admin-item-label small { color: #9a8767; }
.admin-salon-table th:nth-child(2), .admin-salon-table td:nth-child(2) { width: 52px; text-align: center; }
.admin-salon-table th:nth-child(3), .admin-salon-table td:nth-child(3) { width: 110px; }
.admin-salon-table tr.is-off .admin-item-name { opacity: .5; }

/* 단계 칩 줄(책장 위): 단계 1~10 나무 이름표. 고른 단계의 단원 책만 책장에 보인다(english-screen.js levelShelf) */
.en-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 8px 4px; }
.en-chip {
  position: relative; width: 46px; height: 46px; padding: 0 0 6px; border: 0; border-radius: 12px; cursor: var(--cur-pointer); display: grid; place-items: center;
  font: 800 1.25rem/1 inherit; font-family: inherit; color: var(--en-chalk);
  background: linear-gradient(180deg, #C98A55, var(--en-wood) 60%, var(--en-wood-dark)); box-shadow: 0 3px 0 #5E3819, inset 0 0 0 2px #ffffff22;
}
.en-chip-no { text-shadow: 0 1px 0 #0004; }
.en-chip-bar { position: absolute; left: 7px; right: 7px; bottom: 6px; height: 5px; border-radius: 3px; background: #0004; overflow: hidden; }
.en-chip-bar::after { content: ""; display: block; width: var(--fill); height: 100%; background: #fff; }
.en-chip-mark { position: absolute; top: -9px; right: -7px; font-size: 1rem; filter: drop-shadow(0 1px 1px #0005); }
.en-chip[aria-pressed="true"] { background: linear-gradient(180deg, #FFD36E, var(--en-crayon)); color: #5B3B1D; box-shadow: 0 1px 0 #5E3819, inset 0 0 0 2px #fff6; translate: 0 2px; }
.en-chip[aria-pressed="true"] .en-chip-no { text-shadow: none; }
.en-chip[aria-pressed="true"] .en-chip-bar { background: #5B3B1D44; }
.en-chip[aria-pressed="true"] .en-chip-bar::after { background: #5B3B1D; }
.en-chip.is-next:not([aria-pressed="true"]) { outline: 3px solid var(--en-crayon); outline-offset: 2px; }
.en-chip.is-locked { filter: saturate(.55) brightness(.9); }
.en-shelf-info { margin: 2px 0 0; text-align: center; font-size: .95rem; color: var(--en-chalk); opacity: .9; }
@media (max-width: 560px) { .en-levels { gap: 6px; padding-top: 10px; } .en-chip { width: 40px; height: 40px; font-size: 1.1rem; } .en-shelf-info { font-size: .85rem; } }
.en-shelf-info { color: #6B4A2B; opacity: 1; font-weight: 700; }
@media (max-width: 560px) { .en-levels { max-width: 250px; margin: 0 auto; } }   /* 폰: 5개씩 두 줄 */

/* ===== 소리 설정 버튼·패널(모든 화면 왼쪽 아래) ===== */
.sound-btn {
  position: fixed; z-index: 70000; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom));
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: var(--cur-pointer); font-size: 19px; line-height: 1;
  background: #fffaf0e6; color: #5b3b1d; box-shadow: 0 3px 10px #3a260c40; opacity: .85;
}
.sound-btn:hover, .sound-btn[aria-expanded="true"] { opacity: 1; }
.sound-btn:active { transform: scale(.94); }
.sound-panel {
  position: fixed; z-index: 70001; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 48px);
  width: 220px; padding: 12px 14px; border-radius: 16px; background: #fffaf0f2; color: #5b3b1d; box-shadow: 0 8px 24px #3a260c50;
  display: flex; flex-direction: column; gap: 10px; font: 700 14px "Jua", "Malgun Gothic", sans-serif;
}
.sound-panel[hidden] { display: none; }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sound-row input[type="range"] { flex: 1; min-width: 0; accent-color: #f2b51c; }
.sound-mute input { width: 20px; height: 20px; accent-color: #f2b51c; }
.sound-mute { justify-content: flex-start; }
.sound-panel.is-muted .sound-row:not(.sound-mute) { opacity: .45; }

/* 🛠️ 배치·판정 편집 켜기 버튼(관리자 월드 테스트에서만 보임) */
.world-debug-btn[hidden] { display: none; }
.world-header .world-debug-btn[aria-pressed="true"] { background: #ff7a00e8; box-shadow: 0 0 0 3px #ffd21f; }

/* 우리 집 꾸미기 패널(web/js/housing-panel.js): 월드 화면 아래 가로 카드 줄 */
.housing-btn[hidden] { display: none; }
.housing-panel { position: absolute; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(46px + env(safe-area-inset-bottom, 0px)); width: min(640px, calc(100% - 20px)); padding: 10px 12px 12px; border-radius: 20px; background: #fff7e6f2; border: 3px solid #f0d58a; box-shadow: 0 6px 18px #0004; color: #5b3b1d; font: 400 15px "Jua", "Malgun Gothic", sans-serif; }
.housing-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.housing-head strong { font-weight: 400; font-size: 17px; }
.housing-tabs { flex: 1; display: flex; gap: 6px; }
.housing-tab { padding: 4px 14px; border: 2px solid #e8d7a8; border-radius: 14px; background: #fffdf6; color: #5b3b1d; font: inherit; font-size: 14px; cursor: var(--cur-pointer); }
.housing-tab[aria-pressed="true"] { border-color: #f0b933; background: #fff3c8; box-shadow: 0 0 0 2px #f7d35a; }
.housing-wallet { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 14px; background: #fff; border: 2px solid #f0d58a; }
.housing-wallet img { width: 18px; height: 18px; }
.housing-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #ead9b0; color: #5b3b1d; font-size: 16px; cursor: var(--cur-pointer); }
.housing-cards { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; }
.housing-card { flex: 0 0 92px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 6px; border: 2px solid #e8d7a8; border-radius: 16px; background: #fffdf6; color: #5b3b1d; font: inherit; font-size: 14px; cursor: var(--cur-pointer); }
.housing-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid #e8d7a8; }
.housing-card[aria-pressed="true"] { border-color: #f0b933; background: #fff3c8; box-shadow: 0 0 0 2px #f7d35a; }
.housing-card em { font-style: normal; font-size: 12px; color: #2f8f5b; }
.housing-cost { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; font-size: 13px; }
.housing-cost img { width: 14px; height: 14px; }
.housing-foot { display: flex; align-items: center; gap: 10px; }
.housing-msg { flex: 1; min-height: 1.2em; font-size: 13px; color: #8a5a35; }
.housing-act { padding: 8px 16px; border: 0; border-radius: 14px; background: #f0b933; color: #5b3b1d; font: inherit; font-size: 15px; cursor: var(--cur-pointer); }
.housing-act:disabled { opacity: .45; cursor: var(--cur-denied); }
@media (max-height: 460px) { .housing-card img { width: 52px; height: 52px; } .housing-card { flex-basis: 74px; } .housing-panel { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); padding: 6px 10px 8px; } }

/* 오브젝트 판정 편집 화면(web/js/judge-screen.js): 월드와 따로 빈 격자 위에서 편집 */
.judge-screen { position: fixed; inset: 0; z-index: 30000; display: flex; flex-direction: column; background: #16201b; color: #fff; font: 600 14px/1.3 "Malgun Gothic", sans-serif; }
.judge-screen button { font: inherit; padding: 7px 12px; border: 0; border-radius: 9px; background: #e9eef2; color: #1f2a33; cursor: var(--cur-pointer); }
.judge-screen button:disabled { opacity: .45; cursor: var(--cur-denied); }
.judge-screen .js-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: #0f1713; }
.judge-screen .js-title { color: #ffe14d; }
.judge-screen .js-tabs { display: flex; gap: 4px; }
.judge-screen .js-tabs button, .judge-screen .js-zoom button { background: #ffffff1c; color: #fff; }
.judge-screen .js-tabs button[aria-pressed="true"] { background: #fff; color: #1f2a33; box-shadow: 0 0 0 2px #ffd21f; }
.judge-screen .js-zoom { display: flex; gap: 4px; }
.judge-screen .js-save { background: #ff7a00; color: #fff; }
.judge-screen .js-status { flex: 1 1 240px; min-width: 0; color: #9bffb5; font-weight: 500; }
.judge-screen .js-body { flex: 1 1 auto; min-height: 0; display: flex; }
.judge-screen .js-list { flex: 0 0 232px; overflow: auto; padding: 8px; background: #0f1713; border-right: 1px solid #ffffff22; }
.judge-screen .js-group { margin: 10px 4px 4px; color: #ffe14d; font-size: 12px; text-transform: uppercase; }
.judge-screen .js-item { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; text-align: left; background: #ffffff14; color: #fff; }
.judge-screen .js-item[aria-pressed="true"] { background: #fff; color: #1f2a33; box-shadow: 0 0 0 2px #ffd21f; }
.judge-screen .js-item img, .judge-screen .js-noimg { flex: 0 0 38px; width: 38px; height: 38px; object-fit: contain; border-radius: 6px; background: #ffffff22; text-align: center; line-height: 38px; }
.judge-screen .js-label { min-width: 0; display: flex; flex-direction: column; }
.judge-screen .js-label strong, .judge-screen .js-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.judge-screen .js-label small { font-weight: 500; opacity: .7; font-size: 11px; }
.judge-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; isolation: isolate; touch-action: none; cursor: crosshair; background: #2c3b33; }
.judge-stage .js-obj { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.judge-stage .js-obj[hidden] { display: none; }
.judge-stage .js-me { position: absolute; max-width: none; transform: translate(-50%, -100%); pointer-events: none; user-select: none; }
@media (max-width: 760px) { .judge-screen .js-body { flex-direction: column; } .judge-screen .js-list { flex: 0 0 120px; border-right: 0; border-bottom: 1px solid #ffffff22; } }

/* 오브젝트 판정 편집(web/js/world-judge.js): 격자·판정 오버레이 캔버스 + 오른쪽 설명 패널 */
/* 이동 경로 편집(web/js/world-path-edit.js): 지도 위 오버레이 캔버스 + 왼쪽 패널(디버그 패널 아래) */
.world-path-canvas { position: absolute; left: 0; top: 0; z-index: 19000; pointer-events: none; }
.world-path-panel { position: absolute; z-index: 20000; left: 12px; top: 118px; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 190px); overflow: auto; padding: 10px 12px; border-radius: 14px; background: #1f2a33ee; color: #fff; box-shadow: 0 4px 12px #0005; font: 600 13px/1.35 "Malgun Gothic", sans-serif; }
.world-path-panel button, .world-path-panel select { font: inherit; padding: 6px 10px; border: 0; border-radius: 8px; background: #e9eef2; color: #1f2a33; cursor: var(--cur-pointer); }
.world-path-panel button:disabled { opacity: .45; cursor: var(--cur-denied); }
.world-path-panel .wj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.world-path-panel .wj-title { color: #ffe14d; }
.world-path-panel .wj-close { background: #ff7a00; color: #fff; }
.world-path-panel .wj-tools { display: grid; gap: 4px; margin-bottom: 6px; }
.world-path-panel .wj-tool { display: flex; align-items: center; gap: 8px; text-align: left; background: #ffffff1c; color: #fff; }
.world-path-panel .wj-tool[aria-pressed="true"] { background: #fff; color: #1f2a33; box-shadow: 0 0 0 2px #ffd21f; }
.world-path-panel .wj-chip { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #fff; text-align: center; line-height: 14px; }
.world-path-panel .wj-layer { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-weight: 500; }
.world-path-panel .wj-help { margin: 6px 0; padding: 8px; border-radius: 8px; background: #ffffff14; font-weight: 500; }
.world-path-panel .wj-info { margin: 4px 0; color: #bfe3ff; font-weight: 500; }
.world-path-panel .wj-row { display: flex; gap: 6px; margin: 6px 0; }
.world-path-panel .wj-msg { min-height: 1.3em; margin: 4px 0; color: #9bffb5; }
.world-path-panel .wj-note { margin: 4px 0 0; color: #ffffffa8; font-weight: 500; font-size: 12px; }
.world-judge-grid { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }   /* 임시 격자: 오브젝트·캐릭터 아래 */
.world-judge-canvas { position: absolute; left: 0; top: 0; z-index: 19000; pointer-events: none; }
.world-judge-panel {
  position: absolute; z-index: 20000; right: 12px; top: 12px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto;
  padding: 10px 12px; border-radius: 14px; background: #1f2a33ee; color: #fff; box-shadow: 0 4px 12px #0005;
  font: 600 13px/1.35 "Malgun Gothic", sans-serif;
}
.world-judge-panel.left { left: 12px; right: auto; }
.world-judge-panel .wj-side { margin-left: auto; }
.world-judge-panel .wj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.world-judge-panel .wj-title { color: #ffe14d; }
.world-judge-panel button { font: inherit; padding: 6px 10px; border: 0; border-radius: 8px; background: #e9eef2; color: #1f2a33; cursor: var(--cur-pointer); }
.world-judge-panel button:disabled { opacity: .45; cursor: var(--cur-denied); }
.world-judge-panel .wj-close { background: #ff7a00; color: #fff; }
.world-judge-panel .wj-tools { display: grid; gap: 4px; margin-bottom: 6px; }
.world-judge-panel .wj-tool { display: flex; align-items: center; gap: 8px; text-align: left; background: #ffffff1c; color: #fff; }
.world-judge-panel .wj-tool[aria-pressed="true"] { background: #fff; color: #1f2a33; box-shadow: 0 0 0 2px #ffd21f; }
.world-judge-panel .wj-chip { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #fff; }
.world-judge-panel .wj-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; font-weight: 500; }
.world-judge-panel .wj-toggles { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; font-weight: 500; }
.world-judge-panel .wj-toggles:empty { display: none; }
.world-judge-panel .wj-layers-title { color: #ffe14d; font-weight: 700; }
.world-judge-panel .wj-layer { display: inline-flex; align-items: center; gap: 4px; cursor: var(--cur-pointer); }
.world-judge-panel .wj-help { margin: 6px 0; padding: 8px; border-radius: 8px; background: #ffffff14; font-weight: 500; }
.world-judge-panel .wj-info { margin: 4px 0; color: #bfe3ff; font-weight: 500; font-variant-numeric: tabular-nums; }
.world-judge-panel .wj-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.world-judge-panel .wj-msg { min-height: 1.3em; margin: 4px 0; color: #9bffb5; }
.world-judge-panel .wj-note { margin: 4px 0 0; color: #ffffffa8; font-weight: 500; font-size: 12px; }

/* ---- 가구 상점 재건 퀘스트(비버 목공소): 줍는 자리 반짝이 · 비버 느낌표 · 가방 · 대화 카드. 설계: docs/housing-shop-quest-plan.md ---- */
.gather-spark { position: absolute; padding: 0; border: 0; background: none; pointer-events: auto; cursor: var(--cur-pointer); transform: translate(-50%, -100%); }
.gather-spark[hidden] { display: none; }
.gather-spark img { display: block; width: 100%; height: 100%; animation: notice-bob 1.3s ease-in-out infinite; filter: drop-shadow(0 2px 2px #4a2f0a55); }
.gather-spark:focus-visible { outline: 3px solid #5fcfae; border-radius: 50%; }
.npc-alert { position: absolute; left: 50%; bottom: 88%; width: var(--alert-size, 40px); height: var(--alert-size, 40px); transform: translateX(-50%); pointer-events: none; }
.npc-alert[hidden] { display: none; }
.npc-alert img { display: block; width: 100%; height: 100%; animation: notice-bob 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .gather-spark img, .npc-alert img { animation: none; } }
.quest-bag { position: relative; flex: none; width: 44px; height: 44px; padding: 3px; border-radius: 14px; border: 2px solid #f0d58a; background: #fff7e6e6; cursor: var(--cur-pointer); }
.quest-bag[hidden] { display: none; }
.quest-bag img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quest-bag-count { position: absolute; right: -4px; bottom: -4px; min-width: 20px; padding: 0 5px; border-radius: 999px; background: #e0742a; color: #fff; font: 400 13px/20px "Jua", "Malgun Gothic", sans-serif; text-align: center; }
.quest-bag.is-pulse { animation: quest-pulse .5s ease; }
@keyframes quest-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1); } }
.quest-bag-pop { position: absolute; z-index: 45; top: 58px; right: 10px; width: min(250px, calc(100% - 20px)); padding: 10px 12px; border-radius: 16px; background: #fff7e6f5; border: 3px solid #f0d58a; box-shadow: 0 6px 18px #0004; color: #5b3b1d; font: 400 15px "Jua", "Malgun Gothic", sans-serif; }
.quest-bag-pop[hidden] { display: none; }
.quest-bag-pop strong { display: block; margin-bottom: 6px; font-weight: 400; font-size: 17px; }
.quest-bag-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.quest-bag-row img { width: 32px; height: 32px; object-fit: contain; }
.quest-bag-row span { flex: 1; }
.quest-bag-row b { font-weight: 400; font-size: 18px; }
.quest-bag-pop p { margin: 6px 0 0; font-size: 13px; line-height: 1.4; word-break: keep-all; }
.quest-gain { position: absolute; z-index: 46; display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #fff7e6; border: 2px solid #f0d58a; color: #5b3b1d; font: 400 16px "Jua", "Malgun Gothic", sans-serif; transform: translateX(-50%); pointer-events: none; animation: quest-gain 3s ease-out forwards; }
.quest-gain img { width: 26px; height: 26px; object-fit: contain; }
@keyframes quest-gain { 0% { opacity: 0; transform: translate(-50%, -6px); } 8% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; transform: translate(-50%, 4px); } 100% { opacity: 0; transform: translate(-50%, 18px); } }
.quest-overlay { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 56px 12px 12px; background: radial-gradient(circle at 50% 45%, #fff3d033 0%, #4a371f77 100%); backdrop-filter: blur(2px); font-family: "Jua", "Malgun Gothic", sans-serif; color: #5b3b1d; animation: notice-fade .18s ease; }
.quest-card { width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 10px 14px 14px; border-radius: 22px; background: #fff7e6; border: 4px solid #f0d58a; box-shadow: 0 12px 28px #3a260c66; }
.quest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quest-title { font-weight: 400; font-size: 20px; }
.quest-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0d58a; color: #5b3b1d; font-size: 16px; cursor: var(--cur-pointer); }
.quest-talk { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0; }
.quest-beaver { flex: none; width: 112px; height: 168px; object-fit: contain; filter: drop-shadow(0 4px 3px #4a2f0a33); }
.quest-line { position: relative; flex: 1; margin: 0 0 24px; padding: 10px 12px; border-radius: 16px; background: #fff; border: 2px solid #e8c978; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.quest-line::before { content: ""; position: absolute; left: -9px; bottom: 18px; width: 14px; height: 14px; background: #fff; border-left: 2px solid #e8c978; border-bottom: 2px solid #e8c978; transform: rotate(45deg); }
.quest-stage[hidden], .quest-needs[hidden] { display: none; }
.quest-stage { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; font-size: 15px; }
.quest-bar { flex: 1; height: 12px; border-radius: 999px; background: #ecd9a8; overflow: hidden; }
.quest-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(#7fd06b, #4fb04a); transition: width .35s ease; }
.quest-needs { display: grid; gap: 6px; }
.quest-need { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 14px; background: #fff; border: 2px solid #ecd9a8; font-size: 16px; }
.quest-need img { width: 36px; height: 36px; object-fit: contain; }
.quest-need span { flex: 1; }
.quest-need b { font-weight: 400; font-size: 18px; }
.quest-need em { width: 20px; font-style: normal; color: #3a9a3a; font-size: 18px; }
.quest-need.is-ok { border-color: #8fd18a; background: #f3ffef; }
.quest-foot { display: flex; justify-content: center; margin-top: 10px; }
.quest-act { min-width: 200px; height: 48px; border: 0; border-radius: 999px; background: linear-gradient(#ffcf5a, #f2a52a); color: #5a3708; font: 400 19px "Jua", "Malgun Gothic", sans-serif; box-shadow: 0 4px 0 #c47d12; cursor: var(--cur-pointer); }
.quest-act[hidden] { display: none; }
.quest-act:disabled { filter: grayscale(.6) opacity(.7); box-shadow: none; cursor: default; }
@media (max-height: 460px) { .quest-overlay { padding-top: 44px; } .quest-beaver { width: 80px; height: 120px; } .quest-line { margin-bottom: 14px; font-size: 14px; } }
.world-header .quest-bag { pointer-events: auto; }
.housing-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quest-foot { gap: 10px; flex-wrap: wrap; }
.quest-act { min-width: 160px; }
.quest-ok { min-width: 120px; height: 48px; border: 0; border-radius: 999px; background: #f0e2b8; color: #5b3b1d; font: 400 19px "Jua", "Malgun Gothic", sans-serif; box-shadow: 0 4px 0 #cdb97f; cursor: var(--cur-pointer); }
.world-debug-gather { flex: 1 0 100%; color: #fff; font: 12px "Malgun Gothic", sans-serif; }
.world-debug-gather[hidden] { display: none; }
.quest-fly { position: fixed; z-index: 9999; width: 48px; height: 48px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px #4a2f0a66); }
.quest-gain { width: max-content; white-space: nowrap; }

/* 건물 고치는 연출(가구 상점 재건): 먼지 구름 · 망치·톱 · 반짝이. world.js playBuild */
.build-fx { position: absolute; pointer-events: none; }
.build-puff { position: absolute; width: 56%; aspect-ratio: 1; opacity: 0; transform: scale(.3);
  background: center / contain no-repeat; filter: drop-shadow(0 4px 6px #5b3b1d33); animation: build-puff 4.2s ease-in-out forwards; }
.build-bit { position: absolute; height: auto; pointer-events: none; }
@keyframes build-puff { 0% { opacity: 0; transform: scale(.3) translateY(10%); } 22% { opacity: .96; transform: scale(1) translateY(0); } 58% { opacity: .96; transform: scale(1.18) translate(3%, -4%); } 100% { opacity: 0; transform: scale(1.55) translate(-4%, -18%); } }
.build-tool { position: absolute; width: calc(var(--bw, 400px) * .27); height: auto; opacity: 0; filter: drop-shadow(0 3px 2px #4a2f0a66); }
.build-hammer { transform-origin: 85% 90%; transition: left .3s cubic-bezier(.3,1.4,.5,1), top .3s cubic-bezier(.3,1.4,.5,1); animation: build-tool 5.6s forwards, build-hammer .54s ease-in-out infinite; }
.build-saw { transform-origin: 50% 50%; transition: left .3s cubic-bezier(.3,1.4,.5,1), top .3s cubic-bezier(.3,1.4,.5,1); animation: build-tool 5.6s forwards, build-saw .21s ease-in-out infinite alternate; width: calc(var(--bw, 400px) * .34); }
@keyframes build-tool { 0% { opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes build-hammer { 0%, 100% { rotate: -50deg; } 50% { rotate: 22deg; } }
@keyframes build-saw { from { translate: -14% 0; rotate: -8deg; } to { translate: 14% 0; rotate: 8deg; } }
.build-star { position: absolute; width: calc(var(--bw, 400px) * .09); height: auto; opacity: 0; transform: scale(0); animation: build-star .9s ease-out forwards; }
@keyframes build-star { 0% { opacity: 0; transform: scale(0) rotate(0); } 35% { opacity: 1; transform: scale(1.3) rotate(25deg); } 100% { opacity: 0; transform: scale(.4) rotate(80deg) translateY(-30%); } }
/* 건물 고치는 연출 동안(main.js buildCinematic): 모든 화면 요소를 걷어 내고 연출에만 집중한다 */
body.cinematic .world-header, body.cinematic .world-controls, body.cinematic .world-hint, body.cinematic .quest-bag, body.cinematic .quest-bag-pop,
body.cinematic .sound-btn, body.cinematic .sound-panel, body.cinematic .world-speech, body.cinematic .gather-spark, body.cinematic .npc-alert,
body.cinematic .notice-alert, body.cinematic .world-building-label, body.cinematic .npc-talk-label, body.cinematic .world-building-card { opacity: 0 !important; pointer-events: none !important; transition: opacity .35s ease; }
body.cinematic #world-stage { pointer-events: none; }
.quest-bag-row.is-need { padding: 3px 6px; margin: 2px -6px; border-radius: 10px; background: #fff0c2; }
.quest-bag-row.is-need.is-ok { background: #e4f8dc; }
.quest-bag-row.is-spare { opacity: .5; }
.quest-bag-row em { min-width: 34px; font-style: normal; font-size: 12px; text-align: center; color: #c0661a; }
.quest-bag-row.is-ok em { color: #3a9a3a; font-size: 16px; }
.quest-gift { position: absolute; z-index: 75; left: 50%; top: 42%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px 16px; border-radius: 24px; background: #fff7e6f2; border: 4px solid #f0d58a; box-shadow: 0 12px 28px #3a260c66; pointer-events: none; transform: translate(-50%, -50%); font-family: "Jua", "Malgun Gothic", sans-serif; color: #5b3b1d; }
.quest-gift img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 4px 3px #4a2f0a44); }
.quest-gift strong { font-weight: 400; font-size: 20px; white-space: nowrap; }

/* ── 우리 집 가구·비버 목공소(docs/beaver-workshop-plan.md) ── */
.world-furniture { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.world-furniture.is-selected { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ffc93a); }
.world-furniture.is-ghost { opacity: .72; filter: drop-shadow(0 0 5px #55c47d); }
.world-furniture.is-ghost.is-bad { filter: sepia(.7) saturate(4) hue-rotate(-45deg) drop-shadow(0 0 6px #e5483b); }
.furniture-bar { position: absolute; z-index: 41; left: 50%; transform: translateX(-50%); bottom: calc(46px + env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100% - 20px)); display: grid; gap: 6px; justify-items: center; padding: 8px 12px 10px; border-radius: 20px; background: #fff7e6f2; border: 3px solid #f0d58a; box-shadow: 0 6px 18px #0004; color: #5b3b1d; font: 400 15px "Jua", "Malgun Gothic", sans-serif; }
.furniture-bar.is-follow { width: max-content; max-width: min(520px, calc(100% - 20px)); }
.furniture-bar.is-bad { border-color: #e9a094; }
.furniture-title { font-weight: 400; font-size: 17px; }
.furniture-msg { min-height: 1.2em; font-size: 13px; color: #8a5a35; text-align: center; }
.furniture-bar.is-bad .furniture-msg { color: #b23a2c; }
.furniture-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.furniture-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; border: 0; border-radius: 999px; background: #f0b933; color: #5b3b1d; font: inherit; font-size: 15px; box-shadow: 0 3px 0 #c8921b; cursor: var(--cur-pointer); }
.furniture-btn img { width: 26px; height: 26px; object-fit: contain; }
.furniture-btn.is-primary { background: #7fd49a; box-shadow: 0 3px 0 #4aa56b; }
.furniture-btn.is-quiet { background: #f0e2b8; box-shadow: 0 3px 0 #cdb97f; }
.furniture-btn:disabled { opacity: .45; cursor: var(--cur-denied); }
.furniture-shop { width: min(820px, calc(100% - 20px)); max-height: calc(100% - 96px); display: flex; flex-direction: column; }
.furniture-shop .housing-cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; overflow-x: hidden; overflow-y: auto; max-height: min(58vh, 520px); scroll-snap-type: none; overscroll-behavior: contain; padding: 6px 4px 10px; }
.furniture-shop .housing-card { flex: none; width: auto; padding: 8px 6px; font-size: 16px; }
.furniture-shop .housing-card > img { width: 100%; max-width: 112px; height: auto; aspect-ratio: 1; }
.furniture-shop .shop-empty { grid-column: 1 / -1; }
.furniture-card > img { object-fit: contain; background: #fff8e8; }
.furniture-shop .housing-cost { font-size: 16px; }
.furniture-shop .housing-cost img { width: 18px; height: 18px; }
.furniture-card .housing-cost, .furniture-card em { text-align: center; }
.shop-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.shop-cats:empty { display: none; }
.shop-cat[hidden] { display: none; }
.shop-slots { padding: 2px 10px; border-radius: 14px; background: #fff; border: 2px solid #e8d7a8; font-size: 13px; white-space: nowrap; }
.shop-empty { margin: 14px auto; font-size: 14px; color: #8a5a35; text-align: center; }
.workshop-pic { flex: none; width: min(100%, 360px); aspect-ratio: 8 / 5; object-fit: contain; border-radius: 14px; }
.workshop-talk .quest-talk { flex-wrap: wrap; justify-content: center; }
.quest-skip { min-width: 100px; height: 48px; border: 0; border-radius: 999px; background: transparent; color: #8a5a35; font: 400 16px "Jua", "Malgun Gothic", sans-serif; text-decoration: underline; cursor: var(--cur-pointer); }
@media (max-height: 460px) { .furniture-bar { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); padding: 6px 10px 8px; } .furniture-btn { min-height: 38px; font-size: 14px; } }
.housing-tab, .housing-head strong { white-space: nowrap; }
@media (max-width: 520px) { .housing-head { flex-wrap: wrap; row-gap: 6px; } .housing-head strong { flex: 1; } .housing-tabs { order: 5; flex-basis: 100%; } .shop-slots { font-size: 12px; } }

/* ---------- 문장 교실 (docs/english-school-v2-plan.md §4.2) ---------- */
/* 패턴 카드: 칠판 아래 초록 게시판에 종이 카드(예문 하나 + 대표 그림 + 익힘 별) */
.en-patterns { width: 100%; box-sizing: border-box; padding: 14px 16px 18px; border: 10px solid var(--en-wood); border-radius: 12px; background: var(--en-board); box-shadow: inset 0 0 30px #0005, 0 8px 0 var(--en-wood-dark); color: var(--en-chalk); }
.en-pattern-level { margin: 6px 0 10px; font-size: 1.2rem; font-weight: 400; color: var(--en-crayon); }
.en-carousel { position: relative; margin-bottom: 8px; }
.en-carousel-track { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 10px; padding: 16px 10px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.en-carousel-track::-webkit-scrollbar { display: none; }
.en-carousel-track > .en-pattern { flex: 0 0 150px; scroll-snap-align: start; }
.en-carousel-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: none; width: 38px; height: 38px; padding: 0 0 4px; border: 0; border-radius: 50%; font: inherit; font-size: 1.7rem; line-height: 1; color: #4A3200; background: var(--en-crayon); box-shadow: 0 3px 0 var(--en-crayon-dark), 0 0 0 3px #0003; cursor: var(--cur-pointer); }
.en-carousel-btn.is-prev { left: -8px; }
.en-carousel-btn.is-fwd { right: -8px; }
.en-carousel-btn:disabled { opacity: 0; pointer-events: none; }
.en-carousel.is-scroll .en-carousel-btn { display: block; }
@media (hover: none) { .en-carousel-btn { display: none !important; } }
/* 옆에 더 있다는 표시: 가장자리 그늘 + 깜빡이는 ‹ ›(눌러지지 않음, 터치 화면용) + 아래 점(보이는 카드가 켜짐) */
.en-carousel::before, .en-carousel::after { position: absolute; top: 0; bottom: 18px; width: 34px; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s; font-size: 2rem; line-height: 1; color: var(--en-crayon); text-shadow: 0 2px 0 #0006; }
.en-carousel::before { content: "‹"; left: 0; background: linear-gradient(90deg, #0009, transparent); }
.en-carousel::after { content: "›"; right: 0; background: linear-gradient(270deg, #0009, transparent); animation: en-hint 1.4s ease-in-out infinite; }
.en-carousel.has-prev::before, .en-carousel.has-next::after { opacity: 1; }
@keyframes en-hint { 50% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { .en-carousel::after { animation: none; } }
.en-carousel-dots { display: none; justify-content: center; gap: 6px; padding-top: 2px; }
.en-carousel.is-scroll .en-carousel-dots { display: flex; }
.en-carousel-dots i { width: 8px; height: 8px; border-radius: 50%; background: #F7F4E844; transition: background .2s, width .2s; }
.en-carousel-dots i.is-on { width: 16px; border-radius: 4px; background: var(--en-crayon); }
.en-pattern {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px;
  font: inherit; color: var(--en-ink); cursor: var(--cur-pointer); border: 0; border-radius: 12px;
  background: var(--en-paper); box-shadow: 0 5px 0 #0004; rotate: -1deg;
}
.en-pattern:nth-child(even) { rotate: 1deg; }
.en-pattern:active { translate: 0 3px; box-shadow: 0 2px 0 #0004; }
.en-pattern.is-next { outline: 4px solid var(--en-crayon); outline-offset: 2px; }
.en-pattern.is-mastered { background: #FFF1C9; }
.en-pattern-pic { display: grid; place-items: center; width: 74px; height: 74px; }
.en-pattern-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.en-pattern-emoji { font-size: 44px; }
.en-pattern-text { font-family: var(--en-en); font-weight: 700; font-size: 1.2rem; line-height: 1.2; text-align: center; }
.en-pattern-stars { font-size: 1rem; letter-spacing: .08em; color: #E0A400; }
.en-pattern-ribbon { position: absolute; top: -9px; left: 50%; translate: -50% 0; padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-size: .8rem; color: #4A3200; background: var(--en-crayon); box-shadow: 0 2px 0 var(--en-crayon-dark); }
.en-pattern-ribbon.is-due { background: #FF9F6B; box-shadow: 0 2px 0 #D46A33; }
.en-pattern-ribbon.is-new { background: #8FD3FF; box-shadow: 0 2px 0 #4F9FD0; }

/* 문제 */
.en-board.is-sentence { gap: 12px; }
.en-sentence-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.en-sentence-line { margin: 0; font-family: var(--en-en); font-weight: 700; font-size: 1.9rem; line-height: 1.3; text-align: center; color: var(--en-chalk); }
.en-sentence-line.is-meaning { font-family: var(--en-ko); font-size: 1.6rem; font-weight: 400; color: var(--en-crayon); }
.en-sentence-reveal { margin: 0; font-family: var(--en-en); font-weight: 700; font-size: 1.8rem; color: var(--en-crayon); text-shadow: 0 2px 0 #0004; }
.en-sight { display: grid; place-items: center; padding: 24px; }
.en-sight .en-word { font-size: 3rem; color: var(--en-ink); }
/* 낱말 칸·타일: 글자 하나짜리보다 넓다 */
.en-word-slots { flex-wrap: wrap; max-width: 640px; }
.en-word-slot { flex: 0 1 auto; min-width: 74px; padding: 0 12px; font-size: 1.5rem; }
.en-word-tiles { max-width: 640px; }
.en-word-tile { width: auto; min-width: 64px; padding: 0 14px; font-size: 1.5rem; }
@media (max-width: 480px) {
  .en-carousel-track { gap: 10px; }
  .en-carousel-track > .en-pattern { flex-basis: 140px; }
  .en-sentence-line { font-size: 1.5rem; }
  .en-word-slot { min-width: 56px; padding: 0 8px; font-size: 1.25rem; height: 48px; }
  .en-word-tile { min-width: 52px; padding: 0 10px; font-size: 1.25rem; height: 50px; }
}
.en-patterns .en-levels { padding: 0 0 6px; }
.en-patterns .en-shelf-info { margin: 4px 0 12px; text-align: center; font-size: .95rem; color: #F7F4E8cc; }
.en-pattern-lock { margin: 4px 0 8px; text-align: center; }
.en-pattern-lock[hidden] { display: none; }
/* 카드별 단계: 진행 막대·잠김·통과 */
.en-pattern-tiers { display: flex; flex-direction: column; gap: 6px; }
.en-pattern-bar { display: block; width: 80%; height: 6px; margin-top: 2px; border-radius: 3px; background: #2B3A3522; overflow: hidden; }
.en-pattern-bar::after { content: ""; display: block; width: var(--fill, 0%); height: 100%; background: var(--en-ok); }
.en-pattern.is-locked { opacity: .55; filter: grayscale(.5); }
.en-pattern-lockmark { position: absolute; top: 6px; right: 8px; font-size: 1.1rem; }
.en-pattern.is-cleared .en-pattern-text::after { content: " ✓"; color: var(--en-ok); }
.en-pattern.is-shake { animation: en-wobble .35s; }
.en-bonus.is-unlock { color: var(--en-crayon); }

/* 문장 교실 단계 색: 1 초록 · 2 파랑 · 3 보라(빛이 흐름) · 4 금빛 무지개(반짝 + 빛무리). 카드 테두리·오른쪽 위 단계 표시·단계 안내가 같은 색 */
.en-stage-pill[data-stage], .en-pattern[data-stage] { --st: #5BBE6A; --st-dark: #2F7F3C; --st-bg: linear-gradient(180deg, #8BDD94, var(--st)); }
.en-stage-pill[data-stage="2"], .en-pattern[data-stage="2"] { --st: #4FA3E8; --st-dark: #24689F; --st-bg: linear-gradient(180deg, #86C6F5, var(--st)); }
.en-stage-pill[data-stage="3"], .en-pattern[data-stage="3"] { --st: #A66BE0; --st-dark: #6B35A8; --st-bg: linear-gradient(115deg, #7A3FC4 0%, #C79BF2 40%, #F3E3FF 50%, #C79BF2 60%, #7A3FC4 100%); }
.en-stage-pill[data-stage="4"], .en-pattern[data-stage="4"] { --st: #F2B21F; --st-dark: #A8700A; --st-bg: linear-gradient(115deg, #FF8A5B, #FFD23F, #6BD97A, #4FC3F7, #B07CFF, #FF8A5B); }
.en-stage-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 10px 8px 0; }
.en-stage-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border: 0; border-radius: 999px; font: inherit; font-size: .8rem; color: #fff; background: var(--st-bg); background-size: 220% 100%; box-shadow: 0 2px 0 var(--st-dark); }
.en-stage-pill b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--st-dark); font-size: .8rem; }
.en-stage-pill[data-stage="4"] { color: #5B3B00; }
button.en-stage-pill { cursor: var(--cur-pointer); }
button.en-stage-pill[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 1px; }
.en-stage-pill[data-stage="3"], .en-stage-pill[data-stage="4"], .en-pattern[data-stage="3"], .en-pattern[data-stage="4"] { animation: en-stage-shine 3.2s linear infinite; }
.en-pattern[data-stage] {
  border: 5px solid transparent; padding: 7px 3px 5px;
  background: linear-gradient(var(--en-paper), var(--en-paper)) padding-box, var(--st-bg) border-box; background-size: 100% 100%, 220% 100%;
  box-shadow: 0 5px 0 var(--st-dark);
}
.en-pattern[data-stage].is-mastered { background: linear-gradient(#FFF1C9, #FFF1C9) padding-box, var(--st-bg) border-box; }
.en-pattern[data-stage="3"] { box-shadow: 0 5px 0 var(--st-dark), 0 0 10px 1px #A66BE077; }
.en-pattern[data-stage="4"] { animation: en-stage-shine 3.2s linear infinite, en-stage-glow 2s ease-in-out infinite; }
.en-pattern-stage { position: absolute; top: -7px; right: -7px; padding: 2px 9px; border-radius: 999px; font-size: .8rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 0 #0004; background: var(--st-bg); background-size: 220% 100%; box-shadow: 0 2px 0 var(--st-dark), 0 0 0 2px #fff; }
.en-pattern[data-stage="3"] .en-pattern-stage, .en-pattern[data-stage="4"] .en-pattern-stage { animation: en-stage-shine 3.2s linear infinite; }
.en-pattern[data-stage="4"] .en-pattern-stage { color: #5B3B00; text-shadow: 0 1px 0 #fff8; }
.en-bonus.is-demote { color: #C2603A; }
@keyframes en-stage-shine { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 220% 0; } }
@keyframes en-stage-glow { 0%, 100% { box-shadow: 0 5px 0 var(--st-dark), 0 0 8px 1px #FFD23F88; } 50% { box-shadow: 0 5px 0 var(--st-dark), 0 0 18px 5px #FFD23FCC; } }
@media (prefers-reduced-motion: reduce) { .en-stage-pill, .en-pattern[data-stage], .en-pattern-stage { animation: none !important; } }
.en-pattern .en-pattern-ribbon { left: 4px; translate: 0 0; font-size: .7rem; padding: 1px 8px; }

/* 수학 교실(math-screen.js): 영어 칠판 교실(.en-*)과 같은 틀에 수 그림·보기·숫자 패드·풀이 그림 */
.ma-question { gap: 12px; }
.ma-prompt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ma-equation { margin: 0; font-family: var(--en-en); font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; color: var(--en-chalk); }
.ma-card-example { font-family: var(--en-en); font-size: .95rem; color: #5B3A29cc; text-align: center; }
.ma-stem-view { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; max-width: 100%; padding: 10px 16px; border-radius: 14px; background: var(--en-paper); color: var(--en-ink); box-shadow: 0 4px 0 #0004; }
.ma-stem-view.is-equation { display: none; }
.ma-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ma-dot { font-style: normal; font-size: 1.9rem; line-height: 1.1; }
.ma-dots.is-counted .ma-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F2B21F; color: #4A3200; font-family: var(--en-en); font-weight: 700; font-size: 1.1rem; }
.ma-box { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border: 3px solid #5B3A29; border-radius: 10px; background: #fff; font-family: var(--en-en); font-weight: 700; font-size: 1.6rem; }
.ma-box.is-big { min-width: 84px; height: 84px; font-size: 2.6rem; }
.ma-box.is-blank { background: #FFF1B8; border-style: dashed; }
.ma-op, .ma-comma { font-family: var(--en-en); font-weight: 700; font-size: 1.6rem; }
.ma-bignumber { font-family: var(--en-en); font-weight: 700; font-size: 3.4rem; line-height: 1.1; }
.ma-blocks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px; }
.ma-block-group { display: flex; flex-wrap: wrap; gap: 4px; max-width: 170px; justify-content: center; }
.ma-block-group i { display: block; }
.ma-block-group.is-hundred i { width: 30px; height: 30px; border-radius: 4px; background: #F2B21F; box-shadow: inset 0 0 0 2px #A8700A; }
.ma-block-group.is-ten i { width: 12px; height: 40px; border-radius: 3px; background: #4FA3E8; box-shadow: inset 0 0 0 2px #24689F; }
.ma-block-group.is-one i { width: 14px; height: 14px; border-radius: 50%; background: #5BBE6A; box-shadow: inset 0 0 0 2px #2F7F3C; }
.ma-coin-group { display: flex; flex-wrap: wrap; gap: 4px; }
.ma-coin { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-style: normal; font-family: var(--en-en); font-weight: 700; font-size: .95rem; color: #5B3B00; background: radial-gradient(circle at 35% 30%, #FFE680, #F2B21F); box-shadow: inset 0 0 0 3px #C98A0A, 0 2px 0 #0004; }
.ma-item { padding: 6px 14px; border-radius: 999px; background: #FFF1C9; border: 3px solid #E0A400; font-weight: 700; font-size: 1.15rem; }
.ma-item.is-paid { background: #D9F0DB; border-color: #5BBE6A; }
.ma-svg { display: inline-block; line-height: 0; }
.ma-clock { width: 168px; height: 168px; }
.ma-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; }
.ma-choice { min-width: 92px; padding: 14px 22px; border: 0; border-radius: 14px; font: inherit; font-family: var(--en-en); font-weight: 700; font-size: 1.8rem; cursor: var(--cur-pointer); color: var(--en-ink); background: var(--en-paper); box-shadow: 0 5px 0 #0004; }
.ma-choice:active { translate: 0 3px; box-shadow: 0 2px 0 #0004; }
.ma-choice.is-correct { background: #BFEAC1; outline: 4px solid var(--en-ok); }
.ma-choice.is-wrong { opacity: .4; }
.ma-choice.is-hint { outline: 4px solid var(--en-crayon); }
.ma-pad-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ma-answer { min-width: 150px; padding: 6px 22px; border: 3px solid #5B3A29; border-radius: 12px; background: #fff; color: var(--en-ink); font-family: var(--en-en); font-weight: 700; font-size: 2.4rem; text-align: center; }
.ma-answer.is-empty { color: #aaa; }
.ma-answer.is-correct { background: #BFEAC1; border-color: var(--en-ok); }
.ma-answer.is-wrong { background: #FFD6C9; animation: en-wobble .35s; }
.ma-pad { display: grid; grid-template-columns: repeat(3, 74px); gap: 10px; justify-content: center; }
.ma-key { height: 56px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 1.5rem; cursor: var(--cur-pointer); color: var(--en-ink); background: var(--en-paper); box-shadow: 0 4px 0 #0004; }
.ma-key:active { translate: 0 2px; box-shadow: 0 2px 0 #0004; }
.ma-key.is-ok { color: #4A3200; background: var(--en-crayon); font-size: 1.15rem; }
.ma-clockset { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ma-clockset-face { touch-action: none; user-select: none; cursor: grab; }
.ma-clockset-face:active { cursor: grabbing; }
.ma-clockset-face.is-correct { cursor: default; }
.ma-clockset-face.is-correct .ma-clock { filter: drop-shadow(0 0 8px var(--en-ok)); }
.ma-clockset-face.is-wrong { animation: en-wobble .35s; }
.ma-clockset-label { margin: 0; font-weight: 700; font-size: 1.5rem; color: var(--en-chalk); }
.ma-clockset-controls { display: flex; gap: 22px; }
.ma-stepper { display: flex; align-items: center; gap: 8px; }
.ma-stepper-name { color: var(--en-chalk); font-size: 1.1rem; }
.ma-stepper .ma-key { width: 54px; height: 46px; font-size: 1.2rem; }
.ma-solution { width: 100%; max-width: 520px; padding: 10px 14px; border: 3px dashed #F7F4E8aa; border-radius: 14px; background: #0003; text-align: center; }
.ma-solution[hidden] { display: none; }
.ma-explain { margin: 4px 0 0; font-size: 1.1rem; color: var(--en-chalk); }
.ma-explain.is-answer { color: var(--en-crayon); font-weight: 700; }
.ma-hint-view { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 6px; }
.ma-frame { display: grid; grid-template-columns: repeat(5, 28px); gap: 3px; padding: 4px; border: 3px solid #F7F4E8; border-radius: 6px; }
.ma-frame i { display: block; width: 28px; height: 28px; border-radius: 4px; background: #F7F4E822; }
.ma-frame i.is-a { background: #5BBE6A; }
.ma-frame i.is-b { background: #4FA3E8; }
.ma-frame i.is-out { background: #888; opacity: .6; }
.ma-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.ma-line i { display: grid; place-items: center; min-width: 30px; height: 32px; padding: 0 3px; border-radius: 6px; font-style: normal; font-family: var(--en-en); font-weight: 700; font-size: .9rem; color: var(--en-chalk); background: #F7F4E81a; }
.ma-line i.is-end { background: var(--en-crayon); color: #4A3200; }
.ma-coin-line { padding: 4px 12px; border-radius: 999px; background: #F2B21F; color: #4A3200; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ma-answer.is-wrong, .ma-clockset-face.is-wrong { animation: none; } }

/* 트리움 로비 교실 문: 문 위 이름판에 번호, 문 가운데에 상태 그림, 이름표 색(열림·새로 열림·잠김·준비 중) */
.world-door-sign { position: absolute; left: 50%; top: 0; display: grid; place-items: center; width: var(--sign-size, 22px); height: var(--sign-size, 22px); border-radius: 50%; transform: translate(-50%, calc(-50% - var(--sign-y, 0px))); font: 800 calc(var(--sign-size, 22px) * .62)/1 "Malgun Gothic", sans-serif; line-height: 1; color: #4A3200; background: radial-gradient(circle at 35% 30%, #FFE680, #F2B21F); box-shadow: inset 0 0 0 2px #B97F06, 0 2px 0 #0004; pointer-events: none; }
.world-building .world-door-mark { position: absolute; display: block; line-height: 0; left: 50%; top: 0; width: var(--mark-size, 40px); height: auto; transform: translate(-50%, calc(-100% - var(--mark-y, 0px))); pointer-events: none; filter: drop-shadow(0 2px 2px #0005); }
.world-building .world-door-mark[hidden] { display: none; }
.world-door-sign[hidden], .world-building-baked .world-building-label[hidden] { display: none; }
.world-door-mark-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); padding: .08em .35em; border-radius: 4px; background: #FFF8E6ee; box-shadow: 0 1px 0 #0005; color: #5B3A29; font: 800 calc(var(--mark-size, 40px) * .26)/1.2 "Malgun Gothic", sans-serif; white-space: nowrap; }
.world-door-mark-text:empty { display: none; }
.world-building[data-door="new"] .world-door-sign { box-shadow: inset 0 0 0 2px #B97F06, 0 0 0 3px #fff, 0 0 10px 3px #FFE680; }
.world-building[data-door="new"] .world-door-mark { left: calc(50% + var(--sign-size, 22px) * .45); width: calc(var(--sign-size, 22px) * 1.1); transform: translate(0, calc(-50% - var(--sign-y, 0px) - var(--sign-size, 22px) * .3)); }
.world-building[data-door="locked"] .world-door-sign { color: #fff; background: #8A949B; box-shadow: inset 0 0 0 2px #5F6A72, 0 2px 0 #0004; }
.world-building[data-door="soon"] .world-door-sign { color: #EEE; background: #5A5F66; box-shadow: inset 0 0 0 2px #3A3E44, 0 2px 0 #0004; }
.world-building[data-door="locked"] .world-building-label { background: #E4E6E8; border-color: #AEB6BC; color: #5F6A72; }
.world-building[data-door="soon"] .world-building-label { background: #D9D9D9; border: 1px dashed #8A8A8A; color: #666; }

/* 교실 화면 아래에 더 있다는 표시(scroll-hint.js): 아래쪽이 어두워지고 ▼ 단추가 통통 튄다 */
.scroll-hint { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; height: 96px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; background: linear-gradient(180deg, transparent, #2B1B0E66); }
.scroll-hint[hidden] { display: none; }
.scroll-hint-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: .95rem; color: #4A3200; background: var(--en-crayon, #FFD23F); box-shadow: 0 3px 0 var(--en-crayon-dark, #C98A0A), 0 0 0 3px #fff8; cursor: var(--cur-pointer); pointer-events: auto; animation: scroll-hint-bob 1.3s ease-in-out infinite; }
.scroll-hint-arrow { display: inline-block; font-size: .85rem; }
@keyframes scroll-hint-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint-btn { animation: none; } }

/* 관리자 트리움 탭: 공통·영어·수학 구역 단추 */
.admin-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.admin-subtabs .activity-chip { padding: 9px 22px; font-size: 1rem; font-weight: 700; }

/* 샴푸 효과(미용실 샴푸대): 캐릭터 그림 상자(512 캔버스) 안 비율 좌표. 샤워기에서 떨어지는 물방울과 머리 위 거품 방울 */
.shampoo-fx { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.shampoo-fx i { position: absolute; display: block; opacity: 0; }
.shampoo-fx .drop { left: calc(17% + var(--i) * 1.4%); top: 35%; width: 1.9%; height: 4.2%; border-radius: 50%; background: linear-gradient(#e6f6ff, #8fd0f2); box-shadow: 0 0 2px #fff; animation: shampoo-drop .55s linear infinite; animation-delay: calc(var(--i) * -.11s); }
.shampoo-fx .bub { left: calc(10% + var(--i) * 6.5%); top: calc(46% + (var(--i) % 3) * 3%); width: calc(3.2% + var(--i) * .4%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e4f4ff 60%, #b9defa 100%); animation: shampoo-bub 1.8s ease-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes shampoo-drop { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 85% { opacity: .95; } 100% { opacity: 0; transform: translate(5%, 12%); } }
@keyframes shampoo-bub { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(var(--i) * .6% - 1.5%), -11%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .shampoo-fx i { animation-duration: 3s; } }
/* 샴푸 중 화면 전체의 투명 거품: 아래에서 보글보글 올라오다가 끝 무렵 전체가 서서히 걷힌다 */
.shampoo-screen { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; animation: shampoo-clear var(--wash-t, 6s) linear forwards; }
.shampoo-screen i { position: absolute; bottom: -90px; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(240,250,255,.7) 28%, rgba(176,220,252,.55) 64%, rgba(255,255,255,.95) 100%); border: 2px solid rgba(255,255,255,.95); box-shadow: inset 0 0 10px rgba(255,255,255,.9), 0 0 8px rgba(120,190,240,.85), 0 2px 6px rgba(60,120,180,.35); animation: shampoo-rise 3s ease-out both; }
@keyframes shampoo-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--sway, 0), -75vh) scale(1.1); } }
@keyframes shampoo-clear { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shampoo-screen { display: none; } }

/* ===== 숨은그림찾기 (hidden-screen.js) — 오락실 게임기 화면. 큰 그림 한 장 + 아래 찾을 물건 줄 ===== */
body.hidden-wide #app { max-width: none; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.hidden-wide { background: linear-gradient(165deg, #1d6f8f 0%, #2a9d9a 55%, #3b6fc4 100%); }
.hidden-screen { flex: none; min-height: 0; overflow: hidden; height: var(--app-h, 100dvh); flex-direction: column; gap: 8px; padding: 8px 12px 10px; font-family: "Jua", "Malgun Gothic", sans-serif; color: #fff; }
.hidden-screen.active { display: flex; }
.hs-bar { display: flex; align-items: center; gap: 10px; flex: none; }
.hs-title { flex: 1; font-size: 20px; text-shadow: 0 2px 0 #0003; }
.hs-level { border: 0; border-radius: 999px; padding: 6px 12px; background: #fffaf0cc; color: #3b2a14; font: inherit; font-size: 14px; }
.hs-level.is-preview { cursor: var(--cur-pointer); outline: 2px dashed #ff5a8a; }
.hs-btn { border: 0; border-radius: 999px; padding: 9px 14px; background: #ffd23f; color: #4a3200; font: inherit; font-size: 15px; box-shadow: 0 3px 0 #0003; cursor: var(--cur-pointer); }
.hs-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.hs-pic { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px #0006; touch-action: manipulation; user-select: none; }
.hs-pic img { display: block; width: 100%; height: 100%; pointer-events: none; }
.hs-marks { position: absolute; inset: 0; pointer-events: none; }
.hs-marks span { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.hs-ok { width: 9%; aspect-ratio: 1; border: 5px solid #ffe14d; box-shadow: 0 0 14px #ffe14d, inset 0 0 10px #fff8; animation: hs-pop .45s ease-out; }
.hs-miss { width: 6%; aspect-ratio: 1; border: 4px solid #ff6b6b; opacity: 0; animation: hs-miss 1s ease-out; }
.hs-again { width: 6%; aspect-ratio: 1; border: 4px solid #fff; opacity: 0; animation: hs-miss .8s ease-out; }
.hs-hint-ring { border: 5px dashed #fff; box-shadow: 0 0 18px #fff; animation: hs-hint 1.4s ease-in-out infinite; }
@keyframes hs-pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.25); } }
@keyframes hs-miss { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes hs-hint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hs-msg { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: #000b; color: #fff; font-size: 15px; }
.hs-items { flex: none; display: flex; gap: 8px; justify-content: center; }
.hs-item { flex: 1 1 0; max-width: 130px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 0; border-radius: 14px; background: #fffaf0; color: #3b2a14; font: inherit; cursor: var(--cur-pointer); box-shadow: 0 3px 0 #0003; }
.hs-item img { width: 100%; max-width: 64px; aspect-ratio: 1; object-fit: contain; }
.hs-word { font: 700 15px "Andika", "Segoe UI", sans-serif; }
.hs-ko { font-size: 12px; opacity: .7; }
.hs-q { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; object-fit: contain; }
.hs-item.is-hidden { background: #fffaf0cc; }
.hs-item.is-target { outline: 4px solid #ffd23f; animation: hs-hint 1.2s ease-in-out infinite; }
.hs-item.is-found { background: #d8f5d3; }
.hs-item.is-found img { opacity: .55; }
.hs-item.is-found::after { content: ""; width: 24px; height: 24px; background: url(/public/hidden/ui/check.webp) center / contain no-repeat; }
.hs-result { position: absolute; inset: 0; margin: auto; width: min(92%, 380px); height: max-content; padding: 20px 18px; border-radius: 20px; background: #fffaf0; color: #3b2a14; text-align: center; box-shadow: 0 10px 30px #0008; z-index: 5; }
.hs-result h2 { margin: 0 0 6px; font-size: 26px; }
.hs-result p { margin: 4px 0; font-size: 17px; }
.hs-stars { font-size: 44px; letter-spacing: 6px; color: #d9d2c0; }
.hs-stars .on { color: #ffc400; text-shadow: 0 2px 0 #b8860b; animation: hs-pop .5s ease-out both; }
.hs-result-btns { display: flex; gap: 10px; margin-top: 14px; }
.hs-result-btns button { flex: 1; }
@media (prefers-reduced-motion: reduce) { .hidden-screen *, .hidden-screen *::after { animation: none !important; } }
.hs-editbar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: #000c; color: #fff; font-size: 13px; }
.hs-editbar button { border: 0; border-radius: 8px; padding: 6px 10px; background: #ffd23f; color: #4a3200; font: inherit; cursor: var(--cur-pointer); }
.hs-edit-circle { border: 3px solid #ff4d6d; background: #ff4d6d33; color: #fff; font: 700 12px "Segoe UI", sans-serif; display: grid; place-items: center; text-shadow: 0 1px 2px #000; }
.hs-edit-circle.is-sel { border-color: #ffe14d; background: #ffe14d44; }
.hs-timer { padding: 6px 12px; border-radius: 999px; background: #0004; font-size: 16px; font-variant-numeric: tabular-nums; }
.hs-timer.is-low { background: #e23e70; animation: hs-hint .8s ease-in-out infinite; }
.hs-timebar { flex: none; height: 8px; border-radius: 999px; background: #0003; overflow: hidden; }
.hs-timebar i { display: block; height: 100%; width: 100%; background: #ffd23f; transform-origin: left; transition: transform 1s linear; }
.hs-timebar.is-low i { background: #ff5a8a; }
.hs-editbar[hidden], .hs-timer[hidden], .hs-timebar[hidden], .hs-result[hidden], .hs-msg[hidden] { display: none; }
.hs-stars { font-size: 34px; letter-spacing: 3px; line-height: 1.1; }
.hs-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 20; opacity: 0; box-shadow: inset 0 0 90px 24px #ff2d55; transition: opacity .4s; }
.hidden-screen.is-urgent .hs-vignette { opacity: 1; animation: hs-beat 1.2s ease-in-out infinite; }
.hidden-screen.is-final .hs-vignette { animation-duration: .6s; box-shadow: inset 0 0 120px 40px #ff2d55; }
@keyframes hs-beat { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
.hs-timer.tick { animation: hs-tick .5s ease-out; }
.hidden-screen.is-final .hs-timer { font-size: 22px; }
@keyframes hs-tick { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.hs-vignette[hidden] { display: none; }
.hidden-screen { position: relative; }
.hs-vignette { background: radial-gradient(ellipse at center, transparent 50%, #ff2d55cc 100%); }
.hidden-screen.is-final .hs-vignette { background: radial-gradient(ellipse at center, transparent 38%, #ff1744dd 100%); }
.hs-hearts { display: inline-flex; filter: drop-shadow(0 2px 0 #0003); }
.hs-heart-row { display: inline-flex; gap: 1px; align-items: center; }
.hs-heart { width: 20px; height: 20px; }
.hs-hearts-big { margin: 6px 0; display: flex; justify-content: center; }
.hs-hearts-big .hs-heart-row { gap: 8px; }
.hs-hearts-big .hs-heart, .hs-hearts-big .hs-heart-break { width: 54px; height: 54px; }
/* 깨지는 하트: 4칸 이어 붙인 그림을 한 칸씩 넘긴다(마지막 칸에서 멈춤) */
.hs-heart-break { display: inline-block; width: 20px; height: 20px; background: url(/public/hidden/ui/heart_break.webp) 0 0 / 400% 100% no-repeat; animation: hs-heart-break 1s steps(1, end) .35s forwards; }
@keyframes hs-heart-break { 0% { background-position: 0 0; } 25% { background-position: 33.333% 0; } 50% { background-position: 66.666% 0; } 75%, 100% { background-position: 100% 0; } }
.hs-ico { width: 22px; height: 22px; vertical-align: middle; object-fit: contain; }
.hs-timer { display: inline-flex; align-items: center; gap: 4px; }
.hs-timer b { font-weight: 700; }
.hs-timer .hs-ico { width: 24px; height: 24px; }
.hs-timer.is-low .hs-ico { animation: hs-ring .3s ease-in-out infinite alternate; }
@keyframes hs-ring { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.hs-btn .hs-ico { margin-right: 2px; }
.hs-pic .hs-burst { position: absolute; width: 22%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; animation: hs-burst .9s ease-out forwards; }
@keyframes hs-burst { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; } 35% { transform: translate(-50%, -50%) scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5) rotate(0); opacity: 0; } }
.hs-small { font-size: 14px !important; opacity: .75; }
.hs-pick { width: 100%; margin: 8px 0 0; }
.hs-item.is-text { padding-top: 14px; }
.hs-item.is-text .hs-word { font-size: 20px; }
.hs-level[hidden] { display: none; }
.hs-bar { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 640px) { .hs-level { display: none; } .hs-title { font-size: 16px; } .hs-btn { padding: 7px 10px; font-size: 13px; } }
@media (max-width: 640px) { .hs-item.is-text .hs-word { font-size: 15px; } .hs-items { gap: 4px; } .hs-item { padding: 6px 2px; } }

/* 가로·세로 전환 대응: 카드는 그림 칸 안에서 넘치면 스크롤, 편집줄은 줄바꿈 */
.hs-result { max-height: 100%; overflow-y: auto; box-sizing: border-box; }
.hs-editbar { max-width: 96%; flex-wrap: wrap; justify-content: center; }
.hs-stage { overflow: hidden; }
/* 낮은 가로 화면(폰을 눕힘): 물건 카드는 오른쪽 세로 줄, 위 막대·카드는 작게 */
@media (orientation: landscape) and (max-height: 520px) {
  .hidden-screen.active { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 4px 10px 6px; }
  .hs-bar, .hs-timebar { grid-column: 1 / -1; }
  .hs-stage { grid-column: 1; grid-row: 3; }
  .hs-items { grid-column: 2; grid-row: 3; flex-direction: column; justify-content: flex-start; overflow-y: auto; gap: 5px; min-height: 0; width: 92px; }
  .hs-item { flex: none; max-width: none; padding: 4px 2px; }
  .hs-item img, .hs-q { max-width: 44px; }
  .hs-q { font-size: 24px; }
  .hs-word { font-size: 13px; }
  .hs-item.is-text .hs-word { font-size: 14px; }
  .hs-ko { display: none; }
  .hs-title { font-size: 15px; }
  .hs-heart { width: 20px; height: 20px; }
  .hs-timer { padding: 3px 9px; font-size: 14px; }
  .hs-result { width: min(86%, 420px); padding: 10px 14px; }
  .hs-result h2 { font-size: 20px; margin-bottom: 2px; }
  .hs-result p { font-size: 14px; margin: 2px 0; }
  .hs-stars { font-size: 24px; }
  .hs-hearts-big { margin: 2px 0; } .hs-hearts-big .hs-heart, .hs-hearts-big .hs-heart-break { width: 34px; height: 34px; } .hs-timer .hs-ico { width: 18px; height: 18px; }
  .hs-result-btns { margin-top: 8px; }
  .hs-msg { bottom: 4px; padding: 4px 12px; font-size: 13px; }
}
/* 아주 좁은 세로 화면 */
@media (max-width: 380px) { .hs-bar { gap: 6px; } .hs-title { display: none; } }
/* 소리 버튼(왼쪽 아래 고정)이 물건 카드를 가리지 않게: 세로 화면은 카드 줄 밑에 자리를 비우고, 가로 화면은 작게 */
@media (orientation: portrait) { .hidden-screen .hs-items { margin-bottom: 44px; } }
@media (orientation: landscape) and (max-height: 520px) { body.hidden-wide .sound-btn { width: 30px; height: 30px; font-size: 15px; opacity: .6; } }
/* 낮은 가로 화면: 물건 카드는 두 줄 격자(8개여도 한 화면에), 단계 칩은 숨김 */
@media (orientation: landscape) and (max-height: 520px) {
  .hs-items { display: grid; grid-template-columns: repeat(2, 62px); grid-auto-rows: min-content; align-content: start; gap: 5px; width: auto; overflow-y: auto; }
  .hs-item { padding: 3px 1px; border-radius: 10px; }
  .hs-item img, .hs-q { max-width: 36px; }
  .hs-q { font-size: 20px; }
  .hs-word, .hs-item.is-text .hs-word { font-size: 11px; }
  .hs-level { display: none; }
}
.admin-subtabs { display: flex; gap: 6px; margin: 0 0 10px; }
.admin-subtab { flex: 1; padding: 9px 10px; border: 2px solid #729574; border-radius: 12px; background: #fff; color: #4d6b50; font: inherit; font-weight: 700; cursor: pointer; }
.admin-subtab.is-active { background: #729574; color: #fff; }
.admin-subtab:focus-visible { outline: 3px solid #e0a930; outline-offset: 2px; }
#fever-form [data-sub][hidden] { display: none !important; }
/* 아래 카드는 상태(물음표·글자·그림·찾음)와 상관없이 크기가 같다: 그림 크기가 게임 중에 변하지 않게 */
.hs-item { --hs-card-h: 112px; position: relative; height: var(--hs-card-h); box-sizing: border-box; justify-content: center; overflow: hidden; }
.hs-item.is-text { padding-top: 6px; }
.hs-item.is-found::after { position: absolute; right: 3px; top: 3px; }
@media (max-width: 640px) { .hs-item { --hs-card-h: 104px; } }
@media (orientation: landscape) and (max-height: 520px) { .hs-item { --hs-card-h: 62px; } .hs-item.is-found::after { width: 16px; height: 16px; right: 1px; top: 1px; } }

/* 숨은그림찾기 시작 카드의 커다란 돋보기 */
.hs-mag-wrap { display: grid; justify-items: center; margin: 8px 0 2px; }
.hs-mag { position: relative; width: 170px; height: 170px; padding: 0; border: 0; background: none; cursor: var(--cur-pointer); animation: hs-mag-sway 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 8px #0004); }
.hs-mag-img { width: 100%; height: 100%; display: block; pointer-events: none; }
.hs-mag-q { position: absolute; left: 38.4%; top: 36.7%; transform: translate(-50%, -50%); font: 900 64px/1 "Andika", "Segoe UI", sans-serif; color: #e0701e; text-shadow: 0 2px 0 #fff9, 0 0 10px #fff8; pointer-events: none; }
.hs-mag:active { transform: scale(.94); }
.hs-mag-label { margin-top: 2px; font-weight: 800; font-size: 18px; color: #c4631a; animation: hs-mag-pulse 1.2s ease-in-out infinite; }
.hs-spark { position: absolute; width: 30px; height: 30px; animation: hs-mag-twinkle 1.6s ease-in-out infinite; pointer-events: none; }
.hs-spark.s1 { left: 4%; top: 6%; } .hs-spark.s2 { right: 2%; top: 30%; width: 24px; height: 24px; animation-delay: .5s; } .hs-spark.s3 { left: 18%; bottom: 8%; width: 22px; height: 22px; animation-delay: 1s; }
.hs-mag.is-go { animation: hs-mag-go .65s ease-in forwards; pointer-events: none; }
@keyframes hs-mag-sway { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-8px); } }
@keyframes hs-mag-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hs-mag-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(40deg); } }
@keyframes hs-mag-go { 0% { transform: scale(1) rotate(0); opacity: 1; } 55% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(5); opacity: 0; } }
@media (orientation: landscape) and (max-height: 520px) { .hs-mag { width: 96px; height: 96px; } .hs-mag-q { font-size: 36px; } .hs-mag-label { font-size: 14px; } .hs-mag-wrap { margin: 2px 0; } }
@media (prefers-reduced-motion: reduce) { .hs-mag, .hs-mag-label, .hs-spark { animation: none; } .hs-spark { opacity: 1; } .hs-mag.is-go { animation: hs-mag-go .3s ease-in forwards; } }