/*
Theme Name: kenji-shigunaru child
Theme URI: https://kenji-shigunaru.com/
Description: AI賢治の日本株投資 — SWELL の子テーマ。Wired.jp 風のタイポグラフィとレイアウト調整。Noto Serif JP + Playfair Display、深紅アクセント、広い行間・余白、テーブル可読性向上、ヒーロー画像全幅、引用・リンクスタイル等。
Author: AI賢治 / knocksair
Template: swell
Version: 0.1.0
Text Domain: kenji-shigunaru-child
*/

/* ---------------------------------------------------------------------
 * Google Fonts
 * --------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Noto+Serif+JP:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');

/* ---------------------------------------------------------------------
 * Design tokens
 * --------------------------------------------------------------------- */
:root {
    --kenji-font-serif-jp: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    --kenji-font-serif-en: 'Playfair Display', 'Times New Roman', serif;
    --kenji-font-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
    --kenji-color-text: #1a1a1a;
    --kenji-color-text-muted: #555;
    --kenji-color-bg: #fdfdfb;
    --kenji-color-accent: #8B0000;
    --kenji-color-accent-deep: #0A2540;
    --kenji-color-rule: #d0d0c8;
    --kenji-color-table-stripe: #f6f5f0;
}

/* ---------------------------------------------------------------------
 * Base typography
 * --------------------------------------------------------------------- */
body {
    background: var(--kenji-color-bg);
    color: var(--kenji-color-text);
    font-family: var(--kenji-font-serif-jp);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.015em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading family + weights (SWELL の class も network 的に上書き) */
h1, h2, h3, h4, h5, h6,
.entry-title, .post-title, .p-postList__title, .p-postTitle, .c-postTitle {
    font-family: var(--kenji-font-serif-jp);
    font-weight: 700;
    color: var(--kenji-color-text);
    line-height: 1.4;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
 * Single post title (記事タイトル h1)
 * SWELL: .p-postTitle / .c-postTitle / .entry-title
 * --------------------------------------------------------------------- */
.single .p-postTitle,
.single .c-postTitle,
.single h1.entry-title,
.page .p-postTitle,
.page .c-postTitle,
.page h1.entry-title {
    font-size: clamp(1.9em, 4vw, 2.6em);
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
 * In-post headings
 * SWELL の post body wrapper: .l-article, .p-postContent, .entry-content, .post_content
 * --------------------------------------------------------------------- */
.l-article h2,
.p-postContent h2,
.entry-content h2,
.post_content h2 {
    font-size: 1.7em;
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding: 0 0 0.4em 0;
    border-left: none;
    border-bottom: 2px solid var(--kenji-color-accent);
    background: none;
    color: var(--kenji-color-text);
}

.l-article h3,
.p-postContent h3,
.entry-content h3,
.post_content h3 {
    font-size: 1.3em;
    margin-top: 2em;
    margin-bottom: 0.8em;
    padding-left: 0.8em;
    border-left: 4px solid var(--kenji-color-accent);
    border-bottom: none;
    background: none;
}

.l-article h4,
.p-postContent h4,
.entry-content h4,
.post_content h4 {
    font-size: 1.1em;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    color: var(--kenji-color-text-muted);
    border: none;
    background: none;
}

/* ---------------------------------------------------------------------
 * Paragraphs
 * --------------------------------------------------------------------- */
.l-article p,
.p-postContent p,
.entry-content p,
.post_content p {
    margin: 0 0 1.5em 0;
    text-align: justify;
    text-justify: inter-character;
}

/* ---------------------------------------------------------------------
 * Links
 * --------------------------------------------------------------------- */
.l-article a,
.p-postContent a,
.entry-content a,
.post_content a {
    color: var(--kenji-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.l-article a:hover,
.p-postContent a:hover,
.entry-content a:hover,
.post_content a:hover {
    color: var(--kenji-color-accent-deep);
    text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
 * Hero image (記事冒頭の <figure class="hero-image">)
 * --------------------------------------------------------------------- */
.hero-image {
    margin: 0 auto 2.5em;
    width: 100%;
    max-width: 1200px;
}
.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.hero-image figcaption {
    text-align: center;
    font-family: var(--kenji-font-serif-jp);
    font-size: 0.92em;
    color: var(--kenji-color-text-muted);
    font-style: italic;
    margin-top: 0.7em;
    padding: 0 1em;
}

/* ---------------------------------------------------------------------
 * Flowchart image
 * --------------------------------------------------------------------- */
.flowchart-image img {
    display: block;
    margin: 1em auto;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------
 * Tables — Wired 風（罫線シンプル、ヘッダ強調、ストライプ）
 * SWELL の wp-block-table も対象
 * --------------------------------------------------------------------- */
.l-article table,
.p-postContent table,
.entry-content table,
.post_content table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-family: var(--kenji-font-serif-jp);
    font-size: 0.95em;
    border-top: 2px solid var(--kenji-color-text);
    border-bottom: 2px solid var(--kenji-color-text);
}
.l-article table thead th,
.p-postContent table thead th,
.entry-content table thead th,
.post_content table thead th,
.wp-block-table table thead th {
    background: transparent;
    color: var(--kenji-color-text);
    font-family: var(--kenji-font-sans);
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--kenji-color-text);
    border-right: none;
}
.l-article table td,
.p-postContent table td,
.entry-content table td,
.post_content table td,
.wp-block-table table td {
    padding: 0.9em 1em;
    border-bottom: 1px solid var(--kenji-color-rule);
    border-right: none;
    vertical-align: top;
    line-height: 1.7;
}
.l-article table tbody tr:nth-child(even),
.p-postContent table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
.post_content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even) {
    background: var(--kenji-color-table-stripe);
}
.l-article table tbody tr:last-child td,
.p-postContent table tbody tr:last-child td,
.entry-content table tbody tr:last-child td,
.post_content table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------------------
 * Blockquote
 * --------------------------------------------------------------------- */
.l-article blockquote,
.p-postContent blockquote,
.entry-content blockquote,
.post_content blockquote {
    font-family: var(--kenji-font-serif-jp);
    font-size: 1.15em;
    font-style: italic;
    line-height: 1.8;
    color: var(--kenji-color-text-muted);
    border-left: 4px solid var(--kenji-color-accent);
    padding: 0.5em 0 0.5em 1.5em;
    margin: 2em 0;
    background: transparent;
}

/* ---------------------------------------------------------------------
 * Lists
 * --------------------------------------------------------------------- */
.l-article ul, .l-article ol,
.p-postContent ul, .p-postContent ol,
.entry-content ul, .entry-content ol,
.post_content ul, .post_content ol {
    margin: 1em 0 1.5em 1.2em;
    padding: 0;
}
.l-article li,
.p-postContent li,
.entry-content li,
.post_content li {
    margin-bottom: 0.5em;
    line-height: 1.85;
}

/* ---------------------------------------------------------------------
 * Inline / block code
 * --------------------------------------------------------------------- */
.l-article code, .p-postContent code, .entry-content code, .post_content code {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
    background: var(--kenji-color-table-stripe);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--kenji-color-accent-deep);
}
.l-article pre, .p-postContent pre, .entry-content pre, .post_content pre {
    background: #f3f2ec;
    border-left: 4px solid var(--kenji-color-text-muted);
    padding: 1em 1.2em;
    overflow-x: auto;
    font-size: 0.9em;
    margin: 1.5em 0;
}

/* Mermaid 動的レンダリング用 (MerPress) — 描画コンテナの中央寄せ */
.l-article pre.mermaid,
.p-postContent pre.mermaid,
.entry-content pre.mermaid,
.post_content pre.mermaid {
    background: transparent;
    border: none;
    padding: 1em 0;
    margin: 2em auto;
    text-align: center;
    overflow: visible;
}

/* ---------------------------------------------------------------------
 * Horizontal rule
 * --------------------------------------------------------------------- */
.l-article hr, .p-postContent hr, .entry-content hr, .post_content hr {
    border: none;
    border-top: 1px solid var(--kenji-color-rule);
    margin: 2.5em 0;
}

/* ---------------------------------------------------------------------
 * YMYL footer disclaimer
 * --------------------------------------------------------------------- */
.l-article p.ymyl-disclaimer,
.p-postContent p.ymyl-disclaimer,
.entry-content p.ymyl-disclaimer,
.post_content p.ymyl-disclaimer {
    font-size: 0.85em;
    color: var(--kenji-color-text-muted);
    background: var(--kenji-color-table-stripe);
    padding: 1em 1.2em;
    border-left: 3px solid var(--kenji-color-rule);
    line-height: 1.7;
    margin-top: 2em;
}

/* ---------------------------------------------------------------------
 * Global navigation (SWELL: .l-header__gnav, .c-gnavWrap)
 * --------------------------------------------------------------------- */
.l-header, .c-gnav, .c-gnavWrap, .l-header__gnav {
    font-family: var(--kenji-font-sans);
    letter-spacing: 0.05em;
}
.c-gnav a, .c-gnavWrap a {
    font-weight: 500;
    font-size: 0.92em;
    color: var(--kenji-color-text);
}
.c-gnav a:hover, .c-gnavWrap a:hover {
    color: var(--kenji-color-accent);
}

/* ---------------------------------------------------------------------
 * Site title / header logo
 * --------------------------------------------------------------------- */
.c-siteTitle a, .p-headLogo a, .c-siteTitle__name {
    font-family: var(--kenji-font-serif-jp);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kenji-color-text);
}

/* ---------------------------------------------------------------------
 * Post list cards
 * --------------------------------------------------------------------- */
.p-postList__title, .p-postSlider__title {
    font-family: var(--kenji-font-serif-jp);
    font-weight: 700;
    line-height: 1.35;
}
.p-postList__excerpt, .p-postSlider__excerpt {
    font-size: 0.95em;
    color: var(--kenji-color-text-muted);
    line-height: 1.7;
}

/* Category label */
.cat-label, .p-postList__cat, .c-postThumb__cat {
    font-family: var(--kenji-font-sans);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--kenji-color-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 0;
}

/* ---------------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------------- */
.l-footer {
    font-family: var(--kenji-font-sans);
    background: #1a1a1a;
    color: #ccc;
    font-size: 0.88em;
}
.l-footer a {
    color: #fff;
}

/* ---------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.85;
    }
    .l-article h2,
    .p-postContent h2,
    .entry-content h2,
    .post_content h2 {
        font-size: 1.4em;
    }
    .hero-image figcaption {
        font-size: 0.85em;
    }
}