/* 暮らしの計算ツール 共通スタイル（v2 2026-10-03） */
*{box-sizing:border-box}
:root{--main:#0f766e;--main-d:#0b5b55;--main-l:#e6f4f2;--accent:#d97706;--bg:#f5f7f8;--card:#fff;--line:#e2e8f0;--text:#1e293b;--sub:#5b6b80;--ok:#15803d;--ok-bg:#ecfdf3;--ng:#b91c1c;--ng-bg:#fef2f2;--warn:#a16207;--warn-bg:#fefce8;--res-bg:#f0fdfa;--shadow:0 1px 3px rgba(15,23,42,.06);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--main:#2dd4bf;--main-d:#5eead4;--main-l:#123634;--accent:#fbbf24;--bg:#0f1720;--card:#16212c;--line:#2a3846;--text:#e5edf5;--sub:#9fb0c3;--ok:#4ade80;--ok-bg:#12301f;--ng:#f87171;--ng-bg:#3a1717;--warn:#facc15;--warn-bg:#352c0c;--res-bg:#10302d;--shadow:none}}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:16px;line-height:1.8;color:var(--text);background:var(--bg);overflow-wrap:anywhere}
a{color:var(--main-d)}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
/* ヘッダー */
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding-top:8px;padding-bottom:8px}
.logo{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:800;font-size:1.05em;letter-spacing:.02em;line-height:1.25}
.logo svg{width:30px;height:30px;flex:none}
.logo small{display:block;font-size:.66em;font-weight:500;color:var(--sub)}
.gnav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.gnav a{flex:none;font-size:.82em;text-decoration:none;color:var(--main-d);background:var(--main-l);border-radius:999px;padding:3px 12px;white-space:nowrap}
.gnav a[aria-current]{background:var(--main);color:var(--card)}
/* パンくず */
.crumb{font-size:.8em;color:var(--sub);margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap}
.crumb li+li::before{content:"›";margin:0 6px;color:var(--sub)}
.crumb a{color:var(--sub)}
/* 本文 */
main{padding-bottom:24px}
h1{font-size:1.6em;line-height:1.4;margin:10px 0 8px}
h2{font-size:1.25em;line-height:1.45;margin:36px 0 12px;padding-left:10px;border-left:4px solid var(--main)}
h3{font-size:1.05em;margin:22px 0 8px}
.box h2,.result h2{border-left:0;padding-left:0;margin-top:0;display:flex;align-items:center;gap:8px}
p,ul,ol{margin:0 0 12px}
li{margin:2px 0}
.lead{font-size:1.05em;font-weight:600;color:var(--main-d);margin:0 0 6px}
.note{font-size:.86em;color:var(--sub)}
.step{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--main);color:var(--card);font-size:.85em;flex:none}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0;list-style:none}
.badges li{font-size:.78em;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 10px;color:var(--sub)}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:16px 0;box-shadow:var(--shadow)}
.result{border:2px solid var(--main);background:linear-gradient(180deg,var(--res-bg),var(--card) 70%)}
.result p{margin:6px 0}
.result strong{font-size:1.5em;color:var(--main-d);font-variant-numeric:tabular-nums}
.callout{border-left:4px solid var(--accent);background:var(--warn-bg);padding:10px 14px;border-radius:0 10px 10px 0;margin:12px 0;font-size:.92em}
.callout b:first-child{color:var(--warn)}
.pr{font-size:.75em;font-weight:700;border:1px solid var(--accent);color:var(--accent);padding:0 6px;border-radius:4px;margin-right:4px}
.ok{color:var(--ok)}.ng{color:var(--ng)}.warn{color:var(--warn)}
.tag{display:inline-block;font-size:.8em;font-weight:700;padding:0 8px;border-radius:999px}
.tag.ok{background:var(--ok-bg)}.tag.ng{background:var(--ng-bg)}.tag.warn{background:var(--warn-bg)}
.calc{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;font-variant-numeric:tabular-nums}
.calc p{margin:4px 0}
/* フォーム */
input,select,button{font:inherit;font-size:16px}
input,select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);min-height:44px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--main);outline-offset:2px}
input[type=number]{width:7em}
select{max-width:100%}
button{cursor:pointer;min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--main);background:var(--card);color:var(--main-d);font-weight:700}
button:hover{background:var(--main-l)}
#add,#share,.btn-main{background:var(--main);color:var(--card)}
#add:hover,#share:hover{background:var(--main-d)}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:10px;padding:10px 18px;background:var(--main);color:var(--card)}
.btn:hover{background:var(--main-d)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions select{flex:1 1 220px}
.conds{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0}
.conds label{display:flex;flex-direction:column;font-size:.88em;color:var(--sub);gap:2px}
.conds label span{color:var(--text)}
.conds input,.conds select{width:100%}
/* 表 */
table{border-collapse:collapse;width:100%;margin:12px 0;font-variant-numeric:tabular-nums}
th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8em;color:var(--sub);font-weight:600;background:var(--bg)}
td input{width:100%;min-width:4.5em}
td input[type=text]{min-width:8em}
td button{border-color:var(--ng);color:var(--ng);padding:6px 12px}
.spec td,.spec th{font-size:.9em}
/* カード一覧 */
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cards li{margin:0}
.cards a{display:block;height:100%;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.cards a:hover{border-color:var(--main)}
.cards b{display:block;color:var(--main-d);font-size:1.02em;line-height:1.45;margin-bottom:4px}
.cards span{font-size:.85em;color:var(--sub);line-height:1.6;display:block}
.hero{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin:16px 0}
/* FAQ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:8px 0 0}
/* 関連 */
.related{margin-top:32px}
/* フッター */
.site-footer{margin-top:40px;background:var(--card);border-top:1px solid var(--line);font-size:.85em;color:var(--sub);padding:20px 0}
.fnav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:10px}
.fnav a{color:var(--sub)}
@media (max-width:640px){
  body{font-size:15.5px}
  h1{font-size:1.32em}
  h2{font-size:1.12em}
  .box{padding:14px 12px}
  .result table,.box table:not(.rowsTable),main>table,#sources table{display:block;overflow-x:auto;white-space:nowrap}
  .result td,.result th,#sources td{white-space:normal;min-width:7em}
  table.rowsTable thead{display:none}
  table.rowsTable,table.rowsTable tbody,table.rowsTable tr,table.rowsTable td{display:block;width:100%}
  table.rowsTable tr{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
  table.rowsTable td{border:0;padding:0}
  table.rowsTable td::before{display:block;font-size:.75em;color:var(--sub)}
  table.rowsTable td:nth-child(1){grid-column:1/-1}
  table.rowsTable td:nth-child(1)::before{content:"家電"}
  table.rowsTable td:nth-child(2)::before{content:"消費電力(W)"}
  table.rowsTable td:nth-child(3)::before{content:"起動時(W)"}
  table.rowsTable td:nth-child(4)::before{content:"台数"}
  table.rowsTable td:nth-child(5)::before{content:"1日の使用時間(h)"}
  table.rowsTable td:nth-child(6){align-self:end}
  table.rowsTable td:nth-child(6) button{width:100%}
}
/* 再訪の仕組み（v3） */
.kr-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--main-l);border:1px solid var(--main);border-radius:12px;padding:10px 14px;margin:12px 0}
.kr-bar button:first-of-type{background:var(--main);color:var(--card)}
.kr-sub{border-color:var(--line);color:var(--sub);font-weight:500;padding:4px 10px;min-height:36px}
.kr-a2hs{margin-top:10px}
.kr-a2hs button{min-height:32px;padding:2px 10px;font-size:.9em}
.kr-home{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:12px 0}
@media print{.site-header,.site-footer,.actions,.kr-bar,.kr-a2hs{display:none}}