/* 폰트는 css/fonts.css 로컬 호스팅으로 대체 (jsdelivr CDN 제거) */

/* 2. 혹시라도 PHP가 놓치는 구석이 있을까봐 방어막 치기 */
body {
    font-family: 'Pretendard', sans-serif !important;
}

/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0.2
*/

/* =======================================================
   02. VARIABLES & RESET
======================================================= */
:root {
    --point-color:        #C21807;
    --strava-orange:      #FC4C02;
    --strava-orange-dark: #c33a01;
    --text-black:         #111111;
    --text-gray:          #666666;
    --line-light:         #e5e5e5;
    --bg-light:           #f9f9f9;
    --transition:         all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-smooth:  all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast:    all 0.25s ease;
    --transition-ease:    cubic-bezier(0.25, 1, 0.5, 1);
}

/* 메타 슬래시(/) 강제 제거 */
.entry-meta[data-type*="slash"] li::after { display: none !important; content: none !important; }
.entry-meta[data-type*="slash"] li:not(:last-child) { margin-inline-end: 15px !important; }

/* 본문 문단 양끝 정렬 */
.single-post .entry-content p {
    text-align: justify;
    text-justify: inter-character;
}


/* =======================================================
   03. GLOBAL LAYOUT & BLOG GRID
======================================================= */
.home.blog .ct-container-full  { max-width: 1400px; margin: 0 auto; }
.single-post .ct-container-full { max-width: 1100px; margin: 0 auto; }

.blog .entries                      { gap: 32px; }
.blog .ct-post-card                 { display: flex; flex-direction: column; }
.blog .ct-post-card .entry-content  { flex-grow: 1; }
.blog .ct-image-container           { aspect-ratio: 3 / 2; overflow: hidden; }
.blog .ct-image-container img       { width: 100%; height: 100%; object-fit: cover; }

.blog article { transition: var(--transition-fast); }
.blog article:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}


/* =======================================================
   13. POST CONTENT: BASE TYPOGRAPHY
   - 본문 텍스트 기본 설정
   - 텍스트 요소: max-width 900px 중앙 정렬
   - 이미지: 전체 폭 사용
======================================================= */
.entry-content {
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: -0.01em;
}

.entry-content,
.entry-content p {
    font-weight: 400;
}

.entry-content p { margin-bottom: 1.4em; }

.entry-content p,
.entry-content h2,
.entry-content h3,
.entry-content ul,
.entry-content ol {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content figure,
.entry-content img {
    max-width: 100% !important;
    height: auto !important;
}


/* =======================================================
   14. POST CONTENT: H1 TITLE
======================================================= */
.single-post h1.page-title {
    font-weight: 900 !important;
    font-size: 45px !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 0.5em !important;
    line-height: 1.2 !important;
}

@media (max-width: 768px) {
    .single-post h1.page-title { font-size: 30px !important; }
}


/* =======================================================
   15. POST CONTENT: H2 띠지
   - 다크그린 배경 + 아이보리 텍스트
======================================================= */
.entry-content h2 {
    background-color: #2D4B43;
    color: #FDFAF1 !important;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .entry-content h2 {
        font-size: 1.3em;
        padding: 10px 15px;
        margin-top: 1.5em !important;
    }
}

/* =======================================================
   ABOUT PAGE OVERRIDE: Remove H2 background
   - vault-about-page 바디 클래스를 사용하여 확실하게 오버라이드
======================================================= */
/* =======================================================
   ABOUT PAGE OVERRIDE: Remove H2 background
   - html body prefix와 vault-about-page 클래스로 최우선순위 확보
======================================================= */
html body.vault-about-page .entry-content :is(h1, h2, h3, h4),
html body.vault-about-page .vault-landing-container :is(h1, h2, h3, h4),
html body.vault-about-page .hero-title,
html body.vault-about-page .profile-name {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 5px !important;
    margin-bottom: 0.5em !important;
}

/* 다크모드 대응 */
html body.dark-theme.vault-about-page .entry-content :is(h1, h2, h3, h4),
html body.dark-theme.vault-about-page .hero-title,
html body.dark-theme.vault-about-page .profile-name {
    color: var(--about-text-primary, #f0f0ec) !important;
}






/* =======================================================
   16. POST CONTENT: DROP CAP
======================================================= */
.has-drop-cap:not(:focus)::first-letter,
.entry-content .has-drop-cap:not(:focus)::first-letter {
    font-size: 2.8em !important;
    font-weight: 900 !important;
    margin-top: 0.1em !important;
    margin-right: 0.1em !important;
    line-height: 1 !important;
}


/* =======================================================
   17. POST CONTENT: Q-CARD
   - 질문/인용 강조 카드
======================================================= */
.q-card {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    border-left: 8px solid #000;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =======================================================
   18. RESPONSIVE DESIGN
======================================================= */

/* 와이드 스크린 */
@media (min-width: 1800px) {
    .home.blog .ct-container-full { max-width: 1400px; }
}

/* 사이드패널 — 뷰포트 기준 고정으로 전환 */
@media (max-width: 1760px) {
    .floating-title-panel.right-panel { left: auto; right: 20px; margin-left: 0; }
    .floating-title-panel.left-panel  { right: auto; left: 20px; margin-right: 0; }
}

/* 사이드패널 완전 숨김 */
@media (max-width: 1200px) {
    .floating-title-panel { display: none !important; }
}

/* 모바일 */
@media (max-width: 768px) {
    .top-bar            { flex-direction: column !important; gap: 20px; margin-bottom: 40px; align-items: center !important; }
    .top-bar-side:first-child { display: none; }
    .now-caption        { margin-bottom: 20px; }

    /* NOW 타임라인 도트 모바일 위치 */
    .now-item::after { left: 20px; top: 18px; transform: none; }
    .now-item:hover::after { animation: dotBreathingMobile 1.2s ease-in-out infinite; }
}

@keyframes dotBreathingMobile {
    0%, 100% { transform: scale(1.2); }
    50%       { transform: scale(2.0); }
}

/* =======================================================
   20. 메뉴 카테고리 숫자 스타일
======================================================= */
.menu-category-count {
    font-size: 1em;
    color: #FC4C02;
    opacity: 0.7;
    margin-left: 8px;
    vertical-align: middle;
}