/* ツールデスク 共通スタイル
   デザイントークンは全てここの CSS 変数で管理する。ページ側で色をハードコードしない。 */

:root {
  --bg: #fafaf8;
  --fg: #1a1d21;
  --muted: #5c6470;
  --card: #ffffff;
  --border: #e3e5e8;
  --accent: #1f4e9c;
  --accent-fg: #ffffff;
  --warn: #dc2626;
  --focus: #1f4e9c;   /* アクセントに合わせる。2026-09-02、ここだけ既定の青が残っていた */
  --radius: 12px;
  --maxw: 880px;
}

[data-theme="dark"] {
  --bg: #0b0e12;
  --fg: #e8eaed;
  --muted: #9aa3af;
  --card: #222933;
  --border: #39424f;
  --accent: #6fa8e0;
  --accent-fg: #0d1117;
  --warn: #f87171;
  --focus: #8ab4ff;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  line-height: 1.75;
  transition: background-color .2s, color .2s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- ヘッダ ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.site-header .brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg);
  white-space: nowrap;
}
.site-header nav {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  font-size: .88rem;
}
.site-header nav a { color: var(--muted); white-space: nowrap; }
.site-header nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

.site-header .header-nav {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: .88rem;
}
.site-header .header-nav a { color: var(--muted); white-space: nowrap; }
.site-header .header-nav a:hover { color: var(--fg); }

/* 2026-09-02: tools/ui-audit.py で 33ページ中33ページが
   「44px未満の操作」を持っていた。原因は全ページ共通のこのヘッダ。
   文字の大きさは変えず、当たり判定だけ広げる（見た目をほぼ変えずに指で押せるようにする）。 */
.site-header .brand,
.site-header nav a,
.site-header .header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: 0 -4px;      /* 見た目の位置を変えない */
}

.theme-toggle {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { border-color: var(--accent); }

/* ---- パンくず ---- */
.breadcrumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 16px 0;
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--fg); }

/* ---- 回答ファースト導入文（AI Overviews 対策） ---- */
.answer-first {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 16px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}

/* ---- レイアウト ---- */
main { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px 64px; }

h1 { font-size: 1.5rem; margin: 8px 0 4px; }
.lead { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
h2 { font-size: 1.15rem; margin-top: 40px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }

.tool-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* ---- フォーム部品 ---- */
textarea, input[type="text"], input[type="number"], input[type="date"], select {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}
textarea { min-height: 200px; resize: vertical; }

button.primary, button.ghost {
  border-radius: 8px;
  padding: 8px 18px;
  font-size: .95rem;
  cursor: pointer;
  font-family: inherit;
}
button.primary { background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); }
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
button:disabled { opacity: .5; cursor: default; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.stat .label { font-size: .78rem; color: var(--muted); }
.stat .value { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.kbd-hint { color: var(--muted); font-size: .75rem; margin-top: 10px; }
kbd {
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 6px;
  font-size: .82em;
  background: var(--card);
}

/* ---- ポータルのカード ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.tool-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--fg);
}
.tool-card:hover { border-color: var(--accent); text-decoration: none; }
.tool-card .name { font-weight: 700; }
.tool-card .desc { font-size: .85rem; color: var(--muted); margin-top: 4px; }

/* ---- 常駐系（時計・タイマー）の大表示 ---- */
.big-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 2026-09-02: 46vh は 844px の画面で 388px の箱を作り、
     中身が120px程度なので約270pxが死んでいた（撮って発覚）。
     中身に寄せつつ、見出しとしての存在感は余白で作る。 */
  min-height: 30vh;
  padding: 24px 0;
  gap: 8px;
}
.big-display .digits {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(3rem, 17vw, 11rem);
  line-height: 1.05;
  letter-spacing: .02em;
}
.big-display .sub { color: var(--muted); font-size: clamp(.9rem, 2.5vw, 1.3rem); font-variant-numeric: tabular-nums; }

/* 全画面モード: ツール以外を全部消す */
body.zen .site-header,
body.zen .below-tool,
body.zen footer { display: none; }
body.zen main { max-width: none; padding: 0; }
body.zen .tool-panel { border: 0; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
body.zen .big-display { min-height: 80vh; }

/* ---- FAQ・下部テキスト ---- */
.below-tool p, .below-tool li { font-size: .95rem; }
details.faq {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
  background: var(--card);
}
details.faq summary { cursor: pointer; font-weight: 600; }

footer.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
  padding: 28px 16px 48px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin-bottom: 18px;
}
.footer-col h3 { font-size: .82rem; color: var(--fg); margin: 0 0 8px; border: 0; padding: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 4px 0; line-height: 1.5; }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--accent); }
.footer-note { margin: 0; }

/* ---- ポータル: ランキング / カテゴリ ---- */
.provisional-badge {
  display: inline-block;
  font-size: .74rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.rank-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rank-list li { display: flex; align-items: stretch; }
.rank-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--fg);
}
.rank-list a:hover { border-color: var(--accent); text-decoration: none; }
.rank-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  min-width: 1.6em;
  text-align: center;
  flex: none;
}
.rank-list .name { font-weight: 600; }
.rank-list .desc { font-size: .8rem; color: var(--muted); margin-left: auto; text-align: right; }
.rank-use { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.cat-block { margin-top: 34px; }
.cat-block h2 { margin-top: 0; }

.empty-hint { color: var(--muted); font-size: .9rem; }

/* ---- 汎用: 入力行 / 結果表示 ---- */
.field-row { display: grid; gap: 6px; margin: 14px 0; }
.field-row label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.inline-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.result-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
  font-size: 1.05rem;
}
.result-box .big { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.seg button {
  border: 0; background: var(--card); color: var(--fg);
  padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: .9rem;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* ---- 電卓・関数電卓 ---- */
.calc-display {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; text-align: right; margin-bottom: 12px;
  font-variant-numeric: tabular-nums; overflow-x: auto;
}
.calc-display .expr { color: var(--muted); font-size: .95rem; min-height: 1.3em; word-break: break-all; }
.calc-display .out { font-size: 2.1rem; font-weight: 700; word-break: break-all; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.keypad.sci { grid-template-columns: repeat(5, 1fr); }
.keypad button {
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 10px; padding: 14px 0; font-size: 1.1rem; cursor: pointer; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.keypad button:hover { border-color: var(--accent); }
.keypad button:active { background: var(--bg); }
.keypad .op { color: var(--accent); font-weight: 700; }
.keypad .eq { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.keypad .fn { font-size: .95rem; color: var(--muted); }
.keypad .span2 { grid-column: span 2; }
.calc-history { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.calc-history li { list-style: none; padding: 3px 0; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }

/* ---- 世界時計グリッド ---- */
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wc-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.wc-card .city { font-size: .85rem; color: var(--muted); }
.wc-card .t { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-card .d { font-size: .78rem; color: var(--muted); }

/* ---- テキスト差分 ---- */
.diff-out { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; line-height: 1.9; }
.diff-out ins { background: rgba(34,180,90,.22); text-decoration: none; border-radius: 3px; }
.diff-out del { background: rgba(220,60,60,.22); border-radius: 3px; }

/* ---- カラー ---- */
.swatch { width: 100%; height: 90px; border-radius: 10px; border: 1px solid var(--border); }

/* ---- 自由配置ダッシュボード ---- */
/* 2026-09-02: 1fr は既定で min-width:auto。中身が広いとトラックごと画面外へ広がり、
   390px幅で scrollWidth 401px の横スクロールが出ていた（tools/ui-audit.py が検出）。 */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) {
  .dash-widget { grid-column: 1 / -1; }   /* 狭い画面では1列。横に並べても読めない */
}
.dash-widget { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; position: relative; grid-column: span 4; }
.dash-widget h3 { margin: 0 0 8px; font-size: .9rem; border: 0; padding: 0; }
.dash-widget .wdel { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }

@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; }
  h1 { font-size: 1.25rem; }
  .tool-panel { padding: 14px; }
  .rank-list .desc { display: none; }
  .keypad button { padding: 12px 0; }
  .dash-widget { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 2026-09-02: フッタの全ツールリンクが 73x22 で、指で押すには小さい。
   5カラムに分かれているので、1件44pxでも縦に伸びすぎない。 */
.footer-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: 0 -4px;
}
.footer-cols li { line-height: 1.2; }

/* tap-target: breadcrumb */
/* 2026-09-02: パンくずのリンクが 73x22。ヘッダ・フッタを直した後も
   33ページ全部にこれだけが残っていた（tools/ui-audit.py で特定）。
   文字の大きさは変えず、当たり判定だけ広げる。 */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: 0 -4px;
}
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; }

/* tap-target: form controls */
/* 2026-09-02: tools/ui-audit.py が 33ページ中33ページで「44px未満の操作」を検出。
   ヘッダ・フッタ・パンくずを直した後に残ったのは各ページのフォーム部品だった。
   select が 23px、ボタンが 36px。指で押すには小さい。まとめて底上げする。
   文字の大きさは変えない（高さだけ確保する）。 */
.tool-panel button,
.tool-panel select,
.tool-panel input:not([type="radio"]):not([type="checkbox"]),
.tool-panel label,
.tool-panel summary {
  min-height: 44px;
}
.tool-panel select,
.tool-panel input:not([type="radio"]):not([type="checkbox"]) {
  padding-top: 0; padding-bottom: 0;
}
.tool-panel label { display: inline-flex; align-items: center; }

/* tap-target: below-tool */
/* 本文側（FAQ の開閉、関連ツールのリンク）も指で押す対象。 */
.below-tool summary,
.related-tools a,
.below-tool a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.below-tool summary { display: list-item; padding: 10px 0; }

/* tap-target: main 全体 */
/* .tool-panel の外にも操作はある（world-clock の都市追加 select、削除の × など）。
   2026-09-02 の監査で select 23px / × 19x44・11px を検出。 */
main button, main select,
main input:not([type="radio"]):not([type="checkbox"]) {
  min-height: 44px;
}
main button { min-width: 44px; }
main button.wdel, main .row-del { font-size: 1rem; }

/* tiny text */
/* 2026-09-02 の監査で 11.8px。12px を下限にする（小さい和文は潰れて読めない） */
.provisional-badge, .kbd-hint, .kbd-hint kbd { font-size: .75rem; }

/* select height */
/* 2026-09-02: main select に min-height:44px を当てたが 23px のままだった。
   WebKit はネイティブ描画の select に min-height を効かせない。
   appearance を外して自前で高さを持たせ、矢印だけ描き直す。 */
main select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--card);
  color: var(--fg);
  font: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
main button.wdel, main .row-del, main button[aria-label*="削除"] { font-size: 1rem; }

/* dashboard head */
/* 2026-09-02: main button に min-width:44px を足したところ、
   ウィジェット見出しの ◀ ▶ ⤢ × が横に押し出され、
   390px幅で scrollWidth 483px の横スクロールが出た（自分で作った回帰）。
   当たり判定は保ったまま、折り返せるようにする。 */
.dash-widget > div:first-child,
.dash-widget .whead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dash-widget h3 { flex: 1 1 100%; }
.dash-widget button { min-width: 44px; min-height: 44px; font-size: 1rem; }
.dash-widget { overflow: hidden; }

/* clock-3d の操作も 30x30 だった（noindex ページだが同じ規律で揃える） */
#clock-3d-controls button, .cd3-controls button { min-width: 44px; min-height: 44px; }

/* 近い機能への動線（2026-09-05）
   ページ最下部の文章1行では、道具を使い終えた人が次に届かない。
   道具の直後に置く。当たり判定は44px（tools/ui-audit.py の基準）。 */
.siblings{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  max-width:var(--maxw);margin:18px auto 0;padding:0 16px}
.siblings-label{font-size:.8rem;color:var(--muted);margin-right:4px}
.siblings a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--border);border-radius:999px;background:var(--card);
  color:var(--fg);font-size:.88rem;text-decoration:none}
.siblings a:hover{border-color:var(--accent);color:var(--accent)}

/* 長い文字列の折り返し（2026-09-05）
   加筆で URL エンコード例などの長い文字列が入り、390px幅で
   scrollWidth 399px の横スクロールが出た（tools/ui-audit.py が検出）。
   DESIGN.md「幅の広い内容は自分の器の中でスクロールさせる。本文を横に流さない」。 */
code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }
pre { overflow-x: auto; max-width: 100%; }