/* アプリとして使うための見た目（一般・管理の両方）。各ページの CSS の後に読む。
   - 一般のスマホの幅：ヘッダー（トップページ・画面名・商品一覧・マイページ）、右下のカートボタン、言語はフッター、
     合計＋ボタンの固定バー、角の丸い白いカード、利用期間は1行。入力欄の見出しは左（PC も）
   - ホーム画面から開いたとき（standalone）は、iPhone の上下の安全な領域（ノッチ・ホームバー）を空ける */

html{-webkit-tap-highlight-color:transparent}
/* ヘッダーより上（ページの外）へ引っ張れないようにする（横のなぞりで戻るのはそのまま） */
html,body{overscroll-behavior-y:none}
a,button,input,select,label{touch-action:manipulation}

/* ---- 入力欄：見出しは欄の左（幅をそろえる）。チェックボックスの行はそのまま ---- */
.rental-form label:not(.rental-check){grid-template-columns:9.2em minmax(0,1fr);align-items:center;column-gap:12px}
.rental-form label:not(.rental-check) > small{grid-column:2}
.rental-form .rental-field-error{margin-left:calc(9.2em + 12px)}
.rental-check > span{flex:1;min-width:0;overflow-wrap:anywhere}

/* ---- 一般：PC の幅ではスマホ用のアイコン・右下のカート・固定バー・画面名を出さない ---- */
.rental-app-home,.rental-app-icon,.rental-fab-cart,.rental-actionbar,.rental-app-title{display:none}
.rental-footer-lang:empty{display:none}

@media (max-width:760px){
  body{background:var(--paper)}
  /* ヘッダー：トップページ / 画面名（画面の真ん中）/ 商品一覧・マイページ（アイコン）。左右を同じ幅にして画面名を中央に置く。ロゴ・ログイン・カートの文字は出さない */
  .rental-header{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line)}
  .rental-header .header-inner{display:grid;grid-template-columns:88px minmax(0,1fr) 88px;align-items:center;gap:4px;width:calc(100% - 16px);min-height:52px;height:auto;padding:0;flex-wrap:nowrap}
  .rental-header .brand,.rental-header .back-link,.rental-account-link,.rental-cart-link{display:none}
  .rental-app-home{display:grid;place-items:center;grid-column:1;justify-self:start;width:44px;height:44px}
  .rental-app-home img{width:30px;height:auto}
  .rental-app-title{display:block;grid-column:2;text-align:center;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rental-header-actions{grid-column:3;justify-self:end;margin:0;gap:0}
  .rental-app-icon{display:grid;place-items:center;width:44px;height:44px;color:var(--muted)}
  .rental-app-icon[aria-current]{color:var(--deep)}
  .rental-app-icon svg,.rental-fab-cart svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .rental-header [data-lang-slot="header"]:empty{display:none}

  /* 言語はフッター */
  .rental-footer-lang{display:block;margin-top:8px}
  .rental-footer-lang .language-control{margin:0}
  .rental-footer-lang select{max-width:none}

  /* 右下に追従するカートボタン（下へスクロール中は消す） */
  .rental-fab-cart{display:grid;place-items:center;position:fixed;z-index:38;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px;border:2px solid var(--white);border-radius:50%;background:var(--deep);color:var(--white);box-shadow:0 8px 24px rgba(11,29,41,.3);transition:opacity .25s,transform .25s}
  body.has-actionbar .rental-fab-cart{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.is-scrolling .rental-fab-cart{opacity:0;transform:scale(.85);pointer-events:none}
  .rental-fab-cart .rental-cart-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--lime);color:var(--deep);font-size:11px;font-weight:800;line-height:20px;text-align:center}
  .rental-fab-cart .rental-cart-badge[hidden]{display:none}

  /* 合計＋主なボタンの固定バー */
  .rental-actionbar{display:flex;align-items:center;gap:12px;position:fixed;z-index:39;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--deep);color:var(--white);transition:transform .2s}
  .rental-actionbar[hidden]{display:none}
  .rental-actionbar.is-covered{transform:translateY(calc(100% + 70px))}
  .rental-actionbar-total{display:grid;min-width:0;flex:1}
  .rental-actionbar-total small{font-size:10px;color:var(--blue);font-weight:700}
  .rental-actionbar-total strong{font-size:20px;color:var(--lime);letter-spacing:-.03em}
  .rental-actionbar .button{min-width:0;flex:none;gap:10px;padding:13px 16px;border-radius:12px;font-size:13px}
  .rental-actionbar .button:disabled{opacity:.45}
  body.has-actionbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .plc-toast-stack{bottom:calc(84px + env(safe-area-inset-bottom))}

  /* 大きな見出しは一覧（写真を置く予定）だけ残し、ほかの画面はヘッダーの画面名にまかせる */
  body:not([data-page="index"]) .rental-hero{display:none}
  body[data-page="index"] .rental-hero{padding:28px 0 24px}
  .rental-section{padding-top:16px}
  /* 利用期間は1行に収める（受取日 → 返却日 N日間） */
  .rental-range-trigger{flex-wrap:nowrap;gap:8px;min-height:56px;padding:8px 12px}
  .rental-range-field{min-width:0}
  .rental-range-field small{font-size:10px}
  .rental-range-field strong{font-size:14px;white-space:nowrap}
  .rental-range-arrow{font-size:14px;flex:none}
  .rental-range-days{flex:none;padding:3px 8px;font-size:12px;white-space:nowrap}

  /* 角の丸い白いカード（画面の端から少し離す） */
  .booking-layout{gap:12px}
  .booking-step{background:var(--white);border:0;border-radius:16px;padding:18px 16px;margin-bottom:12px}
  .booking-step-head{margin-bottom:14px;gap:12px}
  .booking-step-head h3{font-size:17px}
  .summary-card{border-radius:16px;padding:22px 18px}
  .rental-card,.rental-model,.rental-qty-row,.rental-rec-note,.rental-auth{border-radius:14px;overflow:hidden}
  .rental-model-wrap{border-radius:14px}
  .rental-auth{padding:22px 18px}
  .button{border-radius:12px}
  .rental-form input,.rental-form select,.rental-form textarea{border-radius:10px}
  .rental-sizes button{border-radius:10px}
  .footer{padding-bottom:24px}
}

/* ---- ホーム画面から開いたとき：ブラウザの外枠が無いので、上の安全な領域を空ける（PC の幅でも） ---- */
@media (display-mode:standalone){.rental-header{padding-top:env(safe-area-inset-top)}}