/* DMSense ERP - style.css
   산업장비 백오피스: 차분한 슬레이트 베이스 + 기능색, 높은 정보밀도 */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --ink: #1e293b;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --brand: #0f3d5c;      /* 딥 틸-네이비 */
  --brand-2: #1d6fa5;
  --accent: #d97706;     /* 산업 앰버 */
  --ok: #16794e;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info-bg: #dbeafe;
  --info: #1e40af;
  --radius: 7px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 8px rgba(15,23,42,.04);
  --mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, monospace;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--brand-2); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* ---------- 로그인 ---------- */
#login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background:
    radial-gradient(1200px 600px at 70% -10%, #15466622, transparent),
    linear-gradient(160deg, #0f3d5c, #0b2a3f);
}
.login-card {
  background: var(--surface); width: 360px; padding: 36px 32px;
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.login-card .brand-mark { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.login-card h1 { font-size: 22px; margin: 0; letter-spacing: -.5px; color: var(--brand); }
.login-card .sub { color: var(--ink-3); font-size: 12px; margin: 0 0 24px; letter-spacing: 2px; text-transform: uppercase; }
.login-card label { display: block; font-size: 12px; color: var(--ink-2); margin: 14px 0 5px; }
.login-card input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 14px; outline: none;
}
.login-card input:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px #1d6fa522; }
.login-card button {
  width: 100%; margin-top: 22px; padding: 12px; background: var(--brand);
  color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 600;
}
.login-card button:hover { background: #0b3148; }
.login-err { color: var(--danger); font-size: 13px; margin-top: 14px; min-height: 18px; }

/* ---------- 앱 레이아웃 ---------- */
#app { display: none; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--brand); color: #cfe2ef; display: flex; flex-direction: column; }
.sidebar .logo { padding: 20px 20px 16px; border-bottom: 1px solid #ffffff1a; }
.sidebar .logo b { color: #fff; font-size: 18px; letter-spacing: -.5px; }
.sidebar .logo span { display: block; font-size: 10px; letter-spacing: 2px; color: #7fb0cd; margin-top: 2px; }
.nav { padding: 10px 0; flex: 1; }
.nav .group { font-size: 10px; letter-spacing: 1.5px; color: #5d8eab; padding: 16px 20px 6px; text-transform: uppercase; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: #cfe2ef;
  font-size: 13.5px; border-left: 3px solid transparent;
}
.nav a:hover { background: #ffffff12; color: #fff; }
.nav a.active { background: #ffffff1c; color: #fff; border-left-color: var(--accent); font-weight: 600; }
.nav a .ic { width: 16px; text-align: center; opacity: .85; }
.sidebar .foot { padding: 14px 20px; border-top: 1px solid #ffffff1a; font-size: 12px; color: #9fc1d6; }

.main { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; }
.topbar {
  height: 56px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.topbar .crumb { font-size: 15px; font-weight: 600; color: var(--ink); }
.topbar .user { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2); }
.topbar .user .badge { background: var(--info-bg); color: var(--info); padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.content { padding: 24px; overflow: auto; }

/* ---------- 공통 컴포넌트 ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.card .card-head h2 { font-size: 15px; margin: 0; }
.card .card-body { padding: 18px; }

.btn { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #0b3148; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { filter: brightness(.94); }
.btn.danger { color: var(--danger); border-color: #f3c0c0; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type=text], .toolbar select {
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: 13px; background: var(--surface);
}
.toolbar .spacer { flex: 1; }

table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
table.grid th {
  text-align: left; font-size: 11.5px; letter-spacing: .3px; color: var(--ink-2);
  text-transform: uppercase; padding: 11px 14px; border-bottom: 2px solid var(--border-strong);
  background: var(--surface-2); white-space: nowrap;
}
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
table.grid tr:hover td { background: #f0f7fb; }
table.grid td.r, table.grid th.r { text-align: right; }
table.grid td.c, table.grid th.c { text-align: center; }
table.grid .clickrow { cursor: pointer; }
.empty { text-align: center; color: var(--ink-3); padding: 48px 0; font-size: 14px; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.chip.draft { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-strong); }
.chip.ordered, .chip.confirmed { background: var(--info-bg); color: var(--info); }
.chip.received, .chip.shipped { background: var(--ok-bg); color: var(--ok); }
.chip.cancelled { background: var(--danger-bg); color: var(--danger); }
.chip.vendor { background: #ede9fe; color: #6d28d9; }
.chip.customer { background: #cffafe; color: #0e7490; }
.chip.both { background: var(--surface-2); color: var(--ink-2); }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .label { font-size: 12px; color: var(--ink-2); }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; }
.kpi .value small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.kpi.brand { border-top: 3px solid var(--brand-2); }
.kpi.accent { border-top: 3px solid var(--accent); }

/* 폼 */
.form-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13.5px; font-family: inherit; background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px #1d6fa51a; }
.field.span2 { grid-column: span 2; }
.field.span4 { grid-column: span 4; }

.lines th { font-size: 11px; }
.lines td { padding: 6px 8px; }
.lines input, .lines select { width: 100%; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px; }
.lines .amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); padding-right: 12px; }
.line-total { display: flex; justify-content: flex-end; gap: 16px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--border-strong); }
.line-total .lab { color: var(--ink-2); font-size: 13px; }
.line-total .big { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; z-index: 50; overflow: auto; }
.modal { background: var(--surface); border-radius: 10px; width: 100%; max-width: 560px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.modal.wide { max-width: 920px; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .x { background: none; border: none; font-size: 22px; color: var(--ink-3); line-height: 1; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* 토스트 */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 11px 18px; border-radius: var(--radius); color: #fff; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: pop .2s ease; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.detail-head h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; margin: 18px 0; }
.meta-grid .m label { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.meta-grid .m div { font-size: 14px; margin-top: 3px; word-break: break-word; }
.back-link { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; display: inline-block; }

/* 햄버거 (모바일에서만 보임) */
.hamburger {
  display: none; background: none; border: none; font-size: 22px;
  color: var(--ink); padding: 6px 10px; margin-right: 4px; cursor: pointer;
  border-radius: var(--radius); line-height: 1;
}
.hamburger:hover { background: var(--surface-2); }
.sidebar-backdrop { display: none; }

/* 데스크탑·태블릿: 카드를 가로로 보여주는 정도까진 그대로 유지 */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ───── 모바일 (≤720px) ───── */
@media (max-width: 720px) {
  /* iOS Safari 결정타: body 자체를 viewport에 고정 → 페이지가 절대 움직일 수 없음
     실제 콘텐츠 스크롤은 .main 안에서 일어남 */
  html, body {
    height: 100%; width: 100%;
    position: fixed; top: 0; left: 0;
    overflow: hidden;
    touch-action: pan-y;
  }
  #app { height: 100vh; height: 100dvh; overflow: hidden; }
  .main { height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; }
  /* 카드 안 표는 가로 스크롤이 필요하므로 명시적으로 풀어줌 */
  .card { touch-action: pan-x pan-y; }
  /* 다중 안전망: 어떤 자식도 부모를 밀어내지 못하게 */
  .content { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .toolbar { max-width: 100%; min-width: 0; }
  .card { max-width: 100%; min-width: 0; }
  /* 상단바를 main 안에서 sticky로 — 햄버거 항상 접근 가능 */
  .topbar { position: sticky; top: 0; z-index: 60; max-width: 100vw; }
  /* 사이드바를 슬라이드 오버레이로 전환
     ※ iOS에서 transform: translateX(-100%)는 viewport 폭을 오염시키는 경우가 있어
        left 음수로 빼두고 transition만 적용 */
  #app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; width: 240px; z-index: 80;
    left: -260px; transition: left .25s ease;
    box-shadow: 0 0 30px rgba(0,0,0,.3);
  }
  .sidebar.open { left: 0; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(15,23,42,.5);
    z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .hamburger { display: inline-block; }
  /* 메뉴 항목 터치 영역 키움 */
  .nav a { padding: 13px 20px; font-size: 14px; }

  /* 상단바: 햄버거 + 타이틀 + 우측. iOS 노치/safe-area 인셋 반영 */
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 6px;
  }
  .topbar .crumb { font-size: 15px; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .user { gap: 6px; flex: 0 0 auto; }
  .topbar .who-name, .topbar .badge { display: none; }
  .topbar .btn.sm { padding: 7px 10px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
  .content {
    padding: 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  /* 카드를 화면 가장자리까지 확장할 때도 safe-area 만큼 안쪽으로 */
  .sidebar { padding-left: env(safe-area-inset-left); }

  /* KPI: 2x2, 글자 줄임 */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .value { font-size: 20px; }

  /* 그리드들 한 줄씩 */
  .form-row, .meta-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .field.span2, .field.span4 { grid-column: span 1 !important; }
  .field input, .field select, .field textarea {
    font-size: 16px; /* iOS 자동 줌 방지 */ padding: 11px 12px;
  }

  /* 카드 헤더: 제목과 버튼을 세로로 쌓음 */
  .card .card-head { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .card .card-body { padding: 14px; }
  .detail-head { gap: 8px; }
  .detail-head h2 { font-size: 17px; }

  /* 툴바: 한 줄에 모두 들어가게 입력칸 키우고 줄바꿈 허용 */
  .toolbar { gap: 8px; }
  .toolbar input[type=text], .toolbar select { flex: 1 1 140px; font-size: 14px; padding: 9px 11px; }
  .toolbar .btn { flex: 0 0 auto; }
  .toolbar .spacer { display: none; }

  /* 테이블: 카드 안에서만 가로 스크롤 (페이지 전체가 밀리지 않음) */
  .card {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* 카드 헤더(필터·버튼)는 좌측에 고정해 스크롤해도 같이 밀리지 않음 */
  .card .card-head { position: sticky; left: 0; background: var(--surface); z-index: 2; }
  table.grid { min-width: 560px; }
  table.grid th, table.grid td { padding: 10px 10px; font-size: 13px; }
  table.grid th { font-size: 11px; }
  /* 마지막 칼럼은 우측 여유 — 스크롤 끝에서도 글자가 가장자리에 붙지 않음 */
  table.grid th:last-child, table.grid td:last-child { padding-right: 20px; }
  /* 메뉴 클릭으로 상세 진입하는 행은 터치 영역 살짝 키움 */
  table.grid tr.clickrow td { padding-top: 14px; padding-bottom: 14px; }

  /* 모달: 풀스크린화 */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal, .modal.wide { max-width: 100%; width: 100%; border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; }
  .modal-body { flex: 1; overflow-y: auto; padding: 16px; }
  .modal-foot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0,0,0,.05); }
  .modal-foot .btn { flex: 1; padding: 11px 14px; font-size: 14px; }

  /* 라인 입력 테이블(발주/수주 작성): 모바일에서 셀 좁아지면 너무 빡빡 → 가로 스크롤 유지 */
  table.grid.lines { min-width: 640px; }

  /* 로그인 화면 */
  .login-card { width: 100%; max-width: 360px; padding: 28px 22px; }

  /* 버튼 터치 영역 확보 */
  .btn { padding: 10px 14px; }
  .btn.sm { padding: 7px 10px; }
}

/* 아주 작은 화면 (≤380px): KPI 1열 + 버튼 라벨 축약 */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr !important; }
  .topbar .crumb { font-size: 14px; }
  /* "비밀번호" → "비번" 으로 축약해 폭 절약 */
  #pw-btn { font-size: 0; padding: 7px 9px; }
  #pw-btn::before { content: '비번'; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }