/* 成分辞典 共通スタイル（index.html にインライン展開／成分ページは /s.css として読み込み） */
:root{
  --fs:1;
  --green:#2E7D32; --green-d:#1B5E20; --green-l:#E8F5E9;
  --bg:#F5F8F1; --card:#FFFFFF; --line:#E3EDE3;
  --text:#333333; --sub:#666666; --mute:#888888;
  font-size:calc(16px * var(--fs));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  line-height:1.7; font-size:.9375rem;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--green-d)}
.wrap{max-width:720px;margin:0 auto;padding:0 14px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:20;background:var(--green);color:#fff;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px}
.hd-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:8px}
.hd h1,.hd .ttl{font-size:1.06rem;font-weight:800;margin:0;flex:1;min-width:0;letter-spacing:.02em}
.hd .ttl a{color:#fff;text-decoration:none}
.hd-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;
  padding:5px 11px;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap}
.hd-btn.on{background:#fff;color:var(--green-d);border-color:#fff}
.hd-sub{max-width:720px;margin:4px auto 0;font-size:.7rem;opacity:.9}

/* 検索 */
.search{margin:12px 0 8px}
.search input{width:100%;background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:.95rem;font-family:inherit;color:var(--text)}
.search input:focus{outline:none;border-color:var(--green)}
.guide{font-size:.75rem;color:var(--sub);margin:0 0 6px}

/* フィルタ */
.ftoggle{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;color:var(--text)}
.ftoggle b{font-size:.82rem;display:block}
.ftoggle span{font-size:.7rem;color:var(--sub);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftoggle em{font-style:normal;font-size:.72rem;color:var(--green);font-weight:700;white-space:nowrap}
.fpanel{background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:12px 13px;margin-top:-6px}
.flabel{font-size:.72rem;color:var(--sub);font-weight:700;margin:8px 0 6px}
.frow{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:.75rem;
  cursor:pointer;font-family:inherit;color:var(--text)}
.pill.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.cnt{font-size:.72rem;color:var(--sub);margin-top:10px}

/* 文字サイズ */
.fsbar{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.fsbar span{font-size:.68rem;color:var(--mute)}
.fsbtn{width:38px;height:34px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#AAA;font-family:inherit}
.fsbtn.on{border-color:var(--green);background:var(--green-l);color:var(--green)}

/* ランディング */
.land{margin:14px 0}
.land .flabel{margin-top:14px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:.8rem;
  cursor:pointer;font-family:inherit;color:var(--green-d);font-weight:600;text-decoration:none;display:inline-block}
.rchip{border-radius:999px;padding:7px 13px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid}

/* カード */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.card-top{display:flex;align-items:flex-start;gap:8px}
.card-name{font-size:1rem;font-weight:800;color:var(--green-d);flex:1;min-width:0;margin:0;line-height:1.45}
.card-name a{color:inherit;text-decoration:none}
.badge{border-radius:10px;padding:2px 9px;font-size:.7rem;font-weight:800;border:1px solid;white-space:nowrap}
.tag{display:inline-block;font-size:.66rem;padding:1px 7px;border-radius:6px;background:#EEF3EE;color:var(--sub);margin-right:5px}
.card-cat{font-size:.7rem;color:var(--mute);margin:5px 0 0}
.blk{margin-top:9px}
.blk-h{font-size:.7rem;font-weight:800;color:var(--sub);margin-bottom:2px}
.blk-b{font-size:.82rem;color:#444;white-space:pre-wrap;word-break:break-word}
.sum{font-size:.86rem;color:#333;margin-top:8px;white-space:pre-wrap}

/* 有料ロック */
.lock{margin-top:11px;border:1px dashed #C8DCC8;border-radius:11px;background:#FAFCF8;padding:11px 12px}
.lock-h{font-size:.76rem;font-weight:800;color:var(--green-d);margin-bottom:6px}
.lock-fake{filter:blur(3.2px);opacity:.55;user-select:none;pointer-events:none;font-size:.8rem;color:#555}
.lock-cta{display:block;width:100%;margin-top:9px;background:var(--green);color:#fff;border:none;border-radius:10px;
  padding:10px;font-size:.8rem;font-weight:800;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none}
.lock-note{font-size:.68rem;color:var(--mute);margin-top:6px;text-align:center}
.paid-h{font-size:.72rem;font-weight:800;color:var(--green);margin:11px 0 3px}

/* 空・もっと */
.empty,.more{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;
  font-size:.8rem;color:var(--sub)}

/* モーダル */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:20px;max-height:86vh;overflow:auto}
.modal h2{font-size:1rem;margin:0 0 10px;color:var(--green-d)}
.modal p{font-size:.8rem;color:var(--sub);margin:0 0 12px}
.modal input{width:100%;border:2px solid var(--line);border-radius:10px;padding:11px 12px;font-size:1rem;
  font-family:inherit;text-align:center;letter-spacing:.08em}
.modal input:focus{outline:none;border-color:var(--green)}
.btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:10px;padding:12px;font-size:.88rem;
  font-weight:800;cursor:pointer;font-family:inherit;margin-top:10px;font-family:inherit}
.btn.ghost{background:#fff;color:var(--sub);border:1px solid var(--line);font-weight:600}
.err{font-size:.76rem;color:#C62828;margin-top:8px;min-height:1.1em}

/* フッター */
.ft{margin:26px 0 34px;font-size:.72rem;color:var(--sub);line-height:1.85}
.ft details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.ft summary{font-weight:700;color:var(--green-d);cursor:pointer;font-size:.76rem}
.ft a{color:var(--sub)}
.ft .sig{margin-top:10px}

/* 成分ページ */
.crumb{font-size:.7rem;color:var(--mute);margin:12px 0 6px}
.crumb a{color:var(--sub)}
.rel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}