@charset "UTF-8";
/* =====================================================================
   온시큐리티 디자인 토큰 (Design Tokens)
   - 모든 페이지가 공유하는 단일 소스. 색상/타이포/레이아웃 값은
     여기서만 정의하고, 각 CSS는 var(--token)으로 참조한다.
   - 로드 순서: tokens.css → shell.css → 페이지별 css
   ===================================================================== */
:root {
  /* ---------- Brand Color (2026-07-30 블루 전환 — 이전 보라: #6d28d9/#8b5cf6/#7c3aed) ---------- */
  --primary:        #1d4ed8;  /* 주 브랜드 컬러 (버튼·링크·강조) — 흰 배경 대비 6.7:1 */
  --primary-light:  #3b82f6;  /* 호버·밝은 강조 — 비텍스트 전용 (흰 배경 3.68:1, 본문 텍스트 금지) */
  --primary-vivid:  #2563eb;  /* 배지·보조 강조 — 흰 배경 5.17:1 */
  --primary-deep:   #1e40af;  /* 프라이머리 버튼 호버·프레스 */
  --primary-soft:   #7cb3fc;  /* 다크 배경(푸터·히어로) 위 텍스트·링크 — surface-dark 대비 8.5:1 */
  --accent:         #00c389;  /* 포인트 그린 */
  --teal:           #0f766e;  /* 블루와 구분되는 보조 축 (구독형 요금·전달 배지 등) */
  --teal-deep:      #115e59;  /* 보조 축 진한 단계 (구독형 5년 헤더 등) */
  --teal-bg:        #e9f7f2;  /* 보조 축 옅은 배경 (구독형 3년 셀) */
  --teal-bg2:       #d8f0e8;  /* 보조 축 배경 진한 단계 (구독형 5년 셀) */

  /* ---------- Base Color ---------- */
  --navy:           #0a1f44;  /* 짙은 배경·그라디언트 시작 */
  --navy-light:     #12295a;  /* 그라디언트 끝 */
  --navy-bright:    #0d3aa0;  /* 페이지 히어로 그라디언트 끝(밝은 블루) */
  --surface-dark:   #0b1524;  /* 다크 섹션 배경 (푸터 등) */
  --ink:            #141c2b;  /* 본문 텍스트 */
  --gray:           #5b6577;  /* 보조 텍스트 */
  --line:           #e4e8ef;  /* 보더·구분선 */
  --bg:             #f5f7fb;  /* 옅은 섹션 배경 */
  --white:          #ffffff;

  /* ---------- Status Color ---------- */
  --success:        #0f7a4d;  /* 충족·완료 상태 */
  --success-bg:     #e6f5ec;
  --success-line:   #abd3bc;  /* 충족 칩 보더 */
  --info-bg:        #eaf1ff;  /* 안내 노트·배지 배경 (블루) */
  --info-line:      #c9dbff;  /* 안내 노트 보더 */
  --neutral:        #6b7488;  /* 중립 카테고리 배지 (유지보수 등) */

  /* ---------- Dark Surface (다크 섹션 텍스트·보더 — 푸터 등) ---------- */
  --dark-ink-strong:#cdd7e4;  /* 다크 배경 위 강조 텍스트 */
  --dark-ink:       #9fb0c4;  /* 다크 배경 위 기본 텍스트 */
  --dark-ink-dim:   #8298b2;  /* 다크 배경 위 보조 텍스트 */
  --dark-ink-faint: #6f849e;  /* 다크 배경 위 캡션·카피라이트 */
  --dark-line:      #1c3049;  /* 다크 섹션 구분선 */
  --dark-line-soft: #2a3f5a;  /* 다크 섹션 칩 보더 */

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", -apple-system, sans-serif;

  /* ---------- Layout ---------- */
  --container:      1280px;   /* 컨텐츠 최대 폭 */
  --head-h:         72px;     /* 고정 헤더 높이 */
  --radius:         14px;     /* 기본 라운드 */
  --section-y:      96px;     /* 메인 섹션 상하 여백 */
  --section-y-sub:  84px;     /* 서브 섹션 상하 여백 */
  --page-hero-h:    288px;    /* 서브 페이지 히어로 최소 높이 (desc 줄 수와 무관하게 통일) */

  /* ---------- Breakpoint ----------
     CSS 표준 제약상 @media 조건에는 var()를 쓸 수 없다.
     아래 토큰이 브레이크포인트의 단일 소스이며,
     @media의 리터럴 값(1024px/768px)은 반드시 이 값과 일치시킬 것.
     JS는 이 토큰을 getComputedStyle로 읽어 사용한다 (on-sub.js Swiper 분기). */
  --bp-tablet:      1024px;   /* ~1024px: 태블릿 (그리드 축소) */
  --bp-mobile:      768px;    /* ~768px: 모바일 (햄버거 메뉴·1열 전환) */

  /* ---------- Icon (Lucide v1.28.0 · lucide.dev · ISC License) ----------
     가상요소(::before/::after) 아이콘용 data URI. 색은 사용하는 규칙에서
     background(원하는 색 또는 currentColor) + mask:var(--icon-*)로 입힌다.
     사용 예: content:"";width:14px;height:14px;background:currentColor;
             -webkit-mask:var(--icon-check) center/contain no-repeat;
             mask:var(--icon-check) center/contain no-repeat;
     본문 콘텐츠 아이콘은 종전대로 인라인 <svg>(Lucide 원본 패스)를 쓴다.
     sparkle·pause·play는 어두운 배경 가독성을 위한 채움형 변형(fill='black'). */
  --icon-arrow-right:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-arrow-down:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --icon-check:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-sparkle:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3C/svg%3E");
  --icon-pause:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='3' width='5' height='18' rx='1'/%3E%3Crect x='5' y='3' width='5' height='18' rx='1'/%3E%3C/svg%3E");
  --icon-download:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --icon-paperclip:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.234 20.252 21 12.3'/%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486'/%3E%3C/svg%3E");
  --icon-play:          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");

  /* ---------- Effect ---------- */
  --shadow-card:    0 18px 40px rgba(10, 31, 68, .10);  /* 카드 호버 */
  --shadow-deep:    0 20px 50px rgba(10, 31, 68, .14);  /* 드롭다운·부유 요소 */
  --shadow-head:    0 6px 20px rgba(10, 31, 68, .08);   /* 스크롤 시 고정 헤더 */
  --primary-glow:   rgba(29, 78, 216, .45);             /* --primary 기반 글로우 (btn-quote 펄스) */
}

/* --bp-mobile(768px)과 동일값 유지 */
@media (max-width: 768px) {
  :root { --head-h: 60px; }
}