/*
 * 아정당 디자인 시스템 토큰 (코드측 사본)
 *
 * 정본: docs/design-system/token-usage-guide.md (Figma "B2C 디자인 시스템" 1:1)
 *       docs/design-system/typography-guide.md
 *       docs/design-system/responsive-layout-guide.md
 *
 * 본 파일은 자주 쓰는 토큰의 CSS 변수 추출본. 전체 인벤토리 (Semantic 76 + Primitive 57)
 * 는 token-usage-guide.md 가 정본. 새 토큰이 필요하면 정본에서 가져와 본 파일에 추가.
 *
 * 사용: <link rel="stylesheet" href="/_shared/tokens.css">
 *       페이지별 override 가 필요하면 :root 변수 재정의 (Ch 02 modify-existing 모드 한정)
 *
 * 룰:
 *   - 페이지·컴포넌트는 항상 Semantic 토큰 (--color-bg-primary 등). Primitive 직접 참조 X.
 *   - 검정 (#000) 텍스트 금지. --color-fg-primary 이하 사용.
 *   - Selected / Active 상태는 무조건 Brand 시리즈.
 */

:root {
  /* ────────────────────────────────────────────────────────────
   * 1. Primitive — GrayScale (mode 동일)
   * ──────────────────────────────────────────────────────────── */
  --color-grayscale-white:    #ffffff;
  --color-grayscale-gray-050: #f4f6fa;
  --color-grayscale-gray-100: #ecf0f4;
  --color-grayscale-gray-200: #dee2e6;
  --color-grayscale-gray-300: #cfd4d9;
  --color-grayscale-gray-400: #acb3ba;
  --color-grayscale-gray-500: #8c939a;
  --color-grayscale-gray-600: #6e757c;
  --color-grayscale-gray-700: #575e64;
  --color-grayscale-gray-800: #353a3f;
  --color-grayscale-gray-900: #1f2429;
  --color-grayscale-black:    #000000;

  /* ────────────────────────────────────────────────────────────
   * 2. Primitive — Primary (아정당 브랜드 블루)
   * ──────────────────────────────────────────────────────────── */
  --color-primary-050: #ecf2fd;
  --color-primary-100: #c7d8fa;
  --color-primary-200: #a6c2f7;
  --color-primary-300: #80a8f4;
  --color-primary-400: #5b8ef1;
  --color-primary-500: #3574ed;
  --color-primary-600: #145ce6;  /* brand main */
  --color-primary-700: #114dc0;  /* hover */
  --color-primary-800: #0d3e9b;  /* pressed */
  --color-primary-900: #0a2f75;

  /* ────────────────────────────────────────────────────────────
   * 3. Primitive — System (Red / Yellow / Green / Teal / Purple)
   * ──────────────────────────────────────────────────────────── */
  --color-red-100:   #fdecec;
  --color-red-200:   #ffcfcf;
  --color-red-300:   #f7a6a6;
  --color-red-400:   #f48080;
  --color-red-500:   #f15b5b;
  --color-red-600:   #ed3535;
  --color-red-700:   #e61414;  /* danger default */
  --color-red-800:   #c01111;
  --color-red-900:   #9b0d0d;

  --color-yellow-100: #fff7d9;
  --color-yellow-200: #fff0b3;
  --color-yellow-300: #ffe066;
  --color-yellow-400: #ffd633;
  --color-yellow-500: #ffcc00;  /* notice */
  --color-yellow-600: #eeab00;

  --color-green-100:  #e4fbea;
  --color-green-200:  #b1f2cf;
  --color-green-300:  #71e6a7;
  --color-green-400:  #31d17b;
  --color-green-500:  #0cb459;  /* success */
  --color-green-600:  #009645;

  --color-teal-100:   #e4f9ff;
  --color-teal-200:   #a9edff;
  --color-teal-300:   #7fe3ff;
  --color-teal-400:   #29d1ff;
  --color-teal-500:   #00afe5;  /* information */
  --color-teal-600:   #0f88c8;

  --color-purple-100: #f5ebff;
  --color-purple-200: #d4c4f5;
  --color-purple-300: #bd9ff5;
  --color-purple-400: #a17df5;
  --color-purple-500: #8556e3;  /* promotion */
  --color-purple-600: #6b3cc9;

  /* ────────────────────────────────────────────────────────────
   * 4. Semantic — Bg / 면
   *
   * 시작 면 시리즈를 고정. 흰 바탕 페이지는 Bg/*, 회색 바탕 페이지는 Bg/Grouped/* 만.
   * 두 시리즈를 한 화면에 섞지 않음. (brand-design-guide § 2)
   * ──────────────────────────────────────────────────────────── */
  --color-bg-primary:    var(--color-grayscale-white);     /* 페이지 베이스 (흰 바탕) */
  --color-bg-secondary:  var(--color-grayscale-gray-050);  /* 카드/구역 면 */
  --color-bg-tertiary:   var(--color-grayscale-gray-100);  /* 카드 안 더 깊은 면 */
  --color-bg-disabled:   var(--color-grayscale-gray-200);
  --color-bg-dimmed:     rgba(0, 0, 0, 0.30);              /* 모달 뒤 dim */

  /* 회색 바탕 시리즈 — Grouped */
  --color-bg-grouped-primary:   var(--color-grayscale-gray-050);  /* 페이지 베이스 (회색) */
  --color-bg-grouped-secondary: var(--color-grayscale-white);     /* 카드 면 */
  --color-bg-grouped-tertiary:  var(--color-grayscale-gray-050);

  /* 모달·드롭다운 */
  --color-bg-elevated-white: var(--color-grayscale-white);
  --color-bg-elevated-brand: var(--color-primary-600);

  /* Brand — Selected/Active 강조 */
  --color-bg-brand-default: var(--color-primary-600);
  --color-bg-brand-hover:   var(--color-primary-700);
  --color-bg-brand-pressed: var(--color-primary-800);
  --color-bg-brand-subtle-default: var(--color-primary-050);  /* 옅은 강조 */
  --color-bg-brand-subtle-hover:   var(--color-primary-100);
  --color-bg-brand-subtle-pressed: var(--color-primary-200);

  /* Neutral 회색 UI */
  --color-bg-neutral-default: var(--color-bg-tertiary);
  --color-bg-neutral-hover:   var(--color-grayscale-gray-200);
  --color-bg-neutral-pressed: var(--color-grayscale-gray-300);

  /* Danger 강조 */
  --color-bg-danger-default: var(--color-red-700);
  --color-bg-danger-hover:   var(--color-red-800);
  --color-bg-danger-pressed: var(--color-red-900);

  /* System 메시지 (옅은) */
  --color-bg-system-neutral-light:     var(--color-grayscale-gray-100);
  --color-bg-system-critical-light:    var(--color-red-100);
  --color-bg-system-notice-light:      var(--color-yellow-100);
  --color-bg-system-success-light:     var(--color-green-100);
  --color-bg-system-information-light: var(--color-teal-100);
  --color-bg-system-promotion-light:   var(--color-purple-100);

  /* ────────────────────────────────────────────────────────────
   * 5. Semantic — FG / 텍스트·아이콘
   * ──────────────────────────────────────────────────────────── */
  --color-fg-primary:    var(--color-grayscale-gray-900);  /* 본문 */
  --color-fg-secondary:  var(--color-grayscale-gray-700);  /* 보조 */
  --color-fg-tertiary:   var(--color-grayscale-gray-500);  /* 캡션·약함 */
  --color-fg-default:    var(--color-grayscale-gray-400);
  --color-fg-disabled:   var(--color-grayscale-gray-400);
  --color-fg-on-color:   var(--color-grayscale-white);     /* 컬러 배경 위 흰 글자 */
  --color-fg-selected:   var(--color-primary-600);         /* Selected/Active 텍스트 */

  /* FG/Brand */
  --color-fg-brand-brand:   var(--color-primary-600);
  --color-fg-brand-hover:   var(--color-primary-700);
  --color-fg-brand-pressed: var(--color-primary-800);

  /* FG/System (메시지 텍스트) */
  --color-fg-system-neutral:     var(--color-grayscale-gray-700);
  --color-fg-system-danger:      var(--color-red-700);
  --color-fg-system-notice:      var(--color-yellow-600);
  --color-fg-system-success:     var(--color-green-500);
  --color-fg-system-information: var(--color-teal-500);
  --color-fg-system-promotion:   var(--color-purple-500);

  /* ────────────────────────────────────────────────────────────
   * 6. Semantic — Border / 선
   * ──────────────────────────────────────────────────────────── */
  --color-border-primary:   var(--color-grayscale-gray-300);  /* 일반 구분 */
  --color-border-secondary: var(--color-grayscale-gray-200);
  --color-border-tertiary:  var(--color-grayscale-gray-100);
  --color-border-disabled:  var(--color-grayscale-gray-300);

  --color-border-brand-default: var(--color-primary-600);
  --color-border-brand-hover:   var(--color-primary-700);
  --color-border-brand-pressed: var(--color-primary-800);

  --color-border-danger-default: var(--color-red-700);
  --color-border-danger-hover:   var(--color-red-800);
  --color-border-danger-pressed: var(--color-red-900);

  /* ────────────────────────────────────────────────────────────
   * 7. Radius — Primitive (카드·일반 frame)
   *
   * 카드 디폴트 = 20px (--radius-x5). 14·18·22 같은 임의값 만들지 않음.
   * (brand-design-guide § 3)
   * ──────────────────────────────────────────────────────────── */
  --radius-x0_5: 2px;
  --radius-x1:   4px;   /* 작은 배지, 인풋 좌측 분리 라벨 */
  --radius-x1_5: 6px;   /* 칩, 작은 배지 */
  --radius-x2:   8px;   /* 인풋, 작은 카드, 작은 버튼 */
  --radius-x2_5: 10px;
  --radius-x3:   12px;  /* 중간 버튼 (h=56), 작은 카드 */
  --radius-x4:   16px;  /* 카드 */
  --radius-x5:   20px;  /* ★ 카드 디폴트 (가장 흔한 중대형 카드) */
  --radius-x6:   24px;  /* 큰 카드, 히어로 */
  --radius-full: 9999px;

  /* Radius — Button (컴포넌트 사이즈에 묶임) */
  --radius-button-xs:    8px;   /* h=28 */
  --radius-button-s:     8px;   /* h=32 */
  --radius-button-m:    10px;   /* h=40 */
  --radius-button-l:    10px;   /* h=48 */
  --radius-button-xl:   12px;   /* h=56 */
  --radius-button-round: 9999px;

  /* Radius — Input */
  --radius-input-m:        10px;   /* h=40 */
  --radius-input-l:        10px;   /* h=48 */
  --radius-input-xl:       12px;   /* h=68 */
  --radius-input-textarea: 12px;

  /* ────────────────────────────────────────────────────────────
   * 8. Shadow / 그림자 — None/Soft/Drop/Inset 4단
   *
   * 카드의 90% 이상은 None. 면(Surface) 분리로 위계 만듦.
   * 블러 큰 그림자 금지 (blur ≥30px / opacity ≥0.15).
   * 컬러드 그림자 금지 (블루 그림자 등). 항상 rgba(0,0,0, 0.1) 까지만.
   * (brand-design-guide § 4)
   * ──────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-soft: 0 0 16px rgba(0, 0, 0, 0.1);    /* 둥둥 떠야 하는 플로팅 카드 */
  --shadow-drop: 0 2px 8px rgba(0, 0, 0, 0.1);   /* 호버 강조, 좁은 영역 카드 */
  --shadow-inset-border: 0 0 0 1px inset;         /* 인풋·드롭다운·아웃라인 칩 */

  /* ────────────────────────────────────────────────────────────
   * 9. Typography — Pretendard 26 스타일
   *
   * Regular(400) / Medium(500) / Bold(700) 만 사용.
   * letterSpacing = 0 (모든 스타일).
   * 정본: typography-guide.md
   * ──────────────────────────────────────────────────────────── */
  --font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont,
                         system-ui, 'Segoe UI', Roboto, 'Helvetica Neue',
                         Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Display */
  --typo-display-l: 700 56px/68px var(--font-family-primary);
  --typo-display-m: 700 40px/52px var(--font-family-primary);

  /* Heading */
  --typo-heading-xxl: 700 32px/44px var(--font-family-primary);
  --typo-heading-xl:  700 28px/40px var(--font-family-primary);
  --typo-heading-l:   700 24px/34px var(--font-family-primary);
  --typo-heading-m:   700 20px/28px var(--font-family-primary);
  --typo-heading-s:   700 18px/26px var(--font-family-primary);
  --typo-heading-xs:  700 16px/22px var(--font-family-primary);
  --typo-heading-xxs: 700 14px/20px var(--font-family-primary);

  /* Body */
  --typo-body-xl-m:  500 21px/34px var(--font-family-primary);
  --typo-body-xl-r:  400 21px/34px var(--font-family-primary);
  --typo-body-l-m:   500 19px/30px var(--font-family-primary);
  --typo-body-l-r:   400 19px/30px var(--font-family-primary);
  --typo-body-m-m:   500 17px/28px var(--font-family-primary);
  --typo-body-m-r:   400 17px/28px var(--font-family-primary);
  --typo-body-s-m:   500 15px/24px var(--font-family-primary);
  --typo-body-s-r:   400 15px/24px var(--font-family-primary);
  --typo-body-xs-m:  500 13px/20px var(--font-family-primary);
  --typo-body-xs-r:  400 13px/20px var(--font-family-primary);
  --typo-body-xxs-m: 500 11px/18px var(--font-family-primary);
  --typo-body-xxs-r: 400 11px/18px var(--font-family-primary);

  /* Button */
  --typo-button-l:   500 17px/20px var(--font-family-primary);
  --typo-button-m:   500 15px/18px var(--font-family-primary);
  --typo-button-s:   500 13px/16px var(--font-family-primary);
  --typo-button-xs:  500 12px/14px var(--font-family-primary);
  --typo-button-xxs: 500 10px/12px var(--font-family-primary);

  /* ────────────────────────────────────────────────────────────
   * 10. Layout — Breakpoint + max-width + Spacing/Global_gutter
   *
   * 구현 원칙: outer/inner 컨테이너 분리 (필수).
   *   outer = width 100% + 좌우 padding 20px (gutter)
   *   inner = max-width + margin-inline auto (컨텐츠)
   * 한 엘리먼트에 max-width + padding 합치면 컨텐츠 너비가 padding 만큼 깎임. 금지.
   * 정본: responsive-layout-guide.md § 4
   * ──────────────────────────────────────────────────────────── */
  --layout-breakpoint-tablet: 1024;  /* ≤1024 부터 tablet 레이아웃 */
  --layout-breakpoint-mobile:  768;  /* ≤768 부터 mobile */

  --layout-max-width-pc-l: 1024px;  /* PC 일반 페이지 + 메인 홈 */
  --layout-max-width-pc-m:  768px;  /* 일반 페이지에서 컨텐츠가 적을 때 */
  --layout-max-width-pc-s:  480px;  /* 일반 페이지에서 컨텐츠가 적을 때 */
  --layout-max-width-mobile-l: 768px;
  --layout-max-width-mobile-s: 480px;

  --spacing-global-gutter-x-pc:     20px;
  --spacing-global-gutter-x-mobile: 20px;

  /* ────────────────────────────────────────────────────────────
   * 11. Border / Z-index
   * ──────────────────────────────────────────────────────────── */
  --border-default: 1px;
  --border-focus:   2px;

  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
}

/* ──────────────────────────────────────────────────────────────
 * 공통 reset
 * ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--typo-body-m-r);
  color: var(--color-fg-primary);
  background: var(--color-bg-primary);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ──────────────────────────────────────────────────────────────
 * Layout helper — outer / inner 분리 구조 (필수)
 * (responsive-layout-guide § 4)
 * ────────────────────────────────────────────────────────────── */

/* Outer — 화면 전체에 깔림 + 좌우 gutter 20px */
.layout-outer {
  width: 100%;
  padding-left:  var(--spacing-global-gutter-x-pc);
  padding-right: var(--spacing-global-gutter-x-pc);
}

/* Inner (메인 홈 / 일반 2분기) — PC 에서만 max-width 1024 */
.layout-inner {
  max-width: var(--layout-max-width-pc-l);
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .layout-inner { max-width: none; }
}

/* Inner (일반 1분기, narrow) — 모든 분기에서 max-width 유지 (480) */
.layout-inner--narrow {
  max-width: var(--layout-max-width-pc-s);
  margin-inline: auto;
}