/* ══════════════════════════════════════════════════════════════════════════
   ソバミル 共通デザインシステム  sobamil.css
   全ページ（index / search / mypage / SSG生成ページ）の唯一の正。
   トークンは index.html を正として統一。ページ固有CSSはこの上に最小限だけ足す。
   端末:  スマホ<700 / タブレット700–1023 / PC1024+ / ワイド1440+
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --panel:#FBFCFA;
  --ink:#1E211D;
  --ink-2:#5B615A;
  --ink-3:#8A908A;
  --ink-4:#B3B8B1;
  --line:#EAEDE7;
  --line-2:#F1F3EF;

  --green:#17A45C;         /* 値下がり・買い時・ブランド */
  --green-deep:#12854B;
  --green-tint:#E8F5EE;
  --green-wash:#F3FAF6;
  --orange:#F0891F;        /* 値上がり・注意 */
  --orange-deep:#D06E0C;
  --orange-tint:#FCEFDC;
  --gray-n:#9AA09B;        /* 様子見・横ばい */
  --gray-tint:#F0F2EF;
  --star-off:#DFE3DD;

  --dark:#17191B;
  --pad:20px;
  --tab-h:74px;
  --maxw:1280px;
  --shadow-sm:0 1px 2px rgba(24,30,22,.04), 0 6px 18px -12px rgba(24,30,22,.10);
  --shadow:0 1px 2px rgba(24,30,22,.03), 0 10px 30px -16px rgba(24,30,22,.14);
  --radius:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── リセット・ベース ── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1; line-height:1.6; letter-spacing:.01em;
}
html,body{overflow-x:hidden}
.num{font-variant-numeric:tabular-nums}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:3px}

/* ══════════════════════════════════════════
   トップバー（PC=横ナビ／モバイル=コンパクト）
   ══════════════════════════════════════════ */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,#fff 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:22px;
  padding:calc(env(safe-area-inset-top) + 12px) 28px 12px}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; flex:0 0 auto}
.brand .mark{width:26px; height:26px; align-self:center; display:flex}
.brand .mark svg{width:25px; height:25px}
.brand .nm{font-size:20px; font-weight:800; letter-spacing:.02em; color:var(--ink)}
.brand .sub{font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.06em}
.nav{display:flex; align-items:center; gap:2px; margin-left:6px; flex:1 1 auto}
.nav a{display:inline-block; font-size:13.5px; font-weight:700; color:var(--ink-2); text-decoration:none;
  padding:8px 12px; border-radius:9px; white-space:nowrap; cursor:pointer}
.nav a:hover{background:var(--gray-tint); color:var(--ink)}
.nav a.on{color:var(--green-deep)}
.search{flex:0 0 auto; position:relative; display:flex; align-items:center}
.search svg{position:absolute; left:12px; width:16px; height:16px; stroke:var(--ink-3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.search input{width:190px; border:1px solid var(--line); background:var(--panel); border-radius:22px;
  font-family:inherit; font-size:13px; color:var(--ink); padding:9px 14px 9px 34px; outline:none}
.search input:focus{border-color:var(--green); background:#fff}
.topbar-actions{display:none; align-items:center; gap:14px; margin-left:auto}
.icobtn{position:relative; border:0; background:transparent; padding:2px; cursor:pointer; color:var(--ink); display:flex}
.icobtn svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icobtn .dot{position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:var(--green); border:1.5px solid var(--bg)}

/* ══════════════════════════════════════════
   共通レイアウトコンテナ・ページ見出し・パンくず
   ══════════════════════════════════════════ */
.container{max-width:var(--maxw); margin:0 auto; padding:26px 28px calc(var(--tab-h) + 40px)}
@media(min-width:1024px){ .container{padding-bottom:64px} }
.container--narrow{max-width:1040px}
.container--reading{max-width:880px}

.crumb{font-size:12.5px; color:var(--ink-3); padding:4px 0 2px; line-height:1.7}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--green-deep); text-decoration:underline}
.crumb b{color:var(--ink-2); font-weight:700}
.crumb .sep{margin:0 6px; color:var(--ink-4)}

.page-head{margin:10px 2px 22px}
.page-head h1{font-size:30px; font-weight:800; line-height:1.32; letter-spacing:.005em}
.page-head .lead{font-size:14px; color:var(--ink-2); line-height:1.85; margin-top:10px; max-width:46em}
.page-head .updated{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  color:var(--ink-2); background:var(--panel); border:1px solid var(--line); padding:5px 11px; border-radius:20px; margin-top:14px}
.page-head .updated .rdot{width:7px; height:7px; border-radius:50%; background:var(--green)}
@media(max-width:700px){ .page-head h1{font-size:24px} }

.section-head{display:flex; align-items:center; justify-content:space-between; margin:2px 2px 15px}
.section-head h2{font-size:19px; font-weight:800}
.section-head .more{font-size:12.5px; font-weight:700; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; gap:3px; cursor:pointer}
.section-head .more svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ══════════════════════════════════════════
   共通コンポーネント：カード・ボタン・バッジ・チップ・フォーム
   ══════════════════════════════════════════ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}

.btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:7px; text-align:center; text-decoration:none;
  background:var(--green); color:#fff; font-weight:800; font-size:14px; padding:13px 20px; border-radius:12px; border:0; font-family:inherit; cursor:pointer}
.btn-primary:hover{background:var(--green-deep)}
.btn-dark{display:inline-flex; align-items:center; gap:7px; border:0; background:var(--dark); color:#fff; font-family:inherit;
  font-size:13px; font-weight:700; padding:12px 18px; border-radius:24px; cursor:pointer; letter-spacing:.02em; white-space:nowrap; text-decoration:none}
.btn-dark svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.btn-line{display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center; background:var(--surface); color:var(--ink);
  font-weight:700; font-size:13.5px; padding:12px 18px; border-radius:12px; border:1px solid var(--line); font-family:inherit; cursor:pointer; text-decoration:none}
.btn-line:hover{border-color:var(--ink-4)}
.btn-ghost{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; background:transparent; border:0; font-family:inherit; cursor:pointer; white-space:nowrap}
.btn-ghost svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 判定バッジ（g=買い時/値下がり o=値上がり/注意 n=様子見/横ばい） */
.badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:8px; letter-spacing:.02em}
.badge svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.badge.g{color:var(--green-deep); background:var(--green-tint)}
.badge.o{color:var(--orange-deep); background:var(--orange-tint)}
.badge.n{color:var(--ink-2); background:var(--gray-tint)}

/* チップ（フィルタ・タグ） */
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:inherit; font-size:12.5px;
  font-weight:700; padding:7px 14px; border-radius:20px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:5px}
.chip:hover{border-color:var(--ink-4)}
.chip.on{background:var(--green-deep); border-color:var(--green-deep); color:#fff}

/* フォーム部品 */
.field{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px; box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s}
.field:focus-within{border-color:var(--green); box-shadow:0 0 0 3px var(--green-tint)}
.field svg{width:19px; height:19px; flex:0 0 auto; stroke:var(--ink-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.field input,.field select{flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:16px; color:var(--ink)}
.field input::placeholder{color:var(--ink-4)}
.selectbox{position:relative; display:inline-flex; align-items:center}
.selectbox select{appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:13px; font-weight:700; padding:9px 34px 9px 14px; border-radius:12px; cursor:pointer}
.selectbox::after{content:""; position:absolute; right:14px; width:8px; height:8px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translateY(-2px); pointer-events:none}

/* ══════════════════════════════════════════
   状態：読み込み中(スケルトン) / エラー / 空
   ══════════════════════════════════════════ */
@keyframes sbl-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skl{position:relative; overflow:hidden; background:var(--gray-tint); border-radius:10px;
  background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%);
  background-size:400px 100%; background-repeat:no-repeat; animation:sbl-shimmer 1.2s infinite linear}
.skl-line{height:12px; margin:8px 0}
.skl-card{height:150px; border-radius:15px}
.state{padding:34px 20px; text-align:center; border-radius:14px; background:var(--panel); border:1px solid var(--line)}
.state .ic{width:44px; height:44px; margin:0 auto 12px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--gray-tint)}
.state .ic svg{width:22px; height:22px; stroke:var(--ink-3); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.state .t{font-size:14.5px; font-weight:800; color:var(--ink)}
.state .d{font-size:12.5px; color:var(--ink-3); line-height:1.8; margin-top:6px; max-width:34em; margin-left:auto; margin-right:auto}
.state .act{margin-top:16px; display:inline-flex; gap:10px}
.state.is-error .ic{background:var(--orange-tint)} .state.is-error .ic svg{stroke:var(--orange-deep)}

/* ══════════════════════════════════════════
   フッター（PC=4カラム / モバイル=1カラム）
   ══════════════════════════════════════════ */
.foot{border-top:1px solid var(--line); margin-top:48px; background:var(--panel)}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:34px 28px calc(var(--tab-h) + 30px);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:26px}
@media(min-width:1024px){ .foot-in{padding-bottom:40px} }
.foot .fbrand .nm{font-size:18px; font-weight:800}
.foot .fbrand p{font-size:12px; color:var(--ink-3); line-height:1.8; margin-top:10px; max-width:26em}
.foot-col h5{font-size:12.5px; font-weight:800; margin-bottom:12px}
.foot-col a{display:block; font-size:12.5px; color:var(--ink-2); text-decoration:none; padding:5px 0; cursor:pointer}
.foot-col a:hover{color:var(--green-deep)}
.foot-news label{font-size:12.5px; font-weight:800}
.foot-news p{font-size:11px; color:var(--ink-3); margin:8px 0 10px; line-height:1.7}
.foot-news .frow{display:flex; gap:8px}
.foot-news input{flex:1 1 auto; min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:12.5px; background:#fff}
.foot-news button{flex:0 0 auto; background:var(--green); color:#fff; border:0; font-family:inherit; font-weight:800; font-size:12.5px; padding:0 16px; border-radius:10px; cursor:pointer}
.foot-legal{grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; font-size:10.5px; color:var(--ink-4); line-height:1.8}
.foot-legal a{color:inherit; text-decoration:underline}

/* ══════════════════════════════════════════
   タブバー（モバイル下部ナビ・PCでは非表示）
   ══════════════════════════════════════════ */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; justify-content:center;
  padding:8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background:color-mix(in srgb,#fff 94%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--line)}
.tabbar-in{display:flex; width:100%; max-width:440px}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--ink-3); font-size:10.5px; font-weight:650; padding:6px 0}
.tab svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tab.on{color:var(--green); font-weight:750}
.tab.on svg{stroke:var(--green); fill:var(--green-tint)}

/* ══════════════════════════════════════════
   共有モーダル/シート（下からせり上がり・PCは中央）
   ══════════════════════════════════════════ */
.modal-bg{position:fixed; inset:0; z-index:90; background:rgba(24,30,22,.42); opacity:0; pointer-events:none; transition:opacity .22s}
.modal-bg.show{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:91; margin:0 auto; max-width:560px; max-height:84vh; overflow-y:auto;
  background:var(--bg); border-radius:22px 22px 0 0; padding:14px var(--pad) calc(env(safe-area-inset-bottom) + 26px);
  transform:translateY(102%); transition:transform .26s cubic-bezier(.32,.72,.28,1)}
.sheet.show{transform:translateY(0)}
.sheet .grip{width:38px; height:4px; border-radius:2px; background:var(--ink-4); margin:0 auto 14px}
.sheet .sh-close{position:absolute; top:14px; right:var(--pad); width:32px; height:32px; border:none; background:var(--gray-tint); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-3); cursor:pointer}
.sheet .sh-close svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.sheet .sh-eye{font-size:12px; font-weight:700; color:var(--green)}
.sheet h3{font-size:20px; font-weight:800; line-height:1.4; margin-top:6px}
.sheet .sh-date{font-size:11.5px; color:var(--ink-3); margin-top:4px}
.sheet .sh-body{font-size:13.5px; color:var(--ink-2); line-height:2; margin-top:14px; white-space:pre-line}
.sheet h4{font-size:14.5px; font-weight:800; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.sheet h4:first-of-type{border-top:0; padding-top:0}
.sheet .sh-note{font-size:11px; color:var(--ink-3); margin-top:18px; padding-top:12px; border-top:1px solid var(--line)}
@media(min-width:700px){
  .sheet{left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-46%) scale(.98); border-radius:20px; width:min(560px,92vw); max-height:82vh; opacity:0}
  .sheet.show{transform:translate(-50%,-50%) scale(1); opacity:1}
  .sheet .grip{display:none}
}

/* ══════════════════════════════════════════
   レスポンシブ：共通chrome
   スマホ<700 → PCナビ隠す・下部タブ表示
   ══════════════════════════════════════════ */
@media(max-width:1080px){
  .foot-in{grid-template-columns:1fr 1fr}
  .foot .fbrand{grid-column:1 / -1}
}
@media(max-width:700px){
  :root{--maxw:100%}
  .topbar-in{padding-left:16px; padding-right:16px; gap:10px}
  .nav,.search{display:none}
  .topbar-actions{display:flex}
  .brand .sub{display:none}
  .container{padding:18px 16px calc(var(--tab-h) + 30px)}
  .foot-in{grid-template-columns:1fr; padding:26px 16px calc(var(--tab-h) + 24px)}
  .foot .fbrand,.foot-news{grid-column:auto}
  .tabbar{display:flex}
}

/* ══════════════════════════════════════════
   ダークモード
   ══════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14161A; --surface:#1C1F24; --panel:#191C21; --ink:#ECEEE9;
    --ink-2:#AEB4AC; --ink-3:#848A84; --ink-4:#585E58;
    --line:#2A2E34; --line-2:#23272C;
    --green:#33C177; --green-deep:#93E2B7; --green-tint:#14301F; --green-wash:#151A17;
    --orange:#F2A24D; --orange-deep:#F7C48F; --orange-tint:#3A2A15;
    --gray-n:#8C938D; --gray-tint:#23272C; --star-off:#3B4045;
    --dark:#EBEDE8;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 8px 20px -14px rgba(0,0,0,.6);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  }
  .btn-dark{color:#16181C} .btn-dark svg{stroke:#16181C}
  .btn-primary{color:#0f1a13}
  .topbar{background:color-mix(in srgb,#14161A 88%,transparent)}
  .tabbar{background:color-mix(in srgb,#1C1F24 92%,transparent)}
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}