/* G 타입 공통 변수: 상단은 색상·테마, 하단은 글꼴·이미지·사이즈를 관리한다. */

:root {
    /* 테마별 기준색: 실제 테마와 테마 선택 미리보기가 함께 참조한다. */
    --theme-0-primary: #2563df;
    --theme-0-dark: #184a9b;
    --theme-1-primary: #1fbd11;
    --theme-1-dark: #0e7c1dc5;
    --theme-2-primary: #11a3bd;
    --theme-2-dark: #0e627cc5;
    --theme-3-primary: #bd1175;
    --theme-3-dark: #7c0e26c5;
    
    /* 직접 관리하는 공통 기준색 8개: 아래 값만 수정하면 파생색에 반영된다. */
    --ui-primary: var(--theme-0-primary); /* 기본 강조 */
    --ui-primary-light: #a3c7ff; /* 밝은 강조 */
    --ui-primary-dark: var(--theme-0-dark); /* 진한 강조 */
    --ui-ink: #1d2d45; /* 본문 */
    --ui-muted: #07142e; /* 보조 글자 */
    --ui-line: #dbe4f0; /* 경계선 */
    --ui-white: #fff; /* 흰색 */
    --ui-danger: #d41818; /* 오류·삭제 */

    /* 공통 파생색: 기준색과 혼합 비율로 조절한다. */
    --ui-primary-soft: color-mix(in srgb, var(--ui-primary-light) 8%, var(--ui-white));
    --ui-line-soft: color-mix(in srgb, var(--ui-line) 70%, var(--ui-white));
    --ui-surface: color-mix(in srgb, var(--ui-primary-light) 5%, var(--ui-white));
    --ui-search-surface: color-mix(in srgb, var(--ui-primary-light) 3%, var(--ui-white));
    --ui-icon-soft: color-mix(in srgb, var(--ui-primary-light) 12%, var(--ui-white));
    --ui-list-row-surface: var(--ui-search-surface);
    --ui-table-head-surface: var(--ui-primary-soft);
    --ui-tab-active: color-mix(in srgb, var(--ui-primary-dark) 80%, var(--ui-white));

    /* 테마 팔레트·KPI 예외 색상과 단계별 파생 배경 */
    --palette-brand: var(--ui-primary);
    --palette-brand-dark: var(--ui-primary-dark);
    --palette-brand-light: var(--ui-primary-light);
    --palette-danger: var(--ui-danger);
    --palette-taupe: #ad8962;
    --palette-slate: #747a82;
    --palette-olive: #7d866f;
    --tab-depth-1: color-mix(in srgb, var(--ui-primary) 3%, var(--ui-white));
    --tab-depth-2: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-white));
    --tab-depth-3: color-mix(in srgb, var(--ui-primary) 11%, var(--ui-white));
    --tab-depth-4: color-mix(in srgb, var(--ui-primary) 15%, var(--ui-white));
    --tab-depth-5: color-mix(in srgb, var(--ui-primary) 20%, var(--ui-white));
    --tab-depth-6: color-mix(in srgb, var(--ui-primary) 25%, var(--ui-white));
    --main-kpi-icon-1: #d69c3e;
    --main-kpi-icon-2: var(--palette-taupe);
    --main-kpi-icon-3: var(--palette-slate);
    --main-kpi-icon-4: var(--palette-olive);

    /* 중립색 단계: 본문색과 흰색에서 파생한다. */
    --neutral-white: var(--ui-white);
    --neutral-50: color-mix(in srgb, var(--ui-ink) 3%, var(--ui-white));
    --neutral-100: color-mix(in srgb, var(--ui-ink) 5%, var(--ui-white));
    --neutral-200: color-mix(in srgb, var(--ui-ink) 8%, var(--ui-white));
    --neutral-300: color-mix(in srgb, var(--ui-ink) 18%, var(--ui-white));
    --neutral-350: color-mix(in srgb, var(--ui-ink) 24%, var(--ui-white));
    --neutral-400: color-mix(in srgb, var(--ui-ink) 40%, var(--ui-white));
    --neutral-500: color-mix(in srgb, var(--ui-ink) 52%, var(--ui-white));
    --neutral-600: color-mix(in srgb, var(--ui-ink) 68%, var(--ui-white));
    --neutral-700: color-mix(in srgb, var(--ui-ink) 80%, var(--ui-white));
    --neutral-800: color-mix(in srgb, var(--ui-ink) 92%, var(--ui-white));
    --neutral-900: var(--ui-ink);
    --neutral-black: var(--ui-ink);
    --neutral-panel-alpha: color-mix(in srgb, var(--ui-white) 96%, transparent);
    --neutral-overlay: color-mix(in srgb, var(--ui-ink) 28%, transparent);

    /* 공통 의미 색상 · 호환 별칭 */
    --color-text-primary: var(--ui-ink);
    --color-text-secondary: var(--ui-muted);
    --color-text-muted: var(--ui-muted);
    --color-text-subtle: var(--neutral-500);
    --color-link: var(--color-text-primary);
    --color-brand: var(--ui-primary);
    --color-brand-font: var(--ui-primary-dark);
    --color-brand-gradient-start: var(--color-brand);
    --color-brand-gradient-end: var(--palette-brand-light);
    --color-brand-soft: var(--ui-primary-soft);
    --color-brand-soft-active: var(--neutral-white);
    --color-panel: var(--neutral-white);
    --color-surface: var(--ui-surface);
    --color-surface-soft: var(--ui-surface);
    --color-surface-muted: var(--neutral-200);
    --color-border: var(--ui-line);
    --color-border-strong: color-mix(in srgb, var(--ui-line) 80%, var(--ui-primary-dark));
    --color-border-soft: var(--ui-line-soft);
    --color-button: var(--ui-white);
    --color-button-border: var(--ui-line);
    --color-checkbox-border: var(--color-button-border);
    --color-select-border: var(--ui-line);
    --color-pill-light: var(--neutral-white);
    --color-pill-dark: var(--neutral-800);
    --color-pill-text-dark: var(--neutral-900);
    --color-pill-text-light: var(--neutral-white);
    --color-btn-delete: var(--ui-danger);
    --color-btn-submit: var(--ui-primary);
    --color-searchbtn-search: var(--ui-primary);
    --control-accent: var(--color-brand);
    --color-text: var(--ui-ink);
    --color-primary: var(--ui-primary);
    --color-primary-dark: var(--ui-primary-dark);
    --color-primary-soft: var(--ui-primary-soft);
    --color-accent: var(--ui-primary);
    --color-danger: var(--ui-danger);
    --color-border-light: var(--ui-line-soft);
    --color-surface-subtle: var(--ui-surface);
    --color-page-background: var(--neutral-50);

    /* 메인페이지 색상 */
    --main-color-white: var(--neutral-white);
    --main-color-text: var(--neutral-800);
    --main-color-text-strong: var(--neutral-900);
    --main-color-text-dark: var(--neutral-800);
    --main-color-text-subtle: var(--neutral-700);
    --main-color-text-secondary: var(--neutral-600);
    --main-color-text-muted: var(--neutral-500);
    --main-color-text-light: var(--neutral-400);
    --main-color-text-empty: var(--neutral-500);
    --main-color-border: var(--neutral-350);
    --main-color-border-soft: var(--neutral-200);
    --main-color-hero-bg: var(--neutral-50);
    --main-color-control-bg: var(--neutral-100);
    --main-color-quick-bg: var(--neutral-50);
    --main-color-footer-bg: var(--neutral-100);
    --main-color-title: var(--color-brand);
    --main-color-paging: var(--palette-taupe);
    --main-color-paging-disabled: var(--neutral-350);
    --main-color-banner-text: var(--palette-brand-dark);
    --main-color-banner-border: var(--palette-brand-light);
    --main-color-banner-bg: var(--palette-brand-light);
    --main-color-banner-accent: var(--color-brand);
    --main-color-banner-arrow: var(--color-brand);
    --main-color-banner-primary-text: var(--neutral-white);
    --main-color-panel-alpha: var(--neutral-panel-alpha);

    /* 레이어 색상 */
    --layer-backdrop: var(--neutral-overlay);
    --layer-border-color: var(--neutral-900);
    --layer-header-gradient: linear-gradient(105deg, var(--ui-primary-dark), var(--ui-primary-light));
    --layer-field-border: var(--neutral-200);
    --layer-progress-color: var(--neutral-800);
    --layer-copy-table-head: var(--neutral-50);
    --layer-copy-table-stripe: var(--neutral-100);
    --layer-copy-table-line: var(--neutral-350);

    /* 샘플 색상 별칭 */
    --ink: var(--ui-ink);
    --muted: var(--ui-muted);
    --line: var(--ui-line);
    --primary: var(--ui-primary);
    --primary-soft: var(--ui-primary-soft);
    --icon-paper: var(--ui-white);
    --icon-soft: var(--ui-icon-soft);
    --surface: var(--ui-white);

    /* 그림자 · 포커스 효과 */
    --ui-content-card-shadow: 0 7px 24px color-mix(in srgb, var(--ui-ink) 3%, transparent);
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 15%, transparent);
    --shadow-soft: 0 1px 1px color-mix(in srgb, var(--ui-ink) 5%, transparent);
    --shadow-card: 0 3px 12px color-mix(in srgb, var(--ui-ink) 12%, transparent);
    --shadow-kpi: 0 4px 12px color-mix(in srgb, var(--ui-ink) 13%, transparent);
    --shadow-layer: 0 10px 30px color-mix(in srgb, var(--ui-ink) 18%, transparent);
    --color-shadow-soft: var(--shadow-soft);
    --main-shadow-card: var(--shadow-card);
    --main-shadow-kpi: var(--shadow-kpi);
    --layer-shadow: var(--shadow-layer);
}

/* 색상 테마 */
:root[data-theme="1"] {
    --ui-primary: var(--theme-1-primary); /* 기본 강조 */
    --ui-primary-light: color-mix(in srgb, var(--ui-primary) 75%, var(--ui-white)); /* 밝은 강조 */
    --ui-primary-dark: var(--theme-1-dark); /* 진한 강조 */
    --ui-ink: #1d2d45; /* 본문 */
    --ui-muted: #0f4d0a; /* 보조 글자 */
    --ui-line: #dbe4f0; /* 경계선 */
    --ui-white: #fff; /* 흰색 */
    --ui-danger: #d41818; /* 오류·삭제 */

    --palette-brand: #1da111;
    --palette-brand-dark: #148809;
    --palette-brand-light: #4cd140;
}

:root[data-theme="2"] {
    --ui-primary: var(--theme-2-primary); /* 기본 강조 */
    --ui-primary-light: color-mix(in srgb, var(--ui-primary) 75%, var(--ui-white)); /* 밝은 강조 */
    --ui-primary-dark: var(--theme-2-dark); /* 진한 강조 */
    --ui-ink: #1d2d45; /* 본문 */
    --ui-muted: #2b454e; /* 보조 글자 */
    --ui-line: #dbe4f0; /* 경계선 */
    --ui-white: #fff; /* 흰색 */
    --ui-danger: #d41818; /* 오류·삭제 */

    --palette-brand: #11a3bd;
    --palette-brand-dark: #0e7a8d;
    --palette-brand-light: #26d6f5;
    --palette-danger: #c51f32;
    --palette-taupe: #bc6870;
    --palette-slate: #a25865;
    --palette-olive: #864e59;

    /* 단계별 배경색: 7색 제한 예외 */
    --tab-depth-1: #fff7f8;
    --tab-depth-2: #fdebed;
    --tab-depth-3: #fbdde1;
    --tab-depth-4: #f8cdd2;
    --tab-depth-5: #f5bcc3;
    --tab-depth-6: #f1aab3;

    /* 메인 KPI 아이콘 색상: 7색 제한 예외 */
    --main-kpi-icon-1: #e56a75;
    --main-kpi-icon-2: #c75f69;
    --main-kpi-icon-3: #a85a64;
    --main-kpi-icon-4: #89535c;
}

:root[data-theme="3"] {
    --ui-primary: var(--theme-3-primary); /* 기본 강조 */
    --ui-primary-light: color-mix(in srgb, var(--ui-primary) 75%, var(--ui-white)); /* 밝은 강조 */
    --ui-primary-dark: var(--theme-3-dark); /* 진한 강조 */
    --ui-ink: #1d2d45; /* 본문 */
    --ui-muted: #7f5c53; /* 보조 글자 */
    --ui-line: #dbe4f0; /* 경계선 */
    --ui-white: #fff; /* 흰색 */
    --ui-danger: #d41818; /* 오류·삭제 */

    --palette-brand: #58a65f;
    --palette-brand-dark: rgb(48, 82, 52);
    --palette-brand-light: #94cf99;
    --palette-danger: #3f8246;
    --palette-taupe: #6f9672;
    --palette-slate: #587c65;
    --palette-olive: #70894f;

    /* 단계별 배경색: 7색 제한 예외 */
    --tab-depth-1: #f5fbf6;
    --tab-depth-2: #e8f5ea;
    --tab-depth-3: #daefdd;
    --tab-depth-4: #cbe8cf;
    --tab-depth-5: #b9dfbe;
    --tab-depth-6: #a8d5ae;

    /* 메인 KPI 아이콘 색상: 7색 제한 예외 */
    --main-kpi-icon-1: #58a65f;
    --main-kpi-icon-2: #4c9254;
    --main-kpi-icon-3: #417d49;
    --main-kpi-icon-4: #376a3f;
}

@font-face {
    font-family: "NanumGothic";
    font-style: normal;
    font-weight: 300;
    src: url("../../images/font/NanumGothicLight.woff") format("woff");
}

@font-face {
    font-family: "NanumGothic";
    font-style: normal;
    font-weight: 400;
    src: url("../../images/font/NanumGothicRegular.woff") format("woff");
}

@font-face {
    font-family: "NanumGothic";
    font-style: normal;
    font-weight: 500;
    src: url("../../images/font/NanumGothicBold.woff") format("woff");
}

:root {
    /* 글꼴 · 공통 별칭 */
    --font-family-base: "Noto Sans KR", "NanumGothic", "Malgun Gothic", Arial, sans-serif;
    --font-family-publisher: var(--font-family-base);
    --font-family-point: "SUIT", "NanumGothic", "Malgun Gothic", Arial, sans-serif;
    --font: var(--font-family-base);

    /* 아이콘 이미지 */
    --icon-radio-empty: url("../../images/ico_radio_empty.png");
    --icon-radio-check: url("../../images/ico_radio_check.png");
    --icon-check-empty: url("../../images/ico_checkbox_empty.png");
    --icon-check-check: url("../../images/ico_checkbox_check.png");
    --icon-layer-close: url("../../images/icon_layer_close.png");
    --icon-layer-calendar: url("../../images/icon_layer_calendar.png");
    --icon-layer-calendar-w: url("../../images/icon_layer_calendar_w.png");
    --icon-layer-arrowtop: url("../../images/icon_layer_arrowtop.png");
    --icon-layer-arrowbottom: url("../../images/icon_layer_arrowbottom.png");
    --icon-layer-arrowright: url("../../images/icon_layer_arrowright.png");
    --icon-layer-arrowleft: url("../../images/icon_layer_arrowleft.png");
    --icon-layer-option: url("../../images/icon_layer_option.png");
    --icon-layer-option-w: url("../../images/icon_layer_option_w.png");
    --icon-layer-minus: url("../../images/icon_layer_minus.png");
    --icon-layer-minus-w: url("../../images/icon_layer_minus_w.png");
    --icon-layer-pointer: url("../../images/icon_layer_pointer.png");
    --icon-layer-copy: url("../../images/icon_layer_copy.png");
    --icon-layer-codelist-plus: url("../../images/icon_layer_codelist_plus.png");
    --icon-layer-codelist-minus: url("../../images/icon_layer_codelist_minus.png");
    --icon-select-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-select-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* 글자 크기 · 줄 높이 */
    --ui-font-size: 14px;
    --ui-label-size: 15px;
    --ui-caption-size: 14px;
    --ui-title-size: 29px;
    --ui-section-size: 20px;
    --ui-table-size: 14px;
    --ui-list-size: 14px;
    --ui-button-size: 14px;
    --font-size-5xs: 0.6429rem; /* 9px - 14기준 */
    --font-size-4xs: 0.7143rem; /* 10px - 14기준 */
    --font-size-3xs: 0.7857rem; /* 11px - 14기준 */
    --font-size-2xs: 0.8571rem; /* 12px - 14기준 */
    --font-size-xs: 0.9286rem; /* 13px - 14기준 */
    --font-size-sm: 1rem; /* 14px - 14기준 */
    --font-size-md: 1.0714rem; /* 15px - 14기준 */
    --font-size-lg: 1.1429rem; /* 16px - 14기준 */
    --font-size-xl: 1.2857rem; /* 18px - 14기준 */
    --font-size-2xl: 1.4286rem; /* 20px - 14기준 */
    --font-size-3xl: 1.7143rem; /* 24px - 14기준 */
    --font-size-4xl: 2.2857rem; /* 32px - 14기준 */
    --font-size-5xl: 2.8571rem; /* 40px - 14기준 */
    --font-size-base: 14px;
    --font-size-table: var(--font-size-2xs);
    --line-height-tight: 1.35;
    --line-height-base: 1.5;
    --control-text-size: var(--font-size-md);

    /* 공통 컴포넌트 · 레이아웃 크기와 간격 */
    --ui-filter-width: 252px;
    --ui-filter-collapsed-width: 56px;
    --ui-title-description-gap: 6px;
    --ui-heading-content-gap: 18px;
    --ui-tab-panel-gap: 16px;
    --ui-choice-size: 16px;
    --ui-control-height: 38px;
    --ui-compact-height: 32px;
    --ui-control-radius: 6px;
    --ui-panel-radius: 12px;
    --ui-content-card-radius: 18px;
    --ui-content-card-padding: 24px;
    --ui-panel-content-padding: var(--ui-content-card-padding);
    --ui-panel-table-gap: 16px;
    --ui-cell-pad-y: 11px;
    --ui-cell-pad-x: 10px;
    --layout-min-width: 1440px;
    --layout-sidebar-width: 280px;
    --layout-sidebar-collapsed-width: 0;
    --aside-brand-height: 80px;
    --aside-role-height: 48px;
    --aside-menu-item-height: 44px;
    --aside-menu-title-pad-x: 16px;
    --aside-menu-sub-pad-x: 16px;
    --aside-menu-sub-pad-y: 12px;
    --aside-menu-arrow-size: 7px;
    --aside-menu-arrow-gap: 10px;
    --aside-logo-width: 150px;
    --layout-header-top-height: 28px;
    --layout-header-bottom-height: 76px;
    --layout-main-pad-top: 12px;
    --layout-main-pad-right: 40px;
    --layout-main-pad-left: 100px;
    --header-item-gap: 16px;
    --header-item-icon-size: 18px;
    --header-item-font-size: 15px;
    --layout-content-gap: 18px;
    --layout-section-gap: 10px;
    --layout-section-block-gap: 8px;
    --layout-nav-gap: 8px;
    --layout-title-gap: 14px;
    --title-pad-left: 28px;
    --title-icon-size: 25px;
    --title-icon-rotate: 35deg;

    /* 버튼 · 컨트롤 크기 */
    --button-height: 38px;
    --button-radius: 6px;
    --button-pad-x: 12px;
    --minibutton-height: 30px;
    --minibutton-radius: 6px;
    --minibutton-pad-x: 12px;
    --control-gap: 8px;
    --control-hit-pad-y: 4px;
    --control-hit-pad-x: 0px;
    --control-control-size: 34px;
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-panel: 8px;
    --control-height: 38px;
    --radius: 20px;

    /* 레이어 크기와 간격 */
    --layer-z-index: 1000;
    --layer-width: 814px;
    --layer-min-height: 292px;
    --layer-radius: 10px;
    --layer-header-height: 59px;
    --layer-header-margin: 5px;
    --layer-header-pad-x: 20px;
    --layer-body-pad-x: 27px;
    --layer-field-height: 42px;
    --layer-field-width: 486px;
    --layer-field-radius: 8px;
    --layer-footer-height: 64px;
    --layer-copy-height: 520px;
    --layer-copy-check-size: 30px;
    --layer-version-field-width: 142px;
    --layer-schedule-height: 626px;
    --layer-schedule-label-width: 236px;
    --layer-schedule-field-width: 194px;
    --layer-schedule-name-width: 455px;
    --layer-schedule-small-width: 53px;
    --layer-schedule-check-size: 25px;

    /* 검색 영역 크기와 간격 */
    --search-control-gap: 12px;
    --search-button-gap: 16px;
    --search-button-width: 73px;
    --search-lils-label-first-width: 15%;
    --search-lils-input-width: 30%;
    --search-lils-group-gap: 10%;
    --search-lils-label-second-width: 15%;
    --search-lils-select-width: 30%;
    --search-li-label-width: 92px;
    --search-li-input-width: 486px;
    --search-lli-label-first-width: 75px;
    --search-lli-label-second-width: 112px;
    --search-lli-input-width: 263px;

    /* 테이블 크기와 간격 */
    --table-head-height: 42px;
    --table-row-pad-y: 9px;
    --table-row-pad-x: 10px;
    --table-checkbox-size: 22px;
    --table-select-min-height: 24px;
    --table-select-pad-y: 4px;
    --table-select-pad-x: 10px;
    --table-pill-pad-y: 4px;
    --table-pill-pad-x: 10px;
    --table-pill-radius: 5px;

    /* 테이블 열 너비 */
    --ecaf-col-select: 60px;
    --ecaf-col-name: 32%;
    --ecaf-col-version: 8%;
    --ecaf-col-writer: 12%;
    --ecaf-col-created: 12%;
    --ecaf-col-applied: 12%;
    --ecaf-col-status: 11%;
    --ecaf-col-preview: 6%;
    --ecaf-col-history: 6%;
    --ecaf-col-codebook: 8%;
    --schedule-col-select: 60px;
    --schedule-col-type: 16%;
    --schedule-col-name: 28%;
    --schedule-col-repeat: 12%;
    --schedule-col-status: 16%;
    --schedule-col-visit: 28%;
}