/* SOCIETY 5.0 회원 포털 디자인 시스템 — 블루/그린, 굵은 헤드라인, 카드형 레이아웃 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.dynamic.css');

:root {
	--color-primary: #2563eb;
	--color-primary-dark: #1d4ed8;
	--color-accent: #16a34a;
	--color-accent-dark: #15803d;
	--color-ink: #111827;
	--color-muted: #6b7280;
	--color-bg: #f8fafc;
	--color-surface: #ffffff;
	--color-border: #e5e7eb;
	--color-danger: #dc2626;
	--radius-lg: 18px;
	--radius-md: 12px;
	--shadow-card: 0 1px 3px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.06);
	--font-body: 'PretendardVariable', 'Pretendard', -apple-system, 'Noto Sans KR', sans-serif;
}

* {
	font-family: var(--font-body);
}

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

/* ---------- 상단 네비게이션 ---------- */
.s5-nav {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 20;
}

.s5-brand {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-decoration: none;
}

.s5-brand span {
	background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.s5-nav .s5-brand {
	font-size: 1.15rem;
}

.s5-nav .nav-link {
	color: var(--color-muted);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
}

.s5-nav .nav-link.active,
.s5-nav .nav-link:hover {
	color: var(--color-primary);
	background: rgba(37, 99, 235, 0.08);
}

.s5-user-chip {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--color-ink);
}

.s5-user-chip small {
	display: block;
	font-weight: 500;
	color: var(--color-muted);
	font-size: 0.74rem;
}

/* ---------- 버튼 ---------- */
.btn-s5-primary {
	background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
	border: none;
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.65rem 1.5rem;
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-s5-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32);
	color: #fff;
}

.btn-s5-outline {
	border: 1.5px solid var(--color-border);
	color: var(--color-ink);
	font-weight: 600;
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	background: #fff;
}

.btn-s5-outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-s5-accent {
	background: var(--color-accent);
	border: none;
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-size: 0.85rem;
}

.btn-s5-accent:hover {
	background: var(--color-accent-dark);
	color: #fff;
}

/* ---------- 카드 ---------- */
.s5-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.s5-card .s5-card-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.s5-card .s5-card-header .eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	text-transform: uppercase;
}

.s5-card .s5-card-header h2 {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0.15rem 0 0;
}

.s5-card .s5-card-body {
	padding: 1.5rem;
}

/* ---------- 인증(로그인/가입) 스플릿 레이아웃 ---------- */
.s5-auth-shell {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
}

@media (max-width: 900px) {
	.s5-auth-shell {
		grid-template-columns: 1fr;
	}

	.s5-auth-hero {
		display: none;
	}
}

.s5-auth-hero {
	background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-accent) 100%);
	color: #fff;
	padding: 4rem 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.s5-auth-hero::after {
	content: '';
	position: absolute;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	right: -160px;
	bottom: -180px;
}

.s5-auth-hero .s5-hero-eyebrow {
	font-weight: 700;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 1rem;
}

.s5-auth-hero h1 {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
}

.s5-auth-hero p {
	font-size: 1.02rem;
	opacity: 0.92;
	max-width: 30rem;
	line-height: 1.7;
}

.s5-hero-stats {
	display: flex;
	gap: 2.5rem;
	margin-top: 2.75rem;
}

.s5-hero-stats .stat-num {
	font-size: 1.7rem;
	font-weight: 800;
}

.s5-hero-stats .stat-label {
	font-size: 0.78rem;
	opacity: 0.85;
}

.s5-auth-form-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.5rem;
	background: var(--color-surface);
}

.s5-auth-form {
	width: 100%;
	max-width: 380px;
}

.s5-auth-form h2 {
	font-weight: 800;
	font-size: 1.6rem;
	margin-bottom: 0.35rem;
}

.s5-auth-form .sub {
	color: var(--color-muted);
	margin-bottom: 1.75rem;
	font-size: 0.92rem;
}

.s5-auth-form label {
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
}

.s5-auth-form .form-control,
.s5-auth-form .form-select {
	border-radius: var(--radius-md);
	border: 1.5px solid var(--color-border);
	padding: 0.65rem 0.9rem;
}

.s5-auth-form .form-control:focus,
.s5-auth-form .form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.s5-auth-switch {
	margin-top: 1.5rem;
	font-size: 0.88rem;
	color: var(--color-muted);
	text-align: center;
}

.s5-auth-switch a {
	font-weight: 700;
}

/* ---------- 뱃지(상태) ---------- */
.s5-badge {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.s5-badge-pending {
	background: #fef3c7;
	color: #92400e;
}

.s5-badge-confirmed {
	background: #dcfce7;
	color: #166534;
}

.s5-badge-rejected {
	background: #fee2e2;
	color: #991b1b;
}

.s5-badge-open {
	background: #dbeafe;
	color: #1e40af;
}

.s5-badge-planning {
	background: #ede9fe;
	color: #5b21b6;
}

.s5-badge-closed {
	background: #f3f4f6;
	color: #4b5563;
}

.s5-badge-cancelled {
	background: #fee2e2;
	color: #991b1b;
}

/* ---------- 대시보드 요약 통계 ---------- */
.s5-stat {
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem;
	color: #fff;
}

.s5-stat .label {
	font-size: 0.8rem;
	opacity: 0.9;
	font-weight: 600;
}

.s5-stat .value {
	font-size: 1.9rem;
	font-weight: 800;
	margin-top: 0.2rem;
}

.s5-stat.bg-blue {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.s5-stat.bg-green {
	background: linear-gradient(135deg, #16a34a, #15803d);
}

.s5-stat.bg-ink {
	background: linear-gradient(135deg, #111827, #374151);
}

.s5-table thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-muted);
	border-bottom-width: 1px;
}

.s5-table td {
	vertical-align: middle;
}

.s5-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--color-muted);
}

/* ---------- Landing Page Styles ---------- */
.lp-hero {
	background: linear-gradient(135deg, #0b1530 0%, #1e3a8a 100%);
	color: #ffffff;
	padding: 6rem 0;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lp-hero::after {
	content: '';
	position: absolute;
	top: -10%;
	right: -5%;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
	pointer-events: none;
}

.lp-hero-content {
	max-width: 650px;
}

.lp-hero-eyebrow {
	display: inline-block;
	background: rgba(37, 99, 235, 0.2);
	color: #60a5fa;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

.lp-hero h1 {
	font-size: 2.85rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.03em;
	margin-bottom: 1.5rem;
}

.lp-hero h1 span {
	background: linear-gradient(120deg, #60a5fa, #34d399);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lp-hero p {
	font-size: 1.08rem;
	line-height: 1.7;
	color: #94a3b8;
	margin-bottom: 2.5rem;
}

.lp-mockup-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 992px) {
	.lp-mockup-wrapper {
		justify-content: flex-end;
	}
}

.lp-mockup-phone {
	width: 280px;
	border: 12px solid #1e293b;
	border-radius: 40px;
	background: #0f172a;
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	aspect-ratio: 9/19;
	display: flex;
	flex-direction: column;
}

.lp-mockup-screen {
	background: #f8fafc;
	flex: 1;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	color: #1e293b;
	font-size: 0.72rem;
}

.lp-mockup-header {
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.7rem;
	font-weight: 800;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #3b82f6;
}

.lp-mockup-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 0.75rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	margin-bottom: 0.75rem;
	border: 1px solid #e2e8f0;
}

.lp-mockup-title {
	font-weight: 700;
	font-size: 0.75rem;
	margin-bottom: 0.4rem;
	color: #0f172a;
}

.lp-mockup-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.35rem;
	border-bottom: 1px dashed #f1f5f9;
	padding-bottom: 0.25rem;
}

.lp-mockup-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.lp-mockup-badge {
	display: inline-block;
	padding: 0.15rem 0.4rem;
	border-radius: 999px;
	font-size: 0.6rem;
	font-weight: 700;
	background: #dcfce7;
	color: #166534;
}

/* Sections */
.lp-section {
	padding: 5.5rem 0;
	background: var(--color-surface);
}

.lp-section-alt {
	padding: 5.5rem 0;
	background: #f8fafc;
}

.lp-section-blue {
	padding: 5.5rem 0;
	background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
	color: #ffffff;
}

.lp-section-title {
	text-align: center;
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 3.5rem;
	color: var(--color-ink);
}

.lp-section-blue .lp-section-title {
	color: #ffffff;
}

.lp-section-subtitle {
	text-align: center;
	color: var(--color-muted);
	max-width: 650px;
	margin: -2.5rem auto 3.5rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

.lp-section-blue .lp-section-subtitle {
	color: rgba(255, 255, 255, 0.8);
}

/* Step Card layout */
.lp-step-card {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2.2rem 1.8rem;
	text-align: center;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

.lp-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(17, 24, 39, 0.08);
}

.lp-step-number {
	display: inline-flex;
	width: 44px;
	height: 44px;
	background: rgba(37, 99, 235, 0.08);
	color: var(--color-primary);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
}

.lp-step-card h3 {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: var(--color-ink);
}

.lp-step-card p {
	color: var(--color-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0;
}

/* Info Rows */
.lp-info-row {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	margin-bottom: 5.5rem;
}

.lp-info-row:last-child {
	margin-bottom: 0;
}

.lp-info-row.reverse {
	flex-direction: row-reverse;
}

@media (max-width: 768px) {

	.lp-info-row,
	.lp-info-row.reverse {
		flex-direction: column;
		gap: 2rem;
	}
}

.lp-info-text {
	flex: 1.1;
}

.lp-info-text h3 {
	font-size: 1.7rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
	line-height: 1.35;
	color: var(--color-ink);
}

.lp-info-text h3 span {
	color: var(--color-primary);
}

.lp-info-text p {
	color: var(--color-muted);
	font-size: 0.98rem;
	line-height: 1.7;
}

.lp-info-media {
	flex: 0.9;
	display: flex;
	justify-content: center;
}

/* Stats */
.lp-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	color: #ffffff;
	padding: 2.5rem;
	border-radius: var(--radius-lg);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
	margin-top: 1rem;
}

@media (max-width: 768px) {
	.lp-stats-row {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
}

.lp-stat-item {
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-stat-item:last-child {
	border-right: none;
}

@media (max-width: 768px) {
	.lp-stat-item {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-bottom: 1.5rem;
	}

	.lp-stat-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

.lp-stat-val {
	font-size: 2.2rem;
	font-weight: 800;
	color: #60a5fa;
	margin-bottom: 0.35rem;
}

.lp-stat-lbl {
	font-size: 0.88rem;
	color: #94a3b8;
	font-weight: 600;
}

/* Reviews Infinite Marquee */
.lp-reviews-marquee-wrapper {
	overflow: hidden;
	width: 100%;
	padding: 1.5rem 0;
	position: relative;
}

.lp-reviews-marquee-wrapper::before,
.lp-reviews-marquee-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;
	z-index: 2;
	pointer-events: none;
}

.lp-reviews-marquee-wrapper::before {
	left: 0;
	background: linear-gradient(to right, #f8fafc 0%, transparent 100%);
}

.lp-reviews-marquee-wrapper::after {
	right: 0;
	background: linear-gradient(to left, #f8fafc 0%, transparent 100%);
}

.lp-reviews-marquee-track {
	display: flex;
	width: max-content;
	animation: marquee 35s linear infinite;
}

.lp-reviews-marquee-track:hover {
	animation-play-state: paused;
}

.lp-reviews-group {
	display: flex;
	gap: 1.5rem;
	padding-right: 1.5rem;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.lp-review-card {
	min-width: 320px;
	max-width: 320px;
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-review-card:hover {
	transform: translateY(-2px);
}

.lp-review-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.lp-review-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #eff6ff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.85rem;
	border: 1.5px solid rgba(37, 99, 235, 0.15);
}

.lp-review-user-info h4 {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-ink);
}

.lp-review-user-info span {
	font-size: 0.72rem;
	color: var(--color-muted);
}

.lp-review-text {
	font-size: 0.84rem;
	line-height: 1.55;
	color: #374151;
	font-style: italic;
	margin-bottom: 0;
}

/* CTA */
.lp-cta {
	background: linear-gradient(135deg, #2563eb 0%, #16a34a 100%);
	color: #ffffff;
	text-align: center;
	padding: 5.5rem 2rem;
	border-radius: var(--radius-lg);
	margin-top: 3.5rem;
	box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}

.lp-cta h2 {
	font-size: 2.1rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

.lp-cta p {
	font-size: 1.02rem;
	opacity: 0.9;
	max-width: 600px;
	margin: 0 auto 2.2rem;
	line-height: 1.6;
}

/* Mobile Table Optimization & Responsive layout */
@media (max-width: 768px) {

	.s5-table,
	.s5-table thead,
	.s5-table tbody,
	.s5-table th,
	.s5-table td,
	.s5-table tr {
		display: block !important;
	}

	.s5-table thead {
		display: none !important;
	}

	.s5-table tr {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: 1.25rem 1rem;
		margin-bottom: 1.25rem;
		background: #ffffff;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
	}

	.s5-table td {
		border: none !important;
		padding: 0.25rem 0 !important;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 0.9rem;
		border-bottom: none !important;
	}

	.s5-table td:last-child {
		grid-column: span 2;
		padding-top: 0.5rem !important;
		align-items: flex-end;
	}

	.s5-table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--color-muted);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		margin-bottom: 0.2rem;
	}

	.s5-table td:last-child::before {
		content: none;
	}
}

/* ---------- User Dashboard (main.php) ---------- */
.db-welcome-banner {
	background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a8a 100%);
	color: #ffffff;
	border-radius: var(--radius-lg);
	padding: 2.2rem;
	margin-bottom: 2rem;
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
}

.db-welcome-banner::after {
	content: '';
	position: absolute;
	right: -5%;
	bottom: -20%;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 80%);
	border-radius: 50%;
	pointer-events: none;
}

.db-grade-badge {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	display: inline-block;
	margin-top: 0.6rem;
	backdrop-filter: blur(4px);
}

.db-score-card {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

.db-score-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.db-score-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.db-score-title {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--color-muted);
}

.db-score-val {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-ink);
}

.db-score-desc {
	font-size: 0.78rem;
	color: var(--color-muted);
	line-height: 1.4;
}

.db-action-card {
	border-radius: var(--radius-lg);
	padding: 1.8rem 1.5rem;
	color: #ffffff;
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

.db-action-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	color: #ffffff;
}

.db-action-card.ledger {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.db-action-card.purchase {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

/* ---------- Offcanvas Menu (Mobile Navigation Drawer) ---------- */
@media (max-width: 767.98px) {
	.offcanvas.offcanvas-end {
		width: 280px;
		border-left: 1px solid var(--color-border);
	}

	.offcanvas-header {
		border-bottom: 1px solid var(--color-border);
		padding: 1.25rem 1.5rem;
	}

	.offcanvas-body {
		padding: 1.5rem;
	}

	.offcanvas-body .navbar-nav {
		gap: 0.75rem;
	}

	.offcanvas-body .nav-link {
		font-size: 1.05rem;
		padding: 0.75rem 1.2rem !important;
		border-radius: var(--radius-md);
		background: #f8fafc;
		display: block;
		width: 100%;
	}

	.offcanvas-body .nav-link.active {
		background: rgba(37, 99, 235, 0.08) !important;
		color: var(--color-primary) !important;
	}
}

/* Sticky Footer */
main.flex-grow-1 {
	flex: 1 0 auto;
}

footer {
	flex-shrink: 0;
}

/* Landing Page Feature Cards Micro-interactions */
.hover-bg-light {
	transition: all 0.2s ease-in-out;
}

.hover-bg-light:hover {
	background-color: #f8fafc;
	transform: translateX(6px);
	cursor: default;
}

/* ---------- 네비게이션 헤더 바 전용 클래스 ---------- */
.s5-avatar-sm {
	width: 34px;
	height: 34px;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.s5-avatar-lg {
	width: 44px;
	height: 44px;
	font-size: 1.15rem;
}

.s5-user-name {
	font-size: 0.85rem;
	line-height: 1.2;
}

.s5-user-grade {
	font-size: 0.72rem;
	line-height: 1.2;
}

.s5-user-grade-lg {
	font-size: 0.75rem;
}

.s5-btn-header {
	border-radius: var(--radius-md);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.4rem 0.9rem;
}

.s5-btn-logout-desktop {
	border: none;
	background: #ef4444;
}

.s5-btn-logout-desktop:hover {
	background: #dc2626;
	color: #fff;
}

.s5-btn-nav {
	height: 36px;
	padding: 0 1.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.s5-btn-register {
	box-shadow: none;
}

.s5-btn-mobile {
	border-radius: var(--radius-md);
	font-size: 0.85rem;
	font-weight: 600;
}

.s5-btn-logout-mobile {
	border: none;
	background: #ef4444;
}

.s5-btn-logout-mobile:hover {
	background: #dc2626;
	color: #fff;
}

/* ---------- 이용약관 및 개인정보처리방침 전용 ---------- */
.s5-terms-container {
	max-width: 900px;
	font-family: var(--font-body);
}

.s5-terms-textarea {
	resize: none;
	font-size: 0.88rem;
	line-height: 1.6;
	border-radius: var(--radius-md);
	background-color: #f8fafc !important;
}

/* ---------- 회원가입/로그인 폼 요소 ---------- */
.s5-input-password-toggle {
	padding-right: 2.75rem;
}

.s5-btn-password-eye {
	z-index: 10;
	width: 36px;
	height: 36px;
	box-shadow: none;
}

/* ---------- 대시보드 (main.php) ---------- */
.s5-db-portal-title {
	font-size: 0.8rem;
	letter-spacing: 0.05em;
}

.s5-db-welcome-text {
	font-size: 0.92rem;
}

.s5-db-action-desc {
	font-size: 0.85rem;
	opacity: 0.9;
}

.s5-db-empty-msg {
	font-size: 0.88rem;
}

.s5-db-list-group {
	font-size: 0.88rem;
}

.s5-db-date-text {
	font-size: 0.75rem;
}

.s5-db-manager-info {
	font-size: 0.9rem;
}

/* ---------- 공통 푸터 (footer.php) ---------- */
.s5-footer-main {
	font-family: var(--font-body);
}

.s5-footer-desc {
	line-height: 1.6;
}

.s5-footer-biz-info {
	font-size: 0.78rem;
	line-height: 1.8;
}

/* ---------- 랜딩 페이지 (index.php) ---------- */
.s5-lp-badge-pending {
	background: #e0f2fe;
	color: #0369a1;
}

.s5-lp-card-mb-0 {
	margin-bottom: 0;
}

.s5-lp-box-showcase {
	max-width: 450px;
}

.s5-lp-title-danger {
	font-size: 1.1rem;
}

.s5-lp-icon-danger-circle {
	width: 32px;
	height: 32px;
}

.s5-lp-danger-card {
	background: #fffcfc;
}

.s5-lp-card-title-sm {
	font-size: 0.95rem;
}

.s5-lp-card-desc-sm {
	font-size: 0.85rem;
	line-height: 1.5;
}

.s5-lp-title-success {
	font-size: 1.1rem;
}

.s5-lp-icon-success-circle {
	width: 32px;
	height: 32px;
}

.s5-lp-pillar-icon-wrap {
	width: 40px;
	height: 40px;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.s5-lp-pillar-desc-sm {
	font-size: 0.82rem;
	margin-top: 0.15rem;
	line-height: 1.4;
}

/* ---------- 브라우저 네이티브 멀티페이지 화면 전환 효과 (View Transitions API - 모바일 전용) ---------- */
@media (max-width: 767.98px) {
	@view-transition {
		navigation: auto;
	}

	/* 슬라이드 애니메이션 키프레임 정의 */
	@keyframes slide-out-to-left {
		from { transform: translateX(0); }
		to { transform: translateX(-30%); }
	}

	@keyframes slide-in-from-right {
		from { transform: translateX(100%); }
		to { transform: translateX(0); }
	}

	/* 이전 화면은 왼쪽으로 살짝 밀려나며 사라짐 (네이티브 스타일) */
	::view-transition-old(root) {
		animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-left;
	}

	/* 새 화면은 오른쪽 끝에서 원래 위치로 슥 미끄러져 들어옴 */
	::view-transition-new(root) {
		animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-right;
	}

	/* 상단 헤더와 하단 탭바는 페이지 이동 시 미끄러지지 않고 제자리에 고정 (교차 페이드만 줌) */
	.s5-nav {
		view-transition-name: s5-main-header;
	}
	#s5NavbarOffcanvas {
		view-transition-name: s5-bottom-tabbar;
	}
}

/* ---------- 모바일 전용 앱 UI 커스텀 (하단 고정 메뉴바 및 상단 프로필 고정) ---------- */
@media (max-width: 767.98px) {

	/* 1. 바디 패딩 확보 (하단바가 있을 때만 여백 제공) */
	body:has(#s5NavbarOffcanvas) {
		padding-bottom: 80px !important;
	}

	/* 2. 햄버거 버튼 삭제 및 헤더 정돈 */
	.navbar-toggler {
		display: none !important;
	}

	.s5-nav .container {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	/* 3. 내 계정 정보를 상단 햄버거 자리(우측)에 고정 배치 */
	.s5-user-chip.d-none.d-md-flex {
		display: flex !important;
		align-items: center !important;
		margin-right: 0 !important;
		padding: 0 !important;
		background: none !important;
		border: none !important;
		border-radius: 0 !important;
	}

	.s5-user-chip.d-none.d-md-flex .s5-avatar-sm {
		width: 28px !important;
		height: 28px !important;
		font-size: 0.95rem !important;
		margin-right: 8px !important;
		background-color: #0d6efd !important;
		color: #ffffff !important;
	}

	.s5-user-chip.d-none.d-md-flex .s5-user-name {
		font-size: 0.85rem !important;
		line-height: 1.1 !important;
		font-weight: 700 !important;
		color: #212529 !important;
	}

	.s5-user-chip.d-none.d-md-flex .s5-user-grade {
		font-size: 0.65rem !important;
		line-height: 1.1 !important;
		color: #6c757d !important;
	}

	/* 4. 기존 오프카바스를 하단 고정 메뉴 탭바로 변환 */
	#s5NavbarOffcanvas {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		height: 65px !important;
		width: 100% !important;
		transform: none !important;
		visibility: visible !important;
		background: rgba(255, 255, 255, 0.94) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
		z-index: 1030 !important;
		overflow: visible !important;
	}

	.offcanvas-header {
		display: none !important;
	}

	.offcanvas-body {
		display: block !important;
		position: relative !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
	}

	/* 5. 메뉴 아이템들 재배치 및 가로 탭 바 구현 */
	.navbar-nav {
		display: block !important;
		position: static !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.navbar-nav>li.nav-item {
		display: block !important;
		position: absolute !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* 배치 순서: 가계부(1) | 공동구매(2) | 홈(3) | 생활협동(4) | 설정(5) */
	/* 1. 가계부 */
	.navbar-nav>li.nav-item:has(a[href="ledger.php"]) {
		left: 0 !important;
		width: 20% !important;
	}

	/* 2. 공동구매 */
	.navbar-nav>li.nav-item:has(a[href="purchases.php"]) {
		left: 20% !important;
		width: 20% !important;
	}

	/* 3. 홈 (대시보드) */
	.navbar-nav>li.nav-item:has(a[href="main.php"]) {
		left: 40% !important;
		width: 20% !important;
		overflow: visible !important;
	}

	/* 4. 생활협동 */
	.navbar-nav>li.nav-item:has(a[href="coop.php"]) {
		left: 60% !important;
		width: 20% !important;
	}

	/* 5. 매니저 메뉴는 하단바에서 숨김 (대시보드에서 접근) */
	.navbar-nav>li.nav-item:has(a[href="manager.php"]) {
		display: none !important;
	}

	/* 6. 설정 탭으로 사용할 '내 정보' 링크 배치 및 설정 */
	.offcanvas-body>div.mt-auto {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 80% !important;
		width: 20% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.offcanvas-body>div.mt-auto>div.d-flex {
		display: none !important;
		/* 프로필 요약 카드 숨김 */
	}

	.offcanvas-body>div.mt-auto .row {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 100% !important;
	}

	.offcanvas-body>div.mt-auto .col-6:last-child {
		display: none !important;
		/* 로그아웃 버튼 숨김 */
	}

	.offcanvas-body>div.mt-auto .col-6:first-child {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* 7. 공통 탭 버튼 텍스트 및 레이아웃 스타일 통일 */
	.navbar-nav a.nav-link,
	.offcanvas-body>div.mt-auto a {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: 100% !important;
		font-size: 0 !important;
		/* 원래 텍스트 지움 */
		color: #8e8e93 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
		transition: color 0.15s ease !important;
	}

	/* 탭 메뉴별 텍스트 및 아이콘(이모지) 바인딩 */
	/* 가계부 */
	.navbar-nav a.nav-link[href="ledger.php"]::before {
		content: '👛' !important;
		font-size: 1.3rem !important;
		margin-bottom: 2px !important;
	}

	.navbar-nav a.nav-link[href="ledger.php"]::after {
		content: '가계부' !important;
		font-size: 0.65rem !important;
		font-weight: 500 !important;
	}

	/* 공동구매 */
	.navbar-nav a.nav-link[href="purchases.php"]::before {
		content: '🛍️' !important;
		font-size: 1.3rem !important;
		margin-bottom: 2px !important;
	}

	.navbar-nav a.nav-link[href="purchases.php"]::after {
		content: '공동구매' !important;
		font-size: 0.65rem !important;
		font-weight: 500 !important;
	}

	/* 생활협동 */
	.navbar-nav a.nav-link[href="coop.php"]::before {
		content: '🌱' !important;
		font-size: 1.3rem !important;
		margin-bottom: 2px !important;
	}

	.navbar-nav a.nav-link[href="coop.php"]::after {
		content: '생활협동' !important;
		font-size: 0.65rem !important;
		font-weight: 500 !important;
	}

	/* 설정 */
	.offcanvas-body>div.mt-auto a::before {
		content: '⚙️' !important;
		font-size: 1.3rem !important;
		margin-bottom: 2px !important;
	}

	.offcanvas-body>div.mt-auto a::after {
		content: '설정' !important;
		font-size: 0.65rem !important;
		font-weight: 500 !important;
	}

	/* 활성화된 탭 스타일 */
	.navbar-nav a.nav-link.active,
	body:has(#form-profile) .offcanvas-body>div.mt-auto a {
		color: #0d6efd !important;
	}

	/* 8. [홈] 버튼 직관성 향상 특별 디자인 (하단 메뉴 높이에 맞춘 동그라미) */
	.navbar-nav a.nav-link[href="main.php"] {
		position: relative !important;
		top: 4px !important;
		width: 56px !important;
		height: 56px !important;
		margin: 0 auto !important;
		background: linear-gradient(135deg, #0d6efd, #0b5ed7) !important;
		border-radius: 50% !important;
		border: none !important;
		box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25) !important;
		color: #ffffff !important;
	}

	.navbar-nav a.nav-link[href="main.php"]::before {
		content: '🏠' !important;
		font-size: 1.4rem !important;
		margin-bottom: -1px !important;
		color: #ffffff !important;
	}

	.navbar-nav a.nav-link[href="main.php"]::after {
		content: '홈' !important;
		color: #ffffff !important;
		font-size: 0.6rem !important;
		font-weight: 700 !important;
		line-height: 1 !important;
	}

	/* 9. 로그인/회원가입 페이지 모바일 슬림 배너 최적화 (불필요한 스크롤 방지) */
	.s5-auth-shell {
		grid-template-columns: 1fr !important;
	}
	.s5-auth-hero {
		padding: 1.5rem 1.25rem !important;
		min-height: auto !important;
		justify-content: center !important;
		align-items: flex-start !important;
	}
	.s5-auth-hero::after {
		width: 200px !important;
		height: 200px !important;
		right: -40px !important;
		bottom: -80px !important;
	}
	.s5-auth-hero .s5-hero-eyebrow {
		margin-bottom: 0.2rem !important;
		font-size: 0.65rem !important;
	}
	.s5-auth-hero h1 {
		font-size: 1.15rem !important;
		margin-bottom: 0 !important;
		line-height: 1.35 !important;
	}
	.s5-auth-hero p {
		display: none !important; /* 모바일 긴 설명 숨김 */
	}
	.s5-hero-stats {
		display: none !important; /* 모바일 스탯 배지 숨김 */
	}
	.s5-auth-form-wrap {
		padding: 1.75rem 1.25rem !important;
	}
	.s5-auth-form {
		padding: 0 !important;
		box-shadow: none !important;
		background: none !important;
	}
}