/* ============================================================================
   스킨 색상 통합 CSS
   - 8개 색상 테마를 CSS 변수로 통합 관리
   - 기존 개별 파일들: add_basic_black.css, add_basic_blue.css, 등 대체
   Created: 2024-12-21
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. 색상 변수 정의
   ---------------------------------------------------------------------------- */
:root {
    /* 스킨 색상 팔레트 */
    --skin-red: #f1383c;
    --skin-blue: #262c8a;
    --skin-orange: #eb6100;
    --skin-grey: #aaa;
    --skin-black: #111;
    --skin-skyblue: #5db6ed;
    --skin-pink: #ed2165;
    --skin-redorange: #e76654;
    
    /* 공통 색상 */
    --skin-white: #fff;
    --skin-border-light: #eee;
}

/* ----------------------------------------------------------------------------
   2. 각 스킨 클래스에 테마 색상 변수 할당
   ---------------------------------------------------------------------------- */
.skin-red { --theme-color: var(--skin-red); }
.skin-blue { --theme-color: var(--skin-blue); }
.skin-orange { --theme-color: var(--skin-orange); }
.skin-grey { --theme-color: var(--skin-grey); }
.skin-black { --theme-color: var(--skin-black); }
.skin-skyblue { --theme-color: var(--skin-skyblue); }
.skin-pink { --theme-color: var(--skin-pink); }
.skin-redorange { --theme-color: var(--skin-redorange); }

/* 대소문자 호환 (기존 코드 호환성) */
.skin-redOrange { --theme-color: var(--skin-redorange); }

/* ----------------------------------------------------------------------------
   3. Cell Label 스타일 (.cellab)
   ---------------------------------------------------------------------------- */
[class*="skin-"] .cellab {
    background-color: var(--theme-color);
    color: var(--skin-white);
}

/* ----------------------------------------------------------------------------
   4. Alert 스타일
   ---------------------------------------------------------------------------- */
[class*="skin-"] .alert {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: var(--skin-white) !important;
}

/* ----------------------------------------------------------------------------
   4. 버튼 스타일 (prev, next, end)
   ---------------------------------------------------------------------------- */
[class*="skin-"] .end {
    background: var(--theme-color);
    border-color: var(--theme-color) !important;
    color: var(--skin-white);
}

[class*="skin-"] .prev {
    background: var(--skin-white);
    border-color: var(--theme-color);
    color: var(--theme-color);
}

[class*="skin-"] .next {
    background: var(--theme-color);
    border-color: var(--theme-color) !important;
    color: var(--skin-white);
}

/* ----------------------------------------------------------------------------
   5. 페이지 번호 및 진행바
   ---------------------------------------------------------------------------- */
[class*="skin-"] .num {
    color: var(--theme-color);
}

[class*="skin-"] .pagebar span,
[class*="skin-"] .pageBar span {
    background: var(--theme-color);
}

[class*="skin-"] .pagebar span::before,
[class*="skin-"] .pageBar span::before {
    background: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   6. Option Input (라디오, 체크박스)
   ---------------------------------------------------------------------------- */
[class*="skin-"] .option-input {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] .option-input:checked {
    background: var(--theme-color);
}

[class*="skin-"] input:checked:hover {
    background: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   7. Rank Text 스타일
   ---------------------------------------------------------------------------- */
[class*="skin-"] .rank-text {
    background-color: var(--skin-white) !important;
    border: 1px solid var(--theme-color) !important;
    color: var(--theme-color) !important;
}

/* ----------------------------------------------------------------------------
   8. 테이블 스타일 (table_ms, table_ut)
   ---------------------------------------------------------------------------- */
/* table_ms */
[class*="skin-"] .table_ms tbody .option-input {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] .table_ms tbody th,
[class*="skin-"] .table_ms tbody td::before {
    background: var(--theme-color);
}

/* table_ut */
[class*="skin-"] .table_ut tbody th,
[class*="skin-"] .table_ut tbody td::before {
    background-color: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   9. Title 스타일
   ---------------------------------------------------------------------------- */
[class*="skin-"] .title_color {
    color: var(--theme-color);
    font-weight: 700;
}

[class*="skin-"] .title2 {
    border-left-color: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   10. 헤더 및 보더
   ---------------------------------------------------------------------------- */
[class*="skin-"] #header,
[class*="skin-"] #header2 {
    border-color: var(--skin-border-light) !important;
}

/* ----------------------------------------------------------------------------
   11. Progress Bar
   ---------------------------------------------------------------------------- */
[class*="skin-"] .progress_bar {
    background: var(--skin-border-light);
}

[class*="skin-"] .progress_bar span,
[class*="skin-"] .progress_bar span::before {
    background: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   12. 스킨 버튼 (색상 선택 버튼)
   ---------------------------------------------------------------------------- */
.skin-btn .red { background: var(--skin-red); }
.skin-btn .blue { background: var(--skin-blue); }
.skin-btn .orange { background: var(--skin-orange); }
.skin-btn .grey { background: var(--skin-grey); }
.skin-btn .black { background: var(--skin-black); }
.skin-btn .skyblue { background: var(--skin-skyblue); }
.skin-btn .pink { background: var(--skin-pink); }
.skin-btn .redorange,
.skin-btn .redOrange { background: var(--skin-redorange); }

/* ----------------------------------------------------------------------------
   13. 기타 컴포넌트
   ---------------------------------------------------------------------------- */
/* 버튼 wrap */
[class*="skin-"] #content .btn_wrap .prev,
[class*="skin-"] #content .btn_wrap .next {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] #content .btn_wrap .next {
    background: var(--theme-color);
}

/* btn_white, btn_red */
[class*="skin-"] .btn_white {
    border-color: var(--theme-color) !important;
    color: var(--theme-color);
}

[class*="skin-"] .btn_red {
    background: var(--theme-color);
    border-color: var(--theme-color) !important;
}

/* 체크된 옵션 */
[class*="skin-"] #content .option-input:checked,
[class*="skin-"] #content .option-input:checked:hover {
    background: var(--theme-color);
}

[class*="skin-"] #content .option-input {
    border-color: var(--theme-color) !important;
}

/* answer label */
[class*="skin-"] #content .answer label.on {
    border-color: var(--theme-color) !important;
}

/* scale survey */
[class*="skin-"] .scale_survey table thead {
    background: var(--theme-color);
}

[class*="skin-"] .scale_survey .answer.scale table tbody td::before {
    background: var(--theme-color);
}

[class*="skin-"] #content .scale_survey table tbody .option-input {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] #content .scale_survey table tbody .option-input:checked {
    background: var(--theme-color);
}

/* address survey */
[class*="skin-"] #content .address_survey .address h4 {
    background: var(--theme-color);
}

/* login */
[class*="skin-"] #login .login_top input {
    border-color: var(--theme-color) !important;
}

/* project */
[class*="skin-"] #project li:hover {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] #project .title h3 {
    color: var(--theme-color);
}

/* header */
[class*="skin-"] #header h2 strong {
    color: var(--theme-color);
}

[class*="skin-"] #header2 ul li.on {
    border-color: var(--theme-color) !important;
}

[class*="skin-"] #header2 ul li.on a {
    color: var(--theme-color);
}

[class*="skin-"] #header3 {
    background: var(--theme-color);
}

/* tab menu */
[class*="skin-"] #tab_menu .tab_title li {
    background: var(--theme-color);
}

[class*="skin-"] #tab_menu .tab_title li.on {
    color: var(--theme-color);
}

[class*="skin-"] #tab_menu .tab_cont .page button {
    background: var(--theme-color);
}

[class*="skin-"] #tab_menu .tab_cont .page span.on {
    color: var(--theme-color);
}

/* side menu */
[class*="skin-"] #side_menu .depth1 > li.on i {
    color: var(--theme-color);
}

[class*="skin-"] #side_menu .depth2 > li.on {
    color: var(--theme-color);
}

/* ad content */
[class*="skin-"] #ad_content .graph_wrap h3 {
    color: var(--theme-color);
}

[class*="skin-"] #ad_content .top_menu .search button {
    background: var(--theme-color);
}

/* notice */
[class*="skin-"] .notice_wrap .title h3 {
    color: var(--theme-color);
}

[class*="skin-"] .notice_wrap .cont li i {
    color: var(--theme-color);
}

/* greeting */
[class*="skin-"] .greeting_wrap .logo_wrap .logo strong {
    background: var(--theme-color);
}

/* help text */
[class*="skin-"] #content .question .help,
[class*="skin-"] #content .card .help,
[class*="skin-"] #content .card-header .help {
    color: var(--theme-color);
}

/* point */
[class*="skin-"] .point {
    color: var(--theme-color);
}

/* survey done */
[class*="skin-"] .survey_done p {
    color: var(--theme-color);
}

/* normal survey checkbox */
[class*="skin-"] .normal_survey .answer .option-input.check:checked::after {
    color: var(--theme-color);
}

/* ----------------------------------------------------------------------------
   14. 반응형 스타일
   ---------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    [class*="skin-"] #top_board .tab_title li.on,
    [class*="skin-"] #header3 > ul {
        background: var(--theme-color);
    }
}

/* ----------------------------------------------------------------------------
   15. 기존 코드 호환성을 위한 개별 스킨 정의 (fallback)
   - CSS 변수를 지원하지 않는 구형 브라우저 대응
   - 필요시 주석 해제하여 사용
   ---------------------------------------------------------------------------- */

/*
@supports not (--css: variables) {
    .skin-red .alert { background-color: #f1383c !important; }
    .skin-blue .alert { background-color: #262c8a !important; }
    ... 등등
}
*/