/* ─────────────────────────────────────────────────────────────
   MobilHi ERP 셸 디자인 토큰 (레퍼런스 my_css.css 재구성)
   navy #172852 · cream #F6F7F9 · table border #e1e8f0 · 240px aside · 70px nav
   ───────────────────────────────────────────────────────────── */
@import url("../fonts/pretendard/pretendardvariable-dynamic-subset.7d47757adea9.css");

:root {
  --navy: #172852; --navy-2: #294ca1; --navy-hover: #132244; --cream: #F6F7F9;
  --line: #e1e8f0; --cell: #e8edf5; --th-text: #6b7280; --td-text: #374151; --even: #fafbfd; --hover: #f0f4f9; --sel: #e3f2fd;
  --get: darkgray; --post: #00B050; --print: #0078D4; --red: #b90000; --blue: #002060;
  --ok: #2e7d32; --danger: #c62828; --warn: #c55a11; --info: #2e74b5; --mismatch: #fff7df;
  --fms-green: #E1F7E1; --fms-yellow: #FFFF88; --fms-red: #ff8888;
  --aside-w: 240px; --nav-h: 70px;
}
html { background: var(--cream); scrollbar-gutter: stable; }
body.erp { margin: 0; font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', Roboto, sans-serif; color: var(--td-text); font-size: 14px; background: var(--cream); }
body.erp * { box-sizing: border-box; }
.material-icons { font-family: 'Material Icons' !important; font-feature-settings: 'liga'; vertical-align: middle; }

/* ── 사이드바 */
#aside { position: fixed; top: 0; left: 0; width: var(--aside-w); height: 100%; padding: calc(var(--nav-h) + 10px) 10px 20px; background: #fff; border-right: 1px solid #DFE0E1; z-index: 4; overflow-y: auto; scrollbar-width: none; }
#aside::-webkit-scrollbar { display: none; }
.aside_btn { width: 100%; border: 0; background: none; padding: 12px 0 12px 16px; color: gray; display: flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; text-align: left; }
.aside_btn:hover, .aside_btn.open { color: #000; font-weight: 700; }
.aside_btn .custom_arrow { font-size: 18px; transition: .2s; }
.aside_btn.open .custom_arrow { transform: rotate(90deg); }
.aside_btn .nav_title { color: #111; font-weight: 700; }
.aside_btn .badge { margin-left: auto; margin-right: 8px; font-size: 10px; }
.aside_collapse { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.aside_collapse.show { max-height: 800px; }
.aside_div { background: #e3e6ec; border-radius: 5px; padding: 5px; display: flex; flex-direction: column; margin: 0 4px 6px; }
.aside_a { font-size: 13.5px; padding: 8px 9px 8px 28px; margin: 1px; display: flex; justify-content: space-between; align-items: center; color: #222; text-decoration: none; border-radius: 4px; }
.aside_a:hover { background: #eef5ff; color: #000; }
.aside_a.active { background: var(--navy); color: #fff; font-weight: 700; }
.aside_a .favorite-star { color: #ccc; font-size: 13px; }
.aside_a.active .favorite-star, .aside_a .favorite-star.active { color: #ffd700; }
.aside_hr { border: 0; border-top: 1px solid #eee; margin: 6px 10px; }
.aside_demo_tag { margin: 0 6px 10px; padding: 8px 10px; border-radius: 6px; background: #FBEEDC; color: #8a4b00; font-size: 12px; line-height: 1.5; }

/* ── 상단바 */
#nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 16px; }
#nav .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
#nav .logo .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
#nav .logo .word { font-weight: 800; color: var(--navy); font-size: 18px; letter-spacing: -.3px; }
#nav .logo .word small { color: #8A8D93; font-weight: 400; font-size: 12px; margin-left: 6px; }
#nav_right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #333; }
#nav_right .company-sel { border: 1px solid #ddd; border-radius: 6px; padding: 5px 8px; font-size: 13px; background: #fff; }
#nav_right .btn-logout { background: #AD2A2A; color: #fff; border: 0; border-radius: 5px; padding: 6px 12px; font-size: 12px; }
#nav_right .nav-ico { color: #F68026; font-size: 26px; }
#nav_right .demo-pill { background: #D6F3EC; color: #0b6b5c; border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 12px; }

/* ── 본문 */
#main { padding-left: var(--aside-w); padding-top: var(--nav-h); min-height: 100vh; }
#content_load { padding: 20px 22px 40px; }
.sub_title { display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 0 12px; padding-left: 12px; border-left: 5px solid #000; font-weight: 800; font-size: 17px; color: #111; }
.sub_title .ms-auto { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sub_title .crumb { font-size: 12px; color: #8A8D93; font-weight: 400; margin-left: 4px; }
.help_note { font-size: 12px; color: #666; margin: 0 0 10px; }

/* ── 검색 폼 */
.search_box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.search_box .grp { display: flex; align-items: stretch; height: 32px; }
.search_box .grp > label, .search_box .grp .lbl { display: flex; align-items: center; padding: 0 10px; background: #f2f4f7; border: 1px solid #dfe3ea; border-right: 0; border-radius: 6px 0 0 6px; font-size: 12.5px; color: #555; white-space: nowrap; }
.search_box .grp input, .search_box .grp select { height: 32px; border: 1px solid #dfe3ea; border-radius: 0 6px 6px 0; padding: 0 8px; font-size: 13px; min-width: 120px; background: #fff; font-family: inherit; }
.search_box .grp input[type=number] { min-width: 80px; }
.search_box .button_box { margin-left: auto; display: flex; gap: 6px; }
.lbl-green { background: #4F8C6F !important; color: #fff !important; border-color: #4F8C6F !important; }

/* ── 버튼 */
.btn_get, .btn_post, .btn_print, .btn_red, .btn_blue, .btn_black, .btn_ms { border: 0; border-radius: 5px; padding: 7px 14px; font-size: 13px; color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; line-height: 1.2; }
.btn_get { background: var(--get); } .btn_get:hover { background: grey; }
.btn_post { background: var(--post); } .btn_post:hover { background: #006d33; }
.btn_print { background: var(--print); } .btn_print:hover { background: #004f8c; }
.btn_red { background: var(--red); } .btn_red:hover { background: #800000; }
.btn_blue { background: var(--blue); } .btn_blue:hover { background: #001238; }
.btn_black { background: #000; } .btn_black:hover { background: #2f2f2f; }
.btn_ms { padding: 5px 10px; font-size: 12px; }
.btn_xlsx { background: #fff; border: 1px solid #2F7A22; color: #2F7A22; border-radius: 5px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.btn_xlsx:hover { background: #2F7A22; color: #fff; }
.btn_orange { background: #F24E1E; color: #fff; border: 0; border-radius: 5px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.btn_teal { background: #226699; color: #fff; border: 0; border-radius: 5px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.kbd { display: inline-block; font-size: 10px; background: rgba(255,255,255,.25); border-radius: 3px; padding: 0 4px; margin-left: 5px; }

/* ── 탭 */
.nav-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-left: 0; list-style: none; flex-wrap: wrap; }
.nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px 6px 0 0; background: #E9ECEF; color: #808080; font-weight: 700; font-size: 13px; text-decoration: none; border: 0; cursor: pointer; }
.nav-tabs .nav-link.active { background: var(--navy); color: #fff; }
.nav-tabs .badge { font-size: 10px; border-radius: 10px; padding: 2px 6px; background: #6c757d; color: #fff; }
.nav-tabs .badge.warn { background: #ffc107; color: #222; }

/* ── 테이블 */
.scroll_div { overflow: auto; max-height: calc(100vh - 330px); border: 1px solid #eee; border-radius: 6px; background: #fff; }
.my_table_data { font-size: 13px; text-align: center; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 6px; overflow: clip; background: #fff; }
.my_table_data th, .my_table_data td { height: 35px; padding: 0 12px; border-bottom: 1px solid var(--cell); border-right: 1px solid var(--cell); white-space: nowrap; }
.my_table_data th:last-child, .my_table_data td:last-child { border-right: 0; }
.my_table_data thead th { position: sticky; top: 0; z-index: 3; background: linear-gradient(to bottom, #f7f9fc 0%, #f1f1f6 100%); color: var(--th-text); font-weight: 600; font-size: 12.5px; letter-spacing: .03em; }
.my_table_data thead th.sortable { cursor: pointer; user-select: none; }
.my_table_data thead th.sortable:hover { color: var(--navy); background: linear-gradient(to bottom, #eef2f8 0%, #e7e9f0 100%); }
.my_table_data thead th.sortable::after { content: "⇅"; font-size: 10px; margin-left: 4px; opacity: .3; }
.my_table_data thead th.sort-asc::after { content: "▲"; opacity: 1; color: var(--navy); }
.my_table_data thead th.sort-desc::after { content: "▼"; opacity: 1; color: var(--navy); }
.my_table_data th.table_main { background: linear-gradient(170deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; text-align: left; font-size: 14px; font-weight: 700; padding-left: 14px; }
.my_table_data tbody tr:nth-child(even) { background: var(--even); }
.my_table_data.tr_hover tbody tr:hover { background: var(--hover); cursor: pointer; }
.my_table_data td.num { text-align: right; font-variant-numeric: tabular-nums; }
.my_table_data td.left { text-align: left; }
.my_table_data td input, .my_table_data td select { height: 26px; border: 1px solid #dfe3ea; border-radius: 4px; padding: 0 6px; font-size: 12.5px; font-family: inherit; width: 100%; }
.my_table_data td .cellbtn { border: 1px solid #cfd6e0; background: #fff; border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.my_table_data td .cellbtn:hover { background: var(--hover); }
tr.mismatch td { background: var(--mismatch) !important; }
tr.selected td { background: var(--sel) !important; }
.bg_green { background: var(--fms-green) !important; } .bg_yellow { background: var(--fms-yellow) !important; } .bg_red { background: var(--fms-red) !important; }
.bg-am { background: #fff3cc !important; } .bg-pm { background: #ffdac4 !important; } .bg-rest { background: #ffd6f1 !important; } .bg-annual { background: #C6EFCE !important; } .bg-short { background: #a5ffb6 !important; } .bg-off { background: #f8d7da !important; }
.t-ok { color: var(--ok); font-weight: 700; } .t-danger { color: var(--danger); font-weight: 700; } .t-warn { color: var(--warn); font-weight: 700; } .t-info { color: var(--info); font-weight: 700; } .t-muted { color: #888; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; }
.tag-ok { background: #e6f4ea; color: var(--ok); } .tag-danger { background: #fde8e8; color: var(--danger); } .tag-warn { background: #fdefe3; color: var(--warn); } .tag-info { background: #e6f0fa; color: var(--info); } .tag-gray { background: #eef0f3; color: #555; } .tag-navy { background: var(--navy); color: #fff; }

/* ── KPI 카드 */
.kpi_row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.kpi { border: 1px solid #ddd; border-radius: 6px; padding: 8px 16px; min-width: 140px; background: #fff; }
.kpi .l { font-size: 12px; color: #888; } .kpi .v { font-size: 22px; font-weight: 800; color: #222; margin-top: 2px; }
.kpi .v.ok { color: var(--ok); } .kpi .v.danger { color: var(--danger); } .kpi .v.warn { color: var(--warn); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.panel h4 { margin: 0 0 8px; font-size: 13.5px; color: #333; font-weight: 800; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── 토스트 · 스피너 */
#toast_area { position: fixed; top: 84px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast_item { background: #222; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: toastin .25s ease; max-width: 420px; }
.toast_item.ok { background: #1f7a3d; } .toast_item.warn { background: #b45309; } .toast_item.danger { background: #b91c1c; }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
#modal_loading { position: fixed; inset: 0; background: rgba(255,255,255,.55); display: none; place-items: center; z-index: 998; }
.htmx-request #modal_loading, #modal_loading.htmx-request { display: grid; }
.spinner { width: 42px; height: 42px; border: 4px solid #dfe3ea; border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── 시뮬레이션 가이드 배너 */
.sim_guide { display: flex; gap: 12px; align-items: flex-start; background: #fff8ec; border: 1px solid #f5d9a8; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #6b4a12; }
.sim_guide .n { background: #F08A24; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.sim_guide ol { margin: 0; padding-left: 18px; } .sim_guide li { margin: 2px 0; }
.sim_guide b { color: #8a4b00; }
.demo_footer { margin-top: 24px; padding: 14px 16px; border-radius: 8px; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.demo_footer .cta { background: #F08A24; color: #fff; text-decoration: none; padding: 9px 16px; border-radius: 6px; font-weight: 800; font-size: 13px; }
.demo_footer .cta.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.demo_footer small { color: #C9D6E5; }

/* ── 모달 */
.mh-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; place-items: center; z-index: 900; }
.mh-modal.show { display: grid; }
.mh-modal .box { background: #fff; border-radius: 10px; width: min(560px, 94vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mh-modal .box.lg { width: min(960px, 96vw); }
.mh-modal .hd { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; }
.mh-modal .bd { padding: 14px 16px; font-size: 13px; }
.mh-modal .ft { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 8px; }
.mh-modal .x { border: 0; background: none; font-size: 20px; cursor: pointer; color: #666; }
.form_row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.form_row label { min-width: 70px; color: #444; }
.form_row input, .form_row select { height: 32px; border: 1px solid #dfe3ea; border-radius: 6px; padding: 0 8px; font-size: 13px; font-family: inherit; }

/* ── 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 4px; margin: 12px 0; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-block; padding: 4px 9px; border: 1px solid #dfe3ea; border-radius: 4px; font-size: 12px; color: #333; text-decoration: none; background: #fff; }
.pagination .active span { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 1000px) { #aside { transform: translateX(-100%); } #main { padding-left: 0; } .grid2, .grid3 { grid-template-columns: 1fr; } }

/* 지도 타일 미로딩 시 도식 배경 */
.leaflet-container { background: #eef2f6 !important; background-image: linear-gradient(rgba(23,40,82,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(23,40,82,.06) 1px, transparent 1px) !important; background-size: 40px 40px !important; }
/* OSM 타일을 밝은 회색 톤으로(ERP 셸과 조화) */
.leaflet-tile-pane { filter: grayscale(0.9) brightness(1.06) contrast(0.92); }