/* ===== 폰트: Pretendard (한/영/숫자 가독성) ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
html, body, button, input, select, textarea {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI",
    "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  letter-spacing: -0.01em;
}
body { font-size: 14px; }
.num, .kpi-num, td.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ============================================================
   RPC bridge.css — v0.50 디자인을 따르는 보완 스타일
   (v050.css 가 기본. 여기는 SPA 전용 보완 + 사용자 지적 반영:
    라운드 없음, active 메뉴 좌측 레드 세로바, 모바일 드로어)
   ============================================================ */

/* demo-bar(40px) 없는 실서비스 위치 보정 */
.app-header { top: 0 !important; }
.app-sidebar { top: var(--header-height) !important; }
body { background: var(--color-gray-100); }

/* ===== 헤더 내용 ===== */
.app-header .hdr-logo { font-size: 18px; font-weight: 800; letter-spacing: 1px; }
.app-header .hdr-logo span { color: var(--color-lenovo-red); }
.app-header .hdr-title { margin-left: 18px; font-size: 14px; color: var(--color-gray-300); flex: 1; }
.app-header .hdr-user { font-size: 13px; color: var(--color-gray-200); margin-right: 10px; }
.menu-toggle { display: none; background: none; border: 1px solid var(--color-gray-700);
  color: #fff; width: 36px; height: 36px; margin-right: 10px; cursor: pointer; font-size: 15px; }

/* ===== 사이드바 (v0.50 화이트 + 지적 반영: 직각 + 레드 세로바) ===== */
.sidebar-item { cursor: pointer; justify-content: space-between; border-radius: 0;
  border-left: 3px solid transparent; }
.sidebar-item.is-active { border-left-color: var(--color-lenovo-red); font-weight: 700; }
.sidebar-section__title { padding: 14px 16px 4px; font-size: 11px; letter-spacing: .8px; }
.nav-badge { background: var(--color-lenovo-red); color: #fff; font-size: 11px;
  padding: 1px 7px; font-weight: 700; min-width: 18px; text-align: center; }
.sidebar-item.is-active .nav-badge { background: var(--color-lenovo-red); }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--color-gray-200); }
.user-info { font-size: 12px; color: var(--color-gray-600); margin-bottom: 6px; }
.user-info b { display: block; color: var(--color-gray-900); font-size: 13px; }

/* ===== 본문 ===== */
.app-content { padding: 24px 28px 70px; max-width: 1320px; }
.page-header { margin-bottom: 16px; }

/* ===== 로그인 (v0.50 토큰) ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-lenovo-black); padding: 16px; }
.login-card { width: 360px; max-width: 100%; background: var(--color-white); padding: 32px 28px; }
.login-logo { text-align: center; margin-bottom: 22px; }
.logo-mark { display: block; font-size: 26px; font-weight: 800; color: var(--color-lenovo-red); letter-spacing: 1px; }
.logo-sub { color: var(--color-gray-600); font-size: 12px; }
.otp-info { text-align: center; color: var(--color-gray-700); margin-bottom: 14px; font-size: 13px; }
.login-error { margin-top: 12px; color: var(--color-danger); font-size: 13px; text-align: center; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600;
  color: var(--color-gray-700); margin-bottom: 4px; }
.btn-block { width: 100%; margin-top: 4px; }
.btn-ghost { background: transparent; border: none; color: var(--color-gray-600); cursor: pointer; }

/* ===== 테이블 보완 ===== */
.table-wrap { background: var(--color-white); border: 1px solid var(--color-gray-200);
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.row-click { cursor: pointer; }
tr.row-click:hover td { background: var(--color-gray-50); }

/* ===== SPA 전용 부품 ===== */
.filterbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filterbar input, .filterbar select { width: auto; min-width: 140px; }
.risk-badge { background: var(--color-lenovo-red); color: #fff; padding: 1px 7px;
  font-size: 11px; font-weight: 700; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--color-gray-500); }
.kv dd { font-weight: 600; margin: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-title { font-size: 17px; font-weight: 800; }
.detail-sub { color: var(--color-gray-600); font-size: 13px; margin-top: 2px; }
.action-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: start; }
.section-title { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
.hint { font-size: 12px; color: var(--color-gray-500); }
.empty { text-align: center; color: var(--color-gray-500); padding: 36px 0; font-size: 13px; }
.grid { display: grid; gap: 12px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kpi-num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-num.red { color: var(--color-lenovo-red); }
.kpi-num.blue { color: var(--color-sapphire); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--color-gray-400); }

/* ===== 상태 배너 (v0.50 alert-banner 계열 보완) ===== */
.status-banner { display: flex; gap: 8px; align-items: flex-start;
  background: #FFF8E8; border: 1px solid #EAD9A8; padding: 10px 14px;
  font-size: 13px; margin-bottom: 12px; }
.status-banner.info { background: #EFF5FF; border-color: #C9DCF5; }

/* ===== S/N ===== */
.sn-box { border: 1px dashed var(--color-gray-300); padding: 10px; min-height: 60px;
  background: var(--color-gray-50); }
.sn-chip { display: inline-block; background: var(--color-white);
  border: 1px solid var(--color-gray-200); padding: 2px 7px; margin: 2px;
  font-size: 12px; font-family: ui-monospace, monospace; }
.sn-count { font-size: 12px; color: var(--color-gray-600); margin-top: 5px; }

/* ===== 모달/토스트 (v0.50에 .modal 있으면 위임, 백드롭만) ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 14px; }
.modal-backdrop .modal { position: static; display: flex; flex-direction: column;
  width: 560px; max-width: 100%; max-height: 90vh; background: #fff; }
.modal-header { display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--color-gray-200); }
.modal-header h3 { font-size: 14px; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--color-gray-500); width: 32px; height: 32px; }
.modal-body { padding: 15px 16px; overflow-y: auto; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--color-gray-900); color: #fff; padding: 10px 18px;
  font-size: 13px; z-index: 300; max-width: 92vw; }
.toast.error { background: var(--color-danger); }
.hidden { display: none !important; }

/* ===== 직각 통일 (혹시 남은 라운드 차단) ===== */
.card, .btn, input, select, textarea, .badge, .chip, .stat-card, .modal,
.alert-banner, .sidebar-item, .sn-chip { border-radius: 0 !important; }

/* ===== 모바일 ===== */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 89; }
@media (max-width: 1024px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .app-content { margin-left: 0 !important; padding: 14px 12px 70px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .filterbar input, .filterbar select { flex: 1; min-width: 110px; }
  .action-bar .btn { flex: 1; }
}


/* ===== 헤더 본인 정보 ===== */
.hdr-profile { display: flex; align-items: center; gap: 10px; margin-right: 14px; font-size: 13px; }
.hdr-profile .hp-co { font-weight: 700; color: #fff; }
.hdr-profile .hp-sub { color: var(--color-gray-400); }
.hdr-profile .hp-tier { background: var(--color-tier-gold, #B8860B); color: #fff;
  padding: 1px 8px; font-size: 11px; font-weight: 700; }
.hdr-profile .hp-pt { color: #fff; font-weight: 700; }

/* ===== 카드/박스 정렬 (수주내용·이력 등 균일화) ===== */
.detail-grid > div > .card { margin-bottom: 12px; }
.card { padding: 14px 16px; }
.card .card-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.card h3 { font-size: 12px; margin: 0 0 6px; color: var(--color-gray-600); font-weight: 600; }
.kv { font-size: 13px; line-height: 1.65; }
.kv dt { font-size: 12px; }
table.table th { font-size: 12px; padding: 8px 11px; }
table.table td { font-size: 13px; padding: 8px 11px; }

/* ===== v0.50 상태 진행 타임라인 ===== */
.stage-track { display: flex; align-items: flex-start; gap: 0;
  background: var(--color-white); border: 1px solid var(--color-gray-200);
  padding: 14px 16px 10px; margin-bottom: 12px; overflow-x: auto; }
.stage-pt { display: flex; flex-direction: column; align-items: center;
  min-width: 64px; text-align: center; }
.stage-dot { width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-gray-200); border: 3px solid var(--color-gray-200); }
.stage-pt.done .stage-dot { background: var(--color-sapphire); border-color: var(--color-sapphire); }
.stage-pt.now .stage-dot { background: var(--color-lenovo-red); border-color: #F5B9B4; }
.stage-label { font-size: 12px; margin-top: 5px; color: var(--color-gray-600); white-space: nowrap; }
.stage-pt.now .stage-label { font-weight: 800; color: var(--color-lenovo-red); }
.stage-pt.done .stage-label { color: var(--color-gray-800); }
.stage-date { font-size: 11px; color: var(--color-gray-400); margin-top: 1px; min-height: 13px; }
.stage-line { flex: 1; height: 2px; background: var(--color-gray-200); margin-top: 6px; min-width: 12px; }


/* ===== 로그인 보강 (2026-06-11) ===== */
.login-card { width: 420px; padding: 36px 34px; }
.login-card input { height: 44px; font-size: 14px; }
.login-card .btn-block { height: 46px; font-size: 15px; margin-top: 8px; }
.login-links { display: flex; gap: 8px; justify-content: center; margin-top: 14px; font-size: 13px; }
.login-links a { color: var(--color-gray-700); text-decoration: underline; }
.login-links span { color: var(--color-gray-300); }
.login-note { margin-top: 12px; text-align: center; font-size: 12px;
  color: var(--color-gray-500); line-height: 1.6; }
.hdr-back { background: none; border: 1px solid var(--color-gray-700); color: #fff;
  width: 34px; height: 34px; margin-right: 10px; cursor: pointer; font-size: 15px; }

/* 처리 이력 정렬 (v050 .timeline 충돌 회피) */
.hist-list { font-size: 13px; }
.hist-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--color-gray-100); }
.hist-item:last-child { border-bottom: none; }
.hist-event { font-weight: 600; }
.hist-meta { color: var(--color-gray-500); font-size: 12px; white-space: nowrap; }

/* 상태 배지 색 명확화: 대기=노랑, 진행=파랑, 완료=초록 */
.badge.pending { background: #FFF6E0; color: #9A6700; }
.m-lb { display:block; font-size: 11px; color: var(--color-gray-500); margin-bottom: 3px; font-weight: 600; }
.modal-backdrop .modal { width: 640px; }

/* ===== 입력 요소 전역 보정 (2026-06-11 — 박스 크기 통일) ===== */
.form-group input, .form-group select, .form-group textarea,
.modal-body input, .modal-body select, .modal-body textarea {
  width: 100%; box-sizing: border-box; min-height: 40px;
  padding: 8px 11px; font-size: 14px;
  border: 1px solid var(--color-gray-300);
}
.modal-body input[type="checkbox"] { width: auto; min-height: auto; }
.filterbar input, .filterbar select { min-height: 38px; padding: 7px 10px;
  font-size: 13px; border: 1px solid var(--color-gray-300); box-sizing: border-box; }
.form-group { margin-bottom: 13px; }
textarea { resize: vertical; }

/* 검색(돋보기) 인풋 그룹 */
.input-search { display: flex; gap: 6px; }
.input-search input { flex: 1; }
.input-search .btn { min-width: 44px; }

/* 카탈로그 단종 회색조 */
tr.row-dim td { color: var(--color-gray-400); background: var(--color-gray-50); }
tr.row-dim td b { color: var(--color-gray-500); }

/* 알림 벨 (2026-06-11) */
.hdr-bell { position: relative; background: none; border: none; color: #fff;
  font-size: 17px; cursor: pointer; margin-right: 12px; }
.bell-badge { position: absolute; top: -4px; right: -6px; background: var(--color-lenovo-red);
  color: #fff; font-size: 11px; min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.bell-badge.hidden { display: none; }
/* 포인트몰 */
.mall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mall-card { border: 1px solid var(--color-gray-200); padding: 14px; cursor: pointer; }
.mall-card:hover { border-color: var(--color-gray-900); }
.mall-price { font-weight: 800; font-size: 16px; margin-top: 6px; }

/* 메뉴 섹션 헤더 강화 (2026-06-11) */
.sidebar-section__title, .sidebar .nav-section, .nav-section {
  font-size: 12px !important; font-weight: 800 !important;
  color: var(--color-gray-900) !important; letter-spacing: .08em;
  text-transform: none; padding: 16px 16px 6px !important;
  border-top: 1px solid var(--color-gray-100); margin-top: 6px;
}
.sidebar-section__title::before, .nav-section::before { content: ''; display: inline-block; width: 3px; height: 10px;
  background: var(--color-lenovo-red); margin-right: 6px; }

/* 첨부 파일 입력 정리 */
.att-row { display: flex; gap: 6px; align-items: stretch; margin-top: 8px; }
.att-row select { width: 100px; min-height: 38px; }
.att-file-label { flex: 1; display: flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--color-gray-300); font-size: 13px; cursor: pointer;
  color: var(--color-gray-500); overflow: hidden; white-space: nowrap; }
.att-file-label.has-file { color: var(--color-gray-900); }
.att-row .btn { min-height: 38px; }

/* 수주 목록 날짜 컬럼 줄바꿈 방지 (2026-06-12) */
table td:nth-child(8), table td:nth-child(9),
table th:nth-child(8), table th:nth-child(9) { white-space: nowrap; }

/* 취소건: 가운데 줄긋기 (2026-06-15) */
tr.row-cancelled td { text-decoration: line-through; color: var(--muted, #999); }
tr.row-cancelled td:last-child { text-decoration: none; }