/* 間取りプランナーの「リアルに見る」（js/room_real.js、2026-10-21）。3D の右上、昼・夜の切り替えの下。読み込み中は 3D の中央に小さな札（3D は回せる） */
.rp-real{position:absolute;right:12px;top:62px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:min(280px,calc(100% - 24px))}
.rp-real-btn{position:relative;min-height:38px;padding:4px 14px 4px 34px;font:inherit;font-size:14px;font-weight:800;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);box-shadow:var(--shadow);cursor:pointer}
/* 光の印（小さな太陽） */
.rp-real-btn::before{content:"";position:absolute;left:13px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.rp-real-btn:hover{border-color:var(--accent)}
.rp-real-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rp-real-btn[aria-disabled="true"]{opacity:.55;cursor:default}
.rp-real-btn:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.rp-real-why{margin:0;font-size:12px;line-height:1.5;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 10px;box-shadow:var(--shadow);text-align:left}
.rp-real-why[hidden]{display:none}
.rp-real-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:10px 16px;font-size:14px;font-weight:700;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
.rp-real-load[hidden]{display:none}
.rp-real-spin{flex:none;width:18px;height:18px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:rp-real-spin .8s linear infinite}
@keyframes rp-real-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rp-real-spin{animation:none;border-top-color:var(--accent);border-right-color:var(--accent)}}
/* 夜の説明（パソコンの幅では右上）は、リアルに見るのボタンの下へ */
@media (min-width:601px){.rp-time .rp-night-note{top:110px}}
@media (max-width:600px){
  .rp-real{right:8px;top:56px}
  .rp-real-btn{min-height:36px;font-size:13px;padding:4px 12px 4px 30px}
  .rp-real-btn::before{left:11px}
}
/* WebGL を失ったときの知らせ（js/room.js、2026-10-21 夜）。3D の中央、ボタンだけ押せる */
.rp-lost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:max-content;max-width:calc(100% - 32px);padding:14px 16px;text-align:center;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.rp-lost[hidden]{display:none}
.rp-lost p{margin:0 0 10px;font-size:14px;font-weight:700}
.rp-lost button{min-height:44px;white-space:nowrap;padding:0 18px}
/* 指で操作する端末（iPhone など）では、3D の枠の角を丸く切らない（2026-10-21 夜）。overflow:hidden と border-radius の丸い切り抜きの中の WebGL の canvas は、
   iOS Safari で画面の外から戻ったあと絵が更新されなくなることがあるため（長方形の切り抜きは残す） */
@media (pointer:coarse){.rp-viewer{border-radius:0}}