:root {
		/* PR 사이트 톤앤매너 (다크 & 골드) */
		--bg-body: #0a0b10;       /* 아주 어두운 배경 */
		--bg-sidebar: #111217;    /* 사이드바 배경 */
		--bg-card: #16181e;       /* 카드 배경 */
		--border-color: #2a2d36;  /* 테두리 색상 */
		--accent-color: #fbbf24;  /* 골드 포인트 */
		--text-main: #ffffff;
		--text-sub: #9ca3af;/* 각 대시보드 타이틀 9ca3af */
		--danger: #ef4444;
	}

	* { margin: 0; padding: 0; box-sizing: border-box; }
	body {font-family: 'Noto Sans KR', sans-serif;background-color: var(--bg-body);color: var(--text-main);overflow-x: hidden;}
	a { text-decoration: none; color: inherit; }
	ul { list-style: none; }
	/* [레이아웃] */
	.dashboard-container {display: flex;min-height: 100vh;}
	/* 1. 사이드바 */
	.sidebar {width: 260px;background-color: var(--bg-sidebar);border-right: 1px solid var(--border-color);display: flex;flex-direction: column;position: fixed;height: 100%;z-index: 100;transition: transform 0.3s ease;}
	.logo-area {height: 70px;display: flex;align-items: center;justify-content: space-between;padding-left: 24px;font-size: 20px;font-weight: 800;color: var(--accent-color);border-bottom: 1px solid var(--border-color);}
	.logo-area span { color: #fff; margin-left: 5px; }
	.nav-menu { padding: 20px 0; flex: 1; }
	.nav-item {display: flex;align-items: center;padding: 14px 24px;color: var(--text-sub);font-size: 15px;
		cursor: pointer;
		transition: 0.2s;
		border-left: 3px solid transparent;
	}
	.nav-item i { margin-right: 12px; font-size: 18px; }

	.nav-item:hover, .nav-item.active {
		background-color: rgba(251, 191, 36, 0.1);
		color: var(--text-main);
		border-left-color: var(--accent-color);
	}
	#dimmed_layer {display: none;position: fixed;top: 0; left: 0;width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 2;cursor: pointer;}
	#dimmed_layer.active {display: block;}

	/* 2. 메인 컨텐츠 */
	.main-content {
		flex: 1;
		margin-left: 260px; /* 사이드바 너비만큼 밀기 */
		padding: 30px;
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
	}
	.page-title { font-size: 24px; font-weight: 700; }
	.user-profile { font-size: 14px; color: var(--text-sub); display: flex; align-items: center; gap: 10px;}
	.user-profile i { font-size: 24px; color: var(--text-main); }

	/* 그리드 시스템 */
	.grid-row {
		display: grid;
		gap: 20px;
		margin-bottom: 20px;
	}
	/* 상단 3개, 하단 3개 */
	.cols-3 { grid-template-columns: repeat(2, 1fr); }
	/* 중간 (차트:공지사항 = 2:1) */
	.cols-2-1 { grid-template-columns: 2fr 1fr; }

	/* 카드 스타일 (검정톤) */
	.card {
		background-color: var(--bg-card);
		border: 1px solid var(--border-color);
		border-radius: 12px;
		padding: 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	.card-title { font-size: 15px; font-weight: 700; color: var(--text-main); }
	.card-sub { font-size: 13px; font-weight: 500; color: var(--text-sub); }
	.icon-box {
		width: 40px; height: 40px;
		background: rgba(255,255,255,0.05);
		border-radius: 8px;
		display: flex; align-items: center; justify-content: center;
		color: var(--accent-color);
	}

	/* 데이터 텍스트 */
	.data-value { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
	.data-value span { font-size: 14px; font-weight: 400; color: var(--text-sub); margin-left: 4px; }
	.data-sub { font-size: 13px; color: var(--text-sub); display: flex; justify-content: space-between; margin-top: 10px;}

	.accent-text { color: var(--accent-color); }

	/* 차트 영역 (CSS로 간단 구현) */
	.chart-placeholder {
		height: 200px;
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		padding-top: 20px;
		border-bottom: 1px solid var(--border-color);
	}
	.bar {
		width: 8%;
		background: linear-gradient(to top, var(--accent-color), transparent);
		opacity: 0.7;
		border-radius: 4px 4px 0 0;
		position: relative;
	}
	.bar span {
		position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);
		font-size: 11px; color: var(--text-sub);
	}

	/* 리스트 스타일 (공지사항 등) */
	.list-group { margin-top: 10px; }
	.list-item {
		display: flex; justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid var(--border-color);
		font-size: 14px;
	}
	.list-item:last-child { border-bottom: none; }
	.list-item .date { color: var(--text-sub); font-size: 12px; }

	/* 버튼 */
	.btn-action {
		width: 100%;
		padding: 12px;
		background-color: var(--accent-color);
		color: #000;
		border: none;
		border-radius: 6px;
		font-weight: 700;
		cursor: pointer;
		margin-top: 15px;
	}
	.btn-action:hover { opacity: 0.9; }

	/* 모바일 햄버거 버튼 */
	.mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: #fff; }

	/* [반응형] */
	@media (max-width: 1024px) {/* 레이아웃 구조 변경 (사이드바 숨김, 그리드 1단) */
		.grid-row { grid-template-columns: 1fr !important; } /* 강제 1단 */
		.sidebar { transform: translateX(-100%); }
		.sidebar.active { transform: translateX(0); }
		.main-content { margin-left: 0; padding: 20px; /* 패딩 약간 축소 */ }
		.mobile-menu-btn { display: block; margin-right: 15px; }
		.page-header { justify-content: flex-start; }
	}
	/* 2. 모바일 (768px 이하) - 1024px 스타일을 상속받으면서 추가 덮어쓰기 */
	@media (max-width: 768px) {/* 전체 컨테이너 여백 최소화 */
		.inner, .content_wrap, .mypage-wrap, .contents,.main-content { /* main-content 추가 */
			width: 100% !important;padding-left: 10px !important;padding-right: 10px !important;box-sizing: border-box;
		}
		/* 상품 리스트 간격 조정 */
		.prd_list {margin-left: -5px; margin-right: -5px;}
		.prd_list li {padding: 0 5px; margin-bottom: 15px;}
		.join-form-wrap,.cart-container,.search-wrap {padding: 20px 10px !important;}/* 내부 컨텐츠 패딩 조정 */
		.tbl-comm, .mileage-summary table {width: 100%;font-size: 12px;}/* 테이블 및 폼 요소 최적화 */
		.tbl-comm th, .tbl-comm td {padding: 10px 5px;}
		.btn-group, .btn-group-lg {width: 100%;padding: 0 10px;box-sizing: border-box;flex-direction: column; gap: 10px;/* 버튼 세로 배치 (선택 사항) */}/* 버튼 그룹 꽉 채우기 */
		.page-title { font-size: 20px; }/* 폰트 크기 추가 조정 (필요 시) */
		.data-value { font-size: 24px; }
	}