/* ============================================
   BookBridge Main Stylesheet
   Single Source of Truth: base/_variables.css
   ============================================ */

/* 1. Design Tokens (단일 소스) */
@import url('base/_variables.css');

/* 2. Global Reset & Base */
@import url('parts/global.css');

/* 3. Layout */
@import url('parts/header.css');
@import url('parts/footer.css');

/* 4. Pages */
@import url('parts/home.css');
@import url('parts/insight.css');
@import url('parts/premium.css');
@import url('parts/premium-featured.css');
@import url('parts/library.css');
@import url('parts/insight-detail.css');
@import url('parts/author.css');
@import url('parts/publisher.css');
@import url('parts/auth.css');
@import url('parts/pages.css');

/* ============================================
   통일된 표기 방식 스타일
   모든 토큰은 _variables.css에서 참조
   ============================================ */

/* 1. 이름 표기 방식 통일 */
.author-name,
.meta-author,
.highlight-author,
.p-author,
.c3-author {
    font-family: var(--font-body);
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--color-primary);
}

/* 2. 날짜 표기 방식 통일 */
.date,
.meta-date,
.highlight-date {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* 3. 구분자(·) 표기 방식 통일 */
.divider,
.meta-divider,
.highlight-divider,
.p-divider {
    color: var(--color-text-muted);
    margin: 0 4px;
}

/* 4. 제목 표기 방식 통일 (기본 스타일) */
.slide-content h2,
.highlight-info h4,
.insight-title,
.p-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--leading-tight);
}

/* 5. 설명 표기 방식 통일 (기본 스타일) */
.slide-content p,
.insight-desc,
.p-desc,
.c3-desc {
    font-family: var(--font-body);
    color: var(--color-text-light);
    line-height: var(--leading-normal);
}

/* 6. 탭 메뉴 표기 방식 통일 */
.tab-menu {
    display: flex;
    gap: var(--space-xs);
}

.tab-menu button {
    font-family: var(--font-body);
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--color-text-muted);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    background: transparent;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.tab-menu button:hover {
    color: var(--color-primary);
}

.tab-menu button.active {
    color: var(--color-primary);
    background: var(--color-primary-tint);
}

/* 7. 카테고리 태그 표기 방식 통일 */
.slide-badge,
.insight-category-badge,
.p-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

/* 슬라이더 배지 (골드 배경) */
.slide-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    background: var(--color-accent);
    color: var(--color-bg-white);
    z-index: 2;
}

/* 일반 카테고리 배지 (네이비 배경) */
.insight-category-badge,
.p-category {
    background-color: var(--color-primary-50);
    color: var(--color-primary);
}