@charset "UTF-8";
/**
 * BlogPay Theme - Midnight Blue (미드나잇 블루)
 * 컨셉: 세련된 슬레이트 블루 + 일렉트릭 악센트
 * 타겟: 테크, 금융, 프리미엄 서비스 쇼핑몰
 * - 신뢰감과 전문성 전달
 * - 2026 트렌드 "Mist Blue" 반영
 * - Pretendard 무료 폰트 적용
 */

/* ========================================
   1. 폰트 로드 - 무료 웹폰트
   ======================================== */
/* 본문용: Pretendard */
@import url('../pretendard.css');
/*@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');*/
/* 제목용: IBM Plex Sans KR (테크/금융에 적합) */
/*@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');*/
/* 명조용: MaruBuri */
/*@import url('https://cdn.jsdelivr.net/gh/fonts-archive/MaruBuri/subsets/MaruBuri-dynamic-subset.css');*/

/* 공통 스타일 */
@import url('theme-common.css?2');

/* ========================================
   2. CSS 변수 정의
   ======================================== */
:root {
  /* =============================================
     2.1 Primitive Tokens (원시 팔레트) - Midnight Blue
     - 슬레이트 블루 계열 팔레트
     ============================================= */

  /* Slate Blue Scale (슬레이트 블루 계열) */
  --palette-white: #F8FAFC;       /* 블루틴트 화이트 */
  --palette-gray-50: #F1F5F9;     /* 라이트 슬레이트 */
  --palette-gray-100: #E2E8F0;    /* 슬레이트 100 */
  --palette-gray-200: #CBD5E1;    /* 슬레이트 200 */
  --palette-gray-250: #c2ccd6;    /* 슬레이트 250 */
  --palette-gray-300: #94A3B8;    /* 슬레이트 300 */
  --palette-gray-400: #64748B;    /* 슬레이트 400 */
  --palette-gray-500: #475569;    /* 슬레이트 500 */
  --palette-gray-600: #334155;    /* 슬레이트 600 */
  --palette-gray-700: #1E293B;    /* 다크 슬레이트 */
  --palette-gray-800: #1E293B;    /* 다크 슬레이트 */
  --palette-gray-850: #172032;    /* 딥 슬레이트 */
  --palette-gray-900: #0F172A;    /* 미드나잇 */
  --palette-black: #020617;       /* 딥 미드나잇 */

    /* Slate Blue Scale RGB (슬레이트 블루 계열) */
    --palette-white-rgb:248,250,252;       /* 블루틴트 화이트 */
    --palette-gray-50-rgb:241,245,249;     /* 라이트 슬레이트 */
    --palette-gray-100-rgb:226,232,240;    /* 슬레이트 100 */
    --palette-gray-200-rgb:203,213,225;    /* 슬레이트 200 */
    --palette-gray-250-rgb:184,196,208;    /* 슬레이트 250 */
    --palette-gray-300-rgb:148,163,184;    /* 슬레이트 300 */
    --palette-gray-400-rgb:100,116,139;    /* 슬레이트 400 */
    --palette-gray-500-rgb:71,85,105;    /* 슬레이트 500 */
    --palette-gray-600-rgb:51,65,85;    /* 슬레이트 600 */
    --palette-gray-700-rgb:30,41,59;    /* 다크 슬레이트 */
    --palette-gray-800-rgb:30,41,59;    /* 다크 슬레이트 */
    --palette-gray-850-rgb:23,32,50;    /* 딥 슬레이트 */
    --palette-gray-900-rgb:15,23,42;    /* 미드나잇 */
    --palette-black-rgb:2,6,23;       /* 딥 미드나잇 */

  /* Accent Colors (일렉트릭 블루/시안) */
  --palette-accent-primary: #3B82F6;      /* 일렉트릭 블루 */
  --palette-accent-primary-dark: #2563EB; /* 다크 블루 */
  --palette-accent-secondary: #06B6D4;    /* 시안 */
  --palette-accent-secondary-dark: #0891B2;

  /* Status Colors (블루 톤으로 조정) */
    --palette-red:#ee4f69;
  --palette-green-500: #22C55E;   /* 에메랄드 그린 */
  --palette-yellow-500: #F59E0B;  /* 앰버 */
  --palette-red-500: #EF4444;     /* 레드 */
  --palette-blue-500: #06B6D4;    /* 시안 */

    /* Status Colors RGB */
    --palette-red-rgb:238,79,105;

  /* SNS Colors */
  --palette-kakao: #FEE500;
  --palette-kakao-dark: #F5DC00;
  --palette-naver: #03C75A;
  --palette-naver-dark: #02B350;
  --palette-facebook: #1877F2;
  --palette-facebook-dark: #166FE5;

  /* =============================================
     2.2 Semantic Tokens (의미론적 변수)
     - 실제 요소에는 이 변수들만 사용
     - 테마 전환 시 이 부분만 교체
     ============================================= */

  /* ===== 폰트 ===== */
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-family-title: 'IBM Plex Sans KR', 'Pretendard', sans-serif;  /* 제목/배너용 - 테크/전문성 */
  --font-family-serif: 'MaruBuri', 'Noto Serif KR', serif;            /* 명조/프리미엄용 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== 색상 - 텍스트 (Primitive 참조) ===== */
  --color-text: var(--palette-gray-800);           /* var(--color-text) */
  --color-text-secondary: var(--palette-gray-700); /* var(--color-text-secondary) */
  --color-text-muted: var(--palette-gray-600);     /* var(--color-text-muted) */
  --color-text-light: var(--palette-gray-500);     /* #AAAAAA */
  --color-text-white: var(--palette-white);        /* #FFFFFF */

  /* ===== 색상 - 배경 (Primitive 참조) ===== */
  --color-bg: var(--palette-white);                /* #FFFFFF */
  --color-bg-secondary: var(--palette-gray-200);   /* var(--color-bg-secondary) */
  --color-bg-tertiary: var(--palette-gray-100);    /* #F8F8F8 */
  --color-bg-hover: var(--palette-gray-200);       /* var(--color-bg-secondary) */
  --color-bg-muted: var(--palette-gray-250);       /* var(--color-border-light) */

  /* ===== 색상 - 테두리 (Primitive 참조) ===== */
  --color-border: var(--palette-gray-300);         /* var(--color-border) */
  --color-border-light: var(--palette-gray-250);   /* var(--color-border-light) */
  --color-border-dark: var(--palette-gray-400);    /* #D0D0D0 */
  --color-border-image: rgba(0, 0, 0, 0.06);

  /* ===== 색상 - 포인트 (Primitive 참조) - Midnight Blue ===== */
  --color-primary: var(--palette-accent-primary);        /* 일렉트릭 블루 #3B82F6 */
  --color-primary-hover: var(--palette-accent-primary-dark);  /* 다크 블루 #2563EB */
  --color-primary-light: #93C5FD;                        /* 연한 블루 - 테두리/선택 표시용 */
  --color-primary-light-hover: #60A5FA;                  /* 호버 시 살짝 진하게 */
  --color-accent: var(--palette-accent-secondary);       /* 시안 #06B6D4 */
  --color-accent-hover: var(--palette-accent-secondary-dark); /* #0891B2 */

  /* ===== 색상 - 상태 (Primitive 참조) ===== */
  --color-success: var(--palette-green-500);       /* #28a745 */
  --color-warning: var(--palette-yellow-500);      /* #ffc107 */
  --color-danger: var(--palette-red-500);          /* #dc3545 */
  --color-info: var(--palette-blue-500);           /* #17a2b8 */

  /* ===== 색상 - 아이콘 ===== */
  --color-icon: var(--palette-gray-700);           /* 다크 슬레이트 - 기본 아이콘 */
  --color-icon-hover: var(--palette-accent-primary);  /* 호버 (일렉트릭 블루) */
  --color-icon-badge: var(--color-primary);        /* 배지 배경 (일렉트릭 블루) */
  --color-icon-badge-text: var(--palette-white);   /* 배지 텍스트 */

  /* ===== 색상 - SNS (Primitive 참조) ===== */
  --color-kakao: var(--palette-kakao);             /* #FEE500 */
  --color-kakao-text: #191919;
  --color-kakao-hover: var(--palette-kakao-dark);  /* #F5DC00 */
  --color-naver: var(--palette-naver);             /* #03C75A */
  --color-naver-hover: var(--palette-naver-dark);  /* #02B350 */
  --color-facebook: var(--palette-facebook);       /* #1877F2 */
  --color-facebook-hover: var(--palette-facebook-dark); /* #166FE5 */
  --color-apple: var(--palette-black);             /* #000000 */
  --color-apple-hover: #1a1a1a;
  --color-google: var(--palette-white);            /* #FFFFFF */
  --color-google-hover: var(--palette-gray-100);   /* #F8F8F8 */

  /* ===== 간격 (4px 기반) ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-22: 88px;

  /* ===== 모서리 ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ===== 그림자 (블루 톤) ===== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-top: 0 -2px 10px rgba(15, 23, 42, 0.10);

  /* ===== Primary RGB (rgba 계산용) ===== */
  --color-primary-rgb: 59,130,246;

  /* ===== 트랜지션 ===== */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ===== 그라데이션 (공통) ===== */
  --gradient-height: 200px;
  --gradient-header-to-content: linear-gradient(to bottom, var(--color-bg-secondary) 0%, var(--color-bg) var(--gradient-height));
  --gradient-content-to-footer: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-secondary) var(--gradient-height));
}