/* tracker-detail.css — 상세 페이지 전용 스타일 v2 */

/* ======================================
   1. 기본 & 공통
====================================== */
body {
    margin: 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    background-color: #f4f6f9;
    color: #222;
    overflow-x: hidden;
}

/* ======================================
   2. GNB (tracker.css와 통일)
====================================== */
.gnb { width: 100%; background: #fff; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 4px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 1000; }
.gnb-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 60px; }
.gnb-logo { font-size: 1.2rem; font-weight: 700; color: #1a0dab; text-decoration: none; }
.gnb-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.gnb-menu a { text-decoration: none; color: #333; font-weight: 500; padding: 8px; transition: color .2s; }
.gnb-menu a:hover { color: #004098; }
.hamburger { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 8px; color: #333; }

/* ======================================
   3. 히어로 헤더 (tracker.html과 동일 톤)
====================================== */
.detail-hero {
    background: linear-gradient(135deg, #0052b5 0%, #004098 50%, #003070 100%);
    border-bottom: 4px solid #FFD700;
    padding: 2rem 20px 2.2rem;
    position: relative;
    overflow: hidden;
}
.detail-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,215,0,.07) 0%, transparent 70%);
    pointer-events: none;
}
.detail-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) 280px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 28px;
    position: relative;
}
.hero-content {
    padding: 0 2.5rem; /* 본문 텍스트 좌우 여백과 동일하게 정렬 */
}
.hero-category-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .8rem;
    background: #95a5a6;
}
.hero-title {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.35;
}
.hero-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    color: rgba(255,255,255,.75);
    font-size: .9rem;
}
.hero-divider { opacity: .4; }
.hero-views, .hero-read-time, .hero-date { font-size: .85rem; }

/* ======================================
   4. 레이아웃
====================================== */
.detail-container {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) 280px;
    max-width: 1200px;
    margin: 28px auto;
    gap: 28px;
    padding: 0 20px;
}
.detail-main-content {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    padding: 2rem 2.5rem;
    min-width: 0; /* overflow 방지 */
}

/* ======================================
   5. 본문 타이포그래피
====================================== */
.summary-body p {
    font-size: 1.08rem;
    line-height: 1.95;
    color: #333;
    margin: 0 0 1.4rem;
}
.summary-body .summary-lead {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.8;
}

/* ======================================
   6. 관련 자료 섹션
====================================== */
.links-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
}
.links-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 1rem;
}
#link-previews-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* 링크 카드 */
.link-preview-card {
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s, transform .2s;
}
.link-preview-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.card-inner-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.preview-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #f0f0f0;
}
.preview-info {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}
.preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.preview-title {
    font-size: .95rem;
    font-weight: 700;
    color: #222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.preview-category {
    font-size: .72rem;
    font-weight: 700;
    color: #e67e22;
    background: #fff8ee;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.preview-description {
    font-size: .85rem;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.preview-sitename {
    font-size: .78rem;
    color: #aaa;
    margin-top: auto;
}

/* 스켈레톤 로더 */
.link-skeleton {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
}
.sk-img { height: 120px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk-info { padding: .85rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.sk-line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk-title { width: 85%; }
.sk-desc  { width: 100%; }
.sk-site  { width: 45%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* fallback 링크 */
.link-fallback .fallback-link-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.link-fallback a { color: #004098; font-size: .95rem; word-break: break-all; }

/* ======================================
   7. ★ 소통 섹션 (반응 + 공유)
====================================== */
.interaction-section {
    margin: 2.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 2px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 공유하기 기능과 행보 평가 사이 여백 확보 */
}

/* 이모지/SVG 반응 */
.reaction-label, .share-label {
    font-size: .9rem;
    font-weight: 700;
    color: #555;
    margin: 0 0 .75rem;
    text-align: center;
}
.reaction-buttons {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.reaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .7rem 1.2rem;
    border: 2px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: all .2s;
    min-width: 80px;
    font-family: inherit;
    color: #666; /* SVG 기본 색상 상속용 */
}
.reaction-btn:hover {
    border-color: #004098;
    background: #f0f5ff;
    color: #004098;
    transform: translateY(-2px);
}
.reaction-btn.reacted {
    border-color: #004098;
    background: #e8f0fe;
    color: #004098;
}
.reaction-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
}
.reaction-emoji svg {
    width: 28px;
    height: 28px;
    transition: transform .2s, fill .2s;
}
.reaction-btn.reacted .reaction-emoji svg {
    fill: #004098; /* 클릭 시 속 채우기 */
}
.reaction-text  { font-size: .8rem; color: inherit; font-weight: 600; margin-top: 2px; }
.reaction-count {
    font-size: .85rem;
    font-weight: 700;
    color: #004098;
    background: #e8f0fe;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
}
.reaction-btn.reacted .reaction-count {
    background: #004098;
    color: #fff;
}
/* 클릭 바운스 애니메이션 */
@keyframes bounce {
    0%,100% { transform: translateY(-2px) scale(1); }
    50%      { transform: translateY(-6px) scale(1.1); }
}
.reaction-btn.bounce { animation: bounce .35s ease; }

/* 공유 버튼 */
.share-buttons {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}
.share-btn {
    padding: .55rem 1.2rem;
    border: none;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.share-copy    { background: #f0f0f0; color: #333; }
.share-kakao   { background: #FEE500; color: #3C1E1E; }
.share-twitter { background: #000; color: #fff; }
.share-btn:hover { opacity: .85; transform: translateY(-1px); }
.copy-success {
    display: block;
    text-align: center;
    font-size: .85rem;
    color: #27ae60;
    margin-top: .4rem;
    font-weight: 600;
}

/* ======================================
   8. 광고 영역
====================================== */
.ad-banner-top,
.ad-banner-mid,
.ad-banner-bottom,
.ad-sidebar {
    overflow: hidden; /* 빈 ins 요소가 레이아웃 침범 방지 */
}
.ad-banner-top  { margin-bottom: 1.5rem; min-height: 90px; }
.ad-banner-mid  { margin: 2rem 0; min-height: 90px; }
.ad-banner-bottom { margin-top: 1.5rem; min-height: 90px; }
.ad-sidebar     { min-height: 250px; }

/* 광고가 비었을 때 ins 요소가 공간 차지하지 않도록 */
.adsbygoogle {
    transition: opacity .3s;
}
.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
.ad-banner-top:has(.adsbygoogle[data-ad-status="unfilled"]),
.ad-banner-mid:has(.adsbygoogle[data-ad-status="unfilled"]),
.ad-banner-bottom:has(.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* ======================================
   9. 이전/다음 내비
====================================== */
.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 1.2rem;
    margin-top: 1.5rem;
    gap: .5rem;
}
.post-nav a, .post-nav button {
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    max-width: 38%;
    overflow: hidden;
}
.prev-post, .next-post {
    background: #004098;
    color: #fff;
}
.prev-post:hover, .next-post:hover { background: #003070; }
.nav-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 180px;
}
.back-to-list {
    background: #f0f0f0;
    color: #333;
    flex-shrink: 0;
}
.back-to-list:hover { background: #e0e0e0; }

/* ======================================
   10. 사이드바
====================================== */
.detail-sidebar { position: sticky; top: 80px; align-self: start; }

.related-posts { margin-top: 1.5rem; background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; overflow: hidden; }
.related-posts h3 { margin: 0; padding: .9rem 1rem; font-size: .95rem; font-weight: 700; border-bottom: 1px solid #f0f0f0; }
#related-posts-list { list-style: none; padding: 0; margin: 0; }

.related-item { border-bottom: 1px solid #f5f5f5; }
.related-item:last-child { border-bottom: none; }
.related-item a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .5rem;
    padding: .75rem 1rem;
    text-decoration: none;
    color: #333;
    transition: background .15s;
}
.related-item a:hover { background: #f8f9fa; }
.related-item.related-active a { background: #f0f5ff; }

.related-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    grid-row: 1 / 3;
    align-self: center;
}
.related-title {
    font-size: .85rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.related-date { font-size: .75rem; color: #aaa; grid-column: 2; }

/* 스켈레톤 */
.related-skeleton {
    height: 56px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-bottom: 1px solid #f5f5f5;
}

/* ======================================
   11. 푸터
====================================== */
.site-footer { background: #f4f4f4; color: #444; padding: 24px 16px; font-size: 14px; text-align: center; border-top: 2px solid #ccc; margin-top: 40px; }
.footer-inner { max-width: 960px; margin: 0 auto; }
.footer-links { margin-bottom: 16px; }
.site-footer a { color: #006699; text-decoration: none; margin: 0 8px; font-weight: 700; }
.site-footer a:hover { text-decoration: underline; }

/* ======================================
   12. 모바일 반응형
====================================== */
@media screen and (max-width: 900px) {
    .detail-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .hero-content {
        padding: 0;
    }
    .detail-container {
        grid-template-columns: 1fr;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    .detail-main-content {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 1.2rem 16px;
    }
    .detail-sidebar {
        position: static;
        padding: 0 16px 20px;
    }
    .hero-title { font-size: 1.5rem; }
    .detail-hero { padding: 1.5rem 16px 1.8rem; }
    #link-previews-container { grid-template-columns: 1fr; }
    .nav-title { max-width: 100px; }

    /* 리액션 버튼 모바일 최적화 (1줄 배치) */
    .reaction-buttons { gap: .3rem; justify-content: space-between; }
    .reaction-btn { 
        min-width: 0; 
        padding: .5rem .3rem; 
        flex: 1; 
    }
    .reaction-emoji svg { width: 22px; height: 22px; }
    .reaction-text { font-size: .75rem; }

    /* 모바일에서 광고 공백 제한 */
    .ad-banner-top  { min-height: 0; margin-bottom: .5rem; }
    .ad-banner-mid  { min-height: 0; margin: 1rem 0; }
    .ad-banner-bottom { min-height: 0; margin-top: .5rem; }
    .ad-sidebar { min-height: 0; }
}

@media screen and (max-width: 768px) {
    .hamburger { display: block; flex-shrink: 0; }
    .gnb-logo { font-size: .95rem; }
    .gnb-inner { justify-content: space-between; padding: 0 12px; }
    .gnb-menu {
        display: none;
        position: absolute;
        top: 60px; left: 0; right: 0;
        background: white;
        flex-direction: column;
        padding: 8px 0;
        border-bottom: 1px solid #e0e0e0;
        box-shadow: 0 4px 8px rgba(0,0,0,.1);
        z-index: 999;
    }
    .gnb-menu.open { display: flex; }
    .gnb-menu li { width: 100%; }
    .gnb-menu a { display: block; padding: 14px 24px; border-bottom: 1px solid #f0f0f0; }
    .hero-title { font-size: 1.3rem; }
}