:root{
  --acc:#065f46; --acc2:#047857; --ink:#111827; --mut:#6b7280;
  --line:#e5e7eb; --bg:#f9fafb; --soft:#ecfdf5;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }
header.top{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.top-in{ max-width:1020px; margin:0 auto; padding:12px 18px; display:flex; align-items:center; gap:10px; }
.logo-badge{ width:34px; height:34px; border-radius:9px; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex:none; }
.brand{ font-weight:700; font-size:16.5px; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.top-in nav{ margin-left:auto; display:flex; gap:16px; font-size:14px; }
.top-in nav a{ color:var(--mut); }
.top-in nav a:hover{ color:var(--acc); text-decoration:none; }
main{ max-width:1020px; margin:0 auto; padding:28px 18px 70px; }
.hero h1{ font-size:31px; line-height:1.2; margin:8px 0 8px; letter-spacing:-.02em; }
.hero p.lead{ color:var(--mut); font-size:16.5px; max-width:640px; margin:0 0 8px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:24px; }
.tool-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:block; color:var(--ink); }
.tool-card:hover{ border-color:var(--acc); text-decoration:none; box-shadow:0 6px 24px rgba(6,95,70,.08); }
.tool-card .ic{ font-size:22px; }
.tool-card h3{ margin:8px 0 4px; font-size:17px; }
.tool-card p{ margin:0; color:var(--mut); font-size:14px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; }
.calc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:820px){ .calc-wrap{ grid-template-columns:1fr; } .hero h1{ font-size:26px; } }
label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
label:first-child{ margin-top:0; }
.field{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; }
.field:focus{ outline:2px solid var(--acc); border-color:transparent; }
select.field{ appearance:auto; }
.hint{ font-size:12px; color:var(--mut); margin-top:4px; }
.btn{ border:none; border-radius:10px; padding:12px 20px; font-weight:600; font:inherit; cursor:pointer; }
.btn-acc{ background:var(--acc); color:#fff; width:100%; margin-top:20px; }
.btn-acc:hover{ background:var(--acc2); }
.res-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14.5px; }
.res-row:last-child{ border-bottom:none; }
.res-row .k{ color:var(--mut); }
.res-row .v{ font-weight:600; text-align:right; }
.res-big{ background:var(--soft); border:1px solid #a7f3d0; border-radius:12px; padding:16px; margin-bottom:8px; }
.res-big .k{ font-size:13px; color:var(--acc); font-weight:600; }
.res-big .v{ font-size:24px; font-weight:700; color:var(--acc); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:10px; }
table.tbl th, table.tbl td{ border-bottom:1px solid var(--line); padding:7px 8px; text-align:right; }
table.tbl th:first-child, table.tbl td:first-child{ text-align:left; }
table.tbl th{ color:var(--mut); font-weight:600; }
.note{ font-size:12.5px; color:var(--mut); margin-top:14px; }
section.explain{ margin-top:26px; }
section.explain h2{ font-size:19px; margin:0 0 8px; }
section.explain p, section.explain li{ color:#374151; font-size:14.5px; }
.breadcrumb{ font-size:13px; color:var(--mut); margin-bottom:6px; }
.promo{ margin-top:28px; background:var(--acc); color:#fff; border-radius:16px; padding:24px; }
.promo h3{ margin:0 0 6px; font-size:18px; }
.promo p{ margin:0; color:#d1fae5; font-size:14.5px; }
footer{ border-top:1px solid var(--line); background:#fff; }
.foot-in{ max-width:1020px; margin:0 auto; padding:22px 18px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13.5px; color:var(--mut); }
.foot-in nav{ display:flex; gap:16px; margin-left:auto; }
canvas.chart{ width:100%; height:220px; }

/* === Premium responsive upgrade 2026-10-10 === */
.logo-img{ width:38px; height:38px; border-radius:10px; display:block; box-shadow:0 2px 10px rgba(6,95,70,.20); flex:none; }
header.top .top-in{ position:relative; }
.top-in nav.main-nav{ align-items:center; gap:4px; }
.top-in nav.main-nav a{ padding:8px 11px; border-radius:999px; font-weight:600; }
.top-in nav.main-nav a:hover{ background:var(--soft); color:var(--acc); }
.nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:12px; font-size:21px; line-height:1; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.nav-toggle:hover{ border-color:var(--acc); color:var(--acc); }
.hero{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:0 12px 34px rgba(17,24,39,.045); }
.hero h1{ margin-top:6px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--soft); color:var(--acc); border:1px solid #a7f3d0; border-radius:999px; padding:6px 11px; font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.tool-search{ margin-top:18px; width:100%; max-width:580px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:#f9fafb; font:inherit; font-size:16px; }
.tool-search:focus{ outline:2px solid var(--acc); background:#fff; border-color:transparent; }
.hero-points{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hero-points span{ background:#f9fafb; border:1px solid var(--line); color:#374151; border-radius:999px; padding:6px 10px; font-size:12.5px; font-weight:600; }
.card{ box-shadow:0 10px 28px rgba(17,24,39,.035); }
.tool-card{ transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tool-card:hover{ transform:translateY(-2px); }
.tool-card .ic{ width:46px; height:46px; border-radius:14px; background:var(--soft); display:flex; align-items:center; justify-content:center; }
.field{ font-size:16px; }
.btn{ min-height:48px; }
.btn-acc{ box-shadow:0 8px 18px rgba(6,95,70,.18); }
.res-big .v{ letter-spacing:-.02em; }
.faq{ margin-top:26px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 17px; margin-top:10px; }
.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin:8px 0 0; color:#374151; font-size:14.5px; }
.foot-tools{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:7px 14px; padding-top:2px; }
.foot-tools a{ color:var(--mut); font-size:13px; }
.foot-tools a:hover{ color:var(--acc); }
:focus-visible{ outline:3px solid rgba(4,120,87,.35); outline-offset:2px; }
@media (max-width: 820px){
  .top-in{ padding:10px 14px; gap:9px; }
  .brand{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; }
  .nav-toggle{ display:inline-flex; }
  .top-in nav.main-nav{ display:none; position:absolute; top:calc(100% + 8px); left:12px; right:12px; z-index:30; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 42px rgba(17,24,39,.14); padding:10px; flex-direction:column; align-items:stretch; gap:4px; margin-left:0; }
  .top-in nav.main-nav.open{ display:flex; }
  .top-in nav.main-nav a{ display:block; padding:12px 13px; border-radius:12px; background:#f9fafb; color:var(--ink); font-size:15px; }
  .top-in nav.main-nav a:hover{ background:var(--soft); }
  main{ padding:20px 14px 56px; }
  .hero{ padding:23px 20px; border-radius:18px; }
  .grid{ grid-template-columns:1fr; }
  .foot-in nav{ margin-left:0; }
}
@media (max-width: 420px){
  .brand{ max-width:48vw; }
  .logo-img{ width:34px; height:34px; }
}