@charset "utf-8";
/* ============================================================
 * 수원 주차포탈 고도화 - 마이페이지/감면/무정차정산 공통 스타일
 * 2026 고도화 (SFR-02~09, SIR-04 UI 개편)
 *
 * - 클래스 접두사 mp- 로 기존 style.css / renewal-style.css 와 충돌을 차단한다.
 * - 색상은 기존 포탈 팔레트(#1c7ad3 / #62a9ec)를 그대로 승계한다.
 * ============================================================ */

:root {
  --mp-primary: #1c7ad3;
  --mp-primary-light: #62a9ec;
  --mp-primary-dark: #145ea3;
  --mp-primary-bg: #eef5fd;

  /* 서브페이지 히어로용 딥네이비 */
  --mp-navy: #06377a;
  --mp-navy-light: #0a4d9e;

  --mp-text: #23272f;
  --mp-text-sub: #5b6472;
  --mp-muted: #8a93a0;

  --mp-bg: #f6f8fb;
  --mp-line: #e4e9f0;
  --mp-line-strong: #ccd4de;
  --mp-white: #fff;

  --mp-ok: #17a673;
  --mp-ok-bg: #e7f7f1;
  --mp-wait: #e08700;
  --mp-wait-bg: #fdf4e3;
  --mp-no: #e2544f;
  --mp-no-bg: #fdeeed;
  --mp-off: #98a1ae;
  --mp-off-bg: #f0f2f5;

  --mp-radius: 10px;
  --mp-radius-sm: 6px;
  --mp-shadow: 0 2px 10px rgba(23, 43, 77, 0.06);
}

/* ------------------------------------------------------------
 * 1. 기본 / 레이아웃
 * ---------------------------------------------------------- */
.mp-wrap {
  color: var(--mp-text);
  font-size: 16px;
  line-height: 1.55;
  word-break: keep-all;
}
.mp-wrap * {
  box-sizing: border-box;
}
.mp-wrap a {
  color: inherit;
  text-decoration: none;
}
/*
 * 공통 CSS 가 체크박스·라디오를 죽여놓기 때문에 반드시 복원해야 한다.
 *   - style.css : `input { appearance:none }`            → 체크박스가 아예 보이지 않음
 *   - kp.css    : `input[type=checkbox] { position:absolute }` → 문서 흐름에서 빠져 라벨 글자 위에 겹침
 */
.mp-wrap input[type="checkbox"],
.mp-wrap input[type="radio"] {
  position: static;
  vertical-align: middle;
}
.mp-wrap input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: auto;
}
.mp-wrap input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: auto;
}

/* ------------------------------------------------------------
 * 1-1. 서브페이지 히어로 밴드 (화면명 + 경로)
 * ---------------------------------------------------------- */
.mp-hero-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 상·하 패딩을 같게 두어 타이틀+경로가 밴드의 정중앙에 오도록 한다.
     좌측 메뉴 카드의 오버랩은 .mp-aside 의 음수 마진으로 처리한다. */
  padding: 58px 40px;
  background: linear-gradient(120deg, var(--mp-navy) 0%, var(--mp-navy-light) 100%);
  overflow: hidden;
}
/* 배경 워터마크 : 수원도시공사 심볼 (logo-suwondc.svg 에서 심볼만 추출한 흰색 버전) */
.mp-hero-band::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 6%;
  width: 330px;
  height: 330px;
  margin-top: -165px;
  background: url("/resources/images/common/symbol-suwondc-white.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
}
/* 은은한 광원 */
.mp-hero-band::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.mp-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}
.mp-hero-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: #fff;
}

/* 경로(breadcrumb) */
.mp-crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}
.mp-crumb > li {
  display: inline-flex;
  align-items: center;
}
.mp-crumb > li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 12px;
  border-top: 1.6px solid rgba(255, 255, 255, 0.6);
  border-right: 1.6px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}
.mp-crumb > li:last-child {
  color: #fff;
  font-weight: 500;
}
.mp-crumb .is-home a {
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round' d='M2.5 7.6 9 2.5l6.5 5.1V15a.5.5 0 0 1-.5.5h-3.6v-4.4H7.6v4.4H4a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
 * 1-2. 본문 레이아웃 (좌측메뉴 + 컨텐츠)
 *   기존 .sidebar/.content 는 1024px 이하에서 좌측메뉴가 사라지고
 *   float 고정폭이라 히어로 오버랩이 불가하여 별도 클래스를 쓴다.
 * ---------------------------------------------------------- */
.mp-layout {
  display: flex;
  align-items: flex-start;
  gap: 46px;
  /* 2026 수정요청 : 공용 고도화 페이지(.psub-body)·상단 네비와 동일한 폭(1440)으로 맞춤 */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px 90px;
}
.mp-layout.is-full {
  justify-content: center;
}
.mp-aside {
  flex: 0 0 262px;
  width: 262px;
  margin-top: -74px;
}
.mp-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 44px;
}
.mp-layout.is-full .mp-main {
  width: 100%;
  max-width: 720px;
}
.mp-layout.is-full.is-wide .mp-main {
  max-width: none;
}

/* 좌측메뉴 카드 */
.mp-lnb {
  border-radius: 14px;
  background: var(--mp-white);
  box-shadow: 0 8px 26px rgba(10, 40, 90, 0.14);
  overflow: hidden;
}
.mp-lnb-head {
  position: relative;
  display: flex;
  align-items: center;
  height: 116px;
  padding: 0 26px;
  background: linear-gradient(125deg, var(--mp-primary) 0%, #17a2e0 100%);
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.3px;
  overflow: hidden;
}
.mp-lnb-head > span {
  position: relative;
  z-index: 1;
}
/* 장식 도형 */
.mp-lnb-head::before {
  content: "";
  position: absolute;
  top: -54px;
  right: -46px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.mp-lnb-head::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -34px;
  width: 78px;
  height: 78px;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(160deg, #56d1a4 0%, #23b48a 100%);
  opacity: 0.9;
}
.mp-lnb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-lnb-list > li + li {
  border-top: 1px solid var(--mp-line);
}
.mp-lnb-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 14px 22px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--mp-text);
  transition: background 0.15s, color 0.15s;
}
.mp-lnb-list > li > a::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 1.8px solid var(--mp-muted);
  border-right: 1.8px solid var(--mp-muted);
  transform: rotate(45deg);
  transition: border-color 0.15s;
}
.mp-lnb-list > li > a:hover,
.mp-lnb-list > li > a:focus {
  background: #f4f8fd;
  color: var(--mp-primary);
}
.mp-lnb-list > li > a:hover::after,
.mp-lnb-list > li > a:focus::after {
  border-color: var(--mp-primary);
}
.mp-lnb-list > li.is-active > a {
  color: var(--mp-primary);
  font-weight: 600;
}
.mp-lnb-list > li.is-active > a::after {
  border-color: var(--mp-primary);
  border-width: 2.2px;
}

/* 본문 리드문 */
.mp-lead {
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mp-text-sub);
}

/* 섹션 */
.mp-section + .mp-section {
  margin-top: 34px;
}
.mp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mp-section-title {
  position: relative;
  padding-left: 13px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.mp-section-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 18px;
  margin-top: -9px;
  border-radius: 3px;
  background: var(--mp-primary);
}
.mp-section-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 카드 */
.mp-card {
  padding: 26px 28px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  box-shadow: var(--mp-shadow);
}
.mp-card + .mp-card {
  margin-top: 16px;
}
.mp-card.is-flat {
  box-shadow: none;
}
.mp-card.is-plain {
  background: var(--mp-bg);
  border-color: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------
 * 2. 내 정보 패널 (마이페이지 메인)
 * ---------------------------------------------------------- */
.mp-profile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 26px 28px;
  border-radius: var(--mp-radius);
  background: linear-gradient(120deg, var(--mp-primary) 0%, #3f96e2 100%);
  color: #fff;
}
.mp-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 26px;
  line-height: 1;
}
.mp-profile-body {
  flex: 1 1 260px;
}
.mp-profile-name {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.mp-profile-name .mp-profile-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}
.mp-profile-meta {
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
}
.mp-profile-meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  background: rgba(255, 255, 255, 0.45);
  vertical-align: -1px;
}
.mp-profile-side {
  display: flex;
  gap: 8px;
}
.mp-profile-side .mp-btn-ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.mp-profile-side .mp-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------
 * 3. 요약 카드 그리드 (마이페이지 메인)
 * ---------------------------------------------------------- */
.mp-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mp-summary-item {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 22px 24px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  box-shadow: var(--mp-shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mp-summary-item:hover,
.mp-summary-item:focus {
  border-color: var(--mp-primary-light);
  box-shadow: 0 6px 18px rgba(28, 122, 211, 0.15);
  transform: translateY(-2px);
}
.mp-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--mp-text-sub);
}
.mp-summary-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--mp-primary-bg);
  color: var(--mp-primary);
  font-size: 15px;
}
.mp-summary-value {
  margin-top: auto;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
}
.mp-summary-value .mp-summary-unit {
  margin-left: 3px;
  font-size: 16px;
  font-weight: 400;
  color: var(--mp-text-sub);
}
.mp-summary-value.is-empty {
  color: var(--mp-muted);
}
.mp-summary-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--mp-primary);
}
.mp-summary-go::after {
  content: "\203A";
  font-size: 18px;
  line-height: 1;
}

/* ------------------------------------------------------------
 * 4. 상태 배지
 * ---------------------------------------------------------- */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 74px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  justify-content: center;
}
.mp-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mp-badge--ok {
  color: var(--mp-ok);
  background: var(--mp-ok-bg);
}
.mp-badge--wait {
  color: var(--mp-wait);
  background: var(--mp-wait-bg);
}
.mp-badge--no {
  color: var(--mp-no);
  background: var(--mp-no-bg);
}
.mp-badge--off {
  color: var(--mp-off);
  background: var(--mp-off-bg);
}

/* ------------------------------------------------------------
 * 5. 폼
 * ---------------------------------------------------------- */
.mp-form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mp-line);
}
.mp-form-row:first-child {
  padding-top: 0;
}
.mp-form-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.mp-form-label {
  flex: 0 0 150px;
  padding-top: 9px;
  font-size: 16px;
  font-weight: 500;
}
.mp-form-label .mp-req {
  margin-left: 3px;
  color: var(--mp-no);
}
.mp-form-field {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-form-field .mp-help {
  margin-top: 8px;
}
.mp-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-input,
.mp-select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-white);
  font-size: 16px;
  color: var(--mp-text);
  vertical-align: middle;
}
/* 2026 수정요청 : kp.css 의 전역 input[type=text]/[type=password] (특이도 0,1,1) 가
   .mp-input (0,1,0) 을 이겨 높이 40px · 라운드 3px · 테두리 #E0E0E0 · 패딩 15px 이
   그대로 적용된다. 그 결과 같은 줄의 select(.mp-select 46px·라운드 6px)·버튼과
   높이도 모서리도 어긋난다(type=date 는 규칙에 없어 46px 라 화면마다 제각각).
   kp.css 가 .form-text 폭을 되돌린 방식과 동일하게 타입+클래스(0,2,1)로 재지정한다. */
input[type=text].mp-input,
input[type=password].mp-input,
input[type=tel].mp-input,
input[type=number].mp-input,
input[type=date].mp-input,
input[type=email].mp-input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-white);
}
.mp-input::placeholder {
  color: var(--mp-muted);
}
/* 공통 style.css 에서 select 기본 화살표가 제거되므로 직접 그려준다. */
.mp-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6472' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.mp-input:focus,
.mp-select:focus {
  outline: none;
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 3px rgba(28, 122, 211, 0.12);
}
.mp-input:disabled,
.mp-select:disabled,
.mp-input[readonly] {
  background: var(--mp-off-bg);
  color: var(--mp-text-sub);
}
.mp-input.w-full {
  width: 100%;
}
.mp-input.w-260 {
  width: 260px;
  max-width: 100%;
}
.mp-input.w-180 {
  width: 180px;
  max-width: 100%;
}
.mp-select.w-200 {
  width: 200px;
  max-width: 100%;
}
/* 2026 수정요청 : 폭 클래스가 요소별로 따로 정의돼 있어
   <select class="mp-select w-260"> 처럼 조합하면 폭이 아예 먹지 않는다.
   (감면 사전등록 감면종류 select 만 폭이 auto 라 다른 입력창과 줄이 안 맞음)
   같은 폭 클래스를 input / select 양쪽에 모두 정의해 재발을 막는다. */
.mp-select.w-full {
  width: 100%;
}
.mp-select.w-260 {
  width: 260px;
  max-width: 100%;
}
.mp-select.w-180 {
  width: 180px;
  max-width: 100%;
}
.mp-input.w-200 {
  width: 200px;
  max-width: 100%;
}

/* 파일 첨부 */
.mp-file {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-file-name {
  flex: 1 1 240px;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px dashed var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-bg);
  color: var(--mp-muted);
  font-size: 15px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-file-name.is-filled {
  border-style: solid;
  border-color: var(--mp-primary-light);
  background: var(--mp-primary-bg);
  color: var(--mp-primary-dark);
}

/* 입력이 아닌 확정 값 표시 (차량번호·유효기간 등) */
.mp-static-value {
  margin: 0;
  padding-top: 9px;
  font-size: 17px;
  font-weight: 500;
}

/* 증빙서류 첨부 목록 (감면종류에 따라 1~3건) */
.mp-proof-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-proof-item {
  padding: 14px 16px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-bg);
}
.mp-proof-item + .mp-proof-item {
  margin-top: 10px;
}
.mp-proof-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mp-proof-nm {
  font-size: 16px;
  font-weight: 500;
}
.mp-proof-tag {
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 12px;
  line-height: 1.6;
}
.mp-proof-tag.is-req {
  background: var(--mp-no-bg);
  color: var(--mp-no);
}
.mp-proof-tag.is-opt {
  background: var(--mp-off-bg);
  color: var(--mp-off);
}
.mp-proof-item .mp-file-name {
  background: var(--mp-white);
}

/* 체크박스 / 라디오 */
.mp-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1.5;
}
.mp-check input[type="checkbox"],
.mp-check input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--mp-primary);
  cursor: pointer;
  flex: 0 0 auto;
}
.mp-check.is-disabled {
  color: var(--mp-muted);
  cursor: not-allowed;
}

/* 약관 동의 박스 */
.mp-agree {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  overflow: hidden;
}
.mp-agree-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
}
.mp-agree-item + .mp-agree-item {
  border-top: 1px solid var(--mp-line);
}
.mp-agree-item.is-all {
  background: var(--mp-bg);
  font-weight: 500;
}
.mp-agree-view {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--mp-text-sub);
  text-decoration: underline;
}

/* 토글 스위치 */
.mp-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  vertical-align: middle;
}
/* 토글은 네이티브 체크박스를 숨기고 트랙을 그리므로, 위쪽 복원 규칙보다 우선해야 한다. */
.mp-wrap .mp-switch input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.mp-switch-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100px;
  background: #ccd4de;
  transition: background 0.18s;
}
.mp-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}
.mp-switch input:checked + .mp-switch-track {
  background: var(--mp-primary);
}
.mp-switch input:checked + .mp-switch-track::after {
  transform: translateX(22px);
}
.mp-switch input:disabled {
  cursor: not-allowed;
}
.mp-switch input:disabled + .mp-switch-track {
  background: #e6e9ee;
}
.mp-switch input:disabled + .mp-switch-track::after {
  background: #f4f6f8;
  box-shadow: none;
}

/* 검색 필터 바 */
.mp-filter {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 22px 24px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-bg);
}
.mp-filter-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-filter-item > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--mp-text-sub);
}
.mp-filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ------------------------------------------------------------
 * 6. 버튼 (기존 .btn 과 병행 사용)
 * ---------------------------------------------------------- */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  min-width: 100px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-primary);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mp-btn:hover,
.mp-btn:focus {
  background: var(--mp-primary-dark);
  color: #fff;
}
.mp-btn-ghost {
  background: transparent;
  border-color: var(--mp-line-strong);
  color: var(--mp-text);
}
.mp-btn-ghost:hover,
.mp-btn-ghost:focus {
  background: var(--mp-bg);
  border-color: var(--mp-primary-light);
  color: var(--mp-primary);
}
.mp-btn-line {
  background: var(--mp-white);
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
.mp-btn-line:hover,
.mp-btn-line:focus {
  background: var(--mp-primary-bg);
  color: var(--mp-primary-dark);
}
.mp-btn-danger {
  background: var(--mp-white);
  border-color: #f0b1af;
  color: var(--mp-no);
}
.mp-btn-danger:hover,
.mp-btn-danger:focus {
  background: var(--mp-no-bg);
  color: #c73c37;
}
.mp-btn-sm {
  height: 34px;
  min-width: 62px;
  padding: 0 12px;
  font-size: 14px;
}
.mp-btn-lg {
  height: 56px;
  min-width: 160px;
  font-size: 17px;
}
.mp-btn-block {
  display: flex;
  width: 100%;
}
.mp-btn:disabled,
.mp-btn.is-disabled {
  background: #e6e9ee;
  border-color: #e6e9ee;
  color: var(--mp-muted);
  cursor: not-allowed;
}
/*
 * a 태그로 만든 버튼 색상 보정.
 * 위쪽 `.mp-wrap a { color:inherit }` 가 `.mp-btn` 보다 우선순위가 높아
 * <a class="mp-btn"> 의 글자색이 흰색으로 적용되지 않는다.
 */
.mp-wrap a.mp-btn {
  color: #fff;
}
.mp-wrap a.mp-btn:hover,
.mp-wrap a.mp-btn:focus {
  color: #fff;
}
.mp-wrap a.mp-btn-ghost {
  color: var(--mp-text);
}
.mp-wrap a.mp-btn-ghost:hover,
.mp-wrap a.mp-btn-ghost:focus,
.mp-wrap a.mp-btn-line {
  color: var(--mp-primary);
}
.mp-wrap a.mp-btn-line:hover,
.mp-wrap a.mp-btn-line:focus {
  color: var(--mp-primary-dark);
}
.mp-wrap a.mp-btn-danger {
  color: var(--mp-no);
}
.mp-wrap .mp-profile-side a.mp-btn-ghost,
.mp-wrap .mp-cardinfo-actions a.mp-btn {
  color: #fff;
}

.mp-btn-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.mp-btn-row.is-right {
  justify-content: flex-end;
}

/* ------------------------------------------------------------
 * 7. 테이블 (모바일에서 카드형으로 전환)
 * ---------------------------------------------------------- */
/* 2026 수정요청 : 표가 본문 폭을 넘으면 표 안이 아니라 페이지 전체가 가로로 흔들리는 문제.
   카드형 전환(.mp-table.is-responsive)은 768px 이하에서만 동작하므로
   769~1024px(아이패드 세로·가로모드 폰) 구간은 가드가 전혀 없었다.
   감싸개가 가로 스크롤을 흡수하도록 한다.
   (768px 이하에서는 td 가 block 으로 바뀌어 넘침 자체가 없으므로 영향 없음) */
.mp-table-wrap {
  border-top: 2px solid var(--mp-primary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.mp-table th,
.mp-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--mp-line);
  text-align: center;
  vertical-align: middle;
}
.mp-table thead th {
  background: var(--mp-bg);
  font-weight: 500;
  color: var(--mp-text-sub);
  white-space: nowrap;
}
.mp-table tbody tr:hover {
  background: #fafcfe;
}
.mp-table input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--mp-primary);
  vertical-align: middle;
  cursor: pointer;
}
.mp-table .is-left {
  text-align: left;
}
.mp-table .is-right {
  text-align: right;
}
.mp-table .mp-carno {
  font-weight: 600;
  letter-spacing: -0.2px;
}
.mp-table .mp-amount {
  font-weight: 600;
}
.mp-table tfoot td,
.mp-table .mp-row-total td {
  background: var(--mp-primary-bg);
  font-weight: 600;
  color: var(--mp-primary-dark);
  border-bottom-color: var(--mp-primary-light);
}
.mp-table .mp-row-disabled td {
  color: var(--mp-muted);
  background: #fbfcfd;
}

/* 합계 요약 */
.mp-total-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 14px;
  padding: 16px 22px;
  border-radius: var(--mp-radius);
  background: var(--mp-primary-bg);
  font-size: 17px;
}
.mp-total-bar strong {
  font-size: 22px;
  font-weight: 600;
  color: var(--mp-primary-dark);
}

/* 빈 상태 */
.mp-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--mp-muted);
  font-size: 16px;
}
.mp-empty .mp-empty-ico {
  display: block;
  margin-bottom: 10px;
  font-size: 34px;
  opacity: 0.5;
}

/* 페이지네이션 */
.mp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 26px;
}
.mp-pager a,
.mp-pager strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: #fff;
  font-size: 15px;
  font-weight: 400;
  color: var(--mp-text-sub);
}
.mp-pager strong {
  border-color: var(--mp-primary);
  background: var(--mp-primary);
  color: #fff;
}
.mp-pager a:hover {
  border-color: var(--mp-primary-light);
  color: var(--mp-primary);
}

/* ------------------------------------------------------------
 * 8. 안내 / 유의사항
 * ---------------------------------------------------------- */
.mp-help {
  font-size: 14px;
  color: var(--mp-text-sub);
  line-height: 1.6;
}
.mp-help + .mp-help {
  margin-top: 4px;
}
.mp-notice {
  padding: 18px 22px;
  border: 1px solid var(--mp-line);
  border-left: 4px solid var(--mp-primary);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-bg);
  font-size: 15px;
  color: var(--mp-text-sub);
  line-height: 1.7;
}
.mp-notice.is-warn {
  border-left-color: var(--mp-wait);
  background: var(--mp-wait-bg);
  color: #8a5b00;
}
.mp-notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-notice-list > li {
  position: relative;
  padding-left: 14px;
}
.mp-notice-list > li + li {
  margin-top: 6px;
}
.mp-notice-list > li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mp-primary-light);
}

/* ------------------------------------------------------------
 * 9. 이용 절차 스텝 (안내 화면)
 * ---------------------------------------------------------- */
.mp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* 2026 수정요청 : main.jsp 인라인 font-size:22px 를 옮겨온 것.
   모바일에서 요약 카드가 2열(칸 약 150px)이 되므로 글자를 줄여
   카드사명이 길어도 칸 안에 들어가게 한다. */
.mp-summary-value.is-compact {
  font-size: 22px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media screen and (max-width: 768px) {
  .mp-summary-value.is-compact {
    font-size: 17px;
  }
}
.mp-step {
  position: relative;
  padding: 26px 18px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  text-align: center;
  box-shadow: var(--mp-shadow);
}
.mp-step + .mp-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-top: 2px solid var(--mp-primary-light);
  border-right: 2px solid var(--mp-primary-light);
  transform: rotate(45deg);
}
.mp-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--mp-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.mp-step-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.mp-step-desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--mp-text-sub);
}

/* ------------------------------------------------------------
 * 9-1. 진행 단계 표시 (감면 사전등록 등 다단계 화면)
 * ---------------------------------------------------------- */
.mp-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.mp-stepper > li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 13px 16px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-white);
  font-size: 16px;
  color: var(--mp-muted);
  white-space: nowrap;
}
.mp-stepper-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mp-off-bg);
  color: var(--mp-muted);
  font-size: 14px;
  font-weight: 600;
}
.mp-stepper > li.is-current {
  border-color: var(--mp-primary);
  background: var(--mp-primary-bg);
  color: var(--mp-primary-dark);
  font-weight: 600;
}
.mp-stepper > li.is-current .mp-stepper-no {
  background: var(--mp-primary);
  color: #fff;
}
.mp-stepper > li.is-done {
  color: var(--mp-text-sub);
}
.mp-stepper > li.is-done .mp-stepper-no {
  background: var(--mp-ok-bg);
  color: var(--mp-ok);
}
/* 2026 수정요청 : 완료 표시를 ✓(U+2713) 글자로 그리고 있었는데, 이 문자는
   한글 기본 폰트에 없어 대체 폰트를 찾지 못하면 아무것도 안 보인다.
   바로 위에서 .mp-stepper-no 의 font-size 를 0 으로 두어 숫자를 숨기므로,
   글자가 안 나오면 완료된 단계가 빈 동그라미로 남는다.
   (절차 플로우의 아래방향 화살표에서 실제로 같은 문제가 있었다)
   글자 대신 테두리로 그려 어디서나 동일하게 보이게 한다. */
.mp-stepper > li.is-done .mp-stepper-no::before {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.mp-stepper > li.is-done .mp-stepper-no {
  font-size: 0;
}

@media screen and (max-width: 768px) {
  .mp-stepper {
    gap: 5px;
    margin-bottom: 18px;
  }
  .mp-stepper > li {
    flex-direction: column;
    gap: 5px;
    padding: 10px 6px;
    font-size: 13px;
  }
  .mp-stepper-no {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}

/* 안내 화면 히어로 */
.mp-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 34px 36px;
  border-radius: var(--mp-radius);
  background: linear-gradient(120deg, #eaf3fd 0%, #f4f9ff 100%);
  border: 1px solid #dce9f8;
}
.mp-hero-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  color: var(--mp-primary);
  font-size: 30px;
  box-shadow: var(--mp-shadow);
}
.mp-hero-text {
  font-size: 18px;
  line-height: 1.6;
  color: #1d3a5c;
}
.mp-hero-text strong {
  font-weight: 600;
  color: var(--mp-primary-dark);
}

/* ------------------------------------------------------------
 * 10. 로그인 / 최초 이용등록
 * ---------------------------------------------------------- */
.mp-auth {
  max-width: 560px;
  margin: 0 auto;
}
.mp-auth-head {
  text-align: center;
  margin-bottom: 26px;
}
.mp-auth-head .mp-auth-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
}
.mp-auth-head .mp-auth-desc {
  margin-top: 10px;
  font-size: 16px;
  color: var(--mp-text-sub);
}
.mp-tabs {
  display: flex;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--mp-line-strong);
}
.mp-tab {
  flex: 1 1 0;
  padding: 14px 10px;
  border: 0;
  background: none;
  font-size: 17px;
  color: var(--mp-text-sub);
  cursor: pointer;
  text-align: center;
}
.mp-tab.is-active {
  color: var(--mp-primary);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--mp-primary);
}
.mp-auth-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.mp-auth-btns .mp-btn {
  height: 60px;
  font-size: 17px;
}
.mp-auth-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 15px;
  color: var(--mp-text-sub);
}
.mp-auth-foot a {
  color: var(--mp-primary);
  text-decoration: underline;
}

/* 인증정보 확인 박스 */
.mp-verified {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  background: var(--mp-line);
  overflow: hidden;
}
.mp-verified-item {
  padding: 18px 20px;
  background: var(--mp-white);
}
.mp-verified-item dt {
  font-size: 14px;
  color: var(--mp-text-sub);
}
.mp-verified-item dd {
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 600;
}

/* ------------------------------------------------------------
 * 11. 모달 (영수증 조회 등)
 * ---------------------------------------------------------- */
.mp-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(19, 27, 40, 0.55);
  z-index: 1000;
}
.mp-modal.is-open {
  display: flex;
}
.mp-modal-box {
  width: 100%;
  max-width: 420px;
  /* 2026 수정요청 : vh 는 모바일 주소창이 접힌 상태 기준이라 주소창이 펼쳐지면
     실제 화면보다 커져 영수증 모달의 하단 닫기·저장 버튼이 화면 밖으로 밀렸다.
     svh 는 주소창이 펼쳐진 상태 기준이라 항상 화면 안에 들어온다.
     svh 를 모르는 브라우저는 앞의 vh 를 쓴다. */
  max-height: 90vh;
  max-height: 90svh;
  overflow-y: auto;
  border-radius: var(--mp-radius);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.mp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mp-line);
}
.mp-modal-title {
  font-size: 19px;
  font-weight: 600;
}
.mp-modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--mp-muted);
  cursor: pointer;
}
.mp-modal-body {
  padding: 22px;
}
.mp-modal-foot {
  display: flex;
  gap: 8px;
  padding: 0 22px 22px;
}
.mp-modal-foot .mp-btn {
  flex: 1 1 0;
}

/* 영수증 */
.mp-receipt {
  padding: 22px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  background: #fff;
}
.mp-receipt-head {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--mp-line-strong);
  text-align: center;
}
.mp-receipt-head .mp-receipt-title {
  font-size: 20px;
  font-weight: 600;
}
.mp-receipt-head .mp-receipt-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mp-text-sub);
}
.mp-receipt-list {
  margin: 16px 0 0;
}
.mp-receipt-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
}
.mp-receipt-list dt {
  color: var(--mp-text-sub);
}
.mp-receipt-list dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}
.mp-receipt-total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--mp-line-strong);
  font-size: 17px;
  font-weight: 600;
  color: var(--mp-primary-dark);
}

/* ------------------------------------------------------------
 * 12. 등록 카드 (자동결제)
 * ---------------------------------------------------------- */
.mp-cardinfo {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 24px 26px;
  border-radius: var(--mp-radius);
  background: linear-gradient(115deg, #2c3e56 0%, #46607f 100%);
  color: #fff;
}
.mp-cardinfo-chip {
  width: 46px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(140deg, #f5d491, #d3aa5d);
}
.mp-cardinfo-body {
  flex: 1 1 200px;
}
.mp-cardinfo-name {
  font-size: 18px;
  font-weight: 600;
}
.mp-cardinfo-no {
  margin-top: 6px;
  font-size: 21px;
  letter-spacing: 1px;
}
.mp-cardinfo-meta {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.mp-cardinfo-actions {
  display: flex;
  gap: 8px;
}
.mp-cardinfo-actions .mp-btn {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
}
.mp-cardinfo-actions .mp-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.mp-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 46px 20px;
  border: 1px dashed var(--mp-line-strong);
  border-radius: var(--mp-radius);
  background: var(--mp-bg);
  color: var(--mp-text-sub);
  text-align: center;
}

/* ------------------------------------------------------------
 * 13. 반응형
 * ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .mp-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .mp-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .mp-step + .mp-step::before {
    display: none;
  }

  /* 좌측메뉴 → 가로 탭으로 전환 (기존 .sidebar 처럼 숨기지 않는다) */
  .mp-hero-band {
    padding: 34px 20px 34px;
  }
  .mp-layout {
    flex-direction: column;
    gap: 0;
    padding-bottom: 60px;
  }
  .mp-aside {
    flex: none;
    width: 100%;
    margin-top: 0;
  }
  .mp-main {
    width: 100%;
    padding-top: 26px;
  }
  .mp-layout.is-full .mp-main {
    max-width: none;
  }
  .mp-lnb {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 -30px;
    padding: 0 30px;
    border-bottom: 1px solid var(--mp-line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mp-lnb::-webkit-scrollbar {
    display: none;
  }
  .mp-lnb-head {
    display: none;
  }
  .mp-lnb-list {
    display: flex;
    gap: 6px;
    min-width: max-content;
  }
  .mp-lnb-list > li + li {
    border-top: 0;
  }
  .mp-lnb-list > li > a {
    min-height: 0;
    padding: 14px 4px 13px;
    margin: 0 8px;
    font-size: 16px;
    color: var(--mp-text-sub);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
  }
  .mp-lnb-list > li > a::after {
    display: none;
  }
  .mp-lnb-list > li > a:hover,
  .mp-lnb-list > li > a:focus {
    background: transparent;
  }
  .mp-lnb-list > li.is-active > a {
    color: var(--mp-primary);
    border-bottom-color: var(--mp-primary);
  }
}

@media screen and (max-width: 768px) {
  .mp-wrap {
    font-size: 15px;
  }
  .mp-hero-band {
    padding: 26px 16px;
  }
  .mp-hero-band::before {
    width: 190px;
    height: 190px;
    margin-top: -95px;
    right: -30px;
  }
  .mp-hero-title {
    font-size: 24px;
  }
  .mp-crumb {
    margin-top: 12px;
    font-size: 13px;
  }
  .mp-crumb > li + li::before {
    margin: 0 8px;
  }
  .mp-layout {
    padding: 0 16px 46px;
  }
  .mp-lnb {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .mp-lead {
    margin-bottom: 20px;
    font-size: 15px;
  }
  .mp-section-title {
    font-size: 18px;
  }
  .mp-card {
    padding: 18px 16px;
  }
  .mp-profile {
    padding: 20px 18px;
    gap: 14px;
  }
  .mp-profile-name {
    font-size: 20px;
  }
  .mp-profile-meta {
    font-size: 14px;
  }
  .mp-profile-meta span {
    display: block;
  }
  .mp-profile-meta span + span::before {
    display: none;
  }
  .mp-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mp-summary-item {
    min-height: 118px;
    padding: 16px 14px;
  }
  .mp-summary-label {
    font-size: 14px;
  }
  .mp-summary-value {
    font-size: 24px;
  }
  .mp-steps {
    gap: 10px;
  }
  .mp-step {
    padding: 18px 12px;
  }
  .mp-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 18px;
    gap: 14px;
  }
  .mp-hero-text {
    font-size: 15px;
  }

  /* 폼 : 라벨 위로 */
  .mp-form-row {
    flex-direction: column;
    gap: 8px;
    padding: 14px 0;
  }
  .mp-form-label {
    flex: none;
    padding-top: 0;
    font-size: 15px;
  }
  .mp-input,
  .mp-select,
  .mp-btn {
    height: 44px;
    font-size: 15px;
  }
  /* 위 .mp-input 44px 도 kp.css 전역 input[type=...]{height:40px} 에 밀리므로
     같은 방식(0,2,1)으로 모바일 높이도 함께 되돌린다. */
  input[type=text].mp-input,
  input[type=password].mp-input,
  input[type=tel].mp-input,
  input[type=number].mp-input,
  input[type=date].mp-input,
  input[type=email].mp-input {
    height: 44px;
  }
  .mp-input.w-260,
  .mp-input.w-180,
  .mp-input.w-200,
  .mp-select.w-260,
  .mp-select.w-180,
  .mp-select.w-200 {
    width: 100%;
  }
  /* 2026 수정요청 : 입력창-구분자-입력창 묶음(기간 검색, 주민등록번호, 유효기간)이
     세 줄로 쪼개지고 구분자만 한 줄을 차지하던 문제.
     두 입력창이 각각 width:100% 가 되면서 flex 가 줄바꿈되기 때문이다.
     구분자를 가운데 둔 3열 그리드로 한 줄을 유지한다.
     ※ .mp-inline 은 "값 + 배지 + 버튼"(무정차정산 카드 연계)처럼 성격이 다른
        묶음에도 쓰이므로, 3열 구조가 맞는 곳에만 .mp-inline-split 을 붙여 적용한다. */
  .mp-inline-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .mp-inline-split > .mp-input {
    width: 100%;
    min-width: 0;
  }
  .mp-filter {
    padding: 16px;
    gap: 12px;
  }
  .mp-filter-item {
    width: 100%;
  }
  .mp-filter-actions {
    width: 100%;
    margin-left: 0;
  }
  .mp-filter-actions .mp-btn {
    flex: 1 1 0;
  }
  .mp-btn-row {
    margin-top: 22px;
    flex-wrap: wrap;
  }
  .mp-btn-row .mp-btn {
    flex: 1 1 0;
  }
  /* 2026 수정요청 : 큰 버튼 2개(이전 + 행안부 자격확인 / 이전 + 감면 등록 신청)가
     카드 밖으로 삐져나가 가로 스크롤이 생기던 문제.
     flex:1 1 0 으로 줄여도 .mp-btn-lg 의 min-width:160px 가 바닥값이라
     2개면 330px(160+160+gap10)가 필요한데 360px 화면의 카드 안쪽은 296px 뿐이다.
     버튼 줄 안에서는 바닥값을 풀어 가용폭을 나눠 갖게 한다. */
  .mp-btn-row .mp-btn-lg {
    min-width: 0;
  }

  /* 테이블 : 카드형 전환 */
  .mp-table.is-responsive,
  .mp-table.is-responsive tbody,
  .mp-table.is-responsive tr,
  .mp-table.is-responsive td {
    display: block;
    width: 100%;
  }
  .mp-table.is-responsive thead {
    display: none;
  }
  /* 2026 수정요청 : 768px 이하에서 thead 가 통째로 숨겨지는데 전체선택 체크박스가
     thead 안에만 있어 모바일에서 일괄 영수증 출력을 할 수 없던 문제.
     .has-checkall 을 단 표에 한해 머리글을 "전체 선택" 바로 되살린다.
     (체크박스 요소와 id 는 그대로라 기존 스크립트 수정 불필요) */
  .mp-table.is-responsive.has-checkall thead {
    display: block;
  }
  .mp-table.is-responsive.has-checkall thead tr {
    display: block;
  }
  .mp-table.is-responsive.has-checkall thead th {
    display: none;
  }
  .mp-table.is-responsive.has-checkall thead th:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-bottom: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm) var(--mp-radius-sm) 0 0;
    background: var(--mp-bg);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }
  .mp-table.is-responsive.has-checkall thead th:first-child::after {
    content: "전체 선택";
    color: var(--mp-text-sub);
  }
  .mp-table.is-responsive tbody tr {
    margin-bottom: 10px;
    padding: 6px 14px;
    border: 1px solid var(--mp-line);
    border-radius: var(--mp-radius-sm);
    background: #fff;
  }
  .mp-table.is-responsive td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--mp-line);
    text-align: right;
  }
  .mp-table.is-responsive td:last-child {
    border-bottom: 0;
  }
  .mp-table.is-responsive td::before {
    content: attr(data-th);
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--mp-text-sub);
    text-align: left;
  }
  /* 2026 수정요청 : 목록이 비었을 때의 안내문(<td colspan="N">)이
     라벨 없는 카드 칸으로 잡혀 우측으로 쏠리던 문제.
     colspan 행은 라벨/값 쌍이 아니므로 카드 칸 규칙에서 제외한다.
     (마이페이지 메인·차량관리·이용내역·감면현황, 무정차정산 등록 공통) */
  .mp-table.is-responsive td[colspan] {
    display: block;
    padding: 0;
    border-bottom: 0;
    text-align: center;
  }
  .mp-table.is-responsive td[colspan]::before {
    content: none;
  }
  .mp-table.is-responsive .mp-row-total td {
    background: var(--mp-primary-bg);
  }

  .mp-total-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    font-size: 15px;
  }
  .mp-verified {
    grid-template-columns: 1fr;
  }
  .mp-auth-head .mp-auth-title {
    font-size: 22px;
  }
  .mp-auth-btns .mp-btn {
    height: 52px;
    font-size: 16px;
  }
  .mp-cardinfo {
    padding: 18px;
    gap: 14px;
  }
  .mp-cardinfo-no {
    font-size: 18px;
  }
  .mp-cardinfo-actions {
    width: 100%;
  }
  .mp-cardinfo-actions .mp-btn {
    flex: 1 1 0;
  }
}

/* ============================================================
 * 2026 수정요청 : 사업자 가입요청(store/signup) — mp-card 내 contable
 *   1) 표 색감을 미납 조회 폼 톤(연한 라벨셀)으로
 *   2) 입력창+버튼(중복확인/사업자등록번호확인/우편번호/본인인증) 한 줄로 (PC·모바일 공통)
 * ============================================================ */
.mp-card .contable.form-view {
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}
.mp-card .contable.form-view > tbody > tr > th {
  background: linear-gradient(180deg, #2f86d8 0%, #1c7ad3 100%);
  color: #fff;
  font-weight: 500;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.mp-card .contable.form-view > tbody > tr > td {
  background: #fff;
  border: 0;
  padding: 12px 18px;
}
.mp-card .contable.form-view > tbody > tr + tr > th,
.mp-card .contable.form-view > tbody > tr + tr > td {
  border-top: 1px solid #eef1f5;
}

/* 입력창 + 버튼을 한 줄로 (기존 float 방식 → flex) */
.mp-card .form-btn-box {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.mp-card .form-btn-box::before,
.mp-card .form-btn-box::after {
  display: none;
}
.mp-card .form-btn-box .form-text,
.mp-card .form-btn-box .box-parking {
  float: none;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.mp-card .form-btn-box .btn {
  float: none;
  flex: 0 0 auto;
  width: auto;
  min-width: fit-content;
  height: auto;
  margin: 0;
  padding: 0 18px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.mp-card .form-btn-box .hidden-messages {
  float: none;
}

/* 2026 수정요청 : 로그인 카드 하단 보조 버튼(사업자 가입요청 / 비밀번호 찾기)
 *   텍스트 링크 → 나란한 버튼식 (가독성 개선) */
.mp-auth-sub-btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.mp-auth-sub-btns .mp-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ============================================================
 * 2026 수정요청 : 웹선불권 회원영역(조회/적용, 결제 등) mp-card 적용
 * ============================================================ */
/* 조회 화면 상단 회원/잔여시간 요약 카드 */
.wd-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-bottom: 16px;
}
.wd-summary-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  flex: 1 1 auto;
  min-width: 0;
}
.wd-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--mp-text);
}
.wd-summary-item b {
  font-weight: 700;
  color: var(--mp-primary-dark);
}
.wd-summary-lbl {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--mp-primary-bg);
  color: var(--mp-primary);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
}
.wd-summary-remain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid var(--mp-line);
}
.wd-summary-remain strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--mp-primary);
}
.wd-summary-pay {
  flex: 0 0 auto;
}

/* mp-card 내 결과/데이터 표(board-view) : 미납 내역 톤(진파랑 헤더 + 옅은 행) */
.mp-card .contable.board-view {
  border-collapse: collapse;
  width: 100%;
}
.mp-card .contable.board-view > thead > tr > th {
  height: 52px;
  background: linear-gradient(180deg, #2f86d8 0%, #1c7ad3 100%);
  color: #fff;
  font-weight: 500;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.mp-card .contable.board-view > tbody > tr > td {
  padding: 13px 12px;
  border-bottom: 1px solid #eef1f5;
  color: #333;
}

/* 2026 수정요청 : 결제 화면 강조 라벨셀(결제금액/구매 후 보유시간)은 진파랑과 구분되게
 *   (원본 .point .emphasis = 주황 #F4B183 강조 느낌 복원) */
.mp-card .contable.form-view > tbody > tr > th.emphasis {
  background: linear-gradient(180deg, #f0a35f 0%, #e88b3e 100%);
  color: #fff;
}
.mp-card .contable.form-view > tbody > tr > th.discounts {
  background: linear-gradient(180deg, #7bc86c 0%, #5cb85c 100%);
  color: #fff;
}

/* 2026 수정요청 : 표로 만든 입력 폼(.contable.form-view)이 768px 이하에서도 2열을 유지해
   라벨 칸이 colgroup 20%(360px 기준 58px)로 고정되고, "변경할 비밀번호 확인",
   "사용 웹선불권 종류" 같은 라벨이 글자 단위로 4~5줄씩 잘리며 행 높이가 폭주하던 문제.
   같은 파일의 .mp-table.is-responsive 는 이미 카드형 전환 장치를 갖고 있으나
   구마크업(.contable)이 그 클래스를 쓰지 않아 혜택을 못 받고 있었다.
   이 브리지 블록에는 @media 자체가 없었으므로, 라벨을 값 위로 쌓아 올린다.
   (사업자 비밀번호변경·내정보변경·웹선불권 결제 / 회원 비밀번호변경·내정보조회·변경) */
@media screen and (max-width: 768px) {
  .mp-card .contable.form-view:not(.search),
  .mp-card .contable.form-view:not(.search) > tbody,
  .mp-card .contable.form-view:not(.search) > tbody > tr,
  .mp-card .contable.form-view:not(.search) > tbody > tr > th,
  .mp-card .contable.form-view:not(.search) > tbody > tr > td {
    display: block;
    width: 100%;
  }
  .mp-card .contable.form-view:not(.search) > colgroup {
    display: none;
  }
  /* 2026 수정요청 : 위에서 th/td 를 block 으로 바꾸면서 생긴 부작용 보정.
     style.css 의 .contable.form-view > tbody > tr > th, td { height: 40px } 는
     표 레이아웃에서는 "최소 높이"로 동작하지만, display:block 이 되는 순간
     "고정 높이"가 된다. 그 결과 입력창+버튼(40px)에 상하 패딩까지 더한 내용이
     40px 칸을 넘고, 표의 overflow:hidden 에 잘려 아래가 보이지 않았다.
     높이를 내용에 맞게 풀되, 원래 의도였던 최소 높이는 유지한다. */
  .mp-card .contable.form-view:not(.search) > tbody > tr > th,
  .mp-card .contable.form-view:not(.search) > tbody > tr > td {
    height: auto;
    min-height: 40px;
  }
  .mp-card .contable.form-view:not(.search) > tbody > tr > th {
    border-right: 0;
    padding: 9px 14px;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
  }
  .mp-card .contable.form-view:not(.search) > tbody > tr > td {
    padding: 12px 14px;
  }
  /* 라벨과 값은 한 덩어리이므로 행 사이에만 구분선을 둔다 */
  .mp-card .contable.form-view:not(.search) > tbody > tr + tr > th {
    border-top: 1px solid #eef1f5;
  }
  .mp-card .contable.form-view:not(.search) > tbody > tr + tr > td {
    border-top: 0;
  }
  /* 조회 결과 표(.search)는 제외한다.
     웹선불권·부설할인 상세의 이용시간 블록처럼 행/열 병합으로 짜인 표라
     블록으로 쌓으면 병합이 무시되어 의미가 깨진다. 대신 가로로 밀도록 한다.
     (줄바꿈은 막지 않아 실제로 넘칠 때만 스크롤이 생긴다) */
  .mp-card .contable.form-view.search {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2026 수정요청 : 비밀번호 확인 화면(사업자/회원)의 배치 규칙이
   add.css 에서 옛 .content 스코프(.content .error_outline / .content .find)로 묶여 있는데,
   이 화면들은 신규 레이아웃(.mp-wrap > .mp-layout > .mp-main > .mp-card)으로 바뀌어
   .content 자체가 없다. 선택자가 아예 매치되지 않아 아이콘·문구·입력폼·버튼이
   좌측으로 흩어지고 세로 여백이 무너져 있었다.
   옛 규칙(display:table-cell / padding:100px / height:420px)은 넓은 본문을 전제로 한
   값이라 모바일에 맞지 않으므로, mp-card 안에서는 중앙 정렬 블록으로 다시 세운다. */
.mp-card .error_outline {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}
.mp-card .error_outline .find {
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: var(--mp-text-sub);
}
.mp-card .error_outline .find figure {
  margin: 0;
}
.mp-card .error_outline .find figure img {
  width: 56px;
  height: 56px;
}
.mp-card .error_outline .find figcaption {
  margin: 14px 0 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mp-text);
  word-break: keep-all;
}
.mp-card .error_outline .find .contable.form-view {
  width: 100%;
  text-align: left;
}
.mp-card .error_outline .find .btn-list {
  margin-top: 26px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mp-card .error_outline {
    padding: 28px 0;
  }
  .mp-card .error_outline .find figcaption {
    font-size: 15px;
  }
}

/* 2026 수정요청 : 웹선불권 결제 화면의 큰 입력창. 원래 JSP 인라인 style="font-size:25px" 였는데
   25px 로는 "웹선불권 결제가 불가능한 주차장입니다."(20자) 안내문구에 약 500px 가 필요해
   250px 입력창에서 문구가 잘려 보이지 않았다. 인라인을 걷어내고 클래스로 옮겨
   모바일에서만 글자를 줄인다. */
.mp-card .contable.form-view .mp-bigfield {
  font-size: 25px;
}
@media screen and (max-width: 768px) {
  .mp-card .contable.form-view .mp-bigfield {
    font-size: 17px;
  }
  .mp-card .contable.form-view .mp-bigfield::placeholder {
    font-size: 14px;
  }
}

/* 2026 수정요청 : 목록 표(.contable.board-view)가 열이 많은데(웹선불권 결제·사용내역 10열,
   부설할인 사용내역 7열) 모바일 대응이 없어 열당 22~47px 로 눌리면서
   날짜가 세로로 한 글자씩 쌓이던 문제.
   셀을 억지로 줄이는 대신 표 자체가 가로 스크롤을 갖게 해 값을 온전히 보여준다. */
@media screen and (max-width: 768px) {
  .mp-card .contable.board-view {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .mp-card .contable.board-view > thead > tr > th,
  .mp-card .contable.board-view > tbody > tr > td {
    white-space: nowrap;
  }
}

/* 웹선불권 사용내역 : 결제/사용/환불/잔여 요약 스탯 */
.wd-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.wd-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid var(--mp-line);
  font-size: 15px;
  white-space: nowrap;
}
.wd-stat i { font-style: normal; color: var(--mp-text-sub); font-size: 13px; }
.wd-stat b { font-weight: 700; color: var(--mp-text); }
.wd-stat.is-remain { background: var(--mp-primary-bg); border-color: #cfe0f3; }
.wd-stat.is-remain b { color: var(--mp-primary); }

/* 2026 : 사업자 가입요청 - 개인정보 동의 → 신청서 작성 스텝 (mp-card 스코프) */
.mp-card .apply-steps {
  display: flex;
  gap: 8px;
  margin: 6px 0 26px;
  padding: 0;
  list-style: none;
}
.mp-card .apply-steps > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  border-radius: 10px;
  background: #f1f4f8;
  color: #9aa3b0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  word-break: keep-all;
}
.mp-card .apply-steps > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c8d0da;
  color: #fff;
  font-size: 13px;
}
.mp-card .apply-steps > li.is-active { background: var(--mp-primary-bg); color: var(--mp-primary); }
.mp-card .apply-steps > li.is-active > span { background: var(--mp-primary); }
.mp-card .apply-steps > li.is-done { background: #e7f7f1; color: #17a673; }
.mp-card .apply-steps > li.is-done > span { background: #17a673; }
.mp-card .apply-step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
}
.mp-card .apply-step-nav .btn { min-width: 200px; }
/* 첫 단계(동의)는 버튼이 하나뿐 → 가운데 정렬, 나머지 단계는 우측 정렬 유지 */
.mp-card .apply-step[data-step="1"] .apply-step-nav { justify-content: center; }
/* 동의서 스크롤 박스 세로 영역 확대(기본 .rule-box height:140px → 360px) */
.mp-card .apply-step .rule-box { height: 360px; }
@media screen and (max-width: 768px) {
  .mp-card .apply-step .rule-box { height: 300px; }
  .mp-card .apply-steps > li { flex-direction: column; gap: 4px; font-size: 12px; }
  .mp-card .apply-step-nav .btn { min-width: 0; flex: 1; }
}

/* ============================================================
 * 2026 수정요청 : 좁은 화면 보정 (모바일 점검 후속)
 *   앞쪽 블록들보다 뒤에 두어 같은 특이도에서 이기게 한다.
 * ============================================================ */

/* 검색 필터가 두 줄로 접힐 때 검색 버튼만 오른쪽 끝에 홀로 떨어져
   가운데가 비어 보이던 문제. 버튼이 줄 전체를 쓰게 한다. */
@media screen and (max-width: 1024px) {
  .mp-filter-actions {
    margin-left: 0;
    width: 100%;
  }
  .mp-filter-actions .mp-btn {
    flex: 1 1 auto;
  }
}

/* 안내 화면의 4단계 카드가 1024px 이하에서 2열로 바뀌는데,
   400px 안팎에서는 칸이 약 135px 라 "출차 시 자동결제" 같은 제목이
   두 줄로 접히면서 카드 높이가 들쭉날쭉해졌다. 한 줄에 하나씩 놓는다. */
@media screen and (max-width: 420px) {
  .mp-steps {
    grid-template-columns: 1fr;
  }
  .mp-step-title {
    font-size: 16px;
  }
}

/* 2026 수정요청 : mp-card 안의 일반 contable 데이터 표(개인정보 수집·이용 동의표 등)도
   머리글이 글자 단위로 쪼개진다. 공영페이지에 적용한 것과 같은 방식으로,
   머리글이 있는 표만 가로로 밀 수 있게 하고 줄바꿈 금지는 머리글에만 건다.
   (.board-view / .form-view 는 위쪽에서 이미 각각 처리했다) */
@media screen and (max-width: 768px) {
  .mp-card .contable:not(.board-view):not(.form-view):has(thead) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mp-card .contable:not(.board-view):not(.form-view):has(thead) > thead > tr > th {
    white-space: nowrap;
  }
}

/* 2026 수정요청 : 웹선불권·부설할인 차량번호 조회의 검색 버튼이 화면 밖으로 잘리던 문제.
   add.css:2256 이 768px 이하에서 button.inquiry 에 width:100px !important 와 float:right 를
   걸어 두어, mp-card 의 한 줄 배치(flex)에서 버튼이 제 폭을 못 줄이고 넘쳤다.
   같은 방식(!important)으로 되돌려 글자 길이에 맞는 폭을 쓰게 한다. */
@media screen and (max-width: 768px) {
  .mp-card .form-btn-box button.inquiry,
  .psub-body .content .form-btn-box button.inquiry {
    width: auto !important;
    min-width: 64px;
    float: none !important;
    margin-left: 0;
  }
}

/* 2026 수정요청 : 차량번호 입력칸의 글자 크기. 원래 JSP 인라인 style="font-size:30px" 였다.
   뒷자리 4자리만 받는 칸이라 크게 보이려는 의도지만, 30px 는 좁은 화면에서
   입력창 최소 폭을 키워 옆의 검색 버튼을 밀어낸다. 모바일에서는 한 단계 줄인다. */
.mp-card .form-btn-box .mp-carno-input {
  font-size: 30px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mp-card .form-btn-box .mp-carno-input {
    font-size: 22px;
  }
}