@charset "UTF-8";

/* ============================================================
   Blog page (subpage/Blog.html)
   Hashnode 헤드리스: js/blog.js 가 API 로 글을 불러와 여기에 렌더링.
   기존 디자인 토큰 재사용: .box(프로스티드 카드), #FFCC00 액센트,
   Druk 디스플레이 폰트, 1440px 컨테이너
   ============================================================ */

.blog-main { width: 100%; }

.blog-hero,
.blog-block { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* ---------- Hero ---------- */
.blog-hero { padding-top: 200px; padding-bottom: 20px; }
.blog-hero__eyebrow { font-size: 2rem; font-weight: 400; line-height: 1.4; color: #FFCC00; letter-spacing: 0.02em; margin-bottom: 20px; }
.blog-hero h2 { font-family: 'Druk'; font-size: 8rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: #fff; }
.blog-hero__sub { font-size: 2rem; font-weight: 400; line-height: 1.6; color: #888; margin-top: 24px; max-width: 720px; }

.blog-block { margin-top: 50px; padding-bottom: 120px; }

/* ---------- Post list (grid of cards) ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* .box(글래스 카드) 를 기반으로 하고, 링크/호버만 확장 */
.blog-card { padding: 0; overflow: hidden; text-decoration: none; transition: transform 0.2s ease; }
.blog-card:hover { transform: translateY(-6px); }
.blog-card__cover { width: 100%; height: 200px; background: #ffffff10 center/cover no-repeat; flex: 0 0 auto; }
.blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 26px 30px 30px; flex: 1 1 auto; }
.blog-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-card__tag { font-size: 1.3rem; line-height: 1; color: #FFCC00; background: #ffcc0018; border: 1px solid #ffcc0040; border-radius: 50px; padding: 6px 12px; }
.blog-card__title { font-size: 2.6rem; font-weight: 700; line-height: 1.25; color: #fff; }
.blog-card__brief { font-size: 1.7rem; font-weight: 400; line-height: 1.55; color: #aaa; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { margin-top: auto; font-size: 1.5rem; color: #888; display: flex; gap: 10px; align-items: center; }
.blog-card__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Single post view ---------- */
.blog-post { max-width: 820px; margin: 0 auto; }
.blog-post__back { display: inline-flex; align-items: center; gap: 8px; font-size: 1.7rem; color: #888; text-decoration: none; margin-bottom: 30px; transition: color 0.2s; }
.blog-post__back:hover { color: #fff; }
.blog-post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.blog-post__title { font-family: 'Druk'; font-size: 5rem; font-weight: 500; line-height: 1.05; color: #fff; margin-bottom: 20px; }
.blog-post__meta { font-size: 1.6rem; color: #888; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.blog-post__cover { width: 100%; border-radius: 20px; margin-bottom: 40px; }

/* 본문(Hashnode 에서 온 HTML) 타이포그래피 — 리셋 font-size:10px 때문에 rem 명시 필요 */
.blog-post__content { font-size: 1.9rem; line-height: 1.75; color: #d5d5d5; }
.blog-post__content > * + * { margin-top: 24px; }
.blog-post__content h1 { font-size: 3.6rem; font-weight: 700; line-height: 1.2; color: #fff; margin-top: 48px; }
.blog-post__content h2 { font-size: 3rem; font-weight: 700; line-height: 1.25; color: #fff; margin-top: 44px; }
.blog-post__content h3 { font-size: 2.4rem; font-weight: 700; line-height: 1.3; color: #fff; margin-top: 36px; }
.blog-post__content h4 { font-size: 2.1rem; font-weight: 700; color: #fff; margin-top: 30px; }
.blog-post__content a { color: #FFCC00; text-decoration: underline; text-underline-offset: 3px; }
.blog-post__content ul, .blog-post__content ol { padding-left: 2.6rem; }
.blog-post__content li { margin-top: 10px; }
.blog-post__content img { max-width: 100%; height: auto; border-radius: 16px; }
.blog-post__content blockquote { border-left: 3px solid #FFCC00; padding: 4px 0 4px 24px; color: #aaa; font-style: italic; }
.blog-post__content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; background: #ffffff12; padding: 3px 8px; border-radius: 6px; }
.blog-post__content pre { background: #ffffff0d; border: 1px solid #ffffff20; border-radius: 16px; padding: 24px; overflow-x: auto; }
.blog-post__content pre code { background: none; padding: 0; font-size: 1.5rem; line-height: 1.6; }
.blog-post__content hr { border: none; border-top: 1px solid #ffffff20; margin: 40px 0; }

/* ---------- States (loading / empty / error) ---------- */
.blog-state { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: #888; }
.blog-state h3 { font-size: 2.6rem; color: #fff; margin-bottom: 14px; }
.blog-state p { font-size: 1.8rem; line-height: 1.6; }
.blog-state .pdfDownload { margin-top: 24px; }

.blog-spinner { width: 40px; height: 40px; margin: 0 auto 24px; border: 3px solid #ffffff20; border-top-color: #FFCC00; border-radius: 50%; animation: blog-spin 0.8s linear infinite; }
@keyframes blog-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .blog-hero, .blog-block { padding-left: 20px; padding-right: 20px; }
    .blog-hero { padding-top: 150px; }
    .blog-hero h2 { font-size: 5rem; }
    .blog-grid { grid-template-columns: 1fr; gap: 24px; }
    .blog-post__title { font-size: 3.4rem; }
    .blog-post__content { font-size: 1.8rem; }
}