/* ===== 첫 화면: 테이블 위 시점 ===== */
.view-builder[data-page="table"] { background: radial-gradient(120% 90% at 50% 0%, #2a2030 0%, #120e16 60%, #0b090e 100%); }
:root[data-theme="light"] .view-builder[data-page="table"] { background: radial-gradient(120% 90% at 50% 0%, #fff4ec 0%, #f2e6dc 60%, #e9dccf 100%); }
.builder.page-table { max-width: none; padding: 8px clamp(10px, 3vw, 32px) 32px; gap: 10px; }
.table-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.table-hello { text-align: center; z-index: 2; }
.table-hello h1 { font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; letter-spacing: -.02em; }
.table-hello .hint { margin-top: 2px; }
.hero-logo { display: block; max-height: 70px; margin: 0 auto 6px; }
.table-stage { --mx: 0; --my: 0; position: relative; width: min(100%, 1280px); aspect-ratio: 16 / 9; perspective: 1400px; }
.table-surface { position: absolute; inset: 4% 0 0; border-radius: 28px; transform: rotateX(18deg); transform-origin: 50% 100%; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .08);
  background:
    radial-gradient(60% 55% at 80% 10%, rgba(255, 210, 140, .28), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #8a5d3b 0%, #6f4a2f 55%, #573823 100%); }
:root[data-theme="light"] .table-surface { background:
    radial-gradient(60% 55% at 80% 10%, rgba(255, 230, 180, .5), transparent 60%),
    repeating-linear-gradient(92deg, rgba(120, 80, 40, .08) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #e2c19c 0%, #d3ab80 55%, #c49a6d 100%); }
.table-surface .table-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.table-stage .art { pointer-events: none; }
.obj { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); transform: translate(calc(var(--mx) * var(--depth) * -26px), calc(var(--my) * var(--depth) * -18px)) rotate(var(--rot)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.obj .obj-art { width: 100%; display: block; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.obj.has-art .obj-fallback { display: none; }
/* Generated surfaces keep the live recommendations and task controls visible. */
.obj-sticky.has-art .obj-fallback { display: block; position: absolute; inset: 8% 7% 10%; padding: 8px; background: none; box-shadow: none; overflow: auto; }
.obj-notebook.has-art > .obj-art { position: absolute; inset: 0 0 auto; }
.obj-notebook.has-art > .obj-fallback { display: block; position: relative; }
.obj-notebook.has-art .nb-stack { min-height: 150px; }
.obj-notebook.has-art .nb-file { background: rgba(255, 250, 240, .94); }
.nb-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.obj-notebook.has-art .nb-art { display: none; }
:root[data-theme="light"] .table-art { filter: brightness(1.25) saturate(.85); }
.obj.clickable { cursor: pointer; }
.obj.clickable:hover, .obj.clickable:focus-visible { transform: translate(calc(var(--mx) * var(--depth) * -26px), calc(var(--my) * var(--depth) * -18px - 10px)) rotate(var(--rot)) scale(1.04); filter: drop-shadow(0 0 22px rgba(255, 214, 150, .55)); }
.obj-label { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: rgba(20, 16, 24, .78); color: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.obj.clickable:hover .obj-label, .obj.clickable:focus-visible .obj-label { opacity: 1; }
@media (hover: none) { .obj-label { opacity: 1; } }

/* 메뉴판 (가죽 표지 + 금박) */
.obj-menu .mb-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 3 / 4; border-radius: 10px 16px 16px 10px; color: #f3d9a4;
  background: radial-gradient(120% 90% at 30% 20%, #7a3e3e, #4e2226 70%); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(243, 217, 164, .35), 0 18px 30px -10px rgba(0, 0, 0, .6); }
.mb-emblem { font-size: clamp(22px, 3vw, 40px); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.mb-title { font-size: clamp(18px, 2.6vw, 34px); font-weight: 900; letter-spacing: .2em; font-family: Georgia, "Times New Roman", serif; }
.mb-sub { font-size: clamp(10px, 1.1vw, 14px); font-weight: 700; opacity: .85; }
.mb-hint { margin-top: 8px; font-size: clamp(9px, .9vw, 12px); opacity: .7; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; } }

/* 할 일 책자 (쌓인 종이 파일) */
.obj-notebook .notebook { position: relative; }
.nb-stack { position: relative; aspect-ratio: 4 / 5; cursor: pointer; }
.nb-file { position: absolute; left: calc(var(--i) * 5px); right: calc(var(--i) * -5px); top: calc(var(--i) * 14%); padding: 10px 12px 12px; border-radius: 6px 12px 12px 12px; background: #fffaf0; color: #3f3a33; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); transform: rotate(calc((var(--i) - 1.5) * 1.6deg)); display: flex; flex-direction: column; gap: 3px; font-size: clamp(10px, 1vw, 13px); }
.nb-file strong { font-size: clamp(11px, 1.1vw, 14px); overflow-wrap: anywhere; line-height: 1.3; }
.nb-file .nb-meta { color: #8a8070; }
.nb-file .nb-tab { position: absolute; top: -12px; left: 12px; padding: 1px 10px; border-radius: 8px 8px 0 0; font-size: 10px; font-weight: 800; color: #fff; background: #9aa0aa; }
.nb-file.p3 .nb-tab { background: #ff7a8a; } .nb-file.p2 .nb-tab { background: #f2b544; }
.nb-file.empty { background: #fff7e3; text-align: center; justify-content: center; }
.nb-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.nb-actions .hint { color: rgba(255, 255, 255, .75); font-size: 11.5px; }
:root[data-theme="light"] .nb-actions .hint { color: #6b5a48; }
.obj-notebook .obj-label { top: -36px; bottom: auto; }
.obj-notebook:hover .obj-label { opacity: 1; }
.obj-notebook .obj-fallback > .notebook::before { content: '📒 할 일 책자'; position: absolute; top: -30px; left: 0; font-weight: 900; font-size: 13px; color: #ffe6b8; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .obj-notebook .obj-fallback > .notebook::before { color: #6b4a2f; text-shadow: none; }

/* 기록 일기장 · 라디오 · 머그잔 · 스탠드 · 화분 */
.diary-cover { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; background: linear-gradient(135deg, #8fb0ff, #6b86e8); color: #fff; box-shadow: inset 5px 0 0 rgba(0, 0, 0, .18), 0 14px 22px -8px rgba(0, 0, 0, .5); font-size: clamp(16px, 2vw, 28px); text-align: center; }
.diary-cover b { display: block; font-size: clamp(11px, 1.2vw, 16px); } .diary-cover i { font-size: clamp(8px, .8vw, 11px); letter-spacing: .2em; opacity: .8; }
.radio-body { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 16px; background: linear-gradient(180deg, #ffd6a5, #f4b183); box-shadow: 0 14px 22px -8px rgba(0, 0, 0, .5), inset 0 -6px 0 rgba(0, 0, 0, .1); }
.radio-grill { position: absolute; left: 10%; top: 18%; width: 48%; height: 58%; border-radius: 10px; background: repeating-linear-gradient(0deg, #6b4a3a 0 3px, #8a6250 3px 6px); }
.radio-dial { position: absolute; right: 12%; top: 18%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #fff3e0; box-shadow: inset 0 0 0 3px #c98a64; }
.radio-knob { position: absolute; right: 18%; bottom: 14%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #6b4a3a; }
.radio-body b { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: clamp(9px, .9vw, 12px); color: #6b4a3a; }
.obj-mug .obj-fallback { position: relative; display: block; aspect-ratio: 1; }
.mug-body { position: absolute; left: 12%; top: 25%; width: 62%; height: 70%; border-radius: 10px 10px 18px 18px; background: linear-gradient(90deg, #fff, #e8edf6); box-shadow: 0 10px 16px rgba(0, 0, 0, .35); }
.mug-handle { position: absolute; right: 6%; top: 38%; width: 26%; height: 36%; border: 6px solid #e8edf6; border-left: 0; border-radius: 0 30px 30px 0; }
.steam { position: absolute; bottom: 72%; width: 6px; height: 34%; border-radius: 6px; background: linear-gradient(to top, rgba(255, 255, 255, .55), transparent); animation: steam 3s ease-in-out infinite; }
.steam.s1 { left: 28%; } .steam.s2 { left: 42%; animation-delay: 1s; } .steam.s3 { left: 56%; animation-delay: 2s; }
@keyframes steam { 0% { transform: translateY(10px) scaleY(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-20px) scaleY(1.2) skewX(10deg); opacity: 0; } }
.obj-lamp .obj-fallback { position: relative; display: block; aspect-ratio: 1; }
.lamp-shade { position: absolute; left: 30%; top: 4%; width: 44%; height: 26%; border-radius: 50% 50% 8px 8px; background: #f2c14e; transform: rotate(-12deg); }
.lamp-light { position: absolute; left: -20%; top: 20%; width: 120%; height: 120%; background: radial-gradient(closest-side, rgba(255, 220, 150, .35), transparent); pointer-events: none; }
.obj-plant .obj-fallback { position: relative; display: block; aspect-ratio: 3 / 4; }
.plant-pot { position: absolute; left: 22%; bottom: 0; width: 56%; height: 40%; border-radius: 6px 6px 16px 16px; background: #e78f6b; }
.plant-leaf { position: absolute; bottom: 36%; width: 34%; height: 46%; border-radius: 100% 0; background: #6cc28a; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
.plant-leaf.l1 { left: 18%; transform: rotate(-30deg); } .plant-leaf.l2 { left: 34%; height: 58%; } .plant-leaf.l3 { left: 50%; transform: rotate(30deg) scaleX(-1); animation-delay: 1.4s; }
@keyframes sway { 50% { rotate: 4deg; } }

/* 지금 추천 포스트잇 */
.obj-sticky .obj-fallback { display: block; padding: 12px 14px 14px; border-radius: 4px 4px 14px 4px; background: linear-gradient(180deg, #fff6a8, #ffe878); color: #4a3f20; box-shadow: 0 12px 20px -8px rgba(0, 0, 0, .45); }
.sticky-title { font-weight: 900; font-size: 14px; margin-bottom: 8px; }
.obj-sticky .now-rec { padding: 0; background: none; border: 0; box-shadow: none; gap: 8px; }
.obj-sticky .nr-text { display: none; }
.obj-sticky .nr-opt { background: rgba(255, 255, 255, .7); border-color: rgba(74, 63, 32, .15); color: #3d3420; padding: 8px 10px; }
.obj-sticky .nr-opt span { color: #7a6a40; }
.obj-sticky .nr-opt.primary { border-color: #e0a100; box-shadow: none; }

/* 펼친 메뉴판 · 단품 메뉴 페이지 (종이 질감) */
.builder.page-book, .builder.page-menu, .builder.page-editor { max-width: 1180px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; font-weight: 900; }
.spread { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); animation: bookOpen .5s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 50%; }
@keyframes bookOpen { from { transform: perspective(1200px) rotateY(-14deg) scale(.96); opacity: 0; } }
.page { padding: 22px; background: linear-gradient(90deg, #fffaf1, #fff6e8); color: #3f3a33; display: flex; flex-direction: column; gap: 14px; }
.page.left { box-shadow: inset -18px 0 24px -20px rgba(80, 50, 20, .35); }
.page.right { box-shadow: inset 18px 0 24px -20px rgba(80, 50, 20, .35); }
.page-title { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px dashed rgba(120, 90, 60, .25); padding-bottom: 8px; }
.page-title span { font-size: 22px; font-weight: 900; font-family: Georgia, serif; color: #7a3e3e; }
.page-title em { font-style: normal; color: #8a8070; font-size: 13px; }
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.dish { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #111; border: 2px solid transparent; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s; padding: 0; }
.dish canvas, .dish .dish-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dish.has-art canvas { display: none; }
.dish:hover, .dish:focus-visible { transform: translateY(-4px) scale(1.02); border-color: var(--mode-color); box-shadow: 0 14px 28px -10px var(--mode-color); }
.dish-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; text-align: left; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); display: flex; flex-direction: column; }
.dish-label strong { font-size: 16px; } .dish-label span { font-size: 12px; opacity: .8; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.set-card { position: relative; text-align: left; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid rgba(120, 90, 60, .18); color: #3f3a33; display: flex; flex-direction: column; gap: 8px; transition: transform .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.set-card:hover { transform: translateY(-2px); border-color: #c98a64; box-shadow: 0 10px 20px -12px rgba(120, 80, 40, .5); }
.set-card strong { font-size: 14px; overflow-wrap: anywhere; }
.set-card.ghost { background: transparent; border-style: dashed; }
.set-card.mine { background: #fffbe8; }
.set-card .set-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.set-tl { display: flex; gap: 3px; height: 6px; } .set-tl i { display: block; border-radius: 3px; flex-basis: 0; }
.set-desc { font-size: 12px; color: #8a8070; }
.series-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.item-card { position: relative; aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; background: #0d0f15; border: 2px solid var(--border); padding: 0; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .25s; }
.item-card canvas, .item-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.item-card img { object-fit: contain; background: #000; }
.item-card:hover, .item-card:focus-visible { transform: translateY(-4px); border-color: var(--mode-color); box-shadow: 0 14px 28px -12px var(--mode-color); }
.item-timer { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; background: radial-gradient(circle, color-mix(in srgb, var(--mode-color) 30%, #10131b), #0b0d12); }
.item-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; text-align: left; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent); display: flex; flex-direction: column; }
.item-label strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-label span { font-size: 11.5px; opacity: .75; }

/* 주문 창 */
.modal.order-modal, .modal.set-modal { width: min(94vw, 560px); }
.modal.order-modal .modal-actions, .modal.set-modal .modal-actions { display: none; }
.order { display: flex; flex-direction: column; gap: 14px; }
.op-media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.op-media img, .op-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.op-media canvas { object-fit: cover; }
.op-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; font-weight: 800; }
.op-src { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 6px; }
.op-timer { display: grid; place-items: center; font-size: 46px; color: #fff; background: radial-gradient(circle, #2a3045, #0b0d12); }
.op-timer span { font-size: 13px; opacity: .7; }
.op-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-label { min-width: 64px; font-weight: 800; font-size: 13.5px; }
.op-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.set-sheet { display: flex; flex-direction: column; gap: 12px; }
.brand { background: none; border: 0; color: inherit; padding: 0; }
@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; }
  .page.left, .page.right { box-shadow: none; }
  .table-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 44px; padding: 40px 10px 30px; perspective: none; }
  .table-surface { transform: none; inset: 0; }
  .obj { position: relative; left: auto; top: auto; width: 100%; transform: none !important; }
  .obj-lamp, .obj-plant, .obj-mug { display: none; }
  .obj-menu .mb-cover { aspect-ratio: 16 / 9; }
  .obj-diary .diary-cover, .obj-radio .radio-body { aspect-ratio: 5 / 1.3; }
  .nb-stack { aspect-ratio: auto; min-height: 230px; }
  .obj-label { opacity: 1; position: static; transform: none; display: inline-block; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .obj { transform: rotate(var(--rot)) !important; } }
/* 테이블이 항상 화면 높이 안에 들어오게 */
.table-stage { width: min(100%, 1280px, calc((100vh - 170px) * 16 / 9)); }
/* 책자: 뒤에 빈 종이를 겹쳐 쌓인 느낌 */
.nb-stack::before, .nb-stack::after { content: ''; position: absolute; left: 6px; right: -6px; top: 4%; height: 70%; border-radius: 6px 12px 12px 12px; background: #f6efe0; box-shadow: 0 6px 14px rgba(0, 0, 0, .22); transform: rotate(-2.5deg); }
.nb-stack::after { left: 12px; right: -12px; top: 8%; background: #efe6d3; transform: rotate(2deg); }
.nb-file { z-index: 1; }
.obj-sticky .nr-options { gap: 6px; }
.obj-sticky .nr-opt { padding: 7px 10px; }
.obj-sticky .nr-icon { font-size: 18px; }
.nb-stack { aspect-ratio: 1 / 1; }
.obj-sticky .nr-plan { display: none; }
.obj-sticky .nr-options { flex-wrap: nowrap; overflow: hidden; }
.obj-sticky .nr-opt:nth-child(n + 4) { display: none; }
.obj-sticky .nr-opt { flex: 1 1 0; min-width: 0; }
.obj-sticky .nr-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.obj-sticky .nr-label { min-width: 0; }
@media (max-width: 760px) {
  .builder.page-table { padding: 6px 12px 28px; }
  .table-hello h1 { font-size: 22px; }
  .table-stage { width: 100%; gap: 40px; padding: 34px 12px 24px; }
  .table-surface { border-radius: 22px; }
  .obj-sticky { order: -1; }
  .obj-menu { order: 0; } .obj-notebook { order: 1; } .obj-diary { order: 2; } .obj-radio { order: 3; }
  .obj-diary, .obj-radio { width: calc(50% - 8px); display: inline-block; }
  .obj-sticky .nr-options { flex-wrap: wrap; }
  .obj-sticky .nr-opt { flex: 1 1 100%; }
  .obj-sticky .nr-opt:nth-child(n + 3) { display: none; }
  .obj-notebook .obj-fallback > .notebook::before { top: -26px; }
}

/* ===== 휴대폰: 세로(9:16) · 가로(16:9) 격자 배치 ===== */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .table-stage { aspect-ratio: auto; display: grid; perspective: none; width: 100%; padding: 32px 12px 18px; gap: 36px 12px; align-items: start; }
  .table-surface { transform: none; inset: 0; border-radius: 22px; }
  .obj { position: relative; left: auto; top: auto; width: auto !important; transform: none !important; display: block !important; }
  .obj-lamp, .obj-plant, .obj-mug { display: none !important; }
  .obj-sticky { grid-area: sticky; } .obj-menu { grid-area: menu; } .obj-notebook { grid-area: notebook; } .obj-diary { grid-area: diary; } .obj-radio { grid-area: radio; }
  .obj-label { opacity: 1; position: static; transform: none; display: inline-block; margin-top: 8px; font-size: 12px; }
  .obj-menu .mb-cover { aspect-ratio: 3 / 4; }
  .nb-stack { aspect-ratio: 1 / 1; min-height: 0; }
  .obj-diary .diary-cover, .obj-radio .radio-body { aspect-ratio: 16 / 9; }
  .obj-notebook .obj-label { display: none; }
}
@media (max-width: 760px) {
  .table-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "sticky sticky" "menu notebook" "diary radio"; }
  .obj-sticky .nr-options { flex-wrap: wrap; }
  .obj-sticky .nr-opt { flex: 1 1 calc(50% - 6px); }
  .obj-sticky .nr-opt:nth-child(n + 3) { display: none; }
  .nb-file { padding: 8px 9px 9px; }
  .nb-file strong { font-size: 12px; }
  .nb-actions .btn { padding: 6px 9px; font-size: 12px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .builder.page-table { padding-top: 2px; }
  .table-hello .hint, .hero-logo { display: none; }
  .table-hello h1 { font-size: 18px; }
  .table-stage { grid-template-columns: 0.9fr 1fr 0.8fr 0.8fr; grid-template-areas: "menu notebook sticky sticky" "menu notebook diary radio"; padding: 26px 14px 14px; gap: 28px 12px; }
  .obj-menu .mb-cover { aspect-ratio: 4 / 5; }
  .obj-sticky .nr-opt:nth-child(n + 3) { display: none; }
  .topbar { padding-top: 8px; padding-bottom: 8px; }
}

/* ===== 정돈된 테이블: 이름표 항상 보이기 ===== */
.obj-label { opacity: 1; bottom: auto; top: calc(100% + 10px); display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 12px 6px; border-radius: 10px; background: rgba(255, 250, 240, .92); color: #4a3a2c; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); font-size: 13px; }
.obj-label em { font-style: normal; font-weight: 600; font-size: 11px; color: #8a7764; }
.obj.clickable:hover .obj-label, .obj.clickable:focus-visible .obj-label { background: #fff; color: #2c2118; }
.obj-notebook .obj-fallback > .notebook::before { display: none; }
.obj-notebook .obj-label { top: calc(100% + 10px); }
.obj-notebook .nb-actions { position: absolute; left: 0; right: 0; top: calc(100% + 54px); justify-content: center; }
/* 포스트잇: 좁은 세로 메모 → 추천을 세로 목록으로 */
.obj-sticky .nr-options { flex-direction: column; flex-wrap: nowrap; }
.obj-sticky .nr-opt { flex: 0 0 auto; width: 100%; }
.obj-sticky .nr-opt:nth-child(n + 4) { display: none; }
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .obj-label { position: static; margin: 10px auto 0; display: flex; width: fit-content; }
  .obj-notebook .obj-label { display: flex; }
  .obj-notebook .nb-actions { position: static; margin-top: 8px; }
  .obj-sticky .nr-options { flex-direction: row; flex-wrap: wrap; }
  .obj-sticky .nr-opt { flex: 1 1 calc(50% - 6px); width: auto; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .table-hello { display: none; }
  .obj-menu .mb-cover { aspect-ratio: 1 / 1; }
  .nb-stack { aspect-ratio: 5 / 4; }
  .obj-label em { display: none; }
}
.obj-notebook .nb-stack { aspect-ratio: 5 / 3.4; }

/* 로고 그림이 들어온 뒤에도 테이블 전체가 한 화면에 (위쪽 머리말 높이만큼 빼고) */
.hero-logo { max-height: 56px; }
@media (min-width: 761px) and (min-height: 561px) { .table-stage { width: min(100%, 1280px, calc((100vh - 200px) * 16 / 9)); } }

/* 휴대폰(세로 · 가로): 작은 물건 그림이 칸 폭만큼 커지지 않게 */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .obj-diary .obj-art, .obj-radio .obj-art, .obj-trophy .obj-art, .obj-lamp .obj-art { width: auto; max-width: 100%; max-height: 92px; margin: 0 auto; object-fit: contain; }
  .obj-lamp .obj-fallback, .obj-trophy .trophy { max-height: 92px; }
}