/* ─────────────────────────────────────────────────────────────────────────────
   LMT ERP 디자인 시스템 (11-05) — 모양만. 기능·자료 흐름은 건드리지 않는다.
   index.html 의 <style> 과 erp.css(Tailwind) 다음에 읽혀 같은 강도의 규칙을 덮는다.
   색은 테마마다 이미 있는 토큰(--bg --surface --surface-2/3 --border --border-strong --text --text-muted
   --accent --accent-ink --accent-text --ok/warn/bad)만 쓴다 — 새 색을 만들지 않아 12개 테마 대비가 그대로다.
   주소에 ?ds=off 를 붙이면 이 파일이 꺼진다(비교용).
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* 간격 — 4px 배수 */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    /* 글자 — 7단계 (반 픽셀 10.5·11.5·12.5px 를 없앴다) */
    --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 20px;
    --lh-tight: 1.25; --lh-base: 1.5;
    /* 모서리 — 4단계 (2·3·4·6·8·10·12·16·20·24px 가 섞여 있었다) */
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;
    /* 그림자 — 3단계 (25가지가 섞여 있었다). 1: 떠 있는 작은 것 2: 메뉴·말풍선 3: 창(모달) */
    --sh-1: 0 1px 2px rgb(0 0 0 / .06);
    --sh-2: 0 4px 12px rgb(0 0 0 / .10), 0 1px 3px rgb(0 0 0 / .06);
    --sh-3: 0 16px 40px rgb(0 0 0 / .18), 0 2px 8px rgb(0 0 0 / .08);
    /* 움직임 */
    --ease: cubic-bezier(.2, 0, 0, 1); --dur: .15s;
    /* 초점 테두리 — 키보드로 옮겨 다닐 때만 보인다 */
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text, var(--accent));
    /* 입력칸 테두리 — 테마 글자색을 섞어 어느 테마에서도 바탕과 3:1 이상(칸 경계가 보이게) */
    --field-border: color-mix(in srgb, var(--text) 55%, transparent);   /* 13개 테마 3.2~5.9:1 (11-05 계산) */
}
:root[data-theme="dark"], :root[data-theme^="g-dark"] {
    --sh-1: 0 1px 2px rgb(0 0 0 / .4);
    --sh-2: 0 4px 12px rgb(0 0 0 / .45);
    --sh-3: 0 16px 40px rgb(0 0 0 / .6);
}

/* ── 1. 모서리: Tailwind 단계를 4단계에 맞춘다 ── */
.rounded-md, .rounded { border-radius: var(--r-xs); }
.rounded-lg { border-radius: var(--r-sm); }
.rounded-xl { border-radius: var(--r-md); }
.rounded-2xl, .rounded-3xl { border-radius: var(--r-lg); }
.rounded-t-2xl, .rounded-t-3xl { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }

/* ── 2. 그림자: 색 번짐(shadow-cyan-600/30 등)을 없애고 3단계로 ── */
.shadow-sm { box-shadow: var(--sh-1) !important; }
.shadow, .shadow-md, .shadow-lg { box-shadow: var(--sh-2) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--sh-3) !important; }
[class*="shadow-cyan-"], [class*="shadow-emerald-"], [class*="shadow-green-"], [class*="shadow-indigo-"], [class*="shadow-purple-"], [class*="shadow-red-"] { --tw-shadow-color: transparent; }
button[class*="shadow-lg"], a[class*="shadow-lg"] { box-shadow: var(--sh-1) !important; }   /* 단추는 낮게 */
[id^="modal-"] > .glass-panel, #c-pvbig .win, #more-sheet > div, #c-ctx, #c-cols, #bd-menu { box-shadow: var(--sh-3) !important; }

/* ── 3. 글자: 반 픽셀 없애고 7단계로. 위에서 픽셀로 박은 곳은 index.html 쪽을 그대로 두고 Tailwind 임의값만 맞춘다 ── */
.text-\[9px\], .text-\[8px\] { font-size: var(--fs-2xs) !important; }
.text-\[13px\] { font-size: var(--fs-md) !important; }
h1, h2, h3, h4 { letter-spacing: -0.01em; line-height: var(--lh-tight); }
.font-mono, code, kbd { font-variant-numeric: tabular-nums; }
td, .c-kv dd, .c-kpis b, [data-label="재고"], [data-label="금액"] { font-variant-numeric: tabular-nums; }   /* 숫자 칸 자릿수 맞춤 */

/* ── 4. 입력칸: 높이·테두리·모서리·초점을 하나로 (창·속성 칸·설정 공통) ── */
:is([id^="modal-"], #content-area, .c-insp, #more-sheet) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--field-border) !important;
    background-color: var(--surface) !important;
    color: var(--text) !important;
    font-size: var(--fs-lg);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:is([id^="modal-"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select) {
    min-height: 40px; padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important;
}
:is([id^="modal-"]) textarea { padding: var(--sp-2) var(--sp-3) !important; line-height: var(--lh-base); }
:is([id^="modal-"], #content-area, .c-insp, #more-sheet) :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--text) 80%, transparent) !important; }
:is([id^="modal-"], #content-area, .c-insp, #more-sheet) :is(input, select, textarea):focus { outline: none !important; border-color: var(--accent-text, var(--accent)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text, var(--accent)) 25%, transparent) !important; }
:where(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: .8; }
/* 창 안 칸 이름(label) — 작은 회색 글씨 한 가지로 */
:is([id^="modal-"]) label.text-xs { font-size: var(--fs-sm) !important; font-weight: 600; color: var(--text-muted) !important; margin-bottom: var(--sp-1) !important; }
/* 체크·라디오·슬라이더는 테마 강조색으로 */
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { cursor: pointer; }
@media (max-width: 767px) {   /* 휴대폰: 손가락 + 아이폰 확대 방지(16px) */
    :is([id^="modal-"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { min-height: 44px; font-size: 16px; }
}

/* ── 5. 창(모달): 여백·제목·닫기 단추 정돈 ── */
[id^="modal-"] > .glass-panel { border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: var(--sp-6) !important; }
@media (max-width: 767px) { [id^="modal-"] > .glass-panel { padding: var(--sp-5) var(--sp-4) !important; } }
[id^="modal-"] > .glass-panel h3 { font-size: var(--fs-xl) !important; font-weight: 700; color: var(--text) !important; }
#form-content { gap: var(--sp-4); }
#form-content.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: var(--sp-4) !important; }
#form-submit-btn, #ret-save-btn { min-height: 44px; border-radius: var(--r-md) !important; font-size: var(--fs-lg) !important; }
[id^="modal-"] button[onclick*="closeAllModals"], [id^="modal-"] button[onclick*="closeMessageModal"] { border-radius: var(--r-sm) !important; color: var(--text-muted) !important; }
[id^="modal-"] button[onclick*="closeAllModals"]:hover { color: var(--text) !important; }

/* ── 6. 단추 상태: 마우스 올림·누름·키보드 초점·못 누름 ── */
:where(button, a, [role="button"], .nav-item, .c-tree button, .c-tabs button, summary, label.sn-chip) {
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
:where(button, [role="button"]):not(:disabled):active { filter: brightness(.94); }
:where(button, a, [role="button"], [tabindex]:not([tabindex="-1"]), summary, label.sn-chip):focus-visible { outline: none !important; box-shadow: var(--focus) !important; border-radius: var(--r-xs); }
.sn-chip:has(input:focus-visible) { box-shadow: var(--focus); }
button:disabled, button[disabled], [aria-disabled="true"] { cursor: not-allowed !important; }
button:disabled:not([class*="disabled:opacity"]) { opacity: .5; }
@media (prefers-reduced-motion: reduce) { :root:not([data-theme^="x-"]) :is(*, *::before, *::after) { transition-duration: .01ms !important; animation-duration: .01ms !important; } }   /* 관리자 테마(x-)는 빼고 */

/* ── 7. 커서: 누를 수 있는 것은 손가락, 끄는 것은 grab ── */
[onclick]:not(:disabled), label[for], select, summary, .c-pv, [data-a] { cursor: pointer; }
[draggable="true"] { cursor: grab; }
[draggable="true"]:active, .dash-dragging, .bd-dragging { cursor: grabbing; }
.c-handle { cursor: ns-resize; }
input[type="text"], input[type="search"], input:not([type]), textarea { cursor: text; }

/* ── 8. 리본·위 바·메뉴 트리 아이콘 크기: 리본 20 · 위 바 18 · 트리·표 16 · 작은 단추 14 ── */
.c-ribbon button svg { width: 20px !important; height: 20px !important; }
html.rib-mini .c-ribbon button svg { width: 16px !important; height: 16px !important; }
#top-header button svg, #top-header a svg { width: 18px; height: 18px; }
.c-tree nav svg, .c-tree button svg { width: 16px; height: 16px; flex: none; }
.c-ribbon button { border-radius: var(--r-sm) !important; }
.c-ribbon button:hover:not(:disabled) { background: var(--surface-2) !important; border-color: var(--border) !important; }
.c-ribbon .grp + .grp { border-left: 1px solid var(--border); }
@media (max-width: 767px) { .c-ribbon button svg { width: 16px !important; height: 16px !important; } .c-ribbon button { border-radius: var(--r-full) !important; } }

/* ── 9. 영역 나누기: 메뉴 트리 · 본문 · 속성 칸 사이 경계를 같은 선 하나로 ── */
.c-tree { border-right: 1px solid var(--border) !important; }
.c-insp { border-left: 1px solid var(--border) !important; min-width: 240px; }
html.insp-off .c-insp { min-width: 0; }
.c-pane-h { font-size: var(--fs-sm) !important; font-weight: 700; letter-spacing: .02em; color: var(--text-muted) !important; }
.c-insp .c-det h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.c-insp .c-det .cap { font-size: var(--fs-xs); color: var(--text-muted); }
.c-kv dt { font-size: var(--fs-sm); color: var(--text-muted); }
.c-kv dd { font-size: var(--fs-md); overflow-wrap: anywhere; }
.c-acts button { border-radius: var(--r-sm) !important; font-size: var(--fs-md) !important; }
.c-acts button:hover:not(:disabled) { background: var(--surface-2) !important; }

/* ── 10. 표: 줄 높이·머리·마우스 올림·긴 글자 ── */
#content-area .table-container thead th { font-size: var(--fs-xs) !important; font-weight: 700; color: var(--text-muted) !important; letter-spacing: .02em; }
#content-area .table-container tbody tr { transition: background-color var(--dur) var(--ease); }
#content-area .table-container tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
@media (min-width: 768px) {
    #content-area .table-container td:not(:has(button, input, select, a, .flex)) { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }   /* 긴 메모·주소는 말줄임(속성 칸에 전부 보임) */
}

/* ── 11. 알림 띠·작은 표시(배지) ── */
#toast { border-radius: var(--r-md) !important; box-shadow: var(--sh-2) !important; font-size: var(--fs-md) !important; }
[class*="rounded-full"][class*="text-[10px]"], [class*="rounded-full"][class*="text-[11px]"] { line-height: 1.4; }

/* ── 12. 스크롤바: 얇게, 테마 색으로 ── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── 13. 넘침 막기: 이름·제목이 길어도 칸을 밀어내지 않게 ── */
#page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-det .sub, #form-title { overflow-wrap: anywhere; }

/* ── 14. 불러오는 중 고리: 0.8초 일정 속도 → 1.6초, 천천히 출발·멈춤(11-05 사장님: 너무 빠르고 경박함) ── */
.spin-ring, .animate-spin { animation-duration: 1.6s !important; animation-timing-function: cubic-bezier(.45, .05, .55, .95) !important; }

/* ── 15. 글자 속 선 아이콘(그림문자 대신, 11-05) — 글자 크기를 따라가고 글자 줄에 맞춘다 ── */
.ds-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; stroke-width: 2; }

/* ── 16. 접는 칸 (ERP 모든 화면, 11-05) — 제목줄(.ds-fold-head)을 누르면 접힘. 접힌 칸은 제목줄만 ── */
.ds-fold > .ds-fold-head { cursor: pointer; user-select: none; }
.ds-fold-ico { width: 16px; height: 16px; margin-left: auto; color: var(--text-muted); transition: transform var(--dur) var(--ease); flex: none; }
.ds-fold-head:not(h3):not(h4) :is(h3, h4) { display: flex; align-items: center; gap: var(--sp-2); }
.ds-fold-head:not(h3):not(h4) .ds-fold-ico { margin-left: var(--sp-1); }
.ds-fold.ds-folded > :not(.ds-fold-head) { display: none !important; }
.ds-fold.ds-folded > .ds-fold-head { margin-bottom: 0 !important; }
.ds-fold.ds-folded .ds-fold-ico { transform: rotate(-90deg); }
/* 11-09 사장님: 접으면 칸 자체도 줄어들게 — 최소 높이·고정 높이·늘이기(flex/grid)를 풀고 제목줄 높이만 */
.ds-fold.ds-folded { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; overflow: hidden !important; }
.grid > .ds-fold.ds-folded, .flex:not(.flex-col) > .ds-fold.ds-folded { align-self: start !important; }   /* 옆 칸에 맞춰 늘어나지 않게(세로 줄 묶음은 폭이 줄어드니 제외) */
.ds-fold-head:hover .ds-fold-ico { color: var(--text); }
.c-cap.ds-fold-head .ds-fold-ico { margin-left: 6px; }   /* 표 제목줄: 건수 오른쪽에 */

/* ── 17. 긴 목록은 칸 안에서 스크롤 (11-05 사장님: 다 늘어뜨려 화면을 한참 내려야 했다) — 모든 메뉴의 카드 안 목록 ──
   카드(glass-card) 안의 줄 목록(divide-y)·…-list 묶음은 화면 높이의 절반쯤까지만 보이고 그 안에서 스크롤. 표 화면 본문은 그대로 */
.glass-card > :is([class*="divide-y"], [id$="-list"]:not(tbody):not(table)),
.glass-card > div > :is([class*="divide-y"], [id$="-list"]:not(tbody):not(table)),
#set-menu, #set-roles {
    max-height: var(--ds-box-h, min(52vh, 460px)); overflow-y: auto; overscroll-behavior: contain;   /* --ds-box-h = 사람이 끌어 바꾼 높이(19번) */
    padding-right: var(--sp-1);
}

/* ── 18·19. ERP 모든 화면의 표도 칸 안에서 스크롤 + 칸 아래 끝을 끌어 크기 조절 (11-05 사장님) ──
   PC(768px 이상)만 — 휴대폰은 카드 모양이라 화면째로 내린다. 표 머리줄은 위에 붙는다.
   높이는 --ds-box-h(사람이 끌어 바꾼 값, index.html 칸크기조절준비 가 칸마다 기억) 또는 기본 화면의 약 2/3. */
@media (min-width: 768px) {
    #content-area .table-container { max-height: var(--ds-box-h, min(68vh, 720px)); overflow: auto; overscroll-behavior: contain; }
    #content-area .table-container thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2) !important; box-shadow: inset 0 -1px 0 var(--border); }
    #view-board #board-folders { max-height: var(--ds-box-h, min(40vh, 420px)); overflow-y: auto; overscroll-behavior: contain; }
    /* 크기 조절 손잡이 — 칸 바로 아래 얇은 띠. 마우스를 올리면 ↕ 와 가운데 막대가 보인다. 두 번 누르면 원래 크기 */
    .ds-resize { height: 10px; margin: -5px 0 -5px; position: relative; z-index: 4; cursor: ns-resize; touch-action: none; }
    .ds-resize::after { content: ''; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px; margin-left: -22px; border-radius: 9999px;
        background: var(--border-strong); opacity: 0; transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); }
    .ds-resize:hover::after, .ds-resize.on::after { opacity: 1; background: var(--accent-text, var(--accent)); }
    html.ds-resizing, html.ds-resizing * { cursor: ns-resize !important; user-select: none !important; }
}
@media (max-width: 767px) { .ds-resize { display: none; } }

/* ── 20. 메뉴 트리 선택·초점 (11-05 사장님: 접은 메뉴에서 선택 칸이 크고 어긋남) ──
   초점 테두리를 칸 바깥(4px)이 아니라 안쪽에 그린다 — 바깥에 그리면 좁은 메뉴에서 칸이 커 보이고 옆으로 삐져 보였다.
   접은 메뉴의 선택 표시는 옅은 바탕 + 얇은 안쪽 테두리 하나로(펼친 메뉴의 왼쪽 막대와 겹치지 않게) */
.c-tree .nav-item:focus-visible, .c-tree button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-text, var(--accent)) !important; outline: none !important; }
/* 접은 메뉴의 선택 = 상자 없이 아이콘 강조색 + 왼쪽 끝 짧은 세로 막대(VS Code 처럼) — 상자는 다른 아이콘보다 커 보여 줄이 안 맞아 보였다(11-05 두 번째) */
html.sb-collapsed .c-tree .nav-item.active { background: transparent !important; box-shadow: none !important; }
html.sb-collapsed .c-tree .nav-item.active svg { color: var(--accent-text, var(--accent)) !important; }
html.sb-collapsed .c-tree .nav-item.active::before { content: ''; position: absolute; left: -6px; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: 0 3px 3px 0; background: var(--accent-text, var(--accent)); }
html.sb-collapsed .c-tree .nav-item:hover:not(.active) { background: var(--surface-2) !important; }
html.sb-collapsed .c-tree .nav-item { flex: none; box-sizing: border-box; gap: 0 !important; }   /* 숨은 글자와의 간격(8px)이 남아 아이콘이 4px 왼쪽으로 치우쳤다 */

/* ── 21. 통합 알림 '받을 알림' 체크 목록 — 글자 길이대로 흘러 줄이 들쭉날쭉하던 것을 칸 맞춤(휴대폰 1열, 넓으면 2~3열) ── */
.ds-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2) var(--sp-4); align-items: center; }
.ds-kinds > .col-span-full { grid-column: 1 / -1; }

/* ── 22. 설정 목록 줄 맞춤 (11-05 정렬 검사) — 칸이 좁으면 긴 메뉴 이름만 두 줄로 꺾여 줄마다 높이·위치가 달랐다 → 이름 한 줄(넘치면 …), 고르기 상자는 오른쪽 끝 고정 ── */
:is(#set-menu, #set-roles) > label { flex-wrap: nowrap !important; min-height: 44px; }
:is(#set-menu, #set-roles) > label > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#set-menu, #set-roles) > label > select { flex: none; }

/* ── 23. 홈 화면 앱(아이패드·아이폰) 위 막대는 완전 불투명 (11-05 사장님: 트론 테마에서 위 막대가 흐릿) ──
   iOS 26 은 맨 위 고정 막대가 비치면(반투명·유리 테마) 그 자리를 흐림 처리한다 → 테마 막대 색 아래에 테마 바탕색을 한 겹 깔아 불투명하게 */
html.webapp:is([data-theme], :not([data-theme])) #top-header { background: linear-gradient(var(--surface), var(--surface)), var(--bg) !important;   /* :is 로 강도를 올려 유리 테마 규칙도 덮는다 */
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.webapp[data-theme="x-tron"] #top-header { background: #020a10 !important; }
html.webapp[data-theme="x-win98"] #top-header { background: linear-gradient(90deg, #000080, #0a64b4) !important; }

/* ── 24. 업무 캘린더 오른쪽 칸 (11-05) — 넓은 창: 오늘 일정 + 곧 있을 일정 합친 높이 = 달력 높이, 넘치면 칸마다 스크롤 ── */
@media (min-width: 1280px) {
    .cal-side { position: relative; align-self: stretch; }
    .cal-side-in { position: absolute; inset: 0; }
    .cal-today { flex: 0 1 auto; min-height: 220px; overflow-y: auto; }   /* 11-09: 곧 있을 일정이 길면 이 칸이 한 줄로 납작해지던 것 — 최소 제목+일정 1건은 보이게 */
    .cal-soon { flex: 1 1 0; min-height: 180px; overflow-y: auto; }
}