@charset "utf-8";

/* ===== Darkmode Toggle ===== */
.darkmode > .inner {
	position: relative;
	display: inline-flex;
	padding: 10px;
	border-radius: 1.5em;
	background-color: rgba(0, 0, 0, 0.1);
}
.darkmode label {
	cursor: pointer;
}
.darkmode label:first-of-type {
	padding: 5px 5px 5px 10px;
	border-radius: 50% 0 0 50%;
}
.darkmode label:last-of-type {
	padding: 5px 10px 5px 5px;
	border-radius: 0 50% 50% 0;
}
.darkmode i {
	font-size: 1.5em;
	color: #fff;
}
.darkmode input[type='radio'] {
	display: none;
}
.darkmode input[type='radio']:checked + label > i {
	color: #fff;
	transition: all 0.35s ease-in-out;
}
.darkmode .darkmode-bg {
	width: 39px;
	height: 40px;
	position: absolute;
	left: 5px;
	top: 5px;
	border-radius: 50px 15px 15px 50px;
	z-index: -1;
	transition: all 0.35s ease-in-out;
	background-color: #4672fe;
}
#toggle-radio-dark:checked ~ .darkmode-bg {
	border-radius: 15px 50px 50px 15px;
	top: 5px;
	left: 44px;
}

body[data-darkmode='on'] .darkmode > .inner {
	background-color: rgba(255, 255, 255, 0.25);
}

/* ===== Dark Mode: Global ===== */
body[data-darkmode='on'] {
	background-color: #303030 !important;
	color: #e0e0e0 !important;
}

body[data-darkmode='on'] #wrap {
	background-color: #303030;
}

/* ===== Header ===== */
body[data-darkmode='on'] header {
	background-color: #3a3a3a !important;
}
body[data-darkmode='on'] header.fixed {
	background-color: #3a3a3a !important;
}
body[data-darkmode='on'] .pc_menu .menu_btn li a {
	color: #ccc !important;
}
body[data-darkmode='on'] .pc_menu .menu_btn li a:hover {
	color: #fff !important;
}
body[data-darkmode='on'] #overlay {
	background-color: rgba(22, 33, 62, 0.95) !important;
}
body[data-darkmode='on'] .gnb li a {
	color: #ccc !important;
}

/* ===== Intro / Home Section ===== */
body[data-darkmode='on'] section.home {
	background-color: #303030 !important;
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] section.home h2 {
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] section.home p {
	color: #bbb !important;
}

/* ===== Announcement / Notice ===== */
body[data-darkmode='on'] #announcement {
	color: #e0e0e0;
}
body[data-darkmode='on'] #announcement .apply {
	border-color: #444 !important;
	background-color: #3a3a3a !important;
}
body[data-darkmode='on'] #announcement .board {
	background-color: #3a3a3a !important;
}
body[data-darkmode='on'] #announcement .board h3 {
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] #announcement .board p {
	color: #aaa !important;
}
body[data-darkmode='on'] #announcement .apply dl dt {
	background-color: #303030 !important;
}
body[data-darkmode='on'] #announcement .apply dl dt a {
	color: #ccc !important;
	border-bottom-color: #444 !important;
}
body[data-darkmode='on'] #announcement .apply dl dt.on {
	background-color: #4a4a4a !important;
}
body[data-darkmode='on'] #announcement .apply dl dt.on a {
	color: #fff !important;
}
body[data-darkmode='on'] #announcement .apply dl dd {
	background-color: #303030 !important;
}
body[data-darkmode='on'] #announcement .apply dl dd .post {
	color: #ccc !important;
}

/* ===== Hyperlink Page (dot list) ===== */
body[data-darkmode='on'] section.hyperlink_page {
	background-color: #303030 !important;
	border-color: #444 !important;
}
body[data-darkmode='on'] section.hyperlink_page ul {
	border-color: #444 !important;
}
body[data-darkmode='on'] section.hyperlink_page li a {
	color: #ccc !important;
}

/* ===== Dot Detail Page ===== */
body[data-darkmode='on'] section.dote {
	background-color: #303030 !important;
}
body[data-darkmode='on'] section.dote .bgi {
	background-color: #3a3a3a !important;
}
body[data-darkmode='on'] section.dote h2 a,
body[data-darkmode='on'] section.dote p a {
	color: #e0e0e0 !important;
}

/* ===== Tables (inquiry, notice detail, guide) ===== */
body[data-darkmode='on'] table {
	border-color: #444 !important;
}
body[data-darkmode='on'] table th,
body[data-darkmode='on'] table .th {
	background-color: #3a3a3a !important;
	color: #e0e0e0 !important;
	border-color: #444 !important;
}
body[data-darkmode='on'] table td {
	background-color: #303030 !important;
	color: #e0e0e0 !important;
	border-color: #444 !important;
}
body[data-darkmode='on'] table caption {
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] table caption h2 {
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] table caption p {
	color: #aaa !important;
}

/* ===== Form Inputs ===== */
body[data-darkmode='on'] input[type='text'],
body[data-darkmode='on'] input[type='email'],
body[data-darkmode='on'] input[type='password'],
body[data-darkmode='on'] textarea,
body[data-darkmode='on'] select {
	background-color: #404040 !important;
	color: #e0e0e0 !important;
	border-color: #555 !important;
}
body[data-darkmode='on'] input::placeholder,
body[data-darkmode='on'] textarea::placeholder {
	color: #888 !important;
}

/* ===== Buttons ===== */
body[data-darkmode='on'] .btnblack .Btn,
body[data-darkmode='on'] .btnblack button {
	background-color: #4a4a4a !important;
	color: #fff !important;
	border-color: #4a4a4a !important;
}

/* ===== Notice / Guide List ===== */
body[data-darkmode='on'] .board_list {
	background-color: #303030 !important;
}
body[data-darkmode='on'] .board_list li {
	border-color: #444 !important;
}
body[data-darkmode='on'] .board_list li a {
	color: #ccc !important;
}
body[data-darkmode='on'] .board_list li a:hover {
	color: #fff !important;
}
body[data-darkmode='on'] .board_view {
	background-color: #303030 !important;
	color: #e0e0e0 !important;
}
body[data-darkmode='on'] .board_view .post {
	color: #ccc !important;
}

/* ===== Pagination ===== */
body[data-darkmode='on'] .pagination a,
body[data-darkmode='on'] .paging a {
	color: #ccc !important;
	background-color: #303030 !important;
	border-color: #444 !important;
}
body[data-darkmode='on'] .pagination a.active,
body[data-darkmode='on'] .paging a.active,
body[data-darkmode='on'] .pagination .on,
body[data-darkmode='on'] .paging .on {
	background-color: #4a4a4a !important;
	color: #fff !important;
}

/* ===== Footer ===== */
body[data-darkmode='on'] footer {
	background-color: #252525 !important;
	color: #aaa !important;
}
body[data-darkmode='on'] footer address {
	color: #888 !important;
}
body[data-darkmode='on'] footer .sns-logo a {
	color: #aaa !important;
}
body[data-darkmode='on'] footer .sns-logo p {
	color: #aaa !important;
}

/* ===== bg_train section ===== */
body[data-darkmode='on'] section.bg_train {
	background-color: #3a3a3a !important;
}

/* ===== Scrollbar ===== */
body[data-darkmode='on'] ::-webkit-scrollbar {
	background-color: #303030;
}
body[data-darkmode='on'] ::-webkit-scrollbar-thumb {
	background-color: #444;
	border-radius: 4px;
}

/* ===== Links ===== */
body[data-darkmode='on'] a {
	color: #8ab4f8;
}
body[data-darkmode='on'] a:hover {
	color: #aecbfa;
}

/* ===== Topbar / Underbar aside ===== */
body[data-darkmode='on'] aside.topbar,
body[data-darkmode='on'] aside.underbar {
	background-color: #3a3a3a !important;
	border-color: #444 !important;
}

/* ===== Question table specific ===== */
body[data-darkmode='on'] table.question {
	background-color: #303030 !important;
	border-color: #444 !important;
}
body[data-darkmode='on'] table.question th.th {
	background-color: #3a3a3a !important;
}

/* ===== Transition for smooth toggle ===== */
body {
	transition: background-color 0.3s ease, color 0.3s ease;
}
#wrap,
header,
footer,
section,
table,
table th,
table td,
input,
textarea {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}