/* =========================================================
   WASSUP 파트너 — 공통 컴포넌트
   card · box · btn · chip · tbl · inp · field · tabs · qf · bar · line-row (design/theme.css 그대로)
   + 팝업 · 안내 상자 · 토스트 (총판 페이지에서 추가)
   ========================================================= */
.wa *, .wa *::before, .wa *::after { box-sizing: border-box; }
.wa button, .wa input, .wa select { font: inherit; color: inherit; }
.wa :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wa .tn { font-variant-numeric: tabular-nums; }
.wa h1, .wa h2, .wa h3, .wa p { margin: 0; }
.wa [hidden] { display: none !important; }

/* 글자 단계 */
.wa .page-title { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; }
.wa .section-title { font-size: 15px; line-height: 22px; font-weight: 700; }
.wa .caption { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.wa .label { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.wa .kpi { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wa .kpi .unit { font-size: 13px; font-weight: 600; }
.wa .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.wa .neg { color: var(--danger); font-weight: 600; }
.wa .pos { color: var(--success); font-weight: 600; }

/* 면 */
.wa .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.wa .card.warn-card { border-color: var(--danger-line); }
.wa a.card { color: inherit; text-decoration: none; }
.wa a.card:hover { border-color: var(--line-strong); }
.wa .box { background: var(--raised); border-radius: 8px; }

/* 버튼 */
.wa .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.wa .btn:hover { background: var(--hover); }
.wa .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wa .btn.pri:hover { background: var(--accent-hover); }
.wa .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.wa .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.wa .btn:disabled, .wa .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.wa .btn:disabled:hover { background: var(--surface); }
.wa .btn.pri:disabled:hover { background: var(--accent); }
.wa .btn.icon { width: 32px; padding: 0; }
.wa .btn.is-done { border-color: var(--success); color: var(--success); }
.wa .link { color: var(--accent-text); font-size: 12px; font-weight: 600; text-decoration: none; }
.wa .link:hover { text-decoration: underline; }

/* 칩 */
.wa .chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.wa .chip.wait { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.wa .chip.ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.wa .chip.off { border-style: dashed; color: var(--ink-3); background: transparent; }
.wa .chip.solid { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.wa .chip.risk { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.wa .chip.lv { height: 18px; padding: 0 5px; border-radius: 6px; font-size: 10px; }
.wa .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; flex: none; }
.wa .dot.unread { background: var(--accent); }

/* 표 */
.wa .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wa .tbl table { width: 100%; border-collapse: collapse; }
.wa .tbl th { background: var(--raised); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; text-align: left; padding: 10px 12px; white-space: nowrap; }
.wa .tbl td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.wa .tbl tbody tr:hover { background: var(--hover); }
.wa .tbl tr.risk { background: var(--danger-soft); }
.wa .tbl tr.risk:hover { background: var(--danger-soft); }
.wa .tbl tr.risk .caption { color: var(--ink-2); }
.wa .tbl tr.sum, .wa .tbl tr.sum:hover { background: var(--raised); }
.wa .tbl .r { text-align: right; }
.wa .tbl b { font-weight: 600; }
.wa .tbl a.id-link { color: inherit; text-decoration: none; }
.wa .tbl a.id-link:hover b { color: var(--accent-text); text-decoration: underline; }
.wa .tbl .empty td { text-align: center; padding: 28px 12px; color: var(--ink-3); }

/* 입력 */
.wa .inp { height: 36px; width: 100%; min-width: 0; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.wa .inp::placeholder { color: var(--ink-2); }
.wa .inp.is-bad { border-color: var(--danger); background: var(--danger-soft); }
.wa .inp.big { height: 44px; font-size: 16px; font-weight: 700; text-align: right; }
.wa .inp.ta-r { text-align: right; }
.wa .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa .field-val { height: 36px; display: flex; align-items: center; padding: 0 12px; color: var(--ink-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa .field-val.code { color: var(--ink); font-weight: 700; font-size: 15px; }

/* 탭 */
.wa .tabs { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 2px; padding: 3px; border-radius: 8px; background: var(--raised); }
.wa .tab { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wa .tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.wa .qf { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.wa .qf.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wa .qf.risk { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.wa .qf .n { font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0.85; }

/* 상단 공통 바 */
.wa .tb1 { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--chrome); }
.wa .tb2 { height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 16px; background: var(--chrome-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; }
.wa .pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; flex: none; }
.wa .pill:hover { background: var(--hover); }
.wa .pill b { color: var(--ink); }
.wa .mt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 11px; white-space: nowrap; flex: none; }
.wa .mt b, .wa .st b { color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wa .mt.bad { background: var(--danger-soft); border-color: var(--danger-line); }
.wa .mt.bad b { color: var(--danger); }
.wa .st { padding: 0 8px; color: var(--ink-2); font-size: 11px; white-space: nowrap; flex: none; }

/* 좌측 메뉴 (현재 페이지: is-active — theme.css의 .on 과 같은 모양) */
.wa .nav { background: var(--chrome); border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.wa .nav-g { display: flex; flex-direction: column; gap: 2px; }
.wa .nav-t { padding: 0 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.wa .nav-i { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.wa .nav-i:hover { background: var(--hover); color: var(--ink); }
.wa .nav-i.on, .wa .nav-i.is-active { background: var(--raised); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line-strong); }
.wa .nav-i .count { margin-left: auto; }

/* 막대 · 줄 */
.wa .bar { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.wa .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--ink-2); }
.wa .bar.bad > i { background: var(--danger); }
.wa .line-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.wa .line-row:last-child { border-bottom: 0; }
.wa .line-row.strong { font-weight: 700; font-size: 13px; }

/* 안내 상자 (빨강은 위험 · 경고에만) */
.wa .alert { background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--danger); }
.wa .note { padding: 10px 12px; font-size: 12px; color: var(--ink-2); }

/* 팝업 — @include modals 안의 .modal (role="dialog"는 .modal-card) */
.wa .modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 120px 16px 40px; background: var(--scrim); overflow-y: auto; }
.wa .modal.is-open { display: flex; }
.wa .modal.pt140 { padding-top: 140px; }
.wa .modal-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.wa .modal-card.w480 { max-width: 480px; }
.wa .modal-card.w500 { max-width: 500px; }
.wa .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa .modal-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wa body.is-locked { overflow: hidden; }

/* 토스트 */
.wa .toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop); }