/* 売却手取りシミュレーター（スマホ優先。.ss-root の中だけに効かせる） */
.ss-root {
  --ss-ink: #1f2a33;
  --ss-sub: #5a6772;
  --ss-line: #d5dde3;
  --ss-bg: #ffffff;
  --ss-soft: #f4f7f9;
  --ss-main: #1f6f5c;
  --ss-main-ink: #ffffff;
  --ss-warn-bg: #fff6e0;
  --ss-warn-line: #e2b34a;
  --ss-err: #b3261e;
  color: var(--ss-ink);
  font-size: 16px;
  line-height: 1.7;
  max-width: 960px;
  margin: 0 auto;
}
.ss-root *, .ss-root *::before, .ss-root *::after { box-sizing: border-box; }
.ss-root [hidden] { display: none !important; }

.ss-banner {
  background: #ffe1e1; color: #8a1010; border: 2px dashed #c33;
  padding: 8px 12px; margin: 0 0 12px; font-weight: bold; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ss-card { background: var(--ss-bg); border: 1px solid var(--ss-line); border-radius: 12px; padding: 16px; }
.ss-title { font-size: 1.25em; margin: 0 0 8px; line-height: 1.5; }
.ss-lead, .ss-hint { color: var(--ss-sub); margin: 0 0 12px; }
.ss-hint { font-size: 0.875em; margin: 6px 0 0; }
.ss-progress { color: var(--ss-sub); font-size: 0.875em; margin: 0 0 8px; }

.ss-types { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ss-type {
  font-size: 1.25em; font-weight: bold; padding: 20px 12px; min-height: 72px;
  border: 2px solid var(--ss-main); border-radius: 12px; background: var(--ss-soft);
  color: var(--ss-main); cursor: pointer;
}
.ss-type:hover, .ss-type:focus-visible { background: var(--ss-main); color: var(--ss-main-ink); }

.ss-questions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ss-q { border: 1px solid var(--ss-line); border-radius: 10px; padding: 12px; margin: 0; min-width: 0; }
.ss-q legend { font-weight: bold; padding: 0 4px; }
.ss-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-choice { flex: 1 1 auto; min-width: 0; }
.ss-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-choice span {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; min-height: 48px;
  border: 1px solid var(--ss-line); border-radius: 8px; cursor: pointer; background: #fff;
}
.ss-choice input:checked + span { border: 2px solid var(--ss-main); background: #e6f2ee; font-weight: bold; }
.ss-choice input:checked + span::before { content: '✓'; margin-right: .35em; }
.ss-choice input:focus-visible + span { outline: 3px solid #7fb7a8; }
.ss-sub { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ss-num { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.ss-num input {
  font-size: 1em; width: 9em; min-width: 0; max-width: 100%; padding: 8px; min-height: 48px;
  border: 1px solid var(--ss-line); border-radius: 8px;
}
.ss-q > .ss-num { margin-bottom: 8px; }
.ss-check { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; min-height: 48px; }
.ss-check input { width: 20px; height: 20px; }
.ss-error { color: var(--ss-err); font-weight: bold; margin: 6px 0 0; }

.ss-nav, .ss-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ss-btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font-size: 1em; padding: 12px 16px; min-height: 48px; border-radius: 10px; border: 2px solid var(--ss-main);
}
.ss-btn-main { background: #e11d48; border-color:#e11d48; color: var(--ss-main-ink); font-weight: bold; flex: 1 1 100%; border-radius:3px; }
.ss-btn-sub { background: #fff; color: var(--ss-main); flex: 1 1 40%; }
.ss-nav .ss-btn-main { flex: 2 1 50%; }
.ss-nav .ss-btn-sub { flex: 1 1 25%; }

.ss-head { background: var(--ss-soft); border-radius: 10px; padding: 12px; text-align: center; }
.ss-head-label { margin: 0; font-weight: bold; }
.ss-head-value { margin: 4px 0 0; font-size: 1.75em; font-weight: bold; color: var(--ss-main); line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
.ss-result-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ss-details { margin-top: 12px; border: 1px solid var(--ss-line); border-radius: 10px; padding: 8px 12px; }
.ss-details summary { cursor: pointer; font-weight: bold; min-height: 48px; }
.ss-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.9375em; }
.ss-table th, .ss-table td { border-bottom: 1px solid var(--ss-line); padding: 6px 4px; vertical-align: top; }
.ss-table th { text-align: left; font-weight: normal; }
.ss-table td { text-align: right; overflow-wrap: anywhere; }
.ss-total th, .ss-total td { font-weight: bold; border-bottom: 2px solid var(--ss-ink); }

.ss-checks { background: var(--ss-warn-bg); border: 2px solid var(--ss-warn-line); border-radius: 10px; padding: 12px; }
.ss-checks h3 { margin: 0 0 6px; font-size: 1.0625em; }
.ss-checks ul { margin: 0; padding-left: 1.2em; }
.ss-checks li { margin: 4px 0; font-size: 0.9375em; }

.ss-compare { margin-top: 12px; }
.ss-compare h3 { font-size: 1.0625em; margin: 0 0 6px; }
.ss-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-compare-col { border: 1px solid var(--ss-line); border-radius: 10px; padding: 8px; text-align: center; min-width: 0; }
.ss-compare-col h4 { margin: 0; font-size: 0.9375em; }
.ss-compare-net { margin: 4px 0; font-weight: bold; color: var(--ss-main); overflow-wrap: anywhere; font-size:0.875em; }
.ss-compare-sub { margin: 0; font-size: 0.8125em; color: var(--ss-sub); }

.ss-disclaimer { font-size: 0.875em; color: var(--ss-sub); border-top: 1px solid var(--ss-line); padding-top: 8px; margin-top: 16px; }

.ss-root button, .ss-root input { font-family: inherit; }
.ss-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ss-font { font: inherit; min-height: 48px; padding: 8px 16px; border: 2px solid var(--ss-main); border-radius: 8px; background: #fff; color: var(--ss-main); cursor: pointer; }
.ss-font[aria-pressed=true] { background: #e6f2ee; font-weight: bold; }
.ss-font[aria-pressed=true]::before { content: '✓'; margin-right: .3em; }
.ss-root button:focus-visible, .ss-root a:focus-visible, .ss-root summary:focus-visible { outline: 3px solid #235bcb; outline-offset: 2px; }
.ss-live:empty { display: none; }
.ss-live, .ss-save-note { font-size: .875em; line-height: 1.7; }
.ss-management { margin-top: 16px; padding: 12px; border: 2px solid var(--ss-line); border-radius: 10px; background: var(--ss-soft); }
.ss-management h3 { margin: 0 0 8px; font-size: 1.125em; }
.ss-management p { margin: 0 0 8px; }
.ss-management ul { margin: 0; padding-left: 1.3em; }
.ss-management li { margin: 8px 0; overflow-wrap: anywhere; }
.ss-root[data-font-size=large] { font-size: 20px; }
.ss-root[data-font-size=large] .ss-compare-grid { grid-template-columns: 1fr; }

/* PC：2列 */
@media (min-width: 768px) {
  .ss-types { grid-template-columns: repeat(3, 1fr); }
  .ss-questions { grid-template-columns: 1fr 1fr; }
  .ss-result-grid { grid-template-columns: 1fr 1fr; }
  .ss-btn-main { flex: 2 1 auto; }
  .ss-btn-sub { flex: 1 1 auto; }
}

/* 印刷用（A4縦1枚）。結果表示中だけ body 直下に .ss-print-sheet が置かれる */
.ss-print-sheet { display: none; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html.ss-printing, html.ss-printing body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.ss-printing body > *:not(.ss-print-sheet) { display: none !important; }
  html.ss-printing .ss-print-sheet { display: block !important; max-width: none; font-size: 9pt; line-height: 1.45; }
  /* 本番の共通印刷指定によるsectionごとの強制改ページを、このシート内だけ解除。 */
  .ss-print-sheet section { break-before: auto !important; page-break-before: auto !important; break-after: auto !important; page-break-after: auto !important; break-inside: auto !important; page-break-inside: auto !important; }
  .ss-sheet { display: grid; grid-template-columns: 1fr 52mm; gap: 6mm; width: 190mm; }
  .ss-sheet-title { font-size: 13pt; margin: 0 0 3mm; }
  .ss-sheet .ss-banner { padding: 1mm 2mm; margin-bottom: 2mm; }
  .ss-sheet .ss-head { padding: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ss-sheet .ss-head-value { font-size: 18pt; }
  .ss-sheet h3 { font-size: 10pt; margin: 3mm 0 1mm; }
  .ss-sheet .ss-table { font-size: 8.5pt; margin-top: 0; }
  .ss-sheet .ss-table th, .ss-sheet .ss-table td { padding: 0.6mm 1mm; }
  .ss-sheet .ss-checks { margin-top: 3mm; padding: 2mm 3mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ss-sheet .ss-checks li { font-size: 8pt; margin: 0.5mm 0; }
  .ss-sheet .ss-compare-col { padding: 1.5mm; }
  .ss-sheet .ss-management { margin-top: 2mm; padding: 1.5mm 2mm; }
  .ss-sheet .ss-management h3 { font-size: 9pt; margin: 0 0 1mm; }
  .ss-sheet .ss-management p, .ss-sheet .ss-management li { font-size: 8pt; line-height: 1.35; margin: .5mm 0; }
  .ss-sheet .ss-disclaimer { font-size: 8.5pt; margin-top: 3mm; color: #000; }
  .ss-sheet-right { border-left: 1px solid #ccc; padding-left: 4mm; text-align: center; }
  .ss-sheet-map { width: 100%; height: auto; max-height: 55mm; object-fit: contain; }
  .ss-sheet-logo { width: 40mm; max-height: 20mm; object-fit: contain; margin-top: 3mm; }
  .ss-sheet-company { font-weight: bold; font-size: 10.5pt; margin: 2mm 0 1mm; }
  .ss-sheet-contact, .ss-sheet-urls { font-size: 8pt; margin: 0 0 2mm; overflow-wrap: anywhere; text-align: left; }
  .ss-sheet-qr { width: 30mm; height: 30mm; margin-top: 2mm; }
  .ss-sheet-qrcap { font-size: 8pt; margin: 0 0 3mm; }
}