/*
 * 周波数発生器 固有の見た目。
 * 色・角丸・見出しの帯・本文の幅は /site-chrome/tool-ui.css（全ツール共通）の値を使う。
 * 年配の方向けに文字（17px 以上）とボタン（52px 以上）を大きくしているので、
 * ページ全体の部品（.tu-page）は使わず、.tg-page で文字の大きさを決める。
 */

/* ===== Design tokens（共通の値を、このツールの名前で使う） ===== */
.tg-page {
  --tg-key:     var(--tu-key);
  --tg-main:    var(--tu-main);
  --tg-sub:     var(--tu-sub);
  --tg-accent:  var(--tu-accent);
  --tg-ink:     var(--tu-ink);
  --tg-muted:   var(--tu-muted);
  --tg-line:    var(--tu-line);
  --tg-panel:   var(--tu-surface);
  --tg-radius:  var(--tu-radius-card);
  /* 年配の方でも指で押しやすいボタンの最小の高さ */
  --tg-tap:     52px;

  min-height: 100vh;
  background: var(--tu-bg);
  color: var(--tg-ink);
  font-family: var(--tu-font);
  /* 本文の文字は 17px 以上（補足の小さい文字も 15px より小さくしない） */
  font-size: 17px;
  line-height: 1.7;
  color-scheme: light;
}

.tg-page *, .tg-page *::before, .tg-page *::after { box-sizing: border-box; }
.tg-page [hidden] { display: none !important; }
/* キーボード操作中のフォーカス線（ほかのツールと同じ見た目） */
.tg-page :focus-visible { outline: 2px solid var(--tg-main); outline-offset: 2px; }
.tg-page button,
.tg-page input { font: inherit; }

/* ===== 見出しの帯（共通の .tu-hero）。説明が2段落あるので、段落のあいだを少し空ける ===== */
/* 共通の帯の説明文は小さめなので、このツールの本文の大きさ（17px 以上）に戻す */
.tg-page .tu-hero p { font-size: 17px; }
.tg-page .tu-hero p + p { margin-top: 6px; }
.tg-noscript {
  padding: 12px 14px;
  border: 1px solid var(--tu-danger-line);
  border-left: 4px solid var(--tg-accent);
  border-radius: var(--tu-radius-control);
  background: var(--tu-danger-bg);
  color: #8e2219;
  font-weight: 700;
}

/* ===== 注意書き（最初から見える） ===== */
.tg-caution {
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--tg-line);
  border-left: 4px solid var(--tg-accent);
  border-radius: var(--tu-radius-control);
  background: var(--tg-panel);
}
.tg-caution ul { margin: 0; padding-left: 1.2em; }
.tg-caution li + li { margin-top: 4px; }
.tg-earphone-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--tg-main);
}

/* ===== Boxes ===== */
.tg-box {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  background: var(--tg-panel);
}
.tg-step-title,
.tg-box-title { margin: 0 0 12px; font-size: 1.3rem; color: var(--tg-key); }
.tg-box > p { margin: 0 0 12px; }
.tg-note { margin: 10px 0 0; color: var(--tg-muted); }

/* ボタンの文字の指定は、どれも .tg-page を前に付ける。
   .tg-page button / input の font: inherit（詳細度 0,1,1）に負けて、文字が 17px のままになるのを防ぐため */

/* 大きな選択ボタン（耳・年代）。3列に並べ、選んでいる（鳴っている）ボタンは色を変える */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.tg-page .tg-choice {
  min-height: var(--tg-tap);
  padding: 6px 4px;
  border: 2px solid var(--tg-main);
  border-radius: var(--tg-radius);
  color: var(--tg-main);
  background: var(--tg-panel);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.tg-page .tg-choice[aria-pressed="true"] { color: #fff; background: var(--tg-main); }
.tg-page .tg-grid-ears .tg-choice { min-height: 64px; font-size: 1.3rem; }

/* ===== 音量 ===== */
.tg-volume-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4em;
  gap: 12px;
  align-items: center;
}
.tg-slider {
  width: 100%;
  min-height: var(--tg-tap);
  margin: 0;
  accent-color: var(--tg-main);
}
.tg-volume-value { font-size: 1.3rem; font-weight: 800; text-align: right; color: var(--tg-key); }

/* ===== 年代のボタン（押すとすぐ鳴る）と目安 ===== */
.tg-page .tg-age-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  line-height: 1.3;
}
.tg-page .tg-age-label { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
/* 印は CSS で出す。止まっているボタンは ▶、鳴っているボタン（aria-pressed="true"）は ■（もう一度押すと止まる）
   印は少し小さくし、「70代以上」がスマホ幅でも1行に収まるようにする */
.tg-play-mark { margin-right: 0.2em; font-size: 0.8em; }
.tg-play-mark::before { content: "▶"; }
.tg-age-button[aria-pressed="true"] .tg-play-mark::before { content: "■"; }
.tg-page .tg-age-hz { font-size: 15px; font-weight: 400; }
/* 年代の目安について（止めるボタンの下の折りたたみ）。説明・表・出典は、操作のボタンより目立たせない */
.tg-age-info {
  margin-top: 8px;
  font-size: 16px;
  color: var(--tg-muted);
}
.tg-age-notes { margin: 0; padding-left: 1.2em; }
.tg-age-notes li + li { margin-top: 4px; }
.tg-age-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 16px;
}
.tg-age-table caption { margin-bottom: 4px; font-weight: 700; text-align: left; }
.tg-age-table th,
.tg-age-table td { padding: 6px 8px; border: 1px solid var(--tg-line); text-align: left; }
.tg-age-table thead th { background: var(--tg-sub); }
.tg-age-table tbody th { white-space: nowrap; }
.tg-age-info .tg-source { margin: 10px 0 0; font-size: 15px; color: var(--tg-muted); }

/* ===== いま鳴っている音 ===== */
.tg-now {
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 2px solid var(--tg-main);
  border-radius: var(--tg-radius);
  background: var(--tg-panel);
  text-align: center;
}
.tg-now p { margin: 0; }
.tg-now-value { font-size: 1.3rem; font-weight: 700; color: var(--tg-muted); }
.tg-now[data-state="playing"] .tg-now-value { font-size: 2.6rem; font-weight: 800; line-height: 1.2; color: var(--tg-key); }
.tg-now-detail { margin-top: 4px; font-size: 1.1rem; font-weight: 700; color: var(--tg-key); }

/* ===== 止める（横幅いっぱい。いちばん大きく目立たせる） ===== */
.tg-stop { margin: 0 0 20px; text-align: center; }
.tg-page .tg-stop-button {
  width: 100%;
  min-height: 84px;
  border: none;
  border-radius: var(--tg-radius);
  background: var(--tg-accent);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
}
.tg-error { margin: 8px 0 0; font-weight: 700; color: var(--tg-accent); }

/* ===== 好きな高さで鳴らす（折りたたみ）: 数字の欄＋大きな「▲」「▼」、対数目盛りのスライダー、専用の鳴らすボタン ===== */
.tg-age-about summary,
.tg-custom summary {
  min-height: var(--tg-tap);
  padding: 12px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tg-main);
  cursor: pointer;
}
.tg-custom-label { display: block; margin: 4px 0 6px; }
.tg-updown {
  display: grid;
  grid-template-columns: var(--tg-tap) minmax(0, 1fr) var(--tg-tap);
  gap: 8px;
}
.tg-page .tg-updown-button {
  min-height: var(--tg-tap);
  padding: 0;
  border: 2px solid var(--tg-main);
  border-radius: 8px;
  background: var(--tg-sub);
  color: var(--tg-key);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.tg-page .tg-number {
  width: 100%;
  min-height: var(--tg-tap);
  padding: 4px 8px;
  border: 2px solid var(--tu-control-line);
  border-radius: 8px;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  color: var(--tg-key);
}
.tg-custom .tg-slider { margin-top: 8px; }
/* 数字の欄のすぐ下: その高さに当たる年代の目安（動かすたびに変わる） */
.tg-custom .tg-height-note { margin: 8px 0 0; font-weight: 700; color: var(--tg-key); }
.tg-scale { display: flex; justify-content: space-between; font-size: 15px; color: var(--tg-muted); }
.tg-page .tg-custom-play {
  width: 100%;
  min-height: 64px;
  margin-top: 12px;
  border: none;
  border-radius: var(--tg-radius);
  background: var(--tg-key);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
}
/* この高さで鳴っているあいだは「■ 止める」になるので、止めるボタンと同じ色にする */
.tg-page .tg-custom-play[aria-pressed="true"] { background: var(--tg-accent); }
.tg-share { margin: 10px 0 0; font-size: 16px; color: var(--tg-muted); }
/* 折りたたみの中でも、鳴らすボタンのすぐ下に表示と止めるボタンを置く */
.tg-custom .tg-now { margin-top: 12px; }
.tg-custom .tg-stop { margin-bottom: 0; }

/* ===== イヤホンの紹介と差し込み口の図解 ===== */
.tg-pr { font-size: 15px; color: var(--tg-muted); }
.tg-ports {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
}
.tg-ports summary { min-height: 32px; font-weight: 700; color: var(--tg-main); cursor: pointer; }
.tg-ports > p { margin: 8px 0; }
.tg-port-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tg-port { padding: 8px; text-align: center; border-radius: var(--tg-radius); background: var(--tg-sub); }
.tg-port-figure { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto 4px; }
.tg-port p { margin: 0; }
.tg-port-name { font-size: 1.15rem; font-weight: 700; color: var(--tg-key); }
.tg-port-formal { font-size: 15px; color: var(--tg-muted); }

.tg-product-group-title { margin: 14px 0 8px; font-size: 1.1rem; color: var(--tg-key); }
.tg-product-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tg-product { padding: 12px; border: 1px solid var(--tg-line); border-radius: var(--tg-radius); }
.tg-product p { margin: 0 0 6px; }
.tg-product-name { font-weight: 700; }
.tg-product-spec,
.tg-product-note,
.tg-product-checked { font-size: 15px; color: var(--tg-muted); }
.tg-product-links { display: flex; flex-wrap: wrap; gap: 12px; }
.tg-product-links a { font-weight: 700; color: var(--tg-accent); }

/* ===== 動画（16:9 で横幅いっぱい） ===== */
.tg-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.tg-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--tg-radius);
}

/* ===== Mobile ===== */
@media (max-width: 480px) {
  .tg-now[data-state="playing"] .tg-now-value { font-size: 2.2rem; }
  .tg-page .tg-choice { font-size: 1.1rem; }
  .tg-grid { gap: 8px; }
  .tg-page .tg-choice { padding: 6px 2px; }
  .tg-page .tg-age-label { font-size: 17px; }
}