@charset "UTF-8"; /* ============================================ THEME.CSS — 다크/라이트 모드 전환 사용법: 또는 기본값(미지정)은 다크 모드 ============================================ */ [data-theme="light"] { i:not(.icc_k) {filter: invert(80%) sepia(0%) saturate(750%) hue-rotate(180deg);} i:not(.icc_k).icc_k { filter: invert(55%) sepia(5%) saturate(300%) hue-rotate(180deg); } i:not(.icc_k).icc_r { filter: invert(45%) sepia(90%) saturate(800%) hue-rotate(310deg); } i:not(.icc_k).icc_g { filter: invert(62%) sepia(97%) saturate(400%) hue-rotate(127deg);} i:not(.icc_k).icc_b {filter: invert(55%) sepia(60%) saturate(900%) hue-rotate(190deg);} i:not(.icc_k).icc_w {filter: brightness(2);} i:not(.icc_k).icc_bg {filter: brightness(2);} } /* ============================================ 라이트 모드 토큰 오버라이드 ============================================ */ [data-theme="light"] { /* Colors - Text */ --text-strong: #0d1117; --text: #24292f; --text-muted: #57606a; --text-placeholder: #9ca3af; --point :#00b2be; /* Colors - Background */ --bg: #f6f8fa; --bg-elev: #eef1f5; --bg-card: #ffffff; --bg-input: #f0f3f6; --bg-hover: #e8ecf0; --bg_tip: #c8ebe6; /* Colors - Borders */ --border: #d0d7de; --border-secondary: #c6cdd4; --border-hover: #8c959f; --border_tip :#98ced5;; /* Shadows (밝은 배경에 맞게 연하게) */ --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-3: 0 25px 50px rgba(0, 0, 0, 0.18); /* 브랜드 색은 그대로, 필요시 아래 주석 해제해 조정 */ /* --brand: #00b894; */ /* --brand-hover: #00a381; */ --gra_brand: radial-gradient(circle at 0% 0%, rgba(0, 212, 170, 0.26), transparent 60%), rgb(232 228 228 / 96%); --gra_brand_border: 1px solid rgba(0, 212, 170, 0.6); } /* ============================================ 라이트 모드 — 인라인 색상 하드코딩 보정 (common.css 에 변수 없이 박힌 색들) ============================================ */ /* 헤더 배경: 라이트에서 반투명 흰색으로 */ [data-theme="light"] .page_header { background: rgba(246, 248, 250, 0.88); border-bottom-color: var(--border-secondary); } /* 사이드바 멤버십 카드 */ [data-theme="light"] .h_membership .card { border-color: var(--border); background: linear-gradient(180deg, #ffffff, #f0f3f6); } /* 태그: ok / warn */ [data-theme="light"] .tag-ok { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; } [data-theme="light"] .tag-warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; } /* h_auth 배경 */ [data-theme="light"] .h_auth { background: rgba(246, 248, 250, 0.9); border-color: rgba(0, 0, 0, 0.1); } /* 로그 패널 */ [data-theme="light"] .log_tab { background: var(--bg-card); border-left-color: var(--border); } /* 계정 카드 박스그림자 */ [data-theme="light"] .cont .account_card { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* 스크롤바 */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-input); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-secondary); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* content.css 의 top_controls 배경 */ [data-theme="light"] .top_controls { background: rgba(255, 255, 255, 0.7); } /* search_area v2 */ [data-theme="light"] .search_area.v2 { background: var(--bg-input); } /* tab_group */ [data-theme="light"] .tab_group { background: rgba(210, 218, 226, 0.6); } /* tab_btn active */ [data-theme="light"] .tab_btn.active { background: var(--bg-card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } /* st_switch track (공통) */ [data-theme="light"] .st_switch_track { background: #c6cdd4; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); } [data-theme="light"] .st_switch_thumb { background: #ffffff; } /* ============================================ 라이트 모드 — content.css 하드코딩 보정 ============================================ */ /* wdl 아이콘 배경 (radial-gradient 흰색 → 투명) */ [data-theme="light"] .wdl-mini.wdl-slim .wdl-item .ico { background: radial-gradient(ellipse at center, rgba(0,0,0,0.03) 0%, transparent 70%); } /* layer_end 배경 (모달 하단 어두운 바) */ [data-theme="light"] .layer_end { background: var(--bg-input); } /* list_txt 아이템: 흰색 반투명 테두리 → 라이트용 */ [data-theme="light"] .list_txt li { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); } /* sys_textarea logs: 어두운 오버레이 → 연한 배경 */ [data-theme="light"] .sys_textarea .logs { background: rgba(0, 0, 0, 0.04); } /* layer_bg: 모달 오버레이 (다크모드와 동일해도 무방하나 살짝 연하게) */ [data-theme="light"] .layer_bg { background: rgba(0, 0, 0, 0.5); } /* ============================================ 라이트 모드 — content_2.css 하드코딩 보정 ============================================ */ /* custom-select pick 배지: 형광 → 브랜드 */ [data-theme="light"] .custom-select__option span.pick { background: var(--brand); color: #ffffff; } /* membership_badge_current: 어두운 배경 → 라이트용 */ [data-theme="light"] .membership_badge_current { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .membership_badge_current b { color: var(--brand); } /* membership_table 홀수행 hover */ [data-theme="light"] .membership_table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .membership_table tbody tr:hover { background: rgba(0, 212, 170, 0.06); } /* plan_card 배경: 어두운 #162332 → 라이트용 */ [data-theme="light"] .plan_card { background: var(--bg-card); } /* plan_note: 어두운 반투명 배경 */ [data-theme="light"] .plan_note { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); } /* compare_table thead: 어두운 배경 → 라이트용 */ [data-theme="light"] .compare_table thead th { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .compare_table th, [data-theme="light"] .compare_table td { border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .compare_group th { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .compare_table tbody th { background: transparent; } /* legal_wrapper: 어두운 bg-elev */ [data-theme="light"] .legal_wrapper { border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .legal_toc_inline, [data-theme="light"] .legal_section { border-color: rgba(0, 0, 0, 0.08); } /* auto_prompt_layer_in: 어두운 배경 #121820 → 라이트용 */ [data-theme="light"] .auto_prompt_layer_in { background: var(--bg-card); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.15); } [data-theme="light"] .auto_prompt_layer_in::before { background: var(--bg-card); } /* auto_prompt_p.sub mini_box */ [data-theme="light"] .auto_prompt_p.sub span.mini_box { background: rgba(0, 212, 170, 0.08); border-color: rgba(0, 212, 170, 0.3); } /* help_tip / help_tip_box / help_tip_btn: 어두운 팝업 → 라이트용 */ [data-theme="light"] .help_tip_i, [data-theme="light"] .help_tip_btn { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.04); color: var(--text); } [data-theme="light"] .help_tip::after, [data-theme="light"] .help_tip_box, [data-theme="light"] .help_tip_content { background: var(--bg-card); color: var(--text); border-color: rgba(0, 212, 170, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15); } [data-theme="light"] .help_tip::before, [data-theme="light"] .help_tip_box::before { background: var(--bg-card); border-color: rgba(0, 212, 170, 0.35); } /* desc_ico: 어두운 teal 계열 → 라이트 조정 */ [data-theme="light"] .desc_ico { border-color: rgba(0, 212, 170, 0.5); background: rgba(0, 212, 170, 0.1); color: #008f76; } /* c_tags: 어두운 배경 → 라이트용 */ [data-theme="light"] .c_tags { border-color: var(--border-secondary); background: var(--bg-input); color: var(--text-muted); } [data-theme="light"] .c_tags b { color: var(--text); } /* checkbox_list v2 라디오 테두리 */ [data-theme="light"] .checkbox_list.v2 label.st_radio.v2 { border-color: var(--border-secondary); } [data-theme="light"] .checkbox_list.v2 label.st_radio.v2.on, [data-theme="light"] .checkbox_list.v2 label.on { border-color: var(--brand); } /* checkbox_list v3 구분선 */ [data-theme="light"] .checkbox_list.v3 { border-color: var(--border-secondary); } [data-theme="light"] .checkbox_list.v3.li_4 label + label::before { background: var(--border); } /* ckv2 pill 체크박스 */ [data-theme="light"] label.ckv2 .label_txt { border-color: var(--border-secondary); background: var(--bg-input); color: var(--text-muted); } [data-theme="light"] label.ckv2 :checked + .label_txt { border-color: var(--brand); background: rgba(0, 212, 170, 0.08); color: #005c4e; } /* ============================================ 라이트 모드 — tool_icon.css 하드코딩 보정 ============================================ */ /* btn_icon: 흰색 반투명 배경 → 라이트용 */ [data-theme="light"] .btn_icon { background: rgba(0, 0, 0, 0.07); color: #24292f; } [data-theme="light"] .btn:hover .btn_icon { background: rgba(0, 0, 0, 0.12); } /* icon_item 카드 */ [data-theme="light"] .icon_item { border-color: rgba(0, 0, 0, 0.08); background: var(--bg-card); } [data-theme="light"] .icon_item:hover { border-color: rgba(0, 212, 170, 0.4); background: var(--bg-hover); } [data-theme="light"] .icon_item .btn_icon { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .icon_item:hover .btn_icon { background: rgba(0, 0, 0, 0.1); } /* choice_btn: 흰색 반투명 → 라이트용 */ [data-theme="light"] .choice_btn { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.02); } /* ============================================ 다크/라이트 토글 버튼 헤더 .header_right 안에 넣으세요: ============================================ */ .theme_toggle { position: fixed; bottom: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-8); border: 1px solid var(--border-secondary); background: var(--bg-card); color: var(--text); cursor: pointer; transition: background var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); flex-shrink: 0; z-index: 999; } .theme_toggle:hover { background: var(--bg-hover); border-color: var(--border-hover); transform: rotate(15deg); } /* 아이콘: 기본=달 (다크모드에서 표시), 라이트=해 */ .theme_toggle_icon { display: block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: opacity var(--dur-med) var(--ease-standard); } /* 다크 모드일 때 → 달 아이콘 */ .theme_toggle_icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d1d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E"); } /* 라이트 모드일 때 → 해 아이콘 */ [data-theme="light"] .theme_toggle_icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2324292f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E"); }