/*!
 * ukdream.css — v2.0
 * Clean Light Design System
 * Bootstrap 호환 라이트 디자인 시스템
 * IBSheet / IBTab / modalLink / DataTables 호환 유지
 *
 * @font: Pretendard (Korean) / Inter (Latin)
 * @accent: #4f6ef7 (Indigo Blue)
 *
 * Generated from UKDREAM CSS Demo (Standalone)
 * Font files served from /fonts/ukdream/
 */
/*!
 * ukdream.css — v2.0
 * Clean Light Design System
 * Bootstrap 호환 라이트 디자인 시스템
 * IBSheet / IBTab / modalLink / DataTables 호환 유지
 *
 * @font: Pretendard (Korean) / Inter (Latin)
 * @accent: #4f6ef7 (Indigo Blue)
 */

/* ═══════════════════════════════════════════════════
   @import — Pretendard + Inter
═══════════════════════════════════════════════════ */
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url("../fonts/ukdream/96b559e7-2e52-4e7e-adec-3b7b9b758db6") format('woff2'), url("../fonts/ukdream/2073edb8-c0bb-4eac-b937-4905bbde18ac") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url("../fonts/ukdream/da8cacb6-d4d5-4148-bbab-82a38b909790") format('woff2'), url("../fonts/ukdream/8724260f-2e86-4417-9bb2-97e2b18cb216") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url("../fonts/ukdream/74c8b2e2-c1d9-4882-b9e4-46bdef94b2c3") format('woff2'), url("../fonts/ukdream/b76808bb-fa0c-4781-b64e-66e3e850f751") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url("../fonts/ukdream/b232ec77-45a1-4dad-9139-e2ab061888d0") format('woff2'), url("../fonts/ukdream/b3f5cc64-a208-4c69-8227-ee303164680d") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url("../fonts/ukdream/f241e630-80e2-4e86-8250-a8a6d032e7b0") format('woff2'), url("../fonts/ukdream/b88446df-2c86-4649-bd7a-9d626eaabe4c") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url("../fonts/ukdream/47d52bc5-5989-4114-b43e-6c96ffa1786c") format('woff2'), url("../fonts/ukdream/c385e9e8-ff23-4a10-b137-ed46337896fb") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url("../fonts/ukdream/f1efcf96-2750-4b49-b8e0-5df74b435523") format('woff2'), url("../fonts/ukdream/37e634d7-c5f7-4271-8865-e524a8bb3ae9") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url("../fonts/ukdream/a471c179-b761-4d92-8fe9-9ba5f14d1347") format('woff2'), url("../fonts/ukdream/9b934e9e-8c9a-4868-be2e-7579495e80f9") format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url("../fonts/ukdream/cfeb0dde-659f-4e50-baba-2f9fa978a5a0") format('woff2'), url("../fonts/ukdream/de187857-7332-453a-92c2-97156c3fb70b") format('woff');
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/dd0b7ab7-aacd-4d8a-8d4c-5faa20118437") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/e78d5f51-c9bc-4591-a7e2-266bb39b2afe") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/2d556edd-8e03-41ac-885e-ec0631deb274") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/294850f2-eb61-491c-b060-f30c6ce1ffbc") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/0a4d022c-b293-4292-842a-b7cb5854a2d7") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/512ad55a-a83b-4230-93db-997d8291a3a0") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/ukdream/90a689bc-9c23-4419-9e9e-944959bd2274") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══════════════════════════════════════════════════
   CSS 변수 (디자인 토큰)
═══════════════════════════════════════════════════ */
:root {
  /* 색상 */
  --uk-bg:           #f4f6fb;
  --uk-surface:      #ffffff;
  --uk-border:       #e6e9f4;
  --uk-border-soft:  #f0f2f9;

  --uk-text:         #1a1d2e;
  --uk-text-sub:     #6b7280;
  --uk-text-muted:   #9ca3af;

  --uk-accent:       #4f6ef7;
  --uk-accent-dark:  #3a57e8;
  --uk-accent-bg:    rgba(79,110,247,0.07);
  --uk-accent-hover: rgba(79,110,247,0.12);

  --uk-success:      #22c55e;
  --uk-success-bg:   rgba(34,197,94,0.08);
  --uk-warning:      #f59e0b;
  --uk-warning-bg:   rgba(245,158,11,0.08);
  --uk-danger:       #ef4444;
  --uk-danger-bg:    rgba(239,68,68,0.08);
  --uk-info:         #06b6d4;
  --uk-info-bg:      rgba(6,182,212,0.08);

  /* 레이아웃 */
  --uk-sidebar-width:  228px;
  --uk-header-height:  56px;

  /* 타이포 */
  --uk-font: 'Pretendard', 'Inter', 'Apple SD Gothic Neo', 'Noto Sans KR',
             'Helvetica Neue', Helvetica, Arial, sans-serif;
  --uk-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* 반경 */
  --uk-radius-sm:  6px;
  --uk-radius:     8px;
  --uk-radius-md:  10px;
  --uk-radius-lg:  12px;
  --uk-radius-xl:  16px;
  --uk-radius-full:9999px;

  /* 그림자 */
  --uk-shadow-xs: 0 1px 2px rgba(26,29,46,0.04);
  --uk-shadow-sm: 0 1px 4px rgba(26,29,46,0.06), 0 0 0 1px rgba(26,29,46,0.02);
  --uk-shadow:    0 4px 12px rgba(26,29,46,0.08), 0 0 0 1px rgba(26,29,46,0.03);
  --uk-shadow-lg: 0 8px 28px rgba(26,29,46,0.12), 0 0 0 1px rgba(26,29,46,0.04);

  /* 전환 */
  --uk-transition: 0.14s ease;
}

/* ═══════════════════════════════════════════════════
   리셋 & 베이스
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--uk-font);
  font-size: 14px;
  color: var(--uk-text);
  background: var(--uk-bg);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--uk-accent); text-decoration: none; transition: color var(--uk-transition); }
a:hover { color: var(--uk-accent-dark); }

h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; color: var(--uk-text); letter-spacing: -0.2px; }

img { max-width: 100%; height: auto; vertical-align: middle; }

ul, ol { list-style: none; padding: 0; }

button, input, select, textarea {
  font-family: var(--uk-font);
  font-size: 13px;
  color: var(--uk-text);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--uk-border); border-radius: var(--uk-radius-full); }
::-webkit-scrollbar-thumb:hover { background: #c5cae0; }

/* ═══════════════════════════════════════════════════
   레이아웃 — wrapper / main-panel
═══════════════════════════════════════════════════ */
.wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: var(--uk-bg);
}

.main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow-x: hidden;
}

.content { flex: 1; }

.page-inner {
  padding: 20px 24px;
  flex: 1;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--uk-text);
  margin: 0;
}
h4.page-title { font-size: 14px; }
h5.page-title { font-size: 13px; }

/* 라벨 + 값 목록 (예치금 입금계좌 정보 등).
   전에는 값 줄까지 클래스 없는 <h4> 로 찍혀 브라우저 기본값 14px 로 튀었다.
   ⚠ 전역 h4 { font-size } 로 해결하지 말 것 — 사이드바 .text-section 과
     전 화면 h4.page-title 이 함께 흔들린다. */
.account-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 12px;
}
.account-info dt {
  color: var(--uk-text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.account-info dd {
  margin: 0;
  color: var(--uk-text);
  word-break: break-all;
}

.footer {
  padding: 14px 24px;
  border-top: 1px solid var(--uk-border);
  background: var(--uk-surface);
  font-size: 11px;
  color: var(--uk-text-muted);
}
.footer .copyright { text-align: right; }
.footer .copyright a { color: var(--uk-text-muted); }
.footer .copyright a:hover { color: var(--uk-accent); }

/* ═══════════════════════════════════════════════════
   메인 헤더 (logo-header + navbar-header 묶음)
═══════════════════════════════════════════════════ */
.main-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--uk-header-height);
}

/* 로고 헤더 (사이드바 상단) */
.logo-header {
  width: var(--uk-sidebar-width);
  height: var(--uk-header-height);
  background: var(--uk-surface);
  border-right: 1px solid var(--uk-border);
  border-bottom: 1px solid var(--uk-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  flex-shrink: 0;
}

.logo-header .logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.logo-header .navbar-brand {
  height: 26px;
  width: auto;
}

.logo-header .brand-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--uk-text);
  letter-spacing: -0.4px;
  white-space: nowrap;
}

/* 로고 아이콘 박스 (SVG/img 없을 때 폴백) */
.logo-header .logo-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--uk-radius);
  background: var(--uk-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 13px;
  color: white;
  letter-spacing: -0.5px;
}

/* 상단 네비바 */
.navbar.navbar-header {
  flex: 1;
  height: var(--uk-header-height);
  background: var(--uk-surface);
  border-bottom: 1px solid var(--uk-border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  box-shadow: var(--uk-shadow-xs);
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-left: auto;
}

/* 네비바 버튼 pills */
.navbar-header .nav-item > a[style*="border"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border: 1.5px solid var(--uk-border) !important;
  border-radius: var(--uk-radius-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--uk-text) !important;
  background: var(--uk-surface) !important;
  cursor: pointer;
  transition: all var(--uk-transition);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-header .nav-item > a[style*="border"]:hover {
  border-color: var(--uk-accent) !important;
  color: var(--uk-accent) !important;
  background: var(--uk-accent-bg) !important;
}

.navbar-header .navbar-brand {
  height: 16px;
  width: 16px;
  object-fit: contain;
  opacity: 0.6;
}

/* 상단 navbar dropdown 트리거 (인라인 border style 없는 일반 nav-item — 예: 예치금 리스트 #notifDropdown) */
.navbar-header .topbar-nav > li.nav-item > a.dropdown-toggle,
.navbar-header .topbar-nav > li.nav-item > a#notifDropdown,
.navbar-header .topbar-nav > li.nav-item > a.nav-item:not([style]) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border: 1.5px solid var(--uk-border) !important;
  border-radius: var(--uk-radius-full) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--uk-text) !important;
  background: var(--uk-surface) !important;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: all var(--uk-transition);
}
.navbar-header .topbar-nav > li.nav-item > a.dropdown-toggle:hover,
.navbar-header .topbar-nav > li.nav-item > a#notifDropdown:hover {
  border-color: var(--uk-accent) !important;
  color: var(--uk-accent) !important;
  background: var(--uk-accent-bg) !important;
}
.navbar-header .topbar-nav > li.nav-item > a > img.navbar-brand {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  opacity: 0.75;
}

/* 사이드바 토글 버튼 (모바일) */
.navbar-toggler,
.nav-toggle .btn-toggle,
.topbar-toggler {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--uk-text-sub);
  font-size: 18px;
}

/* ═══════════════════════════════════════════════════
   드롭다운 — 예치금 알림 등
═══════════════════════════════════════════════════ */
.hidden-caret .dropdown-toggle::after { display: none; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--uk-surface);
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-lg);
  padding: 4px 0;
  z-index: 300;
  display: none;
}
.dropdown-menu.show,
.dropdown-menu.animated.show,
.dropdown-menu.animated.fadeIn { display: block; }
/* 달력 위젯은 .dropdown-menu 를 빌려 쓴다 — 위 규칙의 right:0/min-width 가 달력을 늘린다 */
.bootstrap-datetimepicker-widget.dropdown-menu { right: auto; min-width: 0; width: auto; top: auto; }
.dropdown-item {
  display: block;
  padding: 7px 16px;
  font-size: 12px;
  color: var(--uk-text);
  transition: background var(--uk-transition);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--uk-bg); color: var(--uk-accent); }

/* 알림 드롭다운 */
.dropdown-menu.notif-box {
  min-width: 280px;
  padding: 0;
  overflow: hidden;
}
.dropdown-title {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--uk-text);
  border-bottom: 1px solid var(--uk-border);
  background: var(--uk-bg);
}
.notif-scroll { max-height: 300px; overflow-y: auto; }
.notif-center a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--uk-border-soft);
  text-decoration: none;
  transition: background var(--uk-transition);
}
.notif-center a:hover { background: var(--uk-bg); }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: var(--uk-radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px;
}
.notif-icon.notif-primary { background: var(--uk-accent-bg); color: var(--uk-accent); }
.notif-content { flex: 1; min-width: 0; }
.notif-content .block {
  display: block; font-size: 12px; color: var(--uk-text);
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-content .time { display: block; font-size: 11px; color: var(--uk-text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   사이드바
═══════════════════════════════════════════════════ */
.sidebar {
  width: var(--uk-sidebar-width);
  min-height: 100vh;
  background: var(--uk-surface);
  border-right: 1px solid var(--uk-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* sidebar-style-2 override */
.sidebar.sidebar-style-2 { background: var(--uk-surface); }

.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 12px;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}

/* 유저 정보 */
.sidebar .user {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 8px 8px;
  background: var(--uk-bg);
  border-radius: var(--uk-radius-lg);
}

.avatar-sm { width: 32px; height: 32px; flex-shrink: 0; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.rounded-circle { border-radius: var(--uk-radius-full) !important; }

.sidebar .user .info { flex: 1; min-width: 0; }
.sidebar .user .info > a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--uk-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .user-level {
  display: block;
  font-size: 10px;
  color: var(--uk-text-muted);
  margin-top: 1px;
}
.sidebar .caret {
  display: inline-block;
  width: 0; height: 0;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  margin-left: 3px;
  opacity: 0.45;
  vertical-align: middle;
  flex-shrink: 0;
}

/* 유저 서브 collapse */
.sidebar .collapse .nav { padding: 2px 0; }
.sidebar .collapse .nav li { margin: 0; }
.sidebar .collapse .nav li a {
  display: block;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--uk-text-sub);
  border-radius: var(--uk-radius-sm);
  margin: 1px 8px;
  transition: all var(--uk-transition);
  text-decoration: none;
}
.sidebar .collapse .nav li a:hover,
.sidebar .collapse .nav li a .link-collapse:hover {
  background: var(--uk-accent-bg);
  color: var(--uk-accent);
}

/* ── 섹션 구분 ── */
.nav-section {
  padding: 14px 16px 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-section .text-section {
  font-size: 9px;
  font-weight: 700;
  color: var(--uk-text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nav-section .sidebar-mini-icon { display: none; }

/* ── 메뉴 아이템 ── */
.nav.nav-primary {
  padding: 0 8px;
  flex: 1;
}
.nav.nav-primary .nav-item { margin-bottom: 1px; }

.nav.nav-primary .nav-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--uk-radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--uk-text-sub);
  text-decoration: none;
  transition: all var(--uk-transition);
  border: 1px solid transparent;
}

.nav.nav-primary .nav-item > a i,
.nav.nav-primary .nav-item > a .fas,
.nav.nav-primary .nav-item > a .far,
.nav.nav-primary .nav-item > a .fa,
.nav.nav-primary .nav-item > a .flaticon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  color: var(--uk-text-muted);
  transition: color var(--uk-transition);
  flex-shrink: 0;
}

.nav.nav-primary .nav-item > a p {
  flex: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.nav.nav-primary .nav-item > a .caret { margin-left: auto; }

/* 알림 배지 */
.nav.nav-primary .nav-item > a .badge-count {
  font-size: 9px;
  font-weight: 700;
  background: var(--uk-accent);
  color: white;
  border-radius: var(--uk-radius-full);
  padding: 1px 5px;
  margin-left: auto;
}

/* hover */
.nav.nav-primary .nav-item > a:hover {
  background: var(--uk-bg);
  color: var(--uk-text);
  border-color: var(--uk-border);
}
.nav.nav-primary .nav-item > a:hover i,
.nav.nav-primary .nav-item > a:hover .fas,
.nav.nav-primary .nav-item > a:hover .far,
.nav.nav-primary .nav-item > a:hover .fa {
  color: var(--uk-accent);
}

/* active */
.nav.nav-primary .nav-item.active > a,
.nav.nav-primary .nav-item > a.active,
.nav.nav-primary .nav-item > a[style*="background-color:rgba(255,255,255,0.15)"] {
  background: var(--uk-accent-bg) !important;
  color: var(--uk-accent) !important;
  border-color: rgba(79,110,247,0.18) !important;
  font-weight: 600 !important;
}
.nav.nav-primary .nav-item.active > a i,
.nav.nav-primary .nav-item.active > a .fas,
.nav.nav-primary .nav-item.active > a .far,
.nav.nav-primary .nav-item.active > a .fa {
  color: var(--uk-accent) !important;
}

/* 서브메뉴 */
.nav.nav-primary .nav-collapse {
  padding: 2px 0 2px 34px;
}
.nav.nav-primary .nav-collapse li a {
  display: block;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--uk-text-sub);
  border-radius: var(--uk-radius-sm);
  transition: all var(--uk-transition);
  text-decoration: none;
}
.nav.nav-primary .nav-collapse li a:hover,
.nav.nav-primary .nav-collapse .sub-item:hover { color: var(--uk-accent); background: var(--uk-accent-bg); }
.sub-item { font-size: 11px; }

/* Bootstrap collapse 호환 */
.collapse { display: none; }
.collapse.show, .collapse.in { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height 0.25s ease; }

/* ═══════════════════════════════════════════════════
   브레드크럼
═══════════════════════════════════════════════════ */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 11px;
}
.breadcrumbs .nav-home a { color: var(--uk-text-muted); display: flex; align-items: center; }
.breadcrumbs .nav-home a:hover { color: var(--uk-accent); }
.breadcrumbs .separator { color: var(--uk-text-muted); margin: 0 5px; display: flex; align-items: center; }
.breadcrumbs .separator i { font-size: 9px; }
.breadcrumbs .nav-item a { color: var(--uk-text-sub); }
.breadcrumbs .nav-item a:hover { color: var(--uk-accent); }

/* ═══════════════════════════════════════════════════
   카드
═══════════════════════════════════════════════════ */
.card {
  /* position:relative 는 부트스트랩 기본값인데 이 파일이 그 CSS 를 대체하면서 빠졌다.
     bootstrap-datetimepicker 는 positioned 조상이 없으면 첫 클릭에서 예외를 던지고
     (datetimepicker component should be placed within a non-static positioned container)
     그때 만든 위젯이 남아 이후 클릭은 전부 무시된다 → 날짜만 채워지고 달력이 안 뜬다 (2026-09-12) */
  position: relative;
  background: var(--uk-surface);
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-xs);
  margin-bottom: 20px;
  overflow: visible; /* IBSheet 오버플로우 허용 */
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--uk-border);
  background: var(--uk-surface);
  border-radius: var(--uk-radius-lg) var(--uk-radius-lg) 0 0;
}
.card-header .page-title,
.card-header h4,
.card-header .card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--uk-text);
  margin: 0;
}

.card-body {
  padding: 16px 18px;
}

.card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--uk-border);
  background: var(--uk-bg);
  border-radius: 0 0 var(--uk-radius-lg) var(--uk-radius-lg);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 탭이 있는 카드 */
.card.card-with-nav .card-header {
  padding: 0 18px;
  border-bottom: 1px solid var(--uk-border);
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════
   버튼
═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--uk-font);
  border-radius: var(--uk-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--uk-transition);
  white-space: nowrap;
  line-height: 1.4;
  vertical-align: middle;
  user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--uk-accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn i, .btn .fas, .btn .far, .btn .fa { font-size: 12px; }

/* 사이즈 */
.btn-sm   { padding: 5px 10px; font-size: 11px; border-radius: var(--uk-radius-sm); }
.btn-lg   { padding: 10px 22px; font-size: 14px; border-radius: var(--uk-radius-md); }
.btn-xl   { padding: 13px 28px; font-size: 15px; border-radius: var(--uk-radius-lg); }
.btn-round{ border-radius: var(--uk-radius-full) !important; }
.btn-block{ width: 100%; }

/* 색상 */
.btn-primary   { background: var(--uk-accent); border-color: var(--uk-accent); color: #fff; }
.btn-primary:hover { background: var(--uk-accent-dark); border-color: var(--uk-accent-dark); color: #fff; }

.btn-secondary { background: #475569; border-color: #475569; color: #fff; }
.btn-secondary:hover { background: #334155; border-color: #334155; color: #fff; }

.btn-success   { background: var(--uk-success); border-color: var(--uk-success); color: #fff; }
.btn-success:hover { background: #16a34a; border-color: #16a34a; color: #fff; }

.btn-danger    { background: var(--uk-danger); border-color: var(--uk-danger); color: #fff; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

.btn-warning   { background: var(--uk-warning); border-color: var(--uk-warning); color: #fff; }
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }

.btn-info      { background: var(--uk-info); border-color: var(--uk-info); color: #fff; }
.btn-info:hover { background: #0891b2; border-color: #0891b2; color: #fff; }

.btn-dark      { background: var(--uk-text); border-color: var(--uk-text); color: #fff; }
.btn-dark:hover { background: #0f1117; border-color: #0f1117; color: #fff; }

/* 아웃라인 */
.btn-outline-primary { background: transparent; border-color: var(--uk-accent); color: var(--uk-accent); }
.btn-outline-primary:hover { background: var(--uk-accent-bg); }
.btn-outline-secondary { background: transparent; border-color: var(--uk-border); color: var(--uk-text-sub); }
.btn-outline-secondary:hover { background: var(--uk-bg); border-color: #94a3b8; color: var(--uk-text); }
.btn-outline-success { background: transparent; border-color: var(--uk-success); color: #16a34a; }
.btn-outline-success:hover { background: var(--uk-success-bg); }
.btn-outline-danger  { background: transparent; border-color: var(--uk-danger); color: #dc2626; }
.btn-outline-danger:hover  { background: var(--uk-danger-bg); }
.btn-outline-warning { background: transparent; border-color: var(--uk-warning); color: #d97706; }
.btn-outline-warning:hover { background: var(--uk-warning-bg); }
.btn-outline-info    { background: transparent; border-color: var(--uk-info); color: #0891b2; }
.btn-outline-info:hover    { background: var(--uk-info-bg); }

/* 링크 버튼 */
.btn-link { background: transparent; border-color: transparent; color: var(--uk-accent); padding-left: 0; padding-right: 0; }
.btn-link:hover { color: var(--uk-accent-dark); text-decoration: underline; }

/* .basic 호환 (기존 inline link 버튼) */
.basic {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--uk-text-sub);
  background: var(--uk-surface);
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--uk-transition);
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}
.basic:hover {
  border-color: var(--uk-accent);
  color: var(--uk-accent);
  background: var(--uk-accent-bg);
}

/* ═══════════════════════════════════════════════════
   폼
═══════════════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }

.form-group-default {
  background: var(--uk-bg);
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius);
  padding: 10px 12px;
  transition: border-color var(--uk-transition);
}
.form-group-default:focus-within { border-color: var(--uk-accent); }
.form-group-default h6 {
  font-size: 10px;
  font-weight: 700;
  color: var(--uk-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.form-group-default h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--uk-text);
  margin: 0;
}
.form-group-default .form-control {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 13px;
  box-shadow: none;
}
.form-group-default .form-control:focus { box-shadow: none; }

.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--uk-font);
  color: var(--uk-text);
  background: var(--uk-surface);
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius);
  transition: border-color var(--uk-transition), box-shadow var(--uk-transition);
  outline: none;
  line-height: 1.5;
  appearance: none;
}
.form-control:focus {
  border-color: var(--uk-accent);
  box-shadow: 0 0 0 3px var(--uk-accent-bg);
}
.form-control::placeholder { color: var(--uk-text-muted); }
.form-control:disabled { background: var(--uk-bg); cursor: not-allowed; opacity: 0.7; }
.form-control-sm { padding: 5px 9px; font-size: 11px; border-radius: var(--uk-radius-sm); }
.form-control-lg { padding: 10px 14px; font-size: 14px; border-radius: var(--uk-radius-md); }

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
  cursor: pointer;
}

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--uk-text-sub);
  margin-bottom: 5px;
  letter-spacing: 0.2px;
}
label.placeholder { font-size: 12px; font-weight: 600; }

/* 커스텀 체크박스 */
.custom-control {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
}
.custom-control-input {
  width: 15px; height: 15px;
  accent-color: var(--uk-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.custom-control-label {
  font-size: 12px;
  color: var(--uk-text-sub);
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.custom-checkbox .custom-control-label::before { display: none; }
.custom-checkbox .custom-control-label::after  { display: none; }

/* input-group */
.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  border-radius: 0;
  flex: 1;
}
.input-group .form-control:first-child { border-radius: var(--uk-radius) 0 0 var(--uk-radius); }
.input-group .form-control:last-child  { border-radius: 0 var(--uk-radius) var(--uk-radius) 0; }

.input-group-prepend, .input-group-append {
  display: flex;
  align-items: center;
}
.input-group-text {
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--uk-text-sub);
  background: var(--uk-bg);
  border: 1.5px solid var(--uk-border);
  white-space: nowrap;
}
.input-group-prepend .input-group-text {
  border-right: none;
  border-radius: var(--uk-radius) 0 0 var(--uk-radius);
}
.input-group-append .input-group-text {
  border-left: none;
  border-radius: 0 var(--uk-radius) var(--uk-radius) 0;
}

/* 비밀번호 토글 */
.position-relative { position: relative; }
.show-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--uk-text-muted);
  transition: color var(--uk-transition);
}
.show-password:hover { color: var(--uk-accent); }

/* form-inline */
.form-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.form-inline label { margin: 0; white-space: nowrap; }
.form-inline .form-control { width: auto; }

.form-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════
   테이블
═══════════════════════════════════════════════════ */
.table-responsive { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.table th {
  padding: 9px 13px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--uk-text-sub);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--uk-border);
  background: var(--uk-bg);
  white-space: nowrap;
}
.table td {
  padding: 10px 13px;
  color: var(--uk-text);
  border-bottom: 1px solid var(--uk-border-soft);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--uk-transition); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--uk-bg); }

.table-striped tbody tr:nth-child(even) td { background: var(--uk-bg); }
.table-striped tbody tr:nth-child(even):hover td { background: #edf0f9; }

.table-hover tbody tr:hover { cursor: pointer; }
.table-hover tbody tr:hover td { background: var(--uk-accent-bg); }

.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--uk-border); }

/* DataTables 오버라이드 */
.dataTables_wrapper .dataTables_filter input {
  padding: 5px 10px;
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius-sm);
  font-size: 11px;
  color: var(--uk-text);
  background: var(--uk-surface);
  outline: none;
  font-family: var(--uk-font);
  margin-left: 6px;
}
.dataTables_wrapper .dataTables_length select {
  padding: 4px 24px 4px 8px;
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius-sm);
  font-size: 11px;
  color: var(--uk-text);
  background: var(--uk-surface);
  cursor: pointer;
  font-family: var(--uk-font);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.dataTables_wrapper .dataTables_info { font-size: 11px; color: var(--uk-text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 8px;
  border-radius: var(--uk-radius-sm);
  font-size: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--uk-text-sub) !important;
  font-family: var(--uk-font);
  transition: all var(--uk-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--uk-accent-bg) !important;
  border-color: var(--uk-accent) !important;
  color: var(--uk-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--uk-accent) !important;
  border-color: var(--uk-accent) !important;
  color: white !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.3; cursor: not-allowed; }

table.dataTable thead th { border-bottom: 2px solid var(--uk-border) !important; }
table.dataTable thead th:active { background: var(--uk-bg); }
table.dataTable.no-footer { border-bottom: 1px solid var(--uk-border); }

/* ═══════════════════════════════════════════════════
   탭 — nav-tabs / nav-pills
═══════════════════════════════════════════════════ */
.nav-tabs {
  display: flex;
  border-bottom: 2px solid var(--uk-border);
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.nav-tabs .nav-item .nav-link {
  display: block;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--uk-text-sub);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--uk-transition);
  background: transparent;
}
.nav-tabs .nav-item .nav-link:hover { color: var(--uk-text); }
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link.active.show {
  color: var(--uk-accent);
  border-bottom-color: var(--uk-accent);
  font-weight: 700;
}

/* nav-line 변형 */
.nav-line { border-bottom: 2px solid var(--uk-border); }
.nav-line .nav-link { border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nav-line .nav-link.active { color: var(--uk-accent); border-bottom-color: var(--uk-accent); font-weight: 700; }

/* nav-pills */
.nav-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-pills .nav-item .nav-link {
  display: block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--uk-text-sub);
  border-radius: var(--uk-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--uk-transition);
  border: 1px solid transparent;
}
.nav-pills .nav-item .nav-link:hover { background: var(--uk-bg); color: var(--uk-text); }
.nav-pills .nav-item .nav-link.active {
  background: var(--uk-accent);
  color: white;
  font-weight: 600;
}

/* nav-color-secondary override */
.nav-color-secondary .nav-link.active { color: var(--uk-accent); border-bottom-color: var(--uk-accent); }

/* tab-content */
.tab-content .tab-pane { display: none; }
.tab-content .tab-pane.active,
.tab-content .tab-pane.show { display: block; }

/* ═══════════════════════════════════════════════════
   배지
═══════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--uk-radius-full);
  white-space: nowrap;
  vertical-align: middle;
}
.badge-primary   { background: var(--uk-accent-bg);  color: var(--uk-accent); }
.badge-success   { background: var(--uk-success-bg); color: #15803d; }
.badge-danger    { background: var(--uk-danger-bg);  color: #dc2626; }
.badge-warning   { background: var(--uk-warning-bg); color: #d97706; }
.badge-info      { background: var(--uk-info-bg);    color: #0891b2; }
.badge-secondary { background: rgba(139,92,246,0.09);color: #7c3aed; }
.badge-default   { background: var(--uk-bg); color: var(--uk-text-sub); border: 1px solid var(--uk-border); }
.badge-dark      { background: var(--uk-text); color: white; }

/* ═══════════════════════════════════════════════════
   알림 / 모달 등
═══════════════════════════════════════════════════ */
/* Bootstrap modal 기본 유지 — IBSheet 팝업과 충돌 방지 */
.modal-backdrop { background: rgba(0,0,0,0.45); }
.modal-content {
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-xl);
  box-shadow: var(--uk-shadow-lg);
  background: var(--uk-surface);
}
.modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--uk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: 14px; font-weight: 700; color: var(--uk-text); }
.modal-body  { padding: 20px; }
.modal-footer{
  padding: 12px 20px;
  border-top: 1px solid var(--uk-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.close {
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--uk-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.close:hover { color: var(--uk-danger); }

/* ═══════════════════════════════════════════════════
   Wizard (예치금 신청)
═══════════════════════════════════════════════════ */
.wizard-container { }
.wizard-body { }
.wizard-menu.nav-pills {
  display: flex;
  background: var(--uk-bg);
  border-radius: var(--uk-radius-md);
  padding: 3px;
  gap: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--uk-border);
}
.wizard-menu .step { flex: 1; }
.wizard-menu .step .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--uk-radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--uk-text-sub);
  border: none;
  background: transparent;
  transition: all var(--uk-transition);
  text-align: center;
}
.wizard-menu .step .nav-link.active,
.wizard-menu .step .nav-link:hover {
  background: var(--uk-surface);
  color: var(--uk-accent);
  box-shadow: var(--uk-shadow-xs);
}
.wizard-menu .step .nav-link i { font-size: 12px; }

/* ═══════════════════════════════════════════════════
   그리드 — 12컬럼 Bootstrap 호환
═══════════════════════════════════════════════════ */
.container-fluid {
  width: 100%;
  padding: 0 16px;
}
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
[class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
  min-width: 0;
}

/* xs */
.col-1  { flex: 0 0 8.333%;   max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
  .mt-sm-0   { margin-top: 0; }
}
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.333%;   max-width: 8.333%; }
  .col-md-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
  .col-md-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
  .col-md-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
  .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
  .col-md-11 { flex: 0 0 91.666%;  max-width: 91.666%; }
  .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
  .d-md-none { display: none !important; }
}
@media (min-width: 992px) {
  .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
  .d-lg-none { display: none !important; }
}
@media (min-width: 1200px) {
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

.row-nav-line { width: 100%; margin: 0; }
.justify-content-center { justify-content: center; }
.row.justify-content-center { justify-content: center; }

/* ═══════════════════════════════════════════════════
   유틸리티
═══════════════════════════════════════════════════ */
/* float */
.float-right { float: right; }
.float-left  { float: left; }
.clearfix::after { content:''; display:table; clear:both; }

/* display */
.d-flex        { display: flex !important; }
.d-none        { display: none !important; }
.d-block       { display: block !important; }
.d-inline      { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.align-items-center   { align-items: center !important; }
.align-items-start    { align-items: flex-start !important; }
.justify-content-end  { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.ml-auto  { margin-left: auto !important; }
.mr-auto  { margin-right: auto !important; }
.ml-md-auto { margin-left: auto !important; }

/* text */
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-left    { text-align: left !important; }
.text-danger  { color: var(--uk-danger) !important; }
.text-success { color: var(--uk-success) !important; }
.text-warning { color: var(--uk-warning) !important; }
.text-info    { color: var(--uk-info) !important; }
.text-muted   { color: var(--uk-text-muted) !important; }
.text-primary { color: var(--uk-accent) !important; }
.text-white   { color: #fff !important; }
.text-section { color: var(--uk-text-sub); font-size: 10px; font-weight: 700;
                letter-spacing: 0.8px; text-transform: uppercase; }

/* font */
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.fw-600                     { font-weight: 600 !important; }

/* spacing */
.m-0  { margin: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.p-0  { padding: 0 !important; }
.pl-4 { padding-left: 16px !important; }
.w-100{ width: 100% !important; }
.w-50 { width: 50% !important; }
.op-7 { opacity: 0.7; }

/* border */
.separator-solid { border: 0; border-top: 1px solid var(--uk-border); margin: 14px 0; }

/* bg */
.bg-white             { background: var(--uk-surface) !important; }
.bg-secondary-gradient{ background: linear-gradient(155deg,#1a2540 0%,#0f172a 100%) !important; }

/* misc */
.cursor-pointer  { cursor: pointer; }
.block           { display: block; }
.link            { cursor: pointer; }

.animated { animation-duration: 0.18s; animation-fill-mode: both; }
.fadeIn { animation-name: _fadeIn; }
@keyframes _fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* IBSheet 컨테이너 margin/overflow fix */
.ibsheet { width: 100%; }
[id^="DIV_sheet"] { border: none !important; }

/* ═══════════════════════════════════════════════════
   로그인 페이지
═══════════════════════════════════════════════════ */
/*
   로그인 화면 — body 가 flex 컨테이너다.

   ⚠ flex-direction 을 반드시 column 으로 둘 것 (2026-08).
     기본값(row)이면 body 의 자식들이 가로로 나열된다. 예전에는 자식이 .wrapper 하나뿐이라
     드러나지 않았는데, 하단 법정표시(.ukd-site-footer)를 include 하면서 자식이 둘이 되어
     푸터가 로그인 패널 오른쪽에 세로로 붙고 좌우 패널이 눌렸다.
*/
body.login {
  background: var(--uk-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 로그인 패널이 남은 높이를 채우고 푸터는 그 아래에 깔린다 (스크롤 없이 보이게) */
body.login > .wrapper-login {
  flex: 1 1 auto;
  min-height: 0;
}

.wrapper-login {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.wrapper-login-full { flex-direction: row; }
.p-0 { padding: 0 !important; }

/* 왼쪽 브랜드 패널 */
.login-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.login-aside.bg-secondary-gradient::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(79,110,247,0.08);
  pointer-events: none;
}
.login-aside.bg-secondary-gradient::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(79,110,247,0.05);
  pointer-events: none;
}

.login-aside .title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
}
.login-aside .subtitle {
  font-size: 13px;
  line-height: 1.8;
  max-width: 320px;
}

/* 오른쪽 로그인 폼 */
.login-aside.bg-white { background: var(--uk-surface) !important; }

.container-login,
.container-signup {
  width: 100%;
  max-width: 380px;
}
.container-transparent { background: transparent; }
.container-signup { display: none; }

.login-form .form-group { margin-bottom: 16px; }
.login-form .form-group .form-control {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: var(--uk-radius);
}

.login-form h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--uk-text);
  margin-bottom: 4px;
}

.login-account {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--uk-text-sub);
}
.login-account .msg { margin-right: 4px; }
.login-account .link { color: var(--uk-accent); font-weight: 600; cursor: pointer; }
.login-account .link:hover { text-decoration: underline; }

.form-action-d-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.form-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════
   검색 툴바 (IBSheet 상단 컨트롤 영역)
═══════════════════════════════════════════════════ */
.search-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--uk-bg);
  border-bottom: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg) var(--uk-radius-lg) 0 0;
}
.search-toolbar label {
  font-size: 11px;
  font-weight: 600;
  color: var(--uk-text-sub);
  margin: 0;
  white-space: nowrap;
}
.search-toolbar select,
.search-toolbar input[type="text"] {
  padding: 5px 10px;
  font-size: 11px;
  border: 1.5px solid var(--uk-border);
  border-radius: var(--uk-radius-sm);
  background: var(--uk-surface);
  color: var(--uk-text);
  outline: none;
  transition: border-color var(--uk-transition);
  font-family: var(--uk-font);
}
.search-toolbar select:focus,
.search-toolbar input[type="text"]:focus {
  border-color: var(--uk-accent);
  box-shadow: 0 0 0 2px var(--uk-accent-bg);
}

/* 버튼 영역 (IBSheet 상단 actions) */
.sheet-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  background: var(--uk-surface);
  border-bottom: 1px solid var(--uk-border);
}

/* ═══════════════════════════════════════════════════
   주문발송 (dispatch.jsp) — 탭 + 스플리터 + 테이블
═══════════════════════════════════════════════════ */
.dispatch-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--uk-header-height));
  background: var(--uk-bg);
}

.dispatch-header {
  padding: 10px 20px;
  border-bottom: 1px solid var(--uk-border);
  background: var(--uk-surface);
  flex-shrink: 0;
}
.dispatch-header h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--uk-text);
}

/* 탭 바 */
.dispatch-tabbar {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--uk-border);
  background: var(--uk-surface);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.dispatch-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 1.5px solid var(--uk-border);
  border-bottom: none;
  background: var(--uk-surface);
  color: var(--uk-text-sub);
  cursor: pointer;
  border-radius: var(--uk-radius-sm) var(--uk-radius-sm) 0 0;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--uk-transition);
  white-space: nowrap;
}
.dispatch-tab:hover {
  background: var(--uk-accent-bg);
  color: var(--uk-accent);
  border-color: rgba(79,110,247,0.3);
}
.dispatch-tab.active {
  background: var(--uk-accent);
  color: #fff;
  border-color: var(--uk-accent);
  font-weight: 700;
}

/* 탭 내 배지 */
.dispatch-tab .badge {
  margin-left: 3px;
  padding: 2px 6px;
  background: var(--uk-accent-bg);
  color: var(--uk-accent);
  border-radius: var(--uk-radius-full);
  font-size: 10px;
  font-weight: 700;
}
.dispatch-tab.active .badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* 액션 버튼 영역 */
.top-actions {
  padding: 7px 16px;
  text-align: right;
  border-bottom: 1px solid var(--uk-border-soft);
  background: var(--uk-surface);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.top-actions .basic { margin-left: 0; }

/* 그리드 영역 래퍼 */
.pane-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 14px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 신규주문 요약 테이블 (마켓별 카운트) */
.nm-empty {
  padding: 40px;
  text-align: center;
  color: var(--uk-text-muted);
  font-size: 13px;
}

.nm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--uk-surface);
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg);
  box-shadow: var(--uk-shadow-xs);
  margin-top: 12px;
  overflow: hidden;
}
.nm-table th {
  background: var(--uk-bg);
  color: var(--uk-text-sub);
  padding: 9px 14px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--uk-border);
}
.nm-table td {
  padding: 11px 14px;
  text-align: center;
  border-bottom: 1px solid var(--uk-border-soft);
  font-size: 13px;
  color: var(--uk-text);
}
.nm-table tr:last-child td { border-bottom: none; }
.nm-table tr.row-zero td { color: var(--uk-text-muted); }
.nm-table tr.row-clickable:hover {
  background: var(--uk-accent-bg);
  cursor: pointer;
}
.nm-count.has  { font-weight: 700; color: var(--uk-accent); }
.nm-count.zero { color: var(--uk-text-muted); }

/* 스플리터 (상/하 그리드 분리 핸들) */
#splitter {
  height: 5px;
  background: var(--uk-border);
  cursor: row-resize;
  flex: 0 0 5px;
  user-select: none;
  transition: background var(--uk-transition);
}
#splitter:hover { background: var(--uk-accent); }

/* ═══════════════════════════════════════════════════
   알림 토스트 (lifecycle polling)
═══════════════════════════════════════════════════ */
.uk-toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uk-toast {
  background: var(--uk-surface);
  border: 1px solid var(--uk-border);
  border-left: 4px solid var(--uk-accent);
  border-radius: var(--uk-radius-md);
  box-shadow: var(--uk-shadow);
  padding: 12px 16px;
  min-width: 260px;
  max-width: 360px;
  font-size: 12px;
  color: var(--uk-text);
  animation: _fadeIn 0.2s ease;
}
.uk-toast.success { border-left-color: var(--uk-success); }
.uk-toast.danger  { border-left-color: var(--uk-danger); }
.uk-toast.warning { border-left-color: var(--uk-warning); }

/* ═══════════════════════════════════════════════════
   반응형
═══════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .wrapper-login-full { flex-direction: column; }
  .login-aside { width: 100% !important; min-height: 220px; padding: 32px 24px; }
  .login-aside .title { font-size: 22px; }

  .sidebar {
    position: fixed;
    left: -100%;
    z-index: 500;
    transition: left 0.25s ease;
    box-shadow: var(--uk-shadow-lg);
  }
  .sidebar.open { left: 0; }

  .main-header .logo-header { display: none; }
  .navbar-toggler { display: inline-flex !important; }
  .main-panel { width: 100%; }
}

@media (max-width: 767px) {
  .page-inner { padding: 14px 16px; }
  .card-body  { padding: 12px 14px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .w-50 { width: 100% !important; }
  .col-md-5 { flex: 0 0 100%; max-width: 100%; }
  .d-sm-none { display: none !important; }
  .hidden-caret { display: none; }
}

/* ═══════════════════════════════════════════════════
   sidebar.jsp 호환 패치 (B2B 프로젝트)
   ───────────────────────────────────────────────────
   원본 ukdream 데모 구조:
     <div class="wrapper">                          (display:flex, row)
       <div class="sidebar">                        (228px)
       <div class="main-panel">                     (flex:1, column)
         <div class="main-header">                  (sticky, 56px)
         <content>
       </div>
     </div>

   B2B sidebar.jsp 구조 (현재):
     <div class="wrapper">
       <div class="main-header">    ← sidebar.jsp 가 가장 먼저 출력
       <div class="sidebar">
       <div class="main-panel">
     </div>

   따라서 wrapper 의 flex children 이 3개가 되어 가로로 나열되는 문제 발생.
   해결: flex-wrap 으로 main-header 를 한 줄 통째 차지하게 만들고,
        sidebar + main-panel 은 그 아래 두 번째 행에 배치.
═══════════════════════════════════════════════════ */
/* 일반 페이지(wrapper-login 제외) 만 wrap 처리 — login 화면 깨지지 않도록 */
.wrapper:not(.wrapper-login) {
  flex-wrap: wrap;
  align-content: flex-start;
}

/* login 페이지는 두 login-aside 가 한 줄에 항상 들어가야 함 */
.wrapper.wrapper-login,
.wrapper.wrapper-login-full {
  flex-wrap: nowrap !important;
}

/* main-header 를 한 줄(100%) 차지 → 다음 행으로 sidebar + main-panel 떨어뜨림 */
.wrapper:not(.wrapper-login) > .main-header {
  flex: 0 0 100%;
  width: 100%;
}

/* sidebar.jsp 의 main-header 안 logo-header 는 sidebar 폭만큼 차지 */
.main-header > .logo-header {
  width: var(--uk-sidebar-width);
  flex-shrink: 0;
}
.main-header > .navbar.navbar-header {
  flex: 1;
}

/* navbar-header 의 ul.navbar-nav 가 container-fluid (block) 안에 갇혀
   ml-md-auto / margin-left:auto 가 안 먹는 문제. flex 로 변환해서 우측정렬 복구 */
.navbar.navbar-header > .container-fluid {
  display: flex;
  align-items: center;
  width: 100%;
}
.navbar.navbar-header > .container-fluid > .navbar-nav {
  margin-left: auto;
}

/* sidebar 는 main-header 아래 시작이므로 height:100vh 가 너무 큼 → 컨텐츠 영역 높이로 보정 */
.wrapper:not(.wrapper-login) > .sidebar {
  position: sticky;
  top: var(--uk-header-height);
  height: calc(100vh - var(--uk-header-height));
  min-height: 0;
}

/* main-panel 도 동일 */
.wrapper:not(.wrapper-login) > .main-panel {
  min-height: calc(100vh - var(--uk-header-height));
}

/* ── sheet-fill: IBSheet 단일 시트를 화면 끝까지 채움 (하단 여백 제거) ──
   body.sheet-fill 인 페이지에서 main-panel→page-inner→row→col→card→card-body 까지
   flex column 으로 연결해 마지막 시트 컨테이너(flex:1)가 잔여 높이를 모두 차지 */
body.sheet-fill .wrapper:not(.wrapper-login) > .main-panel {
  height: calc(100vh - var(--uk-header-height));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.sheet-fill .main-panel > .page-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.sheet-fill .page-inner > .row {
  flex: 1;
  min-height: 0;
}
body.sheet-fill .page-inner > .row > [class^="col-"],
body.sheet-fill .page-inner > .row > [class*=" col-"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.sheet-fill .page-inner .card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.sheet-fill .card > .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* sidebar.jsp 의 사용자 정보 collapse 가 기본 펼친 상태로 보이도록
   (Bootstrap "collapse in" 클래스 호환) */
.collapse.in,
.collapse.show { display: block; }

/* sidebar.jsp 의 dropdown-menu.notif-box 는 fadeIn show 상태로 들어옴
   → 의도치 않게 항상 펼쳐 보이는 문제 방지: 기본 닫힘 + show 일 때만 표시 */
.navbar-header .dropdown-menu.notif-box.animated.fadeIn:not(.show) {
  display: none;
}

/* logo-header 안의 navbar-brand (로고 이미지) 가 너무 크지 않도록 */
.logo-header .navbar-brand {
  max-height: 26px;
  width: auto;
}

/* navbar-header 의 nav-item 안에 인라인 스타일로 border:2px solid white 가 있어
   ukdream 의 light 테마와 충돌. 기본 ukdream pill 스타일로 강제 통일 */
.navbar-header .nav-item > a[style*="border:"] {
  color: var(--uk-text) !important;
  border: 1.5px solid var(--uk-border) !important;
  background: var(--uk-surface) !important;
}
.navbar-header .nav-item > a[style*="border:"] img {
  filter: none;
  opacity: 0.7;
}

/* sidebar.jsp 의 sidebar-style-2 + scrollbar-inner 호환
   (구 외부 테마의 padding/scrollbar 가 사라져 콘텐츠 위쪽이 헤더와 붙는 문제 방지) */
.sidebar-wrapper.scrollbar.scrollbar-inner {
  overflow-y: auto;
  overflow-x: hidden;
}

/* main-panel 안에 dispatch.jsp 가 height:100vh 인라인을 가지지만
   wrapper 가 wrap 되며 sidebar 와 같은 줄이라 100vh 면 헤더만큼 넘침.
   → 인라인 우선순위를 못 이기므로 dispatch-page 자체에 보정 */
.main-panel > .dispatch-page {
  height: calc(100vh - var(--uk-header-height)) !important;
}

/* ═══════════════════════════════════════════════════
   강화 패치 (사용자 제보 이슈 대응)
═══════════════════════════════════════════════════ */

/* 1. 예치금 리스트 dropdown — animated.fadeIn 단독으로는 표시되지 않도록 강제.
      .show 가 같이 있을 때만 펼침. (ukdream main CSS 의 fadeIn 자동표시 규칙을 무력화) */
.navbar-header .dropdown-menu,
.dropdown-menu.notif-box {
  display: none !important;
}
.navbar-header .dropdown-menu.show,
.dropdown-menu.notif-box.show {
  display: block !important;
}

/* 2. main-panel 이 wrap 모드에서 sidebar 옆 폭을 다 못 차지하는 문제 보강.
      flex-basis 를 사이드바 외 나머지로 명시적 계산. */
.wrapper:not(.wrapper-login) > .main-panel {
  flex: 1 1 calc(100% - var(--uk-sidebar-width));
  max-width: calc(100% - var(--uk-sidebar-width));
  min-width: 0;
}

/* 3. JSP 의 .page-inner / .container / .container-fluid 가 max-width 로 좁히는 경우
      메인 영역 안에서는 100% 사용 */
.main-panel .container {
  max-width: 100%;
}
.main-panel .page-inner {
  width: 100%;
  padding: 16px 20px;
}

/* 4. footer 잔존시 숨김 (혹시 누락된 페이지 대비) */
.main-panel > .footer,
.main-panel footer.footer { display: none !important; }

/* 5. IBSheet 컨테이너가 0 폭으로 렌더되는 것을 방지 — 부모에 명시적 width */
[id^="DIV_sheet"] {
  width: 100% !important;
  min-width: 200px;
}

/* ═══════════════════════════════════════════════════
   콘텐츠 높이 캐스케이드 — 카드/시트가 화면 끝까지 늘어나도록
   ───────────────────────────────────────────────────
   IBSheet 가 createIBSheet("sheet", "100%", "80%") 처럼 % 높이를 쓰는데
   부모 체인에 명시적 height 가 없으면 0 으로 계산되어 시트가 작아짐.
   .main-panel → .page-inner → .card → form → .card-body 까지 flex column
   으로 연결하여 100% 높이가 끝까지 전달되도록 한다.
═══════════════════════════════════════════════════ */
.wrapper:not(.wrapper-login) > .main-panel {
  display: flex;
  flex-direction: column;
}

.main-panel > .page-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* page-inner 의 첫 번째 직접 자식이 row 래퍼면 row 도 stretch */
.main-panel > .page-inner > .row {
  flex: 1 1 auto;
  min-height: 0;
}
.main-panel > .page-inner > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* page-inner 직접 자식 카드는 stretch */
.main-panel > .page-inner > .card,
.main-panel > .page-inner > .row > [class*="col-"] > .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

/* .card 안에 form 이 있는 경우 (order/list.jsp 패턴) */
.card > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* .card-body 자체가 stretch — 시트 % 높이 계산 가능하도록 */
.card > .card-body,
.card > form > .card-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

/* IBSheet 외부 wrapper 가 card-body 높이를 그대로 이어받도록 */
.card-body > [id^="DIV_sheet"],
.card-body > [id^="ibsheet_"] {
  width: 100% !important;
  height: 100% !important;
}

/* page-inner 의 page-inner-fill 변종도 동일 처리 */
.main-panel > .page-inner.page-inner-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   IBSheet 카드 경계 이탈 방지
   ───────────────────────────────────────────────────
   IBSheet 의 내부 table 이 컬럼 합산 폭이 클 때 부모 카드 밖으로
   흘러넘치는 문제. .card / .card-body 에 overflow hidden 을 걸어
   카드 박스 안에 가두고, IBSheet 자체의 내부 스크롤바가 가로 스크롤을
   담당하도록 한다.
═══════════════════════════════════════════════════ */
.wrapper:not(.wrapper-login) > .main-panel {
  overflow-x: hidden;          /* 페이지 단위로도 가로 스크롤 차단 */
}
.main-panel > .page-inner {
  max-width: 100%;
  overflow-x: hidden;
}
.main-panel .card {
  overflow: hidden;            /* 카드 박스 경계로 내용 클립 */
  max-width: 100%;
}
.main-panel .card-body {
  min-width: 0;                /* flex 자식이 부모 폭을 무시하지 않도록 */
  overflow: hidden;            /* IBSheet 자체 스크롤바가 작동하도록 */
}

/* IBSheet 의 외부 wrapper 는 카드 100% 폭 안에서 자체 스크롤 */
.card-body > [id^="DIV_sheet"] {
  max-width: 100%;
  overflow: auto !important;
}