/* レシピページ・食材ページ共通。アプリ本体と同じ色・書体 */
:root{
  --bg:#F2F5F0; --surface:#FFFFFF; --sunk:#F7F9F5; --ink:#1E2A21; --muted:#5C6A5F; --line:#D9E1D5;
  --leaf:#2E7646; --leaf-soft:#E1EFE4; --on-leaf:#FFFFFF; --yolk:#C98A00; --yolk-soft:#FCEFC9;
  --c-main:#A2452C; --c-side:#2E7646; --c-soup:#A87A12;
  --f-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#111511; --surface:#191F1A; --sunk:#151A16; --ink:#E3EAE1; --muted:#9AA89C; --line:#2B352D;
    --leaf:#72C590; --leaf-soft:#1C3324; --on-leaf:#0D1A11; --yolk:#F0C04C; --yolk-soft:#372D12;
    --c-main:#E5937A; --c-side:#72C590; --c-soup:#E2B65A; color-scheme:dark}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.8 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--leaf)}
h1,h2,h3{font-family:var(--f-display);line-height:1.4;text-wrap:balance}
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{max-width:860px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font:700 16px var(--f-display);color:var(--ink);text-decoration:none}
.mark{width:28px;height:28px;border-radius:50%;background:var(--leaf);color:var(--on-leaf);display:grid;place-items:center;font-size:14px}
.cta{margin-left:auto;background:var(--leaf);color:var(--on-leaf);text-decoration:none;font-weight:700;font-size:13px;border-radius:999px;padding:7px 14px;white-space:nowrap}
.wrap{max-width:860px;margin:0 auto;padding:16px 16px 48px;display:grid;gap:22px}
.crumb{font-size:12px;color:var(--muted)}
.crumb a{color:var(--muted)}
h1{font-size:28px;margin:0}
h2{font-size:19px;margin:0 0 10px}
.meta{color:var(--muted);font-size:13px;margin:4px 0 0}
.lead{margin:0}
section.box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
/* 栄養パネル（アプリと同じ） */
.nutri{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;align-items:center;background:var(--sunk);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.nutri .kc{display:grid;justify-items:center;line-height:1.15}
.nutri .kc b{font:700 34px var(--f-display);font-variant-numeric:tabular-nums}
.nutri .kc span{font-size:12px;font-weight:700}
.nutri .kc small{font-size:11px;color:var(--muted)}
.nv{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin:0}
.nv div{display:grid}
.nv dt{font-size:11px;color:var(--muted);white-space:nowrap}
.nv dd{margin:0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.nv dd small{font-size:11px;font-weight:400;margin-left:1px}
.pfc{grid-column:1/-1;display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line)}
.pfc span{display:block;height:100%}
.pfc .p,.pfc-l i.p{background:var(--c-main)}
.pfc .f,.pfc-l i.f{background:var(--c-soup)}
.pfc .c,.pfc-l i.c{background:var(--c-side)}
.pfc-l{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.pfc-l i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
@media (max-width:460px){.nutri{grid-template-columns:minmax(0,1fr)}.nutri .kc{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:6px}}
/* 材料表 */
.itbl-wrap{overflow-x:auto}
table.itbl{width:100%;border-collapse:collapse;font-size:14px}
.itbl th,.itbl td{padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.itbl thead th{font-size:11px;color:var(--muted);font-weight:700;text-align:right;white-space:nowrap}
.itbl thead th:first-child{text-align:left}
.itbl tbody th{font-weight:400;text-align:left}
.itbl td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.itbl .g,.itbl .k{color:var(--muted);font-size:13px}
.itbl .k small{font-size:10px;margin-left:1px}
.itbl .hn{display:block;font-size:11px;color:var(--muted);line-height:1.5}
.itbl .opt{color:var(--muted);font-size:11px;margin-left:6px}
.itbl tr.sec th{font-size:12px;font-weight:700;color:var(--muted);background:var(--sunk);padding:5px 6px}
.itbl tfoot th,.itbl tfoot td{font-weight:700;border-bottom:0}
.itbl tfoot th{text-align:left}
/* 作り方 */
.steps{margin:0;padding-left:1.5em;display:grid;gap:12px}
.steps li::marker{font-weight:700;color:var(--leaf)}
.schips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.schip{font-size:12px;background:var(--yolk-soft);border-radius:6px;padding:1px 8px;line-height:1.7}
/* 一覧 */
.list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.list a{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink)}
.list a:hover{border-color:var(--leaf)}
.list b{font:700 15px var(--f-display)}
.list span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips a{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 12px;font-size:13px;text-decoration:none;color:var(--ink)}
.chips a:hover{border-color:var(--leaf)}
.cat{font-size:12px;font-weight:700;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px}
.cat::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.cat.main{color:var(--c-main)}.cat.side{color:var(--c-side)}.cat.soup{color:var(--c-soup)}
.app-cta{background:var(--leaf-soft);border-radius:16px;padding:18px;display:grid;gap:8px}
.app-cta h2{margin:0}
.app-cta p{margin:0}
.app-cta a{justify-self:start;background:var(--leaf);color:var(--on-leaf);text-decoration:none;font-weight:700;border-radius:999px;padding:9px 18px}
.ad{border:1px dashed var(--line);border-radius:14px;min-height:100px;display:grid;place-items:center;font-size:11px;color:var(--muted);letter-spacing:.08em}
/* 広告ユニットを置くまでは仮の枠を隠す（AdSense の審査中に「作りかけ」に見えないように） */
.ad{display:none}
.note{font-size:12px;color:var(--muted);margin:0}
/* 運営者情報・ポリシーなどの文章ページ */
.prose{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:72ch}
.prose h1{font-size:24px;margin:0 0 12px}
.prose h2{font-size:17px;margin:22px 0 6px}
.prose p{margin:0 0 10px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:0 0 8px}
.kv dt{font-weight:700;color:var(--muted);font-size:13px}
.kv dd{margin:0}
@media (max-width:460px){.kv{grid-template-columns:minmax(0,1fr)}.kv dd{margin-bottom:6px}}
.cform{display:grid;gap:6px;margin:12px 0}
.cform label{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px}
.cform input,.cform select,.cform textarea{font:inherit;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--leaf);border-color:transparent}
.cform button{justify-self:start;margin-top:10px;background:var(--leaf);color:var(--on-leaf);border:0;border-radius:999px;padding:10px 22px;font:700 15px var(--f-body);cursor:pointer}
.cform .hp{position:absolute;left:-9999px}
footer{border-top:1px solid var(--line);padding:18px 16px 32px;text-align:center;font-size:12px;color:var(--muted)}
footer a{color:var(--muted)}