/*
  ============================================================
  Front 디자인 시스템 — 토큰 (Single Source of Truth)
  ------------------------------------------------------------
  · 값 출처: docs/design/board_list/tokens/* (참조, 원본 수정 금지)
  · 주색(--ds-primary)은 스킨 style.css의 --skin-primary를 따름.
    사이트/스킨 브랜딩 시 style.css의 --skin-primary만 바꾸면 됨.
  · 폰트는 스킨이 이미 로드한 로컬 Pretendard 재사용(여기서 @font-face 선언 금지).
  ============================================================
*/
:root {
  /* ---- Blue (참조 기본색) ---- */
  --ds-blue-50:#eef4fc; --ds-blue-100:#d6e4f7; --ds-blue-200:#aecbef; --ds-blue-300:#7fabe3;
  --ds-blue-400:#4f85d4; --ds-blue-500:#2e66bf; --ds-blue-600:#1f54a8; --ds-blue-700:#1a448a;
  --ds-blue-800:#16386f; --ds-blue-900:#122c56;

  /* ---- Neutral gray ---- */
  --ds-gray-0:#ffffff; --ds-gray-50:#f7f9fb; --ds-gray-100:#eef1f5; --ds-gray-200:#e2e7ee;
  --ds-gray-300:#cfd6e0; --ds-gray-400:#a4adbb; --ds-gray-500:#717c8c; --ds-gray-600:#515b6b;
  --ds-gray-700:#3a4250; --ds-gray-800:#262d38; --ds-gray-900:#161b22;

  /* ---- Semantic ---- */
  --ds-green-50:#e9f6ee; --ds-green-600:#1f8a4c; --ds-green-700:#176b3b;
  --ds-amber-50:#fdf3e3; --ds-amber-600:#b9740a; --ds-amber-700:#8f5907;
  --ds-red-50:#fcecec;   --ds-red-600:#c5343a;   --ds-red-700:#9e2a2f;
  --ds-info-50:#eef4fc;  --ds-info-600:#1f54a8;  --ds-info-700:#1a448a;

  /* ---- Primary: 스킨 브랜드 연동 (미설정 시 board_list 블루) ---- */
  --ds-primary:        var(--skin-primary, #1f54a8);
  --ds-primary-hover:  color-mix(in srgb, var(--ds-primary) 88%, #000);
  --ds-primary-active: color-mix(in srgb, var(--ds-primary) 78%, #000);
  --ds-primary-weak:   color-mix(in srgb, var(--ds-primary) 8%, #fff);
  --ds-primary-border: color-mix(in srgb, var(--ds-primary) 35%, #fff);
  --ds-on-primary:     #ffffff;

  /* ---- Text ---- */
  --ds-text-strong:  var(--ds-gray-900);
  --ds-text-default: var(--ds-gray-800);
  --ds-text-muted:   var(--ds-gray-500);
  --ds-text-subtle:  var(--ds-gray-400);
  --ds-text-link:    var(--ds-primary);
  --ds-text-on-fill: #ffffff;

  /* ---- Surfaces ---- */
  --ds-surface-page:    var(--ds-gray-50);
  --ds-surface-card:    var(--ds-gray-0);
  --ds-surface-sunken:  var(--ds-gray-100);
  --ds-surface-hover:   var(--ds-gray-50);
  --ds-surface-overlay: rgba(22,27,34,.45);

  /* ---- Borders ---- */
  --ds-border-subtle:  var(--ds-gray-200);
  --ds-border-default: var(--ds-gray-300);
  --ds-border-strong:  var(--ds-gray-400);

  /* ---- Focus ring (접근성 3px) ---- 정적 값 유지: color-mix 미지원 시 링이 사라지면 접근성 회귀이므로 hover 등과 달리 고정 */
  --ds-focus-ring: 0 0 0 3px rgba(31,84,168,.28);

  /* ---- Status (fg/bg) ---- */
  --ds-success-fg:var(--ds-green-700); --ds-success-bg:var(--ds-green-50);
  --ds-warning-fg:var(--ds-amber-700); --ds-warning-bg:var(--ds-amber-50);
  --ds-danger-fg: var(--ds-red-700);   --ds-danger-bg: var(--ds-red-50);
  --ds-info-fg:   var(--ds-info-700);  --ds-info-bg:   var(--ds-info-50);

  /* ---- Spacing (4px grid) ---- */
  --ds-space-0:0; --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:20px; --ds-space-6:24px; --ds-space-8:32px; --ds-space-10:40px; --ds-space-12:48px;
  --ds-space-16:64px; --ds-space-20:80px;
  --ds-row-height:48px; --ds-control-height:40px; --ds-control-height-sm:32px; --ds-control-height-lg:48px;
  --ds-container-max:1120px; --ds-gutter:24px; --ds-field-gap:20px;

  /* ---- Typography (스케일; 폰트 패밀리는 로컬 Pretendard 재사용) ---- */
  --ds-font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
                    'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --ds-weight-regular:400; --ds-weight-medium:500; --ds-weight-semibold:600; --ds-weight-bold:700;
  --ds-font-display:2.8rem; --ds-font-h1:2.4rem; --ds-font-h2:2rem; --ds-font-h3:1.7rem;
  --ds-font-body-lg:1.6rem; --ds-font-body:1.5rem; --ds-font-sm:1.5rem; --ds-font-caption:1.3rem; --ds-font-micro:1.2rem;
  --ds-font-table:1.7rem;
  --ds-leading-tight:1.3; --ds-leading-snug:1.45; --ds-leading-normal:1.6; --ds-leading-relaxed:1.75;
  --ds-tracking-tight:-.02em; --ds-tracking-normal:-.01em;

  /* ---- Radius / Shadow / Motion ---- */
  --ds-radius-xs:2px; --ds-radius-sm:4px; --ds-radius-md:6px; --ds-radius-lg:8px; --ds-radius-xl:12px; --ds-radius-pill:999px;
  --ds-shadow-sm:0 1px 3px rgba(22,27,34,.08),0 1px 2px rgba(22,27,34,.04);
  --ds-shadow-md:0 4px 12px rgba(22,27,34,.08),0 1px 3px rgba(22,27,34,.05);
  --ds-ease-standard:cubic-bezier(.2,0,0,1);
  --ds-duration-fast:120ms; --ds-duration-base:180ms;
}

/*
  관리자 다크모드(.dark) 대응 — 게시판처럼 관리자/사용자 공용 기능이
  관리자 레이아웃(다크)에 렌더될 때 --ds-* 를 다크 값으로 전환한다.
  (사용자 front에는 .dark 가 없으므로 영향 없음)
*/
.dark{
  --ds-surface-page:   #0f1216;
  --ds-surface-card:   #181b21;
  --ds-surface-sunken: #20242a;
  --ds-surface-hover:  #1d2127;
  --ds-gray-0:         #1e222a;   /* 입력/테이블 바탕 */
  --ds-gray-100:       #23272e;   /* secondary 버튼·칩·음영 */
  --ds-gray-200:       #2c313a;
  --ds-gray-800:       #8b93a0;   /* 강조 rule(테이블 상단·섹션 밑줄) 가시성 */
  --ds-text-strong:    #e8eaed;
  --ds-text-default:   #d4d8de;
  --ds-text-muted:     #aeb3bb;
  --ds-text-subtle:    #767b84;
  --ds-border-subtle:  #23272e;
  --ds-border-default: #2f343c;
  --ds-border-strong:  #3a3f47;
  --ds-primary-weak:   color-mix(in srgb, var(--ds-primary) 24%, #0f1216);
  --ds-primary-border: color-mix(in srgb, var(--ds-primary) 45%, #0f1216);
}

/*
  관리자 미리보기 스코프(.ds-admin-scope) — front 게시판 등 ds 컴포넌트 프래그먼트가
  관리자 레이아웃(admin-layout.css가 :root font-size를 15px로 고정) 안에 렌더될 때 적용.
  ds 타이포 토큰은 rem이라 front 스킨의 html{font-size:62.5%}(=10px 기준) 전제로 값이 잡혀 있는데,
  관리자는 이 리셋을 로드하지 않아 그대로 두면 모든 ds 폰트가 1.5배로 커진다.
  (예: --ds-font-caption 1.3rem → front 13px / 관리자 19.5px). 폰트 토큰만 의도한 px로 고정한다.
*/
.ds-admin-scope{
  --ds-font-display:28px; --ds-font-h1:24px; --ds-font-h2:20px; --ds-font-h3:17px;
  --ds-font-body-lg:16px; --ds-font-body:15px; --ds-font-sm:15px; --ds-font-caption:13px; --ds-font-micro:12px;
  --ds-font-table:17px;
}