@charset "utf-8";
/* ==========================================================================
X서버 · 게시판 오버라이드 BOARD OVERRIDE (miwit 스킨용)
[원칙]
· miwit 의 style.common.css(48KB) 는 절대 고치지 않는다.
스킨을 업데이트해도 이 파일만 유지되면 디자인이 그대로 남는다.
· miwit 은 CSS 를 가 아니라 본문 안에서 로 부른다.
그래서 이 파일은 theme/basic/tail.php 에서 "더 뒤에" 로드한다.
· 범위는 #container 안쪽으로 한정 → 사이트의 다른 영역에 영향 없음.
[팔레트] 사이트 본문과 동일
바탕 #0b0418 / #06010f 테두리 rgba(150,84,210,.35)
본문 #ddd2ee 강조 #b268f0 / #f0e0ff
최소 글자 12px, 본문 14px (어른 이용자 기준)
========================================================================== */
/* --------------------------------------------------------------------------
0. 바깥 틀 : 메인과 같은 여백·이미지 테두리
-------------------------------------------------------------------------- */
#wrapper{ padding:0; }
#container_wr{ width:auto; max-width:none; margin:0; }
#container{
float:none; width:auto; min-height:420px; margin:0;
padding:14px 16px 20px;
background:rgba(7,2,17,.62);
color:#ddd2ee;
font-size:14px;
border:9px solid transparent;
border-image:url(../img/frame.png) 16 stretch; /* 메인 패널과 같은 이미지 테두리 */
background-clip:padding-box;
}
/* miwit 이 인라인 style 로 박아둔 밝은 바탕들 (48KB CSS 를 안 고치기 위한 처리)
→ 굵은 구분 띠(height 2~4px)는 아예 안 보이게. 줄 구분은 셀 아래 1px 선으로만 한다. */
#container [style*="background-color:#efefef"],
#container [style*="background-color:#fff"],
#container [style*="background-color:#f8f8f9"],
#container [style*="background-color:#e7e7e7"],
#container [style*="background:#efefef"],
#container [style*="background:#fff"],
#container td[bgcolor],
#container td[height="2"],
#container td[height="3"],
#container td[height="4"],
#container td[height="5"]{
background-color:transparent !important;
background-image:none !important;
}
#container .mw_basic_line_color{
background-color:rgba(150,84,210,.30) !important; /* 1px 실선만 */
background-image:none !important;
}
/* 구분용 빈 줄(2~5px 굵은 띠)에는 hover 배경이 붙지 않게.
※ height="1" 은 빼야 한다. 그 줄은 "배경색으로 선을 그리는" 요소라
투명하게 만들면 마우스를 올릴 때마다 머리글 아래 선이 사라진다. */
#container tr:hover td[height="2"],
#container tr:hover td[height="3"],
#container tr:hover td[height="4"],
#container tr:hover td[height="5"]{ background-color:transparent !important; }
/* 1px 구분선은 마우스를 올려도 그대로 남는다 */
#container td[height="1"],
#container tr:hover td[height="1"],
#container tr:hover > td.mw_basic_line_color,
#container tr:hover > td.mw_basic_list_line{
background-color:rgba(150,84,210,.30) !important;
background-image:none !important;
}
/* 머리글·본문 칸 폭
관리자로 보면 맨 앞에 체크박스 칸이 하나 더 생겨서 nth-child 로 잡으면 어긋난다.
→ 위치가 아니라 "속성"으로 잡는다. */
#container .mw_basic_list_title td{ white-space:nowrap; } /* "번/호" 세로로 접힘 방지 */
#container .mw_basic_list_title td[width="45"]{ min-width:66px; }
#container .mw_basic_list_title td[width="30"]{ min-width:60px; }
#container .mw_basic_list_title td[width="70"]{ min-width:92px; }
/* 폭 지정이 없는 칸 = 제목 칸 → 본문과 같이 왼쪽 정렬 */
#container .mw_basic_list_title td:not([width]){ text-align:left; padding-left:24px !important; }
/* ---------- 머리글 ----------
"번호 / 제목 / 글쓴이 / 날짜 / 조회" 는 한글만 쓴다.
(예전에 CSS ::after 로 NO/SUBJECT/WRITER/DATE/HIT 를 덧붙였으나 제거) */
#container .mw_basic_list_title td::after,
#container .mw_basic_list_title td a::after{ content:none !important; }
#container .mw_basic_list_title td{ padding-left:10px !important; padding-right:10px !important; }
#container .mw_basic_list_title td[width="45"]{ min-width:56px; }
#container .mw_basic_list_title td[width="30"]{ min-width:56px; }
#container .mw_basic_list_title td[width="70"]{ min-width:86px; }
#container .mw_basic_list_name,
#container .mw_basic_list_datetime,
#container .mw_basic_list_hit{ white-space:nowrap; }
/* 체크박스 칸 (관리자) */
#container .mw_basic_list_title td:first-child{ min-width:44px; }
/* 체크박스·라디오
g5-override.css 는 에서 실리는데 miwit CSS 는 본문에서 나중에 실려 덮어버린다.
그래서 게시판 안에서는 여기(맨 마지막 파일)에서 다시 그린다. */
#container input[type=checkbox],
#container 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) !important;
border:1px solid rgba(150,84,210,.6) !important;
box-shadow:none;
}
#container input[type=radio]{ border-radius:50%; }
#container input[type=checkbox]:hover,
#container input[type=radio]:hover{ border-color:#c77dff !important; box-shadow:0 0 8px rgba(168,92,232,.55); }
#container input[type=checkbox]:checked{
background:linear-gradient(180deg, #a85ce8, #5a1aa8) !important;
border-color:#c77dff !important;
}
#container 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);
}
#container 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);
}
/* 펼친 드롭다운 목록도 어둡게 */
#container select option,
#container select optgroup{ background:#12042a; color:#ddd2ee; }
#container select option:checked{ background:#4a1a8c; color:#fff; }
/* miwit 이 곳곳에 흰/회색 테두리(#fff #ddd #efefef)를 쓴다.
굵기·유무는 그대로 두고 "색만" 바꾼다.
※ miwit 선택자가 "#mw_basic .클래스" 형태라 우리 "#container 요소" 보다
우선순위가 높다. !important 가 없으면 글보기·댓글 상자에 흰 선이 그대로 남는다. */
#container div, #container p, #container span, #container ul,
#container ol, #container li, #container table, #container thead,
#container tbody, #container tr, #container td, #container th,
#container form, #container fieldset, #container textarea, #container img,
#container section, #container article, #container dl, #container dt, #container dd{
border-color:rgba(150,84,210,.30) !important;
}
/* 글 본문·댓글 입력 상자 바탕도 어둡게 (스킨 기본은 흰색) */
#container textarea,
#container .mw_basic_view_content,
#container .mw_basic_comment_write,
#container .mw_basic_view_comment{
background-color:rgba(0,0,0,.34) !important;
color:#ddd2ee;
}
/* 버튼 글자가 세로로 접히지 않게 (관/리 처럼 잘리던 것) */
#container .fa-button,
#container .btn,
#container button,
#container input[type=submit],
#container input[type=button]{ white-space:nowrap; }
/* 제목 앞 아이콘 gif 는 밝은 배경용이라 어두운 데서 네모로 보인다 → 우리 불릿으로 교체 */
#container .write_icon{ display:none !important; }
#container .mw_basic_list_subject{
background:url(../img/ui/bullet.png) no-repeat 4px center;
background-size:12px auto;
padding-left:22px;
}
/* 사이드뷰(글쓴이) 글자색 */
#container .sv_guest,
#container .sv_member,
#container .sv_wrap,
#container .media-list-subject{ color:#c6b8dc !important; }
#container .mw_basic_list_subject a .media-list-subject{ color:#e4daf3 !important; }
#container tr:hover .media-list-subject{ color:#fff !important; }
/* 반응형 보조 정보줄 */
#container .list_desc_info{ margin-top:4px; font-size:12px; color:#9c8fb4; }
#container .list_desc_info .item{ margin-right:12px; }
/* miwit 이 흰 바탕을 깔아둔 블록들을 투명하게 (버튼·뱃지는 아래에서 되살림) */
#container .mw_basic,
#container #mw_basic,
#container [class^="mw_basic_"],
#container [class*=" mw_basic_"],
#container table,
#container thead,
#container tbody,
#container tr,
#container th,
#container td,
#container fieldset,
#container dl,
#container dt,
#container dd{
background-color:transparent;
color:inherit;
}
/* --------------------------------------------------------------------------
1. 게시판 제목 (#container_title)
-------------------------------------------------------------------------- */
#container_title{
margin:0 0 14px;
padding:0 0 12px;
font:bold 22px/1.3 "Malgun Gothic",sans-serif;
color:#f0e0ff;
text-shadow:0 0 18px rgba(178,104,240,.75);
border-bottom:1px solid rgba(150,84,210,.35);
}
/* --------------------------------------------------------------------------
2. 목록 · LIST
-------------------------------------------------------------------------- */
#container .mw_basic_total{ font-size:13px; color:#a99cc0; }
/* 머리글 줄 (번호 / 제목 / 글쓴이 / 날짜 / 조회)
※ mw_basic_list_line 은 머리글이 아니라 행 사이 1px 구분선이다. 같이 묶으면 굵은 띠가 된다. */
#container .mw_basic_list_title td{
padding:11px 8px !important;
background:linear-gradient(180deg, rgba(96,38,164,.5) 0%, rgba(28,8,56,.38) 100%) !important;
color:#dcc6f7 !important;
font-weight:bold;
font-size:14px;
text-align:center;
}
/* 행 사이 구분선 : 1px 만.
miwit 은 여기에 border-top:1px solid #ddd 를 준다. 선택자가 #mw_basic .클래스 라
우리 쪽 border-color 일괄 규칙(#container td)보다 우선순위가 높아 흰 선이 남았다.
→ 이 자리에서 !important 로 눌러준다. */
#container td.mw_basic_list_line,
#container .mw_basic_list_line{
height:1px !important; padding:0 !important; line-height:0 !important;
background:rgba(150,84,210,.22) !important;
border:0 !important;
}
#container tr:hover > td.mw_basic_list_line{ background:rgba(150,84,210,.22) !important; }
#container .mw_basic_list_title td a{ color:#dcc6f7 !important; }
#container .mw_basic_list_title td a:hover{ color:#fff !important; }
#container .mw_basic_list_title td:nth-child(2){ text-align:left; padding-left:24px !important; }
/* 각 줄
※ 줄 사이 선은 miwit 이 넣어 주는 1px 짜리 | 하나로만 그린다.
여기 셀에 border-bottom 을 또 주면 선이 두 겹으로 겹쳐 진하게 보이고,
번호 칸에는 선이 없어 길이도 어긋난다. 그래서 셀 테두리는 두지 않는다. */
#container .mw_basic_list_subject,
#container .mw_basic_list_name,
#container .mw_basic_list_datetime,
#container .mw_basic_list_hit{
border-bottom:0;
font-size:14px;
color:#ddd2ee;
}
#container .mw_basic_list_name,
#container .mw_basic_list_datetime,
#container .mw_basic_list_hit{ color:#a99cc0; font-size:13px; }
#container .mw_basic_list_subject a{ color:#e4daf3; }
#container .mw_basic_list_subject a:hover{
color:#fff; text-shadow:0 0 9px rgba(255,255,255,.4);
}
/* 줄에 마우스 올렸을 때 : 글이 있는 칸에만, 은은하게 */
#container tr:hover > .mw_basic_list_subject,
#container tr:hover > .mw_basic_list_name,
#container tr:hover > .mw_basic_list_datetime,
#container tr:hover > .mw_basic_list_hit,
#container tr:hover > .media-no-text{
background-color:rgba(142,72,214,.16);
}
/* 공지 글 */
#container .notice a,
#container .bo_notice a{ color:#ffd9a8; font-weight:bold; }
/* --------------------------------------------------------------------------
3. 본문 보기 · VIEW
-------------------------------------------------------------------------- */
#container .mw_basic_view_title,
#container .mw_basic_view_subject{
font:bold 19px/1.5 "Malgun Gothic",sans-serif;
color:#f0e0ff;
padding-bottom:10px;
border-bottom:1px solid rgba(150,84,210,.35);
}
#container .mw_basic_view_datetime{ font-size:13px; color:#9c8fb4; }
#container .mw_basic_view_content{
padding:18px 4px;
font-size:14px; line-height:1.85; color:#ddd2ee;
min-height:180px;
}
#container .mw_basic_view_content img{ max-width:100%; height:auto; }
/* --------------------------------------------------------------------------
4. 폼 · 입력 요소
-------------------------------------------------------------------------- */
#container input[type=text],
#container input[type=password],
#container input[type=email],
#container input[type=number],
#container input[type=search],
#container input[type=tel],
#container input[type=url],
#container select,
#container textarea,
#container .mw_basic_text,
#container .mw_basic_textarea{
background:rgba(0,0,0,.5) !important;
border:1px solid rgba(150,84,210,.5) !important;
color:#efe6fb !important;
font-size:14px;
border-radius:0;
}
#container input::placeholder,
#container textarea::placeholder{ color:#8b7da4; font-size:13px; }
#container input:focus,
#container select:focus,
#container textarea:focus{
outline:none;
border-color:#c77dff !important;
box-shadow:0 0 10px rgba(168,92,232,.65);
}
#container label{ color:#c6b8dc; font-size:13px; }
/* --------------------------------------------------------------------------
5. 버튼 · BUTTON (테두리는 메인과 같은 이미지 9-슬라이스)
-------------------------------------------------------------------------- */
/* miwit 은 버튼에 .fa-button 을 쓴다 (글저장 · 목록 · 관리 · 임시저장 · 설정 …) */
#container .fa-button,
#container .btn,
#container .btn_b01,
#container .btn_b02,
#container .btn_b03,
#container .btn_submit,
#container .btn_cancel,
#container .btn_confirm a,
#container button[type=submit],
#container input[type=submit],
#container input[type=button]{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
min-height:34px; padding:0 14px;
font:bold 13px/1 "Malgun Gothic",sans-serif;
color:#f4e8ff !important;
background:linear-gradient(180deg, rgba(150,58,236,.55) 0%, rgba(48,12,92,.75) 100%) !important;
border:1px solid rgba(178,104,240,.55) !important;
border-radius:0 !important;
text-shadow:0 0 10px rgba(196,132,255,.9);
box-shadow:none;
transition:background .16s ease, box-shadow .16s ease;
}
#container .fa-button:hover,
#container .btn:hover,
#container .btn_b01:hover,
#container .btn_b02:hover,
#container .btn_submit:hover,
#container button[type=submit]:hover,
#container input[type=submit]:hover{
background:linear-gradient(180deg, rgba(198,112,255,.75) 0%, rgba(70,18,126,.9) 100%) !important;
box-shadow:0 0 20px rgba(178,104,240,.6);
}
#container .fa-button i{ margin-right:6px; }
/* 글쓰기 하단 : 글저장 / 목록 이 세로로 쌓이던 것 → 가로 정렬 */
#container td[align="center"] > .fa-button,
#container td[align="center"] > button,
#container td[align="center"] > a{
vertical-align:middle;
margin:0 4px;
}
/* miwit 이 남겨둔 0x0 짜리 목록 이미지 링크 (줄바꿈만 유발) */
#container #btn_list{ display:none !important; }
#container a:has(> #btn_list){ display:none !important; }
/* 취소·보조 버튼은 한 톤 낮게 */
#container .btn_cancel,
#container .btn_b02{
background:rgba(0,0,0,.45) !important;
color:#c6b8dc !important;
text-shadow:none;
}
/* --------------------------------------------------------------------------
6. 페이징 · PAGINATION
-------------------------------------------------------------------------- */
#container .pg_wrap{ padding:16px 0; text-align:center; }
#container .pg_page,
#container .pg_current,
#container .pg_start,
#container .pg_prev,
#container .pg_next,
#container .pg_end{
display:inline-block; min-width:32px; height:32px; line-height:32px;
margin:0 2px; padding:0 8px;
font-size:13px; color:#c6b8dc;
background:rgba(0,0,0,.4);
border:1px solid rgba(150,84,210,.35);
}
#container .pg_page:hover{ color:#fff; background:rgba(96,38,164,.45); }
#container .pg_current{
color:#fff; font-weight:bold;
background:linear-gradient(180deg, rgba(150,58,236,.7), rgba(48,12,92,.85));
border-color:#c77dff;
box-shadow:0 0 14px rgba(178,104,240,.6);
}
/* --------------------------------------------------------------------------
7. 댓글 · COMMENT
-------------------------------------------------------------------------- */
#container .cmt_btn,
#container #bo_vc h2{ color:#dcc6f7; }
#container #bo_vc article,
#container .mw_comment_list li{
padding:12px 6px;
border-bottom:1px solid rgba(140,74,206,.18);
}
#container #bo_vc header a,
#container .mw_comment_name{ color:#e4daf3; font-weight:bold; font-size:14px; }
#container .mw_comment_datetime{ color:#9c8fb4; font-size:12px; }
/* --------------------------------------------------------------------------
8. 링크 · 잡다한 텍스트
-------------------------------------------------------------------------- */
#container a{ color:#ddd2ee; }
#container a:hover{ color:#fff; }
#container hr{ border:0; border-top:1px solid rgba(150,84,210,.3); }
#container .empty_list,
#container .empty_table,
#container .mw_basic_empty{ padding:60px 0; text-align:center; color:#9c8fb4; font-size:14px; }
/* 아이콘(font-awesome) 색 */
#container .fa{ color:inherit; }
/* --------------------------------------------------------------------------
9. 글자 크기 하한 : 12px 미만 금지 (어른 이용자 기준)
-------------------------------------------------------------------------- */
#container [class*="mw_"],
#container span, #container em, #container small, #container time{
font-size:inherit;
}
#container small{ font-size:12px; }
/* ==========================================================================
댓글 (miwit view_comment)
miwit 이 댓글 머리줄에 밝은 배경 그림(co_title_bg.gif)을 인라인으로 깐다.
스킨 파일은 건드리지 않고 그 배경만 우리 색으로 바꾼다.
========================================================================== */
#container [style*="co_title_bg"],
#container [style*="co_title_bg.gif"]{
background:linear-gradient(180deg, rgba(96,38,164,.34) 0%, rgba(28,8,56,.30) 100%) !important;
border:1px solid rgba(150,84,210,.28);
}
/* 댓글 글쓴이·날짜 글자색 */
#container .mw_basic_comment_name,
#container .mw_basic_comment_name *{ color:#e4daf3 !important; }
#container .mw_basic_comment_datetime{ color:#a99cc0 !important; }
/* 댓글 프로필 사진 테두리(밝은 회색)와 세로 구분선 */
#container .comment_image{ border-color:rgba(150,84,210,.4) !important; }
#container td[bgcolor="#dedede"]{ background-color:rgba(150,84,210,.22) !important; }
/* 댓글 본문 영역 */
#container #commentContents{ color:#ddd2ee; }
/* ==========================================================================
글보기 관리 메뉴 (miwit .mw_manage_title / .mw_manage)
기본은 흰 상자 + 밝은 글씨라 어두운 화면에서 글이 안 보인다.
========================================================================== */
#container .mw_manage_title{
display:inline-flex !important; align-items:center; gap:6px;
padding:6px 12px !important; white-space:nowrap;
font-size:13px !important; line-height:1.4 !important; color:#dcc6f7 !important;
background:linear-gradient(180deg, rgba(96,38,164,.5) 0%, rgba(28,8,56,.4) 100%) !important;
border:1px solid rgba(150,84,210,.45) !important;
cursor:pointer;
}
#container .mw_manage_title:hover{ color:#fff !important; background:rgba(96,38,164,.6) !important; }
#container .mw_manage{
min-width:150px; padding:5px !important;
background:#12042a !important;
border:1px solid rgba(150,84,210,.5) !important;
box-shadow:0 10px 26px rgba(0,0,0,.6) !important;
z-index:200;
}
#container .mw_manage .item{
display:flex !important; align-items:center; gap:8px;
padding:8px 11px !important; white-space:nowrap;
font-size:13px !important; line-height:1.4 !important; color:#d6c8ec !important;
background:transparent !important; border:0 !important; cursor:pointer;
}
#container .mw_manage .item:hover{ background:rgba(96,38,164,.45) !important; color:#fff !important; }
#container .mw_manage .item i{ width:15px; text-align:center; color:#b268f0; }
#container .mw_manage .item:hover i{ color:#fff; }
|