/*
// [Client] /theme/Simple_type-3/css/woodline_global.css
// Version: v1.1.0 (Stable)
// Date: 2026-04-09
// Author: Web-lease_ClaudeCode
// [변경 이력]
// - v1.1.0 : 최초 생성 — 서브페이지/게시판/폼 전역 다크 모드 무결성 확보
// [기능 요약]
// 1. 그누보드 + 나리야 기본 흰색 배경 오버라이드 (body, wrapper, container)
// 2. 폼 요소(input, textarea, select) 다크 모드 정규화
// 3. 게시판 table/th/td 다크 톤 억제
// 4. 페이지네이션 알약(Pill) 형태 다크 오버라이드
// 5. 링크, 뱃지, 알림 등 UI 공통 토큰 정규화
*/

/* =============================================
   0. DESIGN TOKENS (전역 CSS 변수)
   ============================================= */
:root {
  --color-bg:           #121212;
  --color-surface:      #181818;
  --color-surface-2:    #202020;
  --color-surface-3:    #2a2a2a;
  --color-accent:       #C5A880;
  --color-accent-light: #D4BC9A;
  --color-accent-dim:   rgba(197, 168, 128, 0.14);
  --color-text:         #F5F5F7;
  --color-text-sub:     rgba(245, 245, 247, 0.62);
  --color-text-muted:   rgba(245, 245, 247, 0.35);
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-form:  rgba(255, 255, 255, 0.10);
  --color-border-focus: var(--color-accent);
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-pill:  500px;
  --font-wla:     'Pretendard', -apple-system, 'Apple SD Gothic Neo', BlinkMacSystemFont, sans-serif;
  --transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================
   1. GLOBAL BACKGROUND / LAYOUT 정규화
   나리야 기본 흰색 배경 전면 오버라이드
   ============================================= */
html,
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-wla) !important;
}

/* 나리야 wrapper 계층 */
.wrapper,
#wrapper {
  background-color: var(--color-bg) !important;
}

/* Bootstrap 카드/패널 */
.card,
.panel,
.panel-body,
.panel-heading,
.panel-default,
.well {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Bootstrap Modal */
.modal-content {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--color-border) !important;
}

/* 드롭다운 */
.dropdown-menu {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
}

.dropdown-item {
  color: var(--color-text-sub) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-accent-dim) !important;
  color: var(--color-accent) !important;
}

/* 텍스트 유틸리티 */
.text-muted { color: var(--color-text-muted) !important; }
.text-dark   { color: var(--color-text) !important; }

/* 구분선 */
hr {
  border-color: var(--color-border) !important;
  opacity: 1;
}


/* =============================================
   2. LINK 정규화
   ============================================= */
a {
  color: var(--color-accent);
  transition: color var(--transition);
}

a:hover,
a:focus {
  color: var(--color-accent-light);
  text-decoration: none;
}

/* 일반 본문 링크 (게시판 제목 등) */
.bo_tit a,
.bo_subject a,
td.bo_tit a,
.wr_subject a {
  color: var(--color-text) !important;
}

.bo_tit a:hover,
.bo_subject a:hover,
.wr_subject a:hover {
  color: var(--color-accent) !important;
}


/* =============================================
   3. FORM 요소 다크 모드 정규화
   ============================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-form) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-wla) !important;
  transition:
    border-color var(--transition),
    box-shadow   var(--transition) !important;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.18) !important;
  background-color: var(--color-surface-2) !important;
}

/* Bootstrap form-control 오버라이드 */
.form-control {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-form) !important;
}

.form-control:focus {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.18) !important;
}

/* select 화살표 다크 커스텀 */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C5A880' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

/* 라디오 / 체크박스 강조 */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* 버튼 공통 다크 오버라이드 */
.btn-default,
.btn-secondary {
  background-color: var(--color-surface-3) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.btn-primary {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #1a1208 !important;
  border-radius: var(--radius-pill) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-accent-light) !important;
  border-color: var(--color-accent-light) !important;
}


/* =============================================
   4. 게시판 TABLE 다크 모드 정규화
   ============================================= */
table {
  border-color: var(--color-border) !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
}

th {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-sub) !important;
  border-color: var(--color-border) !important;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

td {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

tr:hover > td {
  background-color: rgba(197, 168, 128, 0.05) !important;
}

/* 나리야/그누보드 게시판 전용 클래스 */
.bo_list_table,
.wr_list,
.list_table {
  background-color: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.bo_list_table th,
.wr_list th,
.list_table th {
  background-color: var(--color-surface-2) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.bo_list_table td,
.wr_list td,
.list_table td {
  border-bottom: 1px solid var(--color-border) !important;
}

/* 게시물 뷰 영역 */
#bo_v_atc,
.bo_v_atc,
.wr_content {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* 댓글 영역 */
.bo_vc_list,
.cmt_list {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Bootstrap striped table */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: var(--color-text) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(197, 168, 128, 0.06) !important;
  color: var(--color-text) !important;
}

/* 테이블 헤더 다크 */
.table-dark,
.thead-dark > tr > th {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-sub) !important;
  border-color: var(--color-border) !important;
}


/* =============================================
   5. 페이지네이션 (알약 Pill 형태 오버라이드)
   ============================================= */
/* 그누보드 기본 페이징 */
.pg_wrap,
.pagination,
nav[aria-label="pagination"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 24px 0;
}

/* 페이징 공통 아이템 */
.pg_wrap a,
.pg_wrap strong,
.pg_wrap span,
.pagination .page-item .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: var(--font-wla) !important;
  text-decoration: none !important;
  transition:
    background-color var(--transition),
    color            var(--transition),
    border-color     var(--transition) !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text-sub) !important;
  line-height: 1 !important;
}

/* 비활성 페이지 Hover */
.pg_wrap a:hover,
.pagination .page-item:not(.active) .page-link:hover {
  background-color: var(--color-surface-3) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* 현재 페이지 (Active) */
.pg_wrap strong,
.pagination .page-item.active .page-link {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #1a1208 !important;
  font-weight: 700 !important;
  cursor: default !important;
}

/* 이전/다음 화살표 버튼 */
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_start,
.pg_wrap .pg_end,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

.pg_wrap .pg_prev:hover,
.pg_wrap .pg_next:hover,
.pg_wrap .pg_start:hover,
.pg_wrap .pg_end:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  background-color: var(--color-accent-dim) !important;
}

/* 비활성(disabled) 상태 */
.pagination .page-item.disabled .page-link {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  opacity: 0.4;
}


/* =============================================
   6. 알림 / 뱃지 / 라벨 정규화
   ============================================= */
.badge,
.label {
  font-family: var(--font-wla) !important;
}

.badge-primary,
.label-primary { background-color: var(--color-accent) !important; color: #1a1208 !important; }
.badge-secondary,
.label-default { background-color: var(--color-surface-3) !important; color: var(--color-text-sub) !important; }

.alert {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.alert-info    { border-color: rgba(197, 168, 128, 0.35) !important; background-color: var(--color-accent-dim) !important; }
.alert-danger  { border-color: rgba(220, 80, 80, 0.35) !important;   background-color: rgba(220, 80, 80, 0.08) !important; }
.alert-success { border-color: rgba(80, 200, 120, 0.35) !important;  background-color: rgba(80, 200, 120, 0.08) !important; }
.alert-warning { border-color: rgba(220, 160, 60, 0.35) !important;  background-color: rgba(220, 160, 60, 0.08) !important; }


/* =============================================
   7. 영카트(YoungCart) 쇼핑몰 요소 정규화
   ============================================= */
/* 상품 리스트 카드 */
.item_list .item_photo_box,
.it_wrap,
.shop_item {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* 가격 텍스트 */
.it_price,
.sale_price,
.it_s_price {
  color: var(--color-accent) !important;
  font-weight: 700;
}

/* 상품 상세 옵션 선택 */
.it_option select,
#it_sel_wrap select {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-form) !important;
  color: var(--color-text) !important;
}

/* 장바구니 테이블 */
#frm_cart table,
.cart_list table {
  border-top: 1px solid var(--color-border) !important;
}

#frm_cart th,
.cart_list th {
  background-color: var(--color-surface-2) !important;
}

/* 주문/결제 폼 영역 */
.order_list,
.order_form {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}