/* 計算機 3 本の見た目（中身の HTML と JS は前のサイトのまま。ここで新しいサイトの見た目に合わせる） */
.tool-app { --ok: #E3F3E6; --ok-ink: #1F5E2E; --no: #FBE6E2; --no-ink: #8A2F22; --maybe: #FFF0C2; --maybe-ink: #6B4D00; padding-bottom: 72px; }
.tool-app .shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.tool-app a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.tool-app .hero { padding-top: 22px; padding-bottom: 26px; }
.tool-app .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 6px; }
.tool-app h1 { font-size: 30px; line-height: 1.35; margin: 4px 0 14px; max-width: 24em; letter-spacing: .01em; }
@media (min-width: 720px) { .tool-app h1 { font-size: 42px; } }
.tool-app .lead { font-size: 17px; color: var(--ink-2); max-width: 46em; line-height: 1.9; margin: 0; }
.tool-app .notice { margin-top: 18px; max-width: 52em; padding: 14px 18px; background: var(--yellow-soft); border: 2px solid var(--ink); border-radius: 14px; font-size: 14.5px; line-height: 1.8; }
.tool-app .grid, .tool-app .layout { display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .tool-app .grid, .tool-app .layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 22px; } }
.tool-app .panel, .tool-app .docs { background: var(--white); border: 2px solid var(--ink); border-radius: 18px; padding: 20px; }
@media (min-width: 720px) { .tool-app .panel, .tool-app .docs { padding: 26px; } }
.tool-app .results, .tool-app .result { box-shadow: 6px 6px 0 var(--yellow); }
@media (min-width: 900px) { .tool-app .results, .tool-app .result { position: sticky; top: 20px; } }
.tool-app .panel-head, .tool-app .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 18px; margin-bottom: 18px; }
.tool-app .panel-head h2, .tool-app .section-head h2, .tool-app .results h2, .tool-app .result h2, .tool-app .sources h2, .tool-app .docs h2, .tool-app .faq-section h2 { font-size: 22px; line-height: 1.4; margin: 0; }
.tool-app .panel-head > p, .tool-app .section-head > span, .tool-app .panel-actions { color: var(--ink-3); font-size: 13px; }
.tool-app .panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tool-app button, .tool-app .secondary { font: inherit; font-weight: 800; font-size: 14px; min-height: 40px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; }
.tool-app button:hover { background: var(--yellow); }
.tool-app .remove-row { border-color: var(--line-2); color: var(--no-ink); }
.tool-app input, .tool-app select { font: inherit; font-size: 17px; color: var(--ink); }
.tool-app input[type="number"], .tool-app input[type="text"], .tool-app input[type="search"], .tool-app select { width: 100%; min-height: 46px; padding: 8px 12px; border: 2px solid var(--line-2); border-radius: 10px; background: var(--white); }
.tool-app input:focus, .tool-app select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px var(--yellow); }
.tool-app input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); flex: none; margin-top: 5px; }
/* 医療費控除 */
.tool-app .field-block { padding: 16px; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 14px; }
.tool-app .field-block label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.tool-app .field-block label span, .tool-app .expense-row label > span, .tool-app .two-fields label > span, .tool-app .search > span { display: block; font-size: 12.5px; color: var(--ink-3); }
.tool-app .money-input, .tool-app .money { display: flex; align-items: center; gap: 8px; }
.tool-app .money-input span, .tool-app .money b { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.tool-app .subhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 14px; margin: 26px 0 10px; }
.tool-app .subhead h3, .tool-app .group h3 { margin: 0; font-size: 18px; }
.tool-app .subhead p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.tool-app .expense-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; border-bottom: 1.5px dashed var(--line-2); }
@media (min-width: 640px) { .tool-app .expense-row { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.tool-app .check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 12px; font-size: 14.5px; line-height: 1.7; margin: 14px 0; }
.tool-app .check small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.tool-app .two-fields, .tool-app .fields { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .tool-app .two-fields, .tool-app .fields { grid-template-columns: 1fr 1fr; } .tool-app .fields.one { grid-template-columns: 1fr; } }
.tool-app .input-note { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border-left: 4px solid var(--yellow); padding: 10px 12px; margin: 14px 0 0; border-radius: 0 10px 10px 0; line-height: 1.8; }
.tool-app .result-card { border-top: 1.5px dashed var(--line-2); padding: 16px 0; }
.tool-app .result-card > span { display: block; font-size: 13px; color: var(--ink-3); }
.tool-app .result-card > strong { display: block; font-size: 30px; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.tool-app dl { margin: 0; }
.tool-app dl div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.tool-app dt { color: var(--ink-3); }
.tool-app dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tool-app dd small, .tool-app dt small { display: block; font-size: 11.5px; color: var(--ink-3); }
.tool-app .verdict { padding: 14px; border-radius: 12px; background: var(--yellow-soft); border: 1.5px solid var(--ink); font-size: 15px; line-height: 1.8; }
.tool-app .verdict:empty { display: none; }
.tool-app .caution, .tool-app .result-note { font-size: 12.5px; color: var(--ink-3); border-top: 1.5px dashed var(--line-2); padding-top: 12px; margin-top: 14px; line-height: 1.8; }
.tool-app .faq-section, .tool-app .faq { padding-top: 48px; }
.tool-app .search { display: block; margin: 14px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.tool-app .search input { margin-top: 5px; }
.tool-app .faq-list, .tool-app #faq-list { display: grid; gap: 12px; }
@media (min-width: 720px) { .tool-app .faq-list, .tool-app #faq-list { grid-template-columns: 1fr 1fr; } }
.tool-app .faq-item { background: var(--white); border: 1.5px solid var(--line-2); border-radius: 14px; padding: 16px; }
.tool-app .faq-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tool-app .faq-item h3 { margin: 0; font-size: 16px; line-height: 1.5; }
.tool-app .faq-item p { font-size: 14px; color: var(--ink-2); margin: 8px 0; line-height: 1.8; }
.tool-app .faq-item a { font-size: 12.5px; }
.tool-app .status { white-space: nowrap; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 800; background: var(--paper-2); }
.tool-app .status-対象 { background: var(--ok); color: var(--ok-ink); }
.tool-app .status-対象外 { background: var(--no); color: var(--no-ink); }
.tool-app .status-条件付き { background: var(--maybe); color: var(--maybe-ink); }
.tool-app .sources { margin-top: 48px; }
.tool-app .sources ul, .tool-app .docs ul { padding-left: 1.3em; }
.tool-app .sources li, .tool-app .docs li { margin: 6px 0; }
.tool-app .source-note, .tool-app .sources p, .tool-app .updated { font-size: 12.5px; color: var(--ink-3); }
/* 生命保険料控除 */
.tool-app .special { display: flex; gap: 10px; align-items: flex-start; background: var(--yellow-soft); border: 1.5px solid var(--ink); padding: 14px; border-radius: 12px; margin: 18px 0; }
.tool-app .special small { display: block; color: var(--ink-2); margin-top: 2px; font-size: 12.5px; }
.tool-app .group { padding-top: 18px; border-top: 1.5px dashed var(--line-2); margin-top: 18px; }
.tool-app .fields label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--ink-3); }
.tool-app .fields label input { grid-column: 1; }
.tool-app .fields label span { grid-column: 2; grid-row: 2; color: var(--ink-3); }
.tool-app .big { display: block; font-size: 40px; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.tool-app .cap { background: var(--yellow-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }
.tool-app .subtotal { font-size: 12.5px; }
/* 賞与の社会保険料 */
.tool-app .calculator > label:not(.check) { display: block; margin: 18px 0; }
.tool-app .calculator > label > strong { display: block; font-size: 15px; margin-bottom: 6px; }
.tool-app .calculator small { display: block; color: var(--ink-3); margin-top: 5px; font-size: 12.5px; line-height: 1.7; }
.tool-app .total { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 16px; background: var(--yellow-soft); border: 1.5px solid var(--ink); border-radius: 14px; }
.tool-app .total strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.tool-app .results dl { margin: 16px 0; }
.tool-app .bases { background: var(--paper); border-radius: 12px; padding: 8px 14px; font-size: 14px; }
.tool-app .bases p { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.tool-app .cap-note { font-size: 13.5px; color: var(--ink-2); }
.tool-app .warning { background: var(--yellow-soft); padding: 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.8; }
.tool-app .docs { margin-top: 28px; }
.tool-app .docs h2 { margin-top: 26px; }
.tool-app .docs h2:first-child { margin-top: 0; }
.tool-app .docs p { line-height: 1.9; }
.tool-app .method-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .tool-app .method-grid { grid-template-columns: 1fr 1fr; } }
.tool-app .method-grid > div { border: 1.5px solid var(--line-2); border-radius: 12px; padding: 14px; background: var(--paper); }
.tool-app .method-grid h3 { margin: 0 0 4px; font-size: 16px; }
.tool-app .method-grid p { margin: 0; font-size: 14px; }
/* タメラボ道具箱: 道具の上の「◯年分の決まりで計算しています」と、古い年の帯（10/25） */
.tool-period { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0 0; padding: 10px 14px; background: var(--white); border: 2px solid var(--ink); border-left-width: 8px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; }
.tool-period span { font-size: 12.5px; color: var(--ink-3); }
.tool-old { margin: 10px 0 0; padding: 12px 14px; background: var(--no, #FBE6E2); border: 2px solid var(--ink); border-radius: 12px; font-size: 15px; line-height: 1.7; }
.tool-old a { font-weight: 800; color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* 道具の見出し: 小さいかな・長音・句読点を行の頭に置かない（10/25 番頭。言葉の切れ目は build.py の <wbr> と .ph の keep-all） */
.tool-app h1 { line-break: strict; }
/* スマホの幅では 1 文字ぶん小さく: 「セルフメディケーション、」（12 字）が 1 行に入らないと、はみ出し止めの
   overflow-wrap: anywhere が strict より先に効き、「、」が行の頭に来る（375 で見つかった） */
@media (max-width: 419px) { .tool-app h1 { font-size: 28px; } }