@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Graduate&family=Gugi&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light Mode Variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-glass-heavy: rgba(255, 255, 255, 0.9);
    --bg-hover: #f0f2f3;

    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    /* 기존 페이지 스타일과 새 공통 컴포넌트가 함께 쓰는 의미 기반 별칭 */
    --text-tertiary: var(--text-muted);
    --text-sub: var(--text-secondary);

    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-dark: var(--border-medium);

    --primary-color: #49c48d;
    --primary-hover: #3aa878;
    --primary-bg-light: rgba(73, 196, 141, 0.12);
    --primary: var(--primary-color);
    --primary-rgb: 73, 196, 141;
    --error: #ef4444;
    --accent: var(--error);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 12px 36px rgba(17, 24, 39, 0.08);

    --glass-border: 1px solid rgba(255, 255, 255, 0.6);

    /* Common Constants */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-round: var(--radius-pill);
    --control-height: 44px;
    --max-content-width: 1400px;

    /* Figma 시안 공통 셸 (사이드바/헤더는 라이트·다크 공통 검정) */
    --bg-page: #d9d9d9;
    --chrome-bg: #000000;
    --chrome-text: #ffffff;
    --chrome-text-muted: rgba(255, 255, 255, 0.65);
    --chrome-hover: rgba(255, 255, 255, 0.12);
    --header-height: 72px;
    --font-display: 'Gugi', 'Pretendard', sans-serif;
    --font-logo: 'Graduate', 'Gugi', 'Pretendard', sans-serif;

    /* 본문 리듬. 글쓰기 편집기와 게시글 화면이 같은 값을 써야 "쓴 대로 보인다".
       모바일에서는 아래 미디어쿼리가 이 값만 줄이므로 두 화면이 함께 좁아진다. */
    --content-font-size: 1.0625rem;
    --content-line-height: 1.75;
    --content-gap: 0.9rem;
    /* 문단 사이 */
    --content-section-gap: 1.6rem;
    /* 제목 위 */
    --content-media-gap: 1.15rem;
    /* 이미지·임베드·인용 위아래 */
    --content-h1: 1.7rem;
    --content-h2: 1.4rem;
    --content-h3: 1.18rem;
    --content-media-radius: 10px;
}

@media (max-width: 768px) {
    :root {
        --content-font-size: 1rem;
        --content-line-height: 1.7;
        --content-gap: 0.75rem;
        --content-section-gap: 1.25rem;
        --content-media-gap: 0.9rem;
        --content-h1: 1.42rem;
        --content-h2: 1.24rem;
        --content-h3: 1.08rem;
    }
}

[data-theme="dark"] {
    /* Dark Mode Variables */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #252525;
    --bg-glass: rgba(30, 30, 30, 0.7);
    --bg-glass-heavy: rgba(30, 30, 30, 0.9);
    --bg-hover: #2c2c2c;

    --text-primary: #e5e5e5;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --text-inverse: #1a1a1a;

    --border-light: #2d3748;
    --border-medium: #4a5568;
    --border-color: rgba(255, 255, 255, 0.1);

    --primary-color: #49c48d;
    --primary-hover: #5fd6a1;
    --primary-bg-light: rgba(73, 196, 141, 0.15);

    --bg-page: #121212;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 14px 42px rgba(0, 0, 0, 0.32);

    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.content-area {
    width: 100%;
}