/* NADSE ERP 프로토타입 — app.css (토큰 · 셸 · 공통 컴포넌트) */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  --navy:#16276E; --red:#E02F2A; --green:#22A64B; --sky:#1C9BD8;
  --bg:#F3F5F9; --surface:#FFFFFF; --text:#1B2440; --muted:#5B6683;
  --border:#D9DFEA; --border-strong:#B9C3D6; --neutral-bg:#EEF1F6;
  --primary:#16276E; --primary-hover:#1F3690; --on-primary:#FFFFFF;
  --ok:#22A64B; --warn:#E02F2A; --info:#1C9BD8;
  --ok-bg:#E6F6EB; --warn-bg:#FCE9E8; --info-bg:#E4F3FB; --sky-soft:#CDE9F8;
  --spark-navy:#16276E;
  --sb-bg:#16276E; --sb-text:#E7EBF5; --sb-muted:#A9B6DC;
  --sb-hover:rgba(255,255,255,.08); --sb-active:rgba(255,255,255,.14); --sb-border:rgba(255,255,255,.12);
  --sb-w:240px; --sb-wc:64px; --topbar-h:56px; --radius:8px;
  --font:system-ui,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#0D1530; --surface:#162044; --text:#E7EBF5; --muted:#9FB0D8;
  --border:#27335A; --border-strong:#3A4A7A; --neutral-bg:rgba(255,255,255,.07);
  --primary:#1C9BD8; --primary-hover:#3DB4EE; --on-primary:#071026;
  --ok:#3CC46A; --warn:#F0524D; --info:#3DB4EE;
  --ok-bg:rgba(60,196,106,.16); --warn-bg:rgba(240,82,77,.16); --info-bg:rgba(61,180,238,.16); --sky-soft:rgba(61,180,238,.28);
  --spark-navy:#5B7BD6;
  --sb-bg:#0A1128; --sb-muted:#8A9AC4;
  --sb-hover:rgba(255,255,255,.06); --sb-active:rgba(28,155,216,.18); --sb-border:rgba(255,255,255,.08);
  color-scheme:dark;
}

/* ---------- 2. 기본 ---------- */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }   /* .app{display:flex} 등이 hidden을 덮지 않도록 */
html, body { margin:0; height:100%; }
body { font:14px/1.5 var(--font); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
.num { font-variant-numeric:tabular-nums; text-align:right; }
.muted { color:var(--muted); }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ic-sm { width:16px; height:16px; }
[data-logo] { display:flex; height:22px; }         /* 작업 페이지: 작게 */
.logo { height:100%; width:auto; display:block; }

/* ---------- 3. 앱 셸 ---------- */
.app { display:flex; min-height:100%; }
.sidebar { position:fixed; top:0; bottom:0; left:0; width:var(--sb-w); background:var(--sb-bg); color:var(--sb-text);
  display:flex; flex-direction:column; z-index:30; overflow:hidden; }
.main { flex:1; min-width:0; margin-left:var(--sb-w); }
.brand { display:flex; align-items:center; gap:9px; height:var(--topbar-h); padding:0 16px; border-bottom:1px solid var(--sb-border); white-space:nowrap; width:100%; overflow:hidden; }
.brand-word { font-weight:800; font-size:15px; letter-spacing:.08em; }
.nav { flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-item, .sb-foot button { display:flex; align-items:center; gap:12px; height:40px; padding:0 12px; border-radius:6px;
  color:var(--sb-muted); position:relative; white-space:nowrap; width:100%; text-align:left; overflow:hidden; }
.nav-item:hover, .sb-foot button:hover { background:var(--sb-hover); color:var(--sb-text); }
.nav-item.is-active { background:var(--sb-active); color:#fff; }
.nav-item.is-open { color:var(--sb-text); }
.nav-item.is-active::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--sky); }
.nav-sub { display:flex; flex-direction:column; gap:2px; margin:2px 0 4px; }
.nav-item.sub { height:32px; padding-left:44px; font-size:13px; }
.nav-item.sub::after { content:""; position:absolute; left:21px; top:0; bottom:0; width:1px; background:var(--sb-border); }
.nav-item.sub.is-active::before { left:20px; top:8px; bottom:8px; }
.sb-label, .brand-word { transition:opacity .12s; }
.nav-sep { height:1px; background:var(--sb-border); margin:8px 4px; }
.nav-group { padding:14px 12px 5px; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:var(--sb-muted); opacity:.7; white-space:nowrap; overflow:hidden; }
.nav-group:first-child { padding-top:4px; }
/* 접고 펴는 묶음 — 묶음 제목이 버튼 ((무역) 모노베이트 컨테이너) */
.nav-drop-btn { display:flex; align-items:center; gap:6px; width:100%; padding:14px 12px 5px; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:var(--sb-muted); white-space:nowrap; overflow:hidden; border-radius:6px; text-align:left; }
.nav-drop-btn:hover, .nav-drop-btn:focus-visible { color:var(--sb-text); }
.nav-drop-btn .sb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-drop-btn .chev { width:15px; height:15px; transition:transform .15s; }
.nav-drop.is-closed .chev { transform:rotate(-90deg); }
.nav-drop-items { display:flex; flex-direction:column; gap:2px; }
.nav-drop.is-closed .nav-drop-items { display:none; }
.sb-foot { padding:8px; border-top:1px solid var(--sb-border); display:flex; flex-direction:column; gap:2px; }

.topbar { height:var(--topbar-h); display:flex; align-items:center; gap:12px; padding:0 24px; background:var(--surface);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.topbar h1 { font-size:18px; font-weight:700; margin:0; flex:1; }
.date-chip { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.icon-btn { width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); }
.icon-btn:hover { background:var(--neutral-bg); color:var(--text); }
.user-chip { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--border); border-radius:999px; font-size:13px; }
.avatar { width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
html[data-theme="dark"] .avatar { background:var(--sky); color:#071026; }
.content { padding:24px; max-width:1440px; min-width:0; }
.drawer-btn { display:none; }

@media (min-width:768px) {
  html[data-sidebar="collapsed"] .sidebar { width:var(--sb-wc); }
  html[data-sidebar="collapsed"] .main { margin-left:var(--sb-wc); }
  html[data-sidebar="collapsed"] .sidebar.is-peek { width:var(--sb-w); box-shadow:8px 0 24px rgba(0,0,0,.25); }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .sb-label,
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .brand-word { opacity:0; visibility:hidden; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-item,
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .sb-foot button { padding:0 22px; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .brand { padding:0 14px; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-sub { display:none; }
  /* 접혔을 때 묶음 제목은 가는 구분선으로 대신합니다 */
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-group { font-size:0; padding:9px 14px 8px; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-group::before {
    content:""; display:block; height:1px; background:var(--sb-border); }
  /* 아이콘만 보일 때는 접은 묶음도 펼쳐 둡니다 (제목은 구분선) */
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-drop-btn { font-size:0; padding:9px 14px 8px; pointer-events:none; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-drop-btn::before { content:""; flex:1; height:1px; background:var(--sb-border); }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-drop-btn > * { display:none; }
  html[data-sidebar="collapsed"] .sidebar:not(.is-peek) .nav-drop .nav-drop-items { display:flex; }
}
@media (prefers-reduced-motion:no-preference) {
  .sidebar { transition:width .2s ease, transform .18s ease; }
  .main { transition:margin-left .2s ease; }
  .nav-item, .sb-foot button, .brand { transition:padding .2s ease; }
}

/* ---------- 4. 도구 모음 · 필터 ---------- */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .grow { flex:1; }
.seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px; overflow:hidden; }
.seg button { height:36px; padding:0 12px; font-size:13px; color:var(--muted); }
.seg button + button { border-left:1px solid var(--border); }
.seg button.on { background:var(--primary); color:var(--on-primary); font-weight:600; }
.period { display:inline-flex; align-items:center; gap:2px; }
.period .label { min-width:110px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.search-box { position:relative; flex:0 1 200px; min-width:150px; }
.search-box input { width:100%; padding-left:32px; }
.search-box svg { position:absolute; left:9px; top:9px; color:var(--muted); pointer-events:none; }
select.sm, input.sm { height:36px; width:auto; min-width:0; max-width:100%; }
.toolbar > .grow { flex:1 1 0; min-width:0; }
@media (max-width:1100px) { .toolbar > .grow { display:none; } }

/* ---------- 5. 지표 띠 (좁아지면 줄바꿈) ---------- */
.kpi { display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:20px; overflow:hidden; }
.kpi > div { flex:1 1 210px; min-width:0; padding:14px 18px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
  border-left:1px solid var(--border); border-top:1px solid var(--border); margin:-1px 0 0 -1px; }
.kpi > div > div { min-width:0; }
.kpi .label { color:var(--muted); font-size:13px; margin-bottom:4px; }
.kpi .value { font-size:clamp(17px,1.55vw,22px); font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .value small { font-size:13px; font-weight:600; color:var(--muted); margin-left:2px; }
.kpi .label, .kpi .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi .sub { font-size:12px; color:var(--muted); }
@media (max-width:1100px) { .kpi > div { flex:1 1 calc(50% - 1px); } }   /* 2×2로 반듯하게 */
@media (max-width:560px)  { .kpi > div { flex:1 1 100%; } }
.kpi .value.in { color:var(--ok); } .kpi .value.out { color:var(--warn); }
.spark { display:flex; align-items:flex-end; gap:3px; height:30px; flex:none; }
@media (max-width:1200px) { .spark { display:none; } }   /* 좁아지면 미니 막대는 숨김 */
.spark i { display:block; width:6px; border-radius:3px; background:var(--sky); opacity:.85; }
.spark.ok i { background:var(--ok); } .spark.warn i { background:var(--warn); } .spark.navy i { background:var(--spark-navy); }

/* ---------- 6. 패널 · 표 ---------- */
.grid-2 { display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); min-width:0; margin-bottom:20px; overflow:hidden; }
.panel-head { display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.panel-head h2 { font-size:15px; font-weight:700; margin:0; flex:1 1 auto; min-width:0; }
.panel-head a { font-size:13px; color:var(--info); }
.panel-foot { padding:12px 18px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { padding:9px 14px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
td.wrap { white-space:normal; min-width:150px; }
th { color:var(--muted); font-weight:600; font-size:12.5px; }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--neutral-bg); }
tbody tr.is-void td { opacity:.55; }
tbody tr.is-void .desc { text-decoration:line-through; }
tfoot td { font-weight:700; border-top:1px solid var(--border-strong); background:var(--neutral-bg); }
.empty-row td { text-align:center; color:var(--muted); padding:36px 14px; white-space:normal; }
.rownum { color:var(--muted); font-variant-numeric:tabular-nums; }

.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:18px; }
.pill-info { background:var(--info-bg); color:var(--info); } .pill-ok { background:var(--ok-bg); color:var(--ok); }
.pill-warn { background:var(--warn-bg); color:var(--warn); } .pill-muted { background:var(--neutral-bg); color:var(--muted); }
.amt-in { color:var(--ok); } .amt-out { color:var(--warn); }
.row-act { display:inline-flex; gap:2px; }
.row-act button { width:28px; height:28px; border-radius:6px; display:grid; place-items:center; color:var(--muted); }
.row-act button:hover { background:var(--neutral-bg); color:var(--text); }

/* 인라인 편집 (거래번호 등) */
.inline-edit { display:inline-block; min-width:96px; padding:2px 6px; border-radius:4px; border:1px dashed transparent; cursor:text; }
.inline-edit:hover { border-color:var(--border-strong); background:var(--neutral-bg); }
.inline-edit:focus { outline:none; border:1px solid var(--sky); background:var(--surface); }
.inline-edit.is-empty::before { content:"—"; color:var(--muted); }

/* ---------- 7. 폼 · 빠른 기입 ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:6px;
  border:1px solid var(--border-strong); background:var(--surface); font-weight:600; white-space:nowrap; }
.btn:hover { background:var(--neutral-bg); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-danger { color:var(--warn); border-color:var(--warn); }
.btn-danger:hover { background:var(--warn-bg); }
.btn-sm { height:30px; padding:0 10px; font-size:13px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:13px; font-weight:600; }
.field .hint { font-size:12px; color:var(--muted); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
input, select, textarea { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:6px; height:38px; padding:0 10px; width:100%; }
input[type=checkbox], input[type=radio] { width:auto; height:auto; padding:0; border:0; background:none; }
textarea { height:auto; min-height:76px; padding:8px 10px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--sky); outline-offset:0; border-color:var(--sky); }
input:disabled, select:disabled, textarea:disabled { background:var(--neutral-bg); color:var(--muted); }
input[type=file] { padding:6px 10px; height:auto; }
.switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; position:relative; }
.switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }   /* 숨긴 체크박스가 밖으로 튀어나가지 않도록 */
.switch i { width:36px; height:20px; border-radius:999px; background:var(--border-strong); position:relative; transition:background .15s; flex:none; }
.switch i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch input:checked + i { background:var(--ok); }
.switch input:checked + i::after { transform:translateX(16px); }
.switch input:focus-visible + i { outline:2px solid var(--sky); outline-offset:2px; }

.quick { display:flex; flex-wrap:wrap; gap:8px 10px; padding:12px 18px; background:var(--neutral-bg);
  border-bottom:1px solid var(--border); align-items:flex-end; }
.quick .field { margin:0; gap:4px; flex:1 1 132px; min-width:0; max-width:250px; }   /* 남는 폭에 한 칸만 늘어나지 않게 */
.quick .field.wide { flex:2 1 200px; max-width:420px; }
@media (max-width:560px) { .quick .field, .quick .field.wide { max-width:none; flex-basis:100%; } }
.quick > .btn { flex:0 0 auto; height:34px; }
.quick .field label { font-size:11.5px; color:var(--muted); font-weight:600; }
.quick input, .quick select { height:34px; }
.quick input[inputmode=numeric] { text-align:right; font-variant-numeric:tabular-nums; }
.quick .locked { grid-column:1/-1; color:var(--muted); font-size:13px; padding:4px 0; }

/* ---------- 8. 모달 · 토스트 ---------- */
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(8,14,36,.55); padding:24px; }
.modal[hidden] { display:none; }
.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:min(600px,100%); max-height:88vh; display:flex; flex-direction:column; }
.modal-box.wide { width:min(860px,100%); }
.modal-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:0; font-size:16px; flex:1; }
.modal-body { padding:20px; overflow:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg);
  padding:10px 16px; border-radius:8px; font-size:13px; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.toast.warn { background:var(--warn); color:#fff; }
.note-box { background:var(--neutral-bg); border-radius:8px; padding:12px 14px; font-size:13px; color:var(--muted); }
.timeline { margin:0; padding:0; }
.timeline li { list-style:none; padding:10px 0 10px 16px; border-left:2px solid var(--border); position:relative; }
.timeline li::before { content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px; border-radius:50%; background:var(--sky); }
.timeline .meta { font-size:12px; color:var(--muted); margin-bottom:3px; font-variant-numeric:tabular-nums; }

/* ---------- 9. 로그인 ---------- */
.login { min-height:100%; display:grid; place-items:center; padding:24px; }
.login-box { width:min(400px,100%); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:36px 32px; }
.login-brand { display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:28px; color:var(--navy); }
html[data-theme="dark"] .login-brand { color:#fff; }
.login-brand [data-logo] { height:88px; margin-bottom:6px; }
.login-brand .brand-word { font-size:28px; letter-spacing:.06em; }
.login-brand small { color:var(--muted); letter-spacing:.3em; font-size:13px; }
.login-err { color:var(--warn); font-size:13px; min-height:18px; margin:-6px 0 10px; }
.login-foot { margin-top:16px; text-align:center; font-size:12px; color:var(--muted); }
.login-theme { position:fixed; top:16px; right:16px; }

/* ---------- 10. 인쇄 (클래스 토글 격리) ---------- */
@media print { @page { size:A4; margin:14mm; } }
body.printing .sidebar, body.printing .topbar, body.printing .no-print { display:none !important; }
body.printing .main { margin-left:0 !important; }
body.printing .content { padding:0; max-width:none; }
body.printing .panel { border:0; margin:0; }
body.printing, body.printing .panel, body.printing .kpi,
body.printing .modal, body.printing .modal-box { background:#fff !important; color:#000 !important; }
body.printing th, body.printing td { border-color:#bbb !important; }
body.printing .modal { position:static; background:none; padding:0; display:block; }
body.printing .modal[hidden] { display:none; }
body.printing .modal-box { border:0; max-height:none; width:100%; }
body.printing .modal-head, body.printing .modal-foot { display:none; }
body.printing .modal-body { padding:0; overflow:visible; }
body.print-modal .app { display:none; }     /* 모달 인쇄 시 본문 숨김 */

.link-btn { color:var(--info); font-weight:600; }
.link-btn:hover { text-decoration:underline; }

/* ---------- 11. 모바일 최소 대응 ---------- */
@media (max-width:767px) {
  .sidebar { transform:translateX(-100%); }
  html[data-drawer="open"] .sidebar { transform:none; box-shadow:8px 0 24px rgba(0,0,0,.35); }
  html[data-drawer="open"] .main::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:25; }
  .main { margin-left:0; }
  .drawer-btn { display:inline-flex; }
  .content { padding:16px; }
  .user-name { display:none; }
  .grid-2 { grid-template-columns:1fr; }
  .spark { display:none; }
  .search-box input { width:100%; }
  td.wrap { white-space:nowrap; }
  .topbar { padding:0 12px; gap:8px; }
  .topbar h1 { font-size:16px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* 긴 화면 이름이 두세 줄로 넘치지 않게 */
}
@media (max-width:480px) { .date-chip { display:none; } }