/*
 * tool-ui: thunderblog 自作ツール本体の共通部品（色・文字・余白・入力欄・ボタン・結果表示・カード）
 * 自動生成コピー。各ツール側で直接編集しない（正本は site-chrome/src/tool-ui.css）。
 * クラスはすべて tu- 接頭辞。tools.json で "tool_ui": true にしたツールだけへ配る。
 * 各ツールの CSS はこのファイルの後に読み込み、ツール固有の部品だけを書く。
 */

/* ── 設計値（色はブログのテーマカラー4色が基準） ── */
:root {
  --tu-key: #1e4f73;        /* キー: 見出し・強調 */
  --tu-main: #2f6fa3;       /* メイン: ボタン・リンク・フォーカス */
  --tu-sub: #eaf4fa;        /* サブ: 淡い面 */
  --tu-accent: #c53b2f;     /* アクセント: 危険・エラー */
  --tu-ink: #1d2b36;        /* 本文 */
  --tu-muted: #566775;      /* 補足（白地でコントラスト比 5.5 以上） */
  --tu-line: #d3dfe8;       /* 罫線（飾り） */
  --tu-control-line: #6f8597; /* 入力欄の枠（白地で 3:1 以上） */
  --tu-bg: #f4f7fa;         /* ページ背景 */
  --tu-surface: #ffffff;    /* カード面 */
  --tu-warn-bg: #fdf5e4;
  --tu-warn-line: #ecd39a;
  --tu-warn-ink: #7a4f00;
  --tu-ok-bg: #edf6f0;
  --tu-ok-line: #b9dcc4;
  --tu-ok-ink: #24613a;
  --tu-danger-bg: #fbeeec;
  --tu-danger-line: #efc4bf;
  --tu-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --tu-radius-card: 10px;
  --tu-radius-control: 6px;
  --tu-radius-chip: 4px;
  --tu-width: 720px;
  --tu-gutter: 16px;
  --tu-focus: 0 0 0 3px rgba(47, 111, 163, .28);
}

/* ── ページ全体 ── */
.tu-page {
  margin: 0;
  background: var(--tu-bg);
  color: var(--tu-ink);
  font-family: var(--tu-font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.tu-page *,
.tu-page *::before,
.tu-page *::after {
  box-sizing: border-box;
}

/* :where() で詳細度を 0 にして、共通ヘッダー・フッター（.tbc-*）の配色を上書きしない */
:where(.tu-page) a {
  color: var(--tu-main);
}

:where(.tu-page) :focus-visible {
  outline: 2px solid var(--tu-main);
  outline-offset: 2px;
}

/* ── ツール名の帯（左寄せ。ヘッダー直下に置く） ── */
.tu-hero {
  background: var(--tu-surface);
  border-bottom: 1px solid var(--tu-line);
}

.tu-hero-inner {
  max-width: var(--tu-width);
  margin: 0 auto;
  padding: 28px var(--tu-gutter) 24px;
}

.tu-hero h1 {
  margin: 0 0 8px;
  color: var(--tu-key);
  font-size: clamp(1.45rem, 4.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
}

.tu-hero p {
  margin: 0;
  max-width: 36em;
  color: var(--tu-muted);
  font-size: .95rem;
}

/* ── 本文の幅 ── */
.tu-container {
  max-width: var(--tu-width);
  margin: 0 auto;
  padding: 24px var(--tu-gutter) 48px;
}

/* ── カード: 入力と結果だけに使う（読み物は .tu-section） ── */
.tu-card {
  background: var(--tu-surface);
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-card);
  padding: 24px;
  margin: 0 0 20px;
}

.tu-card-title {
  margin: 0 0 18px;
  color: var(--tu-key);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 結果カードは上辺をメイン色で縁取り、入力カードと見分ける */
.tu-card--result {
  border-top: 4px solid var(--tu-main);
}

/* ── 読み物の節（使い方・表・FAQ・関連リンク） ── */
.tu-section {
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--tu-line);
}

.tu-section-title {
  margin: 0 0 14px;
  color: var(--tu-key);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
}

.tu-note {
  margin: 10px 0 0;
  color: var(--tu-muted);
  font-size: .82rem;
}

/* ── 入力欄 ── */
.tu-field {
  margin: 0 0 18px;
}

.tu-field label,
.tu-field > legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--tu-ink);
  font-size: .9rem;
  font-weight: 700;
}

/* 直下の入力欄だけを装飾する（単位付きの複合入力などツール固有の部品は各ツールで書く） */
.tu-field > select,
.tu-field > input[type="number"],
.tu-field > input[type="text"] {
  /* display は指定しない（ツール側で出し入れする入力欄の display:none を打ち消さないため） */
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--tu-control-line);
  border-radius: var(--tu-radius-control);
  background-color: var(--tu-surface);
  color: var(--tu-ink);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}

.tu-field > select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23566775' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.tu-field > select:focus,
.tu-field > input:focus {
  border-color: var(--tu-main);
  box-shadow: var(--tu-focus);
}

.tu-hint {
  display: block;
  margin: 6px 0 0;
  color: var(--tu-muted);
  font-size: .8rem;
  line-height: 1.6;
}

/* ── ボタン ── */
.tu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--tu-radius-control);
  background: var(--tu-main);
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  /* <a> に付けたとき（「練習画面へ戻る」などのリンク）も下線を出さず、ボタンと同じ見た目にする */
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}

.tu-btn:hover {
  background: var(--tu-key);
}

.tu-btn:focus-visible {
  box-shadow: var(--tu-focus);
}

.tu-btn:active {
  transform: translateY(1px);
}

.tu-btn svg {
  flex-shrink: 0;
}

/* 補助ボタン（リセット・コピーなど）。白地に枠線 */
.tu-btn--secondary {
  border: 1px solid var(--tu-control-line);
  background: var(--tu-surface);
  color: var(--tu-key);
}

.tu-btn--secondary:hover {
  border-color: var(--tu-main);
  background: var(--tu-sub);
}

.tu-btn--small {
  min-height: 40px;
  padding: 8px 16px;
  font-size: .92rem;
}

.tu-btn--block {
  display: flex;
  width: 100%;
  margin-top: 6px;
}

/* ── 結果表示: 主役の値を大きく、式と補足を下に ── */
.tu-result {
  margin: 0 0 16px;
  padding: 18px 20px;
  border-radius: var(--tu-radius-control);
  background: var(--tu-sub);
}

.tu-result-label {
  margin: 0 0 2px;
  color: var(--tu-key);
  font-size: .85rem;
  font-weight: 700;
}

.tu-result-value {
  margin: 0 0 6px;
  color: var(--tu-key);
  font-size: clamp(2.2rem, 9vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tu-result-note {
  margin: 0;
  color: var(--tu-muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* 補助の数値（計算値・実電流など）。dl/dt/dd で書く */
.tu-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.tu-stat {
  padding: 10px 14px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-control);
}

.tu-stat-label {
  margin: 0;
  color: var(--tu-muted);
  font-size: .78rem;
}

.tu-stat-value {
  margin: 0;
  color: var(--tu-ink);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── お知らせ枠: JS が .tu-alerts の中へ .alert と種類（.alert-warn / -info / -danger）を出す ── */
.tu-alerts:empty {
  display: none;
}

.tu-alerts .alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--tu-line);
  border-left-width: 4px;
  border-radius: var(--tu-radius-control);
  font-size: .88rem;
  line-height: 1.65;
}

.tu-alerts .alert-warn {
  background: var(--tu-warn-bg);
  border-color: var(--tu-warn-line);
  color: var(--tu-warn-ink);
}

.tu-alerts .alert-info {
  background: var(--tu-ok-bg);
  border-color: var(--tu-ok-line);
  color: var(--tu-ok-ink);
}

.tu-alerts .alert-danger {
  background: var(--tu-danger-bg);
  border-color: var(--tu-danger-line);
  border-left-color: var(--tu-accent);
  color: #8e2219;
}

.tu-alerts .alert-icon {
  flex-shrink: 0;
  line-height: 1.65;
}

/* ── 手順（本当に順番があるものだけ。ol で書く） ── */
.tu-steps {
  counter-reset: tu-step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tu-steps li {
  counter-increment: tu-step;
  position: relative;
  margin: 0;
  padding: 0 0 16px 44px;
  color: var(--tu-muted);
  font-size: .92rem;
}

.tu-steps li:last-child {
  padding-bottom: 0;
}

.tu-steps li::before {
  content: counter(tu-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--tu-main);
  border-radius: 50%;
  color: var(--tu-main);
  font-size: .85rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* 番号の間を縦線でつなぎ、流れを見せる */
.tu-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 4px;
  width: 2px;
  background: var(--tu-line);
}

.tu-steps strong {
  display: block;
  color: var(--tu-ink);
  font-size: 1rem;
}

/* ── 表 ── */
.tu-table-wrap {
  overflow-x: auto;
}

.tu-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--tu-surface);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.tu-table th,
.tu-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--tu-line);
  text-align: left;
  vertical-align: middle;
}

.tu-table th {
  background: var(--tu-sub);
  color: var(--tu-key);
  font-size: .82rem;
  font-weight: 700;
}

/* ── よくある質問（details/summary） ── */
.tu-faq-item {
  border-bottom: 1px solid var(--tu-line);
}

.tu-faq-item:first-child {
  border-top: 1px solid var(--tu-line);
}

.tu-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  color: var(--tu-ink);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.tu-faq-item summary::-webkit-details-marker {
  display: none;
}

.tu-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--tu-main);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.tu-faq-item[open] summary::after {
  content: "−";
}

.tu-faq-answer {
  margin: 0;
  padding: 0 0 16px;
  color: var(--tu-muted);
  font-size: .92rem;
}

/* ── 関連リンク ── */
.tu-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tu-links li + li {
  margin-top: 8px;
}

.tu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--tu-line);
  border-radius: var(--tu-radius-control);
  background: var(--tu-surface);
  color: var(--tu-ink);
  text-decoration: none;
  transition: border-color .15s;
}

.tu-link::after {
  content: "›";
  margin-left: auto;
  color: var(--tu-main);
  font-size: 1.3rem;
  line-height: 1;
}

.tu-link:hover {
  border-color: var(--tu-main);
}

.tu-link-title {
  display: block;
  color: var(--tu-key);
  font-weight: 700;
  line-height: 1.5;
}

.tu-link-desc {
  display: block;
  color: var(--tu-muted);
  font-size: .82rem;
  line-height: 1.6;
}

/* ── SNS シェア ── */
.tu-share {
  max-width: var(--tu-width);
  margin: 0 auto;
  padding: 8px var(--tu-gutter) 40px;
  text-align: center;
}

.tu-share-title {
  margin: 0 0 12px;
  color: var(--tu-muted);
  font-size: .85rem;
}

.tu-share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tu-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--tu-radius-control);
  color: #ffffff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/* 白文字で 4.5:1 以上になるよう、各サービスの色を少し暗くしている */
.tu-share-btn:hover {
  filter: brightness(.88);
}

.tu-share-btn--x { background: #000000; }
.tu-share-btn--facebook { background: #1462c9; }
.tu-share-btn--line { background: #04803a; }
.tu-share-btn--hatena { background: #0072a0; }

.tu-share-hatena {
  font-weight: 900;
  font-style: italic;
}

/* ── スマホ幅 ── */
@media (max-width: 480px) {
  .tu-hero-inner {
    padding: 22px var(--tu-gutter) 18px;
  }

  .tu-card {
    padding: 18px 16px;
  }
}

/* 動きを減らす設定の人には移動・変化のアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .tu-page *,
  .tu-page *::before,
  .tu-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .tu-page {
    background: #ffffff;
  }

  .tu-share {
    display: none;
  }
}