html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* 관리자 로그인 전용 화면: Hub 메인과 코드관리 화면의 어두운 색상 체계를 공유한다. */
.login-body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: #e7edf7;
  background:
    radial-gradient(circle at 18% 12%, rgba(43, 211, 198, .10), transparent 29rem),
    radial-gradient(circle at 82% 76%, rgba(111, 76, 255, .10), transparent 30rem),
    #0f1728;
}
.login-header { height: 72px; background: rgba(17, 26, 45, .92); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 3px 16px rgba(3,8,18,.24); backdrop-filter: blur(16px); }
.login-header-inner { width: 100%; max-width: 1500px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; }
.login-logo { display: flex; align-items: center; }
.login-logo img { width: 142px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.login-divider { width: 1px; height: 25px; margin: 0 14px; background: rgba(255,255,255,.22); }
.login-section-name { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 700; }
.login-main { flex: 1; width: 100%; display: grid; place-items: center; padding: 56px 20px; }
.login-panel { position: relative; width: min(100%, 430px); overflow: hidden; background: rgba(29, 42, 66, .92); border: 1px solid #31415d; border-radius: 16px; box-shadow: 0 26px 70px rgba(2,8,20,.45); }
.login-panel-accent { height: 3px; background: linear-gradient(90deg, #2bd3c6, #3e7cff, #8c55d9); }
.login-panel-body { padding: 36px; }
.login-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.login-symbol { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; color: #07111d; background: linear-gradient(135deg,#2bd3c6,#3e7cff); font-size: 20px; font-weight: 800; box-shadow: 0 8px 24px rgba(43,211,198,.18); }
.login-eyebrow { margin: 0 0 3px; color: #2bd3c6; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.login-heading h1 { margin: 0; color: #f4f7fb; font-size: 24px; font-weight: 750; letter-spacing: -.03em; }
.login-panel .form-label { margin-bottom: 8px; color: #cbd5e3; font-size: 14px; font-weight: 600; }
.login-panel .form-control { min-height: 46px; color: #f4f7fb; background: #162137; border-color: #40506a; border-radius: 9px; }
.login-panel .form-control:focus { color: #fff; background: #18253b; border-color: #2bd3c6; box-shadow: 0 0 0 .2rem rgba(43,211,198,.13); }
.login-remember { margin: 4px 0 24px; }
.login-panel .form-check-input { background-color: #162137; border-color: #53647f; }
.login-panel .form-check-input:checked { background-color: #2f9ec5; border-color: #2bd3c6; }
.login-panel .form-check-label { color: #aebbd0; font-size: 14px; }
.login-validation { color: #ff9ba5; font-size: 13px; }
.login-validation:empty { display: none; }
.login-submit { width: 100%; min-height: 46px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #188eaa, #326cce); font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 24px rgba(36,124,192,.25); }
.login-submit:focus-visible { outline: 3px solid rgba(43,211,198,.35); outline-offset: 3px; }
.login-footer { padding: 22px 28px; color: #71829b; border-top: 1px solid rgba(255,255,255,.06); text-align: center; font-size: 12px; }
@media (max-width: 575.98px) {
  .login-header-inner { padding: 0 18px; }
  .login-main { align-items: start; padding: 36px 16px; }
  .login-panel-body { padding: 28px 24px; }
}

.code-admin-body { margin: 0; background: #162137; color: #202a3a; }
.code-admin-header { position: sticky; top: 0; z-index: 1030; height: 72px; background: #111a2d; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 3px 16px rgba(13,25,45,.16); }
.code-admin-header-inner { max-width: 1500px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.code-admin-header-inner { justify-content: flex-start; }
.code-admin-logo { display: flex; align-items: center; color: #fff; text-decoration: none; }
.code-admin-logo img { width: 142px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.code-admin-section-link { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.code-admin-section-link:hover { color: #2bd3c6; }
.code-admin-divider { display: block; width: 1px; height: 25px; background: rgba(255,255,255,.22); }
.code-admin-logo + .code-admin-divider { margin: 0 14px; }
.code-admin-account { display: flex; align-items: center; gap: 18px; margin-left: auto; color: rgba(255,255,255,.72); font-size: 14px; }
.code-admin-user { display: flex; align-items: center; gap: 8px; }
.code-admin-user-icon { color: #2bd3c6; font-size: 9px; }
.code-admin-account form { margin: 0; }
.code-admin-logout { padding: 7px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: transparent; color: rgba(255,255,255,.82); font-size: 13px; }
.code-admin-logout:hover { border-color: #2bd3c6; color: #fff; }
.code-admin-page { max-width: 1500px; margin: 0 auto; padding: 0 28px; }
.code-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: stretch; min-height: calc(100vh - 72px); }
.code-sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; margin-left: -28px; padding: 26px 16px 20px 28px; background: #162137; color: #fff; border-right: 1px solid rgba(255,255,255,.06); }
.code-sidebar-title { display: flex; align-items: center; gap: 10px; padding: 0 10px 21px; font-size: 16px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 15px; }
.code-sidebar-mark { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: linear-gradient(135deg,#29c9c0,#3e7cff); color: #fff; font-weight: 800; }
.code-nav-link { display: flex; gap: 12px; align-items: center; padding: 12px 13px; border-radius: 8px; color: rgba(255,255,255,.68); text-decoration: none; transition: background .18s ease,color .18s ease; }
.code-nav-icon { display: inline-grid; place-items: center; width: 23px; color: #6f8cac; font-size: 18px; font-weight: 700; }
.code-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.code-nav-link:hover .code-nav-icon { color: #2bd3c6; }
.code-nav-link.active { color: #fff; background: linear-gradient(90deg,rgba(43,211,198,.2),rgba(62,124,255,.16)); box-shadow: inset 3px 0 #2bd3c6; font-weight: 700; }
.code-nav-link.active .code-nav-icon { color: #2bd3c6; }
.code-content { min-width: 0; padding: 27px 0 46px; }
.code-content > .mb-4 h1 { color: #fff; font-weight: 750; letter-spacing: -.03em; }
.code-content > .mb-4 p { color: rgba(255,255,255,.68) !important; }
.code-content .card { --bs-card-bg: #1d2a42; --bs-card-color: #e7edf7; color: #e7edf7; background-color: #1d2a42; border: 1px solid #2c3c58; border-radius: 10px; box-shadow: 0 8px 22px rgba(5,12,25,.18) !important; }
.code-content .card-body { color: #e7edf7; background-color: #1d2a42; }
.code-content .card-header { padding: 14px 17px; color: #f3f6fb; background: #21304a; border-bottom-color: #31415d; border-radius: 10px 10px 0 0 !important; }
.code-content .card-header.bg-white { background: #21304a !important; }
.code-content .text-muted { color: #95a5bc !important; }
.code-content .table { --bs-table-bg: #1d2a42; --bs-table-color: #dfe7f2; --bs-table-border-color: #33435e; --bs-table-hover-bg: #24344f; --bs-table-hover-color: #fff; color: #dfe7f2; border-color: #33435e; margin-bottom: 0; }
.code-content .table-light { --bs-table-bg: #24344f; --bs-table-color: #f1f5fa; --bs-table-border-color: #3a4b67; }
.code-content .table > :not(caption) > * > * { color: #dfe7f2; background-color: #1d2a42; border-bottom-color: #3a4a64; box-shadow: none; }
.code-content .table > thead > tr > * { color: #f3f6fb; background-color: #24344f; border-bottom-color: #43536d; }
.code-content .table-hover > tbody > tr:hover > * { color: #fff; background-color: #293a57; }
.code-content .form-control,
.code-content .form-select { color: #e9eef6; background-color: #162137; border-color: #40506a; }
.code-content .form-select option { color: #e9eef6; background: #162137; }
.code-content .form-control::placeholder { color: #71829b; }
.code-content .form-control:focus,
.code-content .form-select:focus { color: #fff; background-color: #19263c; border-color: #2bd3c6; box-shadow: 0 0 0 .2rem rgba(43,211,198,.13); }
.code-content .form-label,
.code-content .form-check-label { color: #dce4ef; }
.code-content .list-group-item { color: #dfe7f2; background: #1d2a42; border-color: #33435e; }
.code-content .alert { border-width: 1px; }
.code-content .alert-info { color: #a6e8f3; background-color: #17394a; border-color: #286174; }
.code-content .alert-warning { color: #f7dda0; background-color: #463a20; border-color: #715d2c; }
.code-content .alert-success { color: #9ee2ca; background-color: #173e36; border-color: #286453; }
.code-content .alert-danger { color: #f2b8bd; background-color: #49262d; border-color: #74404a; }
.code-content .btn-outline-primary { --bs-btn-color: #59a9ff; --bs-btn-border-color: #3976b8; --bs-btn-hover-bg: #287fce; --bs-btn-hover-border-color: #287fce; }
.code-content .btn-primary { --bs-btn-bg: #287fce; --bs-btn-border-color: #287fce; }
.code-content .btn-success { --bs-btn-bg: #159b8f; --bs-btn-border-color: #159b8f; }
.code-content .pagination { --bs-pagination-bg: #1d2a42; --bs-pagination-color: #aebdd2; --bs-pagination-border-color: #40506a; --bs-pagination-hover-bg: #263752; --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: #526681; --bs-pagination-focus-bg: #263752; --bs-pagination-focus-color: #fff; --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(43,211,198,.13); --bs-pagination-active-bg: #159b8f; --bs-pagination-active-border-color: #2bd3c6; --bs-pagination-active-color: #fff; --bs-pagination-disabled-bg: #18243a; --bs-pagination-disabled-border-color: #33435e; --bs-pagination-disabled-color: #62738c; }
.code-content .page-link { background-color: var(--bs-pagination-bg); color: var(--bs-pagination-color); border-color: var(--bs-pagination-border-color); }
.code-content .page-link:hover { background-color: var(--bs-pagination-hover-bg); color: var(--bs-pagination-hover-color); border-color: var(--bs-pagination-hover-border-color); }
.code-content .page-link:focus { background-color: var(--bs-pagination-focus-bg); color: var(--bs-pagination-focus-color); box-shadow: var(--bs-pagination-focus-box-shadow); }
.code-content .page-item.active .page-link { background-color: var(--bs-pagination-active-bg); color: var(--bs-pagination-active-color); border-color: var(--bs-pagination-active-border-color); }
.code-content .page-item.disabled .page-link { background-color: var(--bs-pagination-disabled-bg); color: var(--bs-pagination-disabled-color); border-color: var(--bs-pagination-disabled-border-color); }
@media (max-width: 991.98px) {
  .code-shell { grid-template-columns: 1fr; }
  .code-admin-header-inner,.code-admin-page { padding-left: 16px; padding-right: 16px; }
  .code-admin-brand span:last-child,.code-admin-divider,.code-admin-user { display: none; }
  .code-sidebar { position: static; height: auto; margin: 0 -16px; padding: 12px 16px; }
  .code-sidebar-title { display: none; }
  .code-sidebar .nav { flex-direction: row !important; overflow-x: auto; }
  .code-sidebar .mt-auto { display: none; }
  .code-nav-link { white-space: nowrap; }
  .code-content { padding-top: 8px; }
}