/* =========================================================
   tokens.css - 디자인 토큰 / 별칭 / reset / 폰트 (DESIGN.md 2장 검증 토큰 + 8장 확장)
   모든 관리자 페이지에서 가장 먼저 로드된다. 색/반경/그림자 값은 여기서만 정의한다.
   ========================================================= */
/* 폰트 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/* ===== 관리자 공통 디자인 토큰 (DESIGN.md — Toss/TDS 기준. 확장 값은 DESIGN.md 8장에 기록) ===== */
:root {
	/* 네이티브 컨트롤(달력 아이콘·셀렉트 팝업·스크롤바)을 테마에 맞게 그리도록 브라우저에 알린다 — 다크 블록에서 dark 로 재정의 */
	color-scheme: light;
	/* 검증 토큰 */
	--tds-primary: #3182f6;        /* Primary (인터랙션 블루) */
	--tds-primary-strong: #2272eb; /* Primary Hover */
	--tds-weak-bg: #e8f3ff;        /* Weak Background */
	--tds-weak-fg: #1b64da;        /* Weak Foreground */
	--tds-canvas: #ffffff;
	--tds-fg: #191f28;             /* Foreground (가장 진한 텍스트) */
	--tds-body: #4e5968;           /* Body */
	--tds-muted: #8b95a1;          /* Muted */
	--tds-surface: #f2f4f6;        /* Surface (페이지 배경) */
	--tds-border: #e5e8eb;
	--tds-danger: #e42939;
	/* 확장: 중간 회색 단계 (TDS 공개 grey 스케일에서 파생) */
	--adm-grey-50: #f9fafb; --adm-grey-300: #d1d6db; --adm-grey-400: #b0b8c1; --adm-grey-600: #6b7684; --adm-grey-800: #333d4b;
	/* 확장: 의미색 */
	--adm-success: #03b26c; --adm-success-strong: #028a55; --adm-success-bg: #f0faf6;
	--adm-warning: #fe9800; --adm-warning-strong: #d9730d; --adm-warning-bg: #fff3e0;
	--adm-danger-bg: #ffeeee;
	/* 반경: TDS 버튼 스케일(8/10/14/16) + 소형 표면(4/6) */
	--adm-r-xs: 4px; --adm-r-sm: 6px; --adm-r-btn: 8px; --adm-r-ctl: 10px; --adm-r-card: 14px; --adm-r-panel: 16px;
	/* 확장: 떠 있는 패널 그림자(플랫 레이어링 원칙 — 경계선 위주, 그림자는 최소) */
	--adm-shadow-panel: 0 8px 24px rgba(25, 31, 40, 0.12);
	--adm-focus-ring: 0 0 0 3px rgba(49, 130, 246, 0.2);
	/* 폰트: Toss Product Sans 가 있으면 사용, 없으면 Pretendard → Noto Sans KR → 시스템 */
	--tds-font: 'Toss Product Sans', 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ===== 컴포넌트용 별칭 (components 폴더의 css 가 참조). 값은 위 --tds- / --adm- 토큰을 가리키며 새 값을 만들지 않는다 ===== */
:root {
	--accent: var(--tds-primary); --accent-ink: var(--tds-primary-strong);
	--confirm: var(--tds-primary); --confirm-ink: var(--tds-primary-strong);
	--danger: var(--tds-danger); --danger-ink: #d22030; --req-star: var(--tds-danger);
	--ink: var(--tds-fg); --sub: var(--tds-body); --muted: var(--adm-grey-600); --faint: var(--tds-muted); --faint2: var(--adm-grey-400); --disabled: var(--adm-grey-300);
	--line: var(--tds-border); --line-strong: var(--tds-border); --line-soft: var(--tds-surface); --line-mid: var(--adm-grey-300);
	--surface: var(--tds-canvas); --surface-2: var(--adm-grey-50); --track: var(--tds-surface); --tint-blue: var(--tds-weak-bg); --page: var(--tds-surface);
	--r-modal: var(--adm-r-panel); --r-card: var(--adm-r-card); --r-ctl: var(--adm-r-ctl); --r-seg: var(--adm-r-btn); --r-badge: var(--adm-r-sm);
	--shadow-modal: 0 24px 64px -12px rgba(25,31,40,.28);
	--shadow-card: none; /* 플랫 레이어링: 카드는 경계선만 */
	--focus-ring: var(--adm-focus-ring);
}

/* ===== 연한 색 면 토큰 (Weak 버튼 / 뱃지 / 칩 / 공지) =====
   라이트에서는 파스텔 배경 + 진한 글자, 다크에서는 저채도 어두운 배경 + 밝은 글자로 뒤집는다.
   컴포넌트 CSS 에 이 계열 색을 하드코딩하지 말고 반드시 여기 토큰을 쓸 것. */
:root {
	--tint-blue-strong: #d9ebff;       /* Weak(연블루) hover */
	--tint-blue-line: #c9e2ff;         /* 연블루 테두리(드롭존/공지) */
	--tint-blue-line-strong: #90c2ff;
	/* 뱃지 6색 (badge.css) */
	--badge-green-bg: #f0faf6;  --badge-green-fg: #028a55;  --badge-green-line: #aeefd5;
	--badge-orange-bg: #fff3e0; --badge-orange-fg: #c4650a; --badge-orange-line: #ffd28a;
	--badge-red-bg: #ffeeee;    --badge-red-fg: #d22030;    --badge-red-line: #ffd4d4;
	--badge-blue-bg: #e8f3ff;   --badge-blue-fg: #1b64da;   --badge-blue-line: #90c2ff;
	--badge-gray-bg: #f2f4f6;   --badge-gray-fg: #4e5968;   --badge-gray-line: #d1d6db;
	--badge-purple-bg: #f3e8ff; --badge-purple-fg: #6b21a8; --badge-purple-line: #d8b4fe;
	/* 소형 Weak 버튼 색 변형 (button.css) */
	--soft-green-bg: #e5f9ee; --soft-green-bg-hover: #d3f4e3; --soft-green-fg: #158a51;
	--soft-green-line: #a8dfc3; --soft-green-line-strong: #7bcfa4; --soft-green-bg-faint: #f0fbf5;
	--soft-purple-bg: #f1ecfe; --soft-purple-bg-hover: #e5dcfc; --soft-purple-fg: #6d3ddb;
	--soft-red-bg: #ffeeee; --soft-red-bg-hover: #ffe0e0; --soft-red-fg: #d92b2b;
	/* 핑크 뱃지 (파이요청 환불 뱃지) */
	--badge-pink-bg: #fce7f3; --badge-pink-bg-hover: #fbcfe8; --badge-pink-fg: #9d174d; --badge-pink-line: #f9a8d4;
	/* 중립(회색) 버튼 면 — 다크에서 --track(페이지 배경색)을 그대로 쓰면 버튼이 배경에 묻혀 버튼인지 안 보인다.
	   초기화·취소류 버튼 배경은 반드시 이 토큰을 쓸 것 */
	--btn-neutral-bg: #f2f4f6; --btn-neutral-bg-hover: #e5e8eb;
	/* 입력창 면/플레이스홀더 — 다크에서 카드색(--surface)을 그대로 쓰면 입력창이 배경에 묻힌다(구글 다크 참고: 배경보다 밝은 면) */
	--input-bg: var(--tds-canvas); --input-placeholder: var(--adm-grey-400);
}

/* =========================================================
   다크 모드 — <html data-theme="dark"> 로 전환 (오른쪽 메뉴바 하단 토글 / localStorage 'adminTheme').
   base(--tds-, --adm-) 토큰만 재정의하면 별칭 블록·html/body 까지 연쇄 적용된다.
   라이트(기본)는 위 :root 값을 그대로 사용(오버라이드 없음).
   주의: 주석 안에 별표+슬래시 조합(--tds-* / 같은 표기)을 붙여 쓰면 주석이 조기 종료되어
   바로 뒤 규칙이 통째로 무효가 된다 — 실제로 다크 블록이 죽었던 원인(2026-09-10).
   ========================================================= */
:root[data-theme="dark"] {
	color-scheme: dark;            /* 네이티브 달력 아이콘·셀렉트 팝업·스크롤바를 다크로 */
	--tds-canvas: #20242c;         /* 카드/표면 */
	--tds-surface: #171a20;        /* 페이지 배경 */
	--tds-fg: #e6e9ee;
	--tds-body: #aab2bd;
	--tds-muted: #7a828c;
	--tds-border: #2d323b;
	/* 포인트색: 다크에서 밝기만 올리고 채도를 낮추면(구 #5a97f5/#f36b78) 채움 버튼이 흰색 섞인 듯 뿌옇게 보인다.
	   채움 버튼용 primary/danger 는 고채도 유지, 링크·연한 글자는 --tds-weak-fg(밝은 톤)가 담당 */
	--tds-primary: #4593fc;
	--tds-primary-strong: #5ba1ff;  /* hover — 다크에서는 밝아지는 쪽이 자연스럽다 */
	--tds-weak-bg: #1c2b40;
	--tds-weak-fg: #8fb8f5;
	--tds-danger: #f04452;
	--adm-grey-50: #252a33;
	--adm-grey-300: #3a414c;
	--adm-grey-400: #5a626d;
	--adm-grey-600: #aab2bd;
	--adm-grey-800: #e6e9ee;
	--adm-success: #2fbd85; --adm-success-strong: #26a674; --adm-success-bg: #16281f;
	--adm-warning: #f0a53a; --adm-warning-strong: #d98b2a; --adm-warning-bg: #2b2417;
	--adm-danger-bg: #2b1a1a;
	--adm-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.5);
	--adm-focus-ring: 0 0 0 3px rgba(69, 147, 252, 0.28);
	/* base 를 가리키지 않는 별칭은 직접 재정의 */
	--danger-ink: #f4606c;   /* danger hover — 채움 유지한 채 한 단계 밝게 */
	--shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.6);
	/* 연한 색 면: 저채도 어두운 배경 + 밝은 글자 */
	--tint-blue-strong: #24395c;
	--tint-blue-line: #2c4a73;
	--tint-blue-line-strong: #3c5f8f;
	--badge-green-bg: #16281f;  --badge-green-fg: #4ad295;  --badge-green-line: #235c40;
	--badge-orange-bg: #2b2417; --badge-orange-fg: #f0a53a; --badge-orange-line: #5c4a1f;
	--badge-red-bg: #2b1a1a;    --badge-red-fg: #f3808b;    --badge-red-line: #5c2a30;
	--badge-blue-bg: #1c2b40;   --badge-blue-fg: #8fb8f5;   --badge-blue-line: #2c4a73;
	--badge-gray-bg: #252a33;   --badge-gray-fg: #aab2bd;   --badge-gray-line: #3a414c;
	--badge-purple-bg: #2a2138; --badge-purple-fg: #c9a8f5; --badge-purple-line: #4a3866;
	--soft-green-bg: #16281f; --soft-green-bg-hover: #1d3527; --soft-green-fg: #4ad295;
	--soft-green-line: #235c40; --soft-green-line-strong: #2d7050; --soft-green-bg-faint: #131f19;
	--soft-purple-bg: #2a2138; --soft-purple-bg-hover: #342a45; --soft-purple-fg: #c9a8f5;
	--soft-red-bg: #2b1a1a; --soft-red-bg-hover: #38211f; --soft-red-fg: #f3808b;
	--badge-pink-bg: #331a26; --badge-pink-bg-hover: #40202f; --badge-pink-fg: #f0a0c4; --badge-pink-line: #66334d;
	--btn-neutral-bg: #3a414c; --btn-neutral-bg-hover: #454e5e; /* 카드(#20242c)보다 확실히 밝게 — 버튼으로 보이도록 */
	--input-bg: #2a303b; --input-placeholder: #8b95a1; /* 입력창: 카드보다 한 단계 밝은 면 + 또렷한 플레이스홀더 */
}

/* reset */
* {padding: 0; margin: 0; font-family: var(--tds-font); /*font-family: 'Spoqa Han Sans Neo', 'sans-serif';*/ }
a {text-decoration: none; color: inherit;}
ul, ol, dl {margin: 0; padding: 0;}
li {list-style: none;}
html, body {height: 100%; color: var(--tds-fg); background-color: var(--tds-surface); box-sizing: border-box;}
table th {font-size: 14px;}
table td {font-size: 13px;}