/* 最小構成のCSS（コメント付き） */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ==== カラー変数（一括管理用） ==== */
:root {
  /* ライトモード */
  --primary-color: #4a90e2;        /* メインの青色 */
  --primary-hover: #357abd;        /* ホバー時の青色 */
  --text-color: #111;              /* 基本テキスト色 */
  --text-light: #666;              /* 薄いテキスト色 */
  --border-color: #eee;            /* ボーダー色 */
  --background: #fff;              /* 背景色 */
  
  /* ダークモード（ホーム以外のページ用） */
  --dark-background: #333C5E;      /* 暗い背景色 */
  --dark-text: #e8e8e8;           /* 明るいテキスト色 */
  --dark-text-light: #b8b8b8;     /* 明るい薄テキスト色 */
  --dark-border: #4a5578;         /* 暗い背景用ボーダー */
  
  /* フェード効果 */
  --fade-overlay-color: #2c3454;   /* フェード中の背景色 */
  --fade-duration: 0.2s;          /* フェード時間 */
}
/* ==== Google Fontsのインポート ==== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

/* ==== 基本設定 ==== */
html, body {
  background:var(--fade-overlay-color);
}

body{
  margin:0;
  font-family:'Inter','Noto Sans JP','Yu Gothic','YuGothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.7;
  color:var(--text-color);
  opacity:0;
  transition:opacity var(--fade-duration) ease-in-out;
}

body.page-loaded {
  opacity:1;
  background:var(--background);
}

body.page-loaded main.home {
  background:var(--background);
}
/* ==== レイアウト ==== */
.container{max-width:960px;margin:0 auto;padding:32px 16px}

/* ホーム以外のページ（ダークテーマ） */
main:not(.home) {
  padding-top:100px;padding-bottom:40px;
  background:var(--dark-background);
  min-height:100vh;
  color:var(--dark-text);
}
main:not(.home) .container {padding:48px 32px}
main:not(.home) h1, main:not(.home) h2, main:not(.home) h3 {color:var(--dark-text)}
main:not(.home) .post-list .meta {color:var(--dark-text-light)}
main:not(.home) .post-list li {border-bottom-color:var(--dark-border)}

/* ==== タイポグラフィ ==== */
h1,h2,h3{
  line-height:1.3;
  font-weight:600;
  font-family:'Inter','Noto Sans JP',sans-serif
}
h1{font-size:clamp(24px,4vw,32px);margin-bottom:16px}
h2{font-size:clamp(20px,3.5vw,24px);margin:24px 0 12px}
h3{font-size:clamp(18px,3vw,20px);margin:20px 0 8px}
/* ==== コンテンツスタイル ==== */
.post-list{list-style:none;padding:0;margin:24px 0}
.post-list li{padding:8px 0;border-bottom:1px solid var(--border-color);display:flex;gap:16px;align-items:baseline}
.post-list .meta{font-size:14px;color:var(--text-light);min-width:80px;font-weight:500}
.post-list a{flex:1;font-weight:500;text-decoration:none;color:var(--primary-color)}
.post-list a:hover{color:var(--primary-hover)}

/* ホーム以外のページでのリンク色 */
main:not(.home) .post-list a {color:#7bb3f7}
main:not(.home) .post-list a:hover {color:#5da3f5}

.card{background:#fafafa;border:1px solid var(--border-color);border-radius:12px;padding:12px;margin-top:12px}
main:not(.home) .card {background:#44506e;border-color:var(--dark-border);color:var(--dark-text)}

.content img,.cover{max-width:100%}
.cover{border-radius:12px;object-fit:cover}

/* ==== ヒーロー（ホーム画面背景） ==== */
.hero-full{
  position:relative;height:100vh;width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background-image:var(--hero-img);background-size:cover;background-position:center;
}
.hero-overlay{position:absolute;inset:0;background:#000;opacity:.3;pointer-events:none}

/* ==== 固定ナビゲーション ==== */
.fixed-nav{
  position:fixed;top:30px;left:30px;z-index:1000;
  background:color-mix(in srgb, #000 25%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-radius:12px;padding:8px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.fixed-nav a{
  display:inline-block;text-decoration:none;color:#fff;
  padding:6px 10px;border-radius:8px;font-size:14px;
  background:rgba(255,255,255,.30);transition:all .0.5s;
  text-align:center;min-width:60px;
}
.fixed-nav a:hover{background:rgba(255,255,255,.45);transform:translateY(-1px)}
.fixed-nav a:active{transform:translateY(0)}

/* ==== フェード効果 ==== */
.fade-overlay {
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:var(--fade-overlay-color);z-index:9999;opacity:1;
  transition:opacity var(--fade-duration) ease-in-out;pointer-events:none;
}
.fade-overlay.hidden {opacity:0}
body:not(.page-loaded) .fade-overlay {pointer-events:all}