/* ZUBARY 共有スタイル（全ロケール共通。ADR-0005/0006） */
:root{
  --bg:#F4F2EC; --panel:#FFFFFF; --ink:#17191C; --sub:#6E7278; --line:#DDD9CF;
  --acc:#E03A1F; --acc-ink:#FFFFFF; --chip:#FFFFFF; --dock:rgba(244,242,236,.92);
  --glow:rgba(224,58,31,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#131417; --panel:#1C1E22; --ink:#ECEAE4; --sub:#8B8F96; --line:#2C2F35;
         --acc:#FF6B4A; --acc-ink:#1A0C08; --chip:#1C1E22; --dock:rgba(19,20,23,.92);
         --glow:rgba(255,107,74,.05); }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* .shell = PC/タブレットでのカード枠。スマホ(≤679px)では display:contents で箱を消し、
   従来と完全に同一のレイアウト（崩れる余地が構造的にない）。カード化は末尾の @media のみ */
.shell{display:contents}
.wrap{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
      padding:0 16px calc(150px + env(safe-area-inset-bottom))}

/* ── 言語提案バナー ── */
.banner{display:flex;align-items:center;gap:8px;background:var(--panel);
        border-bottom:1px solid var(--line);padding:8px 14px;font-size:13px}
.banner[hidden]{display:none}  /* hidden属性を .banner{display:flex} より確実に優先（空バナー抑止） */
.bn-go{color:var(--acc);font-weight:600;text-align:left}
.bn-x{margin-left:auto;color:var(--sub);padding:4px 8px;flex-shrink:0}

/* ── header ── */
.hd{display:flex;align-items:center;gap:8px;padding:14px 2px 0}
.brand{font-weight:800;font-size:20px;letter-spacing:.18em;line-height:1}
.brand b{color:var(--acc)}
.tag{font-size:11px;color:var(--sub)}
.wx{margin-left:auto;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.lsw{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;flex-shrink:0}
.wx:empty + .lsw{margin-left:auto}
.lsw button{font-size:11px;line-height:1;padding:6px 9px;border-radius:999px;color:var(--sub)}
.lsw button[aria-current="true"]{background:var(--ink);color:var(--bg)}

/* ── clock ── */
.clock{text-align:center;padding:18px 0 6px}
.clk{font-size:56px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1}
.date{font-size:13px;color:var(--sub);margin-top:6px}

/* ── いまボード ── */
.board{display:flex;gap:8px;padding:12px 0 4px;flex-wrap:wrap}
.bi{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:8px 12px;font-size:12px;color:var(--sub);display:flex;gap:6px;align-items:center}
.bi b{color:var(--ink);font-weight:600}
.trends{display:none;width:100%;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.trends.on{display:flex}
.tw{flex-shrink:0;background:var(--panel);border:1px solid var(--line);border-radius:999px;
    padding:6px 12px;font-size:12px}

/* ── マイ導線 ── */
.mine{padding:10px 0 0}
.mh{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--sub);letter-spacing:.12em;margin:8px 2px 6px}
/* ── 履歴消去ボタン（各見出しに個別・2段階タップ・控えめ） ── */
.clr{margin-left:auto;font-size:11px;color:var(--sub);letter-spacing:.04em;padding:3px 8px;
     border-radius:8px;line-height:1.3;flex-shrink:0}
.clr:hover{color:var(--ink);background:var(--panel)}
.clr.armed{color:var(--acc);font-weight:700}
.clr[hidden]{display:none}
.row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.row::-webkit-scrollbar{display:none}
.rq,.fv{flex-shrink:0;background:var(--panel);border:1px solid var(--line);border-radius:999px;
        padding:8px 14px;font-size:13px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv{font-weight:600}
.empty{font-size:12px;color:var(--sub);padding:2px}
.note{margin-top:auto;padding:16px 2px 8px;font-size:12px;line-height:1.6;color:var(--sub)}

/* ── ドック(下部固定) ── */
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--dock);backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
      padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
.dock-in{max-width:480px;margin:0 auto}
.chipbar{display:flex;align-items:center;gap:6px;min-height:44px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:flex;align-items:stretch;background:var(--chip);border:1px solid var(--line);
      border-radius:12px;overflow:hidden}
.chip-main{display:flex;align-items:center;gap:7px;padding:7px 10px}
.chip .ic{font-size:16px}
.chip .lb{font-weight:700;font-size:13px}
.chip .en{font-size:11px;color:var(--sub)}
.chip .pr{font-size:9px;font-weight:700;color:var(--acc);border:1px solid var(--acc);
          border-radius:4px;padding:0 3px;align-self:center}
.chip-more{border-left:1px solid var(--line);padding:0 8px;color:var(--sub);font-size:11px;display:flex;align-items:center}
.chip.first{border-color:var(--acc)}
.chip.first .lb{color:var(--acc)}
.allbtn{flex-shrink:0;font-size:12px;color:var(--sub);padding:8px 10px;border:1px dashed var(--line);border-radius:12px}
.bar{display:flex;gap:8px;margin-top:6px}
#q{flex:1;height:52px;border:1.5px solid var(--line);border-radius:16px;background:var(--panel);
   color:var(--ink);font-size:16px;padding:0 16px;outline:none}
#q:focus{border-color:var(--acc)}
#q::placeholder{color:var(--sub)}
.go{width:52px;height:52px;border-radius:16px;background:var(--acc);color:var(--acc-ink);
    font-size:20px;font-weight:700;flex-shrink:0}

/* ── シート(全エンジン/意図別) ── */
.sheet{position:fixed;inset:0;background:var(--bg);z-index:50;display:none;flex-direction:column}
.sheet.on{display:flex}
.sh-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sh-t{font-weight:700;font-size:15px}
.sh-q{font-size:12px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sh-x{margin-left:auto;font-size:18px;padding:6px 10px;color:var(--sub)}
.sh-bd{overflow-y:auto;flex:1;padding:8px 16px 40px;max-width:480px;width:100%;margin:0 auto}
.cat{font-size:11px;color:var(--sub);letter-spacing:.12em;margin:16px 2px 6px}
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.eg{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;font-size:13px;text-align:left}
.eg .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg .pr{font-size:9px;font-weight:700;color:var(--acc);border:1px solid var(--acc);border-radius:4px;padding:0 3px;margin-left:auto;flex-shrink:0}
.eg .wr{margin-left:auto;flex-shrink:0}
.fleet{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.fl{display:block;background:var(--panel);border:1px solid var(--acc);border-radius:10px;
    padding:10px 12px;font-size:13px;text-decoration:none;font-weight:600}
.fl span{color:var(--sub);font-weight:400;font-size:11px}
.sh-ft{padding:10px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
       font-size:10px;color:var(--sub)}
.err{background:var(--panel);border:1px solid var(--acc);border-radius:12px;padding:12px;font-size:13px;margin:12px 0}

/* ══ PC/タブレット(≥680px): 中央カード化（案A・ADR-0008） ══
   スマホ(≤679px)には一切適用されない純追加。JSロジックは不変。
   ・空白を「意図的な余白」に = ブランド地紋グラデ＋中央カード（パネル/枠/影/角丸）
   ・ドックは position:fixed を解いてカード下端の“検索フッター”に（マウス操作前提で親指到達不要）
   ・全エンジンシートは中央モーダル化（広い画面での全画面占有を避ける） */
@media (min-width:680px){
  body{ background:
        radial-gradient(120% 70% at 50% -8%, var(--glow), transparent 55%),
        var(--bg);
        background-attachment:fixed; }
  .shell{ display:flex; flex-direction:column;
          max-width:544px; margin:32px auto;
          min-height:calc(100dvh - 64px);
          background:var(--panel); border:1px solid var(--line);
          border-radius:28px; overflow:hidden;
          box-shadow:0 18px 60px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04); }
  .wrap{ max-width:none; margin:0; min-height:0; flex:1; padding:6px 28px 4px; }
  .dock{ position:static; left:auto; right:auto; bottom:auto;
         background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
         border-top:1px solid var(--line); padding:14px 24px 20px; }
  .dock-in{ max-width:none; }
  /* PCはチップを横スクロールでなく「折り返し」表示（マウスにスワイプが無く3つ目以降が到達不能になるため）。
     全意図チップを常に可視化。allbtn(すべて▸)は先頭行に揃える。待機時(チップ無し)は base の
     min-height:44px を継承＝コミット済みの見た目のまま（余白を足さない） */
  .chipbar{ align-items:flex-start; }
  .chips{ flex-wrap:wrap; overflow-x:visible; }
  .banner{ max-width:544px; margin:16px auto -8px; border:1px solid var(--line); border-radius:14px; }
  .sheet{ inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
          width:min(600px, calc(100vw - 48px)); height:min(80vh, 760px);
          border:1px solid var(--line); border-radius:24px; overflow:hidden;
          box-shadow:0 0 0 100vmax rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.28); }
  .sh-bd{ max-width:none; }
}
@media (min-width:680px) and (prefers-color-scheme: dark){
  .shell{ box-shadow:0 18px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); }
}