/* 配色は :root のトークンだけで定義する。個別セレクタに色を直書きしない。
   （片方のテーマで読めなくなるため。親CLAUDE.mdの資料ルールに合わせている） */
:root{
  --bg:#fdfaf7; --card:#fff; --ink:#2b2724; --sub:#7d746d; --line:#e8e0d8;
  --accent:#d99a86; --accent-ink:#7a3f2c; --accent-bg:#f7e6df;
  --danger:#c0392b; --warn:#c98a1e; --ok:#3f7d52;
  --shadow:0 2px 12px rgba(60,40,30,.10);
  --tab-h:58px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171514; --card:#221f1d; --ink:#eee7e1; --sub:#a49a92; --line:#352f2b;
    --accent:#d99a86; --accent-ink:#f2c8b8; --accent-bg:#3a2823;
    --danger:#e57365; --warn:#e0ab4a; --ok:#6fb383;
    --shadow:0 2px 12px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#171514; --card:#221f1d; --ink:#eee7e1; --sub:#a49a92; --line:#352f2b;
  --accent:#d99a86; --accent-ink:#f2c8b8; --accent-bg:#3a2823;
  --danger:#e57365; --warn:#e0ab4a; --ok:#6fb383;
  --shadow:0 2px 12px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ── 上部バー ── */
.bar{
  display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:600;
}
.bar h1{font-size:16px; margin:0; flex:1; letter-spacing:.02em}

button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid transparent}
.primary{background:var(--accent); color:#fff; border-color:var(--accent); padding:11px 18px; font-weight:600}
.ghost{background:transparent; color:var(--accent-ink); border-color:var(--line); padding:7px 12px}
.ghost.danger{color:var(--danger)}

/* ── 画面切り替え ── */
.view{display:none}
.view.is-on{display:block}
.pad{padding:14px 14px calc(var(--tab-h) + 24px)}

/* ── 地図 ── */
#map{height:52vh; width:100%; background:var(--line)}
.hint{
  padding:9px 14px; font-size:12.5px; color:var(--sub);
  background:var(--card); border-bottom:1px solid var(--line);
}
.near{padding:6px 14px calc(var(--tab-h) + 20px)}

.store{
  display:flex; align-items:flex-start; gap:10px; padding:11px 2px;
  border-bottom:1px solid var(--line); cursor:pointer;
}
.store:last-child{border-bottom:0}
.store:active{background:var(--accent-bg)}
.dot{width:10px; height:10px; border-radius:50%; flex:none; margin-top:5px}
.store .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.store b{font-weight:600; font-size:14.5px; line-height:1.4}
.store .meta{color:var(--sub); font-size:12.5px; line-height:1.5}
.store .meta.sub{font-size:12px}
.store .right{display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none}
.store .dist{color:var(--sub); font-size:12.5px; white-space:nowrap}
.store .go{
  font-size:11.5px; text-decoration:none; white-space:nowrap;
  color:var(--accent-ink); border:1px solid var(--line); border-radius:999px; padding:2px 9px;
}

/* ── 地図のポップアップ ── */
.pu{font-size:13px; line-height:1.65}
.pu b{font-size:14.5px}
.pu-c{color:var(--sub); font-size:12px; margin-bottom:4px}
.pu-b{font-weight:600; margin:2px 0 4px}
.pu-x{color:var(--sub); font-size:12px}
.pu-go{margin-top:7px; display:flex; gap:12px}
.pu-go a{color:var(--accent-ink); font-weight:600}

/* ── 財布 ── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; margin:10px 0; box-shadow:var(--shadow);
}
.card .top{display:flex; align-items:baseline; gap:8px}
.card .co{font-weight:700}
.card .code{color:var(--sub); font-size:12px}
.card .note{color:var(--ink); font-size:14px; margin:3px 0 0}
.card .foot{display:flex; align-items:center; gap:10px; margin-top:9px; font-size:12.5px; color:var(--sub)}
.card .foot .grow{flex:1}

.tag{
  font-size:11.5px; padding:2px 8px; border-radius:999px;
  border:1px solid currentColor; font-weight:600;
}
.t-red{color:var(--danger)} .t-warn{color:var(--warn)} .t-ok{color:var(--ok)} .t-gray{color:var(--sub)}

.empty{color:var(--sub); text-align:center; padding:34px 10px; font-size:14px; line-height:1.9}
.note{color:var(--sub); font-size:13px}
h2{font-size:15px; margin:22px 0 8px}
.err{color:var(--danger); font-size:13px; margin:2px 0 0}

/* ── 下タブ ── */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:700;
  display:flex; background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  flex:1; background:none; border:0; color:var(--sub);
  padding:8px 0 9px; font-size:11.5px; display:flex; flex-direction:column;
  align-items:center; gap:2px; position:relative;
}
.tabs button span{font-size:19px; line-height:1}
.tabs button.is-on{color:var(--accent-ink); font-weight:700}
.badge{
  position:absolute; top:4px; left:50%; margin-left:8px;
  background:var(--danger); color:#fff; font-size:10px; font-style:normal;
  min-width:16px; height:16px; border-radius:999px; padding:0 4px;
  display:none; align-items:center; justify-content:center; line-height:16px;
}
.badge.is-on{display:flex}

/* ── 登録シート ── */
.sheet{position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.45); display:flex; align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-inner{
  background:var(--card); width:100%; border-radius:16px 16px 0 0;
  padding:16px 16px calc(env(safe-area-inset-bottom) + 16px); max-height:92vh; overflow:auto;
}
.sheet-head{display:flex; align-items:center; margin-bottom:6px}
.sheet-head strong{flex:1; font-size:15px}
.sheet label{display:block; margin:12px 0 0; font-size:12.5px; color:var(--sub)}
.sheet input,.sheet select{
  width:100%; margin-top:5px; padding:11px 12px; font:inherit;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
}
.row{display:flex; gap:10px}
.row label{flex:1}
.sheet-foot{display:flex; gap:10px; margin-top:18px}
.sheet-foot .primary{flex:1}

/* Leaflet のポップアップを本体の配色に合わせる */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card); color:var(--ink)}
.leaflet-popup-content{margin:11px 13px; font:inherit}
.leaflet-container{font:inherit}
.pin{border-radius:50%; border:2.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.45)}

/* ── 権利日タブ ── */
.lifebox{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:var(--shadow);
}
.lifehead{display:flex; align-items:center; gap:10px}
.lifehead strong{flex:1; font-size:14.5px}
.rangelabel{display:block; margin-top:10px; font-size:12.5px; color:var(--sub)}
.rangelabel b{color:var(--ink); font-size:14px}
.rangelabel input{width:100%; margin-top:4px; accent-color:var(--accent)}

table.kv{width:100%; border-collapse:collapse; margin-top:8px; font-size:13px}
table.kv th{
  text-align:left; font-weight:400; color:var(--sub);
  padding:3px 0; width:8.5em; vertical-align:top;
}
table.kv td{padding:3px 0}
table.kv b{font-size:14.5px}
.warnmark{color:var(--warn); font-size:12px}
.dim{color:var(--sub)}

/* ── 期限アラートの設定 ── */
.switch{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer}
.switch input{width:20px; height:20px; accent-color:var(--accent); flex:none}
.wh{display:block; margin-top:12px; font-size:12.5px; color:var(--sub)}
.wh input{
  width:100%; margin-top:5px; padding:11px 12px; font:inherit; font-size:13px;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px;
}
.note.tiny{font-size:12px; line-height:1.7; margin-top:9px}
.ok{color:var(--ok)}

/* ── 銘柄の検索（75銘柄あるので選ぶだけでは探せない） ── */
#f-search{margin-bottom:6px}
#f-code{max-height:none}
#f-brands{margin:6px 0 0; min-height:1.2em}

/* ── 在庫（ざぶクロ連携） ── */
.stk{
  display:flex; align-items:flex-start; gap:10px; padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.stk:last-child{border-bottom:0}
.stk .body{flex:1; min-width:0}
.stk b{font-weight:600; font-size:14.5px}
.stk .meta{display:block; color:var(--sub); font-size:12.5px; line-height:1.5}
.stk .right{flex:none; text-align:right; font-size:12.5px; color:var(--sub); white-space:nowrap}
.stk .near{font-weight:700; color:var(--accent-ink)}