/* ===================================================================
   사업자금119 디자인 시스템 (피그마 시안 2026-09 기준)
   - 폰트: Pretendard 본문, Paperlogy 제목/로고, Montserrat 숫자
   - 주색 #0051FF, 경고 #E5192B, 배경 #F5F6F8, 카드 흰색 1px 테두리
   - 브레이크포인트: 1024px(PC 3열→2열), 768px(모바일 1열)
   =================================================================== */
:root {
  --primary: #0051FF;
  --primary-dark: #003FCC;
  --primary-light: #EEF3FF;
  --primary-border: #C7D7FF;
  --danger: #E5192B;
  --danger-light: #FFEEF0;
  --bg: #F5F6F8;
  --bg-soft: #F7F8FB;
  --line: #E5E7EB;
  --line-dark: #D0D4DF;
  --text: #222222;
  --text-sub: #555555;
  --muted: #8E8E93;
  --gray-btn: #8E8E93;
  --white: #ffffff;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 8px rgba(80, 86, 131, .08);
  --container: 1140px;
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-title: 'Paperlogy', 'Pretendard', sans-serif;
  --font-num: 'Montserrat', 'Pretendard', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); word-break: keep-all; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; outline: none; }
button { cursor: pointer; background: none; border: none; }
.num { font-family: var(--font-num); font-weight: 600; }
.hidden { display: none !important; }
.text-primary { color: var(--primary) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--muted) !important; }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-center { display: flex; justify-content: center; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }

/* ── 레이아웃 */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
main.page { flex: 1; padding: 32px 0 56px; }
.page-title { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.page-desc { font-size: 15px; color: var(--text-sub); margin-bottom: 20px; }
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.section-desc { font-size: 15px; color: var(--text-sub); margin-bottom: 20px; }

/* ── 헤더 */
.hd { background: var(--white); border-bottom: 1px solid var(--line); height: 64px; }
.hd .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.hd .logo { font-family: var(--font-title); font-weight: 800; font-size: 24px; color: var(--primary); letter-spacing: -0.5px; }
.hd nav { display: flex; gap: 24px; font-size: 15px; color: var(--text-sub); }
.hd nav a:hover { color: var(--text); }

/* ── 포인트 바 */
.point-bar { background: var(--primary); color: var(--white); border-radius: var(--radius); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.point-bar .points { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.point-bar .points .v { font-family: var(--font-num); font-size: 20px; font-weight: 700; margin-left: 10px; }
.point-bar .points .v.low { color: #FF5A5A; }
.point-bar .points .sep { opacity: .5; margin: 0 8px; }
.point-bar .btn-charge { background: var(--white); color: var(--primary); font-weight: 700; padding: 10px 26px; border-radius: var(--radius-sm); }
.point-bar-sticky { position: sticky; top: 0; z-index: 50; }

/* ── 푸터 */
.ft { background: #000; color: #ccc; padding: 56px 0 72px; font-size: 14px; line-height: 1.8; }
.ft .logo { font-family: var(--font-title); font-weight: 800; font-size: 24px; color: var(--white); margin-bottom: 20px; }
.ft p { max-width: 900px; }
.ft .copy { margin-top: 20px; }
.ft a { color: #ccc; }

/* ── 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 22px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; border: 1px solid transparent; transition: background .15s, color .15s; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-gray { background: var(--gray-btn); color: var(--white); cursor: default; }
.btn-outline { background: var(--white); color: var(--text-sub); border-color: var(--line-dark); font-weight: 500; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary { background: var(--white); color: var(--primary); border-color: var(--primary); }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
/* 처리 중 표시: 글자를 감추고 스피너를 돌린다. 클릭은 막는다 */
.btn.loading { position: relative; pointer-events: none; color: transparent !important; }
.btn.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,.4); border-top-color: var(--white); border-radius: 50%; animation: btn-spin .7s linear infinite; }
.btn-outline.loading::after { border-color: rgba(0,0,0,.15); border-top-color: var(--primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 4px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-excel { background: var(--white); border-color: var(--line-dark); color: var(--text); font-weight: 600; }
.btn-excel img { width: 18px; }

/* ── 카드 */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: 28px; }
.card-lg { padding: 40px 48px; }

/* ── 탭 */
.tabs { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); margin-bottom: 40px; }
.tabs a { flex: 1; text-align: center; padding: 14px 8px; font-size: 15px; color: var(--text-sub); border-right: 1px solid var(--line); }
.tabs a:last-child { border-right: none; }
.tabs a.on { background: var(--white); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }

/* ── 폼 */
.field { margin-bottom: 18px; }
.field label, .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.input, .select, .textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: var(--white); font-size: 15px; transition: border-color .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); }
.input::placeholder { color: #B5B5B5; }
.input:read-only { background: var(--bg-soft); color: var(--text-sub); }
.textarea { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.select { -webkit-appearance: none; appearance: none; background: var(--white) url(/img/icons/화살표_아래.svg) no-repeat right 12px center; background-size: 16px; padding-right: 36px; cursor: pointer; }
.input-line { width: 100%; height: 44px; border: none; border-bottom: 1px solid var(--line-dark); background: transparent; font-size: 16px; padding: 0 4px; }
.input-line:focus { border-bottom-color: var(--primary); }
.input-group { position: relative; }
.input-group .input { padding-right: 44px; }
.input-group .icon-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: .7; }
.input-group .icon-btn img { width: 22px; height: 22px; }
.input-sm { height: 36px; font-size: 14px; }
.input-date { padding-left: 36px; background: var(--white) url(/img/icons/달력_수정.svg) no-repeat 10px center; background-size: 18px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; left: 0; width: 100%; height: 100%; cursor: pointer; }
input[type="date"] { position: relative; }
.help { font-size: 13px; color: var(--muted); margin-top: 6px; }
.error { font-size: 13px; color: var(--danger); margin-top: 6px; display: none; }
.error.on { display: block; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* 체크박스 · 토글 */
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.chk input { display: none; }
.chk i { width: 20px; height: 20px; border: 1.5px solid var(--line-dark); border-radius: 4px; background: var(--white); flex-shrink: 0; display: inline-block; }
.chk input:checked + i { border-color: var(--primary); background: var(--primary) url(/img/chk.png) no-repeat center; }
.switch { position: relative; width: 48px; height: 26px; background: var(--line-dark); border-radius: 13px; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: left .15s; }
.switch.on { background: var(--primary); }
.switch.on::after { left: 25px; }

/* ── 필터바 */
.filter-bar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 28px; }
.filter-bar .frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-bar .frow + .frow { margin-top: 14px; }
.filter-bar .flabel { font-size: 14px; font-weight: 600; color: var(--text-sub); white-space: nowrap; }
.filter-bar .input, .filter-bar .select { height: 36px; font-size: 14px; }
.filter-bar .input-date { width: 170px; }
.filter-bar .keyword { width: 220px; background: var(--white) url(/img/icons/검색.svg) no-repeat right 10px center; background-size: 18px; padding-right: 34px; }
.filter-bar .btn { height: 36px; padding: 0 18px; font-size: 14px; }
.filter-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 14px; }
.filter-grid .fitem .flabel { display: block; margin-bottom: 6px; }
.filter-toggle { display: none; }

/* ── 표 */
.table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); font-size: 14px; }
.table th { background: var(--bg-soft); font-weight: 600; text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { text-align: right; font-family: var(--font-num); }
.table tr.notice td { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.table .empty { text-align: center; color: var(--muted); padding: 40px; }
.table-wrap { overflow-x: auto; }
.table-scroll { max-height: 520px; overflow-y: auto; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--bg-soft); color: var(--text-sub); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-gray { background: #eee; color: var(--muted); }
.badge-new { background: var(--danger); color: var(--white); font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }

/* 합산 바 */
.sum-bar { background: var(--primary-light); border-radius: var(--radius-sm); padding: 18px; display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; font-weight: 700; }
.sum-bar .v { background: var(--white); color: var(--primary); font-family: var(--font-num); font-size: 18px; padding: 8px 40px; border-radius: 4px; }

/* ── 페이지네이션 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 36px; font-family: var(--font-num); font-size: 16px; }
.pagination a { color: var(--text-sub); }
.pagination a.on { color: var(--primary); font-weight: 700; }
.pagination .arrow { width: 16px; height: 16px; opacity: .8; }
.pagination .arrow img { width: 16px; }

/* ── 디비 카드 */
.lead-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lead-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.lead-card .tabs-mini { display: flex; margin: -20px -20px 16px; border-bottom: 1px solid var(--line); }
.lead-card .tabs-mini button { flex: 1; padding: 8px 0; font-size: 13px; color: var(--muted); border-right: 1px solid var(--line); background: var(--bg-soft); }
.lead-card .tabs-mini button:last-child { border-right: none; }
.lead-card .tabs-mini button.on { background: var(--white); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.lead-card .tabs-mini button:disabled { color: #ccc; cursor: default; }
.lead-card .dates { font-size: 13px; font-weight: 600; margin-bottom: 14px; line-height: 1.6; }
.lead-card ul { font-size: 14px; color: var(--text-sub); line-height: 1.75; margin-bottom: 18px; padding-left: 14px; flex: 1; }
.lead-card ul li { list-style: disc; }
.lead-card ul li.addr { list-style: none; margin-left: -6px; color: var(--muted); }
.lead-card .seat { background: var(--bg-soft); border: 1px dashed var(--primary-border); border-radius: var(--radius-sm); text-align: center; padding: 10px; font-size: 14px; margin-bottom: 10px; }
.lead-card .seat b { color: var(--text); }
.lead-card .btn { width: 100%; }
.lead-card .no { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.lead-card .buyers { font-size: 13px; margin-bottom: 14px; }
.lead-card .buyers li { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.lead-card .actions { display: flex; gap: 8px; }
.lead-card .actions .btn { flex: 1; height: 38px; font-size: 14px; }

/* ── 모달 (회색 확인창 + 폼 모달) */
.gray-modal { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,.35); z-index: 1000; padding: 20px; }
.gray-modal .box { min-width: 300px; max-width: 420px; width: 100%; padding: 28px 30px; border-radius: 10px; background: #e9e9e9; text-align: center; color: var(--text); font-size: 17px; line-height: 1.6; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.gray-modal .box b { color: var(--primary); }
.gray-modal .box .btns { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.gray-modal .box button { min-width: 90px; height: 42px; padding: 0 18px; border-radius: 6px; font-size: 15px; font-weight: 700; background: var(--white); color: var(--text); }
.gray-modal .box button.primary { background: var(--primary); color: var(--white); }
.modal { position: fixed; inset: 0; display: none; justify-content: center; align-items: flex-start; background: rgba(0,0,0,.45); z-index: 900; padding: 60px 16px; overflow-y: auto; }
.modal.on { display: flex; }
.modal .modal-box { background: var(--white); border-radius: var(--radius); width: 100%; max-width: 640px; padding: 28px; position: relative; }
.modal .modal-box.wide { max-width: 960px; }
.modal .modal-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.modal .modal-close { position: absolute; right: 20px; top: 20px; width: 24px; height: 24px; opacity: .6; }
.modal .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ── 단독 카드형 페이지 (로그인·가입·찾기) */
.single-wrap { flex: 1; display: flex; justify-content: center; align-items: center; padding: 60px 16px; }
.single-card { background: var(--white); border-radius: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.06); width: 100%; max-width: 420px; padding: 44px 48px; }
.single-card.wide { max-width: 620px; }
.single-card .title { font-family: var(--font-title); font-weight: 700; font-size: 24px; color: var(--primary); margin-bottom: 28px; }
.single-card .links { text-align: center; font-size: 14px; color: var(--text-sub); margin-top: 18px; }
.single-card .links a + a::before { content: "|"; margin: 0 10px; color: var(--line-dark); }
.single-card .links a.primary { color: var(--primary); }

/* ── 정보 카드 (이용 정보) */
.info-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 20px; }
.info-box .irow { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 15px; }
.info-box .irow + .irow { border-top: 1px solid var(--line); }
.info-box .irow .v { font-family: var(--font-num); font-weight: 700; font-size: 17px; }
.info-box .irow .v.primary { color: var(--primary); }
.info-box .irow .sub { font-size: 13px; color: var(--muted); display: block; margin-top: 2px; }

/* ── 유의사항 */
.notice-box { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 18px 22px; font-size: 14px; color: var(--text-sub); display: flex; gap: 14px; }
.notice-box .ic { width: 22px; height: 22px; border-radius: 50%; background: #555; color: var(--white); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.notice-box b { color: var(--text); margin-right: 8px; }
.notice-box li { list-style: none; }

/* ── 모바일 좌측 하단 / PC 좌측 상단 배너 */
.side-banner { position: fixed; left: 16px; top: 100px; z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.side-banner a, .side-banner img { display: block; }
.side-banner img { max-width: calc(100vw - 32px); } /* 이미지 크기대로. 배너 관리에서 적은 표시 크기는 img 에 인라인으로 준다 */
.side-banner-item { position: relative; }
.side-banner-close { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #999; background: #fff; color: #000; font-size: 14px; line-height: 18px; padding: 0; cursor: pointer; }
.side-banner.mo { display: none; }

/* ── 반응형 */
@media (max-width: 1024px) {
  .lead-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  .container { padding: 0 16px; }
  main.page { padding: 20px 0 40px; }
  .hd { height: 56px; }
  .hd .logo { font-size: 20px; }
  .hd nav { gap: 16px; font-size: 14px; }
  .page-title { font-size: 22px; }
  .card-body { padding: 20px 16px; }
  .card-lg { padding: 24px 18px; }
  .tabs { flex-wrap: wrap; margin-bottom: 24px; }
  .tabs a { flex: 0 0 33.333%; border-bottom: 1px solid var(--line); }
  .tabs a:nth-child(3n) { border-right: none; }
  .tabs a:nth-last-child(-n+3) { border-bottom: none; }
  .lead-grid { grid-template-columns: 1fr; }
  .point-bar { border-radius: 0; margin: 0 -16px 20px; padding: 16px; }
  .point-bar .btn-charge { display: none; }
  .point-bar .points { gap: 10px; font-size: 14px; flex-wrap: nowrap; justify-content: space-between; width: 100%; }
  .point-bar .points .sep { display: none; }
  .point-bar .points .v { font-size: 17px; margin-left: 6px; }
  .filter-bar { display: none; }
  .filter-bar.mobile-open { display: block; position: fixed; left: 16px; right: 16px; top: 120px; z-index: 950; max-height: calc(100vh - 140px); overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  .filter-bar .frow { flex-direction: column; align-items: stretch; }
  .filter-bar .input-date, .filter-bar .keyword { width: 100%; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-toggle { display: inline-flex; }
  .mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
  .mobile-head .page-title { margin-bottom: 0; }
  .single-wrap { padding: 32px 16px; align-items: flex-start; }
  .single-card { padding: 32px 22px; box-shadow: none; }
  .side-banner { top: auto; bottom: 16px; }
  .side-banner.pc { display: none; }
  .side-banner.mo { display: flex; }
  .row { flex-direction: column; }
  .ft { padding: 32px 0 48px; font-size: 13px; }
  .modal { padding: 20px 12px; }
  .table th, .table td { padding: 10px 10px; font-size: 13px; }
}