@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* ?€?€ CSS 蹂€??(Light Mode Premium) ?€?€ */
:root {
  --bg-base: #f8f9fa;
  /* 珥덈???洹몃젅??(蹂몃Ц 諛곌꼍) */
  --bg-surface: #ffffff;
  /* ?쒕갚??(移대뱶/?덉씠??諛곌꼍) */
  --bg-elevated: #f0f2f5;
  --border: #e9ecef;
  /* ???고븳 寃쎄퀎??*/
  --border-light: #f1f3f5;

  --text-primary: #1a2236;
  /* 吏숈? ?ㅼ씠鍮?(?ㅼ엫???띿뒪?? */
  --text-secondary: #495057;
  --text-muted: #adb5bd;

  --accent: #003366;
  /* ?덉썝?덉닠?€ Deep Navy */
  --royal-blue: #0052cc;
  /* ?꾨━誘몄뾼 Royal Blue */
  --accent-hover: #002244;
  --accent-glow: rgba(0, 82, 204, 0.12);
  --accent-sub: #eef4ff;
  /* ???고븳 釉붾（ (?섏씠?쇱씠?? */

  --success: #2dcc70;
  /* ?붿궗??洹몃┛ */
  --success-hover: #27ae60;

  --danger: #ff4757;
  --warning: #ffa502;
  --info: #2f3542;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 12px rgba(0, 51, 102, 0.05);
  --shadow-premium: 0 10px 30px rgba(0, 51, 102, 0.08);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w: 320px;
  /* 濡쒓퀬?€ ?띿뒪???섏슜???꾪빐 ?뺤옣 */
  --sidebar-mini-w: 78px;
  --header-h: 85px;
}

/* ?€?€ 珥덇린???€?€ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  background: var(--bg-base);
  /* ?붿궗???쇱씠??諛곌꼍 */
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ?€?€ ?좏떥由ы떚 ?€?€ */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

/* 湲덉븸 ?꾨Ц ?대옒??*/
.amount {
  font-family: 'JetBrains Mono', 'Pretendard', monospace;
  font-weight: 600;
  text-align: right !important;
  white-space: nowrap;
  letter-spacing: 0.8px;
  /* ?먭컙 ?뺣낫 */
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95em;
}

.fw-bold {
  font-weight: 700;
}

.hidden {
  display: none !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* ?€?€ ?ㅽ겕濡ㅻ컮 ?€?€ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-light);
}

.amount {
  /* 紐⑤뱺 湲덉븸怨??レ옄???€鍮?*/
  letter-spacing: 0.3px;
}

/* ?€?€ ?덉씠?꾩썐 ?€?€ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ?€?€ ?ъ씠?쒕컮 ?€?€ */
#sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(135deg, #001a33 0%, #003366 30%, #004d40 70%, #00695c 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  transition: width var(--transition), transform var(--transition);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#sidebar.sidebar-mini {
  width: var(--sidebar-mini-w);
}

.sidebar-header {
  height: var(--header-h);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  /* 濡쒓퀬?€ 踰꾪듉???꾩븘?섎줈 諛곗튂 */
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  overflow: visible;
  position: relative;
}

.sidebar-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  /* ?덈퉬瑜??좊룞?곸쑝濡?媛€?멸컧 */
  text-decoration: none;
  min-width: 0;
}

.sidebar-logo-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.sidebar-mini .sidebar-logo,
.sidebar-mini .sidebar-logo-icon {
  justify-content: center;
}

.full-logo {
  width: 180px;
  height: auto;
  object-fit: contain;
  transition: opacity var(--transition);
}

.mini-logo {
  display: none;
  width: 100%;
  text-align: center;
}

.mini-logo img {
  width: 38px;
  height: auto;
  margin: 0 auto;
}

.sidebar-mini .full-logo-group {
  display: none;
}

.sidebar-mini .mini-logo {
  display: block;
}

/* ?ъ씠?쒕컮 ?덈줈??濡쒓퀬 洹몃９ ?ㅽ???*/
.full-logo-group {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 媛꾧꺽????諛€李⑹떆??*/
  width: 100%;
}

.sidebar-img-logo {
  height: 38px;
  /* 42px??90% ?섏??쇰줈 議곗젙 */
  width: auto;
  object-fit: contain;
}

.sidebar-divider {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
  font-size: 15px;
  margin-top: -5px;
}

.sidebar-org-name {
  font-size: 17px;
  /* 18px?먯꽌 17px濡??뚰룺 異뺤냼?섏뿬 怨듦컙 ?뺣낫 */
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  margin-top: -5px;
  letter-spacing: -0.8px;
  /* ?먭컙???뚰룺 醫곹? ?섎┝ 諛⑹? */
}

/* ?묎린 踰꾪듉 (誘몃땲 ?좉?) - 濡쒓퀬 ?섎떒 援щ텇???꾨옒濡??대룞 */
#mini-toggle {
  position: relative;
  /* ?ㅻ뜑 ?곸뿭??踰쀬뼱???낅┰?곸쑝濡?諛곗튂 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* ?곗륫 ?뺣젹 */
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.03);
  /* ?꾩＜ ?낆? 諛곌꼍?쇰줈 援щ텇媛?遺€??*/
  border: none;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.28s;
  z-index: 1010;
}

.toggle-text {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.5px;
}

#mini-toggle i {
  font-size: 12px;
  /* ?붿궡???ш린 異붽? 異뺤냼 */
  color: #ffffff;
  opacity: 0.8;
}

#mini-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

#mini-toggle:hover .toggle-text {
  color: #ffffff;
}

#mini-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  transform: scale(1.1);
}

@keyframes slide-horizontal {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-4px);
  }
}

.sidebar-mini #mini-toggle {
  position: absolute;
  top: 95px;
  /* ?ㅻ뜑(85px) ?섎떒??諛곗튂 */
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(0, 51, 102, 0.9);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.sidebar-mini .toggle-text {
  display: none;
  /* ?묓삍???뚮뒗 ?띿뒪???④? */
}

.sidebar-mini #mini-toggle i {
  font-size: 16px;
  margin: 0;
}

/* ?€?? ?묓삍???뚮룄 ?꾩씠肄??놁뿉 ?묎쾶 ?먭굅?? ?ㅻ뜑 履쎌쑝濡??대룞 */
.sidebar-mini .sidebar-header {
  justify-content: center;
  align-items: center;
  padding: 0;
}

.sidebar-logo-text {
  line-height: 1.3;
}

.sidebar-logo-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.sidebar-logo-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.nav-group-header {
  display: flex !important;
  align-items: center !important;
  padding: 12px 24px !important;
  /* ?띿뒪?멸? ?쇱そ 踰쎈㈃?먯꽌 ?⑥뼱吏€?꾨줉 異⑸텇???⑤뵫 */
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, #001a33 0%, #003366 100%) !important;
  /* 吏숈? ?ㅼ씠鍮?洹몃씪?곗씠??*/
  margin: 25px -1rem 10px -1rem !important;
  /* ?ъ씠?쒕컮 ?대? ?⑤뵫 臾댁떆?섍퀬 100% 苑?李⑤룄濡??뚯닔 留덉쭊 */
  border-radius: 0 !important;
  /* 紐⑥꽌由??쇱슫???쒓굅 */
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  /* ?곷떒 ?뉗? 援щ텇??*/
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* ?섎떒 ?뉗? 援щ텇??*/
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  width: auto !important;
}

/* ?뱀젙 洹몃９ ?됱긽 媛뺤“ (湲곗〈 濡쒖쭅 ?좎??섎릺 Full-width ?곸슜) */
.nav-group-green {
  background: linear-gradient(90deg, #0a2e1f 0%, #145c3d 100%) !important;
}

.nav-group-blue {
  background: linear-gradient(90deg, #001a33 0%, #003366 100%) !important;
}

/* ?ㅼ씠鍮?怨꾩뿴 諛곌꼍 ?ㅻ쾭?쇱씠???쒓굅 */
.nav-group-blue,
.nav-group-green {
  background: rgba(255, 255, 255, 0.18) !important;
}

@keyframes navGroupWave {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}



.sidebar-mini .nav-group-header {
  padding: 12px 0;
  text-align: center;
}

.sidebar-mini .nav-group-header span {
  display: none;
}

.sidebar-mini .nav-group-header::after {
  content: '...';
  color: var(--text-muted);
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 6px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  font-weight: 500;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ?뚮텇瑜?遺덈┸(Bullet) */
.nav-item::before {
  content: '';
  position: absolute;
  left: 22px;
  width: 4px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.2s;
}

.nav-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.15) 100%);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.7) 0%, rgba(190, 18, 60, 0.8) 100%) !important;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.nav-item::before {
  display: none;
  /* ?꾪듃 ?쒖떆 ?쒓굅 */
}

.sidebar-mini .nav-item {
  padding: 12px 0;
  justify-content: center;
}

.sidebar-mini .nav-item::before {
  display: none;
}

.sidebar-mini .nav-item.active {
  box-shadow: none;
}

/* ?€?€ ?섏엯吏€異?寃곗쓽???꾩슜 釉붾（ ?뚮쭏 (?대┃ ?? ?€?€ */
.nav-item[data-view="voucher"] {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(29, 78, 216, 0.35) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}

.nav-item[data-view="voucher"]:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4) 0%, rgba(29, 78, 216, 0.5) 100%);
}

/* ?섏엯吏€異?寃곗쓽??(?대┃ ??- ?쒖꽦 ?곹깭) -> ?ㅻⅨ 硫붾돱?€ ?숈씪?섍쾶 Red/Burgundy */
.nav-item[data-view="voucher"].active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.7) 0%, rgba(190, 18, 60, 0.8) 100%) !important;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.nav-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.8;
  transition: all 0.2s;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  color: #ffffff;
  opacity: 1;
}

.nav-label {
  font-size: 15.5px;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}

.sidebar-mini .nav-label {
  display: none;
}

.nav-badge {
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  transition: all 0.2s;
}

.sidebar-mini .nav-badge {
  display: none;
  /* ?꾩씠肄섏쓣 媛€由щ?濡?誘몃땲 紐⑤뱶?먯꽌???④? */
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.sidebar-mini .sidebar-footer {
  padding: 16px 0;
  display: flex;
  justify-content: center;
}

/* ?꾨줈??移대뱶 (Premium Light) */
.user-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
  margin-top: auto;
}

.sidebar-mini .user-profile-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  flex-direction: column;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--accent);
  /* Deep Navy 諛곌꼍 */
  color: #fff;
  border-radius: 50%;
  /* ?먰삎 ?꾨컮?€ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.15);
}

.user-info {
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s;
}

.sidebar-mini .user-info {
  display: none;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.logout-mini-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
}

.logout-mini-btn:hover {
  background: rgba(225, 29, 72, 0.1);
  color: var(--danger);
}

.sidebar-mini .logout-mini-btn {
  margin-top: 4px;
}

/* ?€?€ ?ㅽ겕濡??좊룄 ?꾩씠肄??€?€ */
.sidebar-scroll-indicator {
  position: absolute;
  bottom: 110px;
  /* ?ъ슜??愿€由??뱀뀡 ?꾩そ?쇰줈 ?꾩튂 議곗젙 */
  right: 15px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: bounce-vertical 2s infinite;
  opacity: 0.7;
}

.sidebar-mini .sidebar-scroll-indicator {
  right: 50%;
  transform: translateX(50%);
}

@keyframes bounce-vertical {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }

  60% {
    transform: translateY(-4px);
  }
}

/* ?€?€ 硫붿씤 肄섑뀗痢??€?€ */
.main-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
}

.sidebar-mini~.main-area {
  margin-left: var(--sidebar-mini-w);
}

/* index.html 援ъ“??aside?€ .main-area媛€ ?뺤젣??*/
#sidebar.sidebar-mini+.main-area {
  margin-left: var(--sidebar-mini-w);
}

/* ?€?€ ?ㅻ뜑 ?€?€ */
#app-header {
  height: var(--header-h);
  background: linear-gradient(135deg, #001a33 0%, #003366 30%, #004d40 70%, #00695c 100%);
  display: flex;
  align-items: center;
  /* ?섏쭅 以묒븰 ?뺣젹 */
  justify-content: space-between;
  padding: 0 32px;
  /* ?곷떒 ?⑤뵫 ?쒓굅?섍퀬 以묒븰 ?뺣젹 ?쒖슜 */
  border-bottom: none;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
  z-index: 100;
  position: sticky;
  top: 0;
}

/* 臾쇨껐臾대뒳 而⑦뀒?대꼫 */
.header-waves-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.header-waves {
  position: relative;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 100px;
}

/* 臾쇨껐 ?좊땲硫붿씠??遺€紐?*/
.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

.header-left,
.header-right {
  position: relative;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  /* ?섏쭅 以묒븰 ?뺣젹 */
  gap: 20px;
}

.header-title-group {
  display: flex;
  align-items: center;
  /* ?섏쭅 以묒븰 ?뺣젹 */
  gap: 20px;
}

.header-sh-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
}

.header-main-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* ?섏쭅 以묒븰 ?뺣젹 */
  gap: 20px;
  font-weight: 800;
  position: relative;
  z-index: 10;
  /* 臾쇨껐 ?꾨줈 諛곗튂 */
}

.header-main-title .title-ko {
  font-size: 20px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-top: -4px;
  /* 1mm ?곹뼢 議곗젙 */
}

.title-divider {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
  font-size: 16px;
  margin-top: -2px;
  /* ?띿뒪?몄? 蹂댁“瑜?留욎떠 ?곹뼢 議곗젙 */
}

.header-main-title .title-en {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: inline-block !important;
  margin-top: -4px;
  /* 1mm ?곹뼢 議곗젙 */
}

.header-right {
  display: flex;
  align-items: center;
  /* ?섏쭅 以묒븰 ?뺣젹 */
  gap: 12px;
}

#sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
  padding: 4px;
}

.header-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-right: 20px;
}

/* ?€?€ 肄섑뀗痢??곸뿭 ?€?€ */
#app-content {
  flex: 1;
  padding: 24px;
  transition: opacity 0.15s ease;
}

#app-content.fade-out {
  opacity: 0;
}

/* ?€?€ ?섏씠吏€ ?ㅻ뜑 ?€?€ */
/* 蹂닿퀬?????ㅻ뜑 媛쒖꽑 */
.print-container {
  padding: 10px;
  margin-top: 10px;
}

@media print {
  .print-container {
    margin-top: 0;
    padding-top: 0;
  }
}

.report-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* center濡?蹂€寃쏀븯???섏쭅 ?뺣젹 媛쒖꽑 */
  margin-bottom: 30px;
  border-bottom: 2px solid #1a2236;
  /* --text-main ?€??吏곸젒 ?됱긽 吏€???먮뒗 蹂€???뺤씤 */
  padding-bottom: 20px;
}

.report-logo-section {
  width: 220px;
  /* 怨좎젙 ?덈퉬 ?뺣낫 */
  flex-shrink: 0;
}

.report-university-logo {
  height: 45px;
  /* ?쎄컙 異뺤냼 */
  width: auto;
  object-fit: contain;
  display: block;
}

.report-title-section {
  flex: 1;
  text-align: center;
  min-width: 0;
  /* flex ?먯떇??理쒖냼 ?덈퉬 ?ㅻ쾭?쇱씠??*/
}

.report-main-title {
  font-size: 28px;
  /* ?쎄컙 異뺤냼?섏뿬 寃뱀묠 諛⑹? */
  font-weight: 800;
  letter-spacing: 10px;
  margin: 0 0 8px 0;
  color: #1a2236;
  white-space: nowrap;
}

.report-period {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.report-empty-space {
  width: 220px;
  /* 濡쒓퀬 ?뱀뀡怨??€移?*/
  flex-shrink: 0;
}

.report-footer-school {
  margin-top: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: #1a2236;
}

@media print {
  .report-form-header {
    border-bottom-color: #000;
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* ?꾨옒 援щ텇??湲곗??쇰줈 ?뺣젹 */
  margin-bottom: 30px;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  position: relative;
}

/* ?섏씠吏€ ?ㅻ뜑 ?섎떒 ?⑥껌??援щ텇??*/
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* 援듦퀬 ?좊챸??援щ텇??*/
  background-color: #003366;
  /* ?⑥껌??*/
  border-radius: 2px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #003366;
  /* ?⑥껌?됱쑝濡?蹂€寃?*/
  margin-bottom: 6px;
}

.page-subtitle {
  font-size: 15px;
  /* ?ш린 ?ㅼ? (湲곗〈蹂대떎 ????蹂댁씠寃? */
  color: #666;
  /* 媛€?낆꽦 ?꾪빐 ?쎄컙 吏꾪븯寃?*/
  font-weight: 500;
}

/* ?€?€ ?ъ슜??愿€由?(User Management) ?뚯씠釉??€?€ */
.user-table {
  table-layout: fixed;
  /* 而щ읆 ?덈퉬 怨좎젙 */
  width: 100%;
  margin-bottom: 0;
}

.user-table thead th,
.user-table tbody td {
  vertical-align: middle;
}

.user-table tbody td {
  text-align: center !important;
  /* 紐⑤뱺 而щ읆 以묒븰 ?뺣젹 */
  font-size: 14.5px !important;
  /* 湲€???ш린 ?듭씪 */
  font-family: 'Inter', 'Noto Sans KR', sans-serif !important;
  /* 湲€瑗??듭씪 */
  font-weight: 500 !important;
  /* 援듦린 ?듭씪 */
  color: var(--text-primary) !important;
}

/* ?ㅻ뜑???꾩뿭 ?ㅽ???color:#fff, gradient)???곕Ⅴ???뺣젹留?紐낆떆 */
.user-table thead th {
  text-align: center !important;
  font-weight: 700 !important;
}

/* 而щ읆蹂??덈퉬 誘몄꽭 議곗젙 (鍮꾩쑉??留욎떠 ?좊떦) */
.user-table th:nth-child(1),
.user-table td:nth-child(1) {
  width: 15%;
  text-align: left !important;
  padding-left: 24px !important;
}

/* ?대쫫?€ ?쇱そ ?뺣젹 ?좎? */
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
  width: 10%;
}

/* 吏곴툒 */
.user-table th:nth-child(3),
.user-table td:nth-child(3) {
  width: 12%;
}

/* ?꾩씠??*/
.user-table th:nth-child(4),
.user-table td:nth-child(4) {
  width: 18%;
}

/* ?뚯냽/遺€??*/
.user-table th:nth-child(5),
.user-table td:nth-child(5) {
  width: 12%;
}

/* 沅뚰븳 */
.user-table th:nth-child(6),
.user-table td:nth-child(6) {
  width: 10%;
}

/* ?곹깭 */
.user-table th:nth-child(7),
.user-table td:nth-child(7) {
  width: 13%;
}

/* ?앹꽦??*/
.user-table th:nth-child(8),
.user-table td:nth-child(8) {
  width: 10%;
}

/* 愿€由?*/

.user-table tbody tr {
  height: 60px;
  /* ???믪씠 洹좎씪??*/
}

.user-table .badge {
  min-width: 70px;
  /* 諭껋? ?덈퉬 理쒖냼?뷀븯???뺣젹 ?좎? */
  justify-content: center;
  font-size: 12px;
}

/* .page-subtitle 湲곗〈 ?뺤쓽 ?쒓굅 (?곷떒 ?듯빀) */

/* ?€?€ 移대뱶 (Light Premium) ?€?€ */
.card {
  background: #ffffff;
  /* ?쒕갚??諛곌꼍 */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  transition: all 0.3s;
}

.card:hover {
  box-shadow: var(--shadow-premium);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.card-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* ?€?€ KPI 移대뱶 ?€?€ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity var(--transition);
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.14);
}

.kpi-card:hover::before {
  opacity: 1;
}

.kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.kpi-blue {
  background: var(--grad-blue);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.kpi-red {
  background: var(--grad-red);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.22);
}

.kpi-green {
  background: var(--grad-green);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.22);
}

.kpi-purple {
  background: var(--grad-purple);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.22);
}

.kpi-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.kpi-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ?€?€ ?듦퀎 移대뱶 ?€?€ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: linear-gradient(145deg, #f0f4ff 0%, #e6eeff 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value.accent {
  color: var(--accent);
}

/* ?€?€ 李⑦듃 ?€?€ */
.charts-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  margin-bottom: 20px;
}



.chart-container {
  height: 260px;
  position: relative;
}

/* ?€?€ ?뚯씠釉??€?€ */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  color: var(--text-secondary);
}

thead th {
  background: none;
  /* ??諛곌꼍?쇰줈 ?듯빀 */
  color: #ffffff;
  font-weight: 700;
  text-align: inherit;
  /* 媛€?대뜲 ?뺣젹 */
  padding: 14px 16px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  letter-spacing: -0.2px;
}

thead tr {
  /* ?곷떒諛붿? ?숈씪??洹몃씪?곗씠??+ 80% ?щ챸??(??吏꾪븯寃? */
  background: linear-gradient(90deg,
      rgba(0, 31, 63, 0.8) 0%,
      rgba(0, 51, 102, 0.8) 25%,
      rgba(21, 101, 192, 0.8) 50%,
      rgba(27, 94, 32, 0.8) 100%) !important;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  transition: background 0.15s;
  color: #1a1a1a;
  /* 湲€?먯깋 ??吏꾪븯寃??섏젙 */
}

/* ?λ? ?섏씠吏€ ?꾩슜 ?뚯씠釉?媛€?대뜲 ?뺣젹 */
.ledger-table tbody td {
  text-align: center !important;
}

.ledger-table tbody td.text-right,
.ledger-table tbody td[data-label="湲덉븸"] {
  text-align: right !important;
}

/* ?곗씠??由ъ뒪??媛먯꽦???꾪빐 ?몃줈???쒓굅 */
tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:not(.total-row):hover td {
  background: #fcfdfe;
  /* 留덉슦???ㅻ쾭 ???꾩＜ 誘몄꽭??蹂€??*/
}

.indent-level-1 {
  padding-left: 32px !important;
  color: var(--text-secondary);
}

.indent-level-2 {
  padding-left: 48px !important;
  color: var(--text-muted);
  font-size: 0.9em;
}

.row-section {
  background-color: #f8fafc;
  font-weight: 700;
}

.code-col {
  color: var(--text-muted);
  font-family: inherit;
}

/* ?€?€ ?뚯씠釉??붿빟 諛??⑷퀎 ?€?€ */
.summary-bar {
  display: flex;
  justify-content: space-around;
  padding: 14px 20px;
  background: rgba(232, 245, 233, 0.9);
  border-radius: var(--radius);
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

/* 합계 행 스타일 (배경 제거 및 가독성 강조) */
.total-row {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

.total-row td,
.total-row th {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 16px !important;
  font-size: 15px !important;
  border-top: 2px solid var(--accent) !important;
  /* 상단 경계선 강조 */
  border-bottom: 2px solid var(--accent) !important;
  /* 하단 경계선도 추가하여 구분감 확보 */
}

/* 합계 행 내 특수 텍스트 색상 원복 */
.total-row .text-success {
  color: var(--success) !important;
}

.total-row .text-danger {
  color: var(--danger) !important;
}

.total-row .text-primary {
  color: var(--text-primary) !important;
}

.total-row .amount {
  color: var(--text-primary) !important;
  font-weight: 800;
}


.empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 40px !important;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ?€?€ ?꾪꽣 諛??€?€ */
.filter-bar {
  margin-bottom: 16px;
}

.filter-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-row .form-group {
  margin-bottom: 0;
}

/* ?€?€ 吏꾪뻾 諛??€?€ */
.progress-bar-wrap {
  position: relative;
  background: rgba(0, 75, 160, 0.05);
  border-radius: 99px;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 75, 160, 0.08);
}

.progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: shine-progress 2s infinite;
}

@keyframes shine-progress {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-bar.progress-danger {
  background: linear-gradient(90deg, #e11d48, #fb7185);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
}

.progress-bar.progress-warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.progress-bar.progress-success {
  background: linear-gradient(90deg, #9bc31e, #b8e23b);
  box-shadow: 0 2px 8px rgba(155, 195, 30, 0.3);
}

.progress-text {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ?€?€ Alert Bar ?€?€ */
.alert-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  background: var(--danger);
  color: white;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* ?€?€ 諭껋? ?€?€ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.badge-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.badge-warning {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
}

.badge-info {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
}

.badge-neutral {
  background: #fff !important;
  color: #1a2236 !important;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  padding: 3px 10px;
}

.badge-category {
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent);
  font-size: 13px;
}

.badge-accent {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  font-size: 13px;
  padding: 3px 10px;
}

/* ?€?€ 踰꾪듉 ?€?€ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--royal-blue);
  /* Royal Blue ?곸슜 */
  color: white;
  box-shadow:
    0 4px 12px rgba(0, 82, 204, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 82, 204, 0.3);
  filter: brightness(0.85);
  /* 留덉슦???щ졇?????댁쭩 ?대몢?뚯쭚 */
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 82, 204, 0.2);
}

.btn-secondary {
  background: white;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-ghost {
  background: rgba(148, 163, 184, 0.05);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}

.btn-round {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.btn-outline:hover {
  background: var(--bg-base);
  border-color: var(--accent);
  color: var(--accent);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-file {
  cursor: pointer;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
  transition: background var(--transition);
}

.btn-icon:hover {
  background: #fff !important;
  color: #1a2236 !important;
}

.action-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* ?€?€ ???€?€ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 200px;
}

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.required {
  color: var(--danger);
}

.form-control {
  background: #fff !important;
  color: #1a2236 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control-sm {
  /* inherits form-control base styles */
  background: #fff !important;
  color: #1a2236 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  transition: border-color var(--transition);
}

.form-control-sm:focus {
  outline: none;
  border-color: var(--accent);
}

select.form-control,
select.form-control-sm {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M7 7l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 28px;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.search-input {
  background: #fff !important;
  color: #1a2236 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  width: 280px;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ?€?€ ?곕룄 ?좏깮湲??€?€ */
.year-select {
  background: white;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M7 7l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
  min-width: 130px;
}

.year-select:hover {
  background-color: var(--accent-glow);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.year-select:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ?€?€ 移댄뀒怨좊━ 泥댄겕諛뺤뒪 ?€?€ */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-chip input {
  display: none;
}

.category-chip span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.category-chip input:checked+span {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.category-chip span:hover {
  border-color: var(--border-light);
  color: var(--text-primary);
}

/* ?€?€ 紐⑤떖 ?€?€ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalIn 0.2s ease;
}

.modal.large {
  max-width: 720px;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ?€?€ ?쒕∼議??€?€ */
.upload-area-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.drop-zone-card {
  border: 2px dashed var(--border);
  transition: all var(--transition);
  cursor: pointer;
  text-align: center;
}

.drop-zone-card:hover,
.drop-zone-card.drag-over {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
}

.drop-zone-inner {
  padding: 40px 20px;
}

.drop-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.drop-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ?€?€ ?€???ㅼ젙 紐⑸줉 ?€?€ */
.config-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #fff !important;
  color: #1a2236 !important;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ?€?€ ?붿빟 諛??€?€ */
.summary-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0;
}

.summary-item {
  font-size: 13px;
  color: var(--text-secondary);
}

.summary-item strong {
  color: var(--text-primary);
}

.summary-item.text-success strong {
  color: var(--success);
}

.summary-item.text-danger strong {
  color: var(--danger);
}

/* ?€?€ ?섏씠吏€?ㅼ씠???€?€ */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.page-info {
  font-size: 13px;
  color: var(--text-muted);
}

/* ?€?€ 吏€異쒓껐?섏꽌 ?덉씠?꾩썐 ?€?€ */
.voucher-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.voucher-left .card,
.voucher-right .card {
  margin-bottom: 0;
}

.voucher-preview-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.voucher-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.voucher-empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* ?€?€ 吏€異쒓껐?섏꽌 蹂몃Ц ?ㅽ????€?€ */
.voucher-doc {
  background: white;
  color: #1a1a1a;
  font-family: 'Noto Sans KR', serif;
  padding: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 11px;
}

.voucher-header-section {
  text-align: center;
  margin-bottom: 16px;
}

.voucher-school-name {
  font-size: 11px;
  font-weight: 700;
  color: #333;
}

.voucher-dept {
  font-size: 9px;
  color: #666;
}

.voucher-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 6px;
  margin: 10px 0 8px;
  padding: 8px 0;
  border-top: 2.5px solid #1a1a1a;
  border-bottom: 2.5px solid #1a1a1a;
  color: #1a1a1a;
}

.voucher-meta {
  display: flex;
  justify-content: center;
  gap: 32px;
  font-size: 10px;
  color: #333;
}

.meta-label {
  font-weight: 600;
  margin-right: 6px;
}

.voucher-approval-grid {
  display: flex;
  border: 1px solid #999;
  margin: 12px 0;
  border-radius: 4px;
  overflow: hidden;
}

.approval-cell {
  flex: 1;
  border-right: 1px solid #999;
  text-align: center;
}

.approval-cell:last-child {
  border-right: none;
}

.approval-label {
  background: #f0f0f0;
  padding: 3px;
  font-size: 10px;
  font-weight: 700;
  border-bottom: 1px solid #999;
  color: #333;
}

.approval-sign {
  height: 44px;
}

.voucher-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 10px;
}

.voucher-info-table th,
.voucher-info-table td {
  border: 1px solid #999;
  padding: 6px 10px;
}

.voucher-info-table th {
  background: #f5f5f5;
  font-weight: 700;
  width: 18%;
  text-align: center;
  color: #333;
}

.voucher-info-table td {
  color: #1a1a1a;
}

.amount-cell {
  padding: 8px 12px;
}

.korean-amount {
  font-weight: 800;
  font-size: 12px;
  color: #1a1a1a;
}

.num-amount {
  font-size: 10px;
  color: #555;
  margin-left: 10px;
}

.voucher-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #333;
  margin: 12px 0 6px;
}

.voucher-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}

.voucher-detail-table th,
.voucher-detail-table td {
  border: 1px solid #999;
  padding: 5px 8px;
  color: #1a1a1a;
}

.voucher-detail-table th {
  background: #f5f5f5;
  font-weight: 700;
  text-align: center;
  color: #333;
}

.voucher-detail-table .text-right {
  text-align: right;
}

.voucher-detail-table .text-center {
  text-align: center;
}


.voucher-note-section {
  margin-top: 12px;
  font-size: 10px;
  color: #333;
}

.voucher-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 10px;
  color: #333;
}

.voucher-date {
  font-size: 13px;
  margin: 8px 0 14px;
  font-weight: 600;
}

.voucher-sign-section {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 8px 0 16px;
}

.sign-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.sign-line {
  width: 100px;
  border-bottom: 1px solid #333;
  display: inline-block;
  height: 16px;
}

.voucher-school-footer {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 8px;
}

/* ?€?€ 怨듯넻 ?€?€ */
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-sm {
  font-size: 12px;
}

.text-muted {
  color: var(--text-muted);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.hint-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state p {
  margin-bottom: 16px;
}

/* ?€?€ ?좎뒪???€?€ */
#toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001; /* 다른 모달 위에 표시되도록 높임 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none; /* 클릭 방해 금지 */
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff !important;
  color: #1a2236 !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: var(--shadow);
  transform: translateX(120%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 240px;
  max-width: 360px;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  border-left: 3px solid var(--success);
}

.toast-error {
  border-left: 3px solid var(--danger);
}

.toast-info {
  border-left: 3px solid var(--info);
}

.toast-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.toast-success .toast-icon {
  color: var(--success);
}

.toast-error .toast-icon {
  color: var(--danger);
}

.toast-info .toast-icon {
  color: var(--info);
}

/* ?€?€ ?몄뇙 ?④? ?€?€ */
@media print {

  #sidebar,
  #app-header,
  .voucher-preview-actions,
  .page-header {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   로그인 화면 - 분할 카드 디자인 (Premium Redesign)
═══════════════════════════════════════════ */
#login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #001a33 0%, #003366 40%, #004d40 70%, #00695c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  overflow: hidden;
}

/* 배경 장식 원형 */
#login-screen::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,105,92,0.25) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
}
#login-screen::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,51,102,0.3) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  pointer-events: none;
}

@keyframes float-anim {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity:0.5; }
  50%       { transform: translateY(-18px) rotate(180deg); opacity:0.9; }
}

.login-waves { display: none; }

/* ── 컨테이너 ── */
.login-container {
  width: 100%;
  max-width: 480px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* ── 메인 카드 ── */
.login-card {
  background: transparent;
  border: none;
  border-radius: 28px;
  padding: 0;
  width: 100%;
  box-shadow: 0 40px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── 카드 상단: 장식 배너 영역 ── */
.login-card-top {
  background: linear-gradient(160deg, #001f3f 0%, #003366 45%, #00574b 80%, #006d5b 100%);
  padding: 42px 36px 68px 36px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.login-card-top::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  top: -80px; right: -70px;
}
.login-card-top::after {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  bottom: 30px; left: -50px;
}
.login-deco-circle-1 {
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08);
  top: 14px; left: 18px;
  animation: float-anim 6s ease-in-out infinite;
}
.login-deco-circle-2 {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  top: 28px; right: 36px;
  animation: float-anim 4s ease-in-out infinite reverse;
}
.login-deco-circle-3 {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  bottom: 55px; right: 28px;
  animation: float-anim 5s ease-in-out infinite 1s;
}

/* ── 물결 SVG 분리선: 애니메이션 효과 추가 ── */
.login-wave-divider {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; overflow: hidden;
  line-height: 0;
  z-index: 5;
}
.login-animated-waves {
  position: relative;
  width: 100%;
  height: 48px; /* 물결 높이 조정 */
  min-height: 40px;
  max-height: 80px;
}
.moving-waves > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.moving-waves > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.moving-waves > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.moving-waves > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.moving-waves > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

/* ── 카드 하단: 폼 영역 ── */
.login-card-bottom {
  background: #ffffff;
  padding: 32px 36px 36px 36px;
  border-radius: 0 0 28px 28px;
}

/* ── 로고: 중앙 배치 ── */
.login-logo {
  position: relative;
  top: auto; left: auto;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}
.login-logo img {
  max-width: 180px;
  height: auto;
  object-fit: contain;
}
.login-logo-fallback {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.2);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px; color: white;
  border: 2px solid rgba(255,255,255,0.3);
}

/* ── 상단 타이틀 ── */
.login-header-animate {
  animation: login-fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
  background: none; border: none; border-radius: 0;
  padding: 0; margin: 0;
  backdrop-filter: none; box-shadow: none;
  position: relative; overflow: visible;
}
.login-header-animate::after { display: none; }

.login-title {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 2px;
  line-height: 1.3;
  text-transform: none;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.login-title span {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  display: block;
  margin-top: 7px;
  letter-spacing: 0.5px;
  text-transform: none;
}

@keyframes login-fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── 폼 ── */
.login-form {
  text-align: left;
  animation: login-fade-up 0.7s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.login-form .form-group { margin-bottom: 14px; }
.login-form label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* ── 입력 필드 ── */
.login-input {
  width: 100%;
  padding: 14px 46px 14px 46px;
  font-size: 15px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  color: #1a2236;
  transition: all 0.2s;
  font-family: 'Pretendard Variable','Pretendard',sans-serif;
}
.login-input::placeholder { color: #94a3b8; font-size: 14px; }
.login-input:focus {
  outline: none;
  border-color: #003366;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,51,102,0.08);
}

/* 입력 래퍼 + 아이콘 */
.login-input-wrapper {
  position: relative;
  display: block;
}
.login-input-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8; font-size: 15px;
  pointer-events: none;
  transition: color 0.2s;
  z-index: 1;
}
.login-input-wrapper:focus-within .login-input-icon { color: #003366; }

/* ── 비밀번호 토글 ── */
.password-group { position: relative; }
.password-toggle {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  color: #94a3b8; cursor: pointer;
  font-size: 16px;
  transition: color 0.2s; z-index: 2;
}
.password-toggle:hover { color: #003366; }

/* ── 보안 뱃지 ── */
.security-info {
  margin-top: 6px; margin-bottom: 18px;
  display: flex; justify-content: flex-start;
}
.security-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,105,92,0.08);
  color: #006d5b;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid rgba(0,105,92,0.2);
}
.security-badge i { font-size: 10px; }

/* ── 로그인 버튼 ── */
.login-btn {
  width: 100%; padding: 15px;
  font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, #001f3f 0%, #003366 50%, #004d40 100%);
  color: white; border: none;
  border-radius: 12px; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: 3px; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,51,102,0.35);
  position: relative; overflow: hidden;
  margin-top: 4px;
}
.login-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s;
}
.login-btn:hover::before { left: 100%; }
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,51,102,0.5);
  filter: brightness(1.1);
}
.login-btn:active { transform: scale(0.97); }
.login-btn::after { display: none; }

/* ── 에러 메시지 ── */
.login-error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #dc2626;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
  animation: login-fade-up 0.3s ease;
}
.login-error.show { display: block; }

/* ── 하단 안내 ── */
.login-footer {
  margin-top: 20px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}
@media (max-width: 768px) {
  #login-screen {
    justify-content: center;
    padding: 20px;
  }

  .login-card {
    padding: 40px 30px;
  }
}

/* ?€?€ ?ㅻ뜑 ?ъ슜???곸뿭 ?€?€ */
.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: #fff !important;
  color: #1a2236 !important;
  border: 1px solid var(--border);
}

.header-user-name {
  font-weight: 600;
  color: var(--text-primary);
}

.header-user-role {
  font-size: 10px;
  color: white;
  background: var(--accent);
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 600;
}

.btn-logout {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}

.btn-logout:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ?€?€ ?ъ슜??愿€由?異붽? ?ㅽ????€?€ */
.info-card {
  background: rgba(37, 99, 235, 0.03);
  border-color: rgba(37, 99, 235, 0.15);
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ?€?€ ?쇰뵒??踰꾪듉 ?€?€ */
.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: normal;
}

.radio-label input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

/* Voucher Budget Info */
.voucher-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.voucher-budget-info {
  text-align: right;
}

.voucher-budget-table {
  border-collapse: collapse;
  font-size: 11px;
  margin-left: auto;
}

.voucher-budget-table th {
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 10px;
  border: 1px solid var(--border);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.voucher-budget-table td {
  padding: 4px 10px;
  border: 1px solid var(--border);
  min-width: 120px;
  font-weight: 600;
}

.form-control-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 13px;
}

/* Sidebar Group Header (Premium Refinement) */
.nav-group-header {
  list-style: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  /* ?띿뒪???곗깋 */
  padding: 12px 16px;
  margin: 15px 10px 5px;
  /* Deep Navy 洹몃씪?곗씠??臾쇨껐 諛곌꼍 */
  background: linear-gradient(135deg, #003366 0%, #004ba0 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-31.8z' fill='white' opacity='0.2'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: contain;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-group-header:first-child {
  border-top: none;
  padding-top: 10px;
  margin-top: 0;
}

/* ?€?€ 諛섏쓳??紐⑤컮??理쒖쟻???€?€ */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .header-date {
    display: none !important;
  }

  .header-main-title .title-ko {
    font-size: 18px;
  }

  .header-main-title .title-en {
    font-size: 12px;
  }

  .header-main-title {
    max-width: 60%;
  }
}

@media (max-width: 900px) {
  .header-user {
    display: none !important;
  }

  .header-main-title .title-ko {
    font-size: 16px;
  }

  .header-main-title .title-en {
    font-size: 11px;
  }

  .header-main-title {
    max-width: 75%;
  }
}

@media (max-width: 768px) {

  /* ?쒕ぉ ?고듃 10% 異뺤냼 */
  .page-title,
  .report-main-title,
  .card-title {
    font-size: 0.9em !important;
  }

  html {
    font-size: 14px;
  }

  #sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #001a33 0%, #003366 30%, #004d40 70%, #00695c 100%);
  }

  #sidebar.show,
  #sidebar.open {
    transform: translateX(0);
  }

  .main-area {
    margin-left: 0 !important;
  }

  #app-header {
    height: 70px;
    padding: 0 16px;
  }

  .sidebar-header {
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 紐⑤컮???ъ씠?쒕컮 濡쒓퀬 理쒖쟻??(?섎┝ 諛⑹?) */
  .sidebar-header .full-logo-group {
    gap: 6px;
  }

  .sidebar-header .sidebar-img-logo {
    height: 30px;
    /* 湲곗〈 38px?먯꽌 異뺤냼 */
  }

  .sidebar-header .sidebar-org-name {
    font-size: 15px;
    /* 湲곗〈 18px?먯꽌 異뺤냼 */
    letter-spacing: -0.5px;
  }

  .sidebar-header .sidebar-divider {
    font-size: 13px;
    margin: 0 2px;
  }

  .header-main-title .title-ko {
    font-size: 15px;
  }

  .header-main-title .title-en {
    font-size: 10px;
  }

  #sidebar-toggle {
    display: flex !important;
    background: none;
    border: none;
    font-size: 24px;
    /* ???ш쾶 */
    color: #ffffff !important;
    /* ?좊챸???곗깋?쇰줈 蹂€寃?(湲곗〈 ?⑥껌?됱뿉??媛€?낆꽦 ?뺣낫) */
    padding: 4px;
    margin-right: 12px;
    opacity: 1 !important;
    /* ?щ챸???쒓굅 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* ?좊챸??媛뺤“ */
  }

  /* ?뚯씠釉???移대뱶 蹂€??*/
  .table-wrapper {
    border: none;
    overflow: visible;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table th,
  .data-table td,
  .data-table tr {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  }

  .data-table td {
    border: none !important;
    padding: 8px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right !important;
    font-size: 14px;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 11px;
    text-align: left;
    flex: 1;
  }

  .data-table td:last-child {
    border-top: 1px solid var(--border) !important;
    margin-top: 8px;
    padding-top: 12px !important;
    justify-content: center;
  }

  .indent-level-1,
  .indent-level-2 {
    padding-left: 0 !important;
  }
}

/* ?€?€ ?щТ 蹂닿퀬???쒖뒪???ㅽ???(?꾨㈃ 媛쒗렪) ?€?€ */
.report-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 2px;
}

.tab-item {
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.tab-item:hover {
  color: var(--accent);
}

.tab-item.active {
  color: var(--accent);
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}

.report-card {
  padding: 40px 60px;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e7ef;
  position: relative;
}

/* 蹂닿퀬?????ㅻ뜑 諛?濡쒓퀬 */
.report-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #333;
  padding-bottom: 20px;
}

.report-logo-section {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.report-university-logo {
  height: 30px;
  /* 湲곗〈 38px?먯꽌 80% ?섏??쇰줈 ?ㅼ떆 異뺤냼 */
  width: auto;
  object-fit: contain;
}

.report-title-section {
  flex: 2;
  text-align: center;
}

.report-main-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 12px;
  margin: 0 0 8px 0;
  color: #000;
}

.report-period {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.report-empty-space {
  flex: 1;
}

.report-info-bar {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.report-footer-school {
  margin-top: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 5px;
  color: #000;
}

/* 蹂닿퀬???곷떒 濡쒓퀬 諛?湲곌?紐?*/
.report-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.report-logo-placeholder {
  width: 180px;
  height: 45px;
  border: 2px dashed #ddd;
  /* 濡쒓퀬媛€ ?놁쓣 ???쒖떆 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
  position: relative;
}

/* 寃곗옱?€ ?ㅽ???*/
.report-approval-box {
  border: 1px solid #333;
  border-collapse: collapse;
}

.report-approval-box td {
  border: 1px solid #333;
  padding: 0;
  width: 80px;
  text-align: center;
}

.approval-label {
  background: #f4f7fb;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-sign {
  height: 60px;
}

.report-header {
  text-align: center;
  margin-bottom: 30px;
}

.report-header h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 12px;
  margin-bottom: 15px;
  background: #f0f7ff;
  padding: 10px 0;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.report-period-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  color: #333;
}

/* ?꾨Ц ?뚯씠釉??ㅽ???*/
.report-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.report-table th,
.report-table td {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  height: 42px;
}

.report-table th {
  background: #f0f4f8;
  /* ?꾩＜ ?고븳 ?ㅼ씠鍮?諛곌꼍 */
  font-weight: 800;
  /* 吏숈? 湲€??*/
  color: var(--accent);
  /* Deep Navy */
}

.report-table .row-group {
  background: #f1f5f9;
  font-weight: 700;
}

/* 怨꾩젙怨쇰ぉ-湲덉븸 媛??먯꽑(Dotted line) 援ы쁽???꾪븳 湲곕쾿 */
.dotted-cell {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.item-name {
  background: #fff;
  padding-right: 8px;
  z-index: 2;
  position: relative;
}

.row-group .item-name,
.row-final .item-name,
.row-separator .item-name {
  background: transparent;
}

.item-dots {
  flex: 1;
  border-bottom: 1px dotted #cbd5e1;
  margin: 0 4px;
  position: relative;
  top: -4px;
}

/* ?섏튂 媛뺤“ */
.report-table .amount-cell {
  text-align: right;
  font-weight: 500;
}

.amount-minus {
  color: var(--danger);
  font-weight: 600;
}

.row-total {
  background: #f8fafc;
  font-weight: 700;
}

.row-final {
  background: #f0f7ff !important;
  font-weight: 800;
  border-top: 2px solid #333 !important;
}

.row-separator {
  background: #fffff0 !important;
  /* Ivory */
  font-weight: 800;
}

/* ?몄뇙 理쒖쟻??*/
/* Removed redundant media print block to prevent conflicts */

/* ?€?€ 蹂닿퀬??(A4 怨좎젙 ?ш린) ?€?€ */
.print-container {
  width: 277mm;
  /* Modified for landscape */
  min-height: 297mm;
  /* A4 ?믪씠 沅뚯옣 */
  padding: 20mm;
  /* ?щ갚 */
  margin: 30px auto;
  /* 以묒븰 ?뺣젹 諛??곹븯 ?щ갚 */
  background: #ffffff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  /* 醫낆씠 吏덇컧 洹몃┝??*/
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

@media (max-width: 215mm) {

  /* ?붾㈃??A4蹂대떎 ?묒쓣 寃쎌슦 諛섏쓳???€??*/
  .print-container {
    width: 95%;
    padding: 10mm;
  }
}

/* ?€?€ ?몄뇙 理쒖쟻??(A4) ?€?€ */
@media print {
  body {
    margin: 0;
    padding: 0;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ?ъ씠?쒕컮, ?ㅻ뜑, 踰꾪듉 ???④린湲?*/
  #sidebar,
  #app-header,
  #sidebar-toggle,
  .form-group,
  /* ?묒꽦 ???꾪꽣??*/
  .table-toolbar,
  .header-actions,
  .voucher-preview-actions,
  .btn,
  .btn-ghost,
  .sidebar-scroll-indicator,
  .modal-overlay {
    display: none !important;
  }

  /* 硫붿씤 ?곸뿭 ?뺤옣 */
  .app-layout {
    display: block !important;
  }

  .main-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: #fff !important;
  }

  #app-content {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* 移대뱶 ?ㅽ????쒓굅 */
  .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
  }

  /* 寃곗쓽??臾몄꽌 ?ㅽ???*/
  .voucher-doc {
    width: 190mm !important;
    margin: 0 auto !important;
    font-size: 10.5pt !important;
    color: #000 !important;
    background: #fff !important;
    zoom: 0.92;
    /* ???μ뿉 ?뺤떎???ㅼ뼱媛€?꾨줉 ?댁쭩 ??異뺤냼 */
    line-height: 1.3;
  }

  /* ?섎떒 ?붿냼 媛꾧꺽 異뺤냼 */
  .voucher-doc h2 {
    margin-bottom: 20px !important;
  }

  .voucher-table-title {
    margin-top: 15px !important;
  }

  .voucher-sign-section {
    margin: 10px 0 15px !important;
  }

  .voucher-footer {
    margin-top: 10px !important;
  }

  .voucher-school-footer {
    margin-top: 5px !important;
    page-break-inside: avoid;
  }

  .voucher-preview-card {
    padding: 0 !important;
    background: #fff !important;
  }

  /* ?섏씠吏€ ?섍? ?쒖뼱 */
  .voucher-attachment {
    page-break-before: always;
  }

  @page {
    size: landscape;
    margin: 10mm;
  }
}

/* ?€?€ ?쇱젙愿€由?(Schedule) ?꾩슜 ?ㅽ????€?€ */
.schedule-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
}

.calendar-wrapper {
  flex: 1;
  padding: 24px;
  background: #fff;
}

.schedule-side {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* FullCalendar ?ㅻ쾭?쇱씠??*/
.fc .fc-toolbar-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}

.fc .fc-button-primary {
  background-color: var(--accent) !important;
  border-color: transparent !important;
  text-transform: capitalize !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}

.fc .fc-button-primary:hover {
  background-color: var(--royal-blue) !important;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: var(--accent-sub) !important;
}

.fc .fc-event {
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 0.85em !important;
  cursor: pointer !important;
  transition: transform 0.2s !important;
}

/* 二쇨컙 留덇컧 由ъ뒪??*/
.deadline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.deadline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-radius: 8px;
  border-left: 4px solid #ff4757;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
}

.deadline-item:hover {
  background: #fff;
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.deadline-date {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #ff4757;
  font-size: 0.9em;
  min-width: 45px;
}

.deadline-title {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text-primary);
}

/* 移댄뀒怨좊━ 踰붾? */
.legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  font-weight: 500;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ?€?€ ?꾩뿭 ?ㅻ뒛???쇱젙 ?꾩젽 (Global Schedule Widget) ?€?€ */
.global-schedule-widget {
  margin-top: -15px;
  /* ?ㅻ뜑 援щ텇?좉낵 媛€源앷쾶 諛곗튂 */
  margin-bottom: 25px;
  padding: 16px 20px;
  background: linear-gradient(to right, #fffcfc, #fff5f5);
  /* ?고븳 遺됱???洹몃씪?곗씠??*/
  border-radius: 12px;
  border: 1px solid #fee2e2;
  box-shadow: var(--shadow-sm);
}

.global-schedule-widget .widget-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.global-schedule-widget .widget-title i {
  color: var(--text-primary);
}

.today-sch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.today-sch-card {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(255, 0, 0, 0.02);
}

.today-sch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.today-sch-card.empty {
  background: rgba(255, 255, 255, 0.5);
  border-style: dashed;
  justify-content: center;
  cursor: default;
}

.today-sch-card.empty p {
  color: var(--text-muted);
  font-size: 13px;
}

.sch-tag {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sch-content {
  overflow: hidden;
}

.sch-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sch-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ?€?€ ?쇱젙 紐⑤떖 ?꾨━誘몄뾼 ?ㅽ????€?€ */

/* ?€?€ ?쇱젙 紐⑤떖 ?꾨━誘몄뾼 ?ㅽ????€?€ */
.schedule-modal {
  max-width: 550px !important;
  border: 1px solid var(--border-light);
}

.schedule-modal .modal-header h3 i {
  margin-right: 10px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

.schedule-modal .form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.schedule-modal .form-group label i {
  color: var(--accent);
  font-size: 14px;
}

.schedule-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-base);
}

.schedule-modal .footer-right {
  display: flex;
  gap: 10px;
}

.schedule-modal textarea.form-control {
  min-height: 110px;
  line-height: 1.6;
}

.schedule-modal .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 4px;
}

/* 留덉씠?섏씠吏€ ?꾨줈???ㅽ???*/
.profile-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 25px;
  align-items: start;
}

@media (max-width: 992px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

.profile-main-card {
  padding: 0 !important;
  overflow: hidden;
  text-align: center;
}

.profile-header-bg {
  height: 120px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  position: relative;
}

.profile-avatar-large {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  color: var(--primary-color);
  margin: -60px auto 20px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 4px solid white;
}

.profile-basics {
  padding: 0 20px 30px;
}

.profile-name {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-primary);
}

.profile-role-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

.profile-meta-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
  margin-top: 10px;
}

.profile-meta-info span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.profile-meta-info i {
  width: 16px;
  color: var(--primary-color);
}

.card-footer-actions {
  padding: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  background: var(--bg-soft);
}

/* 異붽???洹몃９ ?됱긽 */
.nav-group-green {
  color: #059669 !important;
  /* Emerald 600 */
}

.nav-group-green span {
  border-left: 3px solid #059669;
  padding-left: 8px;
}

/* 蹂댁븞 ?뚮┝ 紐⑤떖 ?ㅽ???*/
.security-modal {
  max-width: 450px !important;
  border-top: 5px solid #e11d48 !important;
}

.security-icon-anim {
  animation: security-shake 0.8s ease-in-out infinite alternate;
}

@keyframes security-shake {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

/* ?곗씠???뚯씠釉?媛€?낆꽦 媛쒖꽑 */
.data-table td {
  white-space: nowrap !important;
  font-size: 14px !important;
  vertical-align: middle;
}

.data-table th {
  font-size: 14px;
  font-weight: 700;
  background: #fff !important;
  color: #1a2236 !important;
}


.data-table th {
  background: transparent !important;
  color: #fff !important;
}

/* --- 구분행 강조 스타일 (Thick Line & Ivory Background) --- */
.row-separator td {
  border-top: 3px solid #000 !important;
  /* Thick black line on top of each cell */
  background-color: #fffff0 !important;
  /* Ivory background */
  font-weight: 700 !important;
}

/* --- 재무보고서 고도화 전용 스타일 (Comparative Reports) --- */
.print-container.comparative {
  max-width: 1100px;
}

.comparative-table th,
.comparative-table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

.comparative-table .amount-cell {
  width: 160px;
  min-width: 160px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}

.color-prev {
  color: #777;
  background-color: rgba(0, 0, 0, 0.02);
}

#report-year-select {
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--royal-blue);
  color: var(--royal-blue);
  font-weight: 600;
  outline: none;
  cursor: pointer;
  background: white;
}

.report-tabs {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

.report-tabs-container {
  display: flex;
  gap: 35px;
  margin-bottom: 25px;
  background: white;
  padding: 30px 25px 25px 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-premium);
  border: 1px solid var(--border-light);
  flex-wrap: wrap;
  align-items: flex-start;
}

.report-tab-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 250px;
  position: relative;
  padding: 24px 20px 18px 20px;
  border-radius: 14px;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  transition: transform 0.3s ease;
}

.report-tab-group:hover {
  transform: translateY(-3px);
}

/* 결산용 그룹 스타일 (Blue Gradient) */
.report-tab-group.group-settlement {
  background-image: linear-gradient(to bottom, #ffffff, #f0f7ff),
    linear-gradient(135deg, #001a33 0%, #0052cc 100%);
  box-shadow: 0 10px 20px rgba(0, 82, 204, 0.05);
}

/* 예산용 그룹 스타일 (Green Gradient) */
.report-tab-group.group-budget {
  background-image: linear-gradient(to bottom, #ffffff, #f0fff4),
    linear-gradient(135deg, #0a2e1f 0%, #2dcc70 100%);
  box-shadow: 0 10px 20px rgba(45, 204, 112, 0.05);
}

.tab-group-label {
  position: absolute;
  top: -14px;
  left: 18px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  z-index: 2;
}

.group-settlement .tab-group-label {
  background: linear-gradient(90deg, #001a33 0%, #0052cc 100%);
}

.group-budget .tab-group-label {
  background: linear-gradient(90deg, #0a2e1f 0%, #2dcc70 100%);
}

.tab-group-label i {
  font-size: 14px;
  color: #ffffff;
}

.tab-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-item {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13.5px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--royal-blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.tab-item.active {
  background: rgba(255, 255, 255, 0.5);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 10px 25px rgba(0, 82, 204, 0.15);
  transform: translateY(-2px) scale(1.02);
}

/* 유리막 효과 블루 (결산용) */
.group-settlement .tab-item.active {
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.7) 0%, rgba(0, 51, 153, 0.85) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 유리막 효과 그린 (예산용) */
.group-budget .tab-item.active {
  background: linear-gradient(135deg, rgba(45, 204, 112, 0.7) 0%, rgba(30, 160, 90, 0.85) 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 10px 25px rgba(39, 174, 96, 0.15) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tab-item.active::after {
  display: none !important;
}

.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--text-muted);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 82, 204, 0.1);
  border-top-color: var(--royal-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- 비목 내역 관련 목 카드(태그) 스타일 --- */
.budget-tag-box {
  display: flex;
  margin-top: 4px;
  margin-bottom: 6px;
}

.budget-tag-path {
  display: inline-block;
  font-size: 12px;
  /* 주변 텍스트와 크기 동일하게 조정 */
  font-weight: 500;
  color: #1e40af;
  /* Deep Blue */
  padding: 0;
  border: none;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
}

.ledger-table th,
.ledger-table td {
  vertical-align: middle !important;
}

.ledger-table td {
  padding: 12px 8px !important;
}

/* --- 보고서 하단 학교명 스타일 (통일) --- */
.report-footer-school {
  margin-top: 60px;
  text-align: center;
  font-weight: 800;
  font-size: 28px;
  color: #1a2236;
  letter-spacing: 5px;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 테이블 헤더 전역 가운데 정렬 */
thead th,
.data-table th,
.report-table th,
.ledger-table th {
  text-align: center !important;
}

/* ─── 인쇄 스타일 (@media print) ─── */
@media print {

  /* 불필요한 UI 숨기기 */
  #sidebar,
  #app-header,
  .page-header,
  .report-tabs,
  .report-tabs-container,
  .filter-bar,
  .header-actions,
  .action-btns,
  #ledger-pagination,
  .btn,
  .sidebar-toggle,
  .year-select,
  .no-print {
    display: none !important;
  }

  /* 임시 인쇄 영역은 인쇄 시에만 표시 */
  #temp-print-area {
    display: block !important;
    width: 100%;
  }

  /* 레이아웃 정리 */
  body,
  html {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: auto;
  }

  .main-area {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  #app-content,
  .app-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 보고서 인쇄 최적화 */
  .print-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 10mm !important;
    /* 문서 상단 여백 보장 */
    color: #000 !important;
    background: #fff !important;
  }

  .report-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11pt !important;
  }

  .report-table th,
  .report-table td {
    border: 1px solid #000 !important;
    padding: 6px 8px !important;
  }

  .report-main-title {
    font-size: 26pt !important;
    margin-bottom: 20px !important;
  }

  .report-footer-school {
    font-size: 22pt !important;
    margin-top: 50px !important;
  }

  /* 강제 페이지 줄바꿈 제어 */
  .page-break {
    page-break-before: always;
  }
}

@page {
  size: landscape !important;
  margin: 10mm !important;
}

/* 최상단 이동 버튼 */
#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 50px;
  background: var(--accent);
  /* 사이드메뉴 배경(Deep Navy)과 통일 */
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
  line-height: 1;
}

#back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

#back-to-top:hover {
  transform: translateY(-5px);
  background: var(--accent-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ─── 지출결의서(Voucher) 전문 디자인 스타일 ─── */
.voucher-doc-wrapper {
  font-family: 'Noto Sans KR', sans-serif !important;
  color: #000 !important;
  line-height: 1.4 !important;
  background: #fff !important;
  padding: 40px !important;
  border: 1px solid #ddd !important;
}

.voucher-doc-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 30px 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 8px !important;
  letter-spacing: 12px !important;
  color: #000 !important;
}

.voucher-doc-meta-table, .voucher-data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
  table-layout: fixed !important;
  border: 1px solid #000 !important;
}

.voucher-doc-meta-table td, .voucher-data-table th, .voucher-data-table td {
  border: 1px solid #000 !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  color: #000 !important;
}

.voucher-doc-label {
  background-color: #f2f2f2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 100px !important;
  color: #000 !important;
}

.voucher-doc-value {
  background-color: #fff !important;
}

.voucher-doc-value.auto {
  background-color: #f2f2f2 !important; /* 값 부분도 자동생성 영역은 회색 */
}

.voucher-doc-value.select {
  background-color: #fff9db !important; /* 강조 노란색 */
}

/* 결재라인 테이블 */
.approval-line-table {
  border-collapse: collapse !important;
  margin-left: auto !important;
  border: 1px solid #000 !important;
}

.approval-line-table th, .approval-line-table td {
  border: 1px solid #000 !important;
  width: 80px !important;
  text-align: center !important;
  font-size: 12px !important;
  padding: 4px !important;
  color: #000 !important;
}

.approval-line-label {
  width: 30px !important;
  background-color: #f2f2f2 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.approval-line-table th:not(.approval-line-label) {
  background-color: #f2f2f2 !important;
  height: 25px !important;
}

.sig-box {
  height: 65px !important;
  vertical-align: middle !important;
  background: #fff !important;
}

/* 섹션 태그 */
.section-tag {
  font-weight: 800 !important;
  font-size: 15px !important;
  margin: 25px 0 8px 0 !important;
  display: block !important;
  color: #000 !important;
}

.voucher-data-table thead th {
  background: #f2f2f2 !important;
  color: #000 !important;
  font-weight: 700 !important;
}

.voucher-data-table tbody td {
  background: #fff !important;
}

.total-row td {
  background-color: #f2f2f2 !important;
  font-weight: 700 !important;
}

.voucher-pdf-container {
  min-height: 500px !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  margin-top: 10px !important;
}


/* Voucher Header background overwrite */
.voucher-doc-meta-table .voucher-doc-label,
.voucher-doc-meta-table td.voucher-doc-label,
.voucher-doc-meta-table th {
    background-color: #d1d5db !important; /* darker gray */
}

/* Summary Table Responsive Style */
@media (max-width: 768px) {
  .summary-table { min-width: 100% !important; }
  .summary-table thead { display: none; }
  .summary-table tbody td { display: block; text-align: left !important; padding: 10px; border-bottom: 1px solid #eee; }
  .summary-table td::before { content: attr(data-label); font-weight: 800; display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 11px; }
}

.summary-table { margin-top: 10px; }
.summary-table td { padding: 15px 12px !important; }
.summary-table .amount { font-size: 16px; font-weight: 700; }
.summary-table .icon-circle { transition: transform 0.3s ease; }
.summary-table tr:hover .icon-circle { transform: scale(1.1); }



/* �α��� ȭ�� ����� ����ȭ (Mobile Login Optimization) */
@media (max-width: 480px) {
  #login-screen {
    align-items: flex-start !important;
    padding: 30px 15px !important;
    overflow-y: auto !important;
  }
  .login-container {
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .login-card {
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
  }
  .login-card-top {
    padding: 32px 20px 48px 20px !important;
    min-height: 160px !important;
    gap: 10px !important;
  }
  .login-card-bottom {
    padding: 24px 20px 30px 20px !important;
    border-radius: 0 0 20px 20px !important;
  }
  .login-logo img {
    max-width: 130px !important;
  }
  .login-title {
    font-size: 19px !important;
    letter-spacing: 1px !important;
  }
  .login-title span {
    font-size: 15px !important;
    margin-top: 5px !important;
  }
  .login-form .form-group {
    margin-bottom: 12px !important;
  }
  .login-input {
    padding: 12px 14px 12px 42px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .login-input-icon {
    left: 14px !important;
    font-size: 14px !important;
  }
  .login-btn {
    padding: 14px !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }
  .login-footer {
    margin-top: 20px !important;
    font-size: 11px !important;
  }
}


/* ����� �α��� ȭ�� 2�� ���� (Strong Mobile UI Optimization) */
@media (max-width: 480px) {
  #login-screen {
    background: #001a33 !important; /* ������ �׶��̼� �����Ͽ� ����ϰ� */
    align-items: center !important; /* �ٽ� �߾����� �õ��ϵ� ���� ����ȭ */
    padding: 20px !important;
  }
  .login-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .login-card {
    width: 95% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6) !important;
  }
  .login-card-top {
    padding: 24px 15px 44px 15px !important;
    min-height: 110px !important;
    gap: 8px !important;
  }
  .login-card-bottom {
    padding: 28px 24px 28px 24px !important;
    border-radius: 0 0 24px 24px !important;
  }
  .login-logo img {
    max-width: 100px !important;
    margin-bottom: 5px !important;
  }
  .login-title {
    font-size: 18px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important; /* ���� ���� */
  }
  .login-title span {
    font-size: 13px !important;
    margin-top: 4px !important;
    color: rgba(255,255,255,0.8) !important;
    white-space: nowrap !important;
  }
  .login-animated-waves {
    height: 30px !important;
  }
  .login-form label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .login-input {
    padding: 11px 12px 11px 38px !important;
    font-size: 14px !important;
  }
  .login-input-icon {
    left: 12px !important;
  }
  .login-btn {
    padding: 13px !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    letter-spacing: 1px !important;
  }
  .login-footer {
    margin-top: 15px !important;
    font-size: 10.5px !important;
  }
  .login-deco-circle-1, .login-deco-circle-2, .login-deco-circle-3 {
    display: none !important; /* ����Ͽ��� ���ʿ��� ��� ���� */
  }
}