@charset "utf-8";
/* ============================================================================
 * ui.css — 사이트 공통 UI 컴포넌트 (2026-09-27 스타일 정리 9단계: 디자인 통합)
 *   PC 관리자 · 팝업 · 모바일 · 통합로그인 모두가 로드하는 단 하나의 컴포넌트 파일.
 *   버튼(.btn) · 뱃지(.badge) · 카드(.card / .card-stat) · 안내(.alert) · 모달(.modal) — 역할·화면이 달라도 같은 class, 같은 모양.
 *   로드 순서: tokens.css → (common/icon) → ui.css → … 화면별 CSS.  모바일은 tokens → ui → mobile.css (mobile.css 가 모바일 규격만 덮어씀).
 *   크기 표준: PC 버튼 28px(기본) · 22px(bw_xxs, 표 안) · 40px(bh_lg, 폼 주 버튼) · 48px(bw_lg, 블록)  /  모바일: 38px(기본) · 48px(bw_lg)
 * ========================================================================== */
/* ---------- 정렬 · 강조 (모든 화면 공통 — 옛 .tc/.tl/.tr · .lst-c/l/r · u-ta-* 통합) ---------- */
.l, .left { text-align: left !important; }
.c, .center { text-align: center !important; }
.r, .right { text-align: right !important; }
.b { font-weight: 700; }
/* ---------- 버튼 (9단계 통합: 색 8종 × 크기 4종 = 사이트 전체 버튼 1체계) ----------
 *   기본 .btn (28px)  ·  .bw_xxs 표 안 작은 버튼(22px)  ·  .bh_lg 폼 주 버튼(40px, 최소폭 110)  ·  .bw_lg 모바일·모달 블록 버튼(48px, 100%)
 *   색: btn_blue(주) · btn_dark(검색·보조) · btn_gray · btn_red · btn_green(엑셀·확정) · btn_lemon(주의) · btn_outline_blue · btn_outline_gray · btn_outline_red · btn_reset(검색영역 초기화 공통 — 화면설정 연한색) · btn_detail(표 안 상세보기 공통)
 *   .bw_md 최소폭 110 (폼 저장/취소 짝) — 옛 bw_sm · bh_sm · btn_sky · btn_outline_yellow/sky · btn-primary 계열은 모두 여기로 흡수 */
/* [2026-10-16] Fomantic UI 전환: 아래 .btn* 모양 규칙은 아직 ui button 으로 바꾸지 않은 버튼(:not(.ui) — 모바일 등)에만 적용.
 *   PC 화면 버튼은 "ui [크기] [색] button" (static/lib/fomantic-ui + common/fomantic_theme.css) 이 모양을 맡는다. */
.btn:not(.ui) {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box;
	height: var(--ctrl-h); padding: 0 12px; margin: 1px; border: 1px solid var(--c-border-3); border-radius: 3px;
	background: var(--c-bg-gray); color: var(--c-text); font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap;
	text-decoration: none; cursor: pointer; outline: none !important; transition: background .12s, border-color .12s;
}
.btn:not(.ui):hover { filter: brightness(0.96); }
.btn:not(.ui):active { filter: brightness(0.92); }
.btn:not(.ui):disabled, .btn.disabled:not(.ui) { opacity: .55; cursor: not-allowed; }
.btn_blue:not(.ui) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.btn_dark:not(.ui) { background: var(--c-menu-accent); border-color: var(--c-menu-accent); color: var(--c-white); } /* [MOD] 2026-10-16(3차) Kim 요청: ui 미전환 화면의 검색하기 등 진한 버튼도 화면설정 색 */
.btn_gray:not(.ui) { background: var(--c-gray-2); border-color: var(--c-gray-2); color: var(--c-white); }
.btn_red:not(.ui) { background: var(--c-btn-red); border-color: var(--c-btn-red); color: var(--c-white); }
.btn_green:not(.ui) { background: var(--c-excel); border-color: var(--c-excel); color: var(--c-white); }
.btn_outline_blue:not(.ui) { background: var(--c-bg-link); border-color: var(--c-bd-link); color: var(--c-primary); }
.btn_outline_gray:not(.ui) { background: var(--c-white); border-color: var(--c-gray-3); color: var(--c-gray-3); }
.btn_outline_red:not(.ui) { background: var(--c-white); border-color: var(--c-btn-red); color: var(--c-btn-red); }
.btn_reset:not(.ui) { background: var(--c-menu-accent-bg); border-color: var(--c-menu-accent-bg); color: var(--c-menu-accent); }   /* [ADD] 2026-10-16(4차) Kim 요청: 검색영역 "초기화" 공통 버튼 — 화면설정(Type)의 연한 배경색 — 사이트 전체 동일 class */
.btn_reset:not(.ui):hover { filter: brightness(0.96); }
.btn_detail:not(.ui) { background: var(--c-bg-link); border-color: var(--c-bd-link); color: var(--c-primary); }   /* [ADD] 2026-10-16(5차) Kim 요청: 표 안 "상세보기" 공통 버튼 — 사이트 전체 동일 class */
.btn_detail:not(.ui):hover { filter: brightness(0.96); }
.btn_lemon:not(.ui) { background: var(--c-lemon); border-color: var(--c-lemon-bd-3); color: var(--c-lemon-ink); font-weight: 400; }   /* 본사 회수등록 등 '주의' 성격 액션 */
.bw_xxs:not(.ui) { height: 22px; padding: 0 6px; font-size: 11px; }
.bw_md { min-width: 110px; }
.bh_lg:not(.ui) { height: 40px; min-width: 110px; padding: 0 24px; font-size: 14px; font-weight: 400; border-radius: 6px; }
.bw_lg:not(.ui) { display: flex; width: 100%; height: 48px; margin: 8px 0 0; padding: 0 16px; font-size: 15px; font-weight: 400; border-radius: 10px; }
.btn .fe { margin-right: 4px; }
.btn_box { position: relative; display: block; overflow: hidden; text-align: center; }
.btn_box.left { text-align: left; }
.btn_box.right { text-align: right; }
.btn_box .btn + .btn { margin-left: 4px; }
@media only screen and (max-width: 640px) {
	.bw_md { min-width: 80px; }
	.bh_lg:not(.ui) { min-width: 80px; padding: 0 16px; }
}
/* ---------- 뱃지 (9단계 통합: 옛 state-tag · status-badge · bk-badge · history-state · tx-badge · today-badge · svc_badge · txt_type) ----------
 *   .badge + 색: badge-green(정상·발급·승인) · badge-gray(삭제·해지) · badge-violet(미발급·없음) · badge-red(실패·취소) · badge-blue(정보) · badge-lemon(오늘)
 *   상태값 class(ACTIVE · ISSUED · active · DELETED · deleted · none · FAILED · cancel)는 PHP/JS 가 그대로 넣으므로 이름 유지 → 색만 매핑 */
.badge, .svc-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap; vertical-align: middle; background: var(--c-bg-soft); color: var(--c-text-gray); }
.badge-green, .badge.ACTIVE, .badge.ISSUED, .badge.active { background: var(--c-bg-success); color: var(--c-success); }
.badge-gray, .badge.DELETED, .badge.deleted { background: var(--c-bg-soft); color: var(--c-text-gray); }
.badge-violet, .badge.none { background: var(--c-bg-violet); color: var(--c-violet); }
.badge-red, .badge.FAILED, .badge.cancel { background: var(--c-bg-danger); color: var(--c-danger-dark-2); }
.badge-blue { background: var(--c-bg-link); color: var(--c-primary); }
.badge-lemon { background: var(--c-lemon-text); color: var(--c-white); }
.badge-solid { color: var(--c-white); }
/* 결제서비스 뱃지: 배경색은 svc-ofc 등 서비스 class 가 지정 */
.badge-solid.svc-ofc { background: var(--c-blue-2); }
.badge-solid.svc-mpm { background: var(--c-success); }
.badge-solid.svc-bik { background: var(--c-violet); }
.badge-solid.svc-smp { background: var(--c-cancel); }
.badge-solid.svc-ntp { background: var(--c-danger-2); }
.badge-solid.svc-biu { background: var(--c-cyan-2); }
.badge-solid.svc-inactive { background: var(--c-text-dim); }
.svc_badge_wrap { display: flex; gap: 6px; flex-wrap: wrap; }
.svc-badge { cursor: pointer; }
/* 가맹점 목록(pgadmin·manage lecture_list) "결제서비스" 칸 아이콘 — [ADD] 2026-10-16 Kim 요청: 인라인 style 을 class 로 옮기고 글자는 가늘게(400),
 *   사용하는 서비스만 표시(뷰에서 처리). 칸 폭은 lst_common.js 의 .lst-fit(내용 폭에 맞춤)으로 자동 조절 */
.svc-badge.svc-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; border-radius: 0; font-size: 11px; font-weight: 400; line-height: 1; color: var(--c-white); background: var(--c-text-dim); }
.svc-badge.svc-ic-OFC { background: var(--c-svc-ofc); }
.svc-badge.svc-ic-MPM { background: var(--c-svc-mpm); }
.svc-badge.svc-ic-BIK { background: var(--c-svc-bik); }
.svc-badge.svc-ic-SMP { background: var(--c-svc-smp); }
.svc-badge.svc-ic-NTP { background: var(--c-svc-ntp); }
.svc-badge.svc-ic-BIU { background: var(--c-svc-biu); }
.svc-ic-wrap { display: inline-flex; flex-wrap: nowrap; gap: 3px; vertical-align: middle; }
/* [ADD] 2026-10-16 Kim 요청: 결제서비스가 여러 개면 세로로(위→아래) — 한 줄 높이(19px)를 단말기 ID·설치일·수수료 칸의 줄 높이(12px × 1.6)와 맞춤 */
.svc-ic-wrap.svc-ic-col { flex-direction: column; align-items: center; gap: 1px; }
.svc-ic-wrap.svc-ic-col .svc-badge.svc-ic { height: 18px; }
/* ---------- 카드 · 패널 · 안내박스 (9단계 통합) ----------
 *   .card       흰 배경 둥근 패널 (옛 dash-panel · status-card · form-panel · 모바일 panel/info-panel/sum-panel/date-panel/pw-panel/org-panel/search-panel/tx-card/day-card/history-card/bk-card)
 *   .card-stat  요약 숫자 카드 (옛 dash-card · cv-card · 모바일 m-card) + c-approve/c-cancel/c-net/c-settle/c-fee/c-date 색 띠
 *   .alert      안내 문구 박스 (옛 notice-card=alert-info · warn-card=alert-danger) */
.card { background: var(--c-white); border: 1px solid var(--c-border-4); border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: var(--sh-card-sm); }
.card.none { text-align: center; padding: 40px 16px; }
.card-stat { background: var(--c-bg-card); border-radius: 8px; padding: 1rem; border-left: 3px solid transparent; }
.card-stat p:first-child { font-size: 12px; margin: 0 0 6px; color: var(--c-text-muted); white-space: nowrap; }
.card-stat p:last-child { font-size: 18px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-stat.c-approve { border-left-color: var(--c-blue-2); }
.card-stat.c-approve p:last-child { color: var(--c-blue-2); }
.card-stat.c-cancel { border-left-color: var(--c-cancel); }
.card-stat.c-cancel p:last-child { color: var(--c-cancel); }
.card-stat.c-net { border-left-color: var(--c-success); }
.card-stat.c-net p:last-child { color: var(--c-success); }
.card-stat.c-settle, .card-stat.c-fee { border-left-color: var(--c-warning); }
.card-stat.c-settle p:last-child, .card-stat.c-fee p:last-child { color: var(--c-warning); }
.card-stat.c-date { border-left-color: var(--c-violet); }
.card-stat.c-date p:last-child { color: var(--c-violet); font-size: 15px; }
.role-member .card-stat.c-settle, .role-shopmng .card-stat.c-settle, .m-page .card-stat.c-settle { border-left-color: var(--c-violet); }
.role-member .card-stat.c-settle p:last-child, .role-shopmng .card-stat.c-settle p:last-child, .m-page .card-stat.c-settle p:last-child { color: var(--c-violet); }
.dash-grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 12px; line-height: 1.6; border: 1px solid transparent; }
.alert-info { background: var(--c-bg-link); border-color: var(--c-bd-link); color: var(--c-primary); }
.alert-danger { background: var(--c-bg-danger); border-color: var(--c-border-danger); color: var(--c-danger-dark-2); }
.alert b { font-weight: 700; }
/* ---------- 모달 (9단계 통합: 옛 .modal/.modal-bg(pages) · c-modal-*(utils)) ----------
 *   <div class="modal-bg"><div class="modal [modal-lg|modal-pos]"><div class="modal-head">…</div><div class="modal-body">…</div><div class="modal-foot">…</div></div></div>
 *   modal-pos: 결제달력처럼 클릭 위치에 띄우는 작은 모달 */
.modal-bg { display: none; position: fixed; inset: 0; z-index: 9999; background: var(--c-overlay); }
.modal { background: var(--c-white); width: 600px; max-width: 92%; max-height: 85vh; margin: 40px auto; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-modal); }
.modal-lg { width: 720px; }
.modal-xl { width: 1120px; } /* [ADD] 2026-10-19 정기결제 리스트 "상세 결제내역" 팝업(열이 많은 표) - max-width 92% 는 .modal 규칙 그대로 */
/*@UNUSED-BEGIN U0823 | css_rule | 선택자의 class/id(modal-pos)가 사용 중인 화면·스크립트 어디에도 없음 | 미사용확률 92%
.modal-pos { position: absolute; display: block; width: 340px; margin: 0; padding: 22px; max-height: 90vh; overflow-y: auto; }
@UNUSED-END U0823*/
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--c-border-4); display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.modal-body { padding: 20px; overflow: auto; flex: 1; background: var(--c-bg-search); }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--c-border-4); display: flex; gap: 8px; }
.modal-foot .bw_lg { flex: 1; margin: 0; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--c-text-light); line-height: 1; }
.modal h3 { margin: 0 0 4px; font-size: 16px; }
.modal hr { border: none; border-top: 1px solid var(--c-border-4); margin: 12px 0; }
.modal label { display: block; font-size: 12px; color: var(--c-text-3); margin: 8px 0 3px; }
.modal input[type=text], .modal input[type=date], .modal textarea { width: 100%; padding: 8px; border: 1px solid var(--c-border-2); border-radius: 6px; font-size: 13px; box-sizing: border-box; }
.modal textarea { resize: vertical; min-height: 54px; }

/* ---------- 로그인 후 공지 팝업 (.lp-*, views/common/popup_modal.php — PC·모바일 공통) ---------- */
.lp-bg { display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.lp-modal { width: var(--lp-w, 520px); max-width: 100%; margin: 0; max-height: 90vh; border-radius: 10px; }
.lp-tabs { display: flex; align-items: stretch; gap: 2px; padding: 8px 44px 0 12px; position: relative; border-bottom: 1px solid var(--c-border-4); background: var(--c-white); }
.lp-tab { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 6px; font-size: 13px; font-weight: 700; color: var(--c-text-gray); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.lp-tabs-single .lp-tab { flex: 0 1 auto; cursor: default; text-align: left; }
.lp-x { position: absolute; right: 10px; top: 6px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 22px; color: var(--c-text-light); text-decoration: none; }
.lp-x:hover { color: var(--c-text); }
.lp-body { padding: 20px; overflow: auto; flex: 1; background: var(--c-white); font-size: 14px; line-height: 1.6; color: var(--c-text); word-break: break-word; -webkit-overflow-scrolling: touch; }
.lp-body img { max-width: 100%; height: auto; }
.lp-body table { border-collapse: collapse; max-width: 100%; }
.lp-body td, .lp-body th { border: 1px solid var(--c-border-2); padding: 4px 8px; }
.lp-body p { margin: 0 0 8px; }
.lp-body ul { list-style: disc; padding-left: 24px; margin: 0 0 8px; }
.lp-body ol { list-style: decimal; padding-left: 24px; margin: 0 0 8px; }
.lp-pane { display: none; }
.lp-pane.active { display: block; }
.lp-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--c-border-4); background: var(--c-bg-search); font-size: 13px; }
.lp-foot label { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.lp-foot-btns { display: flex; align-items: center; gap: 6px; }
.lp-count { color: var(--c-text-gray); font-size: 12px; margin-right: 4px; }
.lp-preview-page { margin: 0; background: var(--c-bg-page); min-height: 100vh; }
@media only screen and (max-width: 640px) {
	.lp-bg { padding: 10px; align-items: flex-end; }
	.lp-modal { width: 100%; max-height: 88vh; }
	.lp-body { padding: 14px; font-size: 13.5px; }
	.lp-foot { flex-wrap: wrap; }
}

/* ---------- 단말기 관리비 확인(자동차감) - 가맹점별정산 상단 버튼·안내 모달·결과 모달 (.cf-*) - 2026-09-27 ---------- */
.cf-top { display: flex; align-items: center; gap: 10px; }
.cf-last { font-size: 12px; color: var(--c-text-gray); white-space: nowrap; }
.cf-last b { color: var(--c-primary); }
.cf-last-none { color: var(--c-danger); font-weight: 700; }
.cf-pulse { animation: cf-pulse 1.4s ease-in-out infinite; }
@keyframes cf-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,49,49,.55); } 50% { box-shadow: 0 0 0 7px rgba(224,49,49,0); } }
.cf-bg { align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: var(--c-overlay-dark-2); }
.cf-modal { margin: 0; width: 560px; border-radius: 12px; }
.cf-head { background: var(--c-danger); color: var(--c-white); font-size: 16px; font-weight: 700; padding: 14px 22px; display: flex; align-items: center; gap: 8px; }
.cf-body { padding: 30px 26px 22px; text-align: center; background: var(--c-white); }
.cf-big { margin: 0 0 14px; font-size: 24px; font-weight: 800; color: var(--c-danger); letter-spacing: -0.5px; line-height: 1.3; }
.cf-sub { margin: 0; font-size: 13px; line-height: 1.7; color: var(--c-text-3); }
.cf-sub b { color: var(--c-text); }
.cf-foot { display: flex; gap: 8px; padding: 14px 22px 20px; background: var(--c-white); }
.cf-foot .btn { flex: 1; margin: 0; }
.cf-result { width: 860px; position: relative; }
.cf-result .modal-head { padding-right: 44px; }
.cf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.cf-note { margin: 0 0 12px; font-size: 12.5px; color: var(--c-text-3); line-height: 1.6; }
.cf-tbl-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--c-border-4); border-radius: 6px; background: var(--c-white); }
.cf-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.cf-tbl th { position: sticky; top: 0; background: var(--c-bg-search); font-weight: 700; padding: 7px 8px; border-bottom: 1px solid var(--c-border-4); white-space: nowrap; }
.cf-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--c-border-4); text-align: center; white-space: nowrap; }
.cf-tbl td.lst-ellipsis { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cf-tbl tr.cf-row-insert td { background: var(--c-bg-success); }
.cf-hide-skip .cf-tbl tr.cf-row-skip { display: none; }
.cf-chk { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--c-text-gray); cursor: pointer; }
@media (max-width: 720px) { .cf-stats { grid-template-columns: repeat(2, 1fr); } .cf-big { font-size: 20px; } }

/* ---------- 로딩 화면 (static/js/page_loader.js 가 <html> 에 lm-loading 을 붙였다 뗌) [ADD] 2026-10-16 Kim 요청: 리스트 등 화면 이동 때 로딩 표시 ----------
 *   반투명 막 + 가운데 원형 스피너(흰 원판) + "불러오는 중…" + 위쪽 가는 진행 막대 — 색은 화면설정(Type) 색(--c-menu-accent/-bg)
 *   pointer-events:none 이라 클릭을 절대 막지 않고, JS 오류가 나도 12초 뒤 저절로 사라짐 */
html.lm-loading::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: lm-ld-in .18s ease both, lm-ld-off .3s ease 12s forwards; }
html.lm-loading::after { content: ""; position: fixed; top: 50%; left: 50%; z-index: 2147483001; pointer-events: none; width: 40px; height: 40px; margin: -34px 0 0 -20px; box-sizing: border-box; border-radius: 50%; border: 4px solid var(--c-menu-accent-bg); border-top-color: var(--c-menu-accent); background: var(--c-white); box-shadow: 0 0 0 18px var(--c-white), 0 12px 32px 18px rgba(15,23,42,.14); animation: lm-ld-spin .75s linear infinite, lm-ld-off .3s ease 12s forwards; }
html.lm-loading body::after { content: "불러오는 중…"; position: fixed; top: 50%; left: 50%; z-index: 2147483002; pointer-events: none; transform: translate(-50%, 30px); font-size: 12px; font-weight: 400; letter-spacing: -0.2px; color: var(--c-menu-accent); white-space: nowrap; animation: lm-ld-in .18s ease both, lm-ld-off .3s ease 12s forwards; }
html.lm-loading body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 2147483002; height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent 0, var(--c-menu-accent) 50%, transparent 100%) no-repeat; background-size: 35% 100%; animation: lm-ld-bar 1.1s ease-in-out infinite, lm-ld-off .3s ease 12s forwards; }
@keyframes lm-ld-spin { to { transform: rotate(360deg); } }
@keyframes lm-ld-bar { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes lm-ld-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-ld-off { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.lm-loading::after { animation-duration: 1.6s, .3s; } html.lm-loading body::before { animation: none; background-size: 100% 100%; } }