/* 公開ページ用の控えめな紙面風スタイルです。 */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    background: #f4f0e5;
    color: #424b3d;
    font-family: serif;
    line-height: 1.8;
}

header {
    padding: 2.5rem 1rem;
    color: #6d6d6d;
    text-align: center;
}

/* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
footer {
    padding: 2.5rem 1rem;
    background: #1d3560;
    color: #e8eef8;
    text-align: center;
}

header > a {
    color: #111;
    font-size: 2rem;
    text-decoration: none;
}

main {
    max-width: 58rem;
    margin: 0 auto;
    padding: 1rem;
}

h1,
h2 {
    line-height: 1.4;
    text-align: center;
}

a {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    color: #2455a5;
}

a:hover {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    color: #1c4687;
}

footer a {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    color: #e8eef8;
}

footer a:hover {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    color: #fff;
}

/* #1072 P3: 本文の長い URL をスマホ幅で折り返す（word-break: break-all は日本語の折り返しを崩すので使わない） */
.post-body {
    overflow-wrap: anywhere;
}

/* #1072 P3: 本文の埋め込み（YouTube の width=560 等）をスマホ幅に収める */
.post-body iframe {
    max-width: 100%;
}

.post-body img,
.hr-photo img {
    max-width: 100%;
    height: auto;
}

.hr-photo {
    margin: 1.5rem 0;
    text-align: center;
}

.linkbutton {
    display: table;
    margin: 0 auto 8px;
    padding: 16px 32px;
    border-radius: 16px;
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    background: #2455a5;
    color: #fff;
    text-decoration: none;
}

.linkbutton:hover {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    background: #1c4687;
    color: #fff;
}

.release-list {
    margin: 0;
}

/* /release/ 一覧のカード（トップの h-release-row の写し）。トップの CSS は読まない */
.release-page {
    /* #1072 P3: 紙と山＋ロゴの青（ユナ確定値） */
    --color-surface: #fffcf3;
    --color-ink: #424b3d;
    --color-muted: #7a806e;
    --color-line: #d4d7c6;
    --color-thumb-bg: #ece6d6;
    --radius-card: 6px;
    --radius-thumb: 0;
    --shadow-sm: 0 1px 3px rgba(66,75,61,.08);
    --shadow-lg: 0 8px 24px rgba(66,75,61,.12);
    --ease-snappy: cubic-bezier(0.22,1,0.36,1);
    --font-sans: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
}
.release-page .h-release-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; border-top: none; margin-top: 0.5rem; font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; color: var(--color-ink); -webkit-font-smoothing: antialiased; }
.release-page .h-release-row { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-line); transition: transform 0.25s var(--ease-snappy), box-shadow 0.25s; }
.release-page .h-release-row:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: inherit; }
.release-page .h-release-thumb { display: block; aspect-ratio: 1; overflow: hidden; background: var(--color-thumb-bg); border-radius: var(--radius-thumb); width: 100%; transition: transform 0.4s var(--ease-snappy); }
.release-page .h-release-row:hover .h-release-thumb { transform: scale(1.06); }
.release-page .h-release-thumb img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; vertical-align: middle; }
.release-page .h-release-meta { padding: 0.85rem 1rem; display: flex; flex-direction: column; flex: 1; }
.release-page .h-release-name { display: block; font-weight: 700; line-height: 1.45; margin-bottom: 0.4rem; font-size: 0.9rem; }
.release-page .h-release-time { font-size: 0.775rem; color: var(--color-muted); margin-top: auto; }
@media (max-width: 900px) { .release-page .h-release-stack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .release-page .h-release-stack { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }

@media (max-width: 1024px) {
    .linkbutton {
        padding: 8px;
    }
}

@media (max-width: 500px) {
    header > a {
        font-size: 1.5rem;
    }

}

/* #1072 P3: 旧記事のアイキャッチ（WP と同じく本文の上） */
.post-eyecatch {
    margin: 1.5em auto;
    text-align: center;
}

.post-eyecatch img {
    max-width: 100%;
    height: auto;
}