/* 시로의 집 — 허브 첫 화면의 3D 건물. 색은 site.css 토큰만. */
/* 첫 화면은 3D 만: 머리줄 · 무대(남는 높이 전부) · 층 버튼 줄 · 한 줄 바닥글 */
.home-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.home-page main{flex:1;display:flex;flex-direction:column}
.home-page .house{flex:1;display:flex;flex-direction:column;padding:0}
.home-page .stage{flex:1;height:auto;min-height:340px;margin:0;border:0;outline:0;border-bottom:1px solid var(--rule)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:min(900px,100% - 32px);margin:0 auto;padding:6px 0}
.stage.nowebgl ~ .bar,.stage.failed ~ .bar{display:none}
.home-page header .wrap{padding:12px 0}
.bar .floors,.bar .hint{margin:0}
.zoom{display:flex;gap:6px;margin-right:auto}
.zoom button{font:inherit;font-size:16px;line-height:1;width:34px;height:31px;background:transparent;color:var(--ink-2);border:1px solid var(--rule);border-radius:2px;cursor:pointer}
.zoom button:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
footer.slim{margin:0;padding:8px 0;background:transparent}
footer.slim .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;line-height:1.6}
footer.slim a{color:var(--ink-2)}
/* 방 목록: 평소엔 화면낭독기·검색엔진용, 3D 가 안 되면 보인다 */
.home-page .rooms{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home-page .stage.nowebgl ~ .rooms,.home-page .stage.failed ~ .rooms{position:static;width:min(900px,100% - 32px);height:auto;margin:16px auto 0;overflow:visible;clip:auto;white-space:normal}
.home-page .stage.nowebgl{flex:0 0 auto;min-height:0}
.house{padding:36px 0 8px}
.house .kw{margin:0 0 10px}
.house .lead{max-width:640px}
.house h1{font-size:clamp(26px,4vw,38px);margin:0 0 12px;line-height:1.35}
.house .updated{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.1em;color:var(--ink-2);margin:0 0 16px}
.stage{position:relative;height:min(78vh,720px);min-height:380px;margin-top:18px;border:10px solid var(--wood);outline:1px solid var(--wood-2);background:var(--paper-2);
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px);touch-action:none;cursor:grab;user-select:none;overflow:hidden}
.stage:active{cursor:grabbing}
.stage canvas{display:block;width:100%;height:100%}
.labels{position:absolute;inset:0;pointer-events:none}
.leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.leads path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.75}
.leads circle{fill:var(--ink);stroke:var(--paper);stroke-width:1.5}
.callout{position:absolute;left:0;top:0;pointer-events:auto;display:block;text-decoration:none;color:var(--ink);line-height:1.3;
  transform:translate(-9999px,-9999px);background:var(--paper);border:1px solid var(--rule);padding:4px 8px;border-radius:2px}
.callout .pin{display:none}
.callout .txt{display:block}
.callout.left{text-align:right}
.callout.top,.callout.bottom{text-align:center}
.callout b{display:block;font-family:"Apple Myungjo","Noto Serif KR","Nanum Myeongjo",Georgia,serif;font-weight:600;font-size:14px}
.callout small{display:block;font-size:12px;color:var(--ink-2)}
.callout:hover,.callout:focus-visible{border-color:var(--ink)}
.callout:hover b,.callout:focus-visible b{text-decoration:underline;text-decoration-color:var(--mustard)}
.callout:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
.floors{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 0;font-size:13px;color:var(--ink-2)}
.floors button{font:inherit;font-size:13px;letter-spacing:.04em;background:transparent;color:var(--ink-2);border:1px solid var(--rule);border-radius:2px;padding:5px 12px;cursor:pointer}
.floors button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.floors button:focus-visible{outline:2px solid var(--mustard);outline-offset:2px}
.hint{font-size:13px;color:var(--ink-2);margin:10px 0 0}
.rooms{margin:28px 0 0}
.rooms h2{font-size:14px;letter-spacing:.2em;font-family:system-ui,sans-serif;font-weight:600;color:var(--ink-2);margin:0 0 6px;text-transform:uppercase}
.rooms h3{font-size:15px;margin:14px 0 2px;color:var(--ink-2);font-family:system-ui,sans-serif;font-weight:600;letter-spacing:.06em}
.rooms ul{list-style:none;margin:0;padding:0}
.rooms li{padding:8px 0;border-bottom:1px dotted var(--rule);font-size:15px}
.rooms li small{display:block;font-size:13px;color:var(--ink-2)}
.rooms h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stage.nowebgl canvas,.stage.nowebgl .labels{display:none}
.stage .fallback{display:none;padding:24px;color:var(--ink-2);font-size:14px}
.stage.nowebgl .fallback{display:block}
@media(max-width:720px){.stage{height:62vh;min-height:320px}.home-page .stage{height:auto}.callout b{font-size:13px}.callout small{display:none}}
@media(max-width:480px){.callout{padding:3px 5px}.callout b{font-size:12.5px}}
.loading{position:absolute;inset:auto 0 45% 0;text-align:center;font-size:14px;color:var(--ink-2);margin:0}