@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* ── Design Tokens ───────────────────────────── */
:root {
    /* 브랜드 */
    --teal:         var(--accent);
    --teal-dark:    var(--accent);
    --teal-mid:     var(--accent);
    --teal-pale:    var(--accent-tint);
    --accent-bg:    var(--accent-tint);
    --page-bg:      var(--bg);
    --red:          var(--danger);
    --red-dark:     var(--danger-hover);
    --gold:         var(--accent);

    /* 텍스트 */
    --text-1:     rgba(var(--text-rgb), 0.95);
    --text-2:     var(--text-muted);
    --text-3:     var(--text-muted);

    /* 테두리 / 입력 */
    --border-md:  var(--border);
    --input-bg:   var(--bg);

    /* 상태 */
    --danger:       #DC2626;
    --danger-dark:  var(--danger-hover);
    --danger-pale:  var(--danger-tint);
    --success:      var(--accent);
    --success-pale: var(--accent-tint);
    --warning:      #B45309;
    --warning-pale: var(--warning-tint);
    --purple:       var(--accent);
    --purple-pale:  var(--accent-tint);

    /* SNS 인증 */
    --kakao:        #FEE500;
    --kakao-dark:   #F5DA00;
    --naver:        #03C75A;
    --naver-dark:   #02B350;

    /* 폰트 크기 스케일 (1rem = 16px) */
    --fs-11:  0.6875rem;   /* 11px — 사이드바 버튼 */
    --fs-12:  0.75rem;     /* 12px — 배지, 메타 */
    --fs-13:  0.8125rem;   /* 13px — 보조 텍스트 */
    --fs-14:  0.875rem;    /* 14px — 본문, 버튼 */
    --fs-16:  1rem;        /* 16px — 카드 제목, 레이블 */
    --fs-18:  1.125rem;    /* 18px — 아이콘, 중간 헤딩 */
    --fs-22:  1.375rem;    /* 22px — 섹션 헤딩 */
    --fs-28:  1.75rem;     /* 28px — 큰 헤딩 */
    --fs-32:  2rem;        /* 32px — 히어로 */

    /* 반경 */
    --r:          8px;
    --r-sm:       6px;
    --r-xs:       4px;

    /* 엔진 레이아웃 */
    --sidebar-bg: var(--text);
    --canvas-bg:  var(--bg);
    --sidebar-w:  200px;
    --hdr-h:      52px;
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ────────────────────────────────────── */
html {
    overscroll-behavior-y: auto;
}
body {
    font-family: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
    font-size: var(--fs-14);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.2px;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    -webkit-overflow-scrolling: touch;
}

body:not(.pm-generator) .container,
body:not(.pm-generator) .container-lg,
body:not(.pm-generator) .container-xl,
body:not(.pm-generator) .container-xxl { max-width: 1320px; }

/* ── 글로벌 푸터 (엔진/관리자 페이지 제외 전체 화면 공용) ───── */
/* 화면 하단에 고정 — 콘텐츠가 가려지지 않도록 body에 padding-bottom 보정 */
body:has(.global-footer) {
    padding-bottom: 56px;
}

.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    height: 56px;
    padding: 0 24px;
    border-top: 1px solid rgba(var(--text-rgb), 0.08);
    background: var(--bg);
}

.global-footer .footer-cta-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.global-footer .footer-cta-sub {
    font-size: var(--fs-12);
    color: var(--text);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.global-footer .footer-cta-link {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.2s;
}

.global-footer .footer-cta-link:hover { color: var(--danger); }

.global-footer .footer-copy {
    font-size: var(--fs-12);
    font-weight: 300;
    color: rgba(var(--text-rgb), 0.6);
    margin: 0;
}

.global-footer .footer-link {
    font-size: var(--fs-12);
    color: rgba(var(--text-rgb), 0.4);
    text-decoration: none;
    transition: color 0.2s;
}

.global-footer .footer-link:hover { color: var(--accent); }

.global-footer .footer-links-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.global-footer .footer-link-strong {
    font-weight: 700;
    color: rgba(var(--text-rgb), 0.6);
}

@media (max-width: 768px) {
    body:has(.global-footer) {
        padding-bottom: 76px;
    }
    .global-footer {
        flex-direction: column;
        justify-content: center;
        height: auto;
        padding: 10px 20px;
        gap: 2px;
    }
    .global-footer .footer-copy,
    .global-footer .footer-link {
        display: none;
    }
}

@media (max-width: 480px) {
    .global-footer .footer-cta-sub {
        display: none;
    }
}