/*
Theme Name: PLANG Admin
Author: PLANG
Author URI: http://plang.co.kr
Description: 관리자 대시보드
Version: 1.0
*/
/*** 애플산돌고딕 폰트 적용 ***/
@font-face {
font-family: "SDGothicL";
src: url("fonts/AppleSDGothicNeoL.ttf") format("truetype");
font-style: light;
font-weight: 100;
}
@font-face {
font-family: "SDGothic";
src: url("fonts/AppleSDGothicNeoM.ttf") format("truetype");
font-style: normal;
font-weight: 300;
}
@font-face {
font-family: "SDGothicSB";
src: url("fonts/AppleSDGothicNeoSB.ttf") format("truetype");
font-style: bold;
font-weight: 500;
}
@font-face {
font-family: "SDGothicB";
src: url("fonts/AppleSDGothicNeoB.ttf") format("truetype");
font-style: bolder;
font-weight: 700;
}
/*** Basic ***/
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
body { font-family: 'SDGothic', 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.45; direction: ltr; }
.fw-thin { font-family: "SDGothicL", 'Open Sans', sans-serif; font-weight: 100 !important; }
.fw-normal { font-family: "SDGothic", 'Open Sans', sans-serif; font-weight: 300 !important; }
.fw-sb { font-family: "SDGothicSB", 'Open Sans', sans-serif; font-weight: 500 !important; }
.fw-bold { font-family: "SDGothicB", 'Open Sans', sans-serif; font-weight: 700 !important; }
*, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; }
a {
background-color: transparent;
color: #175a95;
text-decoration: none;
}
img { max-width: 100%; vertical-align: middle; }
button, input, optgroup, select, textarea { margin: 0; box-shadow: none !important; }
button { border-radius: 0 }
label { margin-bottom: .2857rem; }
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { letter-spacing: -0.5px; }
/* body 스크롤 비활성화 (이미지 미리보기용) */
body.modal-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
}
ul, li { list-style:none; }
.btn:active, .btn:focus { border: none !important; box-shadow: none !important; }
.pc-only { display: block !important; }
span.pc-only { display: inline-block !important; }
.btn.pc-only { display: inline-block !important; }
.mc-only { display: none !important; }
.btn.mc-only { display: none !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.313rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-7 { font-size: 0.938rem; }
.fs-8 { font-size: 0.875rem; }
.fs-9 { font-size: 0.75rem; }
.rounded-4 { border-radius: 0.4rem !important; }
.rounded-5 { border-radius: 0.5rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 2rem !important; }
.ps-6 { padding-left: 3rem !important; }
.bg-blue { background-color: #2b8ae8 !important; }
.bg-lightblue { background-color: #d6f4f7 !important; }
.bg-lightgreen { background-color: #d1e7dd !important; }
.bg-lightgray { background-color: #F2F3F5 !important; }
.text-blue { color: #2b8ae8 !important; }
.text-lightblue { color: #d6f4f7 !important; }
.text-lightgreen { color: #d1e7dd !important; }
.text-red { color: #FF0000 !important; }
.text-gray { color: #696969 !important; }
.text-green { color: #198754 !important; }
.border-blue { border-color: #2b8ae8 !important; }
.border-green { border-color: #198754 !important; }
.boxshadow { box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.125); }
/*-- Form & Button --*/
input:focus, button:focus, select:focus, textarea:focus { box-shadow: none !important; }
.btn-xxl, .btn-group-xxl > .btn { padding: 1.25rem 3rem; font-size: 2rem; }
.btn-xl, .btn-group-xl > .btn { padding: 1rem 2rem; font-size: 1.5rem; }
.btn-lg, .btn-group-lg > .btn { border-radius: 0.5rem; padding: 0.5rem 1.5rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; min-width: 54px; }
.btn-xm, .btn-group-xm > .btn { padding: 0.125rem 0.25rem; font-size: 0.75rem; }
.form-control-xl { min-height: calc(1.75em + 1rem + 2px); padding: 0.75rem 2rem; font-size: 1.75rem; border-radius: 0.3rem; }
.form-control-xxl { min-height: calc(2em + 1rem + 2px); padding: 2rem 2rem; font-size: 2rem !important; border-radius: 0.5rem; }
input.form-control::placeholder { color: #797979; }
input.form-control-xl::placeholder, input.form-control-xxl::placeholder { font-size: 1.25rem; }
.form-check-input[type=radio] { font-size: 1.25rem; color: #3251F5; border-color: #3251F5; width: 20px; height: 20px; background-image: url("data:image/svg+xml,"); }
.form-check-input[type=checkbox] { background-image: url("data:image/svg+xml,"); }
.form-check-input:checked[type=radio] { background-color: #3251F5; background-image: url("data:image/svg+xml,"); }
.form-check-input:checked[type=checkbox] { background-color: #3251F5; background-image: url("data:image/svg+xml,"); }
.form-check-label { margin-bottom: 0; }
.form-check-lg .form-check-input { width: 25px; height: 25px; }
.form-check-lg .form-check-label { font-size: 1.375rem; }
.form-check-circle .form-check-input[type=checkbox] { border-radius: 50%; }
.form-check-violet .form-check-input[type=checkbox] { background-color: #DBDBDB; border-color: #DBDBDB; }
.form-check-violet .form-check-input[type=checkbox]:checked { background-color: #D62EFF; border-color: #D62EFF; }
.form-check-green .form-check-input[type=checkbox] { background-color: #DBDBDB; border-color: #DBDBDB; }
.form-check-green .form-check-input[type=checkbox]:checked { background-color: #d6f4f7; border-color: #d6f4f7; }
.form-input-group .form-label { font-size: 1.25rem; }
.form-input-group .form-control, .form-input-group .input-group-text{ font-size: 1.25rem; background-color: #F4F4F4; border-radius: 0; }
.form-input-group .form-control:focus { border-bottom: 1px solid #D62EFF; }
.form-input-group:hover .input-group-text { border-bottom: 1px solid #D62EFF; }
.form-select-outline-blue { border: 1px solid #002D9C; border-radius: 2rem; color: #002D9C; padding-left: 1rem; }
.form-input-apply .form-label { font-size: 1.25rem; }
.form-input-apply .form-control, .form-input-apply .input-group-text { background-color: #F5F5F5; font-size: 1.25rem; border-radius: 0; }
.form-input-apply .form-control:focus { border: 1px solid #000; }
.form-input-apply:hover .input-group-text { border: 1px solid #000; }
.input-group-lg > .form-select, .input-group-sm > .form-select { padding-right: 2rem; }
/*-- Header --*/
.site-header { background-color: #2b8ae8; padding: 1rem; }
.site-logo { text-align: center; color: #FFF; font-size: 1.8rem; font-weight: bold; }
.site-logo img { height: 40px; filter: brightness(0) invert(1); }
.header-title { display: flex; justify-content: space-between; align-items: center; }
.section-area { width:100%; height: auto; margin:0 auto; position: relative; padding: 2rem 0; }
.section-bottom { width:100%; height: auto; margin:0 auto; position: relative; padding-bottom: 9rem; }
.section-header { background-color: #d6f4f7; }
.section-bgtitle { background-color: #318023; color: #FFF; }
/*-- login --*/
.input-group-member { background-color: #F4F4F4; }
.input-group-member .input-group-text, .input-group-member .form-control { background-color: transparent; border: 0; border-bottom: 1px solid #505050; border-radius: 0; }
.input-group-member:hover .input-group-text { border-color: #4C00FF !important; }
.input-group-member input.form-control:focus { border-color: #4C00FF !important; }
.btn-member { background-color: #d6f4f7; }
.btn-member:hover { background-color: #FFF; border: 1px solid #d6f4f7; }
/*-- menu --*/
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.scroll li { display: inline-block; }
.section-headermenu { background-color: #d6f4f7; position: sticky; top: 0; z-index: 9; padding-top: 0.5rem; }
.nav-headermenu .nav-link { color: #2b8ae8; padding: 1rem 1.25rem; font-size: 1.125rem; }
.nav-headermenu .nav-link:hover { color: #000; }
.nav-headermenu .nav-link.active { background-color: #fff; color: #000; border-radius: 1rem 1rem 0 0; }
.section-pagemenu { padding: 0.875rem 0; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.125); z-index: 1; }
.inline-icon { margin-right: 1rem; }
.nav-headermenu .nav-link .inline-icon { filter: brightness(0) saturate(100%) invert(32%) sepia(90%) saturate(431%) hue-rotate(64deg) brightness(103%) contrast(86%); }
.nav-headermenu .nav-link.active .inline-icon { filter: none; }
.nav-pagemenu .nav-link { color: #797979; font-size: 1.125rem; }
.nav-pagemenu .nav-link:hover, .nav-pagemenu .nav-link.active { color: #002D9C; }
.nav-pagemenu .form-select { font-size: 1.125rem; }
.site-info { color: #FFF; font-size: 0.875rem; padding: 0.25rem 0.5rem; margin: 0.5rem; }
.site-mymenu { float: right; margin: 0.5rem; }
.site-mymenu .list-group-item { border: 0; background: none; color: #FFF; padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.site-mymenu .list-group-item a { color: #FFF; }
/*-- content --*/
.section-pagetitle { background-color: #F4F4F4; padding: 1.5rem 0; border-bottom: 5px solid #2b8ae8; }
.section-content { padding: 2rem 0 3rem; }
.hr-gray { background-color: #DBDBDB; height: 5px !important; opacity: 1;}
.dl-between { position: relative; width: 100%; display: flex; align-items: center; margin-bottom: 0; }
.dl-between dt { width: 50%; font-weight: normal; }
.dl-between dd { width: 50%; text-align: end; margin-bottom: 0; }
.dl-gray { position: relative; width: 100%; display: flex; background-color: #F3F3F3; }
.dl-gray dt { padding: 0.5rem 1rem; width: 22%; background-color: #BFBFBF; font-weight: normal; }
.dl-gray dd { padding: 0.5rem 1rem; width: 78%; text-align: end; margin-bottom: 0; }
.dl-borderline { position: relative; width: 100%; display: flex; background-color: #FFF; border-top: 2px solid #797979; border-bottom: 2px solid #797979; }
.dl-borderline dt { padding: 0.75rem 1rem; width: 25%; background-color: #F5F5F5; font-size: 1.125rem; font-weight: normal; border-right: 2px solid #797979; }
.dl-borderline dd { padding: 0.5rem 1rem; width: 75%; text-align: end; margin-bottom: 0; font-size: 1.5rem; font-weight: 600; }
.column-group { position: relative; text-align: start; }
.column-group-text { margin: .2857rem 0; }
.ul-asterisk { padding-left: 0; }
.ul-asterisk li { position: relative; padding-left: 14px; }
.ul-asterisk li::before { position: absolute; left: 0; top: 2px; content: "*"; }
.table-adminboard > :not(caption) > * > * { padding: 0.5rem 0.25rem; }
.table-adminboard th, .table-adminboard td { font-size: 0.875rem; }
.boardtitle { text-align: start; max-width: 340px; overflow-x: hidden; }
.pagination { display: flex; justify-content: center; margin: 3rem 0; }
.pagination .page-link { border: 0; padding: 0.75rem 1rem; border-radius: 0.25rem; }
/*-- Footer --*/
.section-footer { background: #F4F4F4; padding: 3rem 0rem; }
.section-copyright { position: relative; color: #666; }
.section-copyright p { font-size: 0.875rem; }
.footer-logo { display: flex; font-size: 1.125rem; align-items: center; margin-bottom: 0.5rem; }
.footer-logo img { height: 24px; margin-right: 0.5rem; }
.footer-menu ul { display: flex; flex-direction: row; margin: 1rem 0; padding-left: 0; }
.footer-menu li { padding-left: 16px; padding-bottom: 5px; }
.footer-menu li:first-child { padding-left: 0; }
/*-- Notification Toast --*/
.notification-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
}
.notification-toast {
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 16px;
min-width: 300px;
animation: slideIn 0.3s ease-out;
border-left: 4px solid #0d6efd;
}
.notification-toast.fade-out {
animation: slideOut 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(400px);
opacity: 0;
}
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.notification-header strong {
font-size: 1rem;
color: #333;
font-family: 'SDGothicSB', 'Open Sans', sans-serif;
}
.notification-close {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: #999;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.notification-close:hover {
color: #333;
}
.notification-body {
color: #666;
font-size: 0.875rem;
margin-bottom: 8px;
line-height: 1.4;
}
.notification-link {
display: inline-block;
color: #0d6efd;
font-size: 0.875rem;
text-decoration: none;
margin-top: 4px;
transition: color 0.2s;
}
.notification-link:hover {
color: #0a58ca;
text-decoration: underline;
}
/*----------------------------------- responsive ---------------------------------*/
@media (max-width: 992px) {
body { font-size: 14px; }
.fs-1 { font-size: 1.75rem !important; }
.fs-2 { font-size: 1.5rem !important; }
.fs-3 { font-size: 1.313rem !important; }
.fs-4 { font-size: 1.125rem !important; }
.fs-5 { font-size: 1rem !important; }
.fs-6 { font-size: 0.938rem !important; }
.fs-7 { font-size: 0.875rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.625rem !important; }
.pc-only { display: none !important; }
.mc-only { display: block !important; }
span.pc-only { display: none !important; }
span.mc-only { display: inline-block !important; }
th.pc-only, td.pc-only { display: none !important; }
th.mc-only, td.mc-only { display: table-cell !important; }
.site-logo { text-align: start; }
.header-title .inline-icon img { max-height: 36px; }
.section-area { padding: 1rem 0; }
.section-bottom { padding-bottom: 5rem; }
.dl-borderline { border-top: 1px solid #797979; border-bottom: 1px solid #797979; }
.dl-borderline dt { padding: 0.5rem 0.5rem; width: 25%; font-size: 1rem; border-right: 1px solid #797979; }
.dl-borderline dd { padding: 0.5rem 0.5rem; width: 75%; font-size: 1rem; }
.column-group { display: flex; align-items: center; }
.column-group-text { min-width: 90px; }
.section-copyright, .section-copyright p { font-size: 0.75rem; }
}