/* =========================================================================
   DIY必要量シミュレーター — diy-pitari
   採寸メモ／方眼・工房の質感。落ち着いた工房系 teal(#1f7a6f) を1点アクセントに。
   方眼背景はCSS gradientで軽量に。数値は等幅(Roboto Mono)で「計算してる感」。
   a11y: ラベルとinput紐付け・WCAG AAコントラスト・prefers-reduced-motion対応。
   ========================================================================= */

:root{
  /* paper & ink */
  --paper:      #EEF0EA;   /* desk / outer */
  --sheet:      #FBFCF9;   /* card sheet (graph paper) */
  --sheet-deep: #F1F3ED;   /* recessed panel */
  --ink:        #20302C;   /* main text (workshop dark) */
  --ink-soft:   #4A5953;   /* secondary (AA on sheet) */
  --ink-faint:  #5E6B64;   /* tertiary/captions — AA 4.5:1 on sheet */
  --rule:       rgba(31,48,44,0.16);
  --rule-soft:  rgba(31,48,44,0.08);
  /* accent — workshop teal / petrol */
  --accent:     #1f7a6f;
  --accent-ink: #176055;   /* darker accent for small text (AA on sheet) */
  --accent-wash:rgba(31,122,111,0.08);
  /* graph grid line */
  --grid:       rgba(31,122,111,0.10);
  --grid-bold:  rgba(31,122,111,0.16);
  /* fonts */
  --f-gothic:"Zen Kaku Gothic New", system-ui, sans-serif;
  --f-mono:  "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  min-height:100vh;
  font-family:var(--f-gothic);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- app shell: phone-width sheet ---- */
.stage{
  min-height:100vh;
  display:flex; justify-content:center; align-items:flex-start;
  padding:0;
}
.sheet{
  position:relative; width:100%; max-width:440px; min-height:100vh;
  background:var(--sheet);
  /* 方眼（グラフペーパー）: 軽量なCSS gradient。5mm細線＋25mm太線。 */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
  background-size:
    20px 20px, 20px 20px,
    100px 100px, 100px 100px;
  background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 16px 44px -22px rgba(31,48,44,0.32);
}
@media(min-width:472px){
  .sheet{ min-height:calc(100vh - 48px); margin:24px 0; border-radius:8px; overflow:hidden; }
  .stage{ align-items:center; padding:0 12px; }
}

.wrap{ position:relative; z-index:1; padding:26px 22px 34px; }

/* ---- PR persistent bar ---- */
.pr-bar{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-gothic); font-size:11.5px; letter-spacing:0.06em;
  color:var(--ink-faint);
}
.pr-tag{
  font-weight:700; font-size:10px; letter-spacing:0.14em;
  color:var(--accent-ink);
  border:1px solid rgba(23,96,85,0.45);
  border-radius:3px; padding:1px 5px; background:var(--accent-wash);
}

/* ---- header ---- */
.head{ text-align:center; margin:18px 0 22px; }
.kicker{
  font-family:var(--f-gothic); font-size:11.5px; letter-spacing:0.2em;
  font-weight:600; color:var(--ink-faint);
}
h1.title{
  font-family:var(--f-gothic); font-weight:700; font-size:27px; line-height:1.34;
  color:var(--ink); letter-spacing:0.01em; margin:8px 0 0;
}
.tagline{
  font-family:var(--f-gothic); font-size:13.5px; color:var(--ink-soft);
  margin-top:12px; line-height:1.75;
}

/* ---- tabs ---- */
.tabs{
  display:flex; gap:0; margin:0 0 4px;
  background:var(--sheet-deep); border:1px solid var(--rule);
  border-radius:11px; padding:4px;
}
.tab-btn{
  flex:1; font-family:var(--f-gothic); font-weight:600; font-size:14px;
  color:var(--ink-soft); background:transparent; border:none; cursor:pointer;
  padding:11px 6px; border-radius:8px; letter-spacing:0.04em;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab-btn.active{
  color:#FBFCF9; background:var(--accent);
  box-shadow:0 4px 10px -5px rgba(31,122,111,0.6);
}
.tab-btn:not(.active):hover{ color:var(--accent-ink); background:rgba(31,122,111,0.06); }

/* ---- panels / fields ---- */
.panels{ margin-top:18px; }
.tab-panel.hidden{ display:none; }

.field-row{ margin:0 0 16px; }
.field-row label.lab{
  display:block; font-family:var(--f-gothic); font-size:13px; font-weight:600;
  color:var(--ink-soft); letter-spacing:0.04em; margin-bottom:7px;
}
.field-row .hint{
  display:block; font-family:var(--f-gothic); font-size:11.5px;
  color:var(--ink-faint); margin-top:6px; line-height:1.6;
}
.input-unit{ position:relative; display:flex; align-items:center; }
.field{
  width:100%; font-family:var(--f-mono); font-size:17px; color:var(--ink);
  background:var(--sheet); border:1.5px solid var(--rule); border-radius:9px;
  padding:13px 44px 13px 14px; outline:none;
  transition:border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance:none; appearance:none;
}
.field:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.field::placeholder{ color:var(--ink-faint); font-family:var(--f-mono); }
.unit-suffix{
  position:absolute; right:14px; font-family:var(--f-mono); font-size:13px;
  color:var(--ink-faint); pointer-events:none;
}
select.field{ padding-right:14px; cursor:pointer; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* toggle (checkbox switch row) */
.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--sheet-deep);
  border:1px solid var(--rule); border-radius:9px; margin:0 0 12px;
}
.toggle-row .tl{ font-family:var(--f-gothic); font-size:13px; color:var(--ink-soft); line-height:1.5; }
.toggle-row .tl small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:2px; }
.switch{ position:relative; flex:none; width:46px; height:26px; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  position:absolute; inset:0; background:var(--rule); border-radius:999px;
  transition:background .15s ease;
}
.switch .track::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  background:#FBFCF9; border-radius:50%; transition:transform .15s ease;
  box-shadow:0 1px 3px rgba(31,48,44,0.35);
}
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::before{ transform:translateX(20px); }
.switch input:focus-visible + .track{ box-shadow:0 0 0 3px var(--accent-wash); }

/* segmented control (coats / floor mode) */
.seg{
  display:flex; gap:0; background:var(--sheet-deep);
  border:1px solid var(--rule); border-radius:9px; padding:3px; margin-bottom:4px;
}
.seg label{
  flex:1; text-align:center; font-family:var(--f-gothic); font-size:13px;
  color:var(--ink-soft); padding:9px 4px; border-radius:7px; cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg input:checked + label{ background:var(--accent); color:#FBFCF9; font-weight:600; }
.seg input:focus-visible + label{ box-shadow:0 0 0 3px var(--accent-wash); }

.subfields.hidden{ display:none; }

/* ---- result ---- */
.result{ margin-top:22px; }
.rcard{
  background:var(--sheet);
  border:1.5px solid var(--accent);
  border-radius:14px; overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(31,48,44,0.5);
}
.rresult{ margin:0; padding:6px 0 0; }
.rrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:15px 20px;
}
.rrow + .rrow{ border-top:1px dashed var(--rule); }
.rk{ font-family:var(--f-gothic); font-size:13px; color:var(--ink-soft); margin:0; }
.rv{ margin:0; display:flex; align-items:baseline; gap:4px; }
.rnum{
  font-family:var(--f-mono); font-size:28px; font-weight:600; color:var(--accent-ink);
  letter-spacing:0.01em; line-height:1;
}
.runit{ font-family:var(--f-mono); font-size:14px; color:var(--ink-soft); }

.rdisclaim{
  font-family:var(--f-gothic); font-size:11.5px; line-height:1.75;
  color:var(--ink-faint); padding:14px 20px 4px; margin:0;
  border-top:1px solid var(--rule-soft);
}

.guide{
  font-family:var(--f-gothic); font-size:13.5px; line-height:1.85;
  color:var(--ink-faint); text-align:center;
  background:var(--sheet-deep); border:1px dashed var(--rule);
  border-radius:12px; padding:26px 22px;
}

/* ---- offers (affiliate) ---- */
.offers{ padding:16px 18px 20px; background:var(--sheet-deep); border-top:1px solid var(--rule); }
.pr-inline{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:var(--f-gothic); font-size:11px; letter-spacing:0.04em; color:var(--ink-faint);
}
.offer-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; font-family:var(--f-gothic);
  background:var(--sheet); border:1.5px solid var(--rule); border-radius:10px;
  padding:13px 15px; margin-bottom:9px;
  transition:border-color .14s ease, background .14s ease, transform .12s ease;
}
.offer-link:last-child{ margin-bottom:0; }
.offer-link:hover{ border-color:var(--accent); background:#FFFFFF; transform:translateY(-1px); }
.offer-label{ font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.45; }
.offer-go{ font-size:12.5px; color:var(--accent-ink); font-weight:600; white-space:nowrap; }

/* ---- footer ---- */
.site-foot{
  position:relative; z-index:1;
  padding:22px 22px 30px; border-top:1px solid var(--rule);
  background:var(--sheet-deep);
}
.site-foot p{
  font-family:var(--f-gothic); font-size:10.5px; line-height:1.85;
  color:var(--ink-faint); text-align:center; margin:0;
}
.site-foot p + p{ margin-top:6px; }
.site-foot .foot-links a{
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--rule);
}
.site-foot .foot-links a:hover{ color:var(--accent-ink); }

/* ---- legal pages ---- */
.legal{ max-width:680px; margin:0 auto; padding:30px 22px 52px; position:relative; z-index:1; }
.legal .home{ font-family:var(--f-gothic); font-size:13px; color:var(--ink-faint); text-decoration:none; }
.legal .home:hover{ color:var(--ink-soft); }
.legal h1{ font-family:var(--f-gothic); font-weight:700; font-size:26px; color:var(--ink); margin:16px 0 6px; line-height:1.4; }
.legal .lead{ font-family:var(--f-gothic); font-size:13px; color:var(--ink-faint); margin-bottom:24px; line-height:1.8; }
.legal h2{ font-family:var(--f-gothic); font-size:17px; color:var(--ink); font-weight:600; margin:28px 0 10px; }
.legal p, .legal li, .legal dd, .legal dt{ font-family:var(--f-gothic); font-size:14.5px; line-height:1.95; color:var(--ink-soft); }
.legal ul{ padding-left:1.2em; margin:8px 0; }
.legal a{ color:var(--accent-ink); }
.legal dl.info{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:10px 0; }
.legal dl.info dt{ color:var(--ink-faint); font-size:13px; }
.legal dl.info dd{ margin:0; color:var(--ink); }
.legal .meta{ font-family:var(--f-gothic); font-size:12.5px; color:var(--ink-faint); margin-top:34px; border-top:1px solid var(--rule); padding-top:16px; }

/* ---- a11y / motion ---- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}