/**
 * ==========================================================================
 * EXTRA UI CSS - Custom UI Components
 * Bootstrap 기반 커스텀 스타일
 * ==========================================================================
 *
 * TABLE OF CONTENTS:
 * 
 * 1. BASE LAYOUT
 *    1.1 Page Wrapper & Background
 *    1.2 Page Headers (Dark, Success, Danger, Purple)
 * 
 * 2. CARD COMPONENTS
 *    2.1 Card Section
 *    2.2 Section Title with Icon
 *    2.3 Order Summary Card
 * 
 * 3. FORM ELEMENTS
 *    3.1 Form Inputs
 *    3.2 Info Display (Read-only)
 *    3.3 File Upload Area
 * 
 * 4. BUTTONS
 *    4.1 Gradient Buttons (Dark, Success, Danger)
 *    4.2 Outline Buttons
 * 
 * 5. DATA DISPLAY
 *    5.1 Tables
 *    5.2 Status Badges
 *    5.3 Category Badges
 *    5.4 Pagination
 * 
 * 6. SHOPPING & E-COMMERCE
 *    6.1 Product Thumbnail
 *    6.2 Quantity Control
 *    6.3 Payment Option
 *    6.4 Step Indicator
 * 
 * 7. CONTENT ELEMENTS
 *    7.1 Empty State
 *    7.2 Comment Section
 * 
 * 8. AUTHENTICATION PAGES
 *    8.1 Auth Wrapper & Card
 *    8.2 Auth Header
 *    8.3 Auth Body & Footer
 *    8.4 Auth Input with Icon
 *    8.5 Auth Button
 *    8.6 Auth Links
 *    8.7 Auth Section Title
 *    8.8 Auth Form Section
 *    8.9 Auth Agreement Section
 *    8.10 Auth Info Box
 *    8.11 Auth Email Badge
 *    8.12 Auth Address Button
 *    8.13 Auth Utility Classes
 * 
 * 9. RESPONSIVE
 *    9.1 Tablet (max-width: 991px)
 *    9.2 Mobile (max-width: 767px)
 *    9.3 Small Mobile (max-width: 576px)
 * 
 * ==========================================================================
 */


/* ==========================================================================
   1. BASE LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 Page Wrapper & Background
   -------------------------------------------------------------------------- */
.page-wrapper-light {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: calc(100vh - 200px);
	padding: 30px 0 50px;
}

/* --------------------------------------------------------------------------
   1.2 Page Headers
   -------------------------------------------------------------------------- */

/* Dark Header (Default) */
.page-header-dark {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	padding: 40px 0;
	margin-bottom: 30px;
	border-radius: 16px;
	text-align: center;
}

.page-header-dark h1 {
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	color: #fff;
}

.page-header-dark p {
	opacity: 0.8;
	margin: 10px 0 0;
	color: #fff;
}

.page-header-dark i {
	color: #fff;
}

.page-header-dark .header-badge {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	color: #fff;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 12px;
}

/* Header Color Variants */
.page-header-success {
	background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.page-header-danger {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.page-header-purple {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


/* ==========================================================================
   2. CARD COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Card Section
   -------------------------------------------------------------------------- */
.card-section {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 25px;
	overflow: hidden;
}

.card-section-header {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	padding: 18px 25px;
	display: flex;
	align-items: center;
}

.card-section-header i {
	font-size: 18px;
	margin-right: 12px;
	color: #fff;
}

.card-section-header h3,
.card-section-header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.card-section-body {
	padding: 25px;
}

/* --------------------------------------------------------------------------
   2.2 Section Title with Icon
   -------------------------------------------------------------------------- */
.section-title-icon {
	font-size: 18px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #e9ecef;
	display: flex;
	align-items: center;
}

.section-title-icon i {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   2.3 Order Summary Card
   -------------------------------------------------------------------------- */
.order-summary-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	position: sticky;
	top: 100px;
}

.order-summary-header {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	padding: 20px;
	border-radius: 16px 16px 0 0;
}

.order-summary-header h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.order-summary-body {
	padding: 25px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #e9ecef;
}

.summary-row:last-child {
	border-bottom: none;
}

.summary-row.total {
	padding-top: 20px;
	margin-top: 10px;
	border-top: 2px solid #2c3e50;
	border-bottom: none;
}

.summary-row.total .summary-value {
	font-size: 24px;
	color: #2c3e50;
}

.summary-label {
	font-size: 14px;
	color: #6c757d;
}

.summary-value {
	font-size: 16px;
	font-weight: 700;
	color: #2c3e50;
}

.summary-value.discount {
	color: #dc3545;
}


/* ==========================================================================
   3. FORM ELEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Form Inputs
   -------------------------------------------------------------------------- */
.form-input-custom {
	border: 2px solid #e9ecef;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	transition: all 0.3s ease;
}

.form-input-custom:focus {
	border-color: #2c3e50;
	box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1);
	outline: none;
}

.form-input-custom:disabled,
.form-input-custom[readonly] {
	background: #f8f9fa;
	color: #495057;
}

/* Input Group - Input과 버튼이 붙어있는 형태 (Porto 스타일) */
.input-group .form-input-custom {
	height: 50px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group .form-input-custom:focus {
	z-index: 3;
}

.input-group .form-input-custom + .btn,
.input-group .form-input-custom + input[type="submit"] {
	height: 50px;
	border-radius: 0 10px 10px 0;
	padding: 0 20px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	border: 2px solid #e9ecef;
	border-left: none;
	background: #fff;
	color: #495057;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.input-group .form-input-custom + .btn:hover,
.input-group .form-input-custom + input[type="submit"]:hover {
	background: #2c3e50;
	border-color: #2c3e50;
	color: #fff;
}

.input-group .form-input-custom + .btn:focus,
.input-group .form-input-custom + input[type="submit"]:focus {
	box-shadow: none;
	outline: none;
	z-index: 3;
}

.input-group .form-input-custom + .btn i {
	font-size: 15px;
}

/* Input Group - Gradient 버튼 (검색 등) */
.input-group .form-input-custom + .btn-gradient-dark {
	border: none;
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
}

.input-group .form-input-custom + .btn-gradient-dark:hover {
	background: linear-gradient(135deg, #1a252f 0%, #0d1318 100%);
}

.form-label-custom {
	font-size: 14px;
	font-weight: 600;
	color: #495057;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   3.2 Info Display (Read-only fields)
   -------------------------------------------------------------------------- */
.info-display {
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	color: #2c3e50;
}

/* --------------------------------------------------------------------------
   3.3 File Upload Area
   -------------------------------------------------------------------------- */
.file-upload-area {
	border: 2px dashed #e9ecef;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}

.file-upload-area:hover {
	border-color: #2c3e50;
	background: #f8f9fa;
}

.file-upload-area input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.file-upload-area i {
	font-size: 36px;
	color: #adb5bd;
	margin-bottom: 15px;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 Gradient Buttons
   -------------------------------------------------------------------------- */

/* Dark Gradient */
.btn-gradient-dark {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	border: none;
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	transition: all 0.3s ease;
}

.btn-gradient-dark:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(44, 62, 80, 0.3);
	color: #fff;
}

/* Success Gradient */
.btn-gradient-success {
	background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
	border: none;
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	transition: all 0.3s ease;
}

.btn-gradient-success:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3);
	color: #fff;
}

/* Danger Gradient */
.btn-gradient-danger {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	border: none;
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	transition: all 0.3s ease;
}

.btn-gradient-danger:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
	color: #fff;
}

/* --------------------------------------------------------------------------
   4.2 Outline Buttons
   -------------------------------------------------------------------------- */
.btn-outline-custom {
	background: #fff;
	border: 2px solid #e9ecef;
	border-radius: 10px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	color: #495057;
	transition: all 0.3s ease;
	text-decoration: none;
}

.btn-outline-custom:hover {
	border-color: #2c3e50;
	color: #2c3e50;
}


/* ==========================================================================
   5. DATA DISPLAY
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Tables
   -------------------------------------------------------------------------- */
.table-custom thead th {
	background: #f8f9fa;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #495057;
	text-transform: uppercase;
	border: none;
}

.table-custom tbody tr {
	transition: all 0.2s ease;
}

.table-custom tbody tr:hover {
	background: #f8f9fa;
}

.table-custom tbody td {
	padding: 16px 12px;
	vertical-align: middle;
	border-bottom: 1px solid #e9ecef;
}

/* --------------------------------------------------------------------------
   5.2 Status Badges
   -------------------------------------------------------------------------- */
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}

.status-waiting { background: #fff3cd; color: #856404; }
.status-received { background: #cce5ff; color: #004085; }
.status-preparing { background: #d4edda; color: #155724; }
.status-shipping { background: #d1ecf1; color: #0c5460; }
.status-completed { background: #c3e6cb; color: #155724; }
.status-cancelled { background: #f8d7da; color: #721c24; }

/* --------------------------------------------------------------------------
   5.3 Category Badges
   -------------------------------------------------------------------------- */
.category-badge-1 { background: #e3f2fd; color: #1565c0; }

/* --------------------------------------------------------------------------
   5.4 Pagination
   -------------------------------------------------------------------------- */
.pagination-custom .page-link {
	border: 2px solid #e9ecef;
	color: #2c3e50;
	padding: 10px 16px;
	margin: 0 3px;
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.pagination-custom .page-link:hover {
	background: #2c3e50;
	border-color: #2c3e50;
	color: #fff;
}

.pagination-custom .page-item.active .page-link {
	background: #2c3e50;
	border-color: #2c3e50;
}

.pagination-custom .page-item.disabled .page-link {
	color: #adb5bd;
}


/* ==========================================================================
   6. SHOPPING & E-COMMERCE
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Product Thumbnail
   -------------------------------------------------------------------------- */
.product-thumb {
	width: 70px;
	height: 70px;
	border-radius: 10px;
	overflow: hidden;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-thumb-lg {
	width: 80px;
	height: 80px;
}

/* --------------------------------------------------------------------------
   6.2 Quantity Control
   -------------------------------------------------------------------------- */
.quantity-control {
	display: inline-flex;
	align-items: center;
	border: 2px solid #e9ecef;
	border-radius: 8px;
	overflow: hidden;
}

.quantity-control button,
.quantity-control input[type="button"] {
	width: 36px;
	height: 36px;
	border: none;
	background: #f8f9fa;
	font-size: 16px;
	font-weight: 600;
	color: #495057;
	cursor: pointer;
	transition: all 0.2s ease;
}

.quantity-control button:hover,
.quantity-control input[type="button"]:hover {
	background: #2c3e50;
	color: #fff;
}

.quantity-control input[type="number"] {
	width: 50px;
	height: 36px;
	border: none;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   6.3 Payment Option
   -------------------------------------------------------------------------- */
.payment-option {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	border: 2px solid #e9ecef;
	border-radius: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.payment-option:hover {
	border-color: #2c3e50;
}

.payment-option input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-right: 12px;
}

.payment-option label {
	font-weight: 600;
	color: #495057;
	margin: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   6.4 Step Indicator
   -------------------------------------------------------------------------- */
.step-indicator {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.step-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 25px;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
}

.step-item.active {
	background: rgba(255,255,255,0.2);
	color: #fff;
}

.step-item.completed {
	color: rgba(255,255,255,0.7);
}

.step-item.inactive {
	color: rgba(255,255,255,0.5);
}

.step-item i {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 12px;
}

.step-item.active i {
	background: #fff;
	color: #2c3e50;
}

.step-item.completed i {
	background: rgba(255,255,255,0.3);
}

.step-item.inactive i {
	background: rgba(255,255,255,0.2);
}


/* ==========================================================================
   7. CONTENT ELEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Empty State
   -------------------------------------------------------------------------- */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #6c757d;
}

.empty-state i {
	font-size: 48px;
	margin-bottom: 15px;
	opacity: 0.5;
}

.empty-state img {
	max-width: 300px;
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   7.2 Comment Section
   -------------------------------------------------------------------------- */
.comment-item {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	border-left: 4px solid #2c3e50;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.comment-author {
	font-weight: 600;
	color: #2c3e50;
}

.comment-date {
	font-size: 13px;
	color: #6c757d;
}

.comment-content {
	color: #495057;
	line-height: 1.6;
	white-space: pre-wrap;
}


/* ==========================================================================
   8. AUTHENTICATION PAGES
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Auth Wrapper & Card
   -------------------------------------------------------------------------- */
.auth-wrapper {
	min-height: calc(100vh - 300px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

.auth-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	overflow: hidden;
	max-width: 450px;
	width: 100%;
}

.auth-card-wide {
	max-width: 700px;
}

.auth-card-medium {
	max-width: 500px;
}

/* --------------------------------------------------------------------------
   8.2 Auth Header
   -------------------------------------------------------------------------- */
.auth-header {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	padding: 40px 30px;
	text-align: center;
}

.auth-header-purple {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.auth-header-green {
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.auth-header .auth-icon {
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 32px;
}

.auth-header .auth-icon-lg {
	width: 100px;
	height: 100px;
	font-size: 45px;
	margin-bottom: 25px;
}

.auth-header .auth-icon-sm {
	width: 70px;
	height: 70px;
	font-size: 28px;
	margin-bottom: 15px;
}

.auth-header h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

.auth-header p {
	margin: 10px 0 0;
	opacity: 0.8;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   8.3 Auth Body & Footer
   -------------------------------------------------------------------------- */
.auth-body {
	padding: 40px 30px;
}

.auth-footer {
	text-align: center;
	padding: 25px 30px;
	background: #f8f9fa;
	border-top: 1px solid #e9ecef;
}

.auth-footer p {
	margin: 0;
	color: #6c757d;
	font-size: 14px;
}

.auth-footer a {
	color: #2c3e50;
	font-weight: 600;
	text-decoration: none;
}

.auth-footer a:hover {
	text-decoration: underline;
}

.auth-footer-purple a {
	color: #667eea;
}

.auth-footer-green a {
	color: #11998e;
}

/* --------------------------------------------------------------------------
   8.4 Auth Input with Icon
   -------------------------------------------------------------------------- */
.input-icon-wrapper {
	position: relative;
	margin-bottom: 20px;
}

.input-icon-wrapper .form-control {
	height: 56px;
	padding: 16px 16px 16px 50px;
	border: 2px solid #e9ecef;
	border-radius: 12px;
	font-size: 16px;
	transition: all 0.3s ease;
}

.input-icon-wrapper .form-control:focus {
	border-color: #2c3e50;
	box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1);
}

.input-icon-wrapper .input-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #adb5bd;
	font-size: 18px;
	z-index: 5;
	transition: color 0.3s ease;
}

.input-icon-wrapper .form-control:focus + .input-icon,
.input-icon-wrapper .form-control:not(:placeholder-shown) + .input-icon {
	color: #2c3e50;
}

/* Input Size Variants */
.input-icon-wrapper-sm {
	margin-bottom: 16px;
}

.input-icon-wrapper-sm .form-control {
	height: 52px;
	padding: 14px 14px 14px 46px;
	border-radius: 10px;
	font-size: 15px;
}

.input-icon-wrapper-sm .input-icon {
	left: 16px;
	font-size: 16px;
}

/* Input Color Variants */
.input-icon-wrapper-purple .form-control:focus {
	border-color: #667eea;
	box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.input-icon-wrapper-purple .form-control:focus + .input-icon,
.input-icon-wrapper-purple .form-control:not(:placeholder-shown) + .input-icon {
	color: #667eea;
}

.input-icon-wrapper-green .form-control:focus {
	border-color: #11998e;
	box-shadow: 0 0 0 4px rgba(17, 153, 142, 0.1);
}

.input-icon-wrapper-green .form-control:focus + .input-icon,
.input-icon-wrapper-green .form-control:not(:placeholder-shown) + .input-icon {
	color: #11998e;
}

/* --------------------------------------------------------------------------
   8.5 Auth Button
   -------------------------------------------------------------------------- */
.btn-auth {
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	border: none;
	border-radius: 12px;
	padding: 16px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	width: 100%;
	transition: all 0.3s ease;
	text-decoration: none;
	display: block;
	text-align: center;
}

.btn-auth:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(44, 62, 80, 0.3);
	color: #fff;
}

.btn-auth:active {
	transform: translateY(0);
}

.btn-auth:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.btn-auth-purple {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-auth-purple:hover {
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
	color: #fff;
}

.btn-auth-green {
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.btn-auth-green:hover {
	box-shadow: 0 8px 25px rgba(17, 153, 142, 0.4);
	color: #fff;
}

/* --------------------------------------------------------------------------
   8.6 Auth Links
   -------------------------------------------------------------------------- */
.auth-links {
	display: flex;
	justify-content: space-between;
	margin-bottom: 25px;
}

.auth-links a {
	color: #6c757d;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

.auth-links a:hover {
	color: #2c3e50;
}

.auth-links-purple a:hover {
	color: #667eea;
}

/* --------------------------------------------------------------------------
   8.7 Auth Section Title
   -------------------------------------------------------------------------- */
.auth-section-title {
	font-size: 16px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e9ecef;
	display: flex;
	align-items: center;
}

.auth-section-title i {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
	color: #fff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   8.8 Auth Form Section
   -------------------------------------------------------------------------- */
.auth-form-section {
	margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   8.9 Auth Agreement Section
   -------------------------------------------------------------------------- */
.auth-agreement-section {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 20px;
	margin-top: 10px;
}

.auth-agreement-title {
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 15px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e9ecef;
}

.auth-all-agree {
	background: #fff;
	border-radius: 8px;
	padding: 12px 15px;
	margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   8.10 Auth Info Box
   -------------------------------------------------------------------------- */
.auth-info-box {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 25px;
	font-size: 14px;
	color: #6c757d;
	line-height: 1.6;
}

.auth-info-box i {
	margin-right: 8px;
}

.auth-info-box-purple i {
	color: #667eea;
}

/* --------------------------------------------------------------------------
   8.11 Auth Email Badge
   -------------------------------------------------------------------------- */
.auth-email-badge {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	border: 1px solid #dee2e6;
}

.auth-email-badge i {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	font-size: 18px;
}

.auth-email-badge .email-info {
	flex: 1;
}

.auth-email-badge .email-label {
	font-size: 12px;
	color: #6c757d;
	margin-bottom: 2px;
}

.auth-email-badge .email-value {
	font-size: 15px;
	font-weight: 600;
	color: #2c3e50;
	word-break: break-all;
}

/* --------------------------------------------------------------------------
   8.12 Auth Address Button
   -------------------------------------------------------------------------- */
.btn-auth-address {
	background: #fff;
	border: 2px solid #2c3e50;
	border-radius: 10px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	color: #2c3e50;
	width: 100%;
	transition: all 0.3s ease;
}

.btn-auth-address:hover {
	background: #2c3e50;
	color: #fff;
}

/* --------------------------------------------------------------------------
   8.13 Auth Utility Classes
   -------------------------------------------------------------------------- */
.auth-hide {
	display: none !important;
}

.auth-show {
	display: block !important;
}


/* ==========================================================================
   9. HOME BANNER BUTTONS
   ========================================================================== */

/* 홈 배너 내 버튼 (자세히 보기, 지금 구매하기) */
.home-banner .banner-content .btn,
.banner-section.home-banner .banner-content .btn {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.home-banner .banner-content .btn:hover,
.banner-section.home-banner .banner-content .btn:hover {
	background: #2c3e50;
	border-color: #2c3e50;
	color: #fff;
}

.home-banner .banner-content .btn i,
.banner-section.home-banner .banner-content .btn i {
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.home-banner .banner-content .btn:hover i,
.banner-section.home-banner .banner-content .btn:hover i {
	transform: translateX(4px);
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1 Tablet (max-width: 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.order-summary-card {
		position: static;
		margin-top: 25px;
	}
}

/* --------------------------------------------------------------------------
   9.2 Mobile (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.page-header-dark {
		padding: 30px 15px;
		border-radius: 0;
		margin: 0 -15px 20px;
	}
	
	.card-section-body {
		padding: 20px 15px;
	}
	
	.step-indicator {
		flex-wrap: wrap;
	}
	
	.step-item {
		padding: 8px 14px;
		font-size: 12px;
	}
	
	/* Mobile Card Table */
	.table-mobile-card thead {
		display: none;
	}
	
	.table-mobile-card tbody tr {
		display: block;
		padding: 15px;
		margin-bottom: 10px;
		border: 1px solid #e9ecef;
		border-radius: 12px;
		background: #fff;
	}
	
	.table-mobile-card tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.table-mobile-card tbody td:before {
		content: attr(data-label);
		font-weight: 600;
		color: #6c757d;
		font-size: 12px;
	}
	
	.table-mobile-card tbody td:last-child {
		border-bottom: none;
	}
}

/* --------------------------------------------------------------------------
   9.3 Small Mobile (max-width: 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
	.auth-wrapper {
		padding: 20px 15px;
	}
	
	.auth-header {
		padding: 30px 20px;
	}
	
	.auth-body {
		padding: 30px 20px;
	}
	
	.auth-footer {
		padding: 20px;
	}
}