/* パン屋・洋菓子屋・和菓子屋の計算道具 — 共通デザイン */
:root{
  --bench:#EDEFF0;
  --card:#FFFFFF;
  --ink:#141A1D;
  --muted:#59636A;
  --line:#D3D8DB;
  --panel:#161D20;
  --read:#F2B441;
  --accent:#186B5E;          /* 各ページで上書き */
  --warn:#C2410C;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --jp:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  --ruler:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 1px,transparent 1px 60px),
          repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 1px,transparent 1px 12px);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--bench);color:var(--ink);font-family:var(--jp);
  font-size:18.5px;line-height:1.75;-webkit-text-size-adjust:100%}

/* ---- サイトヘッダー ---- */
.sitehead{background:var(--card);border-top:3px solid var(--accent);
  border-bottom:1px solid var(--line);position:relative;z-index:10}
.hin{max-width:1180px;margin:0 auto;padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:flex;align-items:baseline;gap:11px;text-decoration:none;color:var(--ink)}
.wordmark b{font-size:23px;letter-spacing:.04em;font-weight:700}
.wordmark span{font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.wordmark:hover b{color:var(--accent)}
.headnav{display:none;gap:4px}
.headnav a{text-decoration:none;font-size:17px;font-weight:600;color:var(--muted);
  padding:8px 15px;border-radius:8px}
.headnav a:hover{color:var(--ink);background:var(--bench)}
.headnav a.on{color:var(--accent);background:var(--bench)}
@media (min-width:700px){ .headnav{display:flex} }

.wrap{max-width:760px;margin:0 auto;padding:18px 16px 44px}

/* ---- PC版のサイドバー ---- */
.side{display:none}
.sidegroup{margin-bottom:19px}
.sidegroup:last-child{margin-bottom:8px}
.sidehead{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;
  color:var(--ink);text-decoration:none;padding:3px 0;margin-bottom:6px}
.sidehead::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--c,var(--accent))}
.sidehead:hover{color:var(--c,var(--accent))}
.sidegroup ul{list-style:none;margin:0;padding:0 0 0 13px}
.sidegroup li a{display:block;padding:6px 10px;font-size:16.5px;color:var(--muted);
  text-decoration:none;border-radius:7px;border-left:2px solid transparent}
.sidegroup li a:hover{color:var(--ink);background:var(--bench)}
.sidegroup li a.on{color:var(--c,var(--accent));background:var(--bench);
  font-weight:600;border-left-color:var(--c,var(--accent))}

@media (min-width:980px){
  .wrap{max-width:1180px}
  .layout{display:grid;grid-template-columns:262px 1fr;gap:34px;align-items:start}
  .side{display:block;position:sticky;top:18px;
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    padding:18px 15px 12px;box-shadow:0 1px 3px rgba(20,26,29,.06)}
  .main{min-width:0}
  .tabs{display:none}
  .sitenav{display:none}
}

/* ---- スマホ用の業種切替 ---- */
.sitenav{display:flex;gap:6px;margin-bottom:15px}
.sitenav a{text-decoration:none;font-size:16px;font-weight:600;color:var(--muted);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 18px}
.sitenav a:hover{border-color:var(--muted);color:var(--ink)}
.sitenav a.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media (min-width:700px){ .sitenav{display:none} }

/* ---- ページ見出し ---- */
.site-head{margin-bottom:16px}
.site-head h1{font-size:25px;margin:0 0 4px;letter-spacing:.02em;line-height:1.4}
.site-head h1 a{color:inherit;text-decoration:none}
.site-head h1 a:hover{color:var(--accent)}
.site-head p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.65}

/* ---- タブ（スマホ） ---- */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-bottom:15px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;
  font-size:17.5px;color:var(--muted);padding:11px 15px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tab:hover{color:var(--ink)}

/* ---- 計器パネル ---- */
.readout{position:sticky;top:8px;z-index:5;background:var(--panel);color:#fff;border-radius:12px;
  padding:23px 23px 16px;margin-bottom:17px;box-shadow:0 6px 18px rgba(20,26,29,.14)}
.readout .cap{font-size:18px;font-weight:bold;letter-spacing:.14em;color:#fff;margin-bottom:4px}
.readout .val{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(46px,11vw,70px);font-weight:600;line-height:1;color:var(--read);letter-spacing:-.02em}
.readout .unit{font-size:.32em;font-weight:500;color:rgba(255,255,255,.82);margin-left:.18em;letter-spacing:0}
.readout .sub{font-size:16px;color:#fff;margin-top:10px;min-height:1.7em}
.readout .sub.alert{color:#FFC98A}
.readout::after{content:"";display:block;height:11px;margin-top:14px;
  background-image:var(--ruler);
  background-size:100% 11px,100% 6px;background-position:0 bottom,0 bottom;background-repeat:repeat-x}
@media (min-width:980px){ .readout{top:18px} }

/* ---- カードと入力 ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 19px;margin-bottom:15px}
.card h2{font-size:15px;letter-spacing:.06em;color:var(--muted);margin:18px 0 2px;font-weight:600}
.field{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.card>.field:first-of-type,.card>h2+.field{border-top:0}
.field label{flex:1;min-width:0;font-size:18px}
.field .hint{display:block;font-size:15px;color:var(--muted);line-height:1.55;margin-top:2px}
.val-in{display:flex;align-items:center;gap:8px;flex:none}
input[type=number],input[type=time]{font:inherit;font-size:18.5px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;width:116px;padding:10px 12px;text-align:right;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
input[type=time]{width:138px;text-align:center}
input[type=text]{font:inherit;font-size:18px;width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
select{font:inherit;font-size:18px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);max-width:250px}
.suffix{color:var(--muted);font-size:16px;min-width:2.2em}
input:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ---- モード切替 ---- */
.modes{display:flex;margin:15px 0 4px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.modes button{flex:1;appearance:none;border:0;background:transparent;font:inherit;font-size:17px;
  padding:12px 8px;cursor:pointer;color:var(--muted);border-right:1px solid var(--line)}
.modes button:last-child{border-right:0}
.modes button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}

/* ---- 表 ---- */
table{width:100%;border-collapse:collapse;margin:7px 0 15px}
th,td{text-align:right;padding:10px 7px;border-top:1px solid var(--line);font-size:17px}
th{font-size:14.5px;letter-spacing:.05em;color:var(--muted);font-weight:600;border-top:0}
th:first-child,td:first-child{text-align:left}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.total td{border-top:2px solid var(--ink);font-weight:600}
tr.sect td{background:var(--bench);font-weight:600;font-size:15.5px;letter-spacing:.05em}
td .rm{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:21px;line-height:1;padding:2px 5px}
td .rm:hover{color:var(--warn)}
.flourbox{width:20px;height:20px;accent-color:var(--accent)}

/* ---- ボタン ---- */
.btn{appearance:none;font:inherit;font-size:16.5px;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:10px 18px;color:var(--ink)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 17px}

/* ---- 折りたたみ ---- */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 19px;margin-bottom:15px}
summary{cursor:pointer;padding:15px 0;font-size:17px;font-weight:600;color:var(--ink)}
details[open] summary{border-bottom:1px solid var(--line)}
details .inner{padding:7px 0 17px}
details p{margin:10px 0;font-size:16.5px;color:var(--muted);line-height:1.8}
code{font-family:var(--mono);font-size:16px;background:var(--bench);padding:2px 7px;border-radius:5px;color:var(--ink)}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.presets button{appearance:none;font:inherit;font-size:15.5px;cursor:pointer;background:var(--bench);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--ink)}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.tip{font-size:16px;color:var(--muted);margin:0 0 15px;padding:0 2px;line-height:1.7}

/* ---- トップページの案内板 ---- */
.hub{display:grid;gap:16px;margin-bottom:8px}
@media (min-width:980px){ .hub{grid-template-columns:1fr 1fr} }
.hubcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hubcard .bar{height:6px;background:var(--c,var(--accent))}
.hubcard .in{padding:17px 19px 19px}
.hubcard h2{margin:0 0 5px;font-size:21px;letter-spacing:.02em}
.hubcard .lead{margin:0 0 13px;font-size:16px;color:var(--muted);line-height:1.6}
.toollist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.toollist a{display:inline-block;text-decoration:none;font-size:16px;color:var(--ink);
  background:var(--bench);border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.toollist a:hover{border-color:var(--c,var(--accent));color:var(--c,var(--accent))}
.hubcard .go{display:inline-block;margin-top:14px;font-size:16.5px;font-weight:600;
  text-decoration:none;color:var(--c,var(--accent))}
.about{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:19px;margin:19px 0 0}
.about h2{font-size:15px;letter-spacing:.08em;color:var(--muted);margin:0 0 11px;font-weight:600}
.about p{margin:0 0 12px;font-size:17.5px;line-height:1.85}
.about p:last-child{margin-bottom:0}

/* ---- サイトフッター ---- */
.sitefoot{background:var(--panel);color:rgba(255,255,255,.82);margin-top:8px}
.sitefoot::before{content:"";display:block;height:11px;
  background-image:var(--ruler);
  background-size:100% 11px,100% 6px;background-position:0 top,0 top;background-repeat:repeat-x}
.fin{max-width:1180px;margin:0 auto;padding:26px 16px 32px}
.sitefoot h2{font-size:20px;color:#fff;margin:0 0 8px;letter-spacing:.03em}
.sitefoot p{margin:0 0 12px;font-size:16px;line-height:1.85}
.flinks{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 18px}
.flinks a{color:#fff;text-decoration:none;font-size:16px;font-weight:600;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 17px}
.flinks a:hover{border-color:var(--read);color:var(--read)}
.sitefoot .pub strong{color:#fff;font-weight:600}
.sitefoot .copy{font-size:14.5px;color:rgba(255,255,255,.5);margin:18px 0 0;
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px}

@media (max-width:420px){
  body{font-size:17.5px}
  input[type=number]{width:104px}
  .field{gap:11px}
  .field label{font-size:17px}
  .wordmark b{font-size:21px}
}
@media (prefers-reduced-motion:no-preference){
  .tab,.btn,.modes button,.sitenav a,.sidegroup li a,.toollist a,.headnav a,.flinks a{
    transition:color .12s,background-color .12s,border-color .12s}
}
@media print{
  body{background:#fff;font-size:12pt}
  .tabs,.btnrow,details,.modes,.sitenav,.presets,.side,.sitehead,.sitefoot{display:none !important}
  .layout{display:block !important}
  .readout{position:static;background:#fff;color:#000;border:1px solid #000;box-shadow:none}
  .readout .val{color:#000}
  .readout .cap,.readout .sub{color:#333}
  .readout::after{display:none}
  .card{border:0;padding:0}
  .card input{border:0;padding:0}
}