/* 라이더 앱 모바일 전용 보정
   ⚠️ Metronic 루트 font-size가 12px이라 rem은 의도보다 25% 작게 나온다 → 크기는 px로 고정. */

/* ───────────────────────────── 홈: 인사말 ───────────────────────────── */
.rider-home-greeting-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bs-gray-900);
}

/* ───────────────────────── 홈: 상태 알림(막힘) ───────────────────────── */
.rider-home-alert {
	display: flex;
	padding: 13px 14px;
	border-radius: 12px;
	border: 1px solid transparent;
}
.rider-home-alert i {
	font-size: 24px;
	line-height: 1;
}
.rider-home-alert-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.rider-home-alert-sub {
	font-size: 12px;
	line-height: 1.4;
	margin-top: 1px;
	opacity: 0.85;
}
.rider-home-alert-danger {
	background: var(--bs-danger-light);
	border-color: rgba(241, 65, 108, 0.25);
	color: var(--bs-danger);
}
.rider-home-alert-danger .rider-home-alert-sub {
	color: var(--bs-gray-700);
}
.rider-home-alert-info {
	background: var(--bs-info-light);
	border-color: rgba(114, 57, 234, 0.2);
	color: var(--bs-info);
}
.rider-home-alert-info .rider-home-alert-sub {
	color: var(--bs-gray-700);
}
.rider-home-alert:active {
	transform: scale(0.99);
}

/* ────────────────────── 홈: 출금 가능액 히어로 카드 ────────────────────── */
.rider-home-hero {
	background: linear-gradient(135deg, #009ef7 0%, #0080d6 100%);
	border-radius: 16px;
	padding: 20px 18px 16px;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 158, 247, 0.28);
}
.rider-home-hero-label {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0.9;
	line-height: 1.2;
}
/* 「출금 가능 금액 | 보증금·정산수수료 차감 후 금액」 — 한 줄로 붙인다(2026-09-19 갑). */
.rider-home-hero-label-note {
	font-size: 10px;
	font-weight: 500;
	opacity: 0.85;
	padding-left: 6px;
	border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.rider-home-hero-amount {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
	margin-top: 4px;
	word-break: keep-all;
}
.rider-home-hero-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 14px;
	border-radius: 10px;
	background: #fff;
	color: #0080d6;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.rider-home-hero-cta:hover,
.rider-home-hero-cta:focus {
	color: #0080d6;
	background: #fff;
}
.rider-home-hero-cta:active {
	transform: scale(0.98);
}
.rider-home-hero-cta-ghost {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.rider-home-hero-cta-ghost:hover,
.rider-home-hero-cta-ghost:focus {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}
.rider-home-hero-foot {
	display: flex;
	align-items: center;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.rider-home-hero-foot-item {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}
.rider-home-hero-foot-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.25);
}
.rider-home-hero-foot-label {
	display: block;
	font-size: 11px;
	opacity: 0.85;
	line-height: 1.3;
}
.rider-home-hero-foot-value {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 1px;
}

/* ─────────────────────── 홈: 이번 달 요약 타일 3개 ─────────────────────── */
.rider-home-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.rider-home-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 82px;
	padding: 11px 9px;
	border-radius: 12px;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-gray-200);
	text-decoration: none;
}
.rider-home-stat:active {
	transform: scale(0.98);
}
.rider-home-stat-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--bs-gray-500);
	line-height: 1.2;
}
.rider-home-stat-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--bs-gray-900);
	line-height: 1.25;
	margin-top: 4px;
	word-break: break-all;
}
.rider-home-stat-unit {
	font-size: 11px;
	font-weight: 600;
	color: var(--bs-gray-600);
	margin-left: 1px;
}
.rider-home-stat-sub {
	font-size: 10px;
	color: var(--bs-gray-500);
	line-height: 1.3;
	margin-top: 2px;
}
.rider-home-stat-warn {
	background: var(--bs-warning-light);
	border-color: rgba(255, 199, 0, 0.35);
}
.rider-home-stat-warn .rider-home-stat-value {
	color: #b38600;
}

/* ─────────────────────────── 홈: 바로가기 4칸 ─────────────────────────── */
.rider-home-quick {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.rider-home-quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 4px 2px;
	text-decoration: none;
}
.rider-home-quick-item:active {
	transform: scale(0.96);
}
.rider-home-quick-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
}
.rider-home-quick-icon i {
	font-size: 25px;
	line-height: 1;
}
.rider-home-quick-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--bs-gray-700);
	line-height: 1.2;
	text-align: center;
}

/* ──────────────────────────── 홈: 최근 정산 ──────────────────────────── */
.rider-home-cycle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--bs-gray-200);
}
.rider-home-cycle:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.rider-home-cycle-date {
	font-size: 13px;
	font-weight: 700;
	color: var(--bs-gray-900);
	line-height: 1.3;
}
.rider-home-cycle-sub {
	font-size: 11px;
	color: var(--bs-gray-500);
	line-height: 1.3;
	margin-top: 1px;
}
.rider-home-cycle-amount {
	font-size: 14px;
	font-weight: 700;
	color: var(--bs-primary);
	line-height: 1.3;
}
.rider-home-cycle-fee {
	font-size: 10px;
	color: var(--bs-gray-500);
	line-height: 1.3;
	margin-top: 1px;
}

/* ──────────────────────────── 홈: 공지 목록 ──────────────────────────── */
/* 홈의 공지·최근 정산은 «한 줄 요약» 목록이라 카드 기본 여백(2.25rem)은 과하다.
   제목 줄과 목록을 붙여 카드 높이를 줄인다(2026-09-19 갑). */
.rider-home-notices .card-header,
.rider-home-cycles .card-header {
	padding: 0.75rem 1rem 0;
}
.rider-home-notices .card-body,
.rider-home-cycles .card-body {
	padding: 0.5rem 1rem 0.75rem;
}
.rider-home-notice-list li + li {
	margin-top: 0.375rem;
}

/* ───────────────────────── 홈 광고 배너 ───────────────────────── */
/* 규격은 4:1(권장 1200×300). height 속성(200)만으로는 화면이 넓어질 때 세로로
   늘어나 버리므로 비율을 고정하고, 규격이 다른 이미지는 가운데를 잘라 채운다. */
.rider-home-banner-img {
	height: auto;
	aspect-ratio: 4 / 1;
	object-fit: cover;
	background: var(--bs-gray-100);
}

/* 이미지 없이 제목만 등록한 광고 — 자리를 똑같이 차지해야 슬라이드가 안 튄다. */
.rider-home-banner-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 1;
}

/* ───────────────────────── 하단 탭바(전 화면 공통) ─────────────────────── */
.rider-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	background: var(--bs-body-bg);
	border-top: 1px solid var(--bs-gray-200);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}
.rider-tabbar-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 56px;
	padding: 6px 2px;
	text-decoration: none;
	color: var(--bs-gray-500);
}
.rider-tabbar-item i {
	font-size: 22px;
	line-height: 1;
}
.rider-tabbar-label {
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
}
.rider-tabbar-item.active {
	color: var(--bs-primary);
}
.rider-tabbar-item.active i {
	color: var(--bs-primary);
}
.rider-tabbar-item:active {
	background: var(--bs-gray-100);
}

/* 탭바에 콘텐츠가 가리지 않도록 본문 하단 여백 확보 */
.rider-has-tabbar {
	padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}

/* ─────────────────────────── 넓은 화면 보정 ─────────────────────────── */
@media (min-width: 400px) {
	.rider-home-hero-amount {
		font-size: 38px;
	}
	.rider-home-quick-icon {
		width: 56px;
		height: 56px;
	}
	.rider-home-quick-label {
		font-size: 12px;
	}
	.rider-home-stat-value {
		font-size: 16px;
	}
}

/* ═════════════════ 터치 타깃 최소 크기 (2026-08-26) ═════════════════

   왜 필요한가 — 루트 font-size 가 12px 이라 rem 기반인 Metronic 컴포넌트가
   전부 작게 나온다. 실측(375px 뷰포트):

     기본 버튼            40.4px
     .btn-sm              32.3px
     .btn-sm + py-1       23.1px   ← 손가락으로 누르기 어렵다
     .btn-sm + py-1 + fs-8 21.3px  ← 최악
     .form-control        40.4px
     .form-control-sm     32.3px

   iOS HIG·Material 권장 최소는 44x44px. 여기서는 **글자 크기는 그대로 두고
   높이만** 끌어올린다 — 화면 밀도를 유지하면서 누르는 면적만 확보하는 게
   목적이고, 글자까지 키우면 카드 레이아웃이 전부 틀어진다.

   min-height 를 쓰는 이유: `py-1` 같은 유틸리티가 padding 을 줄여도
   min-height 는 살아남아 실제 높이를 보장한다.                               */

.rider-mobile-root .btn,
.rider-mobile-root .form-control,
.rider-mobile-root .form-select {
	min-height: 44px;
}

/* padding 유틸리티(py-1 등)로 눌린 버튼도 글자가 세로 중앙에 오게 한다.
   min-height 만 주면 글자가 위로 붙는다. */
.rider-mobile-root .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 보조 버튼(「전체」·「달력」 같은 카드 헤더 링크)은 44px 이면 헤더가 뜬다.
   40px 로 타협한다 — 32px 보다 확실히 낫고 레이아웃도 견딘다. */
.rider-mobile-root .btn-sm {
	min-height: 40px;
}

/* 전폭 버튼은 그 화면의 주요 동작이다(「조회」·「신청」) → 40px 로 깎지 않는다. */
.rider-mobile-root .btn-sm.w-100 {
	min-height: 44px;
}

/* iOS 는 입력 글자가 16px 미만이면 **포커스 시 화면을 확대**한다.
   확대되면 레이아웃이 틀어지고 사용자가 손으로 되돌려야 한다.
   보이는 크기는 그대로 두고 확대만 막으려면 16px 이 필요하다. */
.rider-mobile-root input,
.rider-mobile-root select,
.rider-mobile-root textarea {
	font-size: 16px;
}

/* 체크박스는 위 규칙의 대상이 아니다(글자가 아니라 상자 크기가 중요).
   기본 21px 는 너무 작아 라벨까지 눌러야 하므로 상자 자체를 키운다. */
.rider-mobile-root .form-check-input {
	width: 22px;
	height: 22px;
	min-height: 0;
}
/* 체크박스 행 자체를 44px 로 잡아 세로 여유를 준다 — 상자(22px)만 키우면
   손가락이 조금만 빗나가도 안 눌린다. */
.rider-mobile-root .form-check {
	min-height: 44px;
	align-items: center;
}
.rider-mobile-root .form-check-label {
	padding-left: 4px;
	min-height: 22px;
	display: inline-flex;
	align-items: center;
}

/* 드로어 메뉴 항목 — Metronic 기본이 35px 라 손가락으로 고르기 빠듯하다.
   메뉴는 화면 전체를 덮으므로 44px 로 키워도 레이아웃에 영향이 없다. */
.rider-mobile-root .menu-link {
	min-height: 44px;
}

/* 도움말 줄(.form-text) 안의 링크는 글자 높이 그대로라 14px 밖에 안 된다.
   (예: 출금 신청의 「계좌 변경」) 글자 크기는 두고 눌리는 면적만 넓힌다. */
.rider-mobile-root .form-text a {
	display: inline-block;
	padding: 12px 6px;
	margin: -6px;
}

/* 정산 목록의 한 줄짜리 행 — px-3 py-3 만으로는 36px 이라 목록에서 고르기 빠듯하다.
   행 전체가 링크이므로 높이만 올리면 누르는 면적이 그대로 넓어진다. */
.rider-mobile-root .rider-settle-list > a,
.rider-mobile-root .rider-settle-list-row {
	min-height: 48px;
}