/* 手取り見積くん — 棚の道具と同じ見た目。道具の画面は左に入力・右に答え */
:root { --fg:#1a1a1a; --muted:#666; --line:#ddd; --accent:#222; --bg:#fafafa; --err:#b00020; --ok:#1f5e1f; }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
       color:var(--fg); background:var(--bg); line-height:1.7; font-size:17px; }
.top { border-bottom:1px solid var(--line); background:#fff; }
.top-in { max-width:720px; margin:0 auto; padding:0 16px; display:flex; justify-content:space-between; align-items:center; }
.top-in.wide, .wrap.wide { max-width:1280px; }
.brand { display:block; padding:12px 0; font-weight:700; color:var(--fg); text-decoration:none; }
.top-link { color:var(--fg); font-size:.9rem; }
.wrap { max-width:720px; margin:0 auto; padding:28px 16px 64px; }
h1 { font-size:1.45rem; margin:0 0 12px; line-height:1.4; }
h1.hero { font-size:1.75rem; margin-top:12px; }
h2 { font-size:1.12rem; margin:0 0 12px; }
h3 { font-size:.98rem; margin:0 0 4px; }
.mt { margin-top:26px; }
.lead { color:var(--muted); margin:0 0 22px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 18px; margin-top:18px; }
.panel:first-child { margin-top:0; }
input[type=text], input[type=number], select, textarea {
  display:block; width:100%; margin-top:6px; padding:10px 11px; font-size:1rem; font-family:inherit;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--fg); }
input:focus, textarea:focus, select:focus { outline:2px solid #88a; border-color:#88a; }
textarea { line-height:1.8; resize:vertical; }
label { font-size:.9rem; font-weight:600; }
label.block { display:block; margin:14px 0 0; }
label.check { display:flex; gap:8px; align-items:center; margin-top:14px; font-weight:400; }
button, .btn { display:block; margin-top:18px; width:100%; padding:13px; font-size:1rem; font-weight:600; text-align:center; font-family:inherit;
  color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:8px; cursor:pointer; text-decoration:none; }
button.sub, .btn.sub { background:#fff; color:var(--accent); }
button.small { display:inline-block; width:auto; margin:0; padding:9px 14px; font-size:.9rem; }
.note { color:var(--muted); font-size:.84rem; margin:8px 0 0; }
.muted { color:var(--muted); font-size:.85rem; }
.msg { margin:14px 0 0; padding:12px 14px; border-radius:8px; font-size:.92rem; }
.msg.ng { background:#fdeef0; border:1px solid #f0c4cb; color:var(--err); }
.warn-box { background:#fff8e6; border:1px solid #f0dca8; border-radius:8px; padding:11px 13px; font-size:.9rem; }
.safe { margin:0 0 8px; padding:10px 14px; background:#eef7ee; border:1px solid #bcd9bc; border-radius:8px; color:var(--ok); font-weight:600; font-size:.95rem; }
dl.sum { margin:0; display:grid; grid-template-columns:7em 1fr; gap:10px 14px; }
dl.sum dt { color:var(--muted); }
dl.sum dd { margin:0; }
ul.plain { margin:0; padding-left:1.2em; }
.code { font-family:ui-monospace, Consolas, monospace; font-size:1.2rem; letter-spacing:.04em; padding:14px; background:#f4f6f9; border-radius:8px; text-align:center; word-break:break-all; }
code { font-family:ui-monospace, Consolas, monospace; background:#f4f6f9; padding:1px 4px; border-radius:4px; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:0 16px 40px; line-height:2; }
footer a { color:var(--muted); }

/* ---- 道具の画面 ---- */
.work { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.work-form, .work-view { min-width:0; }
.settings { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-top:10px; align-items:end; }
.settings-sub { display:contents; }
.add { display:flex; gap:8px; align-items:center; margin-top:6px; }
.add input { margin:0; flex:1; min-width:0; }
.more { margin-top:14px; }
.more summary { cursor:pointer; font-size:.9rem; font-weight:600; }
#lic-forget { margin-top:10px; }
.work-view { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; }
@media (min-width:1000px) {
  .work { grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
  .work-view { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
}
@media (max-width:480px) {
  dl.sum { grid-template-columns:1fr; gap:2px 0; }
  dl.sum dd { margin-bottom:10px; }
}

/* ---- 答え ---- */
.big-label { margin:0; color:var(--muted); font-size:.9rem; }
.big { margin:0; font-size:2.1rem; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.big-sub { margin:0 0 12px; font-size:.95rem; font-weight:600; min-height:1.4em; }
table.calc { width:100%; border-collapse:collapse; font-size:.93rem; }
table.calc th, table.calc td { padding:7px 4px; border-bottom:1px solid var(--line); font-weight:400; }
table.calc th { text-align:left; }
table.calc td { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.calc tr.sum th, table.calc tr.sum td { font-weight:700; }
.mt-s { margin-top:20px; }
.presets { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.add { flex-wrap:wrap; }
button:disabled { opacity:.5; cursor:default; }
#roundUnit-wrap select { margin-top:6px; }
input[type=date] { display:block; width:100%; margin-top:6px; padding:9px 10px; font-size:1rem; font-family:inherit; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--fg); }
#presets-left button { margin-left:8px; }
label:has(#stance) { grid-column:1 / -1; }