@font-face{font-family:BCEmoji;src:local('Apple Color Emoji'),local('AppleColorEmoji'),local('Segoe UI Emoji'),local('Noto Color Emoji');unicode-range:U+1F000-1FAFF,U+2600-27BF,U+2B00-2BFF,U+FE0F,U+200D,U+231A-231B,U+23E9-23FA;size-adjust:80%}:root{--ink:#172f39;--muted:#52666c;--cream:#f5f4ec;--mint:#d9ffb7;--coral:#d97754}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#c5d7df;color:var(--ink);font-family:BCEmoji,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}button,a{font:inherit}button{border:0;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid var(--focus-ring,#227dbe);outline-offset:3px}[hidden]{display:none!important}button:disabled{opacity:.5;cursor:wait}#world{position:absolute;inset:0;overflow:hidden}#world canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:max(22px,env(safe-area-inset-top));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;z-index:40;pointer-events:none}header>*{pointer-events:auto}.brand{font-size:27px;letter-spacing:-1.3px;font-weight:900;background:#f5f4eae8;border-radius:15px;padding:9px 15px}.brand span{color:var(--coral)}.place{font-size:11px;letter-spacing:2px;background:#f5f4eae8;border-radius:20px;padding:13px 20px}.place b{letter-spacing:0;font-weight:500;margin-left:15px}.glass{background:#f5f4eaf0;border:1px solid #fff8;box-shadow:var(--shadow-sm,0 5px 20px #1e3c4112);border-radius:13px;padding:14px 18px;min-height:46px;font-size:12px}.glass b{padding-left:10px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;color:#506b6a}.city-title{position:absolute;top:114px;left:46px;pointer-events:none;max-width:380px;text-shadow:0 1px 10px #ecf2e8}.city-title h1{font-size:32px;letter-spacing:-1.4px;margin:13px 0}.city-title p{font-size:13px;line-height:1.8;color:#38505a}.district-tools{position:absolute;right:32px;top:100px;display:flex;gap:8px}.city-bottom{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);width:min(850px,90vw)}.city-hint{width:max-content;max-width:100%;margin:0 auto 14px;background:#1a333bed;color:#f4f5e9;padding:11px 19px;border-radius:30px;font-size:12px}.city-hint i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:6px}.quick-buildings{display:flex;gap:8px;overflow:auto;padding:4px}.quick-buildings button{background:#f7f6eff2;border:1px solid #fff;border-radius:17px;padding:18px;text-align:left;flex:1;min-width:174px;box-shadow:var(--shadow-sm,0 8px 24px #142b3612)}.quick-buildings small{display:block;color:#62767b;font-size:10px;margin-top:8px}.quick-buildings b{font-size:13px}.quick-buildings em{font-style:normal;font-size:11px;color:#a25335;float:right}.world-label{position:absolute;transform:translate(-50%,-100%);border:1px solid #fdfaf080;border-radius:7px;background:#16313ddd;color:#fbf9ef;padding:8px 11px;white-space:nowrap;font-size:11px;box-shadow:0 4px 10px #11273120;min-height:32px;z-index:5}.world-label:after{content:'';position:absolute;top:100%;left:50%;height:20px;width:1px;background:#1b3843}.world-label.selected{background:#e7c082;color:#263b40}.detail{position:absolute;left:36px;bottom:64px;width:360px;padding:28px;background:#f7f5edeF;border:1px solid #fff;border-radius:24px;box-shadow:var(--shadow-lg,0 15px 70px #243b3e28);z-index:30}.close{width:44px;height:44px;border-radius:50%;background:#e6e9e0;font-size:25px;flex-shrink:0}.detail>.close,.data-dialog>.close{position:absolute;right:15px;top:12px}.detail h2{font-size:27px;letter-spacing:-1px;margin:15px 0 8px;max-width:270px}.detail>p{font-size:12px;line-height:1.65;color:#53696b}.building-metrics{display:flex;gap:27px;border-top:1px solid #d6dbd1;border-bottom:1px solid #d6dbd1;padding:20px 0;margin:20px 0}.building-metrics b{display:block;font-size:23px}.building-metrics span{font-size:10px;display:block;color:#5b706f;margin-top:7px}.detail-actions{display:flex;gap:7px}.primary{background:var(--ink);color:#f8f6ee;font-size:13px;font-weight:700;padding:17px 19px;border-radius:12px;min-height:51px}.primary:hover{background:#2c4e57}.detail-actions .primary{flex:1}.secondary{background:#e6e9df;padding:15px;border-radius:12px;font-size:12px;min-height:48px}.detail>a{display:block;font-size:10px;color:#526965;margin-top:16px}.quiet{background:transparent;padding:15px;min-height:46px;font-size:12px}.attribution{position:absolute;bottom:5px;right:9px;z-index:70;background:#f6f5ede8;font-size:9px;padding:3px 6px;border-radius:4px}.attribution a{color:inherit}.data-badge{position:absolute;bottom:29px;left:24px;z-index:40;border-radius:20px;background:#f5f4eaea;font-size:10px;padding:9px 13px}.data-badge span{color:#526865}.climb-top{position:absolute;left:28px;right:28px;top:26px;display:flex;gap:10px;align-items:flex-start}.climb-top>.glass:first-child{font-size:20px}.height-panel{background:#f5f4edee;border-radius:15px;padding:13px 18px;min-width:175px}.height-panel small{font-size:10px;display:block;margin-bottom:6px}.height-panel strong{font-size:27px}.height-panel em{font-style:normal;font-size:12px;font-weight:500;margin-left:6px}.progress{height:3px;background:#d5ddd0;margin-top:8px;overflow:hidden}.progress i{height:100%;display:block;background:#558a65}.climb-top #timer{margin-left:auto;font-variant-numeric:tabular-nums}.context-buttons{position:absolute;left:28px;top:145px;display:flex;gap:8px}.mini-map{position:absolute;right:25px;top:145px;width:155px;height:155px;background:#e4e7dfdd;border:3px solid #f6f5e9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm,0 5px 20px #1e3c4120)}.mini-map svg{width:100%;height:100%}.thumb-area{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);width:390px}.thumb-area>p{background:#18363de8;color:#f7f6ee;font-size:11px;padding:11px 14px;border-radius:20px;width:max-content;max-width:100%;margin:0 auto 14px}.thumb-deck{background:#18353feF;border:1px solid #ffffff55;border-radius:23px;padding:13px;box-shadow:var(--shadow-md,0 8px 40px #19364222)}.thumb-caption{display:flex;justify-content:space-between;color:#e4ecdf;font-size:10px;padding:1px 3px 13px}.pads{display:flex;gap:8px}.pads button{width:33.33%;height:92px;border-radius:15px;background:#35505b;color:#f8f8ec;font-size:33px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.pads button:nth-child(2){background:var(--mint);color:#1c3e3d}.pads span{display:block;font-size:11px;margin-top:8px}.pads button.held{background:#f1c37e;color:#20353d;box-shadow:inset 0 0 0 3px #fff7}.arrival{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;color:#f6f4e9;background:#15323ee8;padding:25px 40px;border-radius:20px;min-width:280px}.arrival small{font-size:8px;letter-spacing:2px}.arrival h2{font-size:27px;margin:15px 0}.arrival p{font-size:12px}.cinema{position:absolute;inset:0;border-top:45px solid #112c37;border-bottom:55px solid #112c37;pointer-events:none}.cinema>button{position:absolute;right:25px;top:20px;pointer-events:auto}.cinema>div{position:absolute;bottom:28px;left:40px;color:white;text-shadow:0 2px 15px #17323e}.cinema h2{font-size:38px;letter-spacing:-1px;margin:10px 0}.cinema small{font-size:11px;letter-spacing:2px}.cinema p{font-size:13px}.modal{position:absolute;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#102e3b6b;backdrop-filter:blur(4px)}.dialog,.result-card{position:relative;background:#f7f6ef;border:1px solid #fff;border-radius:24px;padding:32px;width:min(410px,100%);box-shadow:var(--shadow-lg,0 20px 80px #132f3933);max-height:90dvh;overflow:auto}.dialog h2,.result-card h2{font-size:26px;letter-spacing:-1px;margin:16px 0}.dialog p{font-size:13px;line-height:1.8;color:#4a6269}.dialog>.primary,.dialog>.quiet,.result-card>button{display:block;width:100%;margin-top:8px}.result-card{text-align:center}.result-icon{font-size:70px;color:#b06a36;margin:13px 0}.result-card>p{font-size:12px;line-height:1.7;color:#52676b}.result-stats{display:flex;justify-content:center;gap:38px;padding:22px 0;margin:15px 0;border-top:1px solid #d8e0d3;border-bottom:1px solid #d8e0d3}.result-stats b{display:block;font-size:23px}.result-stats span{display:block;font-size:10px;margin-top:7px;color:#52676b}.summit-title{position:absolute;left:35px;top:115px}.summit-title h2{font-size:32px}.summit-title p{font-size:12px}#leaveSummit{position:absolute;bottom:65px;left:50%;transform:translateX(-50%)}.map-panel{position:absolute;inset:20px;z-index:90;display:flex;flex-direction:column;background:#f7f6ef;border-radius:20px;padding:22px;box-shadow:var(--shadow-lg,0 15px 60px #18374640)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-heading h2{font-size:25px;margin:10px 0}.panel-heading p{font-size:12px;color:#53676e}.map-panel #realMap{flex:1;min-height:100px;border-radius:12px;margin-top:15px;background:#dfe7d6}.map-explain{font-size:11px;color:#50656b;margin:12px 0 0}.leaflet-container{font-family:inherit}.collection{position:absolute;inset:0;z-index:85;background:#f4f3ea;overflow:auto;padding:42px max(25px,calc((100vw - 1050px)/2)) 90px}.collection .panel-heading{margin-bottom:25px}#collectionGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.collection-card{background:#fffef8;border:1px solid #dce1d5;border-radius:20px;padding:20px;text-align:left}.collection-card .art{height:175px;background:#e4eadf;border-radius:12px;display:grid;place-items:center}.collection-card svg{width:85%;height:80%}.collection-card small{display:block;font-size:10px;color:var(--text-muted,#56686c);margin:15px 0 8px}.collection-card h3{font-size:17px;margin:0 0 9px}.collection-card p{font-size:11px;color:#5a6f70;line-height:1.7;margin-bottom:0}.collection-card.locked .art{opacity:.5;filter:grayscale(1)}.save-note{font-size:11px;color:#536b69;margin-top:25px}.data-dialog{width:min(490px,100%)}.data-dialog a{display:block;font-size:12px;color:#395f67;margin-top:13px}.data-dialog #dataFacts{background:#e7ecdf;padding:15px;border-radius:12px;font-size:12px;line-height:1.9}.loading{position:absolute;inset:0;z-index:150;background:#e3e9df;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading b{font-size:24px}.loading p{font-size:13px}.loading button{padding:16px;border-radius:12px;background:#193743;color:white}#toast{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:#17323dee;color:white;padding:13px 22px;border-radius:25px;z-index:160;font-size:12px;opacity:0;pointer-events:none}#toast.show{opacity:1}body.playing header{display:none}body.playing .data-badge{left:12px;bottom:26px}.world-label:hover{background:#f0cf8e;color:#1a343e}@media(max-width:700px){header{left:14px;right:14px;top:max(15px,env(safe-area-inset-top))}.brand{font-size:23px;padding:8px 10px}.place{display:none}header>.glass{font-size:11px;padding:11px 14px}.city-title{left:20px;top:87px;max-width:90%}.city-title h1{font-size:25px;margin:10px 0}.city-title p{font-size:11px;margin:0}.city-title .eyebrow{font-size:8px}.district-tools{top:186px;left:20px;right:auto}.district-tools .glass{padding:11px 13px;font-size:10px;min-height:42px}.city-bottom{bottom:68px;width:calc(100% - 24px)}.city-hint{font-size:10px;padding:10px 13px;margin-bottom:8px}.quick-buildings button{min-width:160px;padding:15px}.quick-buildings b{font-size:12px}.quick-buildings small{font-size:9px}.world-label{font-size:9px;padding:7px 8px;max-width:170px}.detail{left:12px;right:12px;bottom:57px;width:auto;padding:21px}.detail h2{font-size:23px;margin:12px 0 6px}.detail>p{font-size:11px}.building-metrics{margin:15px 0;padding:15px 0}.building-metrics b{font-size:21px}.building-metrics span{font-size:9px}.detail #buildingStory{display:none}.detail>a{font-size:9px;margin-top:12px}.data-badge{left:12px;bottom:29px;font-size:9px}.attribution{font-size:8px;bottom:5px}.climb-top{left:12px;right:12px;top:max(17px,env(safe-area-inset-top));gap:7px}.height-panel{padding:12px;min-width:145px}.height-panel strong{font-size:24px}.height-panel em{font-size:10px}.climb-top .glass{padding:12px;min-height:44px}.climb-top #timer{font-size:10px;padding:12px 8px}.context-buttons{left:12px;top:126px;flex-direction:column;gap:6px}.context-buttons .glass{font-size:10px;padding:11px}.mini-map{right:12px;top:126px;width:102px;height:102px;border-width:2px}.thumb-area{width:calc(100% - 24px);max-width:390px;bottom:57px}.thumb-area>p{font-size:10px;padding:9px 12px;margin-bottom:10px}.thumb-caption{font-size:9px}.pads button{height:82px}.pads span{font-size:10px}.thumb-deck{padding:11px;border-radius:20px}.arrival{padding:22px;top:40%}.cinema>div{left:25px;bottom:25px}.cinema h2{font-size:28px}.cinema>button{right:12px;font-size:10px}.summit-title{left:23px;top:92px}.summit-title h2{font-size:27px;margin:13px 0}.summit-title p{font-size:10px}.map-panel{inset:8px;padding:15px;border-radius:16px}.panel-heading h2{font-size:19px}.panel-heading .eyebrow{font-size:12px}.map-explain{font-size:10px;line-height:1.6}.collection{padding:27px 17px 75px}#collectionGrid{grid-template-columns:repeat(2,1fr);gap:10px}.collection-card{padding:12px;border-radius:15px}.collection-card .art{height:125px}.collection-card h3{font-size:14px}.collection-card p{font-size:10px}.dialog,.result-card{padding:26px}.dialog h2{font-size:24px}}@media(max-height:650px){.city-title p{display:none}.district-tools{top:160px}.city-bottom{bottom:57px}.detail{bottom:52px;padding:17px}.detail>p{display:none}.detail .building-metrics{padding:12px 0;margin:10px 0}.thumb-area{bottom:49px}.pads button{height:65px}.thumb-area>p{margin-bottom:6px}.mini-map{width:80px;height:80px}.city-title h1{font-size:23px}.collection-card .art{height:100px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.player-label{background:#ddffb8;color:#1f393b;border:2px solid #fff;pointer-events:none;font-weight:700}
.collection{z-index:110}
header .place{margin-right:auto;margin-left:20px}header{gap:10px}.nav-dialog{width:min(500px,100%);padding-top:30px}.nav-dialog>.close,#profileModal .close{position:absolute;top:14px;right:14px}.dialog label{font-size:12px;font-weight:700;display:block;margin:14px 0 8px}.dialog input{font:inherit;width:100%;background:white;border:1px solid #bdc9bd;border-radius:10px;padding:13px;color:var(--ink);font-size:14px}#destinations{display:flex;gap:6px;overflow:auto;padding:10px 0;max-height:100px}#destinations button{border-radius:9px;min-width:125px;background:#e4e9dd;padding:12px;font-size:11px;text-align:left}#destinations button.active{background:#244752;color:white}.transport-options{display:flex;gap:6px;margin-top:10px}.transport-options button{flex:1;background:#e3e8dc;border:2px solid transparent;padding:12px 6px;border-radius:11px;font-size:12px}.transport-options button.active{border-color:#5c8065;background:#d9f1c4}.transport-options small{display:block;font-size:9px;line-height:1.7;margin-top:5px}#inventory{font-size:11px;color:#546d69;margin:12px 0 0}#routeSummary{border-radius:12px;background:#e4eadf;padding:16px;font-size:13px;line-height:1.8;margin:10px 0}#routeSummary b{font-size:18px}.route-note{font-size:10px!important;line-height:1.6!important}#tripHUD{position:absolute;right:25px;bottom:72px;width:320px;background:#183744f2;color:#f6f4eb;z-index:45;border:1px solid #ffffff55;border-radius:19px;padding:18px;box-shadow:var(--shadow-md,0 8px 35px #1d39472b)}#tripHUD>div:first-child{position:relative}#tripHUD small{display:block;font-size:9px;color:#bff09e;margin-bottom:7px}#tripHUD b{font-size:14px}/* 이동 중 버튼 줄(2026-09-27): 「🚕 여기서 내리기」처럼 글자가 길어져 제목 옆 구석 버튼에서 아래 줄로 */.trip-actions{display:flex;gap:8px;margin-top:12px}.trip-actions button{flex:1;min-height:44px;border:0;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:700;background:#ffffff1f;color:#f3f3e8}#tripAlight{background:#bff09e;color:#183744}#tripHUD p{font-size:12px;line-height:1.7;margin:13px 0}.trip-progress{height:4px;background:#ffffff22;border-radius:4px;overflow:hidden}.trip-progress i{display:block;height:100%;background:#d6ffaf}#tripHUD footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}#tripHUD footer span{font-size:11px}#zoomButtons{position:absolute;right:25px;top:170px;display:grid;gap:5px;z-index:25}#zoomButtons button{width:42px;height:42px;background:#f7f5e8e8;border-radius:12px;font-size:22px}.claim-label{background:#b65436;color:#fff7e1;border-color:#ffe5b1;font-weight:700}body.playing #zoomButtons{display:none}body.traveling .city-bottom{display:none}body.traveling .city-title{display:none}#profileOpen{white-space:nowrap}.budget-note{font-size:11px;background:#e4ebd9;padding:10px;border-radius:9px;margin:8px 0}#sendPlayer{width:100%}@media(max-width:700px){header .brand{font-size:20px}header{gap:5px}#profileOpen{padding:10px;font-size:10px;min-height:42px}header #collectionOpen{padding:10px;min-height:42px}.district-tools{right:12px;left:12px;flex-wrap:wrap;gap:5px;top:184px}.district-tools .glass{padding:10px;font-size:9px}#zoomButtons{right:12px;top:244px}#tripHUD{right:12px;left:12px;bottom:60px;width:auto;padding:15px}.nav-dialog{padding:25px 20px}.nav-dialog h2{font-size:23px}.nav-dialog>p{font-size:11px}#destinations button{min-width:112px;padding:10px}#routeSummary{padding:12px}.transport-options button{padding:11px 4px}.transport-options small{font-size:8px}.city-hint{font-size:9px}}@media(max-height:650px){.district-tools{top:151px}#zoomButtons{top:240px}.nav-dialog{padding-top:27px}.nav-dialog h2{margin:10px 0}}
.bike-pickup{background:#e6e1a5;color:#294647;border:1px solid white;font-size:9px}.detail .budget-note{font-size:11px}.nav-dialog #pickupBike{padding:7px 0;min-height:44px;font-size:11px}.world-label.claim-label{transform:translate(-50%,-180%)}
body.street-focus .city-title,body.street-focus .city-bottom{display:none}
#cityUI{position:absolute;inset:0;z-index:20;pointer-events:none}#cityUI .district-tools,#cityUI .city-bottom{pointer-events:auto}#summitUI{position:absolute;inset:0;z-index:20;pointer-events:none}#summitUI button{pointer-events:auto}

/* v5 passport and economy */
#economyModal{z-index:130}#purchaseModal{z-index:150}.economy-dialog{width:min(560px,94vw);max-height:90dvh;overflow:auto}.econ-tabs{display:flex;gap:6px;margin:20px 0}.econ-tabs button{flex:1;padding:12px 5px;background:#e9eee5;color:#27434b;border-radius:12px;border:0}.econ-tabs button.active{background:#264b4d;color:#fff}.econ-hero{padding:20px;background:#e7efdc;border-radius:16px;margin:12px 0;color:#294345}.econ-hero h3{font-size:var(--fs-title,20px);margin:8px 0}.econ-hero small{letter-spacing:0;font-size:var(--fs-small,12.5px);font-weight:700;color:var(--text-muted,#56686c)}.econ-hero .econ-hero-lead{margin:4px 0 0;font-size:13px;letter-spacing:0;line-height:1.45;font-weight:600}/* 2026-10-11 QA Q14: 해외 여행 안내 문장이 자간 2px·10px 소제목 모양이라 「나 라 를…」처럼 띄어 보이고 제목보다 먼저 오던 것 → 제목 다음 보통 본문 */.econ-row{padding:16px;background:#f0eee5;border-radius:12px;margin:12px 0}.econ-row p{margin:8px 0}.econ-row progress{width:100%;accent-color:#48745b;margin:12px 0}.econ-row small{display:block;line-height:1.7}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.product-grid button{padding:16px 10px;text-align:left;border:1px solid #c9d4c5;border-radius:14px;background:#fffef7;color:#26434a}.product-grid span,.product-grid small{display:block;margin-top:8px}.econ-note{font-size:12px!important;line-height:1.8;color:#647170}#adBuilding{width:100%;padding:12px;margin:10px 0 15px;border:1px solid #b4c2b6;border-radius:10px}#flightBanner{position:fixed;top:85px;left:50%;transform:translateX(-50%);z-index:80;padding:14px 24px;background:#29494d;color:#fff;border:1px solid #a6ccad;border-radius:30px;max-width:94vw;white-space:nowrap}.plane-animation{text-align:center;font-size:70px;color:#527a77;animation:plane-float 3s ease-in-out infinite}@keyframes plane-float{50%{transform:translateY(-12px)}}@media(prefers-reduced-motion:reduce){.plane-animation{animation:none}}#tapBudget{white-space:pre-line}.district-tools{flex-wrap:wrap;max-width:96vw}

.approach-point{border:2px solid #fff;border-radius:24px;background:#e7f0e4;color:#28474a;z-index:7;font-size:10px;padding:9px 11px;box-shadow:0 2px 9px #23453633}.approach-point.ready{background:#65e69b;color:#133f2b;border-color:#d8ffe8}.approach-point.locked{background:#e1d6be;color:#65563c}.approach-point:before{content:'●';margin-right:4px}#nearbyLegend{position:absolute;left:20px;bottom:205px;z-index:18;font-size:11px;background:#f7f8eae8;padding:8px 12px;border-radius:10px;pointer-events:none}.playing #nearbyLegend{display:none}.arrival{pointer-events:none}.arrival button{pointer-events:auto}#cancelClimb{background:#fff0e5;color:#963e25}.street-focus #nearbyLegend{bottom:70px}@media(max-width:700px){#nearbyLegend{bottom:218px;left:12px;font-size:9px;max-width:95vw}.approach-point{font-size:9px;padding:7px}.detail{max-height:55dvh;overflow:auto}}

/* v7 facade decorator — mobile bottom sheet, desktop side panel */
.decor-entry{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:14px 16px;border-radius:12px;background:linear-gradient(90deg,#fff1dc,#f3e9ff);color:#5a3a22;font-size:13px;font-weight:700;min-height:48px}.decor-entry small{font-weight:500;color:#7b6150;font-size:11px}
.decor-sheet{position:absolute;z-index:60;right:20px;top:20px;bottom:20px;width:380px;overflow:auto;background:#f7f6efF7;border:1px solid #fff;border-radius:22px;padding:18px 18px 22px;box-shadow:var(--shadow-lg,0 15px 60px #13303b33);overscroll-behavior:contain}
.decor-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.decor-head h2{font-size:21px;letter-spacing:-.6px;margin:8px 0 4px}.decor-head .eyebrow{font-size:8px;letter-spacing:1.2px}
.decor-face{display:flex;align-items:center;gap:6px;margin:10px 0;background:#e6ebe1;border-radius:12px;padding:5px}.decor-face span{flex:1;text-align:center;font-size:11px;color:#34494e}.decor-face button{width:44px;height:40px;border-radius:9px;background:#fffef8;font-size:13px}
.decor-tabs{display:flex;gap:6px;margin:8px 0 10px}.decor-tabs button{flex:1;padding:11px;border-radius:11px;background:#e7ebe2;font-size:13px;font-weight:700;color:#2d474d}.decor-tabs button.active{background:#1f3f47;color:#fff}
.decor-row{display:flex;gap:6px;align-items:center}.decor-upload{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:50px;border:2px dashed #9fb2a7;border-radius:13px;background:#fffef8;font-size:13px;font-weight:700;color:#2c4a4f;cursor:pointer}.decor-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.decor-upload:focus-within{outline:3px solid #c45933;outline-offset:2px}
.seg{display:flex;gap:4px;margin:9px 0;background:#e6ebe1;border-radius:11px;padding:4px}.seg button{flex:1;padding:9px 4px;border-radius:8px;font-size:11px;color:#3a5155;min-height:36px}.seg button.active{background:#fffef8;color:#16323b;font-weight:800;box-shadow:0 1px 4px #1c3a4120}
.slider{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px;font-size:11px;color:#46605f;margin:4px 0;min-height:34px}.slider input{width:100%;accent-color:#2f5d57;height:28px}
.check{display:flex;gap:8px;align-items:center;font-size:12px;color:#3c5557;margin:10px 0;line-height:1.5}.check input{width:20px;height:20px;accent-color:#2f5d57;flex-shrink:0}
.decor-sheet .field{display:block;font-size:12px;font-weight:700;margin:4px 0 6px}.decor-sheet input[type=text],#decorText{width:100%;font:inherit;font-size:16px;border:1px solid #bccabf;border-radius:11px;padding:12px;background:#fff;color:var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:8px 0}.swatches button{width:34px;height:34px;border-radius:50%;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #a9b8ad}.swatches button.active{box-shadow:0 0 0 3px #1f3f47}.swatches .neon{margin:0 0 0 auto}
.decor-hint{font-size:11px;color:#56706c;background:#e9efe3;border-radius:10px;padding:9px 11px;margin:10px 0}
.decor-actions{display:flex;gap:7px}.decor-actions .primary{flex:1}.decor-sheet #decorDelete{width:100%;color:#963e25}.decor-note{font-size:10px;line-height:1.7;color:#63726f;margin:8px 0 0}
#showcaseUI{position:absolute;left:50%;bottom:max(40px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:#15313cee;color:#f5f3e8;border-radius:18px;padding:12px 12px 12px 18px;display:flex;gap:12px;align-items:center;max-width:94vw}#showcaseUI p{font-size:11px;margin:0}#showcaseUI .primary{min-height:44px;padding:12px 14px;white-space:nowrap;background:#f5f3e8;color:#15313c}
.collection-card .decor-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:9px;background:#f3e6ff;color:#5d3d7a;font-size:9px}
@media(max-width:700px){.decor-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:48dvh;border-radius:22px 22px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}.decor-head h2{font-size:18px;margin:6px 0 2px}.decor-face{margin:8px 0}.slider{grid-template-columns:70px 1fr}#showcaseUI{width:calc(100% - 24px)}#showcaseUI p{font-size:10px}}
/* ODbL 출처 표기는 편집 중에도 가리지 않는다 — 시트와 겹치지 않게 위로 옮긴다. */
body.decorating .data-badge{display:none}body.decorating .attribution{top:max(8px,env(safe-area-inset-top));bottom:auto;right:8px}@media(min-width:701px){body.decorating .attribution{right:420px}}
/* 👑 건물주 지붕 이름표(2026-09-27): 점령 깃발(붉은색)과 구분되는 금색 · 내 자리는 테두리 강조 */.world-label.claim-label.landlord-label{background:#f2c54b;color:#3b2a05;border-color:#fff4c9}.world-label.claim-label.landlord-label.mine{background:#ffd966;border-color:#3b2a05}
/* 🛍 브랜드 가상 상점(2026-09-27 · 명세 §2·§4): 상점 건물이면 등반 줄을 숨기고 브랜드명·「브랜드 가상 상점」·한 줄 소개·공식 연결 도메인 + 주 버튼 하나 */
.detail.store-mode .building-metrics,.detail.store-mode #claimOwner,.detail.store-mode #claimPlan,.detail.store-mode #ownershipCost,.detail.store-mode #tapBudget,.detail.store-mode #wishBuilding,.detail.store-mode #buildingAdStatus,.detail.store-mode .building-more,.detail.store-mode #locate,.detail.store-mode #decorOpen,.detail.store-mode #onboardingNote{display:none!important}
.store-info{margin:6px 0 12px;display:grid;gap:6px}.store-info p{margin:0}.store-brand{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline}.store-brand b{font-size:18px}.store-kind{font-size:12px;font-weight:700;color:#b24a2c;background:#ffe6dc;border-radius:999px;padding:3px 9px}
.store-intro{font-size:14px}.store-domain{font-size:12px;color:#4a5d63}.store-domain b{font-family:ui-monospace,Menlo,monospace;color:#15313c}.store-demo{font-size:12px;font-weight:700;color:#5b4b00;background:#fff4c2;border-radius:8px;padding:6px 8px}.store-note{font-size:11px;color:#5d6d71}.store-reason{font-size:12px;color:#8a3a1c}
.store-nearby{display:grid;gap:6px}.store-nearby b{font-size:12px}.store-nearby button{min-height:44px;text-align:left}
.world-label.approach-point.store{background:#ff7a59;color:#fff;border-color:#ffe1d6;font-weight:800}
.store-map-badge{display:grid;place-items:center;width:26px!important;height:26px!important;border-radius:50%;background:#ff7a59;border:2px solid #fff;box-shadow:0 2px 6px #0004;font-size:14px;line-height:1}
.brand-visit{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#102e3bcc;backdrop-filter:blur(6px)}.brand-visit[hidden]{display:none}
.brand-visit-card{position:relative;width:min(420px,100%);background:#f7f5ed;border-radius:24px;padding:26px 22px 20px;box-shadow:0 15px 70px #0005;display:grid;gap:8px}.brand-visit-card .eyebrow{justify-self:start;margin-right:52px}.brand-visit-card h2{margin:4px 48px 0 0;font-size:22px;overflow-wrap:anywhere}
.brand-visit-close{position:absolute;top:12px;right:12px;min-width:44px;min-height:44px}.brand-visit-domain{margin:0;font-size:12px;color:#4a5d63}.brand-visit-domain b{font-family:ui-monospace,Menlo,monospace;color:#15313c;overflow-wrap:anywhere}
.brand-visit-status{margin:6px 0 0;font-size:16px;font-weight:800}.brand-visit[data-state="VALIDATING"] .brand-visit-status,.brand-visit[data-state="OPENING"] .brand-visit-status{color:#4a5d63}
.brand-visit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.brand-visit-actions button{min-height:48px;flex:1 1 140px}
body.brand-visiting #hudRight,body.brand-visiting #hudLeft,body.brand-visiting #actionSlot{visibility:hidden}
/* 🪟 게임 안 표시(승인 제휴 사이트만 · 2026-09-28 PR2): 위쪽 고정 막대(안전 영역 · 닫기 44px) + 전체 iframe · 게임 버튼과 겹치지 않는다 */
.brand-embed{position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:auto auto 1fr;background:#f7f5ed}.brand-embed-bar{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:#093329;color:#fbfaf1}.brand-embed-bar b{font-family:ui-monospace,Menlo,monospace;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.brand-embed-status{margin-right:auto;font-size:12px;opacity:.85;white-space:nowrap}.brand-embed-close{position:static!important;min-width:64px;min-height:44px;border-radius:12px;border:2px solid #c6fa49;background:#c6fa49;color:#093329;font-weight:900}
.brand-embed-wait{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px max(12px,env(safe-area-inset-left));background:#fff1dc;color:#7a3e00}.brand-embed-wait[hidden]{display:none}.brand-embed-wait p{flex:1 1 100%;margin:0;font-weight:700}.brand-embed-wait button{min-height:44px;flex:1 1 140px}.brand-embed-frame{width:100%;height:100%;border:0;background:#fff}
/* 🏷 가입 유형 · 브랜드 관리(2026-09-28) */
.auth-type{display:grid;gap:4px;border:1px solid #dfe6d3;border-radius:14px;padding:8px 12px;margin:8px 0}.auth-type legend{font-weight:800;padding:0 4px}.brand-fields{display:grid;gap:4px;margin:4px 0 8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #dfe6d3}.brand-fields[hidden]{display:none}
.brand-dash{display:grid;gap:8px;margin:10px 0;padding:12px;border-radius:16px;background:#fff;border:1px solid #dfe6d3}.brand-dash h3{margin:0}.brand-dash .brand-status{font-weight:800}.brand-dash .brand-status[data-status="verified"]{color:#1b6b3a}.brand-dash .brand-status[data-status="rejected"],.brand-dash .brand-status[data-status="suspended"]{color:#9b1c1c}.brand-dns{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:#f7f5ed;font-size:12.5px}.brand-dns code{font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere;user-select:all}.brand-stats{list-style:none;margin:0;padding:0;display:grid;gap:6px}.brand-stats li{padding:8px 10px;border-radius:12px;background:#f7f5ed}
/* 🏬 브랜드 직접 임대(2026-09-28 PR3): 간판 자리 미리보기(벽 · 자리 · 레터박스 그림) · 임대 가능 건물 지도 · 신청/임대 카드 */
.slot-preview{margin:6px 0;display:grid;gap:4px;justify-items:start}.slot-preview svg{width:100%;max-width:240px;max-height:220px;background:#eef1ea;border-radius:10px}.slot-wall{fill:#c9cfc4;stroke:#7d877d;stroke-width:1;vector-effect:non-scaling-stroke}.slot-panel{fill:#15313c;stroke:#20282c;stroke-width:1;vector-effect:non-scaling-stroke}.slot-art{fill:#ff7a59}.slot-name{fill:#fff;font-weight:800;font-family:system-ui,sans-serif}.slot-caption{font-size:12px;color:#4a5550;display:flex;flex-wrap:wrap;gap:2px}
.rental-box{display:grid;gap:8px}.rental-box h4{margin:4px 0 0}.rental-card{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid #dfe6d3;background:#fafcf7}.rental-card p{margin:0}.rental-card button{justify-self:start;min-height:44px}
.rental-picker{display:grid;gap:8px;margin-top:6px}.rental-filters{display:flex;flex-wrap:wrap;gap:6px}.rental-map svg{width:100%;max-width:360px;border-radius:12px;display:block}.rental-map-bg{fill:#e8efe4}.rental-dot{fill:#ff7a59;stroke:#fff;stroke-width:2;cursor:pointer}.rental-dot:focus{outline:none;stroke:#15313c;stroke-width:3}.rental-dot[data-status="held"],.rental-dot[data-status="blocked"],.rental-dot[data-status="cap_full"]{fill:#9aa39a}.rental-dot[data-status="mine"]{fill:#1b6b3a}
.rental-list{max-height:200px;overflow:auto;margin:0}.rental-list button{text-align:left;min-height:44px}.rental-detail{display:grid;gap:4px}.rental-detail h5{margin:4px 0;font-size:15px}.rental-form{display:grid;gap:4px;margin-top:6px}.rental-form input{min-height:40px}
/* ☕ 옥상 꾸미기 시트(2026-09-27 PR3): 외벽 시트와 같은 자리 · 휴대폰은 아래 시트(최대 46dvh · 안전 영역) · 버튼 44px */
.roof-sheet .decor-head h2{display:flex;flex-direction:column;gap:2px}.roof-sheet .roof-building{font-size:11px;font-weight:600;color:#63726f}
.roof-badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px}.roof-badge{font-size:10px;font-weight:700;border-radius:999px;padding:4px 9px;background:#e8efe6;color:#35524a}.roof-badge.warn{background:#fff1d6;color:#7a4b0c}
.roof-themes{display:flex;gap:6px;margin:4px 0 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:2px}/* 2026-09-28 카테고리 세트 칩이 늘어 가로로 넘긴다(칩 글자가 세로로 쪼개지지 않게) */.roof-chip{flex:1 0 auto;white-space:nowrap;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:14px;border:1px solid #cdd8cf;background:#fff;color:var(--ink);font-weight:700;font-size:13px;padding:6px}.roof-chip[aria-checked=true]{background:#093329;color:#f4f7ea;border-color:#093329}.roof-chip[aria-disabled=true]{opacity:.55}.roof-chip small{font-size:9px;font-weight:600}
.roof-status{min-height:18px;font-size:12px;font-weight:700;color:#35524a;margin:4px 0}.roof-status.bad{color:#a8331f}
.roof-sel{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.roof-tool{min-width:44px;min-height:44px;padding:6px 10px;font-size:14px}.roof-nudge{display:flex;gap:4px}.roof-label{display:flex;flex-direction:column;gap:4px;width:100%;font-size:11px;font-weight:700}.roof-label input{font:inherit;font-size:16px;border:1px solid #bccabf;border-radius:11px;padding:10px;background:#fff;color:var(--ink)}
.roof-tray{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}.roof-item{flex:0 0 auto;min-width:74px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:14px;border:1px solid #cdd8cf;background:#fff;color:var(--ink);padding:5px 8px;font-size:11px;font-weight:700}.roof-item:disabled{opacity:.45}.roof-icon{font-size:18px}.roof-count{font-size:10px;color:#63726f}
.roof-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.roof-foot .primary{flex:1;min-height:44px}.roof-foot .secondary,.roof-foot .quiet{min-height:44px}
.roof-coach{margin:8px 0 0;padding:8px 10px;border-radius:12px;background:#fff7d9;color:#5c4308;font-size:12px;font-weight:700}
.roof-dialog{margin-top:8px;padding:10px;border-radius:14px;background:#fff;border:1px solid #d7e3d3;box-shadow:0 6px 20px #13303b22}.roof-dialog b{display:block;font-size:13px;margin-bottom:4px}
.roof-reason{font-size:13px;font-weight:700;color:#7a4b0c;margin:8px 0}
.roof-entry{border-color:#0a5d49}.decor-entry.roof-entry{background:#093329;color:#f4f7ea}
@media(max-width:700px){.roof-sheet{max-height:46dvh}.roof-sheet .decor-note{font-size:9px}.roof-chip{font-size:12px}.roof-tool{padding:6px 8px}}
@media(max-width:340px){.roof-themes{gap:4px}.roof-chip{font-size:11px;padding:4px}}
.roof-status .roof-more{display:block;font-weight:600;font-size:11px;color:#63726f}
/* PR4(2026-09-27): 고른 소품 이름 · 확인 · 보관함(계정)·설계도 접이식 · 보관/빠지는 소품 목록 */
#roofRotL,#roofRotR{font-size:20px;line-height:1}.roof-selname{width:100%;display:flex;align-items:center;gap:5px;margin:0;font-size:12px;font-weight:800;color:#093329}.roof-selname small{font-size:10px;font-weight:700;color:#63726f}.roof-ok{min-width:64px}
.roof-inv{margin:8px 0 0;border:1px solid #d7e3d3;border-radius:14px;background:#fff;padding:0 10px}.roof-inv summary{min-height:44px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:800;color:var(--ink);list-style-position:inside}.roof-inv summary small{font-size:10px;font-weight:700;color:#63726f}
.roof-invlist{display:flex;flex-direction:column;gap:6px;padding:0 0 8px}.roof-invrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;border-top:1px solid #eef2ec;padding-top:6px}.roof-invname{display:flex;align-items:center;gap:4px;font-weight:800;min-width:0;flex:1 1 120px}.roof-invname small{font-size:10px;color:#7a4b0c;font-weight:700}
.roof-invcounts{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;font-size:11px;color:#35524a}.roof-invcounts b,.roof-invname b{font-variant-numeric:tabular-nums;color:#093329}.roof-where{display:inline-flex;align-items:center;gap:3px;max-width:100%;font-size:11px;color:#35524a;background:#f1f5ef;border-radius:999px;padding:2px 8px;overflow-wrap:anywhere}
.roof-recall{margin:6px 0;font-size:12px;font-weight:700;color:#35524a}.roof-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.roof-chipcount{display:inline-flex;align-items:center;gap:3px;background:#f1f5ef;border-radius:999px;padding:3px 8px;font-size:11px}
@media(max-width:700px),(pointer:coarse){.roof-keys{display:none}}
@media(max-width:700px){body.roofing #toast{bottom:calc(46dvh + 12px)!important}}/* 알림은 옥상 시트 위로(시트 버튼을 가리지 않게) */
@media(max-width:700px){.roof-sheet.has-sel .roof-themes,.roof-sheet.has-sel .roof-badges,.roof-sheet:has(#roofDialog:not([hidden])) .roof-themes,.roof-sheet:has(#roofDialog:not([hidden])) .roof-badges{display:none}.roof-invrow{font-size:11px}}
/* 2026-10-11 compose redesign M6: rooftop sheet = tabs + 3-col grid + fixed bar · two heights */
.roof-sheet{display:flex;flex-direction:column}.roof-sheet[hidden]{display:none}.roof-sheet>*{flex:none}
.roof-grab{align-self:center;display:flex;align-items:center;justify-content:center;width:96px;min-height:44px;margin:-16px 0 -6px;padding:0;border:0;background:transparent;box-shadow:none}.roof-grab i{display:block;width:44px;height:5px;border-radius:3px;background:#c3cec4}
.roof-tabs{display:flex;gap:6px;margin:4px 0 4px}.roof-tab{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:4px 6px;border-radius:14px;border:1.5px solid #cdd8cf;background:#fff;color:var(--ink);font-weight:800;font-size:14px;line-height:1.15;overflow-wrap:anywhere}
.roof-tab[aria-selected=true]{background:#093329;border-color:#093329;color:#C6FA49}@media(max-width:360px){.roof-tab{font-size:12.5px;padding:4px 3px}.roof-tabs{gap:4px}}
.roof-pane[hidden]{display:none!important}
#roofUI .roof-themes,#roofUI .roof-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:2px 0 8px;margin:4px 0}
#roofUI .roof-chip{flex:none;white-space:normal;flex-direction:column;min-height:64px;padding:6px 4px;font-size:12px;line-height:1.2;text-align:center;overflow-wrap:anywhere}#roofUI .roof-chip small{font-size:10px}#roofUI .roof-chip>span[aria-hidden]{font-size:20px;line-height:1.1}
#roofUI .roof-item{flex:none;min-width:0;min-height:72px;font-size:12px;border-width:1.5px}#roofUI .roof-item:disabled{opacity:.5;border-style:dashed;background:transparent}#roofUI .roof-icon{font-size:22px}
.roof-bar{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:2;flex-wrap:nowrap;gap:8px;margin:8px -14px calc(-18px - env(safe-area-inset-bottom));padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#f7f6ef;border-top:1px solid #e3e9e0}
.roof-bar .roof-tool{flex:none;min-width:48px}.roof-bar .primary{flex:1 1 auto;min-height:48px;font-size:16px}
.roof-discard{border-color:#a8331f!important;color:#a8331f!important}
@media(max-width:700px){#roofUI .decor-head h2{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:17px;margin:2px 0 0}#roofUI .roof-badges{margin:2px 0 4px}#roofUI .roof-status:empty{min-height:0;margin:0}}
@media(min-width:701px){.roof-bar{margin:8px -18px -22px;padding:10px 18px 14px}}
@media(max-width:700px){.roof-sheet.tall{max-height:82dvh}body.roofing .roof-sheet.tall~#toast{bottom:calc(82dvh + 12px)!important}}
/* 🪧 공간 소개판(2026-09-28 · v5 §9 · 광고판과 다른 타입): 카테고리 아이콘 + 대표 글 제목 한 줄 · 작게 · 새 글은 실제 발행만 */
.world-label.intro-sign{display:inline-flex;align-items:center;gap:4px;max-width:180px;min-height:32px;padding:5px 9px;border-radius:999px;background:#fbf7ecee;color:#20343a;border:1px solid #d9d1bd;font-size:11px;font-weight:700;cursor:pointer;transform:translate(-50%,calc(-100% - 54px))}
.world-label.intro-sign .intro-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.world-label.intro-sign .intro-new{flex:none;background:#e0735a;color:#fff;border-radius:999px;padding:1px 6px;font-size:9px}
.world-label.intro-sign.selected{background:#e7c082;border-color:#fff}
/* decorate hub 2026-10-11 (option A): one header for rooftop + facade editors, [roof | facade] segment, who-sees line */
.hub-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:8px 0 6px;padding:4px;border-radius:14px;background:#e6ece3}
.hub-seg .hub-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin:0;padding:6px 8px;border:0;border-radius:11px;background:transparent;color:#4a5d58;font:inherit;font-size:15px;font-weight:800;box-shadow:none;white-space:nowrap}
.hub-seg .hub-tab[aria-selected="true"]{background:#fff;color:#10302b;box-shadow:0 1px 4px #10302b22}
.hub-seg .hub-tab[aria-disabled="true"]{opacity:.55;text-decoration:line-through}
.hub-who{display:flex;gap:8px;align-items:flex-start;margin:4px 0 6px;padding:9px 11px;border-radius:12px;background:#e8f1f6;color:#1d3d4a;font-size:12.5px;font-weight:700;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.hub-who .hub-who-ic{flex:none;font-size:16px;line-height:1.2}.hub-who .hub-who-more{display:block;font-weight:600;color:#40606a}
.hub-who.decor-only{background:#eef0ec;color:#22343a;font-size:13.5px}.hub-who.hub-why{background:#fff4dc;color:#5a3d12}
.hub-post{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:2px 0 6px;font-size:12px;color:#56675e}.hub-post button{min-height:44px;margin:0;padding:4px 6px;font-size:12px;font-weight:800;text-decoration:underline}
#roofUI .decor-head h2 small{display:block;font-size:11px;font-weight:600;color:#63726f}
body.roofing #detail{display:none!important}
@media(max-width:700px){.hub-seg{margin:4px 0}.hub-seg .hub-tab{min-height:44px;font-size:14px}.hub-who{margin:2px 0 4px;padding:7px 10px;font-size:12px}}
/* 2026-10-12 UX2 SPACE: decorate sheet three heights (peek / mid / tall) - fold button in the head, grab = next height or drag to snap; mid hides the second who-line, estimate badges and the eyebrow so the item grid shows */
.decor-sheet>.hub-grab{display:flex;margin:-16px auto -6px}.hub-fold{flex:none;align-self:center;min-height:44px;min-width:44px;margin:0 0 0 auto;padding:6px 12px!important;border-radius:999px!important;font-size:13px;font-weight:800;white-space:nowrap}.decor-head .hub-fold+.close{margin-left:0}.decor-head>div{min-width:0}
@media(max-width:700px){.roof-sheet:not(.tall) .roof-badges .roof-badge:not(.warn),.decor-sheet:not(.tall) .hub-who-more,.decor-sheet:not(.tall) .decor-head .eyebrow{display:none}.roof-sheet:not(.tall) .roof-badges:not(:has(.warn)){display:none}.decor-sheet:not(.tall) .hub-who{padding:6px 10px;margin:2px 0 4px}.decor-sheet:not(.tall) .decor-head h2{margin:0}
.decor-sheet.peek{max-height:none}.decor-sheet.peek>*:not(.roof-grab):not(.decor-head):not(.roof-bar):not(#roofSel):not(#roofDialog){display:none!important}.decor-sheet.peek .roof-bar{margin-top:4px}#decorUI.tall{max-height:82dvh}body.roofing:has(.roof-sheet.peek) #toast{bottom:calc(150px + env(safe-area-inset-bottom))!important}}
/* rooftop room V1 (2026-10-12): space page embed + full view + editor on top */
.rt-embed{position:relative;margin:0 0 12px;overflow:hidden;border-radius:0}
.rt-embed-wait,.rt-embed-stage{position:relative;height:clamp(236px,64vw,320px);background:linear-gradient(180deg,#b0d6f0 0%,#d6e8f3 42%,#e6ece8 100%);overflow:hidden}
.rt-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.rt-pill{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:#123326;font-weight:700;font-size:var(--fs-small,12.5px);box-shadow:0 1px 3px rgba(0,0,0,.14);pointer-events:none}
.rt-embed .rt-embed-note{position:absolute;left:12px;top:54px;bottom:auto;max-width:min(64%,260px);z-index:2;margin:0;padding:6px 10px;border-radius:10px;background:rgba(18,51,38,.9)!important;color:#f3ffd6!important;opacity:1!important;font-size:var(--fs-small,12.5px);line-height:1.35;pointer-events:none}
.rt-embed .rt-embed-note[hidden]{display:none}
.rt-embed-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-in;min-height:0;box-shadow:none}
.rt-embed-open:focus-visible{outline:3px solid #1f6f5a;outline-offset:-3px}
.rt-embed-edit{position:absolute;right:12px;bottom:12px;z-index:3;min-height:44px!important;padding:0 16px!important;border-radius:999px!important;display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-btn,15px)}
.rt-view{position:fixed;inset:0;z-index:125;background:#cfe3ee;overflow:hidden;will-change:transform}
.rt-view.rt-anim{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.rt-stage{position:absolute;inset:0;background:#cfe3ee}
.rt-head{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 12px 10px 16px;background:linear-gradient(180deg,rgba(247,246,239,.92) 0%,rgba(247,246,239,.6) 70%,rgba(247,246,239,0) 100%);pointer-events:none}
.rt-head>*{pointer-events:auto}
.rt-title{flex:1;min-width:0;display:grid;gap:2px}
.rt-name{font-size:var(--fs-title,20px);line-height:1.25;color:#10261d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-sub{display:inline-flex;gap:5px;align-items:center;color:#2f463c;font-weight:700;font-size:var(--fs-small,12.5px)}
.rt-view .rt-close{position:static!important;flex:none;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.rt-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 16px max(16px,env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(247,246,239,.95) 0%,rgba(247,246,239,.7) 70%,rgba(247,246,239,0) 100%)}
.rt-bar:empty{display:none}
.rt-bar button{min-height:var(--btn-h,48px)!important;padding:0 18px!important;border-radius:999px!important;display:inline-flex;gap:6px;align-items:center;justify-content:center;font-size:var(--fs-btn,15px);flex:1 1 0;max-width:220px}
.rt-bar-note{flex-basis:100%;text-align:center;margin:0 0 2px;font-size:var(--fs-small,12.5px);color:#2c3f37}
.rt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
body.rt-room #roofUI{z-index:126}
body.rt-room #toast{z-index:160}
/* city notice cards (start area, first home) belong to the city screen: hidden while the full-screen rooftop is open, back when it closes — they covered the one-line guestbook (2026-10-12) */
body.rt-room .bcard{visibility:hidden!important}
body.rt-visit #visitUI{z-index:127}
body.rt-room.roofing .rt-bar{display:none}
/* fit while decorating (2026-10-12 OF-2/OF-3): a side sheet (wide screens, landscape) keeps the room and its head (name, close) to its left · the tall bottom sheet leaves at least about 120px above it for the whole rooftop */
.rt-view.rt-side-sheet .rt-head{right:var(--rt-side-r,0px)}
@media(max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:501px){body.rt-room .roof-sheet.tall{max-height:min(82dvh,calc(100dvh - 220px))}body.rt-room.roofing .roof-sheet.tall~#toast{bottom:calc(min(82dvh,100dvh - 220px) + 12px)!important}}
/* landscape phones decorate in a side sheet (2026-10-12 OF2-02): the bottom-sheet cap above (100dvh - 220px) shrank the opened sheet to 100-155px and hid every tool · there is nothing above a side sheet to keep free, so opened = full height like the normal side sheet (the cap applies to bottom sheets only) */
@media(max-height:500px) and (orientation:landscape){body.rt-room .roof-sheet.tall{max-height:none}}
@media(prefers-reduced-motion:reduce){.rt-view.rt-anim{transition:opacity .2s ease}}
@media(max-width:360px){.rt-bar button{padding:0 12px!important;font-size:var(--fs-body,14px)}.rt-embed .rt-embed-note{max-width:calc(100% - 24px)}}
/* rooftop full-bleed V2 (2026-10-12 owner: the rooftop reads as one whole rooftop): the space page first screen is the rooftop itself (full width, full height, building facade below); thin overlays (top = name, bottom = actions); the page continues below */
#contentModal.rt-full{padding:0!important;place-items:stretch center;background:#2a3f45}
#contentModal.rt-full>.dialog{position:relative;width:min(560px,100%);height:100%;max-height:none!important;border:0;border-radius:0;padding:0 16px max(16px,var(--safe-bottom,0px));scrollbar-gutter:auto;box-shadow:none;background:var(--cream,#f7f6ef)}
#contentModal.rt-full>.dialog>.eyebrow{display:none}
#contentModal.rt-full>.dialog>h2{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
#contentModal.rt-full>.dialog>.close{position:sticky!important;top:max(10px,env(safe-area-inset-top));right:auto;z-index:9;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:max(10px,env(safe-area-inset-top)) -4px calc(-44px - max(10px,env(safe-area-inset-top))) auto;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(0,0,0,.18)}
#contentModal.rt-full>.dialog>.bottom-close{position:static;box-shadow:none;margin:24px 0 4px}
#contentModal.rt-full #contentBody>.ct-back{position:absolute;z-index:4;left:12px;top:max(10px,env(safe-area-inset-top));margin:0}
#contentModal.rt-full #contentBody>.ct-back button{min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.14)}
#contentModal.rt-full #contentBody:has(>.ct-back) .rt-top{padding-top:calc(max(12px,env(safe-area-inset-top)) + 50px)}
.rt-hero{position:relative;height:calc(100vh - 56px);height:calc(100dvh - 56px);min-height:440px;margin:0 0 14px;overflow:hidden;border-radius:0}
.rt-hero>.rt-embed-stage{position:absolute;inset:0;height:auto}
.rt-embed-wait.rt-hero{display:grid;place-items:center;background:linear-gradient(180deg,#b0d6f0 0%,#d6e8f3 42%,#e6ece8 100%)}
.rt-embed-wait.rt-hero>.space-note{margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85);color:#1f3f45}
.rt-top{position:absolute;left:0;right:0;top:0;z-index:2;padding:max(12px,env(safe-area-inset-top)) 68px 22px 16px;background:linear-gradient(180deg,rgba(247,246,239,.95) 0%,rgba(247,246,239,.78) 58%,rgba(247,246,239,0) 100%);pointer-events:none}
.rt-top>*{pointer-events:auto}
.rt-id{display:grid;gap:3px;min-width:0}
.rt-hero .rt-name{font-size:var(--fs-title,20px);line-height:1.25;color:#10261d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-hero .rt-sub{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;color:#2f463c;font-weight:700;font-size:var(--fs-small,12.5px)}
.rt-owner{display:inline-flex;gap:5px;align-items:center;font-weight:700;color:#2f463c}
.rt-hero .rt-embed-note{position:static;display:inline-block;max-width:100%;margin:8px 0 0;padding:6px 10px;border-radius:10px;background:rgba(18,51,38,.9)!important;color:#f3ffd6!important;opacity:1!important;font-size:var(--fs-small,12.5px);line-height:1.35;pointer-events:none}
.rt-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px;background:rgba(251,250,243,.94);border-radius:20px 20px 0 0;box-shadow:0 -6px 20px rgba(16,45,57,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rt-foot:not(:has(>:not(:empty))){display:none}
.rt-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.rt-acts:empty{display:none}
.rt-acts>button{min-height:var(--btn-h,48px)!important;margin:0;padding:0 16px!important;border-radius:999px!important;display:inline-flex;gap:6px;align-items:center;justify-content:center;justify-content:safe center;font-size:var(--fs-btn,15px);flex:1 1 0;min-width:0;white-space:nowrap;line-height:1.2;text-align:center}
/* the decorate button lives in the action row everywhere (space page, map zoom-in, on-site card): the V1 corner position must not leak into those rows */
.rt-acts>.rt-embed-edit{position:static;right:auto;bottom:auto;flex:2 1 0}
@media(max-width:360px){.rt-acts>button{padding:0 10px!important;font-size:var(--fs-body,14px)}.rt-top{padding-right:62px}}
@media(min-width:561px){#contentModal.rt-full>.dialog{box-shadow:0 0 60px rgba(0,0,0,.28)}}
/* owner vs visitor (2026-10-12): role line in the head (mine + visibility / @owner / on-site cue / visit counts) and one action row per role; one primary button */
.rt-vis{display:inline-flex;gap:5px;align-items:center}
.rt-cue{display:inline-flex;gap:4px;align-items:center;padding:2px 9px;border-radius:999px;background:#123326;color:#e9ffcf;font-weight:800}
.rt-stats{display:flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;margin-top:2px;font-size:var(--fs-small,12.5px);color:#36504a;font-variant-numeric:tabular-nums}
.rt-stats .mh-px{font-weight:800;letter-spacing:.04em}
.rt-stats b{color:#9a3d0c}
.rt-stats small{margin-left:4px;color:#44585e;font-size:inherit}
.rt-id .rt-stats small,.rt-title .rt-stats small{color:#44585e!important;font-size:inherit!important}
/* owner visit counts (2026-10-13): the TODAY/TOTAL line is one button showing who can see it; tapping opens a small two-option picker right below (everyone / only me) that saves at once */
.rt-stats-own{position:relative;display:block}
.rt-vc{display:inline-flex;flex-wrap:wrap;gap:0 4px;align-items:center;min-height:36px;margin:0 -8px;padding:2px 8px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;line-height:1.3;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rt-vc:hover,.rt-vc[aria-expanded=true]{background:rgba(16,45,57,.08)}
.rt-vc:focus-visible{outline:3px solid var(--focus-ring,#227dbe);outline-offset:1px}
.rt-vc small{margin-left:4px;padding:1px 8px;border-radius:999px;background:#e6efe6;color:#1f3f45!important;font-weight:700}
.rt-vc-caret{font-size:10px;color:#44585e}
.rt-vc b{color:#9a3d0c}
.rt-vc-menu{position:absolute;left:-8px;top:calc(100% + 4px);z-index:8;display:grid;gap:4px;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:6px;border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(16,45,57,.24);font-size:var(--fs-body,14px)}
.rt-vc-menu[hidden]{display:none}
.rt-vc-menu button{display:flex;gap:8px;align-items:center;min-height:44px;margin:0;padding:0 14px;border:1.5px solid transparent;border-radius:10px;background:#f4f6f1;color:#10261d;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.rt-vc-menu button[aria-pressed=true]{border-color:#1f6b4f;background:#e3f3e8}
.rt-vc-menu button[aria-pressed=true]::after{content:"\2713";margin-left:auto;color:#1f6b4f}
.rt-vc-menu button:focus-visible{outline:3px solid var(--focus-ring,#227dbe);outline-offset:1px}
.rt-vc-note{margin:2px 4px 0;font-size:12px;line-height:1.35;color:#51666a;white-space:normal}
/* night sky behind the head (2026-10-12 RA-4): the light head used to fade out over a dark sky, leaving the second and third lines (visibility, TODAY/TOTAL, owner) under 4.5:1 — at night the head stays nearly opaque down to its text, then fades */
body[data-time=night] .rt-head{background:linear-gradient(180deg,rgba(247,246,239,.97) 0%,rgba(247,246,239,.95) calc(100% - 10px),rgba(247,246,239,0) 100%)}
body[data-time=night] .rt-top{background:linear-gradient(180deg,rgba(247,246,239,.97) 0%,rgba(247,246,239,.95) calc(100% - 18px),rgba(247,246,239,0) 100%)}
.rt-view .rt-sub{flex-wrap:wrap}
.rt-bar{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:8px}
.rt-view .rt-bar{padding:14px 16px max(14px,env(safe-area-inset-bottom));background:rgba(251,250,243,.94);border-radius:20px 20px 0 0;box-shadow:0 -6px 20px rgba(16,45,57,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rt-bar>.rt-acts{width:100%}
.rt-bar .rt-acts>button{max-width:none;white-space:nowrap;line-height:1.2;text-align:center;padding:4px 12px!important}
.rt-acts:has(>:nth-child(4))>.primary{flex:1 1 100%}
.rt-acts>.rt-a-login{flex:1 1 auto;line-height:1.25}
/* one-line buttons (2026-10-12 RA-6): labels never wrap inside a button — text-fit shrinks the whole row, then lets it wrap as a row · a guest's long login button takes its own row above the view-space button */
.rt-acts>.rt-a-login:has(+.rt-a-space){flex:1 1 100%}
@media(max-width:360px){.rt-acts:has(>:nth-child(3))>.primary{flex:1 1 100%}}
.rt-acts>.rt-ico{flex:0 0 48px;width:48px;max-width:48px;padding:0!important}
.rt-acts>.rt-ico .ph,.rt-more .ph{--ph-size:22px}
.rt-more{position:relative;display:flex;flex:0 0 48px}
.rt-more>.rt-a-more{width:48px;height:48px;min-height:48px!important;padding:0!important;border-radius:999px!important;display:inline-flex;align-items:center;justify-content:center}
.rt-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:6;display:grid;gap:4px;min-width:210px;padding:6px;border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(16,45,57,.24)}
.rt-menu[hidden]{display:none}
.rt-menu button{min-height:44px!important;max-width:none!important;flex:none!important;justify-content:flex-start!important;padding:0 12px!important;border-radius:10px!important;text-align:left;font-size:var(--fs-body,14px);white-space:nowrap;color:#10261d}
.rt-menu button.danger{color:#a3302a!important}
body.rt-room :is(#guestbookModal,#reportModal):not([hidden]){z-index:140}
body.rt-visit .rt-view .rt-bar{left:12px;right:12px;bottom:calc(var(--rt-visit-h,0px) + 8px);padding:10px;border-radius:18px}
body.rt-visit #visitUI>h2{display:none!important}
/* one-line guestbook always visible (2026-10-12 owner: show it without tapping): latest notes with stickers under the rooftop, the write field inside, more = the full guestbook */
.rt-gb{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;min-width:0}
.rt-gb>*,.rt-gb-list>li{min-width:0}
.rt-gb[hidden]{display:none}
.rt-gb-head{display:flex;align-items:center;gap:8px;min-height:44px;margin:-6px 0 0}
.rt-gb-title{display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-body,14px);color:#10261d;white-space:nowrap;flex:0 0 auto;max-width:62%;min-width:0;overflow:hidden}
.rt-gb-title>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rt-gb-sum{display:inline-flex;gap:6px;align-items:center;flex:1 1 0;min-width:0;overflow:hidden}
.rt-gb-sum .gb-sticker-mini{display:inline-flex;gap:2px;align-items:center;font-size:12px;font-weight:700;color:#36504a}
.rt-gb-sum svg{width:16px;height:16px}
.rt-gb-more{flex:none;margin:0 -8px 0 auto!important;min-height:44px!important;min-width:max-content;padding:0 10px!important;border:0!important;background:none!important;box-shadow:none!important;color:#1f5a46!important;font-weight:800;font-size:var(--fs-small,13px);white-space:nowrap}
.rt-gb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.rt-gb-list>li+li{border-top:1px dashed #d6dccf}
.rt-gb-line{display:flex!important;align-items:center;gap:8px;width:100%;min-height:44px!important;margin:0!important;padding:4px 2px!important;border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;text-align:left;color:#10261d!important;font-weight:500;cursor:pointer}
.rt-gb-line:focus-visible{outline:3px solid #227dbe;outline-offset:1px}
.rt-gb-st{flex:none;display:inline-flex;width:22px;height:22px}
.rt-gb-st svg{width:22px;height:22px}
.rt-gb-dot::before{content:"";margin:auto;width:7px;height:7px;border-radius:999px;background:#9fb3a8}
.rt-gb-body{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-body,14px);line-height:1.35}
.rt-gb-name{flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px!important;color:#4c625b!important}
.rt-gb-flag{flex:none;padding:1px 6px;border-radius:999px;background:#e5efe6;color:#1f5a46!important;font-size:11px!important;font-weight:800}
.rt-gb-own{flex:none;width:24px;text-align:center;color:#1f5a46;font-weight:900}
.rt-gb-empty{min-height:40px;display:flex;align-items:center;color:#4c625b;font-size:var(--fs-small,13px)}
.rt-gb-write{margin-top:6px}
.rt-gb-write[hidden]{display:none}
.rt-gb-input{display:flex!important;align-items:center;gap:8px;width:100%;min-height:48px!important;margin:0!important;padding:4px 4px 4px 14px!important;border:1.5px solid #9fb8a8!important;border-radius:999px!important;background:#fff!important;box-shadow:none!important;color:#52666c!important;text-align:left;cursor:text}
.rt-gb-input:focus-visible{outline:3px solid #227dbe;outline-offset:2px}
.rt-gb-ph{flex:1;min-width:0;display:flex;gap:6px;align-items:center;overflow:hidden;font-size:var(--fs-body,14px);font-weight:600}
.rt-gb-ph>span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rt-gb-go{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;background:#0b3a2c;color:#e9ffcf;font-weight:800;font-size:var(--fs-body,14px)}
.rt-gb-note{margin:0;padding:8px 10px;border-radius:10px;background:#eef3ea;color:#2c3f37;font-size:var(--fs-small,13px);line-height:1.4}
.rt-view .rt-bar>.rt-gb{text-align:left}
.rt-bar .rt-gb button{flex:none;max-width:none}
.rt-bar .rt-gb .rt-gb-line{width:100%;padding:4px 2px!important;border-radius:8px!important;min-height:44px!important}
.rt-bar .rt-gb .rt-gb-input{width:100%;padding:4px 4px 4px 14px!important;min-height:48px!important}
.rt-bar .rt-gb .rt-gb-more{margin-left:auto!important;padding:0 10px!important;min-height:44px!important}
body.rt-visit #visitUI .visit-row>button.primary{flex-basis:100%}
body.rt-visit:has(.rt-view .rt-gb:not([hidden])) #visitUI .visit-gb{display:none!important}
/* on-site visit bar on short screens (2026-10-12 VV1-02): the two notices fold behind an info toggle (same look as the app's folded notices), photo spot and share card become icon buttons on the exit row, so the rooftop keeps its space */
#visitUI .visit-who{display:flex;align-items:center;gap:8px;min-width:0}
#visitUI .visit-who>p{flex:1;min-width:0}
#visitUI .visit-notes{display:grid;gap:6px}
#visitUI .visit-info{display:none}
@media(max-height:759px){body.rt-visit #visitUI .visit-info{display:inline-flex;flex:none;align-items:center;gap:4px;min-height:44px!important;margin:0!important;padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important;color:#14493b!important;font-size:var(--fs-small,12.5px)!important;font-weight:800;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}body.rt-visit #visitUI .visit-info>span:last-child{text-decoration:none;transition:rotate .16s ease}body.rt-visit #visitUI .visit-info[aria-expanded=true]>span:last-child{rotate:90deg}body.rt-visit #visitUI:not(.notes-open) .visit-notes{display:none}body.rt-visit #visitUI .visit-row>button.vr-ico{flex:0 0 48px;width:48px;min-width:48px;min-height:48px;padding:0!important;font-size:20px}body.rt-visit #visitUI .visit-row>button.vr-ico .vr-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}body.rt-visit #visitUI .visit-row>button.primary{flex:1 1 0;min-width:0;min-height:48px}}
@media(max-width:360px){.rt-gb-name{max-width:32%}.rt-gb-go{padding:0 12px}}
/* fallback when the 3D rooftop cannot load (no WebGL, module fetch failed): the one-line guestbook still shows first, as a plain card in the normal dialog (2026-10-12 GB6) */
.rt-gb-card{margin:0 0 12px;padding:12px 14px;border-radius:18px;background:#fbfaf3;border:1px solid #dfe5d9;box-shadow:0 2px 10px rgba(16,45,57,.08)}
.rt-gb-card:has(>.rt-gb[hidden]){display:none}
/* landscape phones (2026-10-12 OF-4/RA-5): the bar with the one-line guestbook and the actions becomes a side panel on the right, so the whole rooftop keeps the left of the screen (space page, map zoom-in, on-site) */
@media(orientation:landscape) and (max-height:560px){:root{--rt-side-w:min(360px,44vw)}#contentModal.rt-full>.dialog{width:100%;max-width:none}.rt-hero{min-height:0}.rt-hero .rt-foot{left:auto;right:0;top:auto;bottom:0;width:var(--rt-side-w);max-height:calc(100% - 64px);overflow:auto;border-radius:20px 0 0 0;padding:12px 14px}.rt-top{padding-right:calc(var(--rt-side-w) + 12px)}.rt-view .rt-bar{left:auto;right:0;top:auto;bottom:0;width:var(--rt-side-w);max-height:calc(100% - 64px);overflow:auto;border-radius:20px 0 0 0;padding:12px 14px max(12px,env(safe-area-inset-bottom))}.rt-view:not(.rt-side-sheet) .rt-title{flex:0 1 auto;max-width:calc(100% - var(--rt-side-w) - 8px);margin-right:auto}body.rt-visit .rt-view .rt-bar{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:var(--rt-side-w);max-height:calc(100% - 76px);padding:10px;border-radius:18px}body.rt-visit #visitUI{right:calc(var(--rt-side-w) + 24px + env(safe-area-inset-right))}}
/* decorating head (2026-10-12 OF2-01): with a side sheet the head already ends at the sheet (--rt-side-r), so the title must not subtract the side panel width again (it shrank to 13px and stacked one letter per line, pushing the rooftop off screen) · while decorating the head is the name plus one role line (visit counts hidden) · a head taller than about 38% of the screen folds the same way (rt-head-tight) */
.rt-view.rt-side-sheet .rt-title{max-width:none}
body.roofing .rt-view .rt-stats,.rt-view.rt-head-tight .rt-stats{display:none}
body.roofing .rt-view .rt-sub,.rt-view.rt-head-tight .rt-sub{flex-wrap:nowrap;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}
body.roofing .rt-view .rt-sub>*,.rt-view.rt-head-tight .rt-sub>*{flex:none}
/* decorate close question above the fixed bottom bar (2026-10-12 OF2-04): the save / discard / keep buttons were scrolled under the sticky undo-redo-save bar (focus on a hidden button) · the dialog scrolls into view with the bar height as margin · its buttons never break one letter per line in the narrow side sheet (the row wraps instead) */
#roofDialog{scroll-margin-top:12px;scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom))}
#roofDialog .roof-foot>button{white-space:nowrap;flex:1 1 auto;min-width:min(100%,max-content)}
/* landscape space page first screen (2026-10-12 OF2-05): the head was three lines plus the empty-rooftop pill and the stage left a 56px peek, so the rooftop got 58% of the height · in landscape the stage is the full height, the head is the name and the role line (one line when they fit) and the visit counts and the pill move to the top of the right side panel */
.rt-side-info{display:grid;gap:6px;justify-items:start}
.rt-side-info:not(:has(>:not([hidden]))){display:none}
.rt-side-info .rt-stats{margin:0}
.rt-hero .rt-side-info .rt-embed-note{margin:0}
@media(orientation:landscape) and (max-height:560px){.rt-hero{height:100vh;height:100dvh}.rt-top{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:12px}.rt-hero .rt-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}.rt-hero .rt-id>.rt-name{flex:0 1 auto;max-width:100%;min-width:0}.rt-hero .rt-id>.rt-sub{flex:0 1 auto;min-width:0}}
/* one-line guestbook placeholder while loading (2026-10-12 GBR2-01): the strip keeps its place from the first frame (head, one 44px skeleton row per visible line, the write field for members who can write) so a slow network no longer makes it pop in and refit the rooftop */
.rt-gb-skel{display:flex;align-items:center;min-height:44px;padding:4px 2px}
.rt-gb-skel>i{display:block;width:72%;height:12px;border-radius:6px;background:linear-gradient(90deg,#d8e0d3 0%,#eef2ea 50%,#d8e0d3 100%);background-size:200% 100%;animation:rtGbSkel 1.2s ease-in-out infinite}
.rt-gb-skel+.rt-gb-skel>i{width:54%}
@keyframes rtGbSkel{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.rt-gb-skel>i{animation:none}}
/* plaza tower (2026-10-12 prototype): label under the tower base, edge chip when the tower is off screen */
.world-label.plaza-label{transform:translate(-50%,12px);display:inline-flex;align-items:center;gap:5px;max-width:200px;padding:5px 10px 5px 6px;border-radius:999px;background:#13303cf2;border:1px solid #e8c770;color:#fbf6e6;font-size:12px;font-weight:700;min-height:32px;cursor:pointer;z-index:6}
.world-label.plaza-label:after{top:auto;bottom:100%;height:12px;background:#e8c770}
.world-label.plaza-label.plaza-up{transform:translate(-50%,calc(-100% - 12px))}
.world-label.plaza-label.plaza-up:after{top:100%;bottom:auto}
.plaza-label .plaza-flag,.plaza-edge img{height:12px;width:auto;max-width:26px;border-radius:2px;box-shadow:0 0 0 1px #0004;flex:none}
.plaza-label .plaza-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.plaza-label .plaza-dist,.plaza-edge .pe-dist{flex:none;font-weight:600;opacity:.82;font-size:11.5px}
.plaza-label .plaza-dist:empty{display:none}
.plaza-edge{position:absolute;left:12px;top:64px;z-index:7;display:inline-flex;align-items:center;gap:6px;max-width:min(250px,calc(100% - 120px));min-height:36px;padding:6px 12px 6px 7px;border-radius:999px;border:1px solid #e8c770;background:#13303cf2;color:#fbf6e6;font-size:12.5px;font-weight:700;box-shadow:0 4px 12px #0b1d2533;cursor:pointer}
.plaza-edge .pe-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.plaza-edge .pe-arrow{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e8c770;color:#13303c;font-size:13px;line-height:1;transition:transform .25s}
.plaza-edge[hidden],.world-label.plaza-label[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.plaza-edge .pe-arrow{transition:none}}