/* ============================================================
   css/common.css
   全ページ共通:カラートークン、ダークモード、文字サイズ切替、
   リセット、サイドバー/トップバーのレイアウト、フッター。
   ページ固有のコンテンツスタイルは style.css (下層ページ) /
   meishiki.css (トップページ) 側に記述する。
   ============================================================ */
:root{
  /* ==== アクセントカラーはここだけ変更すればOK ==== */
  --accent: #81D8D0;       /* ティファニーブルー */
  --accent-dark: #4FB8AE;  /* ホバー・強調用の濃い版 */
  --accent-tint: #E9F8F6;  /* 薄い背景用 */

  /* ==== ベース(白黒基調) ==== */
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --border: #E5E5E5;
  --text: #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-tertiary: #A0A0A0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --radius: 8px;

  /* ボタン専用のアクセントカラー(ライト/ダーク共通の固定値)。
     --accent-dark はダークモード時に「明るい強調色」に反転する変数なので、
     白文字ボタンの背景に使うと逆にコントラストが落ちてしまう。
     そのためボタン背景専用に、常に一定の濃さを保つ変数を別で用意する。 */
  --accent-btn: #3FA79D;
  --accent-btn-hover: #35897F;
}

/* 端末(OS)がダークモード設定の場合、自動でこちらの配色に切り替わる。
   ただし、サイドバーの表示モードボタンで手動指定(data-theme)されている場合はそちらを優先する */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent: #81D8D0;
    --accent-dark: #9FE4DD;
    --accent-tint: #1C3634;

    --bg: #17181A;
    --surface: #201F22;
    --border: #35363A;
    --text: #F0F0F0;
    --text-secondary: #ABABAF;
    --text-tertiary: #7C7C80;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  }
}

/* サイドバーの表示モードボタンで「ダーク」を手動選択した場合、端末設定に関わらず強制する */
:root[data-theme="dark"]{
  --accent: #81D8D0;
  --accent-dark: #9FE4DD;
  --accent-tint: #1C3634;

  --bg: #17181A;
  --surface: #201F22;
  --border: #35363A;
  --text: #F0F0F0;
  --text-secondary: #ABABAF;
  --text-tertiary: #7C7C80;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
}

/* 文字サイズの切り替え(サイドバーの「Aa」ボタン)。ページ全体を一律に拡大する */
html.text-size-large{ zoom: 1.15; }
html.text-size-xlarge{ zoom: 1.3; }

*{ box-sizing: border-box; }
html{ font-size: 15px; }
html,body{
  margin:0; padding:0; min-height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif;
  line-height: 1.6;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.app{
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ---------- サイドバー(全ページ共通) ---------- */
.sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.sidebar-title{
  font-size:13px;
  font-weight:600;
  color: var(--text-secondary);
  letter-spacing:.03em;
  padding: 0 6px;
}
.sidebar-controls{ display:flex; flex-direction:column; gap:6px; }
.control-btn{
  display:flex; align-items:center; gap:8px;
  width:100%;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:9px 10px;
  font-size:13px;
  color: var(--text-secondary);
  text-align:left;
  text-decoration:none;
  box-sizing:border-box;
}
.control-btn:hover{ border-color: var(--accent); color: var(--text); }
.control-btn.current{ border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }

.theme-switch-btn{ justify-content:space-between; }
.switch-track{
  flex-shrink:0;
  width:36px; height:20px;
  border-radius:10px;
  background: var(--border);
  position:relative;
  transition: background .2s;
}
.switch-track.on{ background: var(--accent); }
.switch-thumb{
  position:absolute;
  top:2px; left:2px;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .2s;
}
.switch-track.on .switch-thumb{ transform: translateX(16px); }

.sidebar-toggle, .panel-close-mobile, .topbar{ display:none; }

/* ---------- フッター(全ページ共通) ---------- */
.site-footer{
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 28px 32px 32px;
}
.footer-inner{
  max-width: 720px;
  margin: 0 auto;
}
.footer-sitemap{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
}
.footer-sitemap a{
  font-size: 13px;
  color: var(--text-secondary);
}
.footer-sitemap a:hover{ color: var(--accent-dark); }
.footer-copy{
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.footer-copy a{
  color: var(--text-secondary);
  font-weight:600;
}
.footer-copy a:hover{ color: var(--accent-dark); }

/* =====================================================
   レスポンシブ(スマホ):
   サイドバーはハンバーガーで開閉するオフキャンバス
   ===================================================== */
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }

  .topbar{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--border);
    background: var(--surface);
    position: fixed; top:0; left:0; right:0; z-index:60;
  }
  .sidebar-toggle{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:6px;
    border:1px solid var(--border); background: var(--surface);
    font-size:16px;
  }
  .topbar .title{ font-size:14px; font-weight:600; }
  .topbar .title a{ color:inherit; text-decoration:none; }

  .sidebar{
    position: fixed; top:0; left:0; bottom:0; width:240px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index:100;
    box-shadow: 6px 0 20px rgba(0,0,0,0.08);
    padding-top: 58px; /* 固定ヘッダー分の余白 */
  }
  .sidebar.open{ transform: translateX(0); }

  .site-footer{ padding: 24px 16px 28px; }
}