/* ============================================================================
   ptn-ui — 커스텀메시지 고객사 전산 디자인 레이어
   sb-admin-2.min.css(Bootstrap 4) 위에 얹는다. 기존 화면 마크업은 그대로, 모양만 바꾼다.
   ========================================================================== */

/* ───────── 1. 토큰 ───────── */
:root {
  --pu-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --pu-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pu-bg: #f4f5f9;
  --pu-surface: #ffffff;
  --pu-surface-2: #f8f9fc;
  --pu-border: #e6e8ef;
  --pu-border-strong: #d6d9e3;
  --pu-text: #1b1f2e;
  --pu-text-2: #4b5166;
  --pu-muted: #7a819a;
  --pu-faint: #b2b7c8;

  --pu-brand: #4f46e5;
  --pu-brand-600: #4338ca;
  --pu-brand-700: #3730a3;
  --pu-brand-soft: #eef2ff;
  --pu-brand-soft-2: #e0e7ff;
  --pu-brand-text: #3730a3;

  --pu-green: #16a34a;  --pu-green-soft: #e7f7ee;  --pu-green-text: #15803d;
  --pu-red: #dc2626;    --pu-red-soft: #fdecec;    --pu-red-text: #b91c1c;
  --pu-amber: #d97706;  --pu-amber-soft: #fff4dc;  --pu-amber-text: #b45309;
  --pu-sky: #0284c7;    --pu-sky-soft: #e6f4fb;    --pu-sky-text: #0369a1;

  --pu-radius-xs: 6px; --pu-radius-sm: 8px; --pu-radius: 12px; --pu-radius-lg: 16px; --pu-radius-xl: 20px;
  --pu-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --pu-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .06);
  --pu-shadow-md: 0 8px 24px -12px rgba(16, 24, 40, .18), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --pu-shadow-lg: 0 24px 48px -16px rgba(16, 24, 40, .28);
  --pu-ring: 0 0 0 3px rgba(79, 70, 229, .18);

  --pu-sidebar-w: 256px; --pu-sidebar-w-min: 76px; --pu-topbar-h: 60px;
  --pu-ease: cubic-bezier(.32, .72, 0, 1);
}
:root[data-theme="dark"] {
  --pu-bg: #0f1117; --pu-surface: #171a23; --pu-surface-2: #1d2130; --pu-border: #262b3a; --pu-border-strong: #343a4d;
  --pu-text: #e8eaf2; --pu-text-2: #c3c8d8; --pu-muted: #8d94ab; --pu-faint: #5b6279;
  --pu-brand: #6366f1; --pu-brand-600: #818cf8; --pu-brand-700: #a5b4fc; --pu-brand-soft: #1f2240; --pu-brand-soft-2: #27295a; --pu-brand-text: #c7d2fe;
  --pu-green-soft: #0f2b1d; --pu-green-text: #4ade80; --pu-red-soft: #3a1515; --pu-red-text: #f87171; --pu-amber-soft: #3a2a0a; --pu-amber-text: #fbbf24; --pu-sky-soft: #0c2a3a; --pu-sky-text: #38bdf8;
  --pu-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --pu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px -2px rgba(0, 0, 0, .4);
  --pu-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, .6); --pu-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7); --pu-ring: 0 0 0 3px rgba(129, 140, 248, .3);
}

/* ───────── 2. 바닥 (default.css · sb-admin 되돌리기) ───────── */
html { overflow-y: auto; }
body.pu-body, body.pu-login-body {
  margin: 0; font-family: var(--pu-font); font-size: 14px; line-height: 1.5; color: var(--pu-text); background: var(--pu-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -.01em;
}
.pu-body h1, .pu-body h2, .pu-body h3, .pu-body h4, .pu-body h5, .pu-body h6 { font-family: var(--pu-font); color: var(--pu-text); letter-spacing: -.02em; }
.pu-body a { color: var(--pu-brand); } .pu-body a:hover { color: var(--pu-brand-600); }
.pu-body ::selection { background: var(--pu-brand-soft-2); color: var(--pu-brand-text); }
.pu-body *:focus-visible { outline: none; box-shadow: var(--pu-ring); }
.pu-body .text-muted { color: var(--pu-muted) !important; }
.pu-body .text-gray-800, .pu-body .text-gray-900 { color: var(--pu-text) !important; }
.pu-body .text-primary { color: var(--pu-brand) !important; } .pu-body .text-success { color: var(--pu-green-text) !important; } .pu-body .text-danger { color: var(--pu-red-text) !important; } .pu-body .text-warning { color: var(--pu-amber-text) !important; } .pu-body .text-info { color: var(--pu-sky-text) !important; }
.pu-body .bg-white { background: var(--pu-surface) !important; } .pu-body .bg-light { background: var(--pu-surface-2) !important; }
.pu-body .border, .pu-body .border-top, .pu-body .border-bottom, .pu-body .border-left, .pu-body .border-right { border-color: var(--pu-border) !important; }
.pu-body .shadow, .pu-body .shadow-sm { box-shadow: var(--pu-shadow-sm) !important; } .pu-body .shadow-lg { box-shadow: var(--pu-shadow-md) !important; }
.pu-body hr { border-top-color: var(--pu-border); }
.pu-body ::-webkit-scrollbar { width: 10px; height: 10px; } .pu-body ::-webkit-scrollbar-thumb { background: var(--pu-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .pu-body ::-webkit-scrollbar-track { background: transparent; }

/* ───────── 3. 뼈대 : 사이드바 + 본문 ───────── */
.pu-app { display: flex; min-height: 100vh; }
.pu-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--pu-sidebar-w); z-index: 1030; display: flex; flex-direction: column;
  background: var(--pu-surface); border-right: 1px solid var(--pu-border);
  transition: width .32s var(--pu-ease), transform .32s var(--pu-ease);
}
.pu-main { flex: 1; min-width: 0; margin-left: var(--pu-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .32s var(--pu-ease); }
.pu-content { flex: 1; padding: 22px 28px 32px; }
.pu-content > section.content, .pu-content > .content { padding: 0; }
.pu-content > .container-fluid, .pu-content > section > .container-fluid, .pu-content > .content > .container-fluid { padding: 0; }
body.pu-impersonating .pu-sidebar { top: 36px; }
.pu-impersonate { position: sticky; top: 0; z-index: 2000; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--pu-amber); color: #fff; font-size: 13px; font-weight: 700; }
.pu-impersonate a { color: #fff; text-decoration: underline; margin-left: auto; }

/* 브랜드 */
.pu-brand { display: flex; align-items: center; gap: 10px; height: var(--pu-topbar-h); padding: 0 14px 0 16px; border-bottom: 1px solid var(--pu-border); }
.pu-brand-link { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit !important; text-decoration: none !important; flex: 1; }
.pu-brand-mark { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(135deg, var(--pu-brand) 0%, #7c3aed 100%); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .6); }
.pu-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pu-brand-text b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pu-text); }
.pu-brand-text small { font-size: 11px; color: var(--pu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-collapse-btn { border: 0; background: transparent; color: var(--pu-muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; font-size: 18px; transition: background .15s, color .15s; }
.pu-collapse-btn:hover { background: var(--pu-surface-2); color: var(--pu-text); }

/* 메뉴 */
.pu-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; }
.pu-nav-group + .pu-nav-group { margin-top: 2px; }
.pu-nav-link {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--pu-text-2); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none !important;
  transition: background .15s, color .15s;
}
.pu-nav-link:hover { background: var(--pu-surface-2); color: var(--pu-text); }
.pu-nav-link.is-active, .pu-nav-group.is-active > .pu-nav-link { background: var(--pu-brand-soft); color: var(--pu-brand-text); }
.pu-nav-link.is-active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pu-brand); }
.pu-nav-icon { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 19px; color: var(--pu-muted); }
.pu-nav-link:hover .pu-nav-icon, .pu-nav-link.is-active .pu-nav-icon, .pu-nav-group.is-active > .pu-nav-link .pu-nav-icon, .pu-nav-group.is-open > .pu-nav-link .pu-nav-icon { color: var(--pu-brand); }
.pu-nav-icon .fas, .pu-nav-icon .far, .pu-nav-icon .fa { font-size: 15px; }
.pu-nav-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-nav-caret { font-size: 15px; color: var(--pu-faint); transition: transform .25s var(--pu-ease); }
.pu-nav-group.is-open > .pu-nav-link .pu-nav-caret { transform: rotate(180deg); }
.pu-nav-sub { padding: 4px 0 6px 20px; position: relative; }
.pu-nav-sub::before { content: ""; position: absolute; left: 22px; top: 6px; bottom: 10px; width: 1px; background: var(--pu-border); }
.pu-nav-sublink { position: relative; display: block; padding: 7px 10px 7px 22px; border-radius: 8px; color: var(--pu-text-2); font-size: 13px; font-weight: 500; text-decoration: none !important; transition: background .15s, color .15s; }
.pu-nav-sublink::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--pu-border-strong); transition: background .15s, transform .15s; }
.pu-nav-sublink:hover { color: var(--pu-text); background: var(--pu-surface-2); }
.pu-nav-sublink.is-active { color: var(--pu-brand-text); font-weight: 700; background: var(--pu-brand-soft); }
.pu-nav-sublink.is-active::before { background: var(--pu-brand); transform: scale(1.25); }

/* 사이드바 아래 사용자 */
.pu-side-user { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--pu-border); }
.pu-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--pu-brand-text); background: var(--pu-brand-soft); border: 1px solid var(--pu-brand-soft-2); }
.pu-avatar.sm { flex-basis: 30px; width: 30px; height: 30px; font-size: 13px; }
.pu-side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pu-side-user-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-side-user-text small { font-size: 11px; color: var(--pu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-side-logout { margin-left: auto; color: var(--pu-muted) !important; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; text-decoration: none !important; }
.pu-side-logout:hover { background: var(--pu-red-soft); color: var(--pu-red-text) !important; }

/* 접힌 사이드바 (아이콘만) */
.pu-app.is-collapsed .pu-sidebar { width: var(--pu-sidebar-w-min); }
.pu-app.is-collapsed .pu-main { margin-left: var(--pu-sidebar-w-min); }
.pu-app.is-collapsed .pu-brand { padding: 0 0 0 20px; }
.pu-app.is-collapsed .pu-brand-text, .pu-app.is-collapsed .pu-nav-text, .pu-app.is-collapsed .pu-nav-caret, .pu-app.is-collapsed .pu-side-user-text, .pu-app.is-collapsed .pu-nav-sub { display: none !important; }
.pu-app.is-collapsed .pu-collapse-btn { position: absolute; right: -14px; top: 15px; background: var(--pu-surface); border: 1px solid var(--pu-border); box-shadow: var(--pu-shadow-sm); width: 28px; height: 28px; }
.pu-app.is-collapsed .pu-nav { padding: 12px 10px; }
.pu-app.is-collapsed .pu-nav-link { justify-content: center; padding: 10px 0; }
.pu-app.is-collapsed .pu-nav-link.is-active::before { left: -10px; }
.pu-app.is-collapsed .pu-nav-link[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--pu-text); color: var(--pu-surface); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; white-space: nowrap; box-shadow: var(--pu-shadow-md); z-index: 5; }
.pu-app.is-collapsed .pu-side-user { justify-content: center; padding: 12px 0; } .pu-app.is-collapsed .pu-side-logout { display: none; }

/* 상단바 */
.pu-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; height: var(--pu-topbar-h); padding: 0 28px; background: color-mix(in srgb, var(--pu-bg) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.pu-topbar.is-scrolled { border-bottom-color: var(--pu-border); background: color-mix(in srgb, var(--pu-surface) 86%, transparent); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .pu-topbar { background: var(--pu-bg); } .pu-topbar.is-scrolled { background: var(--pu-surface); } }
.pu-page-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pu-page-title h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-crumb { font-size: 12.5px; color: var(--pu-muted); font-weight: 600; white-space: nowrap; } .pu-crumb i { font-size: 12px; vertical-align: -1px; }
.pu-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pu-icon-btn { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--pu-text-2); font-size: 19px; cursor: pointer; transition: background .15s, color .15s; }
.pu-icon-btn:hover { background: var(--pu-surface); box-shadow: var(--pu-shadow-xs); color: var(--pu-text); }
.pu-menu-btn { display: none; }
.pu-env { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--pu-amber-soft); color: var(--pu-amber-text); margin-right: 4px; white-space: nowrap; }
.pu-user-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 6px 3px 3px; border-radius: 999px; cursor: pointer; font: inherit; color: var(--pu-text); transition: background .15s; }
.pu-user-btn:hover { background: var(--pu-surface); box-shadow: var(--pu-shadow-xs); }
.pu-user-name { font-size: 13px; font-weight: 700; } .pu-user-btn .ti-chevron-down { font-size: 14px; color: var(--pu-muted); }
.pu-dropdown { min-width: 220px; padding: 6px; }
.pu-dropdown-head { padding: 8px 10px 4px; display: flex; flex-direction: column; line-height: 1.3; } .pu-dropdown-head b { font-size: 13.5px; } .pu-dropdown-head small { color: var(--pu-muted); font-size: 11.5px; }
.pu-dropdown .dropdown-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: 8px; } .pu-dropdown .dropdown-item i { font-size: 17px; color: var(--pu-muted); }

/* 푸터 · 맨 위로 */
.pu-footer { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-top: 1px solid var(--pu-border); font-size: 12px; color: var(--pu-muted); background: transparent; }
.pu-footer-right { margin-left: auto; } .pu-footer a { color: var(--pu-muted); } .pu-footer a:hover { color: var(--pu-text); }
.pu-totop { position: fixed; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pu-surface); border: 1px solid var(--pu-border); color: var(--pu-text-2) !important; box-shadow: var(--pu-shadow-md); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s var(--pu-ease); z-index: 1010; }
.pu-totop.is-show { opacity: 1; pointer-events: auto; transform: none; } .pu-totop:hover { color: var(--pu-brand) !important; }

/* 모바일 서랍 */
.pu-backdrop { position: fixed; inset: 0; background: rgba(15, 18, 24, .45); z-index: 1029; opacity: 0; pointer-events: none; transition: opacity .25s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (max-width: 991.98px) {
  .pu-sidebar { transform: translateX(-100%); box-shadow: none; width: var(--pu-sidebar-w) !important; }
  .pu-app.is-drawer .pu-sidebar { transform: none; box-shadow: var(--pu-shadow-lg); }
  .pu-app.is-drawer .pu-backdrop { opacity: 1; pointer-events: auto; }
  .pu-app .pu-main, .pu-app.is-collapsed .pu-main { margin-left: 0; }
  .pu-app.is-collapsed .pu-brand-text, .pu-app.is-collapsed .pu-nav-text, .pu-app.is-collapsed .pu-nav-caret, .pu-app.is-collapsed .pu-side-user-text, .pu-app.is-collapsed .pu-nav-sub { display: initial !important; }
  .pu-app.is-collapsed .pu-nav-sub { display: block !important; } .pu-app.is-collapsed .pu-nav-sub[hidden] { display: none !important; }
  .pu-app.is-collapsed .pu-nav-link { justify-content: flex-start; padding: 9px 10px 9px 12px; }
  .pu-app.is-collapsed .pu-collapse-btn { display: none; }
  .pu-menu-btn { display: grid; }
  .pu-topbar, .pu-content, .pu-footer { padding-left: 16px; padding-right: 16px; }
  .pu-content { padding-top: 14px; }
  .pu-page-title h1 { font-size: 16px; }
}

/* ───────── 4. 컴포넌트 (Bootstrap 4 · sb-admin 덮어쓰기) ───────── */
/* 버튼 */
.pu-body .btn, .pu-body a.btn {
  height: auto; line-height: 1.45; padding: 7px 14px; font-size: 13.5px; font-weight: 600; border-radius: 10px; border: 1px solid transparent; letter-spacing: -.01em;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; box-shadow: var(--pu-shadow-xs);
}
.pu-body .btn:active { transform: translateY(1px); } .pu-body .btn:focus, .pu-body .btn.focus { box-shadow: var(--pu-ring); }
.pu-body .btn-sm, .pu-body .btn-group-sm > .btn { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.pu-body .btn-xs { padding: 2px 8px; font-size: 11.5px; border-radius: 7px; box-shadow: none; }
.pu-body .btn-lg { padding: 10px 20px; font-size: 15px; border-radius: 12px; }
.pu-body .btn-primary { background: var(--pu-brand); border-color: var(--pu-brand); color: #fff; } .pu-body .btn-primary:hover { background: var(--pu-brand-600); border-color: var(--pu-brand-600); } .pu-body .btn-primary:not(:disabled):active, .pu-body .btn-primary.active { background: var(--pu-brand-700) !important; border-color: var(--pu-brand-700) !important; }
.pu-body .btn-secondary { background: var(--pu-text-2); border-color: var(--pu-text-2); }
.pu-body .btn-success { background: var(--pu-green); border-color: var(--pu-green); } .pu-body .btn-success:hover { background: #15803d; border-color: #15803d; }
.pu-body .btn-danger { background: var(--pu-red); border-color: var(--pu-red); } .pu-body .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.pu-body .btn-warning { background: var(--pu-amber); border-color: var(--pu-amber); color: #fff; } .pu-body .btn-info { background: var(--pu-sky); border-color: var(--pu-sky); color: #fff; }
.pu-body .btn-dark { background: var(--pu-text); border-color: var(--pu-text); color: var(--pu-surface); }
.pu-body .btn-light, .pu-body .btn-outline-secondary, .pu-body .btn-outline-dark, .pu-body .btn-outline-light, .pu-body .btn-default { background: var(--pu-surface); border-color: var(--pu-border-strong); color: var(--pu-text-2); }
.pu-body .btn-light:hover, .pu-body .btn-outline-secondary:hover, .pu-body .btn-outline-dark:hover { background: var(--pu-surface-2); border-color: var(--pu-border-strong); color: var(--pu-text); }
.pu-body .btn-outline-primary { background: var(--pu-surface); border-color: var(--pu-brand-soft-2); color: var(--pu-brand-text); } .pu-body .btn-outline-primary:hover { background: var(--pu-brand-soft); border-color: var(--pu-brand); color: var(--pu-brand-text); }
.pu-body .btn-outline-success { background: var(--pu-surface); border-color: #bfe8cf; color: var(--pu-green-text); } .pu-body .btn-outline-success:hover { background: var(--pu-green-soft); border-color: var(--pu-green); color: var(--pu-green-text); }
.pu-body .btn-outline-danger { background: var(--pu-surface); border-color: #f5c2c2; color: var(--pu-red-text); } .pu-body .btn-outline-danger:hover { background: var(--pu-red-soft); border-color: var(--pu-red); color: var(--pu-red-text); }
.pu-body .btn-outline-info { background: var(--pu-surface); border-color: #b9dff0; color: var(--pu-sky-text); } .pu-body .btn-outline-warning { background: var(--pu-surface); border-color: #f3d9a4; color: var(--pu-amber-text); }
.pu-body .btn.border-dark, .pu-body .btn.border { border-color: var(--pu-border-strong) !important; } .pu-body .btn-primary.border-dark, .pu-body .btn-success.border-dark, .pu-body .btn-danger.border-dark, .pu-body .btn-warning.border-dark { border-color: transparent !important; }
.pu-body .btn-link { box-shadow: none; color: var(--pu-brand); }
.pu-body .btn-group > .btn:not(:first-child) { margin-left: -1px; } .pu-body .btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pu-body .btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pu-body .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.pu-body .btn-tool { box-shadow: none; color: var(--pu-muted); }

/* 카드 */
.pu-body .card { border: 1px solid var(--pu-border); border-radius: var(--pu-radius); background: var(--pu-surface); box-shadow: var(--pu-shadow-xs); }
.pu-body .card.shadow, .pu-body .card.shadow-sm { box-shadow: var(--pu-shadow-sm) !important; }
.pu-body .card > .card-header { background: var(--pu-surface); border-bottom: 1px solid var(--pu-border); padding: 14px 18px; border-radius: var(--pu-radius) var(--pu-radius) 0 0 !important; color: var(--pu-text); }
.pu-body .card > .card-header.py-2 { padding-top: 10px; padding-bottom: 10px; }
.pu-body .card-title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--pu-text); }
.pu-body .card-secondary > .card-header, .pu-body .card-primary > .card-header, .pu-body .card-danger > .card-header, .pu-body .card-info > .card-header, .pu-body .card-success > .card-header, .pu-body .card-warning > .card-header { background: var(--pu-surface); color: var(--pu-text); border-top: 0; }
.pu-body .card-secondary, .pu-body .card-primary, .pu-body .card-danger, .pu-body .card-info, .pu-body .card-success, .pu-body .card-warning, .pu-body .card-outline { border-top-width: 1px; }
.pu-body .card-secondary > .card-header .card-title, .pu-body .card-danger > .card-header .card-title { font-size: 16px; }
.pu-body .card-body { color: var(--pu-text); }
.pu-body .card > .card-body > .card { box-shadow: var(--pu-shadow-xs); }
.pu-body .card .card-header h6.card-title, .pu-body .card .card-header .card-title.m-0 { font-size: 14px; }
.pu-body .card-header .font-weight-bold.text-primary { color: var(--pu-text) !important; }
.pu-body .border-left-primary { border-left: 4px solid var(--pu-brand) !important; } .pu-body .border-left-success { border-left-color: var(--pu-green) !important; } .pu-body .border-left-danger { border-left-color: var(--pu-red) !important; } .pu-body .border-left-warning { border-left-color: var(--pu-amber) !important; } .pu-body .border-left-info { border-left-color: var(--pu-sky) !important; }

/* 표 */
.pu-body .table { color: var(--pu-text); font-size: 13px; margin-bottom: 0; border-color: var(--pu-border); }
.pu-body .table th, .pu-body .table td { border-top: 1px solid var(--pu-border); padding: 9px 12px; vertical-align: middle; }
.pu-body .table-sm th, .pu-body .table-sm td { padding: 7px 10px; }
.pu-body .table thead th { background: var(--pu-surface-2); color: var(--pu-text-2); font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; border-bottom: 1px solid var(--pu-border); border-top: 0; white-space: nowrap; }
.pu-body .table-bordered, .pu-body .table-bordered th, .pu-body .table-bordered td { border-color: var(--pu-border); }
.pu-body .table-bordered { border-radius: 10px; overflow: hidden; }
.pu-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; } .pu-body .table-striped tbody tr:nth-of-type(even) { background: color-mix(in srgb, var(--pu-surface-2) 60%, transparent); }
.pu-body .table-hover tbody tr:hover { background: var(--pu-brand-soft); } :root[data-theme="dark"] .pu-body .table-hover tbody tr:hover { background: var(--pu-surface-2); }
.pu-body .table tfoot td, .pu-body .table tfoot th { background: var(--pu-surface-2); font-weight: 700; }
.pu-body .table-responsive { border-radius: 10px; }
.pu-body .table .thead-dark th, .pu-body .table-dark th { background: var(--pu-text); color: var(--pu-surface); }
.pu-body table.dataTable { border-collapse: collapse !important; }
.pu-body table.dataTable thead .sorting:before, .pu-body table.dataTable thead .sorting:after, .pu-body table.dataTable thead .sorting_asc:before, .pu-body table.dataTable thead .sorting_asc:after, .pu-body table.dataTable thead .sorting_desc:before, .pu-body table.dataTable thead .sorting_desc:after { bottom: .6em; }
.pu-body .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px; }

/* 폼 */
.pu-body .form-control, .pu-body .custom-select, .pu-body select.form-control { height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 9px; border: 1px solid var(--pu-border-strong); background-color: var(--pu-surface); color: var(--pu-text); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.pu-body textarea.form-control { height: auto; }
.pu-body .form-control:focus, .pu-body .custom-select:focus, .pu-body select.form-control:focus, .pu-body input[type=text]:focus, .pu-body input[type=password]:focus, .pu-body textarea:focus { border: 1px solid var(--pu-brand) !important; box-shadow: var(--pu-ring); background-color: var(--pu-surface); color: var(--pu-text); outline: 0; }
.pu-body .form-control::placeholder { color: var(--pu-faint); }
.pu-body .form-control-sm, .pu-body select.form-control-sm { height: 31px; padding: 3px 9px; font-size: 12.5px; border-radius: 8px; }
.pu-body .form-control-lg { height: 44px; font-size: 15px; border-radius: 11px; }
.pu-body select.form-control:not([multiple]), .pu-body .custom-select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a819a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.pu-body .form-control:disabled, .pu-body .form-control[readonly] { background-color: var(--pu-surface-2); color: var(--pu-text-2); }
.pu-body .form-group > label, .pu-body label.form-label, .pu-body .ct-search label, .pu-body .hr-search label { color: var(--pu-text-2); font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.pu-body .input-group-text { background: var(--pu-surface-2); border: 1px solid var(--pu-border-strong); color: var(--pu-muted); border-radius: 9px; font-size: 13px; }
.pu-body .input-group > .form-control:not(:last-child), .pu-body .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pu-body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pu-body .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pu-body .input-group-append .input-group-text, .pu-body .input-group-append .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pu-body .custom-control-input:checked ~ .custom-control-label::before { background: var(--pu-brand); border-color: var(--pu-brand); }
.pu-body input[type=checkbox], .pu-body input[type=radio] { accent-color: var(--pu-brand); width: 15px; height: 15px; }
.pu-body .form-control.is-invalid { border-color: var(--pu-red); }

/* 배지 · 알림 · 기타 */
.pu-body .badge { font-weight: 700; border-radius: 999px; padding: 3px 9px; font-size: 11px; letter-spacing: 0; }
.pu-body .badge-primary { background: var(--pu-brand-soft); color: var(--pu-brand-text); } .pu-body .badge-success { background: var(--pu-green-soft); color: var(--pu-green-text); } .pu-body .badge-danger { background: var(--pu-red-soft); color: var(--pu-red-text); } .pu-body .badge-warning { background: var(--pu-amber-soft); color: var(--pu-amber-text); } .pu-body .badge-info { background: var(--pu-sky-soft); color: var(--pu-sky-text); } .pu-body .badge-secondary, .pu-body .badge-light { background: var(--pu-surface-2); color: var(--pu-text-2); border: 1px solid var(--pu-border); } .pu-body .badge-dark { background: var(--pu-text); color: var(--pu-surface); }
.pu-body .alert { border-radius: 12px; border: 1px solid transparent; font-size: 13px; }
.pu-body .alert-warning { background: var(--pu-amber-soft); color: var(--pu-amber-text); border-color: #f6dfae; } .pu-body .alert-danger { background: var(--pu-red-soft); color: var(--pu-red-text); border-color: #f5c2c2; } .pu-body .alert-success { background: var(--pu-green-soft); color: var(--pu-green-text); border-color: #bfe8cf; } .pu-body .alert-info { background: var(--pu-sky-soft); color: var(--pu-sky-text); border-color: #b9dff0; } .pu-body .alert-light { background: var(--pu-surface); color: var(--pu-text-2); border-color: var(--pu-border); }
.pu-body .dropdown-menu { border: 1px solid var(--pu-border); border-radius: 12px; box-shadow: var(--pu-shadow-md); padding: 6px; background: var(--pu-surface); color: var(--pu-text); font-size: 13px; }
.pu-body .dropdown-item { border-radius: 8px; color: var(--pu-text); padding: 7px 10px; } .pu-body .dropdown-item:hover, .pu-body .dropdown-item:focus { background: var(--pu-surface-2); color: var(--pu-text); } .pu-body .dropdown-divider { border-top-color: var(--pu-border); margin: 4px 0; }
.pu-body .modal-content { border: 0; border-radius: var(--pu-radius-lg); box-shadow: var(--pu-shadow-lg); background: var(--pu-surface); color: var(--pu-text); }
.pu-body .modal-header { border-bottom: 1px solid var(--pu-border); padding: 16px 20px; } .pu-body .modal-header.py-2 { padding-top: 12px; padding-bottom: 12px; }
.pu-body .modal-title { font-weight: 800; font-size: 16px; letter-spacing: -.02em; } .pu-body .modal-header .close { color: var(--pu-muted); text-shadow: none; opacity: 1; font-weight: 400; } .pu-body .modal-header .close:hover { color: var(--pu-text); }
.pu-body .modal-body { padding: 18px 20px; } .pu-body .modal-footer { border-top: 1px solid var(--pu-border); padding: 12px 20px; } .pu-body .modal-footer.py-2 { padding-top: 10px; padding-bottom: 10px; }
.pu-body .modal-backdrop.show { opacity: .45; } .pu-body .modal.fade .modal-dialog { transition: transform .28s var(--pu-ease), opacity .2s; transform: translateY(12px) scale(.98); } .pu-body .modal.show .modal-dialog { transform: none; }
/* 모달은 전부 화면 세로 중앙 (Bootstrap .modal-dialog-centered 를 기본값으로) — 내용이 화면보다 길면 그대로 위에서부터 스크롤 */
.pu-body .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 1rem); }
@media (min-width: 576px) { .pu-body .modal-dialog { min-height: calc(100% - 3.5rem); } }
.pu-body .modal-dialog .modal-content { width: 100%; }
.pu-body .nav-tabs { border-bottom: 1px solid var(--pu-border); gap: 4px; }
.pu-body .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--pu-muted); font-weight: 600; padding: 9px 14px; margin-bottom: -1px; background: transparent; }
.pu-body .nav-tabs .nav-link:hover { color: var(--pu-text); border-bottom-color: var(--pu-border-strong); } .pu-body .nav-tabs .nav-link.active { color: var(--pu-brand-text); border-bottom-color: var(--pu-brand); background: transparent; }
.pu-body .nav-pills .nav-link { border-radius: 999px; font-weight: 600; } .pu-body .nav-pills .nav-link.active { background: var(--pu-brand); }
.pu-body .pagination .page-link { border-color: var(--pu-border); color: var(--pu-text-2); font-size: 13px; padding: 5px 11px; margin-left: 4px; border-radius: 8px !important; background: var(--pu-surface); }
.pu-body .pagination .page-item.active .page-link { background: var(--pu-brand); border-color: var(--pu-brand); color: #fff; } .pu-body .pagination .page-link:hover { background: var(--pu-surface-2); color: var(--pu-text); }
.pu-body .pg_page, .pu-body .pg_current { border-radius: 8px; height: 32px; line-height: 30px; min-width: 32px; font-size: 13px; } .pu-body .pg_page { background: var(--pu-surface); border-color: var(--pu-border); color: var(--pu-text-2); } .pu-body .pg_current { background: var(--pu-brand); border-color: var(--pu-brand); }
.pu-body .progress { border-radius: 999px; background: var(--pu-surface-2); } .pu-body .progress-bar { background: var(--pu-brand); }
.pu-body .tooltip-inner { background: var(--pu-text); border-radius: 8px; font-size: 12px; padding: 5px 9px; }
.pu-body .popover { border-color: var(--pu-border); border-radius: 12px; box-shadow: var(--pu-shadow-md); }
.pu-body .list-group-item { background: var(--pu-surface); border-color: var(--pu-border); color: var(--pu-text); }
.pu-body .close { color: var(--pu-muted); text-shadow: none; }
.pu-body .flatpickr-calendar { border-radius: 12px; box-shadow: var(--pu-shadow-lg); font-family: var(--pu-font); }
.pu-body .daterangepicker { border-radius: 12px; border-color: var(--pu-border); box-shadow: var(--pu-shadow-lg); font-family: var(--pu-font); }
.pu-body .daterangepicker td.active, .pu-body .daterangepicker td.active:hover { background: var(--pu-brand); }
.pu-body .select2-container--default .select2-selection--single, .pu-body .select2-container--bootstrap4 .select2-selection { border-radius: 9px; border-color: var(--pu-border-strong); min-height: 36px; }
.pu-body .swal2-popup { border-radius: 16px; font-family: var(--pu-font); }

/* 기존 화면의 머리글(H1 등) 톤 */
.pu-body .content-header h1, .pu-body h1.h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pu-body .content-header { padding: 0 0 12px; }
.pu-body .content-wrapper { background: transparent; }

/* ───────── 5. 계약관리 · 인사관리 화면 색을 토큰에 맞춤 ───────── */
.pu-body .ct-kpi .k { border: 1px solid var(--pu-border); border-left-width: 4px; border-radius: 12px; background: var(--pu-surface); box-shadow: var(--pu-shadow-xs); }
.pu-body .ct-kpi .k { border-left-color: var(--pu-brand); } .pu-body .ct-kpi .k.green { border-left-color: var(--pu-green); } .pu-body .ct-kpi .k.red { border-left-color: var(--pu-red); } .pu-body .ct-kpi .k.red b { color: var(--pu-red-text); } .pu-body .ct-kpi .k.yellow { border-left-color: var(--pu-amber); } .pu-body .ct-kpi .k.gray { border-left-color: var(--pu-faint); } .pu-body .ct-kpi .k.info { border-left-color: var(--pu-sky); }
.pu-body .ct-kpi .k small { color: var(--pu-muted); text-transform: none; letter-spacing: -.01em; font-size: 12px; } .pu-body .ct-kpi .k b { color: var(--pu-text); font-size: 21px; } .pu-body .ct-kpi .k i.sub { color: var(--pu-muted); }
.pu-body table.ct-tbl th, .pu-body table.hr-tbl th, .pu-body table.pm th, .pu-body table.cm th { background: var(--pu-surface-2); color: var(--pu-text-2); }
.pu-body table.ct-tbl a.nm, .pu-body table.hr-tbl b { color: var(--pu-text); } .pu-body table.ct-tbl a.nm:hover { color: var(--pu-brand); }
.pu-body table.ct-tbl tfoot td { background: var(--pu-amber-soft); color: var(--pu-amber-text); }
.pu-body .ct-st.ing, .pu-body .bd.g { background: var(--pu-brand-soft); color: var(--pu-brand-text); } .pu-body .ct-st.done, .pu-body .bd.on { background: var(--pu-green-soft); color: var(--pu-green-text); } .pu-body .ct-st.cancel, .pu-body .bd.off { background: var(--pu-surface-2); color: var(--pu-muted); }
.pu-body .ct-due.over { background: var(--pu-red-soft); color: var(--pu-red-text); } .pu-body .ct-due.soon { background: var(--pu-amber-soft); color: var(--pu-amber-text); } .pu-body .ct-due.today { background: var(--pu-sky-soft); color: var(--pu-sky-text); } .pu-body .ct-due { background: var(--pu-surface-2); color: var(--pu-muted); }
.pu-body .ct-prog { background: var(--pu-surface-2); } .pu-body .ct-prog i { background: var(--pu-green); } .pu-body .ct-prog i.part { background: var(--pu-brand); }
.pu-body .ct-toolbar .btn, .pu-body .ct-search .btn, .pu-body .ctpage .card-header .btn, .pu-body .hr-toolbar .btn, .pu-body .hr-search .btn, .pu-body .hrpage .card-header .btn { border: 1px solid var(--pu-border-strong); font-size: 12.5px; padding: 5px 11px; height: auto; line-height: 1.45; }
.pu-body .ct-toolbar .btn-primary, .pu-body .hr-toolbar .btn-primary, .pu-body .ctpage .card-header .btn-primary { border-color: var(--pu-brand); } .pu-body .ct-toolbar .btn-dark { border-color: var(--pu-text); }
.pu-body .ct-nav .ym { color: var(--pu-text); } .pu-body .ct-help, .pu-body .hr-help { color: var(--pu-muted); }
.pu-body .ct-sum b { color: var(--pu-text); } .pu-body .ct-sum b.red { color: var(--pu-red-text); }
.pu-body .ct-tag, .pu-body .ct-due { border: 0; } .pu-body .ct-tag { background: var(--pu-surface-2); color: var(--pu-muted); }
.pu-body .dept-list a.on { background: var(--pu-brand); color: #fff; } .pu-body .dept-list a:hover { background: var(--pu-surface-2); }
.pu-body .dept-list a.on:hover { background: var(--pu-brand); color: #fff; filter: brightness(1.08); }   /* 2026-11 선택된 부서에 마우스 올리면 글자·배경이 둘 다 흰색이 되던 문제 */
.pu-body .ctcal { font-family: var(--pu-font); --c-acc: var(--pu-brand); --c-soft: var(--pu-brand-soft); --c-line: var(--pu-border); border-radius: 16px; box-shadow: var(--pu-shadow-lg); background: var(--pu-surface); color: var(--pu-text); }
.pu-body .ctcal .mh, .pu-body .ctcal .ft button { background: var(--pu-surface); color: var(--pu-text); } .pu-body .ctcal .ft .ok { background: var(--pu-brand); color: #fff; }
.pu-body table.ct-grid thead th { background: var(--pu-text-2); } .pu-body table.ct-grid thead tr.tot th { background: var(--pu-amber-soft); color: var(--pu-amber-text); }
.pu-body .warn-chip { background: var(--pu-amber-soft); color: var(--pu-amber-text); }
.pu-body .lg span i { border-radius: 4px; }

.pu-body .ct-nav .ym { white-space: nowrap; }
@media (max-width: 575.98px) { .pu-env { font-size: 0; padding: 6px; } .pu-env i { font-size: 14px; } .pu-content { padding-left: 12px; padding-right: 12px; } }

/* ───────── 6. 등장 모션 (은은하게) ───────── */
@media (prefers-reduced-motion: no-preference) {
  .pu-content > section, .pu-content > .container-fluid, .pu-content > .row, .pu-content > .card { animation: pu-rise .45s var(--pu-ease) backwards; }   /* 모달(.modal)은 제외 — fill-mode 가 Bootstrap fade 를 막는다 */
  @keyframes pu-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media print { .pu-sidebar, .pu-topbar, .pu-footer, .pu-totop { display: none !important; } .pu-main { margin: 0 !important; } }