@charset "UTF-8";

/* =====================================
   layout.css
   ===================================== */

/* ========== 1) TOKENS (원래 톤) ========== */
:root{
  /* Fonts */
  --default-font: var(--bc-font-sans,"Noto Sans KR","Noto Sans","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
  --heading-font: var(--bc-font-heading,var(--default-font));
  --nav-font: var(--bc-font-nav,var(--default-font));
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Global Colors */
  --background-color:#ffffff;
  --default-color:#535d6b;
  --heading-color:#344761;
  --accent-color:#5c99ee;
  --surface-color:#ffffff;
  --contrast-color:#ffffff;

  /* Nav Colors */
  --nav-color: rgba(83,93,107,.875);
  --nav-hover-color:#0b1e38;
  --nav-mobile-background-color:#ffffff;
  --nav-dropdown-background-color:#ffffff;
  --nav-dropdown-color:#535d6b;
  --nav-dropdown-hover-color:#5c99ee;

  scroll-behavior:smooth;
}

/* Presets */
.light-background{ --background-color:#f8fbff; --surface-color:#ffffff; }
.dark-background{ --background-color:#060606; --default-color:#ffffff; --heading-color:#ffffff; --surface-color:#252525; --contrast-color:#ffffff; }
.accent-background{ --background-color:#136ad5; --default-color:#ffffff; --heading-color:#ffffff; --accent-color:#acd0fc; --surface-color:#4188de; --contrast-color:#ffffff; }

/* ========== 2) BASE ========== */
body{
  color:var(--default-color);
  background-color:var(--background-color);
  font-family:var(--default-font);
  font-weight:400;                  /* 본문 400 유지 */
}
a{ color:#4154f1; text-decoration:none; }
a:hover{ color:#717ff5; text-decoration:none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}


/* Buttons */
.btn-basic{
  display:inline-block; font-weight:400; line-height:1.5; color:#212529;
  text-align:center; text-decoration:none; vertical-align:middle; cursor:pointer; user-select:none;
  background-color:transparent; border:1px solid transparent;
  padding:.375rem .75rem; font-size:1rem; border-radius:.375rem;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-clean{ padding:0!important; border:0!important; background:transparent!important; cursor:pointer; }
.btn-clean:hover,.btn-clean:focus{ background:rgba(0,0,0,.05); border-radius:.25rem; outline:none; }

/* ========== 3) TABLE (Global) ========== */
.table{
  --bs-table-bg:transparent; --bs-table-accent-bg:transparent;
  --bs-table-striped-color:#212529; --bs-table-striped-bg:rgba(0,0,0,.05);
  --bs-table-active-color:#212529; --bs-table-active-bg:rgba(0,0,0,.1);
  --bs-table-hover-color:#212529; --bs-table-hover-bg:rgba(0,0,0,.075);
  width:100%; margin-bottom:1rem; color:#212529; vertical-align:top; border-color:#dee2e6;
}
.table>:not(caption)>*>*{ padding:.5rem .5rem; background-color:var(--bs-table-bg); border-bottom-width:1px; box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }
.table thead tr:first-child th{ border-top:2px solid currentColor; border-bottom:1px solid rgba(0,0,0,.3); }
.table>thead{ vertical-align:bottom; }
.table>:not(:first-child){ border-top:1px solid currentColor; }
.table a{ text-decoration:none; color:inherit; }
.table-responsive,.table-responsive-sm,.table-responsive-md,.table-responsive-lg,.table-responsive-xl,.table-responsive-xxl{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ========== 4) BOOTSTRAP OVERRIDES ========== */
.dropdown-menu{
  border-radius:4px; padding:10px 0; border:0;
  animation:dropdown-animate .2s both;
  box-shadow:0 5px 30px 0 rgba(82,63,105,.2);
}
.dropdown-menu .dropdown-header,.dropdown-menu .dropdown-footer{ text-align:center; font-size:15px; padding:10px 25px; }
.dropdown-menu .dropdown-footer a{ color:#444; text-decoration:underline; }
.dropdown-menu .dropdown-footer a:hover{ text-decoration:none; }
.dropdown-menu .dropdown-divider{ margin:0; }
.dropdown-menu .dropdown-item{ font-size:14px; padding:10px 15px; transition:.3s; }
.dropdown-menu .dropdown-item i{ margin-right:10px; font-size:18px; line-height:0; }
.dropdown-menu .dropdown-item:hover{ background-color:#f6f9ff; }
@media (min-width:768px){
  .dropdown-menu-arrow::before{
    content:""; width:13px;height:13px;background:#fff; position:absolute; top:-7px; right:20px; transform:rotate(45deg);
    border-top:1px solid #eaedf1; border-left:1px solid #eaedf1;
  }
}
@keyframes dropdown-animate{ 0%{opacity:0;} 100%{opacity:1;} }

.card{ margin-bottom:30px; border:none; border-radius:5px; box-shadow:0 0 30px rgba(1,41,112,.1); }
.card-header,.card-footer{ border-color:#ebeef4; background:#fff; color:#798eb3; padding:15px; }
.card-title{ padding:20px 0 15px; font-size:18px; font-weight:500; color:#012970; font-family:var(--heading-font); }
.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}
.card-body{ padding:0 20px 20px; }

/* ========== 5) HEADER (원복) ========== */
.logo{ line-height:1; padding-left:10px; }
@media (min-width:1200px){ .logo{ width:280px; } }
.logo img{ max-height:28px; margin-right:6px; }
.logo span{ font-size:26px; font-weight:600; color:#012970; font-family:var(--heading-font); }

.header{
  transition:all .5s; z-index:997; height:70px;
  box-shadow:0 2px 20px rgba(1,41,112,.1); background:#fff;
}

/* 토글 버튼 */
.header .sidebar-btn{ font-size:32px; cursor:pointer; color:#012970; }

/* ▷ 데스크톱: 인라인 검색바 (원래값) */
.header .search-bar{ min-width:360px; padding:0 20px; }
.header .search-form{ width:100%; }
.header .search-form input{
  border:1px solid rgba(1,41,112,.2);
  font-size:14px; color:#012970; background:#fff;
  padding:7px 38px 7px 8px; border-radius:3px; transition:.3s; width:100%;
}
.header .search-form input:focus,
.header .search-form input:hover{
  outline:none; box-shadow:0 0 10px 0 rgba(1,41,112,.15);
  border:1px solid rgba(1,41,112,.3);
}
.header .search-form button{ border:0; padding:0; margin-left:-30px; background:none; }
.header .search-form button i{ color:#012970; }

/* ▷ 모바일: 오버레이 (원래 클래스명 유지) */
@media (max-width:1199px){
  .header .search-bar{
    position:fixed; top:50px; left:0; right:0; padding:20px;
    box-shadow:0 0 15px rgba(1,41,112,.1); background:#fff;
    z-index:9999; transition:.3s; visibility:hidden; opacity:0;
  }
  .header .search-bar-show{   /* ⬅ JS가 토글하는 기존 클래스명 */
    top:60px; visibility:visible; opacity:1;
  }
}

/* 헤더 내 네비게이션 */
.header-nav ul{ list-style:none; }
.header-nav>ul{ margin:0; padding:0; }
.header-nav .nav-icon{ font-size:22px; color:#012970; margin-right:25px; position:relative; }
.header-nav .nav-profile{ color:#012970; }
.header-nav .nav-profile img{ max-height:30px; }
.header-nav .nav-profile span{ font-size:14px; font-weight:600; }
.header-nav .badge-number{ position:absolute; inset:-2px -5px auto auto; font-weight:normal; font-size:12px; padding:3px 6px; }
.header-nav .notifications,.header-nav .messages{ inset:8px -15px auto auto !important; }
.header-nav .dropdown-menu{ z-index:1001; }
.header-nav .notifications .notification-item{ display:flex; align-items:center; padding:15px 10px; transition:.3s; }
.header-nav .notifications .notification-item i{ margin:0 20px 0 10px; font-size:24px; }
.header-nav .notifications .notification-item h4{ font-size:16px; font-weight:600; margin-bottom:5px; }
.header-nav .notifications .notification-item p{ font-size:13px; margin-bottom:3px; color:#919191; }
.header-nav .notifications .notification-item:hover{ background:#f6f9ff; }
.header-nav .messages .message-item{ padding:15px 10px; transition:.3s; }
.header-nav .messages .message-item a{ display:flex; }
.header-nav .messages .message-item img{ margin:0 20px 0 10px; max-height:40px; }
.header-nav .messages .message-item h4{ font-size:16px; font-weight:600; margin-bottom:5px; color:#444; }
.header-nav .messages .message-item p{ font-size:13px; margin-bottom:3px; color:#919191; }
.header-nav .messages .message-item:hover{ background:#f6f9ff; }
.header-nav .profile{ min-width:240px; padding-bottom:0; top:8px !important; }
.header-nav .profile .dropdown-header h6{ font-size:18px; margin-bottom:0; font-weight:600; color:#444; }
.header-nav .profile .dropdown-header span{ font-size:14px; }
.header-nav .profile .dropdown-item{ font-size:14px; padding:10px 15px; transition:.3s; }
.header-nav .profile .dropdown-item i{ margin-right:10px; font-size:18px; line-height:0; }
.header-nav .profile .dropdown-item:hover{ background:#f6f9ff; }
.header-nav .notification-box {
  background-color: #f8f9fa; /* Bootstrap light */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-nav .notification-box .fw-semibold {
  font-size: 14px;
}

.header-nav .notification-box small {
  font-size: 12px;
}
.header-nav .dropdown-item .text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-nav .nav-profile .badge-number {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 50%;
}
.header-nav .notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #dc3545; /* Bootstrap danger (red) */
  border-radius: 50%;
  border: 2px solid white;
}




/* ========== 6) SIDEBAR ========== */
.sidebar{
  width:300px !important; background:#fff;
  box-shadow:0 0 20px rgba(1,41,112,.1);
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:#aab7cf transparent;
}
.sidebar::-webkit-scrollbar{ width:5px; height:8px; background:#fff; }
.sidebar::-webkit-scrollbar-thumb{ background:#aab7cf; }

.sidebar-header{
  height:70px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:#fff; box-shadow:0 2px 20px rgba(1,41,112,.1);
  position:sticky; top:0; z-index:998;
}
.sidebar-user{ display:flex; flex-direction:column; justify-content:center; height:100%; line-height:1.2; gap:2px; }
.sidebar-user .sidebar-user-name{ font-weight:600; color:#012970; font-size:20px; margin:0; }
.sidebar-user span{ font-size:14px; color:#6c757d; }
.close-sidebar-btn{ font-size:20px; color:#012970; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.close-sidebar-btn:hover{ color:#4154f1; }

.sidebar-nav{ padding:20px 10px; margin:0; list-style:none; }
.sidebar-nav li{ padding:0; margin:0; list-style:none; }
.sidebar-nav .nav-item{ margin-bottom:5px; }
.sidebar-nav .nav-heading{ font-size:11px; text-transform:uppercase; color:#899bbd; font-weight:600; margin:10px 0 5px 15px; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; font-size:16px; font-weight:500;
  color:#4154f1; background:#f6f9ff; padding:10px 15px; border-radius:4px; transition:.2s;
}
.sidebar-nav .nav-link i{ font-size:16px; margin-right:10px; color:#4154f1; }
.sidebar-nav .nav-link.collapsed{ color:#012970; background:#fff; }
.sidebar-nav .nav-link.collapsed i{ color:#899bbd; }
.sidebar-nav .nav-link:hover{ color:#4154f1; background:#f6f9ff; }
.sidebar-nav .nav-link:hover i{ color:#4154f1; }
.sidebar-nav .nav-link .bi-chevron-down{ margin-right:0; transition:transform .2s ease-in-out; }
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down{ transform:rotate(180deg); }

.sidebar-nav .nav-content{ padding:5px 0 0 0; margin:0; list-style:none; }
.sidebar-nav .nav-content a{
  display:flex; align-items:center; font-family:var(--nav-font); font-size:16px; font-weight:400;
  color:var(--nav-color); padding:10px 0 10px 40px; transition:.3s;
}
.sidebar-nav .nav-content a i{ font-size:6px; margin-right:8px; line-height:0; border-radius:50%; }
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active{ color:#4154f1; }
.sidebar-nav .nav-content a.active i{ background:#4154f1; }

/* ========== 7) PAGE TITLE / BREADCRUMBS ========== */
.page-title{ color:var(--default-color); background:var(--background-color); padding:25px 0; position:relative; }
.page-title h1{ font-size:24px; font-weight:600; }
.page-title .breadcrumbs ol{ display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; font-size:14px; font-weight:400; }
.page-title .breadcrumbs ol li+li{ padding-left:10px; }
.page-title .breadcrumbs ol li+li::before{ content:"/"; display:inline-block; padding-right:10px; color: color-mix(in srgb, var(--default-color), transparent 70%); }

/* ========== 8) GLOBAL SECTIONS & TITLES ========== */
section,.section{ color:var(--default-color); background:var(--background-color); padding:50px 0; scroll-margin-top:90px; overflow:clip; }
@media (max-width:1199px){ section,.section{ scroll-margin-top:66px; } }
.section-title{ text-align:center; padding-bottom:60px; position:relative; }
.section-title h2{ font-size:32px; font-weight:500; margin-bottom:20px; padding-bottom:20px; position:relative; }
.section-title h2::before{ content:""; position:absolute; left:0; right:0; bottom:1px; margin:auto; width:160px; height:1px; background: color-mix(in srgb, var(--default-color), transparent 60%); }
.section-title h2::after{ content:""; position:absolute; left:0; right:0; bottom:0; margin:auto; width:60px; height:3px; background:var(--accent-color); }
.section-title p{ margin-bottom:0; }

/* ========== 9) FOOTER ========== */
.footer{
  color:var(--default-color); background:var(--background-color);
  font-size:14px; position:relative; padding:25px 0;
  border-top:1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.footer .social-methods .social-icons{ display:flex; gap:12px; }
.footer .social-methods .social-icons i{ font-size:22px; color: color-mix(in srgb, var(--default-color), transparent 30%); transition: color .3s; }
.footer .social-methods .social-icons i:hover{ color:var(--accent-color); }
.footer .copyright p{ margin-bottom:0; color: color-mix(in srgb, var(--default-color), transparent 30%); }
.footer .copyright p strong{ color: color-mix(in srgb, var(--default-color), transparent 10%); }
.footer .credits{ font-size:13px; color: color-mix(in srgb, var(--default-color), transparent 40%); }
.footer .credits a{ color:var(--accent-color); }
.footer .legal-links{ display:flex; flex-wrap:wrap; gap:20px; }
.footer .legal-links a{ color: color-mix(in srgb, var(--default-color), transparent 40%); font-size:13px; transition: color .3s; }
.footer .legal-links a:hover{ color:var(--accent-color); }

@media (max-width:991.98px){
  .footer .footer-main{ padding:50px 0 20px; }
  .footer .footer-main .footer-widget{ text-align:center; }
  .footer .footer-main .footer-widget h4:after{ left:50%; transform:translateX(-50%); }
  .footer .footer-main .footer-contact .contact-item{ justify-content:center; }
  .footer .footer-main .footer-links li{ padding-left:0; }
  .footer .footer-main .footer-links li:before{ display:none; }
  .footer .footer-main .app-buttons{ justify-content:center; }
  .footer .footer-main .social-icons{ justify-content:center; }
  .footer .copyright,.footer .credits{ text-align:center; }
}

/* ========== 10) PRELOADER ========== */
#preloader{ position:fixed; inset:0; z-index:999999; background:var(--background-color, #ffffff); display:flex; justify-content:center; align-items:center; }
.loader-dots{ display:flex; gap:10px; }
.loader-dots span{ width:14px; height:14px; background:var(--accent-color, #5c99ee); border-radius:50%; animation:bounce .6s ease-in-out infinite; }
.loader-dots span:nth-child(2){ animation-delay:.2s; }
.loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }

/* ========== 11) SCROLL TOP ========== */
.scroll-top{ position:fixed; visibility:hidden; opacity:0; right:15px; bottom:15px; z-index:99999; background:var(--accent-color); width:40px; height:40px; border-radius:50px; transition:all .4s; }
.scroll-top i{ font-size:24px; color:var(--contrast-color); line-height:0; }
.scroll-top:hover{ background: color-mix(in srgb, var(--accent-color), transparent 20%); color:var(--contrast-color); }
.scroll-top.active{ visibility:visible; opacity:1; }

/* ========== 12) ERROR PAGE ========== */
.error-page{ height:90vh; display:flex; align-items:center; justify-content:center; padding:100px 0; }
.error-page .error-wrapper{ text-align:center; padding:0 15px; }
@media (max-width:767.98px){ .error-page .error-wrapper{ padding:0 100px; } }
.error-page h1{ font-size:clamp(60px, 25vw, 180px); font-weight:600; color:#4154f1; margin-bottom:0; line-height:1; }
.error-page h2{ font-size:28px; font-weight:600; color:#012970; margin-bottom:30px; }
.error-page .error-description{ font-size:18px; font-weight:500; color:#012970; margin-bottom:80px; }
.error-page .btn{ background:#51678f; color:#fff; padding:8px 30px; }
.error-page .btn:hover{ background:#3e4f6f; }
@media (min-width:992px){ .error-500 img{ max-width:50%; } }

/* ========== 13) REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .dropdown-menu{ animation:none; }
}