/* =====================================================================
   frame.css — tools-trends 共通の「額縁」
   ---------------------------------------------------------------------
   ヘッダー・柱バー・パンくず・フッター・広告枠だけを受け持つ。
   中身（/shogi/joseki-style.css、/komadori/assets/komadori.css）の
   色・書体・角丸・影には一切関与しない。中身CSSより先に読み込むこと。

   切り替えは html の属性2つだけ。
     data-frame="inv"    … 反転版（暗い中身のページ）
     data-pillar="shogi" … 柱色（柱バー3px と フッターの丸ドットのみ）

   影・グラデーション・アイコン画像は使わない。線はすべて border で組む。
   ===================================================================== */

:root {
  --frame-bg: #F4F3F0;
  --frame-paper: #FFFFFF;
  --frame-ink: #1F1E1C;
  --frame-ink-2: #4A443E;
  --frame-muted: #6B6560;
  --frame-rule: #D8D3CB;
  --frame-hair: #E3DED6;
  --frame-chip: #E9E7E2;

  /* 柱色。柱バーとフッターの丸ドットにだけ使う。
     ボタンの背景や見出しの文字色には使わない */
  --pillar-shogi: #C0302A;
  --pillar-game: #2F8F6B;
  --pillar-shindan: #1C2330;

  /* 反転版の値。html[data-frame="inv"] で上の変数に流し込む */
  --frame-bg-inv: #14121e;
  --frame-ink-inv: #ece4d3;
  --frame-ink-2-inv: #c9c0ad;
  --frame-rule-inv: rgba(255, 255, 255, .10);

  --frame-gothic: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
  --frame-h: 56px;
  --frame-w: 1120px;
}

html[data-frame="inv"] {
  --frame-bg: var(--frame-bg-inv);
  --frame-paper: var(--frame-bg-inv);
  --frame-ink: var(--frame-ink-inv);
  --frame-ink-2: var(--frame-ink-2-inv);
  --frame-muted: var(--frame-ink-2-inv);
  --frame-rule: var(--frame-rule-inv);
  --frame-hair: var(--frame-rule-inv);
  --frame-chip: rgba(255, 255, 255, .06);
}

/* 柱色の既定はグレー（about / privacy などの汎用ページ） */
:root { --pillar: var(--frame-rule); }
html[data-pillar="shogi"] { --pillar: var(--pillar-shogi); }
html[data-pillar="game"] { --pillar: var(--pillar-game); }
html[data-pillar="shindan"] { --pillar: var(--pillar-shindan); }

.frame-wrap {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── ヘッダー ───────────────────────────────────────── */
.frame-header {
  background: var(--frame-bg);
  border-bottom: 1px solid var(--frame-rule);
  font-family: var(--frame-gothic);
}
.frame-header .frame-wrap {
  height: var(--frame-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.frame-logo {
  font-family: var(--frame-gothic);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--frame-ink);
  text-decoration: none;
  white-space: nowrap;
}
.frame-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.frame-nav a,
.frame-nav span {
  font-family: var(--frame-gothic);
  font-weight: 500;
  font-size: 14px;
  color: var(--frame-ink-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
/* 準備中の柱はリンクにしない（行き先がまだないため） */
.frame-nav span,
.frame-menu-panel span { color: var(--frame-muted); }
.frame-nav a:hover { color: var(--frame-ink); }
.frame-nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--frame-ink);
  border-bottom-color: var(--pillar);
}

/* スマホのメニュー。details/summary だけで開閉する */
.frame-menu { display: none; position: relative; }
.frame-menu > summary {
  list-style: none;
  width: 44px; height: 44px;
  display: grid; align-content: center; gap: 5px;
  justify-items: stretch;
  padding: 0 10px;
  border: 1px solid var(--frame-rule);
  background: var(--frame-bg);
  cursor: pointer;
}
.frame-menu > summary::-webkit-details-marker { display: none; }
.frame-menu > summary::before,
.frame-menu > summary::after,
.frame-menu > summary > span {
  content: "";
  display: block;
  height: 0;
  border-top: 2px solid var(--frame-ink);
}
.frame-menu > summary > span { font-size: 0; }
.frame-menu[open] > summary { border-color: var(--frame-ink); }
.frame-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 1px);
  z-index: 50;
  min-width: 180px;
  background: var(--frame-bg);
  border: 1px solid var(--frame-rule);
  display: flex;
  flex-direction: column;
}
.frame-menu-panel a,
.frame-menu-panel span {
  font-family: var(--frame-gothic);
  font-weight: 500;
  font-size: 14px;
  color: var(--frame-ink-2);
  text-decoration: none;
  padding: 13px 16px;
  border-bottom: 1px solid var(--frame-hair);
}
.frame-menu-panel a:last-child { border-bottom: 0; }
.frame-menu-panel a[aria-current="page"] { font-weight: 700; color: var(--frame-ink); }

/* ── 柱バー ─────────────────────────────────────────── */
.frame-bar {
  height: 3px;
  background: var(--pillar);
}
/* トップページだけ3本柱を均等割り（将来分を含む） */
.frame-bar--top {
  background: linear-gradient(to right,
    var(--pillar-shogi) 0 33.3333%,
    var(--pillar-game) 33.3333% 66.6666%,
    var(--pillar-shindan) 66.6666% 100%);
}

/* ── パンくず ───────────────────────────────────────── */
.frame-crumbs {
  font-family: var(--frame-gothic);
  font-size: 13px;
  color: var(--frame-muted);
  background: transparent;
}
.frame-crumbs .frame-wrap { padding-top: 16px; padding-bottom: 16px; }
.frame-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}
.frame-crumbs li { margin: 0; }
.frame-crumbs li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--frame-muted);
}
.frame-crumbs a { color: var(--frame-muted); text-decoration: none; }
.frame-crumbs a:hover { text-decoration: underline; }
.frame-crumbs [aria-current="page"] { color: var(--frame-ink); }

/* ── フッター ───────────────────────────────────────── */
.frame-footer {
  background: var(--frame-bg);
  border-top: 1px solid var(--frame-rule);
  font-family: var(--frame-gothic);
  color: var(--frame-ink-2);
  margin-top: 56px;
}
.frame-footer .frame-wrap { padding-top: 36px; padding-bottom: 28px; }
.frame-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
.frame-foot-brand b {
  display: block;
  font-weight: 900;
  font-size: 17px;
  color: var(--frame-ink);
}
.frame-foot-brand p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--frame-muted);
  line-height: 1.8;
}
.frame-foot-col h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--frame-ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.frame-foot-col h2::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--frame-rule));
}
.frame-foot-col.is-shogi { --dot: var(--pillar-shogi); }
.frame-foot-col.is-game { --dot: var(--pillar-game); }
.frame-foot-col.is-shindan { --dot: var(--pillar-shindan); }
.frame-foot-col ul { list-style: none; margin: 0; padding: 0; }
.frame-foot-col li { margin: 0; border-top: 1px solid var(--frame-hair); }
.frame-foot-col li:first-child { border-top: 0; }
.frame-foot-col a,
.frame-foot-col span {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--frame-ink-2);
  text-decoration: none;
}
.frame-foot-col a:hover { color: var(--frame-ink); text-decoration: underline; }
.frame-foot-col span { color: var(--frame-muted); }
.frame-foot-base {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--frame-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 12.5px;
  color: var(--frame-muted);
}
.frame-foot-base a { color: var(--frame-muted); text-decoration: none; }
.frame-foot-base a:hover { color: var(--frame-ink); text-decoration: underline; }
.frame-foot-copy { margin: 0 0 0 auto; }

/* ── 広告枠 ─────────────────────────────────────────── */
.frame-ad {
  margin: 28px 0;
  border: 1px solid var(--frame-rule);
  background: var(--frame-paper);
  padding: 12px;
}
.frame-ad::before {
  content: "広告";
  display: block;
  font-family: var(--frame-gothic);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--frame-muted);
  margin-bottom: 8px;
}

/* =====================================================================
   トップページ（frame.css だけで組む）
   ===================================================================== */
.frame-page {
  margin: 0;
  background: var(--frame-paper);
  color: var(--frame-ink);
  font-family: var(--frame-gothic);
  line-height: 1.9;
}
.frame-lede {
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 8px 20px 4px;
}
.frame-lede h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .01em;
}
.frame-lede p {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--frame-ink-2);
  max-width: 46em;
}
.frame-sec { max-width: var(--frame-w); margin: 0 auto; padding: 36px 20px 0; }
.frame-sec > h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--frame-ink);
}
/* トップ「このサイトにあるもの」のジャンル見出し */
.frame-sec > h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; }
.frame-sec > .frame-sec-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--frame-muted);
}

/* 3本柱のカード。3枚とも同じ大きさで並べる */
.pillar-cards {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--frame-rule);
  background: var(--frame-paper);
  min-height: 100%;
}
.pillar-window {
  height: 96px;
  border-bottom: 1px solid var(--frame-rule);
  background: var(--pc, var(--frame-chip));
}
.pillar-card.is-shogi { --pc: var(--pillar-shogi); }
.pillar-card.is-game { --pc: var(--pillar-game); }
.pillar-card.is-shindan { --pc: var(--pillar-shindan); }
.pillar-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.pillar-body h3 { margin: 0; font-size: 17px; font-weight: 700; }
.pillar-body p { margin: 8px 0 0; font-size: 13.5px; color: var(--frame-ink-2); }
.pillar-links { list-style: none; margin: 14px 0 0; padding: 0; }
.pillar-links li { border-top: 1px solid var(--frame-hair); }
.pillar-links a {
  display: block;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--frame-ink);
  text-decoration: none;
}
.pillar-links a:hover { text-decoration: underline; }
.pillar-soon {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--frame-ink);
  background: #FFFFFF;
  border: 1px solid var(--frame-ink);
  padding: 3px 9px;
}

/* いますぐ試せる */
.try-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.try-list li { border: 1px solid var(--frame-rule); }
.try-list a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--frame-ink);
}
.try-list b { display: block; font-size: 14.5px; font-weight: 700; }
.try-list span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--frame-muted); }
.try-list a:hover { background: var(--frame-chip); }

/* ── スマホ ─────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --frame-h: 52px; }
  .frame-nav { display: none; }
  .frame-menu { display: block; }
  .frame-foot-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .pillar-cards, .try-list { grid-template-columns: 1fr; }
  .frame-lede h1 { font-size: 21px; }
  .frame-foot-copy { margin: 0; }
}