@charset "utf-8";
/* ==========================================================================
   X서버 · 그누보드 공용 컴포넌트 오버라이드   g5-override.css

   [왜 필요한가]
     쪽지·검색·회원가입확인 같은 팝업 페이지는 테마의 head/tail 을 거치지 않고
     루트 head.sub.php + htdocs/css/default.css(밝은 기본값) 로만 그려진다.
     그래서 테마 CSS 만으로는 흰 화면이 남는다.
     이 파일은 그누보드 "표준 클래스" 를 어둡게 덮어서 어디서 열리든 톤을 맞춘다.

   [불러오는 곳]
     · theme/basic/head.sub.php   (일반 페이지)
     · htdocs/head.sub.php        (팝업)
   [건드리지 않는 것]
     · 그누보드 코어 CSS, miwit 스킨 CSS  → 업데이트해도 안전
   ========================================================================== */

:root{
  --xs-ink:#04010a;
  --xs-panel:rgba(7,2,17,.72);
  --xs-line:rgba(150,84,210,.35);
  --xs-line2:rgba(140,74,206,.18);
  --xs-tx:#ddd2ee;
  --xs-dim:#a99cc0;
  --xs-hi:#f0e0ff;
  --xs-pp:#b268f0;
}

/* ---------- 팝업 본체 ---------- */
body.is-popup,
body:has(> #win_title){ background:var(--xs-ink); }

.new_win{
  background:var(--xs-panel);
  border:1px solid var(--xs-line);
  color:var(--xs-tx);
}
.new_win #win_title,
.new_win .win_title{
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(96,38,164,.55) 0%, rgba(24,6,48,.6) 100%);
  border-bottom:1px solid var(--xs-line);
  color:var(--xs-hi); font-size:16px;
}
.new_win .win_desc,
.new_win .win_ul,
.new_win .win_btn{ color:var(--xs-dim); }
.new_win .win_ul{ border-bottom:1px solid var(--xs-line); background:rgba(0,0,0,.3); }
.new_win .win_ul li a{ color:var(--xs-dim); background:rgba(0,0,0,.28);
                       border:1px solid var(--xs-line2); }
.new_win .win_ul li a:hover{ color:#fff; background:rgba(96,38,164,.4); }
.new_win .win_ul li.selected a,
.new_win .win_ul li a.selected{
  color:#fff; background:linear-gradient(180deg, rgba(150,58,236,.6), rgba(48,12,92,.75));
  border-color:var(--xs-pp);
}
.new_win .btn_confirm{ background:transparent; }
#win_close, .btn_close{ color:var(--xs-dim); }
#win_close:hover, .btn_close:hover{ color:#fff; }

/* ---------- 표 ---------- */
.tbl_head01, .tbl_head02, .tbl_frm01{ color:var(--xs-tx); }
.tbl_head01 table, .tbl_head02 table, .tbl_frm01 table{ background:transparent; }
.tbl_head01 thead th, .tbl_head02 thead th{
  padding:12px 8px;
  background:linear-gradient(180deg, rgba(96,38,164,.5) 0%, rgba(28,8,56,.38) 100%);
  border-top:1px solid var(--xs-line);
  border-bottom:1px solid var(--xs-line);
  color:#dcc6f7; font-size:14px;
}
.tbl_head01 tbody td, .tbl_head02 tbody td{
  padding:11px 8px; border-bottom:1px solid var(--xs-line2);
  background:transparent; color:var(--xs-tx); font-size:14px;
}
.tbl_head01 tbody tr:hover td{ background:rgba(142,72,214,.16); }
.tbl_frm01 th{
  padding:11px 12px; width:150px; text-align:left;
  background:rgba(96,38,164,.16); border-bottom:1px solid var(--xs-line2);
  color:#c9a6f0; font-size:13px;
}
.tbl_frm01 td{
  padding:11px 12px; border-bottom:1px solid var(--xs-line2);
  background:transparent; color:var(--xs-tx); font-size:14px;
}

/* ---------- 폼 ---------- */
.frm_input, .frm_file, .frm_address,
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], input[type=tel], input[type=url],
select, textarea{
  background:rgba(0,0,0,.5);
  border:1px solid var(--xs-line);
  color:#efe6fb;
  font-size:14px;
  border-radius:0;
}
input::placeholder, textarea::placeholder{ color:#8b7da4; font-size:13px; }

/* 드롭다운 목록은 OS 기본색으로 뜬다 → 펼친 목록까지 어둡게 */
select option,
select optgroup{
  background:#12042a;
  color:#ddd2ee;
}
select option:checked,
select option:hover{ background:#4a1a8c; color:#fff; }

/* 체크박스·라디오도 OS 기본이라 흰 네모로 남는다 → 직접 그린다 */
input[type=checkbox],
input[type=radio]{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:16px; height:16px; margin:0 4px 0 0; padding:0;
  vertical-align:-3px; cursor:pointer; position:relative;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(150,84,210,.6);
}
input[type=radio]{ border-radius:50%; }
input[type=checkbox]:hover,
input[type=radio]:hover{ border-color:#c77dff; box-shadow:0 0 8px rgba(168,92,232,.55); }
input[type=checkbox]:checked{
  background:linear-gradient(180deg, #a85ce8, #5a1aa8);
  border-color:#c77dff;
}
input[type=checkbox]:checked::after{
  content:""; position:absolute; left:4px; top:0;
  width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
input[type=radio]:checked{ border-color:#c77dff; }
input[type=radio]:checked::after{
  content:""; position:absolute; left:3px; top:3px;
  width:8px; height:8px; border-radius:50%;
  background:#d8a8ff; box-shadow:0 0 8px rgba(216,168,255,.9);
}
input[type=checkbox]:disabled,
input[type=radio]:disabled{ opacity:.4; cursor:default; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:#c77dff; box-shadow:0 0 10px rgba(168,92,232,.6);
}
.required, input.required, textarea.required{ background:rgba(60,0,20,.45); }
label, .frm_label{ color:#c6b8dc; }
.frm_info, .help, .list_desc, .local_desc01, .local_desc02{
  color:var(--xs-dim); font-size:13px;
}
.local_desc01, .local_desc02{
  padding:11px 14px; background:rgba(96,38,164,.14);
  border:0; border-left:2px solid rgba(178,104,240,.55);
}
.chk_box input[type=checkbox] + label, .chk_box label{ color:var(--xs-dim); }

/* ---------- 버튼 ---------- */
.btn_submit, .btn_frmline, .btn_confirm .btn_submit,
input[type=submit], button[type=submit], .btn01, .btn02, .btn_b01, .btn_b02{
  padding:0 18px; height:40px; line-height:38px;
  color:#f4e8ff;
  background:linear-gradient(180deg, rgba(150,58,236,.6) 0%, rgba(48,12,92,.78) 100%);
  border:1px solid rgba(178,104,240,.55);
  border-radius:0;
  font-size:14px; font-weight:bold;
  text-shadow:0 0 10px rgba(196,132,255,.9);
}
.btn_submit:hover, .btn_frmline:hover, input[type=submit]:hover, button[type=submit]:hover{
  background:linear-gradient(180deg, rgba(198,112,255,.78) 0%, rgba(70,18,126,.9) 100%);
  box-shadow:0 0 20px rgba(178,104,240,.6);
}
.btn_cancel, .btn_close, .btn02{
  color:#c6b8dc;
  background:rgba(0,0,0,.45);
  border:1px solid var(--xs-line);
  text-shadow:none;
}

/* ---------- 페이징 ---------- */
.pg_wrap{ padding:18px 0; }
.pg_page, .pg_start, .pg_prev, .pg_next, .pg_end{
  min-width:34px; height:34px; line-height:32px; margin:0 2px; padding:0 9px;
  color:#c6b8dc; background:rgba(0,0,0,.4);
  border:1px solid var(--xs-line); font-size:13px;
}
.pg_page:hover{ color:#fff; background:rgba(96,38,164,.45); }
.pg_current{
  min-width:34px; height:34px; line-height:32px; margin:0 2px; padding:0 9px;
  color:#fff; font-weight:bold;
  background:linear-gradient(180deg, rgba(150,58,236,.7), rgba(48,12,92,.85));
  border:1px solid #c77dff; box-shadow:0 0 14px rgba(178,104,240,.6);
}

/* ---------- 캡챠 ---------- */
#captcha, .captcha{ display:inline-block; }
#captcha_key, .captcha_key{
  background:rgba(0,0,0,.5); border:1px solid var(--xs-line); color:#efe6fb;
}
#captcha_reload, #captcha_mp3, .captcha_reload, .captcha_mp3{
  background:rgba(0,0,0,.45); border:1px solid var(--xs-line); color:#c6b8dc;
}
#captcha_info, .captcha_info{ color:var(--xs-dim); font-size:12px; }

/* ---------- 빈 목록 · 안내 ---------- */
.empty_list, .empty_table, .empty_write{
  padding:60px 0; text-align:center; color:var(--xs-dim); font-size:14px;
  background:transparent;
}

/* ---------- 사이드뷰(이름 클릭 메뉴) ---------- */
.sv_wrap .sv{ background:rgba(12,3,26,.96); border:1px solid var(--xs-line); }
.sv_wrap .sv a{ color:var(--xs-dim); background:transparent; border-bottom:1px solid var(--xs-line2); }
.sv_wrap .sv a:hover{ color:#fff; background:rgba(96,38,164,.4); }
.sv_member, .sv_guest, .sv_admin{ color:#c6b8dc; }

/* ---------- 그누보드 기본 링크색 ---------- */
a{ color:var(--xs-tx); }
a:hover{ color:#fff; }


/* ==========================================================================
   팝업 안쪽 흰 바탕 제거
     기본 CSS 가 표·목록 컨테이너에 흰 배경을 깔아둔다.
     구조 요소만 투명으로 만들고, 버튼·선택된 탭은 아래에서 되살린다.
   ========================================================================== */
.new_win table, .new_win thead, .new_win tbody, .new_win tfoot,
.new_win tr, .new_win th, .new_win td,
.new_win div, .new_win ul, .new_win ol, .new_win li,
.new_win form, .new_win fieldset, .new_win section, .new_win p{
  background-color:transparent;
}
.new_win .tbl_wrap, .new_win .tbl_head01, .new_win .tbl_frm01{
  background:transparent; border:0;
}
.new_win .empty_list, .new_win .empty_table{
  padding:56px 0; text-align:center; color:var(--xs-dim);
  background:rgba(0,0,0,.28); border:1px solid var(--xs-line2);
}

/* 탭 : 비활성은 어둡게, 활성만 보라 (위 투명 규칙보다 뒤에 와야 이긴다) */
.new_win .win_ul{ display:flex; gap:4px; padding:10px 12px 0; background:transparent; }
.new_win .win_ul li{ flex:1 1 0; list-style:none; }
.new_win .win_ul li a{
  display:block; padding:12px 8px; text-align:center; font-size:14px;
  color:var(--xs-dim);
  background:rgba(0,0,0,.42);
  border:1px solid var(--xs-line2); border-bottom:0;
}
.new_win .win_ul li a:hover{ color:#fff; background:rgba(96,38,164,.4); }
.new_win .win_ul li.selected a,
.new_win .win_ul li a.selected{
  color:#fff; font-weight:bold;
  background:linear-gradient(180deg, rgba(150,58,236,.72), rgba(48,12,92,.85));
  border-color:var(--xs-pp);
  box-shadow:0 0 18px rgba(178,104,240,.45) inset;
}

/* 팝업 안 버튼도 다시 한 번 (투명 규칙에 지워지지 않게) */
.new_win .btn_submit, .new_win input[type=submit], .new_win button[type=submit]{
  background:linear-gradient(180deg, rgba(150,58,236,.6) 0%, rgba(48,12,92,.78) 100%);
  border:1px solid rgba(178,104,240,.55);
}
.new_win .btn_close, .new_win .btn_cancel{
  background:rgba(0,0,0,.45); border:1px solid var(--xs-line);
}
.new_win input[type=text], .new_win input[type=password], .new_win textarea, .new_win select{
  background:rgba(0,0,0,.5);
}