/* ==========================================================================
다크모드 (Dark Mode)
- 페이지별로 하나씩 순차 적용. 공통 header/footer 템플릿에는 링크 안 걸고,
다크모드 작업 끝난 페이지에서만 개별적으로 추가.
- 활성화 방식: 클릭 토글 (OS 설정 무관) -> 또는 에
data-theme="dark" 속성을 JS로 토글, localStorage에 저장.
- 스코프 규칙: 페이지마다 body에 구분용 클래스(예: page-main)를 붙이고,
그 클래스 + [data-theme="dark"] 조합으로 룰을 감싼다.
(한 파일을 여러 페이지가 같이 쓰기 때문에 스코프 없이 쓰면 다른 페이지에도 번짐)
========================================================================== */
/* ============================
main.jsp 다크모드 (intro.jsp 본문 포함)
- 색상은 이 페이지 안에서만 쓰는 로컬 변수로 정의 (다른 페이지에 영향 없음)
- 기준 색: 사이트에 이미 쓰이고 있는 다크 톤(#1a1b1f, #0f1116 등)에 맞춰서 통일
============================ */
body[data-theme="dark"] {
--dm-bg: #101114; /* 페이지 배경 */
--dm-surface: #1c1e24; /* 카드/박스 배경 (밝은 배경 대체용) */
--dm-surface-2: #262a33; /* 카드 안쪽 요소 배경 (surface보다 한 단계 밝게, 구분용) */
--dm-border: #2f323c; /* 테두리 */
--dm-text: #f0f1f3; /* 기본 텍스트 */
--dm-text-muted: #9a9ea8; /* 보조/설명 텍스트 */
background: var(--dm-bg);
color: var(--dm-text);
}
/* .header-font 클래스(main_ib4/common.css)가 자체적으로
background: var(--bg-100)(흰색) / color: var(--ink-900) 를 갖고 있어서,
body 배경만 바꾸면 이 클래스가 붙은 요소는 계속 흰 배경으로 남는다 -> 직접 덮어써야 함
(.hero 뿐 아니라 header_search.jsp 최상단 래퍼
에도 붙어있어서 일반화해서 처리) */
body[data-theme="dark"] .foot_logo img,
body[data-theme="dark"] #logo{
filter: brightness(100);
}
body[data-theme="dark"] .header-font{
background: var(--dm-bg);
color: var(--dm-text);
}
/* 히어로 (검색영역 타이틀 & 뱃지) */
body[data-theme="dark"] .hero h1{
color: var(--dm-text);
}
body[data-theme="dark"] .hero-badge{
color: var(--dm-text);
}
/* 검색창 */
body[data-theme="dark"] #mainGameSearchArea .search_box,
body[data-theme="dark"] .search-wrap,
body[data-theme="dark"] .search-panel{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] #mainGameSearchArea input[type="text"]{
background: var(--dm-bg);
color: var(--dm-text);
}
body[data-theme="dark"] .search-wrap input{
background: var(--dm-surface);
color: var(--dm-text);
}
/* 헤더에 있는 검색창(#headerGameSearchArea .search_box.header-search-box, header_search.jsp)
main/intro 페이지에서는 히어로 쪽에 이미 큰 검색창이 있어서 이 헤더 검색창은
display:none 으로 숨겨져 있음 (지금은 화면에 안 보임) -> 근데 같은 컴포넌트를
다른 subpage에서도 재사용하고, 나중에 다시 보이게 될 수도 있어서 미리 맞춰둠 */
body[data-theme="dark"] .search_box.header-search-box{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .search_box.header-search-box input[type="text"]#textSearchGameInput{
background: var(--dm-surface);
color: var(--dm-text);
}
/* 검색어 입력시 뜨는 게임 자동완성 드롭박스 (#textSearchGameListBox)
실제 스타일은 main_ib4/gameList.css 에 정의돼 있음 (흰 배경 + 거의 검정 텍스트) */
body[data-theme="dark"] #textSearchGameListBox,
body[data-theme="dark"] .search_box.main-search-box #textSearchGameListBox{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] #textSearchGameListBox .sch_game .game.on ul,
body[data-theme="dark"] #textSearchGameListBox .sch_game_tab .no_lst,
body[data-theme="dark"] #textSearchGameListBox .no_lst,
body[data-theme="dark"] #textSearchGameListBox .game.drsv li,
body[data-theme="dark"] #textSearchGameListBox .sch_game_tab .game_lst li a,
body[data-theme="dark"] #textSearchGameListBox.sch_box .server ul li a{
color: var(--dm-text);
}
/* 서버 목록 좌측 구분선 + 2단 목록 가운데 구분선 - 원래 연한 회색(#eaeef7)이라
어두운 배경 위에서 너무 쨍하게 보여서, 다른 구분선들과 같은 색으로 통일 */
body[data-theme="dark"] #textSearchGameListBox.sch_box .server,
body[data-theme="dark"] #textSearchGameListBox.sch_box .server ul:before{
border-left-color: var(--dm-border);
}
/* 게임 카테고리 탭 (기본: 연회색 배경 + 회색 텍스트) */
body[data-theme="dark"] #textSearchGameListBox .sch_game_tab .tab li a{
background-color: var(--dm-bg);
border-color: var(--dm-border);
color: var(--dm-text-muted);
}
/* 선택된 탭 (기본: 흰 배경 + 검정 텍스트) */
body[data-theme="dark"] #textSearchGameListBox .sch_game_tab .tab li a.on{
background: var(--dm-surface-2);
color: #fff;
}
#textSearchGameListBox .sch_game_tab .tab li:last-child a{
border-left: 0;
}
body[data-theme="dark"] .swiper-container.main-banner-slide {
border:1px solid #1b1b1b;
}
body[data-theme="dark"] .pu-btn01.active button{
background: var(--dm-surface-2);
}
/* 게임/서버 호버 & 선택 강조색 (원래 빨강 #ff3c3c) -> 다크모드에서는 파랑으로 교체 */
body[data-theme="dark"] #textSearchGameListBox .game li:hover a,
body[data-theme="dark"] #textSearchGameListBox.sch_box .server ul li:hover a,
body[data-theme="dark"] #textSearchGameListBox.sch_box .server ul li a.on,
body[data-theme="dark"] #textSearchGameListBox .game.on .on{
color: #3669E8;
}
/* "내 게임 설정" 버튼(.cfg_my_game a)은 원래도 다크 톤(#1a1b1f 배경 + 흰 텍스트)이라 별도 처리 안 함 */
/* 퀵메뉴 (게임머니 / 아이템 / 계정) */
body[data-theme="dark"] .quick-item{
background: var(--dm-surface);
}
body[data-theme="dark"] .quick-item-inner{
background: var(--dm-surface-2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
}
body[data-theme="dark"] .quick-item-inner .quick-title{
color: var(--dm-text);
}
body[data-theme="dark"] .quick-under-title{
color: var(--dm-text-muted);
}
/* 라이트모드에서는 호버시 어두운 색(#1A1B1F/#202431)으로 강조했지만,
다크모드에서는 배경 자체가 어두워서 그대로 쓰면 호버 표시가 안 보임 -> 더 밝은 톤으로 대체 */
body[data-theme="dark"] .quick-btn:hover .quick-item{
background: #2a2d38;
}
body[data-theme="dark"] .quick-btn:hover .quick-item-inner{
background: #383c4a;
}
/* 메인 롤링 배너 컨테이너
※ 슬라이드 내용(iframe)은 애드서버(NextVIP) 소관이라 그대로 두고, 컨테이너 배경/좌우 버튼만 다크 처리 */
body[data-theme="dark"] .banner{
background-color: var(--dm-bg);
}
body[data-theme="dark"] .banner-nav{
background: rgba(255, 255, 255, 0.15);
}
body[data-theme="dark"] .banner-nav:hover{
background: rgba(255, 255, 255, 0.28);
}
/* 이번주 최고가 거래 티커 */
body[data-theme="dark"] .ticker{
background: rgba(131, 142, 184, 0.16);
}
body[data-theme="dark"] .ticker-left,
body[data-theme="dark"] .ticker-right{
color: var(--dm-text);
}
/* 혜택 & 이벤트 / 상품권 샵 / 공지사항 - 제목 텍스트 */
body[data-theme="dark"] .section-title,
body[data-theme="dark"] .notice-head,
body[data-theme="dark"] .notice-more{
color: var(--dm-text);
}
body[data-theme="dark"] .benefit-card{
background: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* 신규가입 이벤트 카드(.benefit-card.dark)는 원래도 다크 톤이라 배경만 살짝 더 어둡게 조정 + 테두리로 구분 */
body[data-theme="dark"] .benefit-card.dark{
background: #060708;
box-shadow: 0 0 0 1px var(--dm-border);
}
body[data-theme="dark"] .notice-body{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .notice-icon{
background: var(--dm-surface-2);
}
/* 피해보상 제도 / 상품권 샵 아이콘은 다크 전용 이미지(-dark.png)로 교체 (나머지 benefit-icon은 유지) */
body[data-theme="dark"] img[src$="benefit-shield.png"]{
content: url('/resources/image/main_ib4/benefit-shield-dark.png');
}
body[data-theme="dark"] img[src$="giftshop-icon.png"]{
content: url('/resources/image/main_ib4/giftshop-icon-dark.png');
}
body[data-theme="dark"] .notice-text-title,
body[data-theme="dark"] .notice-text-desc,
body[data-theme="dark"] .notice-item{
color: var(--dm-text);
}
body[data-theme="dark"] .notice-tag.info{
background: #3a3d46;
}
/* 헤더 (topbar / 로고 / 상단 링크 / 닉네임+마일리지 드롭다운)
실제 파일: WEB-INF/templates_web_4/header_search.jsp (공용 템플릿, main 페이지도 이걸 씀)
-> 아래 규칙들도 다른 페이지에서 재사용되지만 body.page-main[data-theme="dark"] 스코프
안에서만 덮어쓰므로 다크모드 없는 다른 페이지엔 영향 없음 */
body[data-theme="dark"] .topbar{
background: var(--dm-bg);
}
/* 로고 옆 "아이템베이" 텍스트 - .header-font 로 상속되는 색이 아니라
main_ib4/gameList.css의 .topbar .logo .logo-text 규칙이 #1a1b1f 를 직접 박아놔서
따로 덮어써야 함 */
body[data-theme="dark"] #footer .ft_info > a,
body[data-theme="dark"] .topbar .logo .logo-text{
color: var(--dm-text);
}
/* 스크롤 내리면 상단에 고정되는 상태 (헤더가 header_search.jsp 자체 스타일로 var(--bg-100) 강제 지정) */
body[data-theme="dark"] .topbar.fixed{
background: var(--dm-bg) !important;
border-bottom-color: var(--dm-border) !important;
}
body[data-theme="dark"] .top-links{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .top-links a{
color: var(--dm-text);
}
body[data-theme="dark"] .top-links .divider{
background: var(--dm-border);
}
body[data-theme="dark"] .user-trigger{
color: var(--dm-text);
}
/* 햄버거 아이콘(svg)이 stroke="currentColor" 라서 color로 색이 정해짐 */
body[data-theme="dark"] .menu-icon{
color: var(--dm-text);
}
body[data-theme="dark"] .user-menu{
background: var(--dm-surface);
border-color: var(--dm-border);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .user-menu-balance,
body[data-theme="dark"] .user-menu-item{
background: var(--dm-surface-2);
}
body[data-theme="dark"] .user-menu-balance-title,
body[data-theme="dark"] .user-menu-item,
body[data-theme="dark"] .user-menu-footer{
color: var(--dm-text);
}
/* 마일리지 금액/건수 강조색(#2a47b1)은 어두운 배경 위에서 잘 안보여서 더 밝은 파랑으로 교체
(다른 다크 카드에서 이미 쓰는 강조색 #6082ff 와 통일) */
body[data-theme="dark"] .user-menu-balance-value,
body[data-theme="dark"] .user-menu-count{
color: #6082ff;
}
/* TODO(개발자): 마일리지 충전/출금 옆 화살표 아이콘(user-menu-arrow.png)이 어두운 배경용이 아니라서 invert로 임시 처리. 대비 확인 필요 */
body[data-theme="dark"] .user-menu-arrow{
filter: invert(1) brightness(3);
}
body[data-theme="dark"] .user-menu-divider{
background: var(--dm-border);
}
body[data-theme="dark"] .menu-panel{
background: #1C1E24;
}
body[data-theme="dark"] .menu-panel-title{
color: var(--dm-text);
}
body[data-theme="dark"] .menu-panel-close img{
filter: invert(1) brightness(1.4);
}
body[data-theme="dark"] .menu-panel-divider{
background: var(--dm-border);
}
body[data-theme="dark"] .menu-panel-tabs > span{
border-left-color: var(--dm-border);
}
body[data-theme="dark"] .menu-panel-tabs{
background: #262A33;
}
body[data-theme="dark"] .menu-col{
color: var(--dm-text-muted);
border-color: var(--dm-border);
}
body[data-theme="dark"] .menu-col-highlight{
background: #17191E;
}
body[data-theme="dark"] .menu-col-strong{
color: var(--dm-text);
}
body[data-theme="dark"] .menu-col-highlight span{
color:var(--dm-text);
}
body[data-theme="dark"] div.slide,
body[data-theme="dark"] .menu-overlay-backdrop{
background: rgba(0, 0, 0, 0.7);
}
/* 푸터 (실제 파일: WEB-INF/templates_web_4/foot.jsp, 클래스는 main_ib3.css 에 정의됨)
공용 템플릿이라 다른 페이지에도 재사용되지만 body.page-main[data-theme="dark"] 스코프
안에서만 덮어쓰므로 다크모드 없는 다른 페이지엔 영향 없음 */
body[data-theme="dark"] .footer{
border-bottom-color: var(--dm-border);
color: var(--dm-text-muted);
}
body[data-theme="dark"] .footer .area{
background: var(--dm-bg);
}
body[data-theme="dark"] .footer .link .line img{
filter:invert(1) brightness(1.5);
}
body[data-theme="dark"] .footer .link,
body[data-theme="dark"] .footer{
background: #000;
}
body[data-theme="dark"] .footer .line .cont{
background: var(--dm-surface);
}
/* Family Site 드롭다운 */
body[data-theme="dark"] .footer .line .cont .fml_site,
body[data-theme="dark"] .footer .line .cont .fml_site.on{
background: var(--dm-surface-2);
border-color: var(--dm-border);
}
body[data-theme="dark"] .footer .line .cont .fml_site button,
body[data-theme="dark"] .footer .line .cont .fml_site .fml_site_list li a{
color: var(--dm-text);
}
/* 하단 약관/이용안내 링크들 - 원래 !important 로 박혀있어서 다크모드 쪽도 !important 로 덮어씀 */
body[data-theme="dark"] .footer .info_link li a{
color: var(--dm-text) !important;
}
body[data-theme="dark"] .footer .info_link li em{
color: var(--dm-text);
}
body[data-theme="dark"] .footer .ft_info > a{
color: var(--dm-text);
}
/* SNS 아이콘 원형 배경 (블로그/페이스북/유튜브 - 안에 B/f/Y 글자는 흰색 그대로 둬도 잘 보임) */
body[data-theme="dark"] .footer .ft_info .ft_info_sns li{
background: var(--dm-surface-2);
}
body[data-theme="dark"] .footer .info_cop .info a{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
body[data-theme="dark"] .footer .info_cop .info p{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .footer .info_cop .info p.foot_caution{
color: var(--dm-text-muted);
}
/* 하단 공정거래위원회 등 인증 로고 배너 줄 - 이미지가 .jpg라 배경이 흰색으로 박혀있어서
그냥 두면 로고들만 흰 박스로 둥둥 떠보임 -> 이미지 자체를 invert(위 .footer .link .line img)로
반전시키고, 컨테이너(.footer .link)도 배경을 #000으로 맞춰서 이미지 경계가 안 보이게 처리 */
/* ============================
trade-sub-menu 다크모드
(/item/serve/game-money/trade-sub-menu, /item/serve/item/trade-sub-menu,
/item/serve/account/trade-sub-menu 3개 페이지 공통)
- 헤더/푸터/메뉴패널/플로팅버튼/검색창 등 공용 컴포넌트는 위 main 섹션의
각 규칙에 body.page-trade-submenu[data-theme="dark"] 선택자를 추가하는 방식으로 처리함
(이 페이지도 header_search.jsp / foot.jsp 를 그대로 재사용하기 때문)
- 아래는 이 페이지에만 있는 콘텐츠(서브탭/게임카드/칩/필터) 전용 규칙
- 색상 출처: main_ib4/character/index.css (라이트모드 기준 원본 값)
============================ */
/* 상단 서브탭 (게임머니/아이템/계정 거래 서브메뉴 전환 탭) */
body[data-theme="dark"] .sub-tabs span.is-active{
color: var(--dm-text);
}
body[data-theme="dark"] .sub-tabs span{
color:var(--dm-text-muted);
}
/* 탭 밑줄 구분선(원래 옅은 회색) - 어두운 배경에서 안 보이지 않게 --dm-border로 교체 */
body[data-theme="dark"] .sub-tabs::after{
background: var(--dm-border);
}
body[data-theme="dark"] .sub-tabs span:hover{
color: var(--dm-text);
}
/* 스크롤시 상단 고정되는 서브탭 바 (itemServeMain.jsp 자체 스타일로 background:#fff 강제 지정됨) */
body[data-theme="dark"] .sub-tabs.ServeFixed{
background: var(--dm-bg);
}
/* 섹션 제목 ("인기 게임머니 거래" 등) */
body[data-theme="dark"] .sub-title{
color: var(--dm-text);
}
/* 게임 카드 목록 */
body[data-theme="dark"] .game-card{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .game-card-title{
color: var(--dm-text);
}
body[data-theme="dark"] .game-card-meta{
color: var(--dm-text);
}
body[data-theme="dark"] .game-card-meta img{
filter: invert(1) brightness(3) hue-rotate(180deg);
}
/* .rank-badge(순위 뱃지)는 원래도 다크 톤(#1a1b1f 배경 + 흰 텍스트)이라 별도 처리 안 함 */
/* 계정 거래 타입의 서버/계정 칩 목록 */
body[data-theme="dark"] .chip{
border-color: var(--dm-border);
color: var(--dm-text-muted);
}
/* .chip:hover(호버시 #1A1B1F 배경 + 흰 텍스트)는 원래도 다크 톤이라 별도 처리 안 함 */
/* 하단 인기 게임 필터 목록 */
body[data-theme="dark"] .filter-item{
background: var(--dm-surface-2);
color: var(--dm-text);
}
body[data-theme="dark"] .filter-item:hover{
background: var(--dm-border);
}
/* TODO(개발자): 필터 항목 화살표 아이콘(trade-sub-menu-arrow.png)이 어두운 배경용이 아니라서 invert로 임시 처리. 대비 확인 필요 */
body[data-theme="dark"] .filter-item::after{
filter: invert(1) brightness(3);
}
/* ============================
상품 리스트(판매/구매) 다크모드
(/item/sell/game-N/server-N/type-N, /item/buy/game-N/server-N/type-N 형태의 리스트 URL 공통)
- itemSellList.jsp / itemBuyList.jsp 둘 다 list/index.css 하나를 같이 쓰고
레이아웃도 동일해서 body.page-item-list 하나로 같이 스코프함
- 헤더/푸터/메뉴패널/플로팅버튼/검색창 등 공용 컴포넌트는 위 main 섹션의
각 규칙에 body.page-item-list[data-theme="dark"] 선택자를 추가하는 방식으로 처리함
(이 페이지도 header_search.jsp / foot.jsp 를 그대로 재사용하기 때문)
- 아래는 이 페이지에만 있는 콘텐츠(리스트 헤더/탭/필터/상품카드/사이드카드/페이징) 전용 규칙
- 색상 출처: main_ib4/list/index.css (라이트모드 기준 원본 값)
============================ */
body[data-theme="dark"] .list-page{
background: var(--dm-bg);
}
/* 리스트 상단 (게임/서버명, 변경 버튼 + 서버/상품권 선택 드롭박스) */
body[data-theme="dark"] .list-header-left{
color: var(--dm-text);
}
body[data-theme="dark"] .change-btn{
background: var(--dm-surface-2);
color: var(--dm-text-muted);
}
body[data-theme="dark"] .change-panel{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .change-panel-title{
color: var(--dm-text);
}
/* TODO(개발자): 서버선택 패널 닫기(X) 아이콘(menu-close.svg)이 어두운 배경용이 아니라서 invert로 임시 처리. 대비 확인 필요 */
body[data-theme="dark"] .change-panel-close img{
filter: invert(1) brightness(1.4);
}
body[data-theme="dark"] .change-panel-divider{
background: var(--dm-border);
}
body[data-theme="dark"] .change-panel-search{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .change-panel-search input{
color: var(--dm-text);
}
body[data-theme="dark"] .change-panel-search input::placeholder{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .change-chip{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
body[data-theme="dark"] .change-chip.is-active{
background: #3669E8;
color: #ffffff;
border-color: #3669E8;
}
/* .change-chip.is-active(선택된 서버/상품권 칩)는 원래도 파란색(#3669E8) 강조색이라 별도 처리 안 함 */
body[data-theme="dark"] .change-reset{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
body[data-theme="dark"] .change-apply{
background: #3669e8;
}
/* 판매상품/구매상품 전환 버튼 */
body[data-theme="dark"] .header-btn{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
/* .header-btn.primary(현재 선택된 쪽)도 .header-btn이랑 톤이 비슷해져서 토글 구분이 안 됨 -> 강조색으로 */
body[data-theme="dark"] .header-btn.primary{
background: #3669e8;
border-color: #3669e8;
}
/* 스크롤시 상단에 붙는 탭/필터 영역 배경 */
body[data-theme="dark"] .scroll-content.list-top{
background: var(--dm-bg);
}
/* 상품 유형 탭 (전체/게임머니/아이템/계정/기타) */
body[data-theme="dark"] .list-tabs{
background: var(--dm-bg);
border-bottom-color: var(--dm-border);
}
body[data-theme="dark"] .tab,
body[data-theme="dark"] .tab.is-active{
color: var(--dm-text);
}
body[data-theme="dark"] .tab.is-active::after{
background: var(--dm-text);
}
/* 결과 개수 / 정렬 / 동일상품 묶기 영역 */
body[data-theme="dark"] .list-info-bar{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .result-text,
body[data-theme="dark"] .result-text strong{
color: var(--dm-text);
}
body[data-theme="dark"] .ghost-btn{
background: var(--dm-surface-2);
color: var(--dm-text-muted);
}
body[data-theme="dark"] .ghost-btn img{
filter: invert(1) brightness(1.4);
}
body[data-theme="dark"] .photo-icon img,
body[data-theme="dark"] .change-search-icon{
filter: invert(1);
}
body[data-theme="dark"] .toggle{
color: var(--dm-text);
}
body[data-theme="dark"] .toggle-ui{
background: var(--dm-border);
}
body[data-theme="dark"] .toggle input:checked+.toggle-ui{
background: #2f5bff;
}
body[data-theme="dark"] .sort-btn{
color: var(--dm-text);
}
body[data-theme="dark"] .sort-btn::after{
filter: invert(1) brightness(1.4);
}
/* 정렬 드롭다운 (최신순/낮은 가격순/...) */
body[data-theme="dark"] .sort-panel{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .sort-panel li{
background: var(--dm-surface);
color: var(--dm-text);
}
body[data-theme="dark"] .sort-panel li:hover{
background: var(--dm-surface-2);
}
/* TODO(개발자): 선택된 정렬 항목 체크 아이콘(sort-img.png)이 어두운 배경용이 아니라서 invert로 임시 처리. 대비 확인 필요 */
body[data-theme="dark"] .sort-panel li.selected-sort::after{
filter: invert(1) brightness(1.4);
}
/* 필터 바 (게임머니/직업/등급/가격 등 필터 칩 + 드롭다운 패널) */
body[data-theme="dark"] .filter-bar{
background-color: var(--dm-surface);
}
/* .filter-pill(선택된 필터, 검정 배경)은 원래도 다크 톤이라 별도 처리 안 함 */
body[data-theme="dark"] .filter-pill.empty{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
body[data-theme="dark"] .filter-pill.empty::after{
filter: invert(1) brightness(1.4);
}
body[data-theme="dark"] .list-page .filter-panel{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .list-page .filter-bar input[type="checkbox"]{
background: none;
border:1px solid #9A9EA8;
}
body[data-theme="dark"] .list-page .filter-bar input[type="checkbox"]:checked{
background: url(/resources/image/list/v2/check-box-on.png) no-repeat center / contain;
border:none;
}
body[data-theme="dark"] .list-page .filter-bar input[type="radio"]:checked{
background: url(/resources/image/list/v2/radio-on.png) no-repeat center / contain;
filter:brightness(1);
}
body[data-theme="dark"] .check-item{
color: var(--dm-text);
}
body[data-theme="dark"] .price-panel{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .price-range input{
background: var(--dm-surface-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
body[data-theme="dark"] .range-sep{
color: var(--dm-text);
}
body[data-theme="dark"] .apply-btn{
background: #3669e8;
}
body[data-theme="dark"] .filter-tags,
body[data-theme="dark"] .filter-tag{
color: var(--dm-text);
}
body[data-theme="dark"] .filter-tag img{
filter: brightness(3);
}
body[data-theme="dark"] .filter-tag span,
body[data-theme="dark"] .filter-reset{
color: var(--dm-text-muted);
}
/* 검색 결과 없음 안내 */
body[data-theme="dark"] .empty-state{
color: var(--dm-text);
}
/* .empty-btn(상품 등록 알림 설정 버튼)도 .change-apply/.apply-btn랑 같은 문제라 같은 파랑으로 처리 */
body[data-theme="dark"] .empty-btn{
background: #3669e8;
}
/* 검색창(계정 검색 등) */
body[data-theme="dark"] .search-inline{
background: var(--dm-surface-2);
border-color: var(--dm-border);
}
body[data-theme="dark"] .search-inline input{
color: var(--dm-text);
background: none;
}
body[data-theme="dark"] .search-inline input::placeholder{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .search-inline.is-filled input::placeholder{
color: var(--dm-text);
}
/* 우측 하단 고정 시세 카드 */
body[data-theme="dark"] .sticky-card{
background: var(--dm-surface);
border-color: var(--dm-border);
}
body[data-theme="dark"] .sticky-title{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .sticky-icon-wrap{
border-color: var(--dm-border);
}
body[data-theme="dark"] .sticky-item-info{
background: var(--dm-bg);
border-color: var(--dm-border);
}
/* 시세 강조색(#323F95)이 어두운 배경 위에서 잘 안보여서, 다른 곳에서 이미 쓰는 밝은 파랑(#6082ff)으로 통일 */
body[data-theme="dark"] .sticky-item-name{
color: #6082ff;
}
body[data-theme="dark"] .sticky-item-date{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .sticky-price{
background: var(--dm-bg);
border-color: var(--dm-border);
color: var(--dm-text-muted);
}
body[data-theme="dark"] .sticky-price .value,
body[data-theme="dark"] .sticky-price .delta.default{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .sticky-btn{
border: 1px solid var(--dm-border);
color: var(--dm-text);
background: url(/resources/image/list/v2/sticky-w-arrow.png) #262A33;
background-repeat: no-repeat;
background-size: 7.16px;
background-position: center right 16px;
}
/* 상품 카드 (리스트의 각 상품 한 줄) */
body[data-theme="dark"] .product-card{
background: var(--dm-surface);
border-color: var(--dm-border);
color: var(--dm-text-muted);
box-shadow: 0 0 10px 0 rgba(91, 89, 158, 0.08);
}
body[data-theme="dark"] .product-card:hover {
background:#131519 !important;
}
body[data-theme="dark"] .online-badge.off{
background: var(--dm-bg);
border:1px solid var(--dm-border);
}
body[data-theme="dark"] .online-badge .online-badge-text{
color:var(--dm-text);
font-weight: 600;
}
body[data-theme="dark"] .badge-row .ico.label_item{
border:1px solid var(--dm-border);
color:var(--dm-text);
background: var(--dm-surface);
font-weight: 700;
}
body[data-theme="dark"] .online-badge.off .online-badge-text{
color:var(--dm-text-muted);
font-weight: 500;
}
body[data-theme="dark"] .action-btn.dark{
background: var(--dm-bg);
color:var(--dm-text);
border:1px solid var(--dm-border);
box-sizing: border-box;
}
/* .power.product-card(파워존 카드)는 자체 배경 이미지(list-bg.svg)로 그려지는 영역이라 배경색 자체는 별도 처리 안 함.
단, 카드 안 강조 텍스트(.product-side, #323F95)는 어두운 배경 위에서 잘 안보여서 다른 카드와 통일된 밝은 파랑으로 교체 */
body.page-item-list[data-theme="dark"] .power.product-card .product-side{
color: #3A78FF;
}
body[data-theme="dark"] .badge-row{
color: var(--dm-text);
}
body[data-theme="dark"] .seller-name,
body[data-theme="dark"] .rating{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .product-title{
color: var(--dm-text);
}
body[data-theme="dark"] .rating img{
filter: brightness(2) hue-rotate(-5deg);
}
body[data-theme="dark"] .product-time{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .product-middle{
border-left-color: var(--dm-border);
border-right-color: var(--dm-border);
}
body[data-theme="dark"] .qty-label{
color: var(--dm-text-muted);
}
body[data-theme="dark"] .attr-pill,
body[data-theme="dark"] .qty-control.compact{
background: var(--dm-bg);
border-color: var(--dm-border);
color:var(--dm-text);
}
body[data-theme="dark"] .qty-value{
color: var(--dm-text);
}
body[data-theme="dark"] .price-block .total-price,
body[data-theme="dark"] .price-block .total-price b{
color: var(--dm-text-muted);
}
/* 가격 강조색(#2f3a92)이 어두운 배경 위에서 잘 안보여서 다른 곳과 통일된 밝은 파랑으로 교체 */
body.page-item-list[data-theme="dark"] .price{
color: #6082ff;
}
body[data-theme="dark"] .product-card.normal .item-count,
body[data-theme="dark"] .product-card .price{
color: var(--dm-text);
}
/* .action-btn.primary/.dark/.muted 는 원래도 각각 채도 높은 파랑/다크 톤이라 별도 처리 안 함 */
/* 페이지네이션 */
body[data-theme="dark"] .page-btn{
background: var(--dm-surface-2);
border-color: var(--dm-border);
}
/* .page-btn.is-active는 원래도 다크 톤이라 별도 처리 안 함 */
/* 이전/다음 이동 버튼 배경(반투명 검정 20%)이 다크 페이지에서는 거의 안 보여서 반투명 흰색으로 교체 */
body[data-theme="dark"] .page-btn.icon{
background: rgba(255, 255, 255, 0.12);
}
body[data-theme="dark"] .page-btn img{
filter: invert(1) brightness(1.4);
}
body[data-theme="dark"] .f_blue{
color: #3A78FF !important;
}
/* 유료 아이콘 뱃지(label01~05)는 원래도 그라데이션 채도색이라 별도 처리 안 함 */
body[data-theme="dark"] .badge_t{
border-color: var(--dm-border);
}
body[data-theme="dark"] .badge_t p{
color: var(--dm-text);
}
/* .badge_message_g(초록)는 채도색이라 별도 처리 안 함 */
body[data-theme="dark"] .badge_message{
background: var(--dm-surface-2);
}
body[data-theme="dark"] .badge{
color: var(--dm-bg);
background: #6D82CD;
}
body[data-theme="dark"] .badge img{
filter: brightness(0);
}
/*200% 보상 badge에 lightning 클래스 추가되어야함*/
body[data-theme="dark"] .badge.lightning{
background: #85BF34;
}
/* ============================
다크모드 토글 버튼 (임시, 좌측하단 플로팅)
- 원래 intro.jsp 안에 인라인