/* ============================================================
   GBLS 누리집 디자인 토큰 — KRDS 기준
   관리 웹 public/css/krds-tokens.css 와 같은 값이다(색·모서리·간격·초점).
   누리집에서만 더한 값은 "SITE" 구획에 따로 모았다.
   index.html / design-system.html 은 시안이라 값을 인라인으로 적었다.
   구현할 때는 인라인 hex 를 아래 변수로 바꾼다(값은 1:1 대응).
   ============================================================ */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  /* Brand / action — 파랑은 행위(버튼·링크·활성·초점)에만 */
  --krds-primary:        #256ef4;
  --krds-primary-hover:  #0b50d0; /* 활성 글자, 연한 바탕 위 파란 글자 */
  --krds-primary-active: #083891; /* 눌림, 짙은 구획 바탕(정품 확인) */
  --krds-primary-soft:   #ecf2fe; /* 보조 버튼 바탕, 라벨 칩 */
  --krds-secondary:      #346fb2;
  --krds-point:          #d63d4a;

  /* Ink / surface */
  --krds-fg:             #1e2124; /* 제목 */
  --krds-body:           #464c53; /* 본문 */
  --krds-muted:          #6d7882; /* 흰 바탕에서만(4.5:1). 회색 바탕 위에는 --krds-line-strong */
  --krds-canvas:         #ffffff;
  --krds-surface:        #f4f5f6;

  /* Line */
  --krds-line:           #cdd1d5;
  --krds-line-strong:    #58616a; /* 입력 테두리, 회색 바탕 위 보조 글자 */
  --krds-line-disabled:  #b1b8be;

  /* System */
  --krds-danger:         #de3412;
  --krds-warning:        #ffb114; /* 바탕 전용, 글자는 --krds-fg */
  --krds-success:        #228738;
  --krds-info:           #0b78cb;

  /* Radius — 12px 보다 둥근 모서리는 쓰지 않는다(기기 목업 제외) */
  --krds-radius-sm:   4px;   /* 배지 */
  --krds-radius-md:   6px;   /* 버튼 */
  --krds-radius-lg:   8px;   /* 입력, 화면 이미지, 목업 안 항목 */
  --krds-radius-xl:   12px;  /* 카드, 구획 패널, 떠 있는 헤더 */
  --krds-radius-pill: 1000px;

  /* Spacing (4px base) */
  --krds-space-xs: 2px;  --krds-space-sm: 4px;  --krds-space-md: 8px;
  --krds-space-base: 16px; --krds-space-lg: 24px; --krds-space-xl: 32px; --krds-space-xxl: 40px;

  /* Focus */
  --krds-focus-ring: 0 0 0 4px rgba(37, 110, 244, .35);

  /* Type */
  --krds-font-body: "Pretendard GOV", "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --krds-letter-spacing: 0; /* 한글 자간 압축 금지 */

  /* ---------------- SITE (누리집 전용 추가값) ---------------- */
  --site-max-width:      1200px;
  --site-gutter:         clamp(16px, 4vw, 32px);
  --site-section-gap:    clamp(96px, 12vw, 160px);

  --site-brand-mark:     #3049a6; /* 로고 아이콘 색. 토큰으로 쓰지 말 것 */
  --site-success-text:   #1a6b2c; /* 연한 초록 바탕(#eaf6ec) 위 글자 */
  --site-success-soft:   #eaf6ec;
  --site-scan-accent:    #3ddc97; /* 짙은 바탕 위 스캔선·강조 한정 */
  --site-on-dark-body:   #d2dcf5; /* --krds-primary-active 바탕 위 본문 (7.7:1) */
  --site-on-dark-label:  #a9c4fa; /* --krds-primary-active 바탕 위 라벨 (6.0:1) */

  /* Type scale */
  --site-display: 700 clamp(38px, 5.4vw, 66px)/1.22 var(--krds-font-body);
  --site-h2:      700 clamp(28px, 3.4vw, 42px)/1.3  var(--krds-font-body);
  --site-h3:      700 22px/1.4 var(--krds-font-body);
  --site-body:    400 17px/1.65 var(--krds-font-body);
  --site-label:   700 14px/1.5 var(--krds-font-body);

  /* Motion */
  --site-rise-distance: 40px;
  --site-zoom-from:     .92;
}

/* 스크롤 움직임 — 지원 브라우저(Chrome·Edge)에서만, 미지원이면 정지 상태로 보인다 */
@keyframes site-rise { from { opacity: 0; transform: translateY(var(--site-rise-distance)); } to { opacity: 1; transform: none; } }
@keyframes site-zoom { from { transform: scale(var(--site-zoom-from)); } to { transform: scale(1); } }
@keyframes site-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  .rv   { animation: site-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  .zoom { animation: site-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .bar  { transform-origin: left; animation: site-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .zoom, .bar, .in1, .in2, .in3, .m-scan, .m-show { animation: none !important; }
}