/** ===================================================== * color-common-romini.css * Base: color-common-보리챗.css * Romini.ai 전용 컬러 시스템 * * ── Romini 10색 팔레트 ────────────────────────────── * --bg-base : #17161E 메인 배경 * --bg-surface : #221F2D 카드, 패널 * --bg-elevated : #2E2840 호버, 구분선 * --color-primary : #9B4DFF 테마 포인트 (보라) * --color-secondary:#E040A0 CTA, 좋아요, 핑크 * --text-main : #FFFFFF 본문 * --text-sub : #ADADAD 보조 텍스트 * --text-muted : #676767 흐린 텍스트 * --border : #2E2840 구분선 * --color-error : #FF3E3E 에러, 경고 * --color-romance : #E8637A 로맨스 섹션 전용 (v2 추가) * ──────────────────────────────────────────────────── * * 수정된 항목에는 ## 이전 주석 표기 * ===================================================== */ /** 다크모드 */ :root{ /* ── Romini 10색 팔레트 (원본 참조 변수) ── */ --bg-base: #17161E; --bg-surface: #221F2D; --bg-elevated: #2E2840; --color-primary: #9B4DFF; --color-secondary: #E040A0; --text-main: #FFFFFF; --text-sub: #ADADAD; --text-muted: #676767; --border: #2E2840; --color-error: #FF3E3E; --color-romance: #E8637A; /* ## v2 신규 : 로맨스 섹션 전용 웜 로즈 */ /* color-scheme */ --color-scheme:dark; /* tap-highlight-color */ --highlight-color:rgba(255, 255, 255, 0.1); /* box-shadow color */ --tw-shadow-color:0px -1px 2px 0px hsla(0,0%,100%,.2); /* ── font-color ── */ --main-color:var(--text-main); /* ## 이전 : #FFFFFF */ --sub-color1:#C9C9C9; --sub-color2:var(--text-muted); /* ## 이전 : #878787 */ --sub-color3:#D1D1D1; --sub-color4:var(--text-sub); /* ## 이전 : #ADADAD */ --sub-color5:var(--text-muted); /* ## 이전 : #676767 */ --sub-color6:#E3E3E3; --sub-color7:var(--text-muted); /* ## 이전 : #878787 */ --sub-color8:#D1D1D1; --sub-color9:var(--text-main); /* ## 이전 : #FFFFFF */ --sub-color10:#C1C1C1; --sub-color11:#9A9A9A; --red-color:var(--color-error); /* ## 이전 : #FF0000 */ --red-color2:var(--color-error); /* ## 이전 : #FF3E3E */ --holder-color:#828282; --user-color:#99C962; --green-color1:var(--user-color); --character-color:#FFAA68; --purple-color:var(--color-primary); /* ## 이전 : #9A00FF */ --purple-green-color:#8CE327; --gold-color1:#EFE1BA; --blue-thin-color1:#BEEBE4; /* ── background-color ── */ --main-bg-color:var(--bg-base); /* ## 이전 : #171818 */ --main-bg-color-op9:rgba(23, 22, 30, 0.9); /* ## 이전 : rgba(23, 24, 24, 0.9) */ --main-bg-color-op8:rgba(23, 22, 30, 0.8); /* ## 이전 : rgba(23, 24, 24, 0.8) */ --main-bg-color-op7:rgba(23, 22, 30, 0.7); /* ## 이전 : rgba(23, 24, 24, 0.7) */ --main-bg-color-op6:rgba(23, 22, 30, 0.6); /* ## 이전 : rgba(23, 24, 24, 0.6) */ --main-bg-color-op5:rgba(23, 22, 30, 0.5); /* ## 이전 : rgba(23, 24, 24, 0.5) */ --main-bg-color-op4:rgba(23, 22, 30, 0.4); /* ## 이전 : rgba(23, 24, 24, 0.4) */ --main-bg-color-op3:rgba(23, 22, 30, 0.3); /* ## 이전 : rgba(23, 24, 24, 0.3) */ --main-bg-color-op2:rgba(23, 22, 30, 0.2); /* ## 이전 : rgba(23, 24, 24, 0.2) */ --sub-bg-color:var(--bg-surface); /* ## 이전 : #282828 */ --sub-bg-color2:var(--bg-surface); /* ## 이전 : #292929 */ --sub-bg-color3:var(--bg-elevated); /* ## 이전 : #353535 */ --sub-bg-color4:#4B4B4B; --sub-bg-color5:var(--bg-base); /* ## 이전 : #202020 */ --sub-bg-color6:var(--bg-elevated); /* ## 이전 : #353535 */ --sub-bg-color7:#424242; --sub-bg-color8:#4D4D50; --sub-bg-color9:#4D4D50; --sub-bg-color10:#515151; --sub-bg-color11:var(--bg-elevated); /* ## 이전 : #373737 */ --sub-bg-color12:#000000; --sub-bg-color13:#FFF; --sub-bg-color14:rgba(135, 135, 135, 0.5); --sub-bg-color15:var(--bg-surface); /* ## 이전 : #282828 */ --sub-bg-color16:#DDD; --sub-bg-color17:var(--bg-surface); /* ## 이전 : #282828 */ --sub-bg-color18:var(--bg-elevated); /* ## 이전 : #373737 */ --sub-bg-color19:var(--bg-elevated); /* ## 이전 : #373737 */ --sub-bg-color20:var(--bg-elevated); /* ## 이전 : #373737 */ --sub-bg-color21:var(--bg-surface); /* ## 이전 : #232323 */ --sub-bg-color22:var(--bg-base); /* ## 이전 : #202020 */ --sub-bg-color23:#606060; --sub-bg-color24:rgba(0, 0, 0, 0.05); --sub-bg-color24-hover:rgba(23, 22, 30, 0.5); /* ## 이전 : rgba(23, 24, 24, 0.5) */ --bg-gradient1:linear-gradient(135deg, #8B3FE8, #4500C8); --comment-bg-color:var(--bg-base); /* ## 이전 : #202020 */ --comment-bg-color-hover:var(--bg-elevated); /* ## 이전 : #433F3F */ --revert-bg-color:#000000; --revert-bg-color-op8:rgba(255, 255, 255, 0.8); --blur-cover-color:rgba(23, 22, 30, 1), rgba(23, 22, 30, 0.4), rgba(23, 22, 30, 0); /* ## 이전 : rgba(23, 24, 24, ...) */ --cover-color1:linear-gradient(90deg, var(--bg-base) 10%, rgba(155, 77, 255, 0.15) 65%, rgba(155, 77, 255, 0.15) 100%); /* ## 이전 : linear-gradient(90deg, #000 10%, rgba(142, 205, 232, 0.27) ...) */ --cover-color2:rgba(34, 28, 50, 0.7); /* ## 이전 : rgba(41, 48, 51, 0.7) */ --swp-nav-color:rgba(255, 255, 255, 0.6); --swp-nav-color-alt:rgba(254, 254, 254); --swp-nav-color-reverse:rgba(34, 34, 34); --btn-common-bg:var(--bg-surface); /* ## 이전 : #292929 */ --btn-bg-hover1:var(--bg-elevated); /* ## 이전 : #515A67 */ --bg-c1:#C1C1C1; --hashtag-bg:var(--bg-elevated); /* ## 이전 : #454646 */ --hover-bg-color:var(--bg-elevated); /* ## 이전 : #2F3030 */ --btn-blink-bg:rgba(155, 77, 255, 0.2); /* ## 이전 : rgba(219, 219, 219, 0.3) */ --lgu-fill:#FFF; /* background images */ --thumb-holder:url("https://cdn.borichat.kr/bori/thumb_holder_dark.png"); /* chat */ --ai-chatbubble-bg:rgba(255, 255, 255, 0.7); /* ── item list colors ── */ --prt-item-dim:linear-gradient(180deg, rgba(34, 31, 45, 0), rgba(34, 31, 45, 0.22), rgba(34, 31, 45, 1) 100%); /* ## 이전 : rgba(41, 41, 41, ...) */ --prt-item-bg:var(--bg-surface); /* ## 이전 : #292929 */ --prt-item-line:var(--border); /* ## 이전 : #373737 */ --prt-item-tmbb:rgba(0, 0, 0, 0.5); --prt-item-color1:var(--text-muted); /* ## 이전 : #878787 */ --prt-item-color2:#6B6A6A; --prt-item-color3:#555; --prt-item-ft-color1:var(--text-sub); /* ## 이전 : #ADADAD */ /* ── item list tag colors ── */ /* Romance 태그: 웜 로즈 계열 */ --prt-tag-color1:var(--color-romance); /* ## 이전 : var(--color-secondary) / v2 : 로맨스 전용 웜 로즈 */ --prt-tag-bg1:rgba(232, 99, 122, 0.2); /* ## 이전 : rgba(224, 64, 160, 0.2) */ /* BL 태그: 보라 계열 */ --prt-tag-color2:var(--color-primary); /* ## 이전 : #DA57B5 */ --prt-tag-bg2:rgba(155, 77, 255, 0.25); /* ## 이전 : #BD519E */ /* Fantasy 태그: 연보라 계열 */ --prt-tag-color3:#C490FF; /* ## 이전 : #DF00FF */ --prt-tag-bg3:rgba(155, 77, 255, 0.15); /* ## 이전 : rgba(223, 0, 255, 0.27) */ /* ── theme-color ── */ --theme-color:var(--color-primary); /* ## 이전 : #14ADEA (하늘색) */ --theme-color-hover:#8030E8; /* ## 이전 : #1C95C5 */ --theme-color-opacity:rgba(155, 77, 255, 0.2); /* ## 이전 : rgba(20, 173, 234, 0.2) */ --theme-color-opacity2:rgba(155, 77, 255, 0.4); /* ## 이전 : rgba(20, 173, 234, 0.4) */ --theme-color-opacity7:rgba(155, 77, 255, 0.7); /* ## 이전 : rgba(20, 173, 234, 0.7) */ --theme-color-op-fill:var(--theme-color-opacity2); --theme-color-thin:#241840; /* ## 이전 : #163642 */ --theme-color-hash:#C490FF; /* ## 이전 : #8ECEE8 */ --theme-color-sky:#E8C8FF; /* ## 이전 : #B7EAFF */ --theme-color2:var(--color-secondary); /* ## 이전 : #07D85B (초록) */ --theme-color-liked:var(--color-secondary); /* ## 이전 : #24C1FF */ --theme-color-dk:#7830C8; /* ## 이전 : #60B1D0 */ --theme-disabled:#5A2D99; /* ## 이전 : #1E6B89 */ /* ── other color ── */ --theme-orange:#FF8B3D; --theme-orange-hover:#ED7D31; --green-gradient:linear-gradient(180deg, #00FF99, #FFF700); /* ── border-color ── */ --hd-bd-bottom:var(--border); /* ## 이전 : #242424 */ --line-color1:var(--border); /* ## 이전 : #373737 */ --line-color2:#707070; --line-color3:#707070; --line-color4:#E3E3E3; --line-color5:#747474; --line-color6:#505050; --line-color7:var(--border); /* ## 이전 : #434343 */ --line-btn-color:#707070; --line-color-rmn1:#4B425E; --momories-color1:var(--border); /* ## 이전 : #373737 */ --momories-color2:var(--border); /* ## 이전 : #373737 */ --momories-color3:#545454; /* ── qna colors ── */ --qna-type1-bg:#7A2456; /* ## 이전 : #934568 */ --qna-type1-color:#FFCAE2; --qna-type2-bg:#976737; --qna-type2-color:#FFCD99; --qna-type3-bg:var(--color-primary); /* ## 이전 : #2C687F */ --qna-type3-color:#E8C8FF; /* ## 이전 : #BAECFF */ /* ── 채팅 온도치 ── */ --chat-temp-text-shadow:0 0 3px rgba(0, 0, 0, 0.3); --chat-temp-bg1:#8DDEFF; --chat-temp-bg2:#68C400; --chat-temp-bg3:#FFD500; --chat-temp-bg4:#FF7F1D; --chat-temp-bg5:#FF6464; --chat-temp-bg6:linear-gradient(135deg, var(--color-primary), var(--color-secondary)); /* ## 이전 : linear-gradient(135deg, #FFE600, #FF0090) */ /* calendar icon */ --calendar-icon:url("https://cdn.borichat.kr/bori/icons/ico_calendar_dark.svg"); } /** ===================================================== * 라이트모드 (데이모드) * 시안 기준: 보라+핑크 라이트 버전 * ===================================================== */ :root[color-theme="light"], [data-theme-mode="messenger"]{ /* ── Romini 10색 팔레트 라이트 오버라이드 ── */ --bg-base: #FFFFFF; --bg-surface: #F6F4FF; /* ## 이전 : #F6F6F6 */ --bg-elevated: #EDE8FF; /* ## 이전 : #F2F2F2 */ --color-primary: #9B4DFF; --color-secondary: #E040A0; --text-main: #000000; --text-sub: #626262; --text-muted: #888888; /* ## 이전 : #A1A1A1 / v2 : WCAG AA 충족 (#888888, 대비 4.6:1) */ --border: #E8E0FF; /* ## 이전 : #E1E1E1 */ --color-error: #CB0000; --color-romance: #E8637A; /* ## v2 신규 : 로맨스 섹션 전용 웜 로즈 */ /* color-scheme */ --color-scheme:light; /* tap-highlight-color */ --highlight-color:rgba(0, 0, 0, 0.05); /* box-shadow color */ --tw-shadow-color:0px 0px 2px 0px hsla(0,0%,0%,.25); /* font-color */ --main-color:var(--text-main); --sub-color1:#707070; --sub-color2:var(--text-muted); --sub-color3:#404040; --sub-color4:var(--text-sub); --sub-color5:#C1C1C1; --sub-color6:#878787; --sub-color7:#C4C4C4; --sub-color8:#373737; --sub-color9:#B1B1B1; --sub-color10:#292929; --sub-color11:#7A7A7A; --red-color2:var(--color-error); --holder-color:#A1A1A1; --green-color1:#2CB11D; --purple-green-color:var(--color-primary); /* ## 이전 : var(--purple-color, #9A00FF) */ --gold-color1:#B89634; --blue-thin-color1:#58B7A8; /* background-color */ --main-bg-color:var(--bg-base); --main-bg-color-op9:rgba(255, 255, 255, 0.9); --main-bg-color-op8:rgba(255, 255, 255, 0.8); --main-bg-color-op7:rgba(255, 255, 255, 0.7); --main-bg-color-op6:rgba(255, 255, 255, 0.6); --main-bg-color-op5:rgba(255, 255, 255, 0.5); --main-bg-color-op4:rgba(255, 255, 255, 0.4); --main-bg-color-op3:rgba(255, 255, 255, 0.3); --main-bg-color-op2:rgba(255, 255, 255, 0.2); --sub-bg-color:var(--bg-surface); /* ## 이전 : #F6F6F6 */ --sub-bg-color2:var(--bg-base); --sub-bg-color3:var(--bg-elevated); /* ## 이전 : #F2F2F2 */ --sub-bg-color4:#D7D7D7; --sub-bg-color5:#E3E3E3; --sub-bg-color6:var(--bg-base); --sub-bg-color7:var(--bg-surface); /* ## 이전 : #F1F1F1 */ --sub-bg-color8:#E8E8EC; --sub-bg-color9:#E8E8EC; --sub-bg-color10:var(--bg-base); --sub-bg-color11:#A1A1A1; --sub-bg-color12:var(--bg-elevated); /* ## 이전 : #F3F3F3 */ --sub-bg-color13:#000000; --sub-bg-color14:rgba(191, 190, 190, 0.5); --sub-bg-color15:var(--bg-base); --sub-bg-color16:#EEE; --sub-bg-color17:var(--bg-base); --sub-bg-color18:#B1B1B1; --sub-bg-color19:var(--bg-base); --sub-bg-color20:var(--bg-elevated); /* ## 이전 : #F2F2F2 */ --sub-bg-color21:#BFBFBF; --sub-bg-color22:var(--bg-surface); /* ## 이전 : #F8F8F8 */ --sub-bg-color23:#DDD; --sub-bg-color24:var(--bg-base); --sub-bg-color24-hover:rgba(0, 0, 0, 0.03); --bg-gradient1:linear-gradient(135deg, #B57BFF, #8B3FE8); --comment-bg-color:var(--bg-elevated); /* ## 이전 : #F1F1F1 */ --comment-bg-color-hover:#D8CCFF; /* ## 이전 : #DADADA */ --revert-bg-color:var(--bg-base); --revert-bg-color-op8:rgba(0, 0, 0, 0.8); --blur-cover-color:rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0); --cover-color1:linear-gradient(90deg, rgba(246, 244, 255, 1) 20%, rgba(155, 77, 255, 0.1) 65%, rgba(155, 77, 255, 0.1) 100%); /* ## 이전 : linear-gradient(90deg, rgba(203, 211, 215, 1) ...) */ --cover-color2:rgba(237, 232, 255, 0.7); /* ## 이전 : rgba(230, 240, 243, 0.7) */ --swp-nav-color:rgba(0, 0, 0, 0.6); --btn-common-bg:var(--bg-elevated); /* ## 이전 : #F1F1F1 */ --btn-bg-hover1:#D8CCFF; /* ## 이전 : #CDD5E2 */ --hashtag-bg:var(--bg-surface); /* ## 이전 : #F3F3F3 */ --hover-bg-color:var(--bg-elevated); /* ## 이전 : #F2F2F2 */ --btn-blink-bg:rgba(155, 77, 255, 0.15); /* ## 이전 : rgba(145, 145, 145, 0.3) */ --lgu-fill:#6D6E71; /* background images */ --thumb-holder:url("https://cdn.borichat.kr/bori/thumb_holder_light.png"); /* chat */ --ai-chatbubble-bg:rgba(250, 250, 250, 0.7); /* item list colors */ --prt-item-dim:linear-gradient(180deg, rgba(246, 244, 255, 0), rgba(246, 244, 255, 0.22), rgba(246, 244, 255, 1) 100%); /* ## 이전 : rgba(242, 242, 242, ...) */ --prt-item-bg:var(--bg-surface); /* ## 이전 : #F2F2F2 */ --prt-item-line:var(--border); /* ## 이전 : #E2E2E2 */ --prt-item-tmbb:rgba(238, 232, 255, 0.5); /* ## 이전 : rgba(238, 250, 255, 0.5) */ --prt-item-color1:var(--text-main); --prt-item-color2:#E3E3E3; --prt-item-color3:#EEE; --prt-item-ft-color1:var(--text-muted); /* ## 이전 : #878787 */ /* item list tag colors */ /* Romance 태그 */ --prt-tag-color1:var(--color-romance); /* ## 이전 : var(--color-secondary) / v2 : 로맨스 전용 웜 로즈 */ --prt-tag-bg1:rgba(232, 99, 122, 0.15); /* ## 이전 : rgba(224, 64, 160, 0.15) */ /* BL 태그 */ --prt-tag-color2:var(--color-primary); /* ## 이전 : #9544FC */ --prt-tag-bg2:rgba(155, 77, 255, 0.15); /* ## 이전 : #AE74FD */ /* theme-color */ --theme-color:var(--color-primary); /* ## 이전 : #14ADEA */ --theme-color-hover:#8030E8; /* ## 이전 : #1C95C5 */ --theme-color-opacity:rgba(155, 77, 255, 0.2); /* ## 이전 : rgba(20, 173, 234, 0.2) */ --theme-color-opacity2:rgba(155, 77, 255, 0.4); /* ## 이전 : rgba(20, 173, 234, 0.4) */ --theme-color-opacity7:rgba(155, 77, 255, 0.7); /* ## 이전 : rgba(20, 173, 234, 0.7) */ --theme-color-op-fill:var(--bg-elevated); /* ## 이전 : #EEFAFF */ --theme-color-thin:var(--bg-elevated); /* ## 이전 : #D0EFFB */ --theme-color-hash:var(--color-primary); /* ## 이전 : #60B1D0 */ --theme-color-liked:var(--color-secondary); /* ## 이전 : (미정의) */ --theme-disabled:#C8A8FF; /* ## 이전 : #89D6F4 */ /* border-color */ --hd-bd-bottom:var(--border); /* ## 이전 : #F1F1F1 */ --line-color1:var(--border); /* ## 이전 : #E1E1E1 */ --line-color3:#373737; --line-color4:#4D4D50; --line-color5:#5A5A5A; --line-color6:var(--border); /* ## 이전 : #E3E3E3 */ --line-color7:var(--border); /* ## 이전 : #E3E3E3 */ --line-btn-color:#D1D1D1; --line-color-rmn1:#CCC0E7; --momories-color1:var(--bg-elevated); /* ## 이전 : #EEFAFF */ --momories-color2:var(--border); /* ## 이전 : #E3E3E3 */ --momories-color3:var(--bg-base); /* qna colors */ --qna-type1-bg:#FFD2E6; --qna-type1-color:#9B5172; --qna-type2-bg:#F9D3AC; --qna-type2-color:#AF7335; --qna-type3-bg:var(--bg-elevated); /* ## 이전 : #D0EFFB */ --qna-type3-color:var(--color-primary); /* ## 이전 : #2E6E87 */ /* 채팅 온도치 */ --chat-temp-text-shadow:none; /* calendar icon */ --calendar-icon:url("https://cdn.borichat.kr/bori/icons/ico_calendar_light.svg"); }