/* --- block 1 --- */
.blog-article {
            max-width: 820px;
            margin: 0 auto;
            padding: 100px 24px 60px;
        }
        .blog-article h1 {
            font-family: var(--font-display);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--black);
            line-height: 1.2;
            margin-bottom: 32px;
            letter-spacing: -0.02em;
        }
        .blog-article h2 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--black);
            margin: 40px 0 16px;
            line-height: 1.25;
        }
        .blog-article h3 {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--black);
            margin: 28px 0 12px;
        }
        .blog-article h4 {
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--black);
            margin: 20px 0 10px;
        }
        .blog-article p {
            font-size: 0.94rem;
            color: var(--section-text);
            line-height: 1.8;
            margin-bottom: 16px;
        }
        .blog-article ul, .blog-article ol {
            margin: 0 0 16px 24px;
            color: var(--section-text);
            font-size: 0.94rem;
            line-height: 1.8;
        }
        .blog-article li {
            margin-bottom: 8px;
        }
        .blog-article a {
            color: var(--red);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .blog-article a:hover {
            opacity: 0.8;
        }
        .blog-article b, .blog-article strong {
            color: var(--black);
            font-weight: 600;
        }
        .blog-article hr {
            border: none;
            border-top: 1px solid var(--gray-200);
            margin: 40px 0;
        }
        .post-banner {
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: 10px;
            padding: 28px 32px;
            margin-top: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .post-banner .banner-content h4 {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--black);
            margin: 0 0 4px;
        }
        .post-banner .banner-content h5 {
            font-size: 0.88rem;
            font-weight: 400;
            color: var(--section-text);
            margin: 0;
        }
        .post-banner > a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--red);
            color: var(--white);
            padding: 10px 22px;
            border-radius: 6px;
            font-size: 0.88rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.2s;
        }
        .post-banner > a:hover {
            background: var(--red-dark);
            opacity: 1;
        }
        @media (max-width: 768px) {
            .blog-article { padding: 80px 20px 40px; }
            .blog-article h1 { font-size: 1.7rem; }
            .blog-article h2 { font-size: 1.3rem; }
            .post-banner { flex-direction: column; align-items: flex-start; }
        }