/* 結城浩の日記 - モダンスタイル */

/* CSS変数（色の定義） */
:root {
    /* 基本色 */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* グレースケール */
    --color-text-primary: #212529;
    --color-text-secondary: #333;
    --color-text-muted: #6c757d;
    --color-text-light: #495057;
    
    /* 背景色 */
    --color-bg-light: #f8f9fa;
    --color-bg-cream: #fffef9;  /* ごくごく淡いクリーム色 */
    --color-bg-cream-light: #fffff5;  /* より淡いクリーム色 */
    
    /* ボーダー色 */
    --color-border: rgba(0,0,0,0.125);
    --color-border-light: rgba(0,0,0,0.08);
    
    /* アクセント色 */
    --color-link: #0066cc;
    
    /* シャドー */
    /* x-offset, y-offset, blur-radius, shadow-color */
    --shadow-card: 3px 3px 8px rgba(0,0,0,0.3);
}

/* 基本設定 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    background-color: #fafafa;  /* 薄いグレーでカードとの差異を作る */
    color: var(--color-text-secondary);
}

/* ヘッダー - シンプル */
.SITE-HEADER {
    padding: 4rem 0 3rem;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    background-image: url('https://img.hyuki.net/20250817160351-1d4b062748c53ffd.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.SITE-HEADER::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* 白の半透明オーバーレイ */
    pointer-events: none;
}

.SITE-HEADER h1 {
    font-size: 3rem;
    font-weight: 700;
    position: relative; /* オーバーレイの上に表示 */
    z-index: 1;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.SITE-HEADER .AUTHOR {
    font-size: 1.3rem;
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

/* メインコンテンツ */
.MAIN-CONTENT {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* セクション（日記エントリ） - シンプル */
.DIARY-ENTRY {
    position: relative;
}

/* 日付カードのタイトルを控えめに */
.DIARY-DATE-SECTION > h2.section {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
}

/* 日付カードのリンクは控えめに */
.DIARY-DATE-SECTION > h2.section a {
    color: inherit;
    text-decoration: none;
}

.DIARY-DATE-SECTION > h2.section a:hover {
    background-color: transparent;
    color: inherit;
}

/* 日付カードのパーマリンクアイコン（ホバー時） */

/* h2見出しの基本スタイル */
.DIARY-ENTRY h2,
h2.section {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    position: relative;
}


.DIARY-ENTRY h2 a,
h2.section a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: inherit;  /* 親要素のfont-weightを継承 */
}

.DIARY-ENTRY h2 a:hover,
h2.section a:hover {
    background-color: transparent;
    color: var(--color-text-primary);
    text-decoration: none;
}


.DIARY-ENTRY h3.subsection,
h3.subsection {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    position: relative;
}

.DIARY-ENTRY h3 a,
h3.subsection a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: inherit;  /* 親要素のfont-weightを継承 */
}

.DIARY-ENTRY h3 a:hover,
h3.subsection a:hover {
    color: var(--color-white);
    background-color: var(--color-link);
    text-decoration: none;
}

.DIARY-ENTRY .DATETIME {
    display: block;
    text-align: right;
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.DIARY-ENTRY .DATETIME:hover {
    color: var(--color-text-light);
    text-decoration: none;
    background-color: transparent;
}

.DIARY-ENTRY p {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

/* リンク - シンプル */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-white);
    background-color: var(--color-link);
    text-decoration: none;
}

/* コード */
code {
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: 3px;
    font-family: 'SF Mono', Monaco, 'Inconsolata', 'Fira Code', monospace;
    font-size: 1.1rem;
}

pre {
    background-color: var(--color-bg-cream);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 1.1rem;
    border: 1px dotted var(--color-border);
}

/* 引用 */
blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: 1rem;
    margin: 2rem 0;
    color: var(--color-text-muted);
}

/* リスト */
ul, ol {
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0;
    line-height: 1.6;
}

/* MakeWeb記法で生成されるクラス */
.section, .subsection {
    /* MakeWeb記法のセクション・サブセクション用 */
}

.section a, .subsection a {
    text-decoration: none;
}

/* MakeWeb記法の日付表示 */
span.small_date {
    color: var(--color-text-muted);
    font-weight: normal;
    font-size: 0.9rem;
}

/* MakeWeb記法のセクションツール */
p.section_tool {
    text-align: right;
    font-weight: normal;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* MakeWeb記法のサマリーボックス */
.summary {
    margin: 3ex 10% 1ex 10%;
    padding: 1.5em;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* MakeWeb記法のディスプレイブロック */
.display {
    margin: 1.2em;
    padding: 1em;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-cream-light);
    color: var(--color-text-secondary);
    border-radius: 4px;
}

.display pre {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    body {
        font-size: 1.1rem;
    }
    
    .SITE-HEADER h1 {
        font-size: 2rem;
    }
    
    .DIARY-ENTRY h2 {
        font-size: 1.5rem;
    }
    
    .DIARY-ENTRY p {
        font-size: 1.1rem;
    }
    
    
    .MAIN-CONTENT {
        padding: 0 15px;
    }
}

/* emタグ - italicではなく太字にする */
em {
    font-style: normal;
    font-weight: 700;
}

/* カードのスタイル - day_list.erb用 */
.DIARY-DATE-SECTION .card {
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

.DIARY-DATE-SECTION .card-body {
    padding: 1.5rem;
}

/* 日記セクション全体を包むカード */
.MAIN-CONTENT > .card {
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

.MAIN-CONTENT > .card .card-body {
    padding: 1.5rem;
}

/* フッターのリンクホバー時 */
footer a:hover {
    color: var(--color-white) !important;
    text-decoration: none;
}