/* ==========================================================================
   MATE — 신라OEM 자재부 관리시스템 프로토타입
   다크 사이드바 + 데이터 밀도 높은 업무 화면
   ========================================================================== */

:root {
  --mt-bg: #f2f4f8;
  --mt-side: #0d1424;
  --mt-side-2: #111b30;
  --mt-line: #e2e7ef;
  --mt-ink: #16202f;
  --mt-slate: #6a778c;
  --mt-blue: #2563eb;
  --mt-blue-soft: #e8efff;
  --mt-green: #0f9d76;
  --mt-amber: #d97706;
  --mt-red: #dc2f3f;
  --mt-violet: #6d4aff;
  --mt-radius: 12px;
}

body.mate-body { background: var(--mt-bg); font-size: 14px; overflow-x: hidden; }

/* ---------- 레이아웃 ---------- */
.mate-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.mate-side {
  background: linear-gradient(180deg, var(--mt-side), var(--mt-side-2));
  color: rgba(255,255,255,.72);
  padding: 1rem .75rem 1.4rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.06);
  scrollbar-width: thin;
}
.mate-side::-webkit-scrollbar { width: 5px; }
.mate-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 9px; }

.mate-brand { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .9rem; }
.mate-brand .logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, #2563eb, #6d4aff); display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.35); transition: transform .35s var(--pn-ease); }
.mate-brand:hover .logo { transform: rotate(-6deg) scale(1.05); }
.mate-brand .t1 { font-size: .88rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.mate-brand .t2 { font-size: .62rem; letter-spacing: .1em; color: rgba(255,255,255,.4); text-transform: uppercase; }

.mate-nav { display: grid; gap: .12rem; }
.mate-nav .group-label { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.32); font-weight: 800; padding: .9rem .6rem .3rem; }
.mate-nav a {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 9px;
  font-size: .79rem; font-weight: 600; color: rgba(255,255,255,.6);
  transition: all .22s var(--pn-ease); position: relative;
}
.mate-nav a .material-icons { font-size: 17px; color: rgba(255,255,255,.4); transition: color .2s ease, transform .25s var(--pn-ease); }
.mate-nav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(3px); }
.mate-nav a:hover .material-icons { color: #8fb0ff; }
.mate-nav a.active { background: linear-gradient(90deg, rgba(37,99,235,.28), rgba(37,99,235,.08)); color: #fff; }
.mate-nav a.active .material-icons { color: #8fb0ff; }
.mate-nav a.active::before { content: ''; position: absolute; left: -.75rem; top: 18%; bottom: 18%; width: 3px; background: #4f8bff; border-radius: 0 3px 3px 0; }
.mate-nav .code { margin-left: auto; font-size: .62rem; color: rgba(255,255,255,.28); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.mate-side-foot { margin-top: 1.2rem; padding: .8rem .6rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .68rem; color: rgba(255,255,255,.35); line-height: 1.6; }

/* ---------- 메인 ---------- */
.mate-main { min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.mate-topbar {
  background: #fff; border-bottom: 1px solid var(--mt-line);
  padding: .65rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.mate-topbar .tb-left { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.mate-topbar .sys-name { font-size: .78rem; font-weight: 800; color: var(--mt-ink); white-space: nowrap; }
.mate-topbar .sys-name span { color: var(--mt-slate); font-weight: 600; }
.mate-topbar .tb-right { display: flex; align-items: center; gap: .8rem; }
.mate-user { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--mt-slate); }
.mate-user .avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--mt-blue-soft); color: var(--mt-blue); display: grid; place-items: center; font-weight: 800; font-size: .7rem; }
.mate-user strong { color: var(--mt-ink); font-size: .78rem; }
.mate-user .divider { width: 1px; height: 14px; background: var(--mt-line); }

.mate-content { padding: 1.1rem 1.4rem 2.2rem; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.2rem; margin: 0; letter-spacing: -.02em; }
.page-head .ph-sub { font-size: .74rem; color: var(--mt-slate); margin-top: .2rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.page-head .ph-sub .material-icons { font-size: 14px; }
.screen-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; background: var(--mt-blue-soft); color: var(--mt-blue); border-radius: 6px; padding: .18rem .4rem; font-weight: 700; }

/* ---------- 패널 ---------- */
.mt-panel { background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.mt-panel-head { padding: .7rem 1rem; border-bottom: 1px solid var(--mt-line); display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.mt-panel-head h2 { font-size: .84rem; margin: 0; display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.mt-panel-head h2 .material-icons { font-size: 17px; color: var(--mt-blue); }
.mt-panel-head .hint { font-size: .68rem; color: var(--mt-slate); }
.mt-panel-body { padding: .9rem 1rem; }
.mt-panel-body.tight { padding: .4rem .6rem; }
.mt-panel-body.flush { padding: 0; overflow-x: auto; }

/* ---------- 필터 바 ---------- */
.mt-filter { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .6rem .8rem; background: #fbfcfe; border: 1px solid var(--mt-line); border-radius: 10px; margin-bottom: .8rem; }
.mt-filter .f-label { font-size: .68rem; font-weight: 800; color: var(--mt-slate); letter-spacing: .04em; text-transform: uppercase; }
.mt-filter .form-control, .mt-filter .form-select { height: 32px; font-size: .76rem; border-radius: 8px; padding: .2rem .5rem; }
.mt-filter .sep { width: 1px; height: 20px; background: var(--mt-line); }

/* ---------- 버튼 ---------- */
.btn-mt { height: 32px; padding: 0 .7rem; font-size: .75rem; font-weight: 700; border-radius: 8px; display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--mt-line); background: #fff; color: var(--mt-ink); transition: all .2s var(--pn-ease); }
.btn-mt .material-icons { font-size: 16px; }
.btn-mt:hover { border-color: var(--mt-blue); color: var(--mt-blue); background: #f5f8ff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(37,99,235,.12); }
.btn-mt.primary { background: var(--mt-blue); border-color: var(--mt-blue); color: #fff; box-shadow: 0 4px 10px rgba(37,99,235,.25); }
.btn-mt.primary:hover { background: #1d4ed8; color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.35); }
.btn-mt.danger { color: var(--mt-red); border-color: #f3c9cd; }
.btn-mt.danger:hover { background: #fdf1f2; border-color: var(--mt-red); }
.btn-mt.ghost { background: transparent; }
.btn-mt.sm { height: 26px; padding: 0 .5rem; font-size: .68rem; }
.btn-mt.sm .material-icons { font-size: 14px; }

/* ---------- 테이블 ---------- */
.mt-table { width: 100%; font-size: .78rem; border-collapse: separate; border-spacing: 0; }
.mt-table th {
  background: #f7f9fc; color: var(--mt-slate);
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 800;
  padding: .55rem .6rem; border-bottom: 1px solid var(--mt-line); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.mt-table td { padding: .5rem .6rem; border-bottom: 1px solid #eef1f6; color: var(--mt-ink); vertical-align: middle; white-space: nowrap; }
.mt-table tbody tr { transition: background .18s ease, box-shadow .18s ease; cursor: pointer; }
.mt-table tbody tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 var(--mt-blue); }
.mt-table tbody tr.selected { background: #eaf1ff; box-shadow: inset 3px 0 0 var(--mt-blue); }
.mt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mt-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.mt-table .muted { color: var(--mt-slate); }
.mt-table .strong { font-weight: 800; }
.mt-table tfoot td { background: #f7f9fc; font-weight: 800; border-top: 2px solid var(--mt-line); }
.mt-table.compact td, .mt-table.compact th { padding: .35rem .45rem; }
.table-scroll { overflow: auto; max-height: 460px; border-radius: 0 0 var(--mt-radius) var(--mt-radius); }

/* ---------- 상태 칩 ---------- */
.chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 800; padding: .2rem .45rem; border-radius: 5px; letter-spacing: .01em; }
.chip .material-icons { font-size: 12px; }
.chip.gray { background: #eef1f6; color: #647084; }
.chip.blue { background: #e8efff; color: #1d4ed8; }
.chip.green { background: #e3f7f0; color: #0b7a5c; }
.chip.amber { background: #fdf1dc; color: #a35c00; }
.chip.red { background: #fdecee; color: #b91c2c; }
.chip.violet { background: #efeaff; color: #5b3ee8; }
.chip.dark { background: #1b2434; color: #fff; }

/* ---------- KPI ---------- */
.mt-kpi { background: #fff; border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: .8rem .9rem; transition: all .3s var(--pn-ease); position: relative; overflow: hidden; }
.mt-kpi::after { content: ''; position: absolute; right: -20px; bottom: -20px; width: 70px; height: 70px; background: radial-gradient(circle, rgba(37,99,235,.08), transparent 70%); }
.mt-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,24,40,.08); border-color: #cfd9ee; }
.mt-kpi .k-label { font-size: .68rem; color: var(--mt-slate); font-weight: 700; letter-spacing: .03em; display: flex; align-items: center; gap: .3rem; }
.mt-kpi .k-label .material-icons { font-size: 14px; color: #8fa0b8; }
.mt-kpi .k-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.mt-kpi .k-sub { font-size: .66rem; color: var(--mt-slate); }
.mt-kpi.blue .k-value { color: var(--mt-blue); }
.mt-kpi.green .k-value { color: var(--mt-green); }
.mt-kpi.amber .k-value { color: var(--mt-amber); }
.mt-kpi.red .k-value { color: var(--mt-red); }

/* ---------- 탭 ---------- */
.mt-tabs { display: flex; gap: .1rem; border-bottom: 1px solid var(--mt-line); padding: 0 .5rem; background: #fff; }
.mt-tab { border: 0; background: transparent; padding: .65rem .8rem; font-size: .78rem; font-weight: 700; color: var(--mt-slate); position: relative; transition: color .2s ease; white-space: nowrap; }
.mt-tab:hover { color: var(--mt-blue); }
.mt-tab.active { color: var(--mt-blue); }
.mt-tab.active::after { content: ''; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; background: var(--mt-blue); border-radius: 2px 2px 0 0; }
.mt-tab .count { font-size: .64rem; background: #eef1f6; color: var(--mt-slate); border-radius: 999px; padding: .05rem .35rem; margin-left: .25rem; }
.mt-tab.active .count { background: var(--mt-blue-soft); color: var(--mt-blue); }

/* ---------- QR 카드 ---------- */
.lot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.lot-card { border: 1px solid var(--mt-line); border-radius: 10px; padding: .7rem .75rem; background: #fff; transition: all .25s var(--pn-ease); }
.lot-card:hover { border-color: var(--mt-blue); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(37,99,235,.12); }
.lot-card .qr-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.qr-box { width: 34px; height: 34px; border-radius: 6px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0/8px 8px; border: 2px solid #111; flex: 0 0 auto; }
.lot-card .lot-id { font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 800; }
.lot-card .lot-meta { font-size: .68rem; color: var(--mt-slate); line-height: 1.5; }
.lot-card .lot-qty { font-size: .86rem; font-weight: 800; color: var(--mt-ink); }
.master-tag { font-size: .6rem; background: #1b2434; color: #fff; padding: .1rem .3rem; border-radius: 3px; font-weight: 800; }

/* ---------- 칸반(폐기 승인) ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.kb-col { background: #f7f9fc; border: 1px solid var(--mt-line); border-radius: 10px; padding: .55rem; min-height: 220px; }
.kb-col-head { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 800; padding: .2rem .3rem .55rem; }
.kb-col-head .n { background: #fff; border: 1px solid var(--mt-line); border-radius: 999px; padding: .05rem .4rem; font-size: .64rem; }
.kb-card { background: #fff; border: 1px solid var(--mt-line); border-radius: 8px; padding: .55rem .6rem; margin-bottom: .45rem; font-size: .7rem; transition: all .2s var(--pn-ease); cursor: grab; }
.kb-card:hover { border-color: var(--mt-blue); box-shadow: 0 6px 14px rgba(37,99,235,.12); transform: translateY(-2px); }
.kb-card .kb-title { font-weight: 800; font-size: .74rem; }
.kb-card .kb-meta { color: var(--mt-slate); font-size: .64rem; }

/* ---------- 진행 바 ---------- */
.bar { height: 6px; background: #eef1f6; border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--mt-blue); border-radius: 99px; transition: width .8s var(--pn-ease); }
.bar.green span { background: var(--mt-green); }
.bar.amber span { background: var(--mt-amber); }
.bar.red span { background: var(--mt-red); }

/* ---------- 상세 그리드 ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .1rem; }
.detail-item { padding: .5rem .2rem; }
.detail-item .dt { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mt-slate); font-weight: 800; }
.detail-item .dd { font-size: .82rem; font-weight: 700; margin-top: .1rem; }

/* ---------- 태블릿 패드 ---------- */
.pad-frame {
  background: #0e1626; border-radius: 26px; padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.35);
  max-width: 560px; margin: 0 auto;
}
.pad-screen { background: #f4f7fc; border-radius: 16px; overflow: hidden; }
.pad-head { background: #0e1626; color: #fff; padding: .9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; }
.pad-head .t { font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.pad-seq { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: #fff; border-bottom: 1px solid var(--mt-line); }
.pad-seq .sq { width: 46px; height: 46px; border-radius: 12px; background: var(--mt-blue-soft); color: var(--mt-blue); display: grid; place-items: center; font-weight: 800; font-size: 1rem; }
.pad-seq .info { flex: 1; }
.pad-seq .info .l1 { font-size: .82rem; font-weight: 800; }
.pad-seq .info .l2 { font-size: .7rem; color: var(--mt-slate); }
.pad-btn { height: 64px; font-size: 1rem; border-radius: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; border: 0; transition: all .2s var(--pn-ease); }
.pad-btn .material-icons { font-size: 26px; }
.pad-btn.primary { background: var(--mt-blue); color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.3); }
.pad-btn.primary:hover { background: #1d4ed8; transform: translateY(-2px); }
.pad-btn.ghost { background: #fff; border: 1px solid var(--mt-line); color: var(--mt-ink); }
.pad-btn.ghost:hover { border-color: var(--mt-blue); color: var(--mt-blue); }
.pad-btn:disabled { opacity: .45; }

/* ---------- 스텝(공수/일정) ---------- */
.roadmap { display: grid; gap: .6rem; }
.rm-item { display: grid; grid-template-columns: 90px 1fr 110px; gap: .8rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--mt-line); border-radius: 10px; background: #fff; transition: all .25s var(--pn-ease); }
.rm-item:hover { border-color: var(--mt-blue); transform: translateX(3px); box-shadow: 0 6px 16px rgba(37,99,235,.08); }
.rm-item .rm-phase { font-size: .7rem; font-weight: 800; color: var(--mt-blue); }
.rm-item .rm-title { font-size: .78rem; font-weight: 700; }
.rm-item .rm-desc { font-size: .68rem; color: var(--mt-slate); }

/* ---------- 목업 모달 ---------- */
.mock-modal { background: #fff; border-radius: 14px; border: 1px solid var(--mt-line); box-shadow: var(--pn-shadow-lg); }
.mock-modal .mm-head { padding: .8rem 1rem; border-bottom: 1px solid var(--mt-line); display: flex; align-items: center; justify-content: space-between; }
.mock-modal .mm-head h3 { font-size: .86rem; margin: 0; display: flex; align-items: center; gap: .35rem; }
.mock-modal .mm-body { padding: 1rem; }
.mock-modal .mm-foot { padding: .7rem 1rem; border-top: 1px solid var(--mt-line); display: flex; justify-content: flex-end; gap: .4rem; background: #fbfcfe; border-radius: 0 0 14px 14px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1199.98px) {
  .kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .mate-shell { grid-template-columns: 1fr; }
  .mate-side { position: static; height: auto; }
  .mate-nav { display: flex; overflow-x: auto; gap: .25rem; }
  .mate-nav .group-label { display: none; }
  .mate-nav a { white-space: nowrap; }
  .mate-nav .code { display: none; }
  .mate-content { padding: .9rem .8rem 2rem; }
}
@media (max-width: 767.98px) {
  .kanban { grid-template-columns: 1fr; }
  .rm-item { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- 탭 아이콘 ---------- */
.mt-tab .material-icons { font-size: 15px; margin-right: .25rem; vertical-align: -3px; color: #8fa0b8; transition: color .2s ease; }
.mt-tab:hover .material-icons, .mt-tab.active .material-icons { color: var(--mt-blue); }