@font-face {
    font-family: 'Dongle-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108_2@1.0/Dongle-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 사용자 정의 스타일 */
.logo { font-family: 'Dongle-Regular'; font-weight: 500; }
.logo.lg { font-size: 3.5rem !important; }
body, h1 { margin:0; padding:0 }
body { font-family: 'SUIT-Regular', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}
h1, h2, h3, h4, h5, h6 { font-family: 'SUIT-Regular'; font-weight: 600; }
#wrapper { max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
header .btn { width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; }
header { display: flex; background-color: var(--bs-body-bg); }
main { flex: 1 0 auto; background-color: var(--bs-body-bg); }
footer { background-color: var(--bs-body-bg); }
svg[aria-hidden="true"] { padding-right: 0.3rem;}
.content-pre { white-space:pre-wrap; line-height: 1.8rem; }
.content-pre img { max-width: 100% !important; }
.content-pre p { margin-bottom: 0 !important; }

:root {
    --theme-light-body-color: #223D6C;
    --theme-light-body-bg: #fff;
    --theme-dark-body-color: #fff;
    --theme-dark-body-bg: #222;
    --theme-navy-body-color: #fff;
    --theme-navy-body-bg: #223D6C;
    --theme-purple-body-color: #fff;
    --theme-purple-body-bg: #2c003d;
    --bs-border-radius: 0.75rem;
    --bs-link-color-rgb: #223D6C;
    --bs-link-hover-color-rgb: #223D6C;
    --menu-item-bg: #223D6C;
    --menu-item-color: #ffffff;
    --btn-border-shadow: #0D6EFD;
    --theme-badge-color: #fff;
    --theme-btn-border-color: #fff;
}
.theme-light {
    background: url(/static/images/theme-light/background.jpg) no-repeat;
    --bs-body-color: var(--theme-light-body-color);
    --bs-body-bg: var(--theme-light-body-bg);
    --menu-item-bg: #223D6C;
    --menu-item-color: #ffffff;
    --bs-pagination-active-bg: var(--theme-light-body-color);
    --theme-btn-border-color: #ddd;
    --theme-btn-hover-color: blue;
    --bs-secondary-bg: #e9ecef;
}
.theme-dark {
    background: url(/static/images/theme-dark/background.jpg) no-repeat;
    --bs-body-color: var(--theme-dark-body-color);
    --bs-body-color-rgb: var(--theme-dark-body-color);
    --bs-body-bg: var(--theme-dark-body-bg);
    --bs-link-color-rgb: #fff;
    --bs-link-hover-color-rgb: #fff;
    --menu-item-bg: #efefef;
    --menu-item-color: #222;
    --btn-border-shadow: #ccc;
    --theme-badge-color: var(--theme-dark-body-bg);
    --theme-btn-hover-color: lightgray;
    --bs-secondary-bg: #444;
}
.theme-navy {
    background: url(/static/images/theme-navy/background.jpg) no-repeat;
    --bs-body-color: var(--theme-navy-body-color);
    --bs-body-color-rgb: var(--theme-navy-body-color);
    --bs-body-bg: var(--theme-navy-body-bg);
    --bs-link-color-rgb: #fff;
    --bs-link-hover-color-rgb: #fff;
    --bs-border-color: #9595d3;
    --bs-border-width: 2px;
    --menu-item-bg: #EDF4FF;
    --menu-item-color: #223D6C;
    --btn-border-shadow: #abcaff;
    --theme-badge-color: var(--theme-navy-body-bg);
    --theme-btn-hover-color: lightblue;
    --bs-secondary-bg: #3c5a8f;
}
.theme-purple {
    background: url(/static/images/theme-purple/background.jpg) no-repeat;
    --bs-body-color: var(--theme-purple-body-color);
    --bs-body-color-rgb: var(--theme-purple-body-color);
    --bs-body-bg: var(--theme-purple-body-bg);
    --bs-link-color-rgb: #fff;
    --bs-link-hover-color-rgb: #fff;
    --menu-item-bg: #e8deec;
    --menu-item-color: var(--theme-purple-body-bg);
    --btn-border-shadow: #dd88ff;
    --theme-badge-color: var(--theme-purple-body-bg);
    --theme-btn-hover-color: orange;
    --bs-secondary-bg: #3e3442;
}
.theme-dark .form-select, .theme-navy .form-select, .theme-purple .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.theme-light .btn-primary {
    --bs-btn-bg: #223D6C;
    --menu-item-bg: ##223D6C;
    --menu-item-color: #ffffff;
}
.theme-light .btn-secondary {
    --bs-btn-color: #222222;
    --bs-btn-bg: #eeeeee;
}
.theme-dark .btn-primary {
    --bs-btn-bg: #4B566D;
    --bs-btn-border-color: #fff;
}
.theme-navy .btn-primary {
    --bs-btn-bg: #0030DB;
    --bs-btn-border-color: #fff;
}
.theme-purple .btn-primary {
    --bs-btn-bg: #fffdd0;
    --bs-btn-color: #222222;
    --bs-btn-border-color: #fff;
}
.note-frame {
    color: var(--bsbody-color);
}

#area-content {
    margin: 0 1rem;
    background-color: var(--bs-body-bg);
}
#main-nav a {
    background-color: var(--menu-item-bg);
    color: var(--menu-item-color);
    display: block;
}
.rotate--90 {
    rotate: -90deg;
}

footer a.btn:focus, footer a.btn:hover {
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    stroke: var(--bs-body-bg);
    fill: var(--bs-body-color);
}

.hide-numbers .list-number { display: none; }

#skip-nav {
  text-align: center;
  z-index: 2;
  background-color: var(--bs-body-color);
  color: var(--bs-body-bg);
}

.note-frame {
  z-index: 3 !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-body-bg);
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

textarea { line-height: 1.8rem !important;}

address { word-break: keep-all; }

/* Bootstrap Override */
.btn { border-radius: 0 !important; }
.btn-link { color: var(--bs-body-color); }
.btn-link:hover { color: var(--theme-btn-hover-color); }
.btn-danger {
    --bs-btn-border-color: var(--theme-btn-border-color);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
}
.input-group-text {
  color: #000;
}
.input-group .btn { border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important; }
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.5rem !important; }
.rounded-3 { border-radius: 0.75rem !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 1.5rem !important; }
.w-10 { width: 10%!important; }
.w-15 { width: 15%!important; }
.w-18 { width: 18%!important; }
.w-20 { width: 20%!important; }
.w-25 { width: 25%!important; }
.w-30 { width: 30%!important; }
.w-35 { width: 35%!important; }
.w-40 { width: 40%!important; }
.w-50 { width: 50%!important; }
.w-55 { width: 55%!important; }
.w-60 { width: 60%!important; }
.w-65 { width: 65%!important; }
.w-70 { width: 70%!important; }
.w-80 { width: 80%!important; }
.w-85 { width: 85%!important; }
.w-90 { width: 90%!important; }
.wp-30 { width: 30px!important; }
.wp-40 { width: 40px!important; }
.wp-50 { width: 50px!important; }
.wp-80 { width: 80px!important; }
.wp-85 { width: 85px!important; }
.wp-80 { width: 80px!important; }
.wp-100 { width: 100px!important; }
.wp-120 { width: 120px!important; }
.wp-150 { width: 150px!important; }
.wp-200 { width: 200px!important; }
.wp-220 { width: 220px!important; }
.wp-240 { width: 240px!important; }
.wp-300 { width: 300px!important; }
.wp-400 { width: 400px!important; }
.fs-7 { font-size: 0.9rem !important;}
.fs-8 { font-size: 0.8rem !important;}
.form-control:focus, .form-check-input:focus, .btn:focus, .form-select:focus, .page-link:focus {
  border-color: var(--bs-btn-border-color);
  box-shadow: 0 0 0 0.25rem var(--btn-border-shadow);
}
.r-45 { transform: rotate(45deg); }
.r-180 { transform: rotate(180deg); }
.px-6 { padding-left: 6rem; padding-right: 6rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.ls-0 { letter-spacing: 0;}
.ls-1 { letter-spacing: -1px;}
.ls-2 { letter-spacing: -2px;}
a { text-decoration: none; }
.form-control:read-only, .form-control:read-only>label {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-check-input[type="radio"] { border-width: 2px; }
.bg-info {
    background-color: var(--bs-body-color) !important;
}
.badge {
    color: var(--theme-badge-color);
}
.badge.border {
  border-color: var(--theme-badge-color) !important;
}
.pagination {
    --bs-pagination-active-bg: var(--bs-body-color);
    /*
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-border-color: #0d6efd;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    */
}
.page-link {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
}
.active>.page-link, .page-link.active {
    color: var(--bs-body-bg);
    border-color: var(--btn-border-shadow);
}

@media (min-width: 768px) {
    .user-info { min-width:230px !important; }
    .comment-buttons { min-width: 45px;}
    .border-md-end {
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}
@media (max-width: 767.98px) {
    .border-md-end {
        border-right: none !important;
    }
}

.scrollspy-agree {
    max-height: 240px;
    margin-top: .25rem;
    overflow: hidden;
    border: 1px solid var(--theme-btn-border-color);
}
.scrollspy-agree div {
    overflow: auto;
    max-height: 200px;
}

.form-floating>textarea.form-control:focus~label {
  color: rgba(#fff,.65);
  transform: scale(0) translateY(-.5rem) translateX(.15rem);
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--bs-body-color);
}

::placeholder {
  color: var(--bs-body-color);
}