/* 水の原価表 — 共通スタイル（単一ソース） */
:root{
  --ink:#14202b; --ink-soft:#41525e; --paper:#eef2f2; --paper-2:#ffffff;
  --water:#1d4e5f; --rule:#c8d3d4; --highlight:#e8efe9; --pr:#8a9599; --alert:#8c4a2f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%;width:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:16px;line-height:1.9;letter-spacing:.02em;
}
img{max-width:100%;height:auto}
svg{max-width:100%}
*{overflow-wrap:anywhere}

.wrap{max-width:720px;margin:0 auto;padding:0 20px}
.wrap.wide{max-width:860px}
.mincho{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif}
.num{font-family:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;font-variant-numeric:tabular-nums}

/* header */
header{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.head-in{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 0;font-size:.9rem}
.logo{font-size:1.05rem;font-weight:700;letter-spacing:.08em}
.logo span{color:var(--water)}
.tagline{font-size:.72rem;color:var(--ink-soft);letter-spacing:.1em}
.back{color:var(--water);text-decoration:none;letter-spacing:.06em}
.back:hover{text-decoration:underline}
.back:focus-visible{outline:2px solid var(--water);outline-offset:3px}

/* hero */
.hero{padding:60px 0 48px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.eyebrow{font-size:.7rem;letter-spacing:.2em;color:var(--water);padding-bottom:12px}
h1{font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.5;font-weight:600}
h1 em{font-style:normal;color:var(--water);border-bottom:2px solid var(--water)}
.lede{margin-top:22px;color:var(--ink-soft);font-size:.96rem}

/* article */
article{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.art-in{padding:48px 20px 68px;max-width:720px;margin:0 auto}
.date{font-family:ui-monospace,monospace;font-size:.74rem;color:var(--ink-soft);letter-spacing:.06em}
.art-in h1{font-size:clamp(1.3rem,3.4vw,1.8rem);line-height:1.6;font-weight:600;margin:12px 0 30px}
.pr-note{font-size:.72rem;color:var(--pr);letter-spacing:.05em;border:1px solid var(--rule);padding:8px 12px;display:inline-block;margin-bottom:24px}
.noad{font-size:.74rem;color:var(--water);letter-spacing:.04em;line-height:1.7;border:1px solid var(--water);padding:9px 13px;display:inline-block;margin-bottom:24px}

h2{font-size:1.1rem;font-weight:600;letter-spacing:.03em;padding-bottom:6px;margin:44px 0 20px;border-bottom:2px solid var(--ink);display:inline-block}
p+p{margin-top:1.1em}
.pull{font-size:1rem;line-height:1.9;padding-left:16px;border-left:3px solid var(--water);margin:28px 0;color:var(--ink)}
.lead-q{font-size:1rem;line-height:1.9;padding-left:16px;border-left:3px solid var(--water)}
ol{margin:18px 0 18px 1.3em}
ol li{margin-bottom:.6em}

/* summary box */
.summary{border:1px solid var(--ink);background:var(--highlight);padding:16px 18px;margin:0 0 30px}
.summary .st{font-size:.68rem;letter-spacing:.14em;color:var(--water);margin-bottom:9px}
.summary ul{list-style:none;margin:0}
.summary li{font-size:.92rem;line-height:1.7;padding-left:18px;position:relative;margin-bottom:7px}
.summary li:last-child{margin-bottom:0}
.summary li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--water)}

/* fact box */
.fact{border-left:3px solid var(--ink);background:var(--paper);padding:14px 16px;margin:26px 0;font-size:.88rem;line-height:1.8}
.fact .flabel{display:inline-block;font-size:.66rem;letter-spacing:.12em;color:var(--water);border:1px solid var(--water);padding:2px 7px;margin-right:8px;vertical-align:1px}

/* dialogue */
.talk{margin:24px 0}
.turn{display:flex;gap:10px;margin-bottom:16px;align-items:flex-start}
.turn.you{flex-direction:row-reverse}
.ava{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.ava svg{width:100%;height:100%;display:block}
.bubble{max-width:80%;padding:12px 15px;font-size:.93rem;line-height:1.75;border:1px solid var(--rule);border-radius:14px;background:var(--paper-2)}
.turn.you .bubble{background:var(--highlight);border-color:#cfe0d6;border-top-right-radius:3px}
.turn.master .bubble{background:var(--paper-2);border-top-left-radius:3px}
.bubble b{color:var(--water)}
.bubble .who{display:block;font-size:.68rem;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:5px}

.hero-ill{margin:0 0 30px;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.hero-ill svg{width:100%;height:auto;display:block}

/* figure */
figure{margin:30px 0}
figure svg{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--paper-2)}
figcaption{font-size:.73rem;color:var(--ink-soft);margin-top:8px;line-height:1.7}

/* tables */
.wrap table,article table{width:100%;border-collapse:collapse;font-size:.85rem;margin:24px 0;border:1px solid var(--ink)}
th,td{padding:11px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--ink)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.n{font-family:ui-monospace,monospace}
tbody tr:last-child td{border-bottom:none}
tbody tr.mark{background:var(--highlight)}

/* ad card */
.ad{border:1px solid var(--rule);background:var(--paper);padding:18px;margin:30px 0}
.ad-label{font-size:.68rem;letter-spacing:.12em;color:var(--pr);padding-bottom:12px}
.ad-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.ad-fig{flex:0 0 auto;width:100%;max-width:300px;margin:0 auto}
.ad-fig a{display:block;line-height:0}
.ad-fig a img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.ad-fig a:focus-visible{outline:2px solid var(--water);outline-offset:3px}
.ad-body{flex:1 1 260px;font-size:.9rem;line-height:1.75}
.ad-body a{color:var(--water)}
.cta{margin-top:12px;font-weight:600;line-height:1.6}
.cta a{color:var(--water);text-decoration:none;border-bottom:1px solid var(--water)}
.cta a:hover{background:var(--highlight)}
.cta a:focus-visible{outline:2px solid var(--water);outline-offset:3px}

/* calculator */
.calc{margin:36px 0 0;border:1px solid var(--ink);background:var(--paper-2)}
.calc-cap{display:flex;justify-content:space-between;align-items:baseline;padding:11px 15px;border-bottom:1px solid var(--ink);font-size:.72rem;letter-spacing:.12em;color:var(--ink-soft)}
.calc-body{padding:20px 15px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 12px;font-size:1rem;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);border-radius:0;font-family:inherit}
.field input{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
.field input:focus,.field select:focus{outline:2px solid var(--water);outline-offset:1px}
.hint{font-size:.72rem;color:var(--pr);margin-top:5px;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.result{border-top:1px solid var(--ink);padding:20px 15px;background:var(--highlight)}
.result-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.result-label{font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft)}
.result-num{font-size:2.4rem;font-weight:700;color:var(--water);line-height:1.2}
.result-unit{font-size:.88rem;color:var(--ink-soft)}
.result-sub{margin-top:10px;font-size:.85rem;line-height:1.9}
.result-sub b{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.verdict{margin-top:14px;padding:12px 14px;border-left:3px solid var(--water);background:var(--paper-2);font-size:.9rem;line-height:1.8}
.verdict.warn{border-left-color:var(--alert)}
.verdict b{font-family:ui-monospace,monospace}
table.cmp{margin-top:18px;border:1px solid var(--rule)}
table.cmp th,table.cmp td{padding:9px 11px}
table.cmp tr.me{background:var(--highlight);font-weight:600}
.note{padding:11px 15px;font-size:.72rem;color:var(--ink-soft);border-top:1px solid var(--ink);line-height:1.7}

/* entries (top) */
.entries{list-style:none}
.entries li{border-bottom:1px solid var(--rule)}
.entries li:first-child{border-top:1px solid var(--rule)}
.entries a{display:block;padding:18px 4px;color:var(--ink);text-decoration:none;transition:background .18s ease,padding .18s ease}
.entries a:hover,.entries a:focus-visible{background:var(--paper);padding-left:12px}
.entries .q{font-size:1rem;font-weight:600;line-height:1.55}
.entries .a{font-size:.84rem;color:var(--ink-soft);margin-top:4px;line-height:1.65}
.entries .noad{display:inline;font-size:.66rem;color:var(--water);letter-spacing:.06em;margin-left:8px;border:none;padding:0}

section{padding:56px 0;border-bottom:1px solid var(--rule)}
dl{display:grid;grid-template-columns:7em 1fr;gap:12px 18px;font-size:.9rem}
dt{color:var(--ink-soft);font-size:.78rem;letter-spacing:.06em;padding-top:3px}

.next{border:1px solid var(--rule);background:var(--paper);padding:18px;margin:34px 0 0;font-size:.9rem;line-height:1.8}
.next a{color:var(--water)}
.caption{font-size:.73rem;color:var(--ink-soft);line-height:1.7;margin-top:32px;padding-top:16px;border-top:1px solid var(--rule)}
footer{padding:36px 0 56px;font-size:.75rem;color:var(--ink-soft);text-align:center}
a{color:var(--water)}
a:focus-visible{outline:2px solid var(--water);outline-offset:3px}

@media (max-width:600px){
  .head-in{flex-direction:column;gap:3px;align-items:flex-start}
  .grid2{grid-template-columns:1fr}
  .result-num{font-size:2rem}
  dl{grid-template-columns:1fr;gap:4px 0}
  dd{padding-bottom:10px}
  section{padding:42px 0}
  .art-in{padding:38px 20px 52px}
  .bubble{max-width:82%;font-size:.9rem}
  .ad-body{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}