/* スマホ横画面。写真を画面いっぱいに出し、操作は左右の帯に寄せる。
   縦画面・PC には一切影響しない（body.studio-landscape が付いたときだけ効く）。 */

/* ブラウザのURLバーを引っ込ませるには「ページがスクロールできる」必要がある。
   見た目は動かしたくないので、写真・帯は position:fixed のままにして、
   スクロールの余地だけ後ろに用意する（下のスペーサー）。 */
body.studio-landscape { padding-top: 0; background: #f8f8f8; overscroll-behavior-y: none; }
body.studio-landscape .landscape-scroll-space { display: block; height: calc(100dvh + 90px); }
body.studio-landscape .landscape-hint {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 8;
  padding: 6px 12px; border-radius: 20px; background: rgba(28,28,28,.72); color: #fff;
  font: 400 11px/1.4 "Noto Sans JP", sans-serif; letter-spacing: .04em; pointer-events: none;
  transition: opacity .4s ease;
}
body.studio-landscape .landscape-hint[hidden] { display: none; }
.landscape-scroll-space { display: none; }
/* 全画面ボタン（対応しているブラウザだけ出す） */
.studio-rail button.rail-fullscreen[hidden] { display: none; }
body.studio-landscape #site-header,
body.studio-landscape #site-footer,
body.studio-landscape .studio-heading,
body.studio-landscape .room-picker,
body.studio-landscape .catalog,
body.studio-landscape .scene-tools,
body.studio-landscape .live-price,
body.studio-landscape .coordinate-details,
body.studio-landscape .furniture-picker,
body.studio-landscape .saved-strip,
body.studio-landscape #expand-materials,
body.studio-landscape .mobile-dock,
body.studio-landscape .scene-bottom { display: none !important; }

body.studio-landscape main { max-width: none; margin: 0; border: 0; }
body.studio-landscape .workspace { padding: 0; }
body.studio-landscape .scene {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  aspect-ratio: auto; margin: 0; border-radius: 0; z-index: 1;
}
/* 見切れないよう全体を入れる。余白はサイトと同じオフホワイト。 */
body.studio-landscape .scene { background: #f8f8f8; }
body.studio-landscape .scene > img,
body.studio-landscape .scene canvas { width: 100%; height: 100%; object-fit: contain; }
body.studio-landscape .scene-toggle { right: auto; left: 50%; transform: translateX(-50%); top: 10px; z-index: 6; }
body.studio-landscape .pin { display: none; }

/* ---- 左右の帯 ---- */
.studio-rail {
  /* 右下の料金と重ならないよう、上端〜料金の手前までの帯の中で縦中央に置く */
  position: fixed; top: 0; bottom: 80px; z-index: 7;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 6px; border-radius: 4px; height: fit-content; margin: auto 0;
  max-height: calc(100dvh - 88px); overflow: auto;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .06);
}
/* 端にぴったり寄せる。写真を少しでも大きく見せるため、帯は画面の縁に置く。 */
.studio-rail--left { left: 0; padding-left: max(4px, env(safe-area-inset-left)); border-left: 0; border-radius: 0 4px 4px 0; }
.studio-rail--right { right: 0; padding-right: max(4px, env(safe-area-inset-right)); border-right: 0; border-radius: 4px 0 0 4px; }
.studio-rail button {
  width: 60px; min-height: 46px; padding: 5px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid transparent; border-radius: 2px; background: transparent;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: .04em; color: #1c1c1c; line-height: 1.3; cursor: pointer;
}
.studio-rail button:hover { background: #f0f0f0; }
.studio-rail button[aria-pressed="true"] { background: #1c1c1c; color: #fff; }
.studio-rail button[disabled] { opacity: .38; cursor: not-allowed; }
.studio-rail .rail-icon { font-size: 17px; line-height: 1; }
.studio-rail .rail-note { font-size: 9px; color: #8a8a8a; }
.studio-rail button[aria-pressed="true"] .rail-note { color: #d8d8d8; }

/* ---- 右下の料金（追従） ---- */
.studio-price-fix {
  position: fixed; z-index: 7;
  right: 0; bottom: 0; padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 4px 0 0 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: 8px 14px; border: 0; border-radius: 3px;
  background: rgba(28, 28, 28, .9); color: #fff; cursor: pointer;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; text-align: right;
}
.studio-price-fix small { font-size: 9px; letter-spacing: .06em; color: #cfcfcf; }
.studio-price-fix strong { font-size: 15px; font-weight: 400; letter-spacing: .02em; }
.studio-price-fix .price-arrow { font-size: 9px; color: #cfcfcf; }

/* ---- 横画面のシート（素材・家具・料金） ---- */
body.studio-landscape dialog.studio-sheet {
  width: min(1100px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 12px 14px;
  border: 0; border-radius: 4px;
}
body.studio-landscape dialog.studio-sheet .studio-sheet-body { overflow: auto; max-height: 76dvh; }
body.studio-landscape #landscape-materials .dialog-head h2 { font-size: 16px; }
body.studio-landscape #landscape-materials .dialog-head { margin-bottom: 4px; }
body.studio-landscape dialog.studio-sheet .catalog {
  display: block !important; position: static; width: auto; height: auto;
  min-height: 0; border: 0; background: transparent;
}
/* 横画面は画面が低い。まず商品が見えることを優先し、絞り込みは畳む
   （絞り込みたいときは縦に戻す／PCで操作する） */
body.studio-landscape dialog.studio-sheet .catalog-intro,
body.studio-landscape dialog.studio-sheet .close-picker,
body.studio-landscape dialog.studio-sheet .catalog-search,
body.studio-landscape dialog.studio-sheet .catalog-filters,
body.studio-landscape dialog.studio-sheet .catalog-footer { display: none; }
body.studio-landscape dialog.studio-sheet .panel-head { padding: 0 0 6px; }
body.studio-landscape dialog.studio-sheet .tabs { margin-bottom: 4px; }
/* ---- 素材はギャラリーで選ぶ（写真を大きく、名前と価格は写真の下に小さく） ---- */
body.studio-landscape #landscape-materials .products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; max-height: 72dvh; overflow: auto; padding: 2px;
}
body.studio-landscape #landscape-materials .product {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px; text-align: center; width: auto;
}
body.studio-landscape #landscape-materials .product img {
  width: 100%; height: 108px; object-fit: cover; border-radius: 2px;
}
body.studio-landscape #landscape-materials .product-copy {
  padding: 0; gap: 2px; align-items: center; text-align: center;
}
body.studio-landscape #landscape-materials .product strong { font-size: 13px; }
body.studio-landscape #landscape-materials .product .ja { font-size: 12px; }
body.studio-landscape #landscape-materials .product .material-type { display: none; }
body.studio-landscape #landscape-materials .product-price { font-size: 11px; }
body.studio-landscape #landscape-materials .product .check { top: 6px; right: 6px; }
body.studio-landscape dialog.studio-sheet .furniture-picker,
body.studio-landscape dialog.studio-sheet .coordinate-details { display: block !important; }
body.studio-landscape dialog.studio-sheet .price-guide { display: block; }
.studio-sheet .dialog-head { margin-bottom: 10px; }

/* 横画面では既存の縦画面用シートは出さない */
body.studio-landscape .mobile-sheet[open] { display: none; }

/* 画面がとても低いとき（URLバーが出ている iPhone 横など）は帯を小さくして、
   ボタンが画面外へはみ出さないようにする */
@media (max-height: 380px) {
  .studio-rail { bottom: 70px; max-height: calc(100dvh - 76px); gap: 3px; padding: 4px; }
  .studio-rail button { min-height: 38px; width: 54px; font-size: 9px; gap: 1px; padding: 3px 2px; }
  .studio-rail .rail-icon { font-size: 14px; }
  .studio-rail .rail-note { font-size: 8px; }
  .studio-price-fix { padding: 6px 12px; }
  .studio-price-fix strong { font-size: 13px; }
}