/* ==========================================================================
   이 월세에 다 들어간다고? — TINY ROOM CLUB
   크림 / 세이지 / 우드 팔레트, 잡지형 한글 타이포, 미니어처 평면도.
   외부 폰트·라이브러리 없이 시스템 한글 서체 스택만 사용한다.
   ========================================================================== */

:root {
  --cream: #f7f2e8;
  --cream-deep: #efe7d8;
  --paper: #fffdf8;
  --paper-2: #f6efe1;
  --ink: #2c2723;
  --ink-2: #574f46;
  --ink-soft: #7d7367;
  --line: #e4dac7;
  --line-soft: #efe7d8;

  --sage: #9fb098;
  --sage-deep: #5f7359;
  --sage-dark: #43533f;
  --sage-soft: #e3ebdf;

  --wood: #c8a17c;
  --wood-deep: #8a6647;
  --wood-soft: #ecdcc6;

  --clay: #c07352;
  --clay-soft: #f6e2d7;

  --radius-lg: 26px;
  --radius: 16px;
  --radius-sm: 11px;

  --shadow-panel: 0 26px 60px -42px rgba(78, 56, 33, 0.85), 0 2px 0 rgba(255, 255, 255, 0.7) inset;
  --shadow-soft: 0 10px 26px -18px rgba(78, 56, 33, 0.7);

  --font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-en: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  --tap: 44px;
}

/* --------------------------------------------------------------- reset -- */

.daily-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:14px; font-size:.82rem; color:var(--ink-2); }
.daily-options[hidden] { display:none; }
.daily-options label { font-weight:700; }
.daily-options select { min-height:44px; padding:8px 30px 8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--sage-dark); font:inherit; }
.daily-options p { margin:0; color:var(--ink-soft); }
.daily-options select:focus-visible { outline:3px solid var(--sage); outline-offset:2px; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(1100px 520px at 8% -12%, #fffaf0 0%, rgba(255, 250, 240, 0) 65%),
    radial-gradient(900px 480px at 108% 4%, #e9efe4 0%, rgba(233, 239, 228, 0) 62%),
    radial-gradient(700px 420px at 50% 118%, #f2e7d5 0%, rgba(242, 231, 213, 0) 70%);
  background-attachment: fixed;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--sage-deep);
  color: #fff;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---------------------------------------------------------------- page -- */

.page {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 46px) clamp(12px, 3.4vw, 32px) 40px;
}

/* ------------------------------------------------------------ masthead -- */

.masthead {
  position: relative;
  padding-bottom: clamp(16px, 3vw, 26px);
  margin-bottom: clamp(16px, 3vw, 28px);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--font-en);
  font-size: clamp(0.62rem, 2.1vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: clamp(6px, 1.4vw, 12px);
}

.masthead__title {
  font-size: clamp(1.9rem, 8.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  word-break: keep-all;
  color: var(--ink);
  text-wrap: balance;
}

.masthead__lede {
  margin-top: clamp(8px, 1.6vw, 14px);
  max-width: 46ch;
  font-size: clamp(0.86rem, 2.9vw, 1rem);
  color: var(--ink-2);
  word-break: keep-all;
}

.masthead__lede-sub {
  display: block;
  color: var(--ink-soft);
  font-size: 0.92em;
}

.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(14px, 2.6vw, 20px);
  align-items: center;
}

.modes__divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 2px;
}

.mode-btn {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
  white-space: nowrap;
}

.mode-btn:hover {
  border-color: var(--sage);
  color: var(--ink);
}

.mode-btn:active {
  transform: translateY(1px);
}

.mode-btn[aria-pressed='true'] {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: #fdfcf6;
  box-shadow: var(--shadow-soft);
}

.mode-btn__tag {
  font-family: var(--font-en);
  font-size: 0.68em;
  letter-spacing: 0.16em;
  opacity: 0.72;
  margin-left: 6px;
}

/* -------------------------------------------------------------- layout -- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 24px);
  align-items: start;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1.42fr) minmax(272px, 0.86fr);
  }

  .panel--side {
    position: sticky;
    top: 20px;
  }
}

.panel {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: clamp(12px, 2.6vw, 22px);
}

/* ---------------------------------------------------------- board head -- */

.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(10px, 2vw, 16px);
}

.board-head__text {
  min-width: 0;
}

.board-head__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}

.board-head__title {
  font-size: clamp(1.12rem, 4.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.24;
  word-break: keep-all;
}

.board-head__sub {
  font-size: clamp(0.78rem, 2.7vw, 0.88rem);
  color: var(--ink-soft);
  word-break: keep-all;
}

.board-head__key {
  flex: none;
  font-family: var(--font-en);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- room -- */

.room {
  --wall-h: clamp(46px, 13vw, 96px);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 22px 40px -34px rgba(76, 53, 30, 0.9);
  background: var(--paper-2);
}

/* 벽 */
.room__wall {
  position: relative;
  height: var(--wall-h);
  background:
    linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 72%, #eadfc9 100%);
}

.room__moulding {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(180deg, #e6d8bd, #cdb894);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.room__window {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: min(52%, 260px);
  height: 84%;
}

.room__window .window-art {
  width: 100%;
  height: 100%;
}

.room__frame {
  position: absolute;
  right: 6%;
  top: 26%;
  width: clamp(18px, 4.4vw, 34px);
  height: clamp(22px, 5.4vw, 42px);
  border: 3px solid #d8c5a5;
  border-radius: 3px;
  background: linear-gradient(150deg, #e9ece2, #dfe6da 46%, #efe3cf);
  box-shadow: 0 3px 8px -5px rgba(70, 50, 30, 0.7);
}

/* 바닥 */
.room__floor {
  position: relative;
  aspect-ratio: var(--cols) / var(--rows);
  touch-action: none;
  background-color: #e9d8c2;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(138, 102, 71, 0.16) 0 1.5px,
      rgba(138, 102, 71, 0) 1.5px calc(100% / var(--rows, 7))
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.26) 0 3%,
      rgba(255, 255, 255, 0) 3% 7%,
      rgba(138, 102, 71, 0.06) 7% 7.4%,
      rgba(138, 102, 71, 0) 7.4% 12%
    ),
    linear-gradient(163deg, #f2e4d0 0%, #e6d0b4 58%, #dcc4a5 100%);
  box-shadow: 0 10px 26px -18px rgba(70, 46, 22, 0.9) inset;
}

.room__rug {
  position: absolute;
  left: 12%;
  top: 24%;
  width: 52%;
  height: 46%;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(159, 176, 152, 0.16) 0 8px,
      rgba(159, 176, 152, 0) 8px 16px
    ),
    rgba(227, 235, 223, 0.55);
  border: 2px solid rgba(159, 176, 152, 0.35);
  pointer-events: none;
}

/* 격자 레이어 */
.grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
}

.grid--overlay,
.grid--pieces {
  pointer-events: none;
}

.grid--pieces > * {
  pointer-events: auto;
}

/* 칸 */
.cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: inset -1px -1px 0 rgba(138, 102, 71, 0.12);
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.cell::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 5px;
  background: rgba(95, 115, 89, 0.16);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.cell:hover::after,
.cell:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.room.is-armed .cell:not(.is-blocked):not(.is-entry):not(.is-toilet):hover::after {
  background: rgba(95, 115, 89, 0.3);
}

.cell.is-blocked,
.cell.is-entry,
.cell.is-toilet {
  cursor: default;
}

.cell.is-blocked::after,
.cell.is-entry::after,
.cell.is-toilet::after {
  display: none;
}

.cell-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cell__tag {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-size: clamp(7px, 1.5vw, 10px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  background: rgba(255, 253, 248, 0.82);
  padding: 0 4px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* 통로 표시 */
.trace {
  position: relative;
}

.trace::before {
  content: '';
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: rgba(95, 115, 89, 0.34);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.trace.is-reachable::before {
  opacity: 1;
  transform: scale(0.55);
}

.trace.is-path::before {
  inset: 16%;
  opacity: 1;
  transform: scale(1);
  background: rgba(95, 115, 89, 0.5);
}

.trace.is-walked::before {
  background: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(95, 115, 89, 0.2);
}

/* 배치 미리보기 */
.drop-preview {
  border-radius: 10px;
  border: 2px dashed var(--sage-deep);
  background: rgba(159, 176, 152, 0.26);
  box-shadow: 0 0 0 2px rgba(255, 253, 248, 0.5) inset;
}

.drop-preview.is-bad {
  border-color: var(--clay);
  background: rgba(192, 115, 82, 0.22);
}

/* 배치된 가구 */
.piece {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  filter: drop-shadow(0 6px 10px rgba(84, 58, 32, 0.28));
  transition: filter 0.16s ease, transform 0.12s ease;
  touch-action: none;
}

.piece:active {
  cursor: grabbing;
}

.piece__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--aw, 1) * 100%);
  height: calc(var(--ah, 1) * 100%);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.3, 0.9, 0.35, 1);
  pointer-events: none;
}

.piece__art .art {
  width: 100%;
  height: 100%;
}

.piece__name {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  font-size: clamp(8px, 1.7vw, 11px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.85);
  border-radius: 5px;
  padding: 0 4px;
  pointer-events: none;
  white-space: nowrap;
}

.piece--tiny .piece__name {
  display: none;
}

.piece.is-selected {
  z-index: 3;
  filter: drop-shadow(0 10px 14px rgba(84, 58, 32, 0.34));
}

.piece.is-selected::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  border: 2.5px solid var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(159, 176, 152, 0.35);
  pointer-events: none;
}

.piece.is-unreachable::before {
  content: '';
  position: absolute;
  right: 4%;
  top: 4%;
  width: clamp(12px, 2.6vw, 18px);
  height: clamp(12px, 2.6vw, 18px);
  border-radius: 50%;
  background: var(--clay) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Cpath d='M12 18.2v.2'/%3E%3C/svg%3E") center / 78% no-repeat;
  box-shadow: 0 2px 5px rgba(84, 58, 32, 0.4);
  z-index: 2;
}

.piece.is-dragging {
  opacity: 0.28;
}

/* 걷는 사람 */
.walker {
  position: absolute;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  left: 0;
  top: 0;
  transform: translate(calc(var(--wx, 0) * 100%), calc(var(--wy, 0) * 100%));
  transition: transform 0.16s linear;
  pointer-events: none;
  z-index: 5;
  padding: 14%;
  filter: drop-shadow(0 4px 6px rgba(60, 42, 24, 0.35));
}

.walker .walker-art {
  width: 100%;
  height: 100%;
}

/* 드래그 고스트 */
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 12px 18px rgba(70, 46, 22, 0.4));
  will-change: transform;
}

.drag-ghost .art {
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------- statusbar -- */

.statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: clamp(10px, 2vw, 16px);
}

.statusbar__count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
}

.statusbar__count strong {
  font-family: var(--font-en);
  font-size: 1.12rem;
  color: var(--ink);
}

.statusbar__best {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage-deep);
  background: var(--sage-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

.statusbar__msg {
  flex: 1 1 100%;
  min-width: 0;
  font-size: clamp(0.78rem, 2.6vw, 0.86rem);
  color: var(--ink-soft);
  word-break: keep-all;
}

.statusbar__msg.is-warn {
  color: var(--clay);
  font-weight: 600;
}

/* ------------------------------------------------------------- toolbar -- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(10px, 2vw, 16px);
}

.toolbar__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  border-color: var(--sage);
  color: var(--ink);
  background: #fdfbf4;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn[aria-pressed='true'] {
  background: var(--sage-soft);
  border-color: var(--sage);
  color: var(--sage-dark);
}

.btn--primary {
  min-height: 52px;
  width: 100%;
  background: linear-gradient(180deg, #6b8163, var(--sage-deep));
  border-color: var(--sage-dark);
  color: #fdfcf6;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  box-shadow: 0 14px 26px -18px rgba(67, 83, 63, 0.95);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #748b6b, #647a5e);
  border-color: var(--sage-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--cream-deep);
  border-color: transparent;
}

.btn .ico {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--primary .ico {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}

.btn kbd {
  font-family: var(--font-en);
  font-size: 0.68em;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 5px;
  opacity: 0.55;
  line-height: 1.5;
}

/* -------------------------------------------------------------- hint --- */

.hintbox {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--wood);
  border-radius: 0 12px 12px 0;
  background: var(--wood-soft);
  color: #6a4c30;
  font-size: 0.86rem;
  word-break: keep-all;
}

/* ----------------------------------------------------------- inventory -- */

.side-head {
  margin-bottom: 12px;
}

.side-head__title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.side-head__note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  word-break: keep-all;
}

.inventory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

@media (min-width: 900px) {
  .inventory {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inv__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fffdf8, #fbf6ea);
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.inv__btn:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-soft);
}

.inv__btn:active {
  transform: translateY(1px);
}

.inv__btn[aria-pressed='true'] {
  border-color: var(--sage-deep);
  background: linear-gradient(180deg, #f4f8f1, #e8efe4);
  box-shadow: 0 0 0 2px rgba(95, 115, 89, 0.25);
}

.inv__btn.is-placed {
  opacity: 0.62;
}

.inv__btn.is-placed .inv__art {
  filter: saturate(0.55);
}

.inv__art {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fffdf8;
  border: 1px solid var(--line-soft);
  padding: 3px;
}

.inv__art .art {
  width: 100%;
  height: 100%;
}

.inv__meta {
  min-width: 0;
  flex: 1;
}

.inv__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.inv__req {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8d4a2c;
  background: var(--clay-soft);
  border-radius: 999px;
  padding: 1px 6px;
}

.inv__rot {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--sage-dark);
  background: var(--sage-soft);
  border-radius: 999px;
  padding: 1px 6px;
}

.inv__dim {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.inv__state {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sage-deep);
}

/* -------------------------------------------------------------- legend -- */

.legend {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 7px;
}

.legend__row {
  display: grid;
  grid-template-columns: minmax(74px, auto) 1fr;
  gap: 8px;
  align-items: baseline;
}

.legend dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-2);
}

.legend dd {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  word-break: keep-all;
}

.legend__chip {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex: none;
  border: 1px solid rgba(90, 70, 45, 0.25);
}

.legend__chip--entry {
  background: #b98d63;
}

.legend__chip--toilet {
  background: #dfe9e3;
}

.legend__chip--pillar {
  background: repeating-linear-gradient(45deg, #cbbb9d 0 3px, #ded2b8 3px 6px);
}

.legend__chip--front {
  background: var(--paper);
  border-bottom: 3px solid var(--sage-deep);
  border-radius: 3px;
}

/* -------------------------------------------------------------- footer -- */

.footer {
  margin-top: clamp(20px, 4vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.footer__sub {
  font-size: 0.72rem;
  opacity: 0.8;
}

/* ------------------------------------------------------------- dialogs -- */

.dialog {
  width: min(560px, calc(100vw - 20px));
  max-height: min(88vh, 820px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 90px -50px rgba(58, 40, 20, 0.95);
  overflow: hidden;
}

.dialog::backdrop {
  background: rgba(52, 40, 26, 0.42);
  backdrop-filter: blur(2px);
}

.dialog__inner {
  position: relative;
  padding: clamp(18px, 4vw, 28px);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog__x {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.dialog__x:hover {
  background: var(--cream-deep);
  color: var(--ink);
}

.dialog__x .ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dialog__head {
  padding-right: 40px;
}

.dialog__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sage-deep);
}

.dialog__title {
  font-size: clamp(1.32rem, 5.4vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.22;
  word-break: keep-all;
  margin-top: 2px;
}

.dialog__desc {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--ink-2);
  word-break: keep-all;
}

.dialog.is-success .dialog__title {
  color: var(--sage-dark);
}

.scorebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.scorebar__item {
  display: grid;
  gap: 1px;
  padding: 10px 8px;
  border-radius: 13px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  text-align: center;
}

.scorebar__item span {
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.scorebar__item strong {
  font-family: var(--font-en);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.issues {
  display: grid;
  gap: 6px;
}

.issues li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--clay-soft);
  color: #7f3f22;
  font-size: 0.84rem;
  word-break: keep-all;
}

.issues li.is-ok {
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.issues li::before {
  content: '·';
  font-weight: 900;
  line-height: 1.4;
}

.issues li.is-ok::before {
  content: '✓';
  font-size: 0.9em;
}

.manual {
  margin-top: 14px;
}

.manual label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 5px;
}

.manual textarea {
  width: 100%;
  font: inherit;
  font-size: 0.82rem;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper-2);
  color: var(--ink);
  resize: vertical;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.dialog__actions .btn {
  flex: 1 1 128px;
}

.dialog__actions .btn--primary {
  width: auto;
  min-height: 46px;
  flex: 1 1 148px;
}

.rules {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  counter-reset: rule;
}

.rules li {
  position: relative;
  padding-left: 30px;
  font-size: 0.86rem;
  color: var(--ink-2);
  word-break: keep-all;
}

.rules li::before {
  counter-increment: rule;
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-dark);
  font-family: var(--font-en);
  font-size: 0.74rem;
  font-weight: 700;
}

.rules li b {
  color: var(--ink);
}

.rules__title {
  margin-top: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sage-deep);
}

.keys {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}

.keys li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--ink-2);
}

.keys kbd {
  font-family: var(--font-en);
  font-size: 0.74rem;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--paper);
  white-space: nowrap;
}

/* --------------------------------------------------------------- toast -- */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.toast {
  padding: 11px 16px;
  border-radius: 13px;
  background: rgba(44, 39, 35, 0.94);
  color: #fdfaf2;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  word-break: keep-all;
}

.toast.is-warn {
  background: rgba(140, 66, 40, 0.96);
}

.toast.is-out {
  animation: toast-out 0.22s ease forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* ------------------------------------------------------------ bootnote -- */

.bootnote {
  max-width: 640px;
  margin: 0 auto 28px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--clay);
  border-radius: 0 14px 14px 0;
  background: var(--clay-soft);
  color: #7f3f22;
  font-size: 0.84rem;
  word-break: keep-all;
}

.bootnote code {
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.6);
  padding: 1px 5px;
  border-radius: 5px;
}

/* -------------------------------------------------------- 반응·모션 조정 -- */

@media (max-width: 420px) {
  .panel {
    padding: 10px;
    border-radius: 20px;
  }

  .page {
    padding-left: 10px;
    padding-right: 10px;
  }

  .board-head__key {
    display: none;
  }

  .btn {
    padding: 8px 11px;
    font-size: 0.8rem;
  }

  .btn kbd {
    display: none;
  }

  .inventory {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  .inv__btn {
    min-height: 56px;
    padding: 7px 8px;
    gap: 8px;
  }

  .inv__art {
    width: 36px;
    height: 36px;
  }

  .legend__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

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


/* Ads remain in normal document flow, away from all game controls. */
.hub-link { display: inline-block; margin-bottom: 20px; color: var(--sage-dark); }
.game-ads { margin: 160px auto 0; max-width: 560px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.game-ads[hidden], .game-ads [hidden] { display: none !important; }
.game-ads__label { font-size: 11px; letter-spacing: .1em; }
.game-ads button { margin: 8px 4px; padding: 10px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; }
#gameAdSlot { width: 300px; max-width: 100%; min-height: 250px; margin: 0 auto 24px; overflow: hidden; }