@charset "UTF-8";
/* ==========================================================================
   디자인 토큰 — 동반정보기술 디자인 시스템 (D41)
   - 동반 시스템 = KRDS 2025.08의 구조·수치·접근성 규칙 + 동반 CI(네이비 #183578·스카이 #38B7F1·Pretendard).
     값의 정본은 동반 디자인 시스템 tokens(라이트/high-contrast). 토큰 이름(--krds-*)은 그대로 둔다(화면 CSS 무변경).
   - 대비 WCAG 2.1 AA: 모든 글자 × 면 조합 4.5:1 — KrdsTokenContractTest가 두 테마 모두 검사
   - 고대비 = 동반식 검은 바탕 테마(data-theme="high-contrast")
   ========================================================================== */

/* ── Pretendard (자체 호스팅, CDN 미사용) — 동반: Regular 400·Bold 700 두 굵기만 ── */
@font-face {
    font-family: "Pretendard";
    font-weight: 400; font-style: normal; font-display: swap;
    src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700; font-style: normal; font-display: swap;
    src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
}

:root {
    /* ── Color: Primary(동반 네이비) — 채움·테두리·포커스. 글자는 --krds-primary-text ── */
    --krds-primary-5:  #edf2fc;  /* 선택·hover 면 */
    --krds-primary-10: #dbe5f7;
    --krds-primary-20: #bbcdf1;
    --krds-primary-40: #6088de;
    --krds-primary-50: #183578;  /* CI 네이비 — 주요 버튼 채움·포커스 링 */
    --krds-primary-60: #112961;  /* hover 채움 */
    --krds-primary-70: #0b1e4b;  /* active 채움 */
    --krds-primary-text: #112961;   /* 주색 글자(선택된 탭·메뉴, 강조 숫자) */

    /* ── Color: Secondary(동반 스카이) — 선택된 메뉴 면·범주 그래픽. CI 스카이 #38B7F1은 글자로 쓰지 않는다 ── */
    --krds-secondary-5:  #e9f3fa;
    --krds-secondary-40: #0a9ed6;
    --krds-secondary-50: #0175a1;

    /* ── Color: Gray(동반 청회색) — 5·10·20은 면·테두리, 80은 어두운 면(바닥글·캔버스 틀). 글자는 역할 토큰 ── */
    --krds-gray-0:  #ffffff;
    --krds-gray-5:  #f3f5f8;
    --krds-gray-10: #e5e8ed;
    --krds-gray-20: #ccd1d9;
    --krds-gray-30: #b3b8c1;
    --krds-gray-40: #8e939d;
    --krds-gray-50: #717782;
    --krds-gray-60: #5a606c;
    --krds-gray-70: #454b58;
    --krds-gray-80: #303644;
    --krds-gray-90: #19212f;

    /* ── Semantic(동반 danger·success·warning·information) ── */
    --krds-critical: #de3412;   /* 오류/삭제 채움·테두리 */
    --krds-critical-bg: #fdefec;
    --krds-critical-hover: #bd2c0f;
    --krds-success: #228738;
    --krds-success-bg: #eaf6ec;
    --krds-warning: #9e6a00;
    --krds-warning-bg: #fff3db;
    --krds-info: #0b78cb;
    --krds-info-bg: #e7f4fe;
    /* 글자용(14번 #16, T14): 위 원색은 점·아이콘·보더·배경 전용. 글자는 -text만 */
    --krds-success-text: #267337;
    --krds-warning-text: #8a5c00;
    --krds-critical-text: #bd2c0f;

    /* ── 역할 색 (14번 #12, T12) — app.css·템플릿은 색 리터럴 대신 이 토큰만 ── */
    --krds-on-primary: #ffffff;       /* 색 채움 위 글자(주요 버튼·활성 탭·스킵 링크) — 테마 무관 흰색 */
    --krds-static-white: #ffffff;     /* 테마 무관 흰 면 — 고대비에서 로고를 올리는 흰 타일 */
    --krds-overlay: rgba(0,0,0,.75);  /* 모달 뒤 딤(동반 background-dim) */
    --krds-inverse-text: #ccd1d9;      /* 어두운 바닥글(gray-80) 위 글자 */
    --krds-inverse-text-weak: #b3b8c1;
    /* 범주 색(모드별 막대 등) — 팔레트에서만. 의미색(성공/경고/오류)은 범주 구분에 쓰지 않는다.
       색만으로 구분하지 않도록 라벨을 함께 둔다 */
    --krds-cat-1: var(--krds-primary-50);
    --krds-cat-2: var(--krds-secondary-50);
    --krds-cat-3: var(--krds-secondary-40);
    --krds-cat-4: var(--krds-gray-60);
    /* 에디터 캔버스 — 사이니지 화면을 그대로 보이는 검정 면과 빈 칸 표시 */
    --krds-canvas: #000000;
    --krds-canvas-empty: rgba(255,255,255,.06);

    /* ── 표면/텍스트/보더 ── */
    --krds-bg:        #f3f5f8;   /* 동반 background-gray-subtler */
    --krds-surface:   #ffffff;   /* 동반 surface-white */
    --krds-text:      #19212f;   /* 동반 text-basic */
    --krds-text-sub:  #454b58;   /* 동반 text-subtle */
    --krds-text-weak: #5a606c;
    --krds-border:    #ccd1d9;   /* 동반 border-gray-light */
    --krds-border-strong: #5a606c;   /* 동반 input-border */
    --krds-border-gray: #b3b8c1;   /* 동반 border-gray — 오른쪽 패널 테두리(D73-3, DBDS SidePanel 규격) */
    --krds-link:      #183578;   /* 동반 link-default — 밑줄과 함께 */
    --krds-link-hover: #112961;

    /* ── Typography ── 관리콘솔 밀도 유지(D41-3): UI 14px·보조 13px */
    --krds-font: "Pretendard Variable", "Pretendard", "Pretendard GOV", "Noto Sans KR", "Apple SD Gothic Neo",
                 "Malgun Gothic", system-ui, sans-serif;
    --krds-fs-display: 40px;
    --krds-fs-h1: 28px;
    --krds-fs-h2: 22px;
    --krds-fs-h3: 18px;
    --krds-fs-body: 16px;
    --krds-fs-sm: 14px;
    --krds-fs-xs: 13px;
    /* 역할 별칭(14번 #11, T11) — 새 코드는 역할명만. 크기명(h1~xs)은 하위 호환용.
       h2(22px)·display(40px)는 현재 역할 없음 — 새로 쓰지 말 것 */
    --krds-fs-page: var(--krds-fs-h1);       /* 페이지 h1, 화면당 1개 */
    --krds-fs-section: var(--krds-fs-h3);    /* 섹션 h2 */
    --krds-fs-ui: var(--krds-fs-sm);         /* 표 셀·라벨·버튼·알림·사이드내비 */
    --krds-fs-caption: var(--krds-fs-xs);    /* 표 헤더·배지·보조 메타 — 글자 최소 크기 */
    --krds-lh: 1.5;

    /* ── Spacing (4px 그리드, 동반 number-* 단계와 같음) ── */
    --krds-sp-1: 4px;  --krds-sp-2: 8px;  --krds-sp-3: 12px; --krds-sp-4: 16px;
    --krds-sp-5: 20px; --krds-sp-6: 24px; --krds-sp-8: 32px; --krds-sp-10: 40px;
    --krds-sp-12: 48px; --krds-sp-16: 64px;

    /* ── Shape (동반 radius) ── 배지 4 · 버튼·입력 8 · 카드·표·통계 면 10 · 모달 12(상한).
       알약(999px)은 두지 않는다. 상태 점처럼 '원'이 의도인 것만 개별 규칙에서 50% */
    --krds-radius-sm:   4px;
    --krds-radius:      8px;
    --krds-radius-card: 10px;
    --krds-radius-lg:   12px;

    /* ── Elevation — 떠 있는 요소(모달·로딩·로그인 카드)에만. 면은 테두리로 구분 ── */
    --krds-shadow-1: 0 1px 2px rgba(0,0,0,.05);
    --krds-shadow-2: 0 4px 12px rgba(0,0,0,.08);
    --krds-shadow-3: 0 12px 32px rgba(0,0,0,.12);

    /* ── Layout ── */
    --krds-container: 1280px;
    /* 동반 포커스 링: 안쪽 2px 흰 선 + 네이비 — 입력칸 등 outline 대신 box-shadow를 쓰는 곳 */
    --krds-focus: 0 0 0 2px #ffffff, 0 0 0 4px #183578;
}

/* ── 고대비(동반 high-contrast) — 검은 바탕 테마 ──
   토글(data-theme="high-contrast", krds-ui.js)로 적용. 같은 역할 토큰이 밝은 값으로 바뀐다.
   gray-5·10·20은 면·테두리 역할이라 어둡게 뒤집고, 글자는 역할 토큰이 밝게 바뀐다. */
:root[data-theme="high-contrast"] {
    --krds-bg:        #0e141f;
    --krds-surface:   #000000;
    --krds-text:      #f3f5f8;
    --krds-text-sub:  #ccd1d9;
    --krds-text-weak: #b3b8c1;
    --krds-border:    #454b58;
    --krds-border-strong: #8e939d;
    --krds-border-gray: #454b58;
    --krds-link:      #91afe9;
    --krds-link-hover: #bbcdf1;
    --krds-gray-5:    #0e141f;
    --krds-gray-10:   #303644;
    --krds-gray-20:   #454b58;
    --krds-gray-80:   #19212f;
    --krds-primary-5:  #070f22;
    --krds-primary-10: #0a1632;
    --krds-primary-20: #122754;
    --krds-primary-50: #4372d8;
    --krds-primary-60: #2b55b5;
    --krds-primary-70: #1e3b7f;
    --krds-primary-text: #bbcdf1;
    --krds-secondary-5:  #091f29;
    --krds-secondary-40: #3e9ccb;
    --krds-secondary-50: #267ea6;
    --krds-critical-bg: #260903;
    --krds-success-bg:  #0e2012;
    --krds-warning-bg:  #241800;
    --krds-info-bg:     #021a2c;
    --krds-success-text:  #a9dab4;
    --krds-warning-text:  #ffc95c;
    --krds-critical-text: #f7afa1;
    --krds-shadow-1: 0 0 0 1px #454b58; --krds-shadow-2: 0 0 0 1px #8e939d; --krds-shadow-3: 0 0 0 2px #8e939d;
    --krds-focus: 0 0 0 2px #000000, 0 0 0 4px #4372d8;
    color-scheme: dark;
}
:root[data-theme="high-contrast"] .btn { border-width: 2px; }
:root[data-theme="high-contrast"] a { text-decoration: underline; }
:root[data-theme="high-contrast"] thead th { border-bottom-width: 3px; }
:root[data-theme="high-contrast"] .side-nav a[aria-current="page"] { outline: 2px solid var(--krds-primary-50); }

/* OS '대비 높이기'(prefers-contrast: more) — 사용자가 테마를 고르지 않았을 때 라이트를 더 진하게 */
@media (prefers-contrast: more) {
    :root:not([data-theme]) {
        --krds-text: #000000; --krds-text-sub: #000000; --krds-border: #000000;
        --krds-link: #0b1e4b; --krds-focus: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
    }
    :root:not([data-theme]) .btn { border-width: 2px; }
}