/* ★ 2026-09-13 iOS風リファイン(シェル) — ロジック不変・CSSレイヤーのみ。
   方針: iOS 17の標準部品(角丸14〜22px・ヘアライン境界・すりガラス・ピル状ボタン)に寄せる。
   現場ルール: タップ44px以上 / 文字14px以上 / 速度を落とさない(backdrop-filterは小面積のみ)。
   戻し方: index.html の <link ios.css> を外すだけ。 */
:root{
  --ios-bg:#F2F2F7; --ios-label:#1C1C1E; --ios-secondary:#6E6E73; --ios-tertiary:#8E8E93;
  --ios-sep:rgba(60,60,67,.18); --brand-a:#6C6FF0; --brand-b:#7A5BC8; --brand-c:#7C4DB8;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--ios-label)}
*{-webkit-tap-highlight-color:transparent}
button{transition:transform .12s var(--ease),opacity .12s var(--ease),background-color .15s var(--ease)}
button:active{transform:scale(.97)}
.bg-gray-100{background:var(--ios-bg)!important}
.rounded-lg{border-radius:var(--r-sm)!important}.rounded-xl{border-radius:var(--r-md)!important}
.rounded-2xl{border-radius:var(--r-lg)!important}.rounded-3xl{border-radius:var(--r-xl)!important}
.text-xs{font-size:14px!important;line-height:1.35}.text-sm{font-size:15px!important}

/* 画面高: iOS Safariでは100vhがアドレスバー込みの高さになり、下部タブバーが画面外に押し出されて
   「表示されない時がある」原因になる → 動的ビューポート(100dvh)を使う(対応外ブラウザは従来値) */
.h-screen{height:100vh;height:100dvh;height:var(--vh100,100dvh)!important}

/* ヘッダー: ノッチ/ステータスバー分の余白 + なだらかなブランドグラデーション */
#root > div > header{
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(135deg,var(--brand-a) 0%,var(--brand-b) 55%,var(--brand-c) 100%)!important;
  box-shadow:inset 0 -0.5px 0 rgba(255,255,255,.18),0 6px 20px rgba(92,74,180,.22)!important;
  border-bottom:0!important;
}
#root > div > header button{min-width:44px!important;min-height:44px!important;border-radius:12px}
#root > div > header button:active{background:rgba(255,255,255,.14)}

/* タブバー: iOS標準どおり画面下部へ(flexのorderで移動・DOM/ロジック不変)。
   ダークのすりガラス。タブごとの背景グラデ/下線を廃止し、選択中は淡いピルで示す */
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"]{order:9}
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"]{
  background:rgba(24,22,44,.94)!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(255,255,255,.10);
  padding:4px 8px calc(4px + env(safe-area-inset-bottom));
  gap:6px;
}
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"] > button{
  background:transparent!important;border-bottom:0!important;opacity:1!important;
  border-radius:14px;min-height:44px!important;padding:4px 8px!important;
}
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"] > button img{opacity:.45;transition:opacity .2s var(--ease),transform .2s var(--ease)}
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"] > button[data-active="1"]{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0.5px 0 rgba(255,255,255,.12)}
#root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"] > button[data-active="1"] img{opacity:1;transform:translateY(-1px)}

/* ログイン系(パスコード/スタッフ/パスワード): カードとキーパッドをiOSの数字キーに */
.backdrop-blur-lg.rounded-3xl{border-radius:28px!important;box-shadow:0 20px 60px rgba(0,0,0,.25),inset 0 0.5px 0 rgba(255,255,255,.35)}
.grid.grid-cols-3.gap-3 > button{height:64px!important;border-radius:18px!important;font-size:24px!important;font-weight:500!important;background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0.5px 0 rgba(255,255,255,.22)}
.grid.grid-cols-3.gap-3 > button:active{background:rgba(255,255,255,.32)!important;transform:scale(.95)}
input[type="password"]{min-height:50px;border-radius:14px!important;font-size:20px!important;letter-spacing:.2em}
button.w-full.py-3.rounded-xl{min-height:50px;border-radius:14px!important;font-size:17px!important}
/* スタッフ選択の名前ボタン */
.min-h-\[52px\]{min-height:56px!important}
/* 起動スピナー */
.spinner{border-width:3px}

/* ★ 2026-09-15 キーボード表示中(html.kb-open・index.htmlのscriptが判定): LINEのトーク画面と同じく
   下部タブバーを隠し、iframe内の入力欄がキーボードの直上に来るようにする。閉じれば自動で復帰 */
html.kb-open #root > div > div.flex.flex-shrink-0[style*="rgb(30, 27, 58)"]{display:none!important}

/* ★ 2026-09-15 シェル本体は上下に弾ませない(iOS16+/Android/PC共通・古いiOSはindex.htmlのtouchmove遮断で代替) */
html,body{overscroll-behavior:none}