/* ═════════════ 디자인 기준 ═════════════
   글꼴: Pretendard / 크기: 제목 20 · 소제목 16 · 본문·표 14 · 보조 12 (px)
   색: 회사 로고 파랑 계열 #2b4a96 (주요 버튼·링크·선택), 주황 #f39a2b (강조 점) / 보조 outline-secondary / 삭제 outline-danger
*/
@font-face { font-family: "Pretendard Fallback"; src: local("Malgun Gothic"), local("Apple SD Gothic Neo"), local("Noto Sans KR"); size-adjust: 94%; ascent-override: 96%; descent-override: 25%; }
@font-face { font-family: Pretendard; font-weight: 400; font-display: swap; src: url(../lib/pretendard/Pretendard-Regular.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url(../lib/pretendard/Pretendard-SemiBold.woff2) format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url(../lib/pretendard/Pretendard-Bold.woff2) format("woff2"); }
:root {
    --app-primary: #2b4a96; --app-primary-d: #213a78; --app-primary-l: #eaf0fb; --app-accent: #f39a2b;
    --bs-primary: #2b4a96; --bs-primary-rgb: 43,74,150; --bs-link-color: #2b4a96; --bs-link-color-rgb: 43,74,150; --bs-link-hover-color: #213a78; --bs-link-hover-color-rgb: 33,58,120;
    --bs-primary-bg-subtle: #eaf0fb; --bs-primary-text-emphasis: #213a78; --bs-focus-ring-color: rgba(43,74,150,.2); --app-sidebar-w: 236px; --app-bg: #f4f6f9; --app-border: #e3e6ea; --app-muted: #6b7685;
    --fs-title: 1.25rem; --fs-sub: 1rem; --fs-base: .875rem; --fs-small: .75rem;
    --bs-body-font-family: Pretendard, "Pretendard Fallback", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; --bs-body-font-size: var(--fs-base);
}
html { font-size: 16px; }
body { background: var(--app-bg); font-size: var(--fs-base); -webkit-text-size-adjust: 100%; color: #232a33; }
small, .small, .form-text { font-size: var(--fs-small) !important; }
h2, .h2, .section-title { font-size: var(--fs-sub) !important; font-weight: 700; }
.text-muted { color: var(--app-muted) !important; }
.num, td.num, th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.c, td.c { text-align: center !important; }

/* ── 레이아웃 ── */
.app-navbar { background: var(--app-primary); min-height: 52px; }
.app-navbar .navbar-brand { font-size: 1.05rem; }
.app-shell { display: flex; min-height: calc(100vh - 52px); }
.app-main { flex: 1; min-width: 0; padding: 1rem; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) {
    .app-sidebar { width: var(--app-sidebar-w); flex-shrink: 0; background: #fff; border-right: 1px solid var(--app-border); position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; }
    .app-main { padding: 1.25rem 1.75rem; }
}
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.page-title { font-size: var(--fs-title); font-weight: 700; margin: 0 auto 0 0; }
.page-icon { margin-right: .4rem; }
.page-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── 사이드바 메뉴 ── */
.menu-section { padding: .4rem 0; border-bottom: 1px solid #f0f1f3; }
.menu-title { font-size: var(--fs-small); font-weight: 700; color: #8a94a3; padding: .45rem 1.1rem .2rem; letter-spacing: .03em; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list.sub .menu-link { padding-left: 2.6rem; font-size: var(--fs-base); }
.menu-link { display: flex; align-items: center; gap: .55rem; padding: .62rem 1.1rem; color: #2b3440; text-decoration: none; font-size: .9rem; position: relative; }
.menu-link:hover { background: #f2f5fa; color: var(--app-primary); }
.menu-link.active { background: #e8eef8; color: var(--app-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--app-primary); }
.menu-icon { width: 1.3rem; text-align: center; flex-shrink: 0; }
.menu-text { flex: 1; }
.menu-caret::after { content: "▾"; color: #9aa3ae; transition: transform .15s; display: inline-block; }
.menu-link.collapsed .menu-caret::after { transform: rotate(-90deg); }
.drag-handle, .fav-btn { display: none; }
.fav-btn { border: 0; background: none; color: #f0a020; font-size: 1rem; padding: 0 .2rem; line-height: 1; }
.fav-section.empty .menu-list { display: none; }
.fav-section .menu-empty-hint { display: none; }
.fav-section.empty { display: none; }
#menuRoot.editing .fav-section.empty { display: block; }
#menuRoot.editing .fav-section.empty .menu-empty-hint { display: block; padding: .2rem 1.1rem .5rem; font-size: var(--fs-small); color: #9aa3ae; }
#menuRoot.editing .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; margin-left: -6px; cursor: grab; color: #9aa3ae; touch-action: none; user-select: none; }
#menuRoot.editing .fav-btn { display: inline; }
#menuRoot.editing .menu-list.sub { display: block !important; }
.menu-edit-bar { padding: .8rem 1.1rem 1.2rem; }
.menu-edit-actions { display: none; }
#menuRoot.editing .menu-edit-actions { display: block; }
#menuRoot.editing #menuEditBtn { display: none; }
.sortable-ghost { opacity: .4; }

/* ── 상단 하위메뉴 탭 ── */
.app-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .25rem; border-bottom: 1px solid var(--app-border); }
.app-tabs .nav-link { white-space: nowrap; color: #4a5563; padding: .55rem .9rem; border-bottom: 2px solid transparent; border-radius: 0; font-size: var(--fs-base); }
.app-tabs .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); font-weight: 700; }

/* ── 카드·검색영역·목록 ── */
.card { border: 0; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.stat-card { border: 0; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.stat-card .stat-label { color: var(--app-muted); font-size: var(--fs-small); }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; }
.search-panel { background: #fff; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: .85rem; margin-bottom: .85rem; }
.search-panel .form-label { font-size: var(--fs-small); color: var(--app-muted); margin-bottom: .2rem; }
.search-btns { display: flex; gap: .4rem; align-items: flex-end; }
.list-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.list-count { color: var(--app-muted); }
.list-note { color: var(--app-muted); font-size: var(--fs-small); }
.form-card { max-width: 920px; }
.form-card .card-body { padding: 1.25rem; }
.form-section-title { font-size: var(--fs-sub); font-weight: 700; margin: 1.25rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--app-border); }
.form-actions { display: flex; gap: .5rem; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.form-actions .btn-danger-end { margin-left: auto; }
.form-label { font-weight: 600; font-size: var(--fs-base); margin-bottom: .3rem; }
.req::after { content: " *"; color: #d63939; }
.menu-card { border: 0; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); text-decoration: none; color: inherit; height: 100%; transition: transform .1s; background: #fff; }
.menu-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.btn, .form-control, .form-select { min-height: 38px; font-size: var(--fs-base); }
.btn-sm, .form-control-sm, .form-select-sm { min-height: 31px; font-size: var(--fs-small); }
.btn-lg { min-height: 46px; font-size: 1rem; }
.badge { font-weight: 600; font-size: .72rem; }
.login-wrap { min-height: calc(100vh - 52px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.empty-row td { text-align: center !important; color: var(--app-muted); padding: 2rem !important; }

/* ── 데이터 표 (헤더 가운데, 금액 오른쪽, 넘치면 … + 마우스 올리면 전체) ── */
.data-table { margin-bottom: 0; font-size: var(--fs-base); }
.data-table > thead th { text-align: center; vertical-align: middle; background: #f6f8fb; color: #4a5563; font-weight: 600; white-space: nowrap; position: relative; border-bottom: 1px solid var(--app-border); user-select: none; }
.data-table > tbody td { vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.data-table > tbody td.wrap { white-space: normal; }
.data-table > tbody td.actions { overflow: visible; text-align: center; width: 1%; }
.data-table th.sortable a { color: inherit; text-decoration: none; cursor: pointer; display: block; }
.data-table th.client-sort { cursor: pointer; }
.data-table th.sortable:hover, .data-table th.client-sort:hover { background: #edf1f7; }
.sort-ind::after { content: "↕"; color: #c0c6cf; font-size: .7rem; margin-left: .25rem; }
.sorted-asc .sort-ind::after { content: "▲"; color: var(--app-primary); }
.sorted-desc .sort-ind::after { content: "▼"; color: var(--app-primary); }
.data-table.resizable { table-layout: fixed; }
.col-resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.col-resizer:hover, .col-resizer.dragging { background: rgba(31,59,99,.25); }
.table-wrap { overflow-x: auto; }
.card > .table-wrap { border-radius: .7rem; }

/* 모바일: 표를 카드로 */
@media (max-width: 767.98px) {
    .app-main { padding: .75rem; }
    .table-mobile-cards thead { display: none; }
    .table-mobile-cards, .table-mobile-cards tbody, .table-mobile-cards tr, .table-mobile-cards td { display: block; width: 100% !important; max-width: none !important; }
    .table-mobile-cards tr { background: #fff; border: 1px solid var(--app-border); border-radius: .6rem; margin-bottom: .6rem; padding: .45rem .75rem; }
    .table-mobile-cards td { border: 0 !important; padding: .25rem 0 !important; display: flex !important; justify-content: space-between; gap: 1rem; text-align: right !important; white-space: normal !important; }
    .table-mobile-cards td::before { content: attr(data-label); font-weight: 600; color: var(--app-muted); text-align: left; flex-shrink: 0; }
    .table-mobile-cards td[data-label=""]::before { content: none; }
    .table-mobile-cards td.actions { justify-content: flex-end; gap: .35rem; flex-wrap: wrap; width: 100%; }
    .table-mobile-cards tr.empty-row td { justify-content: center; }
    .card:has(> .table-wrap > .table-mobile-cards) { background: transparent; box-shadow: none; }
}

/* ── Tom Select (검색되는 선택상자): 테두리·화살표는 Bootstrap .form-select 그대로 (테마 규칙) ── */
.ts-wrapper.form-select { min-height: 38px; height: auto; display: flex; align-items: center; }
.ts-wrapper.form-select.focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.ts-wrapper .ts-control { font-size: var(--fs-base); line-height: 1.5; width: 100%; }
.ts-wrapper .ts-control > input { font-size: var(--fs-base); min-width: 3rem; }
.ts-wrapper.multi .ts-control .item { background: #e8eef8; border-radius: .3rem; padding: 0 .4rem; margin: 0; font-size: var(--fs-small); }
.ts-wrapper.form-select-sm { min-height: 31px; font-size: var(--fs-small); }
.ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-select-sm .ts-control > input { font-size: var(--fs-small); }
.ts-wrapper.multi .ts-control { gap: .25rem; }
.ts-wrapper .ts-control .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-dropdown { font-size: var(--fs-base); z-index: 1060; border-radius: .5rem; margin-top: 4px; box-shadow: 0 8px 24px rgba(20,30,50,.14); border-color: var(--app-border); overflow: hidden; }
.ts-dropdown .ts-dropdown-content { max-height: 280px; }
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .optgroup-header { padding: .45rem .75rem; }
.ts-dropdown .optgroup-header { font-size: var(--fs-small); color: var(--app-muted); font-weight: 700; background: #f6f8fb; }
.ts-dropdown .active { background: #e8eef8; color: #1f3b63; }
.ts-dropdown .selected { font-weight: 600; }
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; }

/* ── 알림 ── */
.app-toasts { right: 0; bottom: 0; z-index: 2000; }
@media (max-width: 767.98px) { .app-toasts { top: 56px; bottom: auto; left: 0; } }

/* ── 출역표 ── */
.matrix-wrap { overflow: auto; max-height: calc(100vh - 260px); background: #fff; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.matrix th, .matrix td { border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; text-align: center; padding: 0; height: 34px; min-width: 34px; }
.matrix thead th { position: sticky; top: 0; background: #f6f8fb; z-index: 2; font-weight: 600; }
.matrix thead th.sun, .matrix td.sun { color: #d63939; }
.matrix thead th.sat { color: #2463c7; }
.matrix thead th.today { background: #e8eef8; }
.matrix .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; text-align: left; padding: 0 .5rem; min-width: 128px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix thead .sticky-col { z-index: 3; background: #f6f8fb; }
.matrix td.cell { cursor: pointer; font-variant-numeric: tabular-nums; }
.matrix td.cell:hover { background: #e8eef8; }
.matrix td.cell.has { background: #f0f6ff; font-weight: 700; color: #1f3b63; }
.matrix td.cell.ot { box-shadow: inset 0 -3px 0 #f0a020; }
.matrix td.cell.factory { color: #7a4b00; background: #fff6e5; }
.matrix td.tot { font-weight: 700; padding: 0 .4rem; text-align: right; white-space: nowrap; background: #fafbfc; }
.matrix tfoot td { position: sticky; bottom: 0; background: #f6f8fb; font-weight: 700; }
.legend-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; vertical-align: -1px; margin-right: .2rem; }

/* ── 드래그 트리 ── */
.dnd-tree, .dnd-tree ul { list-style: none; margin: 0; padding-left: 1.4rem; min-height: 6px; }
.dnd-tree { padding-left: 0; }
.dnd-node > .dnd-row { display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border: 1px solid var(--app-border); border-radius: .45rem; background: #fff; margin: .25rem 0; }
.dnd-node > .dnd-row:hover { border-color: #b8c4d6; }
.dnd-node > .dnd-row.selected { border-color: var(--app-primary); background: #f2f6fc; }
.dnd-node .grip { cursor: grab; color: #9aa3ae; }
.dnd-node .node-title { flex: 1; cursor: pointer; }
.dnd-node .node-meta { color: var(--app-muted); font-size: var(--fs-small); }
.dnd-node.depth-1 > .dnd-row .node-title { font-weight: 700; }
.dnd-node .node-badge { font-size: var(--fs-small); }
.tree-bar { position: sticky; top: .5rem; z-index: 5; }
.dnd-tree .sortable-ghost > .dnd-row { background: #e8f0fb; border-style: dashed; }
.tree-help { color: var(--app-muted); font-size: var(--fs-small); }
.dnd-tree ul:empty { min-height: 4px; }
.dnd-tree .dnd-row { margin: .2rem 0; }

/* ═════════ v0.3.1 디테일 ═════════ */
/* 표: 줄 높이·hover·선택된 줄·세로 스크롤 시 머리글 고정 */
.data-table > :not(caption) > * > * { padding: .55rem .7rem; }
.data-table > tbody tr:hover > * { background-color: #f7f9fc; }
.data-table > tbody tr.row-checked > * { background-color: #eef4ff !important; }
.data-table > tbody td.num, .data-table > tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table > tbody td.c { text-align: center; }
.table-wrap.scroll-y { max-height: calc(100vh - 230px); overflow: auto; }
.table-wrap.scroll-y > .data-table > thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--app-border); }
.data-table .form-control-sm, .data-table .form-select-sm { min-height: 30px; }
/* 검색 패널: 라벨·입력·버튼 높이 맞춤 */
.search-panel .row { row-gap: .6rem !important; }
.search-panel .form-label { display: block; min-height: 1.1em; }
.search-btns { display: flex; gap: .4rem; justify-content: flex-end; }
.search-btns .btn { min-width: 72px; }
/* 입력 검증 표시 */
.was-validated .form-control:invalid, .was-validated .form-select:invalid, .form-control.is-invalid { border-color: #dc3545; }
.invalid-feedback { font-size: var(--fs-small); }
.btn .spinner-border { width: .9rem; height: .9rem; border-width: .15em; vertical-align: -2px; margin-right: .3rem; }
.loading { color: var(--app-muted); padding: 2rem 0; text-align: center; }
.loading::before { content: ""; display: inline-block; width: 1rem; height: 1rem; border: 2px solid #c9d3e2; border-top-color: var(--app-primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; margin-right: .4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-box { border: 1px dashed #d5dbe4; border-radius: .6rem; color: var(--app-muted); text-align: center; padding: 1.2rem; margin-bottom: 1rem; font-size: var(--fs-base); }
.btn-icon { width: 38px; padding-left: 0; padding-right: 0; font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* 세그먼트 탭 (달력/출역표) */
.seg { display: inline-flex; background: #e9edf3; border-radius: .5rem; padding: 3px; gap: 2px; list-style: none; margin: 0; }
.seg a { display: block; padding: .3rem .8rem; border-radius: .4rem; color: #4a5563; text-decoration: none; font-size: var(--fs-base); }
.seg a.active { background: #fff; color: #1f3b63; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ── 출결: 월 이동 ── */
.month-nav { display: flex; align-items: center; gap: .35rem; }
.month-label { border: 0; background: none; font-size: 1.25rem; font-weight: 700; color: #1f2a37; padding: 0 .4rem; min-width: 8.5rem; text-align: center; border-radius: .4rem; }
.month-label:hover { background: #f0f3f8; }
/* ── 출결: 월 달력 ── */
.cal { --cal-row: 118px; overflow: hidden; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head > div { text-align: center; font-weight: 700; font-size: var(--fs-small); padding: .5rem 0; background: #f6f8fb; color: #4a5563; border-bottom: 1px solid var(--app-border); }
.cal-head .sun, .cal-day.sun .cal-num { color: #d63939; }
.cal-head .sat, .cal-day.sat .cal-num { color: #2463c7; }
.cal-day { border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; padding: .4rem .45rem; cursor: pointer; min-width: 0; transition: background .12s; outline: none; position: relative; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day:hover { background: #f7f9fc; }
.cal-day:focus-visible { box-shadow: inset 0 0 0 2px #86b7fe; }
.cal-day.out { background: #fafbfc; cursor: default; }
.cal-day.out .cal-num { color: #c3c9d2 !important; }
.cal-day.selected { background: #eef4ff; box-shadow: inset 0 0 0 2px var(--app-primary); }
.cal-top { display: flex; align-items: center; gap: .3rem; margin-bottom: .3rem; }
.cal-num { font-weight: 700; font-size: var(--fs-base); width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-day.today .cal-num { background: var(--app-primary); color: #fff !important; }
.cal-count { background: #1f3b63; color: #fff; border-radius: 1rem; font-size: .7rem; font-weight: 700; padding: .05rem .45rem; }
.cal-hours { color: var(--app-muted); font-size: .7rem; margin-left: auto; }
.cal-names { display: flex; flex-wrap: wrap; gap: 3px; }
.chip { display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; line-height: 1.35; padding: 0 .35rem; border-radius: .3rem; background: #eaf1fb; color: #1f3b63; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.temp { background: #edf7ef; color: #1d6b34; }
.chip.factory { background: #fff3dd; color: #7a4b00; }
.chip.more { background: #eef0f3; color: #5b6573; }
.ot-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #f08c00; margin-left: 2px; }
.cal-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; color: var(--app-muted); font-size: var(--fs-small); }
@media (max-width: 767.98px) {
    .cal { --cal-row: 62px; }
    .cal-day { padding: .25rem; }
    .cal-names, .cal-hours { display: none; }
    .cal-top { flex-direction: column; gap: .15rem; }
    .cal-count { font-size: .65rem; padding: 0 .3rem; }
}
/* ── 출결: 오른쪽 날짜 패널 ── */
.day-panel { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; }
.day-head { display: flex; align-items: flex-start; margin-bottom: .8rem; }
.day-title { font-size: var(--fs-title); font-weight: 700; }
.day-sub { color: var(--app-muted); font-size: var(--fs-small); margin-top: .1rem; }
.day-site { font-weight: 700; font-size: var(--fs-small); color: #4a5563; margin: .6rem 0 .3rem; display: flex; gap: .4rem; }
.day-site span { color: var(--app-muted); font-weight: 400; }
.day-list { list-style: none; padding: 0; margin: 0 0 .4rem; border: 1px solid var(--app-border); border-radius: .55rem; overflow: hidden; }
.day-list > li + li { border-top: 1px solid #eef0f3; }
.day-row { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; cursor: pointer; }
.day-row:hover { background: #f7f9fc; }
.day-row .nm { font-weight: 600; }
.day-row .meta { color: #4a5563; font-size: var(--fs-small); }
.day-row .caret { color: #9aa3ae; transition: transform .15s; }
.day-row[aria-expanded=true] .caret { transform: rotate(180deg); }
.tag { font-size: .68rem; padding: 0 .35rem; border-radius: .25rem; background: #eaf1fb; color: #1f3b63; }
.tag.temp { background: #edf7ef; color: #1d6b34; }
.day-edit { background: #f9fafc; padding: .6rem .7rem .7rem; border-top: 1px dashed #e2e6ec; }
.day-edit .form-label { font-size: var(--fs-small); color: var(--app-muted); margin-bottom: .15rem; font-weight: 600; }
.day-register { margin-top: 1rem; }
.pick-bar { display: flex; gap: .4rem; margin-bottom: .4rem; }
.pick-bar .pick-q { flex: 1; min-width: 0; }
.pick-tabs .btn.active { background: #1f3b63; color: #fff; border-color: #1f3b63; }
.pick { border: 1px solid var(--app-border); border-radius: .55rem; max-height: 300px; overflow: auto; }
.pick-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; margin: 0; cursor: pointer; border-bottom: 1px solid #f1f3f6; }
.pick-item:last-of-type { border-bottom: 0; }
.pick-item:hover { background: #f7f9fc; }
.pick-item:has(input:checked) { background: #eef4ff; }
.pick-item .nm { font-weight: 600; }
.pick-item .tp { color: var(--app-muted); font-size: var(--fs-small); }
.pick-item .pay { font-size: var(--fs-small); color: #4a5563; font-variant-numeric: tabular-nums; }
.pick-item.done { opacity: .65; }
.pick-empty { padding: 1rem; text-align: center; color: var(--app-muted); }
.pick-item[hidden] { display: none; }
.cal-top { flex-wrap: nowrap; min-width: 0; }
.cal-count { white-space: nowrap; flex-shrink: 0; }
.cal-hours { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.data-table .form-control-sm, .data-table .form-select-sm { font-size: var(--fs-base); }
.seg { flex-wrap: nowrap; white-space: nowrap; flex-shrink: 0; }
.list-bar { flex-wrap: wrap; row-gap: .4rem; }
.day-panel { scroll-margin-top: 64px; }
@media (max-width: 1199.98px) { .day-panel { position: static; max-height: none; overflow: visible; } }

/* ═════════ v0.4 ═════════ */
/* 회사 색: 버튼·선택·포커스 */
.btn-primary { --bs-btn-bg: #2b4a96; --bs-btn-border-color: #2b4a96; --bs-btn-hover-bg: #213a78; --bs-btn-hover-border-color: #213a78; --bs-btn-active-bg: #1b3166; --bs-btn-active-border-color: #1b3166; --bs-btn-disabled-bg: #2b4a96; --bs-btn-disabled-border-color: #2b4a96; }
.btn-outline-primary { --bs-btn-color: #2b4a96; --bs-btn-border-color: #2b4a96; --bs-btn-hover-bg: #2b4a96; --bs-btn-hover-border-color: #2b4a96; --bs-btn-active-bg: #213a78; --bs-btn-active-border-color: #213a78; }
.text-bg-primary { background-color: #2b4a96 !important; }
.text-primary { color: #2b4a96 !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #8aa2d8; box-shadow: 0 0 0 .2rem rgba(43,74,150,.15); }
.form-check-input:checked { background-color: #2b4a96; border-color: #2b4a96; }
.ts-wrapper.form-select.focus { border-color: #8aa2d8; box-shadow: 0 0 0 .2rem rgba(43,74,150,.15); }
.ts-dropdown .active { background: var(--app-primary-l); color: var(--app-primary-d); }
.ts-dropdown .dropdown-input-wrap { padding: .5rem; border-bottom: 1px solid var(--app-border); background: #f8f9fb; }
.ts-dropdown .dropdown-input { border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .35rem .6rem; font-size: var(--fs-base); width: 100%; }
.ts-dropdown .dropdown-input:focus { outline: 0; border-color: #8aa2d8; box-shadow: 0 0 0 .2rem rgba(43,74,150,.15); }
.ts-wrapper.plugin-dropdown_input .ts-control > input { position: absolute; opacity: 0; width: 1px; min-width: 0; }
input[data-money] { text-align: right; font-variant-numeric: tabular-nums; }

/* 상단 바: 흰 배경 + 로고 */
.app-navbar { background: #fff; border-bottom: 1px solid var(--app-border); min-height: 56px; view-transition-name: app-navbar; }
.app-brand { display: flex; align-items: center; gap: .55rem; color: #1c2533 !important; font-weight: 700; font-size: 1.05rem; padding: 0; }
.app-brand img { display: block; flex-shrink: 0; }
.nav-burger { color: #3a4452; font-size: 1.5rem; line-height: 1; }
.user-btn { border: 1px solid var(--app-border); background: #fff; color: #2b3440; border-radius: 2rem; padding: .3rem .8rem; }
.user-btn:hover { background: #f4f6f9; }
body.bare .app-navbar { display: none; }
.app-shell { min-height: calc(100vh - 56px); }
@media (min-width: 992px) { .app-sidebar { top: 56px !important; height: calc(100vh - 56px) !important; view-transition-name: app-sidebar; } }
.menu-link.active { background: var(--app-primary-l); }
.menu-icon { font-size: 1.05rem; color: #6a7586; }
.menu-link.active .menu-icon, .menu-link:hover .menu-icon { color: var(--app-primary); }
.page-icon { color: var(--app-primary); font-size: 1.15rem; }

/* 화면 전환: 상단·메뉴는 그대로, 본문만 부드럽게 (Chrome·Edge) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }

/* 로딩바 */
.top-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, #2b4a96, #f39a2b); opacity: 0; pointer-events: none; }
.top-progress.run { opacity: 1; width: 82%; transition: width 8s cubic-bezier(.1,.7,.2,1), opacity .2s; }
.top-progress.done { width: 100%; opacity: 0; transition: width .2s ease, opacity .3s .15s; }

/* 현재 위치 + 도움말 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: var(--fs-small); color: var(--app-muted); margin-bottom: .2rem; }
.crumbs i { font-size: .6rem; opacity: .7; }
.crumbs a { color: var(--app-muted); text-decoration: none; }
.crumbs a:hover { color: var(--app-primary); text-decoration: underline; }
.page-title { display: flex; align-items: center; gap: .15rem; }
.help-btn { border: 0; background: none; color: #9aa3ae; font-size: 1.05rem; padding: .1rem .3rem; margin-left: .2rem; border-radius: 50%; line-height: 1; }
.help-btn:hover { color: var(--app-primary); background: var(--app-primary-l); }
.help-panel { width: min(420px, 100vw) !important; }
.help-panel .offcanvas-header { border-bottom: 1px solid var(--app-border); }
.help-body { font-size: var(--fs-base); line-height: 1.7; color: #2b3440; }
.help-body h3 { font-size: var(--fs-base); font-weight: 700; margin: 1.1rem 0 .4rem; color: var(--app-primary); }
.help-body h3:first-child { margin-top: 0; }
.help-body ul { padding-left: 1.1rem; margin-bottom: .6rem; }
.help-body li { margin-bottom: .25rem; }
.help-body p { margin-bottom: .5rem; }

/* 하위 메뉴 탭: 넘치면 양쪽 흐림 */
.tabs-scroll { position: relative; }
.tabs-scroll .app-tabs { scrollbar-width: none; }
.tabs-scroll .app-tabs::-webkit-scrollbar { display: none; }
.tabs-scroll::before, .tabs-scroll::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 28px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.tabs-scroll::before { left: 0; background: linear-gradient(90deg, var(--app-bg), transparent); }
.tabs-scroll::after { right: 0; background: linear-gradient(-90deg, var(--app-bg), transparent); }
.tabs-scroll.more-left::before, .tabs-scroll.more-right::after { opacity: 1; }

/* 폰 하단 메뉴 */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff; border-top: 1px solid var(--app-border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0,0,0,.04); view-transition-name: bottom-nav; }
.bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .45rem 0 .4rem; color: #6a7586; text-decoration: none; font-size: .7rem; border: 0; background: none; }
.bottom-nav i { font-size: 1.25rem; }
.bottom-nav .active { color: var(--app-primary); font-weight: 700; }
@media (max-width: 991.98px) { body.has-bottom-nav .app-main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } body.has-bottom-nav .app-toasts { bottom: 64px; } }

/* 폰: 검색조건 접기 */
.search-toggle { display: none; }
@media (max-width: 767.98px) {
    .search-toggle { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; padding: 0; font-weight: 600; color: #2b3440; }
    .search-panel:not(.collapsed-m) .search-toggle { margin-bottom: .6rem; }
    .search-panel.collapsed-m > .row, .search-panel.collapsed-m > div:not(.search-toggle) { display: none !important; }
    .search-panel.collapsed-m .search-toggle .bi-chevron-down { transform: rotate(-90deg); }
}
/* 검색 버튼: 마지막 칸 옆 남는 자리에 붙임 */
.search-panel .search-btns { flex: 1 0 0; min-width: 170px; }
@media (max-width: 767.98px) { .search-panel .search-btns { flex: 0 0 100%; } .search-panel .search-btns .btn { flex: 1; } }

/* 로그인 */
.login-wrap { min-height: 100vh; flex-direction: column; background: radial-gradient(circle at 20% 10%, #e6ecf8 0, transparent 45%), radial-gradient(circle at 85% 90%, #fdf0e1 0, transparent 40%), #f4f6f9; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 1.1rem; box-shadow: 0 10px 40px rgba(20,35,70,.10); padding: 2rem 1.75rem; }
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand img { margin: 0 auto .6rem; display: block; }
.login-brand h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.login-brand p { color: var(--app-muted); margin: .2rem 0 0; }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9aa3ae; }
.input-icon > .form-control { padding-left: 2.4rem; font-size: 1rem; }
.pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #9aa3ae; padding: .3rem .4rem; }
.login-foot { margin-top: 1.2rem; color: #9aa3ae; font-size: var(--fs-small); }

/* 대시보드·홈 */
.menu-card { transition: transform .12s, box-shadow .12s; text-decoration: none; color: #2b3440; }
.menu-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,35,70,.08); color: var(--app-primary); }
.quick-icon { font-size: 1.5rem; color: var(--app-primary); line-height: 1; }
.home-hello { display: flex; align-items: center; background: linear-gradient(120deg, #2b4a96, #3b5fb8); color: #fff; border-radius: .9rem; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.hello-date { opacity: .85; font-size: var(--fs-small); }
.hello-name { font-size: 1.1rem; font-weight: 700; margin-top: .15rem; }
.card-title-row { display: flex; align-items: center; margin-bottom: .6rem; }
.card-title-row .section-title { margin: 0; }
.card-title-row .more { margin-left: auto; font-size: var(--fs-small); color: var(--app-muted); text-decoration: none; }
.card-title-row .more:hover { color: var(--app-primary); }
.section-title .bi { color: var(--app-primary); margin-right: .2rem; }
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li + li { border-top: 1px solid #f0f2f5; }
.notice-list a { display: flex; align-items: center; gap: .45rem; padding: .6rem .2rem; text-decoration: none; color: #2b3440; }
.notice-list a:hover { background: #f7f9fc; }
.notice-list .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-list li.important .t { font-weight: 700; }
.notice-list .new { background: var(--app-accent); color: #fff; font-size: .62rem; font-weight: 700; border-radius: 50%; width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.notice-list .d { color: var(--app-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.mini-stats { display: flex; gap: .5rem; }
.mini-stats > div, .mini-stats > a { flex: 1; background: #f6f8fb; border-radius: .6rem; padding: .55rem .7rem; }
.mini-stats > a { color: inherit; text-decoration: none; } .mini-stats > a:hover { background: var(--app-primary-l, #e8eef8); } .mini-stats > a span::after { content: " ›"; color: var(--app-primary); }
.mini-stats span { display: block; color: var(--app-muted); font-size: var(--fs-small); }
.mini-stats b { font-size: 1.05rem; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.quick-grid a { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .2rem; border-radius: .6rem; text-decoration: none; color: #2b3440; font-size: var(--fs-small); text-align: center; background: #f6f8fb; }
.quick-grid a:hover { background: var(--app-primary-l); color: var(--app-primary); }
.quick-grid .qi { font-size: 1.3rem; color: var(--app-primary); line-height: 1; }
.home-table td { padding: .5rem .3rem; vertical-align: middle; }
.status-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.status-steps a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .2rem; border-radius: .6rem; background: #f6f8fb; text-decoration: none; color: #2b3440; }
.status-steps a:hover { background: var(--app-primary-l); }
.status-steps small { color: var(--app-muted); font-size: .7rem; }
.req-row { display: flex; align-items: center; padding: .55rem .2rem; border-top: 1px solid #f0f2f5; text-decoration: none; color: #2b3440; }
.req-row:first-of-type { border-top: 0; }
.req-row:hover { background: #f7f9fc; }
@media (max-width: 575.98px) { .mini-stats > div { padding: .45rem .55rem; } .mini-stats b { font-size: .95rem; } }
.stat-value { white-space: nowrap; }
/* 입출금 합계 */
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.sum-card { background: #fff; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: .7rem .9rem; border-left: 4px solid #c9d1dc; }
.sum-card span { display: block; color: var(--app-muted); font-size: var(--fs-small); }
.sum-card b { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-card b small { font-size: var(--fs-small); color: var(--app-muted); margin-left: 2px; font-weight: 400; }
.sum-card.in { border-left-color: #2b4a96; } .sum-card.in b { color: #2b4a96; }
.sum-card.out { border-left-color: #d63939; } .sum-card.out b { color: #c22f2f; }
.sum-card.neg b { color: #c22f2f; }
.sum-table th { background: #f6f8fb; font-size: var(--fs-small); color: #4a5563; font-weight: 600; }
.sum-table.in thead th:first-child { box-shadow: inset 3px 0 0 #2b4a96; }
.sum-table.out thead th:first-child { box-shadow: inset 3px 0 0 #d63939; }
.sum-table td { vertical-align: middle; }
.sum-table td a { color: #2b3440; text-decoration: none; }
.sum-table td a:hover { color: var(--app-primary); text-decoration: underline; }
.sum-table tr.on td { background: var(--app-primary-l); font-weight: 700; }
.sum-table tfoot td { font-weight: 700; background: #fafbfc; }
.sum-table tr.more-row { display: none; }
.sum-table.show-all tr.more-row { display: table-row; }
.ratio-bar { display: inline-block; width: calc(100% - 3.2rem); height: 6px; background: #eef0f3; border-radius: 3px; vertical-align: middle; margin-right: .3rem; overflow: hidden; }
.ratio-bar i { display: block; height: 100%; border-radius: 3px; }
.sum-table.in .ratio-bar i { background: #2b4a96; } .sum-table.out .ratio-bar i { background: #e05a5a; }
@media (max-width: 575.98px) { .sum-cards { grid-template-columns: 1fr 1fr; } .sum-cards .sum-card:last-child:nth-child(odd) { grid-column: span 2; } .sum-card b { font-size: 1rem; } }
.login-wrap { position: fixed; inset: 0; overflow: auto; padding: 1.25rem; }
.rate { display: flex; align-items: center; gap: .3rem; min-width: 110px; }
.rate .ratio-bar { width: 70px; margin: 0; }
.rate .ratio-bar i { background: #2b4a96; }
.rate .ratio-bar i.over { background: #d63939; }
.data-table tfoot td { background: #fafbfc; font-weight: 700; padding: .55rem .7rem; }
.info-list { display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem .75rem; margin: 0; }
.info-list dt { font-weight: 400; color: var(--app-muted); }
.info-list dd { margin: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .4rem; }
.cat-grid > div { position: relative; background: #f6f8fb; border-radius: .5rem; padding: .45rem .6rem .55rem; overflow: hidden; }
.cat-grid span { display: block; color: var(--app-muted); font-size: var(--fs-small); }
.cat-grid b { font-variant-numeric: tabular-nums; }
.cat-grid i { position: absolute; left: 0; bottom: 0; height: 3px; background: #2b4a96; }
.print-title { display: none; }
.pick-all { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .35rem; font-size: var(--fs-small); cursor: pointer; }
.copy-prev { margin: .8rem 0 0; }

/* 기간 빠른 선택 */
.quick-range-col { margin-top: -.2rem; }
.quick-range { display: flex; flex-wrap: wrap; gap: .3rem; }
.quick-range button { border: 1px solid var(--app-border); background: #fff; border-radius: 1rem; padding: .12rem .65rem; font-size: var(--fs-small); color: #4a5563; }
.quick-range button:hover { border-color: #8aa2d8; color: var(--app-primary); }
.quick-range button.on { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }

/* 빠른 검색 */
.qs-btn { border: 1px solid var(--app-border); background: #f6f8fb; color: #6a7586; border-radius: 2rem; padding: .3rem .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.qs-btn:hover { background: #eef2f8; color: var(--app-primary); }
.qs-btn kbd, .qs-head kbd { background: #fff; color: #8a94a3; border: 1px solid var(--app-border); font-size: .65rem; padding: .05rem .35rem; box-shadow: none; }
.qs-dialog { max-width: 560px; margin-top: 10vh; }
.qs-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--app-border); }
.qs-head i { color: #9aa3ae; }
.qs-head input { flex: 1; border: 0; outline: 0; font-size: 1rem; }
.qs-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .5rem; color: #2b3440; text-decoration: none; }
.qs-item i { color: var(--app-primary); width: 1.2rem; text-align: center; }
.qs-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item .k { font-size: var(--fs-small); color: var(--app-muted); }
.qs-item.on, .qs-item:hover { background: var(--app-primary-l); }
.qs-empty { padding: 1.5rem; text-align: center; color: var(--app-muted); }
@media (max-width: 575.98px) { .qs-btn { padding: .3rem .55rem; } .app-brand span { display: none; } }

/* 인쇄 (A4) */
@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff !important; font-size: 11px; }
    .app-navbar, .app-sidebar, .bottom-nav, .search-panel, .page-actions, .app-tabs, .tabs-scroll, .crumbs, .help-btn, .list-bar .btn, .actions, .top-progress,
    .app-toasts, .pagination, .more, .no-print, .quick-range, .search-toggle, .col-resizer, canvas, .sort-ind { display: none !important; }
    .app-main { padding: 0 !important; }
    .card, .sum-card, .stat-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    .table-wrap, .table-wrap.scroll-y { max-height: none !important; overflow: visible !important; }
    .data-table { width: 100% !important; table-layout: auto !important; }
    .data-table > tbody td { max-width: none; white-space: normal; }
    .data-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-title { display: block !important; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .print-title small { font-size: 11px; font-weight: 400; color: #555; }
    .print-sign { display: flex !important; justify-content: flex-end; margin-top: 16px; }
    .table-mobile-cards thead { display: table-header-group !important; }
    a { color: inherit !important; text-decoration: none !important; }
}
.print-sign { display: none; }
.print-sign table { border-collapse: collapse; }
.print-sign th, .print-sign td { border: 1px solid #999; width: 70px; text-align: center; font-size: 11px; padding: 2px; }
.print-sign td { height: 46px; }
.prefill-note { background: #eef4ff; border: 1px solid #d3e0f7; color: #213a78; border-radius: .6rem; padding: .55rem .8rem; margin-bottom: .75rem; font-size: var(--fs-small); }
.prefill-note a { margin-left: .4rem; font-weight: 600; }

/* 폰·태블릿 메뉴: 왼쪽 서랍 (화면 75%, 나머지는 흐리게 보이고 누르면 닫힘) */
@media (max-width: 991.98px) {
    .app-sidebar.offcanvas-lg { --bs-offcanvas-width: min(75vw, 300px); box-shadow: 4px 0 24px rgba(0,0,0,.18); border-right: 0; }
    .app-sidebar .offcanvas-header { padding: .7rem 1rem; border-bottom: 1px solid var(--app-border); }
    .app-sidebar .offcanvas-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; }
    .app-sidebar .menu-link { padding: .55rem 1rem; font-size: .88rem; }
    .app-sidebar .menu-list.sub .menu-link { padding-left: 2.3rem; font-size: .84rem; }
    .app-sidebar .menu-title { padding: .4rem 1rem .15rem; }
    .offcanvas-backdrop.show { opacity: .35; }
}
.drawer-user { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--app-border); background: #f8f9fb; font-size: var(--fs-small); color: var(--app-muted); }
.drawer-user b { color: #2b3440; font-size: var(--fs-base); }

/* 앱 설치 */
.install-card { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px dashed #b9c7e6; border-radius: .8rem; padding: .7rem .9rem; margin-bottom: 1rem; }
.install-card img { width: 40px; height: 40px; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.install-card .t { flex: 1; font-size: var(--fs-small); color: var(--app-muted); }
.install-card .t b { display: block; color: #2b3440; font-size: var(--fs-base); }
.ios-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.ios-steps li { counter-increment: s; display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; }
.ios-steps li::before { content: counter(s); flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--app-primary); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ── 작은 목록 (홈·최근 기입·공사 상세): 폰에서도 글자가 세로로 깨지지 않게 2줄 구성 ── */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list > li { padding: .55rem 0; border-bottom: 1px solid #eef0f3; min-width: 0; }
.mini-list > li:last-child { border-bottom: 0; }
.mini-list .ml-top { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.mini-list .ml-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #2b3440; }
.mini-list .ml-amt { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-list .ml-sub { display: flex; align-items: center; gap: .5rem; margin-top: .15rem; font-size: var(--fs-small); color: var(--app-muted); min-width: 0; }
.mini-list .ml-sub > span:not(.badge):not(.ms-auto) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list .ml-sub > span + span:not(.ms-auto)::before { content: '·'; margin-right: .5rem; color: #c4cad3; }

/* ── 폰 보정 ── */
@media (max-width: 767.98px) {
    /* 입출금 조회 항목별 합계: 항목명이 한 글자씩 꺾이지 않게 */
    .sum-table { table-layout: auto; }
    .sum-table td:first-child { white-space: nowrap; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
    .sum-table th:nth-child(3), .sum-table td:nth-child(3) { width: auto !important; white-space: nowrap; }
    .sum-table th:last-child { width: 3.2rem !important; }
    .sum-table td:last-child .ratio-bar { display: none; }
    .sum-table td:last-child { white-space: nowrap; }
    /* 표 셀 숫자·날짜는 줄바꿈 금지 */
    td.num, th.num { white-space: nowrap; }
    /* 설치 안내 카드 */
    .install-card { padding: .6rem .75rem; }
}
.sum-table tr.more-row.on { display: table-row; }

/* ── 상세 검색조건 ── */
.search-adv { margin-top: .4rem; padding-top: .6rem; border-top: 1px dashed var(--app-border); }
.search-adv-title { font-size: var(--fs-small); font-weight: 600; color: var(--app-muted); margin-bottom: .4rem; }
.range-pair { display: flex; align-items: center; gap: .35rem; }
.range-pair > .form-control { min-width: 0; flex: 1; }
.range-pair > span { color: var(--app-muted); }
.btn-adv { white-space: nowrap; padding: .15rem .1rem; font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--app-primary); }
.btn-adv:hover { text-decoration: underline; }
.adv-bar { display: flex; align-items: center; margin-top: .5rem; }
.btn-adv .bi-chevron-down { transition: transform .15s; display: inline-block; }
.btn-adv[aria-expanded=true] .bi-chevron-down { transform: rotate(180deg); }
.btn-adv .badge { font-size: .7rem; }
.pager-row { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pager-info { display: flex; align-items: center; gap: .6rem; color: var(--app-muted); font-size: var(--fs-small); }
.pager-info .form-select { width: auto; }
/* 지출 현황(전체 공사): 분류별 금액 9칸은 기본 접어 두고 [분류별 금액 보기]로 펼침 (PC·폰 공통) */
#workSum:not(.show-cats) .cat-col { display: none !important; }
@media (max-width: 767.98px) {
    #workSum td.cat-col:empty { display: none !important; }
    #workSum tfoot { display: none; }
}
.labor-sum { border: 1px dashed var(--app-border); border-radius: .55rem; padding: .1rem .7rem; }
.labor-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; padding: .55rem 0; text-align: left; color: #2b3440; font-size: var(--fs-small); }
.labor-toggle[aria-expanded=true] .bi-chevron-down { transform: rotate(180deg); }

/* 폰 카드 목록: 값이 없는 줄은 숨겨 카드 길이를 줄임 */
@media (max-width: 767.98px) { .table-mobile-cards td.is-empty { display: none !important; } }
.item-old { color: var(--app-muted); font-size: .78em; white-space: nowrap; }
.stat-card.stat-on { box-shadow: inset 0 0 0 2px var(--app-primary); }
/* 대시보드 숫자 카드: 눌러서 목록으로 */
.stat-link { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.stat-link:hover { box-shadow: 0 0 0 2px var(--app-primary-l, #e8eef8), 0 4px 14px rgba(31,59,99,.12); transform: translateY(-1px); }
.stat-go { font-size: .7rem; color: var(--app-primary); }
.stat-tip { font-size: .72rem; color: var(--app-muted); margin-top: .15rem; line-height: 1.3; }

/* 아이폰: 입력칸 글자가 16px보다 작으면 누를 때마다 화면이 확대되므로 폰에서는 16px */
@media (max-width: 991.98px) {
    input.form-control, select.form-select, textarea.form-control, .ts-wrapper .ts-control, .ts-wrapper .ts-control > input, .ts-dropdown { font-size: 16px !important; }
    .form-control-sm, .form-select-sm { font-size: 16px !important; }
}

/* 폰 카드 압축 */
.table-mobile-cards td.m-toggle { display: none; }
@media (max-width: 767.98px) {
    .table-mobile-cards[data-compact] tr:not(.m-open) td:not(.m-key):not(.m-toggle) { display: none !important; }
    .table-mobile-cards[data-compact] td.m-toggle { display: flex !important; justify-content: flex-end !important; padding-top: .1rem !important; }
    .table-mobile-cards[data-tap-select] tbody tr { cursor: pointer; }
    .table-mobile-cards tr.row-checked { border-color: var(--app-primary); box-shadow: inset 3px 0 0 var(--app-primary); background: #f4f7fd; }
    /* 고정 처리 막대 (하단 메뉴 위) */
    .m-actionbar { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1029; display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; background: #fff; border-top: 1px solid var(--app-border); box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
    body:not(.has-bottom-nav) .m-actionbar { bottom: env(safe-area-inset-bottom); }
    .m-actionbar .m-count { font-size: var(--fs-small); color: var(--app-muted); }
    body.has-actionbar .app-main { padding-bottom: 7.5rem; }
    body.has-actionbar .to-top { bottom: calc(128px + env(safe-area-inset-bottom)); }
}
/* 맨 위로 */
.to-top { position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 1028; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--app-border); background: #fff; color: var(--app-primary); box-shadow: 0 2px 10px rgba(0,0,0,.12); display: none; align-items: center; justify-content: center; font-size: 1.1rem; }
.to-top.show { display: flex; }
@media (min-width: 992px) { .to-top { bottom: 24px; } }
@media print { .to-top, .m-actionbar { display: none !important; } }
.day-nav { display: flex; gap: .3rem; flex-shrink: 0; }
#menuRoot .menu-ghost { opacity: .4; background: var(--app-primary-l, #e8eef8); } #menuRoot .menu-chosen { background: #f4f7fd; } .sortable-fallback { opacity: .9 !important; box-shadow: 0 6px 18px rgba(0,0,0,.15); background: #fff; list-style: none; }

/* 메뉴 편집: 줄 전체 끌기 + 숨기기 */
.hide-btn { display: none; border: 0; background: none; color: #9aa3ae; padding: 0 .3rem; line-height: 1; font-size: .95rem; }
#menuRoot.editing .hide-btn { display: inline-flex; margin-left: auto; }
#menuRoot.editing .menu-link { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#menuRoot.editing .menu-caret { display: none; }
#menuRoot:not(.editing) .menu-hidden { display: none !important; }
#menuRoot:not(.editing) .menu-section:not(:has(> .menu-list > .menu-item:not(.menu-hidden))) { display: none; }
#menuRoot.editing .menu-hidden > .menu-link .menu-text, #menuRoot.editing .menu-hidden > .menu-link .menu-icon { opacity: .4; text-decoration: line-through; }
#menuRoot.editing .menu-hidden > .menu-link .hide-btn { color: #d63939; }
.dnd-node > .dnd-row { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#menuRoot.editing .menu-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menuRoot.editing .menu-list.sub .menu-link { padding-left: 1.7rem; }
#menuRoot.editing .menu-link { gap: .4rem; padding-right: .6rem; }
/* 메뉴 관리: 사용 스위치 */
.dnd-row .use-sw { margin-left: .5rem; padding-left: 2.6em; min-height: 0; }
.dnd-row .use-sw .form-check-input { cursor: pointer; }
.dnd-node.menu-off > .dnd-row .node-title { opacity: .45; text-decoration: line-through; }
.use-bar { position: sticky; top: .5rem; z-index: 6; }

/* 등록·수정 기록 */
.row-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem 1rem; margin: 1rem 0 0; padding: .6rem .8rem; border-top: 1px dashed var(--bs-border-color); font-size: .8rem; color: var(--bs-secondary-color); }
.row-meta > div { display: flex; gap: .4rem; min-width: 0; }
.row-meta dt { font-weight: 500; white-space: nowrap; }
.row-meta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-body-color); }
@media (max-width: 767.98px) { .row-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 분류 트리: 줄마다 하위 등록·수정·삭제 버튼 */
.dnd-row .node-acts { margin-left: auto; display: inline-flex; gap: .25rem; }
.dnd-row .node-acts .btn { padding: .1rem .4rem; font-size: .78rem; line-height: 1.3; }
@media (hover: hover) and (min-width: 768px) { .dnd-row .node-acts { opacity: .55; transition: opacity .15s; } .dnd-row:hover .node-acts, .dnd-row.selected .node-acts { opacity: 1; } }

/* 주민번호 가림 + 전체 보기 버튼 */
.pii { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pii-btn { border: 0; background: none; padding: 0 .2rem; color: var(--app-muted, #6b7280); line-height: 1; cursor: pointer; }
.pii-btn:hover { color: var(--app-primary, #1f3a5f); }
.pii[data-full] .pii-val { color: #b42318; font-weight: 600; }

/* 하단 탭: 메뉴 이름이 길면 말줄임 */
.bottom-nav a, .bottom-nav button { min-width: 0; }
.bottom-nav span { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 내 정보 > 앱 하단 탭 고르기 */
.tab-pick { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.tab-pick li { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--app-border); border-radius: .45rem; background: #fff; cursor: grab; user-select: none; }
.tab-pick li .grip { color: var(--app-muted); }
.tab-pick:empty::before { content: '고른 메뉴가 없습니다. 아래에서 추가하세요. (저장하지 않으면 기본값)'; color: var(--app-muted); font-size: .85rem; }

/* 노트북(1366px 등) 화면: 긴 글자 칸은 줄여서 말줄임(마우스를 올리면 전체 표시), 칸 여백 축소 → 가로 스크롤 줄임 */
@media (min-width: 992px) and (max-width: 1599.98px) {
    .data-table > tbody td { max-width: 210px; }
    .data-table { font-size: .875rem; }
    .data-table > :not(caption) > * > * { padding: .5rem .45rem; }
    .data-table > tbody td.wide { max-width: 280px; }
    .data-table > tbody td.narrow { max-width: 120px; }
    .data-table > tbody td.mid { max-width: 150px; }
    .data-table > tbody td.xnarrow { max-width: 90px; }
}
/* 표 첫 칸 고정 (가로로 긴 집계표) */
.data-table.sticky-first > thead > tr > :first-child, .data-table.sticky-first > tbody > tr > :first-child, .data-table.sticky-first > tfoot > tr > :first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: inset -1px 0 0 var(--app-border); }
.data-table.sticky-first > thead > tr > :first-child { background: #f6f8fb; z-index: 4; }
.data-table.sticky-first > tfoot > tr > :first-child { background: #fafbfc; }

/* PC: 왼쪽 메뉴 접기 (표가 넓은 화면을 넓게) */
@media (min-width: 992px) { body.side-off .app-sidebar { display: none !important; } }

/* 출결 달력: 공수 숫자는 잘리지 않게, 칸이 좁으면 '공수' 글자만 생략 */
.cal-hours { flex-shrink: 0; overflow: visible; }
.cal-hours small { font-size: inherit; }
@media (max-width: 1599.98px) { .cal-hours small { display: none; } .cal-hours::after { content: '공'; } }
.info-dl > dd { min-height: 1.5em; word-break: break-all; }
.info-dl > dd:has(> span.text-muted:only-child) { color: var(--app-muted); }

/* 공사 등록: 보증·선급금 표 → 폰에서는 항목별 카드(요율 | 금액 | 영수금액) */
@media (max-width: 575.98px) {
    .bond-table thead { display: none; }
    .bond-table, .bond-table tbody, .bond-table tr { display: block; width: 100%; }
    .bond-table tr { display: grid; grid-template-columns: 5rem 1fr 1fr; gap: .35rem; padding: .5rem 0; border-bottom: 1px solid var(--app-border); }
    .bond-table tr > th { grid-column: 1 / -1; padding: 0; border: 0; font-weight: 700; white-space: nowrap; }
    .bond-table tr > td { padding: 0; border: 0; }
    .bond-table tr > td::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--app-muted); margin-bottom: .1rem; white-space: nowrap; }
}

/* 거래코드·코드 관리: 폰에서는 한 줄을 카드처럼 (입력칸을 한 줄 전체로) */
@media (max-width: 575.98px) {
    .code-edit thead { display: none; }
    .code-edit, .code-edit tbody { display: block; width: 100%; }
    .code-edit tbody tr { display: grid; gap: .35rem .5rem; align-items: center; padding: .55rem .25rem; border-bottom: 1px solid var(--app-border); }
    .code-edit tbody tr.empty-row { display: block; }
    .code-edit > tbody > tr > td { display: block; max-width: none !important; padding: 0 !important; border: 0; white-space: normal; overflow: visible; text-align: left; }
    .code-edit .form-control-sm { font-size: 16px; }
    /* 거래코드: [코드 | 사용건수 | 관리] / [코드명 입력 전체] */
    .fin-codes tbody tr { grid-template-columns: auto 1fr auto; }
    .fin-codes tbody tr > td:nth-child(1) { grid-row: 1; grid-column: 1; }
    .fin-codes tbody tr > td:nth-child(3) { grid-row: 1; grid-column: 2; text-align: left; color: var(--app-muted); }
    .fin-codes tbody tr > td:nth-child(3)::before { content: '사용 '; }
    .fin-codes tbody tr > td:nth-child(4) { grid-row: 1; grid-column: 3; width: auto; }
    .fin-codes tbody tr > td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
    /* 코드 관리: [끌기 | 코드 | 사용 | 삭제] / [코드명] / [비고] */
    .adm-codes tbody tr { grid-template-columns: auto 1fr auto auto; }
    .adm-codes tbody tr > td:nth-child(1) { grid-row: 1; grid-column: 1; }
    .adm-codes tbody tr > td:nth-child(2) { grid-row: 1; grid-column: 2; }
    .adm-codes tbody tr > td:nth-child(4) { grid-row: 1; grid-column: 3; }
    .adm-codes tbody tr > td:nth-child(4)::before { content: '사용 '; font-size: .8rem; color: var(--app-muted); }
    .adm-codes tbody tr > td:nth-child(6) { grid-row: 1; grid-column: 4; }
    .adm-codes tbody tr > td:nth-child(3) { grid-row: 2; grid-column: 1 / -1; }
    .adm-codes tbody tr > td:nth-child(5) { grid-row: 3; grid-column: 1 / -1; }
    .adm-codes tbody tr > td:nth-child(5) input::placeholder { color: #b0b7c3; }
}

/* ── 목록 + 오른쪽 상세 (분할 화면) ── */
.split-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.split-panel { background: #fff; border-radius: .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.split-panel .split-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); }
.split-panel .split-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-panel .split-close { margin-left: auto; }
.split-panel .split-content { padding: 1rem; }
.split-empty { padding: 3rem 1rem; text-align: center; color: var(--app-muted); }
.split-empty i { font-size: 2rem; display: block; margin-bottom: .5rem; }
.split-loading { padding: 3rem 1rem; text-align: center; color: var(--app-muted); }
.split-view tr[data-panel] { cursor: pointer; }
.split-view tr.is-selected > * { background-color: #e8f0fb !important; box-shadow: inset 0 1px 0 #b9cdee, inset 0 -1px 0 #b9cdee; }
.split-view tr.is-selected > :first-child { box-shadow: inset 3px 0 0 var(--app-primary), inset 0 1px 0 #b9cdee, inset 0 -1px 0 #b9cdee; }
.split-panel .form-label { font-size: .82rem; margin-bottom: .2rem; }
.split-panel .detail-dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: .35rem .75rem; margin: 0; }
.split-panel .detail-dl dt { color: var(--app-muted); font-weight: 500; }
.split-panel .detail-dl dd { margin: 0; word-break: break-all; }
.split-panel .detail-amount { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.split-panel .detail-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
@media (min-width: 992px) {
    .split-view { grid-template-columns: minmax(0, 1fr) 380px; }
    .split-panel { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }
    .split-view .m-detail-cell { display: none; }
}
@media (min-width: 1400px) { .split-view { grid-template-columns: minmax(0, 1fr) 440px; } }
/* 폰·태블릿: 상세는 화면 전체로 열림 */
@media (max-width: 991.98px) {
    .split-panel { position: fixed; inset: 0; z-index: 1045; border-radius: 0; overflow-y: auto; transform: translateX(100%); transition: transform .2s ease; padding-bottom: env(safe-area-inset-bottom); }
    .split-view.panel-open .split-panel { transform: none; }
    .split-panel .split-head { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: calc(.75rem + env(safe-area-inset-top)); }
    body.split-lock { overflow: hidden; }
}
.m-detail-cell { text-align: right !important; }

/* 처리할 수 없는 줄(예: 입출금 연결 지출)의 선택 칸은 흐리게 */
.data-table .form-check-input:disabled { opacity: .3; background-color: #e9ecef; cursor: not-allowed; pointer-events: auto; }