/* Makers Sanyang showroom (world/MakersShowroomRoom.js): a warm Jeju 2.5D room drawn in CSS
   (basalt wall, sea + Hallasan window, wooden beams and floor in perspective, tangerine trees,
   the building model on a plinth) with a photo-card carousel and a detail panel.
   Layering: above the (hidden) lobby canvas, below the HUD (10+), KIKI (12), chat (25) and
   the booking panel (90). */
.makers-showroom {
    --ms-ink: #3a2a1c; --ms-muted: #7a6450; --ms-accent: #e8742c; --ms-accent-2: #f6a13a; --ms-paper: #fffaf2;
    --ms-panel-w: 360px; --ms-gap: 16px; --ms-card-w: clamp(190px, 17vw, 260px); --ms-step: min(15.5vw, 205px);
    position: fixed; inset: 0; z-index: 9; overflow: hidden; overflow: clip; color: var(--ms-ink);   /* clip: side cards never make the room scrollable */
    font: 15px/1.5 "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
    background: #2b2420;
}
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the room --------------------------------------------------------------------------- */
.ms-scene, .ms-scene > * { position: absolute; pointer-events: none; }
.ms-scene { inset: 0; z-index: 0; }   /* own stacking context: the room never covers the UI */
.ms-wall { inset: 0 0 40% 0; z-index: 0; background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0 2px, transparent 3px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.18) 0 2px, transparent 3px) 0 0 / 17px 21px,
    linear-gradient(180deg, #5b524b 0%, #4a423c 70%, #3e3732 100%); }
.ms-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%;
    background: repeating-linear-gradient(90deg, #a77a4f 0 46px, #9a6d44 46px 48px); box-shadow: 0 -3px 0 #c89a63 inset; }
.ms-beams { z-index: 2; top: 0; left: 0; right: 0; height: 9%; background: repeating-linear-gradient(90deg, #8a5d37 0 70px, #6e4728 70px 84px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ms-window { z-index: 1; top: 11%; left: 18%; right: calc(var(--ms-panel-w) + 8%); height: 33%; border-radius: 160px 160px 10px 10px; overflow: hidden;
    border: 12px solid #b07d4f; box-shadow: 0 0 0 4px #7c5232, 0 18px 40px rgba(0,0,0,.35) inset;
    background: linear-gradient(180deg, #ffd9a3 0%, #ffc28a 45%, #f7a86f 70%, #f29a68 100%); }
.ms-sun { left: 63%; top: 30%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff3c9 0 40%, #ffd27a 60%, rgba(255,210,122,0) 72%); }
.ms-hallasan { left: 0; bottom: 30%; width: 100%; height: 45%; fill: #7f9a73; opacity: .95; }
.ms-sea { left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, #6fb7cf 0%, #3f8db1 100%); }
.ms-sea::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 2px, transparent 2px 11px); }
.ms-sky { inset: 0; background: radial-gradient(60% 40% at 50% 26%, rgba(255,196,120,.35), transparent 70%); z-index: 4; }
.ms-floor { z-index: 1; left: -40%; right: -40%; bottom: 0; height: 52%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(52deg);
    background: repeating-linear-gradient(90deg, #c58d57 0 58px, #b57f4b 58px 60px, #cf9862 60px 118px, #b57f4b 118px 120px),
        linear-gradient(180deg, #d9a46a, #b98048); box-shadow: 0 -40px 80px rgba(0,0,0,.25) inset; }
.ms-stage { z-index: 2; left: 50%; bottom: 10%; width: min(980px, 72vw); height: 21%; transform: translateX(-62%); border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #f3dcbb 0%, #e3c398 55%, #c99e6b 100%);
    box-shadow: 0 0 0 6px #8f6440, 0 18px 0 #6d4a2e, 0 26px 40px rgba(0,0,0,.45), 0 0 60px rgba(255,190,110,.45); }
.ms-tree { z-index: 3; bottom: 6%; width: 150px; height: 220px; }
.ms-tree--left { left: 1%; } .ms-tree--right { right: calc(var(--ms-panel-w) + 30px); }
.ms-tree::before { content: ""; position: absolute; left: 40px; bottom: 0; width: 70px; height: 62px; border-radius: 6px 6px 18px 18px; background: linear-gradient(180deg, #c9673c, #9b4724); box-shadow: 0 6px 12px rgba(0,0,0,.35); }
.ms-tree::after { content: ""; position: absolute; left: 6px; bottom: 54px; width: 138px; height: 138px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6fa758, #3f7a39 60%, #2f5f2b); box-shadow: 0 10px 18px rgba(0,0,0,.3); }
.ms-tree i { position: absolute; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffc35a, #f07f1e 70%); }
.ms-tree i:nth-child(1) { left: 40px; bottom: 140px; } .ms-tree i:nth-child(2) { left: 92px; bottom: 112px; } .ms-tree i:nth-child(3) { left: 58px; bottom: 92px; }
.ms-model { z-index: 3; left: 3.5%; top: 17%; width: min(170px, 12vw); }
.ms-model img { width: 100%; display: block; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.ms-model::after { content: ""; display: block; height: 22px; margin: -10px 8% 0; border-radius: 50%; background: #c99e6b; box-shadow: 0 6px 0 #8f6440; }
.ms-lamp { z-index: 3; top: 9%; width: 4px; height: 70px; background: #3b2a1c; }
.ms-lamp::after { content: ""; position: absolute; left: -22px; top: 66px; width: 48px; height: 26px; border-radius: 24px 24px 6px 6px; background: #f2c27a; box-shadow: 0 16px 60px 24px rgba(255,200,120,.55); }
.ms-lamp--1 { left: 14%; } .ms-lamp--2 { right: calc(var(--ms-panel-w) + 9%); }

/* ---- top: title, search, categories --------------------------------------------------- */
.ms-top { position: absolute; top: 12px; left: 176px; right: calc(var(--ms-panel-w) + var(--ms-gap) * 2); display: grid; justify-items: center; gap: 8px; z-index: 2; }
.ms-brand { text-align: center; color: #fff6e8; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.ms-brand small { display: block; font-size: 12px; letter-spacing: .14em; color: #ffd9a3; font-weight: 700; }
.ms-brand h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.ms-search { width: min(560px, 100%); }
.ms-search input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 20px; border: 2px solid #f1d2a8; border-radius: 999px; background: rgba(255,250,242,.96);
    font: inherit; color: var(--ms-ink); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.ms-search input:focus-visible { outline: 3px solid var(--ms-accent-2); outline-offset: 2px; }
.ms-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid rgba(255,236,210,.7); border-radius: 999px;
    background: rgba(70,48,32,.72); color: #fff3e3; font: 700 14px/1 inherit; cursor: pointer; backdrop-filter: blur(4px); }
.ms-chip b { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; }
.ms-chip.is-active { background: linear-gradient(180deg, var(--ms-accent-2), var(--ms-accent)); border-color: #ffe0b5; color: #fff; box-shadow: 0 6px 16px rgba(232,116,44,.45); }
.ms-chip.is-empty:not(.is-active) { opacity: .65; }
.ms-chip:focus-visible, .ms-arrow:focus-visible, .ms-btn:focus-visible, .ms-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- carousel ------------------------------------------------------------------------- */
.ms-carousel-wrap { position: absolute; left: 0; right: calc(var(--ms-panel-w) + var(--ms-gap) * 2); top: 190px; bottom: 96px; z-index: 1; }
.ms-carousel { position: absolute; inset: 0 70px 52px; perspective: 1300px; touch-action: pan-y; outline: none; }
.ms-card { --abs: 0; --offset: 0; position: absolute; left: 50%; top: 50%; width: var(--ms-card-w); border-radius: 20px; overflow: hidden; cursor: pointer;
    background: var(--ms-paper); box-shadow: 0 18px 34px rgba(0,0,0,.4); user-select: none;
    z-index: calc(20 - var(--abs)); filter: brightness(calc(1 - var(--abs) * .14)) saturate(calc(1 - var(--abs) * .1));
    transform: translate(-50%, -50%) translateX(calc(var(--offset) * var(--ms-step))) translateZ(calc(var(--abs) * -150px)) rotateY(calc(var(--offset) * -16deg)) scale(calc(1 - var(--abs) * .06));
    transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease, box-shadow .3s ease; }
.ms-card[data-offset="3"], .ms-card[data-offset="-3"] { opacity: 0; pointer-events: none; }
.ms-card:hover { box-shadow: 0 22px 40px rgba(0,0,0,.45), 0 0 0 3px rgba(255,214,160,.8); }
.ms-card.is-selected { transform: translate(-50%, -54%) scale(1.06); box-shadow: 0 26px 50px rgba(0,0,0,.5), 0 0 0 4px var(--ms-accent-2), 0 0 46px rgba(255,170,80,.6); }
.ms-card__photo { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(160deg, #7cc0d6, #f6b37a); }
.ms-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-card__art { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.ms-card--lodging .ms-card__photo { background: linear-gradient(160deg, #8ccde0 0%, #f9c48c 70%, #f39a63 100%); }
.ms-card--office .ms-card__photo, .ms-card--space .ms-card__photo { background: linear-gradient(160deg, #cfe3c4 0%, #8fbf7c 60%, #5d8f52 100%); }
.ms-card--workation .ms-card__photo { background: linear-gradient(160deg, #ffe0a8 0%, #ffb35c 60%, #e8742c 100%); }
.ms-card--program .ms-card__photo { background: linear-gradient(160deg, #e7d8ff 0%, #b79de8 60%, #7f64c2 100%); }
.ms-card--guide .ms-card__photo { background: linear-gradient(160deg, #8f857c 0%, #5b524b 70%, #3e3732 100%); }
.ms-card__body { padding: 12px 14px 14px; }
.ms-card__body small { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fde7cf; color: #a0491a; font-size: 12px; font-weight: 800; }
.ms-card__body h2 { margin: 6px 0 2px; font-size: 18px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-card__body p { margin: 0; color: var(--ms-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-arrow { position: absolute; top: calc(50% - 26px); width: 52px; height: 52px; border: 2px solid #ffe0b5; border-radius: 50%; z-index: 30;
    background: rgba(70,48,32,.82); color: #fff; font: 700 30px/1 inherit; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.ms-arrow:disabled { opacity: .35; cursor: default; }
.ms-arrow--prev { left: 12px; } .ms-arrow--next { right: 12px; }
.ms-counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; max-width: 80%; padding: 6px 16px; border-radius: 999px;
    background: rgba(58,42,28,.85); color: #fff3e3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-counter:empty { display: none; }
.ms-dots { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; gap: 6px; }
.ms-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,240,220,.45); }
.ms-dots i.is-on { background: var(--ms-accent-2); width: 22px; border-radius: 6px; }
.ms-status { position: absolute; left: 50%; top: 46%; transform: translateX(calc(-50% - var(--ms-panel-w) / 2)); margin: 0; z-index: 3; max-width: min(520px, 80vw);
    padding: 12px 20px; border-radius: 14px; background: rgba(255,250,242,.95); color: var(--ms-ink); font-weight: 700; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.ms-status[hidden] { display: none; }

/* ---- detail panel ----------------------------------------------------------------------- */
.ms-detail { position: absolute; top: 72px; right: var(--ms-gap); bottom: var(--ms-gap); width: var(--ms-panel-w); box-sizing: border-box; z-index: 4;
    padding: 22px 22px 18px; overflow-y: auto; border-radius: 22px; background: rgba(255,250,242,.96); border: 2px solid #f1d2a8;
    box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.ms-detail { display: flex; flex-direction: column; }
.ms-detail > * { flex: none; }
.ms-detail[hidden] { display: none; }
.ms-detail__close { display: none; position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3e3cf; font-size: 20px; cursor: pointer; }
.ms-detail__chip { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fde7cf; color: #a0491a; font-weight: 800; font-size: 12px; }
.ms-detail__title { margin: 8px 0 4px; font-size: 24px; line-height: 1.25; }
.ms-detail__sub { margin: 0 0 8px; color: var(--ms-muted); font-weight: 600; }
.ms-detail__desc { margin: 8px 0 12px; white-space: pre-line; }
.ms-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #f7ead8; }
.ms-facts dt { color: var(--ms-muted); font-weight: 700; } .ms-facts dd { margin: 0; font-weight: 700; }
.ms-availability { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-weight: 700; background: #efe7dc; }
.ms-availability[data-state=open] { background: #e2f3df; color: #24642a; }
.ms-availability[data-state=full], .ms-availability[data-state=closed] { background: #fbe2dc; color: #9b2c19; }
.ms-availability[data-state=checking]::before { content: "⏳ "; }
.ms-actions { display: grid; gap: 8px; }
.ms-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 2px solid #e2c39b; border-radius: 14px; background: #fff;
    color: var(--ms-ink); font: 800 16px/1 inherit; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.ms-btn--primary { border-color: transparent; background: linear-gradient(180deg, var(--ms-accent-2), var(--ms-accent)); color: #fff; box-shadow: 0 8px 18px rgba(232,116,44,.4); }
.ms-detail__note { margin: 12px 0 0; color: var(--ms-muted); font-size: 12px; }

/* ---- medium screens: fewer side cards --------------------------------------------------- */
@media (max-width: 1180px) {
    .makers-showroom { --ms-panel-w: 320px; --ms-card-w: clamp(170px, 20vw, 220px); --ms-step: 15vw; }
    .ms-card[data-offset="2"], .ms-card[data-offset="-2"] { opacity: 0; pointer-events: none; }
    .ms-model { display: none; }
}

/* ---- phones: header under the HUD chips, detail as a bottom sheet ----------------------- */
@media (max-width: 760px) {
    .makers-showroom { --ms-card-w: 46vw; --ms-step: 40vw; }
    .ms-top { top: 100px; left: 12px; right: 12px; gap: 6px; }
    .ms-brand small { display: none; }
    .ms-brand h1 { font-size: 19px; }
    .ms-search input { height: 42px; }
    .ms-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .ms-chip { flex: none; min-height: 36px; }
    .ms-carousel-wrap { right: 0; top: 222px; bottom: calc(36vh + 6px); }
    .ms-carousel { inset: 0 0 44px; }
    .ms-counter { bottom: 10px; font-size: 13px; }
    .ms-dots { display: none; }
    .ms-card[data-offset="2"], .ms-card[data-offset="-2"] { opacity: 0; pointer-events: none; }
    .ms-card__body h2 { font-size: 16px; }
    .ms-arrow { width: 42px; height: 42px; font-size: 24px; top: calc(50% - 43px); }
    .ms-arrow--prev { left: 6px; } .ms-arrow--next { right: 6px; }
    .ms-detail { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 36vh; border-radius: 22px 22px 0 0; padding: 16px 18px calc(74px + env(safe-area-inset-bottom, 0px)); transition: max-height .3s ease; }
    .makers-showroom.detail-open .ms-detail { max-height: 82vh; z-index: 30; }
    .makers-showroom.detail-open .ms-detail__close { display: block; }
    .ms-detail__title { font-size: 20px; }
    /* phone sheet: what you can do first, the description after */
    .ms-detail__chip { order: 0; align-self: flex-start; } .ms-detail__title { order: 1; } .ms-availability { order: 2; } .ms-actions { order: 3; }
    .ms-detail .ms-btn--primary[data-action=site] { order: 3; }
    .ms-detail__sub, .ms-detail__desc, .ms-facts { order: 4; margin-top: 12px; } .ms-detail__note { order: 5; }
    .ms-status { top: 50%; transform: translateX(-50%); }
    .ms-window { left: 6%; right: 6%; top: 8%; height: 22%; }
    .ms-detail__chip { margin-top: 0; }
    .ms-tree, .ms-model, .ms-lamp { display: none; }
    .ms-stage { width: 120vw; transform: translateX(-50%); bottom: 37vh; height: 10%; }
}
@media (prefers-reduced-motion: reduce) { .ms-card { transition: none; } }