/* 見積りツール・信書チェッカー専用スタイル（配色は style.css の共通トークンを再利用） */
.tool-wrap { max-width: 780px; margin: 0 auto; padding: 56px 20px 90px; }

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.tab-btn {
  flex: 1;
  padding: 14px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: .02em;
  font-family: "Noto Sans JP", sans-serif;
}
.tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--stamp);
}
.panel { display: none; }
.panel.active { display: block; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  margin-bottom: 20px;
}
.card h1 { font-size: 21px; margin: 0 0 8px; font-family: "Shippori Mincho", serif; font-weight: 800; }
.card .lead { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 22px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 18px 0 6px;
  color: var(--ink);
}
label:first-of-type { margin-top: 0; }
select, input[type=number] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
}
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

.tool-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 30px;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
  font-family: "Noto Sans JP", sans-serif;
}
.tool-btn:hover { opacity: .88; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 700; font-size: 12px; }
tr.cheapest td { font-weight: 700; }
.badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--stamp);
  color: var(--white);
  margin-left: 6px;
}
.note { font-size: 12px; color: var(--ink-soft); margin-top: 14px; }

.result-box {
  margin-top: 20px;
  padding: 18px;
  border-radius: 6px;
  display: none;
}
.result-box.ok { background: #EEF6F1; border: 1px solid #1F6F4A; }
.result-box.warn { background: #FBEDEB; border: 1px solid var(--stamp); }
.result-title { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.result-title.ok { color: #1F6F4A; }
.result-title.warn { color: var(--stamp); }

.cta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.cta a { color: var(--ink); font-weight: 700; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
  .tool-wrap { padding: 32px 16px 60px; }
  .card { padding: 20px; }
  .card h1 { font-size: 18px; }
  .tab-btn { font-size: 13px; padding: 12px 6px; }
  .row { flex-direction: column; gap: 0; }
  table { min-width: 620px; }
  .tool-btn { width: 100%; text-align: center; }
}