#charge_container .charge-card { width: 760px !important; border: 1px solid #e1e1e1 !important; border-radius: 4px !important; margin-bottom: 8px !important; font-family: 'dotum', sans-serif !important; background: #fff !important; overflow: hidden !important; }
#charge_container .card-table { display: table !important; width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; border:none !important; }
#charge_container .th-row { display: table-row !important; background: #83BC22 !important; border-bottom: 1px solid #eee !important; }
#charge_container .td-row { display: table-row !important; height: 50px !important; line-height: 1.6 !important; }
#charge_container .cell { display: table-cell !important; padding: 5px !important; text-align: center !important; vertical-align: middle !important; border-right: 1px solid #f2f2f2 !important; border-top:none !important; }
#charge_container .cell:last-child { border-right: none !important; }
#charge_container .th-text { font-size: 11px !important; font-weight: bold !important; color: #FFFFFF !important; height: 24px !important; }
#charge_container .id-text { font-size: 12px !important; font-weight: bold !important; color: #8d4a3b !important; }
#charge_container .count-text { font-size: 13px !important; font-weight: bold !important; color: #333 !important; margin-bottom: 2px !important; }
#charge_container .count-zero { color: #666 !important; font-weight: normal !important; }
#charge_container .link-txt { font-size: 11px !important; color: #999 !important; text-decoration: none !important; font-weight: normal !important; margin-top: 2px !important; display: inline-block !important; }
#charge_container .link-txt:hover { text-decoration: underline !important; color: #0056b3 !important; }
#charge_container .link-lock { color: #ccc !important; }

.msg-box { padding: 40px 20px; text-align: center; background: #f9f9f9; border: 1px solid #eaeaea; border-radius: 8px; margin: 10px 0; }
.msg-text { font-size: 13px; color: #555555; font-family: 'Malgun Gothic', sans-serif; margin-bottom: 16px; font-weight: bold; line-height: 1.6;}
.msg-text img { vertical-align: middle; margin-right: 5px; transform: translateY(-1px); }
.auth-box {border: 1px solid #bce5f7; text-align: center; margin: 20px 0; border-radius: 6px; background: #f0faff;}
.warning-box { border-color: #ffcccb; background: #fff6f6; }

.sms-otp-button{ background:#83BC22; color:#fff; border:none; border-radius:2px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; }
.sms-otp-button:hover{ background:#6B9A1F; }
.select-wrapper { position: relative; display: inline-block; width: 180px; }
.select_st { width: 100%; padding: 10px 40px 10px 14px; font-size: 14px; font-family: 'Malgun Gothic', sans-serif; color: rgb(127, 127, 127); background-color: #ffffff; border: 1px solid #dcdcdc; border-radius: 6px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
.select_st:hover { border-color: #a0a0a0; }
.select_st:focus { border-color: #83BC22; box-shadow: 0 0 0 3px rgba(0, 117, 6, 0.2); }
.select-wrapper::after { content: ""; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 12px; height: 12px; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 
    background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.select_st option { font-size: 14px; padding: 8px; background-color: #ffffff; color: rgb(127, 127, 127); }

/* ===== 안내 카드 (로그인 필요 · 문자ID 없음 · 권한 없음) - 2026.10.16 =====
   예전 .msg-box.warning-box (이미지 버튼 + 문구) 를 대체. 한 줄 가로형 : [아이콘 | 제목 + 설명 | 버튼] */
.nb-box { display:flex; align-items:center; gap:16px; margin:40px 0 20px; padding:26px 28px; border:1px solid #e2e8f0; border-left:4px solid #94a3b8; border-radius:14px; background:#fff; text-align:left; box-sizing:border-box; box-shadow:0 1px 3px rgba(15,23,42,.04); font-family:'Malgun Gothic','맑은 고딕',sans-serif; }
.nb-ico { flex:none; width:48px; height:48px; border-radius:15px; background:#f1f5f9 center / 24px no-repeat; }
.nb-text { flex:1; min-width:0; }
.nb-text b { display:block; font-size:15px; font-weight:800; color:#1e293b; letter-spacing:-0.4px; line-height:1.45; }
.nb-text span { display:block; margin-top:3px; font-size:12.5px; color:#64748b; letter-spacing:-0.3px; line-height:1.55; }
.nb-btns { flex:none; display:flex; gap:6px; }
.nb-btn { display:inline-flex; align-items:center; height:38px; padding:0 18px; box-sizing:border-box; border:1px solid #a9d46f; border-radius:19px; background:#f0f8e4; color:#3f6b0a !important; font-size:13.5px; font-weight:800; letter-spacing:-0.3px; text-decoration:none !important; white-space:nowrap; transition:background-color .15s, border-color .15s, color .15s; }
.nb-btn:hover { background:#e3f1cc; border-color:#83bc22; color:#2f5208 !important; }
.nb-btn.line { border-color:#cbd5e1; background:#fff; color:#475569 !important; }
.nb-btn.line:hover { border-color:#94a3b8; background:#f8fafc; color:#1e293b !important; }
.nb-box.login { border-left-color:#83bc22; }
.nb-box.login .nb-ico { background-color:#f0f8e4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e9410' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
.nb-box.nosvc { border-left-color:#f59e0b; }
.nb-box.nosvc .nb-ico { background-color:#fffbeb; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/svg%3E"); }
.nb-box.deny { border-left-color:#ef4444; }
.nb-box.deny .nb-ico { background-color:#fef2f2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
/* 카드 색을 따라가는 버튼 (로그인 = 연두 기본, 문자ID 없음 = 주황, 권한 없음 = 빨강) */
.nb-box.nosvc .nb-btn:not(.line) { border-color:#fcd34d; background:#fffbeb; color:#b45309 !important; }
.nb-box.nosvc .nb-btn:not(.line):hover { border-color:#f59e0b; background:#fef3c7; color:#92400e !important; }
.nb-box.deny .nb-btn { border-color:#fda4af; background:#fff1f2; color:#be123c !important; }
.nb-box.deny .nb-btn:hover { border-color:#fb7185; background:#ffe4e6; color:#9f1239 !important; }
/* 안내 카드 큰 패널형 (2026.10.16) : 담당자 인증 안내 상자와 같은 모양, 위 40px · 가운데 정렬 */
.nb-box { flex-direction:column; justify-content:center; gap:0; min-height:400px; margin:40px 0 20px; padding:48px 32px; text-align:center; border-left-width:1px; border-left-color:#e2e8f0; border-radius:18px; }
.nb-ico { width:64px; height:64px; margin-bottom:18px; border-radius:20px; background-size:30px; }
.nb-text { flex:none; margin-bottom:22px; }
.nb-text b { font-size:16px; letter-spacing:-0.5px; }
.nb-text span { margin-top:6px; font-size:12.5px; }
.nb-btn { height:40px; padding:0 20px; border-radius:20px; font-size:13.5px; }
.nb-box.login { border-left-color:#e2e8f0; background:radial-gradient(circle at 50% 40%, #f0f8e4 0, #ffffff 65%); }
.nb-box.login .nb-ico { box-shadow:0 0 0 10px rgba(131,188,34,.10); }
.nb-box.nosvc { border-left-color:#e2e8f0; background:radial-gradient(circle at 50% 40%, #fffbeb 0, #ffffff 65%); }
.nb-box.nosvc .nb-ico { box-shadow:0 0 0 10px rgba(245,158,11,.10); }
.nb-box.deny { border-left-color:#e2e8f0; background:radial-gradient(circle at 50% 40%, #fef2f2 0, #ffffff 65%); }
.nb-box.deny .nb-ico { box-shadow:0 0 0 10px rgba(239,68,68,.08); }
.ml-mgrbar + .nb-box { margin-top:12px; }