/* 탐색 화면(3D 건물·층 도면 옆 패널)과 특별실 상세 — Atelier.
   여기서는 패널·목록·상세와 "지도 칸의 크기·모양"만 다룬다. 지도 칸 안쪽(하늘, 배지·힌트·말풍선·오버레이)은 viewer.css.
   순서: 뼈대 → 탐색 패널 → 층 묶음·특별실 줄 → 특별실 상세 → 예약 바 → 반응형 */

/* ==========================================================================
   1. 뼈대 — 종이 위에 놓인 두 장: 왼쪽 surface 카드(정보) + 오른쪽 둥근 무대(3D). 기획서 §7.4
   ========================================================================== */
.explore, .split {
    flex: none; display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); gap: 16px;
    height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
    padding: 16px;
}
.explore-panel, .split .side {
    position: relative; z-index: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
}
/* 지도 칸: 둥근 무대. 바탕색은 3D 가 뜨기 전 잠깐 보이는 하늘빛 (진짜 하늘은 viewer.css) */
.explore-map, .split .map {
    position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
    border-radius: var(--r-xl); background: linear-gradient(180deg, #DCE4FF 0%, #EEF0FB 52%, #FBF3E8 100%);
}
/* 하늘과 종이가 맞닿는 가장자리에 머리카락 같은 선 하나 */
.explore-map::after, .split .map::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(45, 35, 15, .09);
}
/* 뷰어는 지도 칸을 꽉 채운다. 캔버스 위 터치는 스크롤·확대 대신 3D 조작으로 쓴다 (building3d.js) */
.explore-map > .viewer, .split .map > .viewer { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.explore-map canvas, .split .map canvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* 도면이 없는 층 (상세 화면) */
.map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.map-empty .empty-ico { background: var(--surface); }

/* ==========================================================================
   2. 탐색 패널
   ========================================================================== */
/* 층 고르기는 목록이 흘러가는 동안 위에 붙어 있다. 붙는 것은 알약이 아니라 이 칸 전체이고, 바탕을 끝까지 불투명하게 칠한다 —
   바탕이 알약 아래에서 옅어지면 알약의 둥근 모서리 옆으로 잘린 줄이 비친다. 줄은 칸 아래 12px 번짐 속에서 사라진다 */
.explore-tabs {
    position: sticky; top: 0; z-index: 3; flex: none; padding: 18px 28px 8px;
    background: var(--surface);
}
.explore-tabs::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
    background: linear-gradient(var(--surface), rgba(255, 254, 251, 0));
}
/* 층 고르기는 손가락으로 누르는 필터다: 칸 하나가 44px (SPEC 3-9). 트랙 안쪽을 3px 로 줄여 전체 높이는 50px 에서 멈춘다 */
.floor-nav { padding: 3px; }
.floor-nav a { min-height: var(--tap); }
.explore-body { flex: 1; padding: 18px 28px 32px; }
/* PC: 목록이 카드 아래 모서리에서 뚝 잘리면 더 있는 줄 모른다. 아래 36px 를 종이색으로 번지게 해 "이어진다"를 알린다. */
@media (min-width: 961px) {
    .explore-panel { scroll-padding: 96px 0 48px; }
    .explore-panel::after {
        content: ""; position: sticky; bottom: 0; z-index: 2; flex: none; height: 36px; margin-top: -36px; pointer-events: none;
        background: linear-gradient(rgba(255, 254, 251, 0), var(--surface) 92%);
    }
}
/* 옆 패널은 건물/층 단위로 통째로 바뀐다. 새로 보이는 패널이 살짝 떠오른다. */
.pane { animation: pane-in var(--t-mid) var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pane-head .eyebrow { margin-bottom: 14px; }
/* 학교 이름 머리말은 잉크 막대 대신 교표를 앞세운다 (2026-09-22) */
.eyebrow-school::before { display: none; }
.eyebrow-school img { width: 24px; height: 24px; flex: none; border-radius: 50%; }
.pane-head h1 { margin: 0; }
.pane-head .lead { margin: 12px 0 0; font-size: var(--fs-body); }
.pane-head .lead strong { color: var(--ink); }
.pane .empty { margin-top: 24px; padding: 40px 16px; border-radius: var(--r-lg); background: var(--paper); }
.pane .empty .empty-ico { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ==========================================================================
   3. 층 묶음과 특별실 줄
   ========================================================================== */
.floor-group { margin-top: 28px; }
/* 머리: 세리프 층 숫자 + 작은 설명, 아래 잉크 괘선. "도면 보기"는 44px 높이로 누른다 */
.floor-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); border-bottom: 1px solid var(--line-ink); }
.floor-group-head h2 { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink-3); }
.floor-no { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
/* 층 패널: 층 이름은 h1 에 있으니 머리는 개수만 적은 조용한 한 줄 */
.floor-group-head.is-plain { min-height: 36px; }
.floor-group-head.is-plain h2 { display: block; }
.floor-group-head.is-plain .n { color: var(--ink); font-variant-numeric: tabular-nums; }
.floor-link { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding-left: 12px; font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.floor-link:hover { text-decoration: none; }
.floor-link .icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform var(--t-fast) var(--ease); }
.floor-link:hover .icon { transform: translateX(2px); }

.room-list { list-style: none; margin: 0; padding: 4px 0 0; }
/* 줄 하나 = 분류 타일 + 이름·추천 활동 + 화살표. 패널 여백 쪽으로 10px 씩 넓혀 두어, 채워질 때 글자 자리는 그대로다 */
.room-card {
    position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 72px; margin: 0 -10px; padding: 12px 10px; border-radius: var(--r-md); color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.room-card:hover { text-decoration: none; }
.room-card:focus-visible { border-radius: var(--r-md); outline-offset: 0; }
/* 줄 사이 실선 (채워진 줄과 그 윗줄에서는 숨는다) */
.room-card::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--line); transition: opacity var(--t-fast); }
.room-list li:last-child .room-card::after { display: none; }
.room-card .cat-tile { transition: background-color var(--t-fast) var(--ease); }
.room-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.room-main strong { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-main span { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 줄 끝: 평소에는 화살표만, 연결되면 "예약 ›" 알약으로 자란다. 줄 전체가 링크라 알약이 없어도 동작은 같다 */
.room-go {
    display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 0 6px;
    border-radius: var(--r-pill); color: var(--ink-4); font-size: var(--fs-small); font-weight: 700; line-height: 1; white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast), padding var(--t-fast) var(--ease);
}
.room-go-label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--t-mid) var(--ease), opacity var(--t-fast); }
.room-go .icon { width: 16px; height: 16px; stroke-width: 2.2; }

/* 연결된 줄: 도면에서 그 실에 마우스를 올렸을 때(.is-hover, building3d.js) · 줄에 마우스를 올렸을 때 · 키보드로 왔을 때.
   분류 bg 로 채우고 1.5px 분류 fg 링. 색은 줄의 data-cat 이 정한다 */
.room-card.is-hover, .room-card:focus-visible { background: var(--cat-bg, var(--paper-2)); box-shadow: 0 0 0 1.5px var(--cat-fg, var(--ink-3)); }
.room-card.is-hover::after, .room-card:focus-visible::after,
.room-list li:has(+ li .room-card.is-hover) .room-card::after, .room-list li:has(+ li .room-card:focus-visible) .room-card::after { opacity: 0; }
.room-card.is-hover .cat-tile, .room-card:focus-visible .cat-tile { background: var(--surface); }
.room-card.is-hover .room-main span, .room-card:focus-visible .room-main span { color: var(--ink-2); }
.room-card.is-hover .room-go, .room-card:focus-visible .room-go { padding: 0 8px 0 13px; background: var(--surface); color: var(--cat-fg, var(--ink)); }
.room-card.is-hover .room-go-label, .room-card:focus-visible .room-go-label { max-width: 4em; margin-right: 2px; opacity: 1; }
@media (hover: hover) {
    .room-card:hover { background: var(--cat-bg, var(--paper-2)); box-shadow: 0 0 0 1.5px var(--cat-fg, var(--ink-3)); }
    .room-card:hover::after, .room-list li:has(+ li .room-card:hover) .room-card::after { opacity: 0; }
    .room-card:hover .cat-tile { background: var(--surface); }
    .room-card:hover .room-main span { color: var(--ink-2); }
    .room-card:hover .room-go { padding: 0 8px 0 13px; background: var(--surface); color: var(--cat-fg, var(--ink)); }
    .room-card:hover .room-go-label { max-width: 4em; margin-right: 2px; opacity: 1; }
}
/* 손가락: 누르는 동안 분류색이 비친다 (hover 가 없는 기기의 눌림 표시) */
.room-card:active { background: var(--cat-bg, var(--paper-2)); }
.room-card:active::after { opacity: 0; }
.room-card:active .cat-tile { background: var(--surface); }

/* ==========================================================================
   4. 특별실 상세 (S-03)
   ========================================================================== */
.room-detail .photos { flex: none; }
.room-detail .photo-slider { background: var(--paper-2); }
/* 사진이 없을 때: 분류 색 띠 + 비스듬히 걸친 큰 분류 그림. 색은 data-cat 이 정한다 */
.photo-empty { position: relative; flex: 4 1 176px; min-height: 176px; max-height: 272px; overflow: hidden; background: var(--cat-bg, var(--paper-2)); color: var(--cat-fg, var(--ink-3)); }
.photo-empty::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
    background-image: radial-gradient(rgba(45, 35, 15, .13) 1px, transparent 1.4px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.photo-empty-art { position: absolute; right: 12px; bottom: -34px; width: 168px; height: 168px; stroke-width: 1.1; opacity: .42; transform: rotate(-10deg); }
.photo-empty-note {
    position: absolute; left: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px;
    border-radius: var(--r-pill); background: var(--surface); font-size: 12.5px; font-weight: 600; line-height: 1;
}
.photo-empty-note .icon { width: 15px; height: 15px; }

/* 패널이 내용보다 길면 남는 높이는 위쪽 사진 띠가 먼저(4:1) 가져간다 — 추정 배지와 예약 바 사이에 구멍이 나지 않게 */
.room-body { flex: 1 0 auto; padding: 20px 28px 28px; }
.room-body .crumb-btn { margin: 0 0 14px; }
.room-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.room-head h1 { margin: 0; font-size: 30px; line-height: 1.2; }
.room-where { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.room-where .icon { width: 15px; height: 15px; }
.room-detail .desc { margin: 20px 0 0; color: var(--ink-2); line-height: 1.65; }
/* 사실 줄: 프로그램 북의 표처럼 — 위 잉크 괘선, 줄 사이 실선, 왼쪽에 작은 이름표 */
.facts { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line-ink); }
.facts li { display: grid; grid-template-columns: 20px 72px minmax(0, 1fr); gap: 12px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); line-height: 22px; }
.facts .icon { margin-top: 1px; color: var(--ink-3); }
.facts small { color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; line-height: 22px; }
.facts b { font-size: var(--fs-body); font-weight: 600; line-height: 22px; }
.fact-note { margin-left: 6px; padding: 2px 7px; border-radius: var(--r-xs); background: var(--paper-2); color: var(--ink-3); font-size: var(--fs-caption); font-weight: 600; }
/* ==========================================================================
   앞으로 2주 한눈에 보기 (특별실 상세 왼쪽 패널)
   하루가 한 줄, 막대의 채워진 곳이 이미 잡힌 시간. 아무것도 누르지 않아도 "언제 비었나" 가 읽혀야 한다.
   ========================================================================== */
/* 특별실 찾기: 층 탭 바로 아래. 초성도 받는다 (js/search.js) */
.room-search {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 12px 0 14px;
    height: 42px; border-radius: var(--r-pill); background: var(--paper-2);
    transition: box-shadow var(--t-fast), background-color var(--t-fast);
}
.room-search:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.room-search > .icon { flex: none; color: var(--ink-3); vertical-align: 0; }
.room-search input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink);
    font-family: inherit; font-size: var(--fs-sub); font-weight: 600;
}
.room-search input::placeholder { color: var(--ink-4); font-weight: 500; }
.room-search input:focus { outline: 0; }
.room-search input::-webkit-search-cancel-button { display: none; }
.room-search .icon-btn { width: 30px; height: 30px; flex: none; }

.sched-none {
    display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px 0 2px;
    font-size: var(--fs-sub); font-weight: 600; color: var(--ink-2);
}
.sched-none .icon { color: var(--st-approved-dot); vertical-align: 0; }
.sched-rest { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--ink-3); }
.sched-rest b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sched { margin-top: 22px; }
.sched-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-ink);
    font-size: var(--fs-sub); font-weight: 700; letter-spacing: -.01em;
}
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 3px 0; }
/* 첫 줄은 시각 눈금 — 막대와 같은 칸에 놓여 "몇 시" 가 세로로 맞는다 */
.sched-ruler { padding-bottom: 0 !important; }
.sched-axis { position: relative; height: 16px; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; line-height: 16px; }
.sched-axis i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.sched-axis i::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 3px; background: var(--line-2); }
.sched-axis i.first { transform: none; }
.sched-axis i.first::before { left: 0; }
.sched-axis i.last { transform: translateX(-100%); }
.sched-axis i.last::before { left: auto; right: 0; }
.sched-day { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.sched-day b { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-2); }
.sched-day i { font-style: normal; font-size: var(--fs-micro); font-weight: 600; color: var(--ink-4); }
/* 주말은 한 톤 죽여 주 단위가 눈에 잡히게 */
.sched-list li:nth-child(7n+6) .sched-day b, .sched-list li:nth-child(7n) .sched-day b { color: var(--ink-4); }

/* 막대는 손가락 하나 높이(20px). 13px 일 때는 빗금과 파란 밑줄이 안 읽혔다 */
.sched-bar { position: relative; height: 20px; border-radius: 6px; background: var(--paper-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.sched-bar .slot { position: absolute; top: 0; bottom: 0; min-width: 3px; box-shadow: inset 1px 0 0 var(--surface), inset -1px 0 0 var(--surface); }
.sched-bar .ap { background-color: var(--paper-3); background-image: repeating-linear-gradient(135deg, rgba(111, 105, 93, .34) 0 2px, transparent 2px 6px); }
.sched-bar .pd { background-color: var(--st-pending-bg); background-image: repeating-linear-gradient(135deg, rgba(200, 138, 0, .32) 0 3px, transparent 3px 8px); }
/* 내 신청은 남의 신청과 겹쳐도 온전히 보여야 한다: 맨 위에 두되 속은 비쳐서 그 밑의 빗금(경합)도 보인다 */
.sched-bar .ap { z-index: 1; }
.sched-bar .me { z-index: 2; background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 4px no-repeat rgba(43, 63, 214, .14); }
.sched-list li.off .sched-bar { background: repeating-linear-gradient(135deg, var(--paper-2) 0 5px, var(--paper-3) 5px 10px); }

.sched-tag { font-size: 10.5px; font-weight: 700; color: var(--warn-ink); white-space: nowrap; }
.sched-tag.free { color: var(--ink-4); font-weight: 600; }

.sched-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: var(--fs-micro); color: var(--ink-3); }
.sched-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sched-legend .sw { width: 16px; height: 14px; border-radius: 3px; flex: none; }
.sched-legend .sw.ap { background-color: var(--paper-3); background-image: repeating-linear-gradient(135deg, rgba(111, 105, 93, .34) 0 2px, transparent 2px 6px); }
.sched-legend .sw.pd { background-color: var(--st-pending-bg); background-image: repeating-linear-gradient(135deg, rgba(200, 138, 0, .32) 0 3px, transparent 3px 8px); }
.sched-legend .sw.me { background: linear-gradient(var(--accent), var(--accent)) bottom / 100% 3px no-repeat var(--accent-wash-2); }
.sched-legend .sw.fr { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }

.room-body .estimate-badge { margin-top: 16px; box-shadow: inset 0 0 0 1px rgba(224, 161, 0, .38); }

/* ==========================================================================
   5. 예약 바 — 패널 아래에 붙는다. 왼쪽 쪽지 칸(운영 시간) ┊ 오른쪽 한 가지 전진 동작
   ========================================================================== */
.cta-bar {
    position: sticky; bottom: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 16px;
    padding: 14px 28px 16px; background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -14px 24px -18px rgba(45, 35, 15, .22);
}
.cta-stub { flex: none; display: flex; flex-direction: column; gap: 2px; padding-right: 16px; border-right: 1px dashed var(--line-2); }
.cta-stub small { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; }
.cta-stub b { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; white-space: nowrap; }
.cta-bar > .btn { flex: 1; min-width: 0; }
/* PC 에서는 운영 시간이 바로 위 사실 줄에 보이므로 쪽지 칸을 접는다 (휴대폰의 고정 바에서는 내용이 흘러가 버리니 남긴다) */
@media (min-width: 961px) { .cta-stub { display: none; } }
/* 교사·관리자: 전진 동작이 없는 안내 — 글 한 줄, 그 아래 자기 일로 가는 중립 버튼 */
.cta-note { flex-direction: column; align-items: stretch; gap: 10px; }
.cta-note p { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; }
.cta-note p .icon { margin-top: 2px; }
.cta-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cta-links .btn { flex: 1 1 auto; }

/* ==========================================================================
   6. 반응형
   ========================================================================== */
@media (max-width: 1180px) {
    .explore, .split { grid-template-columns: 384px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .explore-tabs { padding: 16px 22px 8px; }
    .explore-body { padding: 16px 22px 28px; }
    .room-body { padding: 18px 22px 24px; }
    .cta-bar { padding-left: 22px; padding-right: 22px; }
}

/* 960px 아래: 지도가 위(화면 끝까지), 패널은 그 밑동을 덮고 올라오는 시트 */
@media (max-width: 960px) {
    .explore, .split { display: flex; flex-direction: column; height: auto; padding: 0; gap: 0; }
    .explore { min-height: calc(100vh - var(--topbar-h) - var(--tabbar-h)); min-height: calc(100svh - var(--topbar-h) - var(--tabbar-h)); }
    .explore-map {
        --map-overlap: 28px;                        /* 시트가 덮는 높이 — viewer.css 가 힌트 자리를 잡을 때 읽는다 */
        order: -1; position: sticky; top: var(--topbar-h); z-index: 1; flex: none;
        height: 46vh; height: 46svh; min-height: 300px; max-height: 520px; border-radius: 0;
    }
    .explore-map::after { display: none; }
    .explore-panel {
        flex: 1; margin-top: -28px; overflow: visible; border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-bar);
    }
    /* 시트 머리(손잡이 + 층 고르기)가 통째로 붙는다. 손잡이가 있는 위 13px 는 머리 막대 밑으로 밀어 넣어 붙었을 때 자리를 먹지 않게 한다.
       둥근 모서리가 시트 모서리와 같은 자리에서 시작하므로, 붙은 뒤에도 모서리 밖으로 목록이 비치지 않는다
       (모서리를 칸 위쪽에서 따로 굴리면 그 28px 안으로 줄 실선과 타일이 지나갔다) */
    .explore-tabs { top: calc(var(--topbar-h) - 13px); padding: 23px var(--gutter) 6px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
    /* 시트 손잡이 */
    .explore-tabs::before { content: ""; position: absolute; left: 50%; top: 9px; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line-2); }
    .explore-body { padding: 12px var(--gutter) 28px; }

    /* 상세: 사진 → 내용 → 위치(둥근 지도 카드) 순서로 흐르고, 예약 바는 화면 아래에 붙어 있다 */
    .split { padding-bottom: 104px; }
    .split:has(.cta-note) { padding-bottom: 32px; }
    .split .side { overflow: visible; border: 0; border-radius: 0; background: none; }
    .room-body { padding: 16px var(--gutter) 24px; }
    .photo-empty { flex: none; height: 148px; min-height: 0; }
    /* 바로 아래 지도 카드에 같은 호박색 배지가 또 있다. 여기서는 알약을 벗기고 조용한 각주 한 줄로 둔다 (출처 등급은 남긴다) */
    .room-body .estimate-badge { display: flex; min-height: 0; margin-top: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-3); font-weight: 500; }
    .room-body .estimate-badge .icon { color: var(--ink-4); }
    .split .map { flex: none; height: 360px; margin: 0 var(--gutter); }
    .cta-bar {
        position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 34;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--sh-bar);
    }
    .cta-bar > .btn { max-width: 420px; margin-left: auto; }      /* 태블릿 폭에서 버튼이 끝없이 길어지지 않게 */
    .cta-note { position: static; margin: 0 var(--gutter) 24px; padding: 14px 16px; border: 0; border-radius: var(--r-md); background: var(--paper-2); box-shadow: none; }
    .cta-note .btn { flex: 0 1 auto; background: var(--surface); }
    .cta-note .btn:hover { background: var(--paper-3); }
}

@media (max-width: 767px) {
    /* 첫 화면(390×844)에 특별실 줄이 2.5개 이상 보이게 (SPEC 3-6): 지도는 화면의 38%, 머리말 줄과 리드는 숨기고
       h1 한 줄, 층 묶음 사이를 좁힌다. 학교 이름은 위 막대에 이미 있다 */
    .explore-map { height: 38vh; height: 38svh; min-height: 264px; max-height: 310px; }
    .explore-tabs { padding-top: 21px; }
    .explore-body { padding-top: 10px; }
    .pane-head .eyebrow { display: none; }
    .pane-head h1 { font-size: 26px; white-space: nowrap; }
    .pane-head .lead { display: none; }
    .floor-group { margin-top: 14px; }
    .pane-head + .floor-group { margin-top: 10px; }
    .room-card { min-height: 68px; padding: 10px; }
    /* 사진이 없는 띠는 장식이다: 96px 로 낮추고 그림도 그만큼 줄인다 */
    .photo-empty { flex: none; height: 96px; min-height: 0; }
    .photo-empty-art { right: 8px; bottom: -22px; width: 104px; height: 104px; stroke-width: 1.3; }
    .photo-empty-note { left: var(--gutter); bottom: 12px; }
    .room-head { gap: 14px; }
    .room-head h1 { font-size: 26px; }
    .split .map { height: 320px; }
    /* 탭 바가 있는 화면에서는 safe-area 를 탭 바가 이미 챙긴다 */
    .cta-bar { padding-bottom: 10px; }
    .cta-stub { padding-right: 14px; }
    .cta-bar { gap: 14px; }
}
/* 아주 좁은 화면: "로그인 후 예약하기"가 잘리지 않게 쪽지 칸을 접는다 */
@media (max-width: 379px) { .cta-stub { display: none; } }