/*
 * ツール置き場 共通デザイン — トークンとヘッダー / フッター
 *
 * 見た目の正は Design System「ツール置き場」
 * （https://claude.ai/artifact/Qegztqh6vWGtQC414L4zfg の tokens.json / SiteHeader / SiteFooter）。
 *
 * 現行版（/, /tools/*）と旧デザイン版（/legacy/*）の両方が読み込む。
 * 現行版は /src/lib.css の先頭からこのファイルを @import しているため、
 * ページ側で個別に読み込む必要はない。
 *
 * ここにはトークン（カスタムプロパティ）・フォント・ヘッダー / フッターと、
 * ページ全体の縦レイアウトだけを置く。legacy はメイン領域に旧デザインの CSS を
 * そのまま使うため、このファイルではグローバルなリセットやフォーム部品の既定スタイルを
 * 持たない（それらは /src/lib.css 側にある）。
 */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=BIZ+UDGothic:wght@400;700&display=swap');

/*
 * HackGen35 Console NF — SIL Open Font License 1.1
 * Copyright (c) 2019, Yuko OTAWARA. with Reserved Font Name "白源", "HackGen"
 * https://github.com/yuru7/HackGen  ／ 詳細は src/fonts/LICENSE_HackGen.md
 * サイト全体の既定フォント。ローカルに導入済みならそれを使い、無ければ同梱の WOFF2 を読み込む。
 */
@font-face {
  font-family: 'HackGen35 Console NF';
  src:
    local('HackGen35 Console NF'),
    local('HackGen35ConsoleNF-Regular'),
    url('/src/fonts/HackGen35ConsoleNF-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ トークン ============ */
/* テーマは <html data-theme="1|2|3|4">（palette.js が初回ペイント前に必ず付ける）。
   各テーマは「ベース（ライト / ダーク）＋主色 --coral*＋補色 --teal*」の組で、変わるのは色だけ。
   ここの :root と下の prefers-color-scheme は、data-theme が付かなかった場合（JS 無効など）の既定。 */

:root {
  color-scheme: light;

  --bg: #f7f5f2;
  --surface: #ffffff;
  --surface-sunken: #f2efeb;
  --surface-hover: #f0ece7;
  --line: #e6e1db;
  --line-control: #8c847d;

  --ink: #26221f;
  --ink-2: #5a534d;
  --ink-3: #6f6861;

  --coral: #ff8172;
  --coral-hover: #f56e5e;
  --coral-ink: #b8402f;
  --coral-soft: #ffe8e4;

  --amber: #ffb26b;
  --amber-ink: #8f5210;
  --amber-soft: #fff0e0;

  --teal: #5ed3d3;
  --teal-ink: #17706f;
  --teal-soft: #dff5f5;

  --danger-ink: #b3261e;
  --on-accent: #2b1410;
  --focus: var(--coral-ink);

  --shadow-pop: 0 8px 24px rgba(38, 34, 31, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --sidebar: 340px;
  --content-max: 1200px;

  --radius-0: 0px;
  --radius-control: 4px;
  --radius-check: 2px;

  --duration-fast: 0.12s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;

  /* 既定は HackGen Console。ローカルに入っていればそれを、無ければ同梱の HackGen35 Console NF（@font-face）を使う。
     Zen Kaku Gothic New / BIZ UDGothic（Google Fonts）は代替。同梱は Regular だけなので太字は合成になる。 */
  --font-sans: "HackGen Console NF", "HackGen Console", "HackGen35 Console NF", "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "HackGen Console NF", "HackGen Console", "HackGen35 Console NF", "BIZ UDGothic", ui-monospace, Consolas, monospace;
}

/* data-theme が無いときの既定のダーク（OS 設定に従う）。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #191716;
    --surface: #211f1d;
    --surface-sunken: #141312;
    --surface-hover: #2a2725;
    --line: #34302d;
    --line-control: #7d756e;
    --ink: #eeeae5;
    --ink-2: #bdb5ad;
    --ink-3: #9d958e;
    --coral-hover: #ff968a;
    --coral-ink: #ff8f82;
    --coral-soft: #3b2320;
    --amber-ink: #ffb26b;
    --amber-soft: #3a2b1c;
    --teal-ink: #5ed3d3;
    --teal-soft: #1b3333;
    --danger-ink: #ff9c8f;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* テーマ 3・4 はダーク。下の個別ブロックに無いトークン（--amber* / --danger-ink）は既定のダークの値。 */
:root[data-theme="3"],
:root[data-theme="4"] {
  color-scheme: dark;
  --amber-ink: #ffb26b;
  --amber-soft: #3a2b1c;
  --danger-ink: #ff9c8f;
}

/* テーマ1：珊瑚＋青紫・彩度控えめ（ライト） */
:root[data-theme="1"] {
  color-scheme: light;
  --bg: #f8f3f2;
  --surface: #fffcfb;
  --surface-sunken: #f3ebe9;
  --surface-hover: #f2e8e5;
  --line: #ebdfdc;
  --line-control: #8e807c;
  --ink: #2a2120;
  --ink-2: #5d4f4c;
  --ink-3: #736360;
  --coral: #f0897d;
  --coral-hover: #e5796c;
  --coral-ink: #ad4538;
  --coral-soft: #fbe7e3;
  --teal: #8a84d6;
  --teal-ink: #4a43a8;
  --teal-soft: #e8e7f6;
  --on-accent: #2b1410;
  --shadow-pop: 0 8px 24px rgba(42, 33, 32, 0.12);
}

/* テーマ2：ホットピンク＋緑・彩度高め（ライト） */
:root[data-theme="2"] {
  color-scheme: light;
  --bg: #fdf3f8;
  --surface: #ffffff;
  --surface-sunken: #fae7f0;
  --surface-hover: #fbe4ef;
  --line: #f3d2e2;
  --line-control: #98738a;
  --ink: #2b1522;
  --ink-2: #5e3d51;
  --ink-3: #785366;
  --coral: #ff2e93;
  --coral-hover: #f0127f;
  --coral-ink: #c2005e;
  --coral-soft: #ffdaeb;
  --teal: #1fcf6a;
  --teal-ink: #08793a;
  --teal-soft: #d5f6e3;
  --on-accent: #2a0717;
  --shadow-pop: 0 8px 24px rgba(43, 21, 34, 0.14);
}

/* テーマ3：橙＋赤・彩度高め／背景は低彩度（ダーク） */
:root[data-theme="3"] {
  --bg: #171514;
  --surface: #1f1c1a;
  --surface-sunken: #100f0e;
  --surface-hover: #2a2623;
  --line: #36312d;
  --line-control: #7d746c;
  --ink: #f2ede8;
  --ink-2: #c4bbb2;
  --ink-3: #9e958c;
  --coral: #ff8a1f;
  --coral-hover: #ffa04a;
  --coral-ink: #ffa24d;
  --coral-soft: #43260f;
  --teal: #ff3b3b;
  --teal-ink: #ff6f61;
  --teal-soft: #441a17;
  --on-accent: #241000;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* テーマ4：薄紫＋紅・彩度控えめ／青紫寄りの黒（ダーク） */
:root[data-theme="4"] {
  --bg: #0e0b1a;
  --surface: #151126;
  --surface-sunken: #090713;
  --surface-hover: #1e1935;
  --line: #2a2446;
  --line-control: #655d88;
  --ink: #e6e2f2;
  --ink-2: #b3acca;
  --ink-3: #8d86a8;
  --coral: #b8a8e6;
  --coral-hover: #cabcf0;
  --coral-ink: #c4b6ef;
  --coral-soft: #262040;
  --teal: #d1466b;
  --teal-ink: #e8728f;
  --teal-soft: #2c1522;
  --on-accent: #150f2a;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* テーマを切り替えた瞬間だけ色をイージングする（palette.js が data-theme-switching を 400ms 付ける）。
   hover などの普段の色変化は即時のまま。 */
:root[data-theme-switching],
:root[data-theme-switching] * {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

html {
  height: 100%;
}

/* ヘッダー・フッターを上下に置き、間をメイン領域に割り当てる。
   文字色・フォント・行送りはページ側（現行版は /src/lib.css）が指定する。 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
}

body > main {
  flex: 1 1 auto;
  min-height: 0;
}

/* ============ ヘッダー / フッター ============ */
/* legacy のページは body・リンク・ボタンに旧デザインの指定を持つので、
   ここでは box-sizing・余白・フォント・色をすべて明示する。 */

header.site-header,
footer.site-footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

header.site-header {
  height: 60px;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

footer.site-footer {
  height: 48px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-3);
  background: var(--bg);
  border-top: 1px solid var(--line);
}

footer.site-footer p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* legacy のページはリンク色を a:link などで指定しているため、
   ヘッダー / フッターのリンクは詳細度で勝つよう :link / :visited まで書く。 */
footer.site-footer a,
footer.site-footer a:link,
footer.site-footer a:visited {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

footer.site-footer a:hover {
  color: var(--coral-ink);
}

.site-header__crumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.site-header__home {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

a.site-header__home,
a.site-header__home:link,
a.site-header__home:visited {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}

a.site-header__home:hover {
  color: var(--coral-ink);
}

.site-header__sep {
  font-size: 15px;
  color: var(--ink-3);
}

.site-header__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- パンくずの最右（ツール名）のプルダウン ---- */
/* 枠なしの折り畳みボタン。中身は各ツールへのリンク（分類ごと）。
   legacy の a:link などに負けないよう、リンクは :link / :visited まで書く。 */

.site-nav {
  position: relative;
  min-width: 0;
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border-radius: var(--radius-control);
  list-style: none;
  cursor: pointer;
  color: var(--ink);
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

/* hover は背景を出さず、矢印の明度で示す。 */
.site-nav__toggle:hover .site-nav__chev,
.site-nav[open] > .site-nav__toggle .site-nav__chev {
  color: var(--ink);
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.site-nav__chev {
  flex: 0 0 auto;
  color: var(--ink-3);
}

.site-nav__chev svg {
  display: block;
}

.site-nav[open] .site-nav__chev svg {
  transform: rotate(180deg);
}

.site-nav__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  left: calc(-1 * var(--space-2));
  box-sizing: border-box;
  display: flex;
  gap: var(--space-5);
  width: max-content;
  max-width: calc(100vw - 2 * var(--space-6));
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-sans);
}

.site-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 140px;
}

.site-nav__label,
.theme-menu__label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-3);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

a.site-nav__link,
a.site-nav__link:link,
a.site-nav__link:visited {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.site-nav__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

a.site-nav__link:hover {
  color: var(--ink);
}

a.site-nav__link[aria-current="page"] {
  color: var(--coral-ink);
  font-weight: 500;
  background: var(--coral-soft);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

/* ヘッダーのアイコンボタン。legacy では lib.css の .yt-iconbtn が無いので、ここで完結させる。
   フォーム部品なので transition は付けない。 */
.site-header__btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: none;
}

.site-header__btn:hover {
  color: var(--ink);
}

.site-header__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.site-header__btn svg {
  display: block;
}

/* ---- テーマメニュー（ヘッダー右） ---- */
/* <details class="theme-menu"> の summary が .site-header__btn。開閉は <details>、
   選択・外側クリックと Esc で閉じるのは palette.js。項目は legacy の button 指定に負けないよう全部明示する。 */

.theme-menu {
  position: relative;
}

summary.site-header__btn {
  list-style: none;
}

summary.site-header__btn::-webkit-details-marker {
  display: none;
}

.theme-menu[open] > .site-header__btn {
  color: var(--ink);
}

.theme-menu__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-2));
  right: calc(-1 * var(--space-2));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 160px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-sans);
}

.theme-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-menu__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% + 2 * var(--space-2));
  margin: 0 calc(-1 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: none;
}

.theme-menu__item:hover {
  color: var(--ink);
}

.theme-menu__item[aria-checked="true"] {
  color: var(--coral-ink);
  font-weight: 500;
  background: var(--coral-soft);
}

.theme-menu__item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.theme-menu__item svg {
  display: block;
  flex: 0 0 auto;
}

/* ============ SP 版（幅 640px 以下） ============ */

@media screen and (max-width: 640px) {
  header.site-header,
  footer.site-footer {
    padding: 0 var(--space-4);
  }

  header.site-header {
    height: 52px;
  }

  .site-header__home,
  .site-header__title {
    font-size: 16px;
  }

  a.site-header__home,
  a.site-header__home:link,
  a.site-header__home:visited {
    font-size: 13px;
  }

  .site-header__sep {
    font-size: 13px;
  }

  .site-header__btn {
    width: 44px;
    height: 44px;
  }

  /* SP は画面幅いっぱい（左右 16px）に縦積み。ヘッダーの下端から出す。 */
  .site-nav {
    position: static;
  }

  header.site-header {
    position: relative;
  }

  .site-nav__menu {
    top: calc(100% + var(--space-1));
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 72px);
    overflow: auto;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .site-nav__toggle {
    min-height: 44px;
  }

  /* テーマメニューも同じくヘッダーの下端から出す（右寄せのまま）。 */
  .theme-menu {
    position: static;
  }

  .theme-menu__panel {
    top: calc(100% + var(--space-1));
    right: var(--space-4);
    padding: var(--space-4);
  }

  .theme-menu__item {
    padding: var(--space-2);
    font-size: 16px;
  }

  a.site-nav__link,
  a.site-nav__link:link,
  a.site-nav__link:visited {
    padding: var(--space-2);
    font-size: 16px;
  }
}