/* 🧱 ProductStoryChain Component Styles
 * UI DesignGuide.md 기반 공통 컴포넌트 스타일 시스템
 * 재사용 가능한 컴포넌트들의 일관된 디자인을 제공합니다.
 */

/* 🌐 전역 폰트 시스템 통일 (모던 다국어 최적화) */
body, html {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-display: swap; /* 폰트 로딩 최적화 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em; /* 모던한 타이트 레터 스페이싱 */
}

/* 모든 텍스트 요소에 Inter 폰트 강제 적용 */
p, span, div, a, button, input, textarea, select, label {
    font-family: var(--font-family-primary) !important;
}

/* Bootstrap 및 MudBlazor 컴포넌트 폰트 오버라이드 */
.btn, .form-control, .dropdown-item, .nav-link, .navbar-brand {
    font-family: var(--font-family-primary) !important;
}

/* 다국어 텍스트 최적화 */
:lang(en), :lang(es) {
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
    letter-spacing: -0.01em;
}

:lang(ko) {
    letter-spacing: -0.005em;
}

/* 🏠 Home Page Styles - CSS Isolation 대신 전역 스타일로 적용 */
.hero-section { 
    position: relative; 
    padding: 0; 
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

.hero-section .container { 
    padding-top: 6rem; 
    padding-bottom: 6rem; 
}

.gradient-text {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--font-family-primary);
}

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

.glow-btn {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,195,154,0.35);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}

.glow-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.glow-btn:hover { 
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0,195,154,0.5);
    color: #ffffff !important; /* 호버 시에도 흰색 텍스트 유지 */
    background: #00A085 !important; /* 더 진한 민트색으로 대비 강화 */
}

/* 아이콘과 텍스트 모두에 색상 적용 */
.glow-btn:hover i,
.glow-btn:hover span {
    color: #ffffff !important;
}

.glow-btn:hover::before {
    left: 100%;
}

.glow-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

/* 🎭 Ghost 버튼 애니메이션 */
.ghost-btn { 
    background: transparent; 
    border: 2px solid var(--color-text-secondary); 
    color: var(--color-text-secondary); 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}

.ghost-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-text-secondary);
    transition: left 0.4s ease;
    z-index: -1;
}

.ghost-btn:hover { 
    color: #fff;
    transform: translateY(-2px);
    border-color: var(--color-text-secondary);
}

.ghost-btn:hover::before {
    left: 0;
}

.glass-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.70));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    animation: float 6s ease-in-out infinite;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.8s ease;
    opacity: 0;
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 195, 154, 0.15);
    border-color: rgba(0, 195, 154, 0.3);
}

.glass-card:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

/* 🌊 부유 애니메이션 */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ✨ 반짝임 애니메이션 */
@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.kpi-row .kpi-number {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.kpi-row .kpi-label { 
    color: var(--color-text-secondary); 
    font-size: var(--font-size-sm); 
}

.section-title { 
    color: var(--color-primary); 
    font-weight: var(--font-weight-bold); 
    font-size: var(--font-size-2xl); 
}

.section-subtitle { 
    color: var(--color-text-secondary); 
    font-size: var(--font-size-lg); 
}

.category-card {
    display: block; 
    text-decoration: none; 
    background: #fff; 
    border: 1px solid var(--color-border);
    border-radius: 16px; 
    padding: 1.25rem; 
    text-align: center; 
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.category-card:hover { 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-md); 
}

.category-card .category-icon { 
    font-size: 2rem; 
    color: var(--color-accent); 
    margin-bottom: .5rem; 
}

.category-card .category-title { 
    color: var(--color-text-primary); 
    font-weight: var(--font-weight-semibold); 
}

.category-card .category-cta { 
    color: var(--color-text-secondary); 
    font-size: var(--font-size-sm); 
}

.benefit-card { 
    background: var(--color-surface);
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    height: 100%;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 195, 154, 0.1);
    border-color: var(--color-accent);
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.benefit-card:hover::before {
    opacity: 1;
}

.benefit-card .benefit-icon { 
    font-size: 2.5rem !important;
    color: var(--color-accent) !important; 
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block !important;
    width: 100%;
    text-align: center;
    min-height: 2.5rem;
    line-height: 2.5rem;
}

.benefit-card .benefit-icon i {
    font-size: inherit !important;
    color: inherit !important;
    display: inline-block !important;
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: -.125em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Bootstrap Icons 폰트 강제 로딩 */
@font-face {
    font-family: "bootstrap-icons";
    src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff") format("woff");
    font-display: swap;
}

/* 아이콘별 유니코드 폴백 */
.bi-shield-check::before {
    content: "\f56e" !important;
}

.bi-leaf::before {
    content: "\f4e8" !important;
}

.bi-gift::before {
    content: "\f4b4" !important;
}

.bi-people::before {
    content: "\f5d2" !important;
}

/* 이모지 폴백 스타일 */
.benefit-card .benefit-icon .icon-fallback {
    display: none;
    font-size: 2.5rem;
    line-height: 1;
}

/* Bootstrap Icons가 로드되지 않았을 때 이모지 표시 */
.benefit-card .benefit-icon i:empty + .icon-fallback,
.benefit-card .benefit-icon i:not([class*="bi-"]) + .icon-fallback {
    display: inline-block;
}

.benefit-card .benefit-icon i:empty,
.benefit-card .benefit-icon i:not([class*="bi-"]) {
    display: none;
}

/* 강제 이모지 표시 (Bootstrap Icons 로딩 실패시) */
@supports not (font-family: "bootstrap-icons") {
    .benefit-card .benefit-icon i {
        display: none !important;
    }
    .benefit-card .benefit-icon .icon-fallback {
        display: inline-block !important;
    }
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.1);
    color: var(--color-primary);
}

.benefit-title { 
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary); 
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
    line-height: var(--line-height-tight);
}

.benefit-desc { 
    color: var(--color-text-secondary); 
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* 🎨 섹션 배경 스타일 */
.section-surface {
    background-color: var(--color-surface);
}

.section-alt {
    background-color: var(--color-background);
}

/* 🎴 프로모션 카드 스타일 */
.promo-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: white;
    min-height: 300px;
    position: relative;
}

.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: white;
}

.promo-card .card-body {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

.promo-card h3 {
    color: white;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
}

.promo-card p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

.promo-card .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

.promo-card .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* 🏷️ 카테고리 카드 스타일 */
.category-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 195, 154, 0.15);
    border-color: var(--color-accent);
    text-decoration: none;
    color: inherit;
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(5deg);
    color: var(--color-primary);
}

.category-card .category-icon {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.category-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* 🎯 섹션 제목 스타일 */
.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

/* 🏆 리워드 배지 스타일 */
.reward-badge {
    background: linear-gradient(135deg, var(--color-success) 0%, #4CAF50 100%);
    color: white;
    font-weight: var(--font-weight-semibold);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
}

/* 🎨 텍스트 유틸리티 클래스 */
.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* 🎯 아이콘 크기 유틸리티 */
.fs-1 {
    font-size: 2.5rem !important;
}

/* 🌐 Footer 언어 드롭다운 스타일 - 최고 우선순위 */
.footer-bottom .dropdown .footer-language-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.01) !important; /* 거의 투명한 테두리 */
    color: #000000 !important;
    font-size: 13px !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.footer-bottom .dropdown .footer-language-btn:hover,
.footer-bottom .dropdown .footer-language-btn:focus,
.footer-bottom .dropdown .footer-language-btn:active,
.footer-bottom .dropdown .footer-language-btn.show {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.02) !important; /* 호버시에도 매우 연하게 */
    color: #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}

.footer-bottom .dropdown .footer-dropdown-menu {
    background: #ffffff !important; /* 완전 불투명 흰색 배경 */
    backdrop-filter: none !important; /* 블러 효과 완전 제거 */
    border: 1px solid rgba(0, 0, 0, 0.01) !important; /* 거의 보이지 않는 테두리 */
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* 그림자 강화로 구분감 향상 */
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    min-width: 160px !important;
}

.footer-bottom .dropdown .footer-dropdown-menu .dropdown-item {
    color: #000000 !important; /* 텍스트 색상 강제 적용 */
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    opacity: 1 !important; /* 투명도 강제 제거 */
    text-decoration: none !important;
}

.footer-bottom .dropdown .footer-dropdown-menu .dropdown-item:hover,
.footer-bottom .dropdown .footer-dropdown-menu .dropdown-item:focus,
.footer-bottom .dropdown .footer-dropdown-menu .dropdown-item:active {
    background: rgba(20, 40, 160, 0.08) !important;
    color: #1428A0 !important;
    text-decoration: none !important;
}

.footer-dropdown-menu .dropdown-item:active {
    background: rgba(20, 40, 160, 0.15);
}

/* 기존 중복 스타일 제거됨 - 위의 더 구체적인 선택자로 대체 */

/* 🎨 Google One UI 스타일 - 전역 적용 (Home 페이지 제외) */
.google-one-layout {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 0;
}

/* Home 페이지는 기존 스타일 유지 */
.home-page .google-one-layout {
    background: none;
    min-height: auto;
}

/* 페이지 헤더 - 범용 */
.page-header {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    padding: 3rem 0 2rem;
    position: relative;
    overflow: hidden;
}

/* 프로필 헤더 (하위 호환성) */
.profile-header {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    padding: 3rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.page-header::before,
.profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>') repeat-x;
    opacity: 0.3;
}

/* 페이지 헤더 콘텐츠 */
.page-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.profile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-avatar {
    position: relative;
    width: 120px;
    height: 120px;
}

.avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.avatar-edit-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    color: #4285f4;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.avatar-edit-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.profile-basic-info {
    flex: 1;
}

.profile-name {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-email {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0 0 1rem 0;
}

.profile-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
}

.badge-active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.badge-eco {
    background: rgba(52, 168, 83, 0.2);
    color: white;
}

.profile-stats-quick {
    display: flex;
    gap: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

/* 메인 콘텐츠 */
.profile-content {
    padding: 2rem 0;
    margin-top: -1rem;
    position: relative;
    z-index: 2;
}

/* Google 스타일 카드 */
.google-card {
    background: white;
    border: 1px solid rgba(218, 220, 224, 0.2); /* 매우 연한 border 추가 */
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* 더 부드러운 그림자 */
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.google-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 0;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #202124;
}

.card-title i {
    font-size: 1.5rem;
    color: #4285f4;
}

.btn-edit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(218, 220, 224, 0.4); /* 연한 border */
    border-radius: 20px;
    background: white;
    color: #4285f4;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit:hover {
    background: #f8f9fa;
    border-color: rgba(66, 133, 244, 0.3); /* 호버시에도 연하게 */
}

.card-content {
    padding: 1.5rem;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(218, 220, 224, 0.4);
}

.card-actions.justify-content-between {
    justify-content: space-between;
}

.card-actions.justify-content-end {
    justify-content: flex-end;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f3f4;
    background: #fafbfc;
}

/* 폼 스타일 - Google One UI */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(218, 220, 224, 0.4);
}

.form-group:last-child {
    border-bottom: none;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #5f6368;
    margin: 0;
}

/* 🎨 Form 요소들 - 통일된 스타일 */
.form-input, 
input.form-input, 
textarea.form-input, 
select.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
    padding: 0.75rem !important;
    border: 1px solid rgba(218, 220, 224, 0.6) !important; /* 더 진한 border로 변경 */
    border-radius: 8px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    color: #202124 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--font-family-primary) !important;
    width: 100%;
}

.form-input:hover, 
input.form-input:hover, 
textarea.form-input:hover, 
select.form-select:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
    border-color: rgba(218, 220, 224, 0.8) !important;
}

.form-input:focus, 
input.form-input:focus, 
textarea.form-input:focus, 
select.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgba(66, 133, 244, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2) !important;
}

.form-value {
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #202124;
    min-height: 1.5rem;
}

.form-value.disabled {
    color: #5f6368;
}

.form-hint {
    font-size: 0.75rem;
    color: #5f6368;
    margin-top: 0.25rem;
}

.form-select {
    padding: 0.75rem !important;
    border: 1px solid rgba(218, 220, 224, 0.4) !important; /* 매우 연한 border */
    border-radius: 8px !important;
    font-size: 1rem !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-select:hover {
    border-color: rgba(218, 220, 224, 0.6) !important;
}

.form-select:focus {
    outline: none !important;
    border-color: rgba(66, 133, 244, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2) !important;
}

/* 🔘 Google One UI 버튼 시스템 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* 아이콘과 텍스트 간격 증가 */
    padding: 1rem 1.75rem; /* 상하좌우 패딩 증가 */
    border-radius: 12px; /* 더 둥근 모서리 */
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    min-height: 44px; /* 최소 높이 보장 */
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary 버튼 */
.btn-primary {
    background: #4285f4 !important;
    color: white !important;
    border: 1px solid #4285f4 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 1rem 1.75rem !important;
}

.btn-primary:hover:not(:disabled) {
    background: #3367d6 !important;
    border-color: #3367d6 !important;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(66, 133, 244, 0.3) !important;
}

/* Secondary 버튼 */
.btn-secondary {
    background: #f8f9fa !important;
    color: #5f6368 !important;
    border: 1px solid rgba(218, 220, 224, 0.6) !important; /* 더 진한 border */
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 1rem 1.75rem !important;
}

.btn-secondary:hover:not(:disabled) {
    background: #f1f3f4 !important;
    border-color: rgba(95, 99, 104, 0.5) !important; /* 호버시에도 더 진하게 */
    transform: translateY(-1px) !important;
}

/* Accent 버튼 */
.btn-accent {
    background: #34a853;
    color: white;
}

.btn-accent:hover:not(:disabled) {
    background: #2d8f47;
    box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3);
    transform: translateY(-1px);
}

/* Ghost 버튼 */
.btn-ghost {
    background: transparent !important;
    color: #5f6368 !important;
    border: 1px solid rgba(218, 220, 224, 0.6) !important; /* 더 진한 border */
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 1rem 1.75rem !important;
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(95, 99, 104, 0.05) !important;
    border-color: rgba(95, 99, 104, 0.5) !important; /* 호버시에도 더 진하게 */
    color: #202124 !important;
}

/* 버튼 크기 */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.btn-full {
    width: 100%;
}

/* 로딩 상태 */
.btn .loading {
    position: relative;
}

.btn .loading::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.btn-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4285f4;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-link:hover {
    color: #3367d6;
    text-decoration: none;
}

.card-action-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4285f4;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.card-action-link:hover {
    color: #3367d6;
    text-decoration: none;
}

/* 스피너 */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 설정 스타일 */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    flex: 1;
}

.setting-name {
    font-size: 1rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.setting-desc {
    font-size: 0.875rem;
    color: #5f6368;
}

/* 토글 스위치 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dadce0;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4285f4;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch.eco input:checked + .toggle-slider {
    background-color: #34a853;
}

/* 보안 설정 */
.security-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid rgba(218, 220, 224, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.security-btn:hover {
    background: #f8f9fa;
    border-color: rgba(218, 220, 224, 0.6);
}

.security-btn.danger:hover {
    background: #fef7f0;
    border-color: #fce8e6;
}

.security-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2);
    border-color: rgba(66, 133, 244, 0.8);
}

.security-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.security-btn-icon.warning {
    background: #fef7e0;
    color: #f9ab00;
}

.security-btn-icon.info {
    background: #e8f0fe;
    color: #4285f4;
}

.security-btn-icon.danger {
    background: #fce8e6;
    color: #ea4335;
}

.security-btn-content {
    flex: 1;
}

.security-btn-title {
    font-size: 1rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.security-btn-desc {
    font-size: 0.875rem;
    color: #5f6368;
}

.security-btn i:last-child {
    color: #5f6368;
    font-size: 1rem;
}

/* 상세 통계 */
.stats-detailed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-detailed-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-detailed-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-detailed-icon.primary {
    background: #e8f0fe;
    color: #4285f4;
}

.stat-detailed-icon.warning {
    background: #fef7e0;
    color: #f9ab00;
}

.stat-detailed-icon.success {
    background: #e6f4ea;
    color: #34a853;
}

.stat-detailed-icon.info {
    background: #e8f0fe;
    color: #4285f4;
}

.stat-detailed-content {
    flex: 1;
}

.stat-detailed-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #202124;
    line-height: 1;
}

.stat-detailed-label {
    font-size: 0.875rem;
    color: #5f6368;
    margin: 0.25rem 0;
}

.stat-detailed-change {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    display: inline-block;
}

.stat-detailed-change.positive {
    background: #e6f4ea;
    color: #34a853;
}

.stat-detailed-change.neutral {
    background: #f1f3f4;
    color: #5f6368;
}

/* 활동 타임라인 */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.activity-icon.primary {
    background: #e8f0fe;
    color: #4285f4;
}

.activity-icon.warning {
    background: #fef7e0;
    color: #f9ab00;
}

.activity-icon.success {
    background: #e6f4ea;
    color: #34a853;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.activity-desc {
    font-size: 0.75rem;
    color: #5f6368;
    margin-bottom: 0.25rem;
}

.activity-time {
    font-size: 0.75rem;
    color: #9aa0a6;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #5f6368;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* 계정 요약 */
.account-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.account-info:last-child {
    border-bottom: none;
}

.account-label {
    font-size: 0.875rem;
    color: #5f6368;
}

.account-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active {
    background: #e6f4ea;
    color: #34a853;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .profile-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-avatar-section {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-stats-quick {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    
    .profile-name {
        font-size: 2rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .security-btn {
        padding: 0.75rem;
    }
    
    .stat-detailed-item {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

/* 📊 대시보드 전용 컴포넌트 */
.progress-section {
    padding: 1rem 0;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-label {
    font-size: 0.875rem;
    color: #5f6368;
}

.progress-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #202124;
}

.progress-bar-container {
    width: 100%;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #f1f3f4;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4285f4, #34a853);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* 알림 리스트 */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(241, 243, 244, 0.6); /* 연한 border */
    transition: all 0.2s ease;
}

.alert-item:hover {
    background: #f8f9fa;
    border-color: rgba(218, 220, 224, 0.4); /* 호버시에도 연하게 */
}

.alert-item.warning {
    border-left: 4px solid #f9ab00;
}

.alert-item.info {
    border-left: 4px solid #4285f4;
}

.alert-item.success {
    border-left: 4px solid #34a853;
}

.alert-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.alert-item.warning .alert-icon {
    background: #fef7e0;
    color: #f9ab00;
}

.alert-item.info .alert-icon {
    background: #e8f0fe;
    color: #4285f4;
}

.alert-item.success .alert-icon {
    background: #e6f4ea;
    color: #34a853;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.alert-desc {
    font-size: 0.75rem;
    color: #5f6368;
}

/* 메트릭 아이템 */
.metric-item {
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.metric-item:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 0.875rem;
    color: #5f6368;
    margin-bottom: 0.75rem;
    display: block;
}

.metric-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.metric-progress .progress-bar {
    flex: 1;
    height: 6px;
}

.metric-value {
    font-size: 0.75rem;
    color: #5f6368;
    white-space: nowrap;
}

.metric-circle {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.circle-progress {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(#34a853 0deg 331deg, #f1f3f4 331deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circle-progress::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
}

.circle-value {
    font-size: 1rem;
    font-weight: 700;
    color: #202124;
    position: relative;
    z-index: 1;
}

/* 📱 스캔 페이지 전용 스타일 */
.scan-header-simple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
}

.scan-nav-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scan-header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.btn-flash {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-flash:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-flash.active {
    background: rgba(249, 171, 0, 0.3);
    color: #f9ab00;
}

.scan-content-wrapper {
    padding: 2rem 0;
    margin-top: -1rem;
    position: relative;
    z-index: 2;
}

.camera-permission-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
}

.permission-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.permission-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 1rem;
}

.permission-desc {
    font-size: 1rem;
    color: #5f6368;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.scan-actions {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 2rem);
    max-width: 400px;
}

.scan-action-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.scan-fab {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 0;
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
}

.scan-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}

/* 🎯 MudBlazor 컴포넌트 Google One UI 오버라이드 */
.mud-input-control .mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: rgba(218, 220, 224, 0.4) !important;
}

.mud-input-control .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(218, 220, 224, 0.6) !important;
}

.mud-input-control .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: rgba(66, 133, 244, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2) !important;
}

.mud-button-outlined {
    border-width: 1px !important;
    border-color: rgba(218, 220, 224, 0.4) !important;
}

.mud-button-outlined:hover {
    border-color: rgba(95, 99, 104, 0.3) !important;
}

.mud-card {
    border: 1px solid rgba(218, 220, 224, 0.2) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}

.mud-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.mud-select .mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: rgba(218, 220, 224, 0.4) !important;
}

.mud-textfield .mud-input-outlined .mud-input-outlined-border {
    border-width: 1px !important;
    border-color: rgba(218, 220, 224, 0.4) !important;
}

.mud-paper {
    border: 1px solid rgba(218, 220, 224, 0.2) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}

/* MudBlazor 기본 elevation 오버라이드 */
.mud-elevation-1 {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}

.mud-elevation-2 {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.mud-elevation-4 {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.mud-elevation-8 {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* 🔗 Footer 구분선 */
.footer-divider-sm {
    border: none;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    margin: 0.5rem 0;
}

/* 🦶 Footer Styles - Samsung 스타일 적용 */
.psc-footer {
    background: #FFFFFF;
    color: #000000;
    padding: 0;
    margin-top: auto;
    border-top: none;
}

/* 상단 구분선 */
.footer-divider {
    height: 1px;
    background-color: #E0E0E0;
    margin: 0;
}

/* 메인 Footer 영역 */
.footer-main {
    padding: 40px 0;
}

/* 섹션 제목 스타일 */
.footer-section-title {
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}

/* 링크 목록 스타일 */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.2s ease;
    display: block;
}

.footer-links a:hover {
    color: #1428A0;
    text-decoration: none;
}

/* 하단 영역 */
.footer-bottom {
    border-top: 1px solid #E0E0E0;
    padding: 20px 0;
    background: #FFFFFF;
    margin-top: 0;
}

/* 저작권 */
.footer-copyright {
    color: #666666;
    font-size: 12px;
    font-weight: 300;
    margin: 0;
    line-height: 1.4;
}

/* 언어 선택 및 메타 정보 */
.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.language-selector {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}

/* 법적 링크 */
.footer-legal {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal a {
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: #1428A0;
}

/* 소셜 미디어 영역 */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.social-label {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}

.social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 18px;
    background: none;
    border-radius: 0;
    transform: none;
}

.social-btn:hover {
    color: #1428A0;
    background: none;
    transform: none;
}

/* 반응형 디자인 - 모바일에서 스택 레이아웃 */
@media (max-width: 991px) {
    .footer-main {
        padding: 30px 0;
    }
    
    .footer-section-title {
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    .footer-links a {
        font-size: 13px;
    }
    
    .footer-links li {
        margin-bottom: 6px;
    }
}

@media (max-width: 767px) {
    .footer-main {
        padding: 25px 0;
    }
    
    .footer-main .row > div {
        margin-bottom: 25px;
    }
    
    .footer-main .row > div:last-child {
        margin-bottom: 0;
    }
    
    .footer-bottom {
        padding: 15px 0;
    }
    
    .footer-bottom .row > div {
        margin-bottom: 15px;
        text-align: center !important;
    }
    
    .footer-bottom .row > div:last-child {
        margin-bottom: 0;
    }
    
    .footer-meta {
        align-items: center;
    }
    
    .footer-legal {
        justify-content: center;
        gap: 10px;
    }
    
    .footer-social {
        align-items: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .footer-legal {
        flex-direction: column;
        gap: 8px;
    }
    
    .social-links {
        gap: 12px;
    }
    
    .social-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* 전역 outline 및 border 제거 */
*, *::before, *::after {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 텍스트 요소는 선택 가능하도록 설정 */
p, span, h1, h2, h3, h4, h5, h6,
.text-selectable, input, textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 입력 요소들의 outline 및 border 복원 */
/* MudBlazor 컴포넌트만 revert 적용 */
.mud-input, .mud-input-control, .mud-select, .mud-button,
.mud-text-field, .mud-form-input-control,
.mud-input-outlined, .mud-input-filled {
    outline: revert !important;
    border: revert !important;
    box-shadow: revert !important;
}

/* 커스텀 입력 요소는 우리 스타일 유지 */
/* 🎯 모든 input, button 요소에 대한 포괄적 스타일 적용 */
input, textarea, select, button,
input.form-input, textarea.form-input, select.form-select, 
button.btn-primary, button.btn-secondary, button.btn-accent, button.btn-ghost,
.mud-input, .mud-input-control, .mud-select, .mud-text-field, .mud-form-input-control,
.mud-button, .mud-button-root, .mud-fab, .mud-icon-button {
    outline: none !important;
    border: 1px solid rgba(218, 220, 224, 0.6) !important; /* 더 진한 border */
    box-shadow: none !important;
    font-family: var(--font-family-primary) !important;
}

/* MudBlazor 컴포넌트 특별 처리 */
.mud-input-control input,
.mud-input-control textarea,
.mud-select select,
.mud-text-field input {
    border: 1px solid rgba(218, 220, 224, 0.6) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
}

.mud-button,
.mud-button-root,
.mud-fab {
    border: 1px solid rgba(218, 220, 224, 0.6) !important;
    border-radius: 12px !important;
    padding: 1rem 1.75rem !important;
}

/* 입력 요소 focus 시 outline 표시 */
input:focus, textarea:focus, select:focus,
.mud-input:focus, .mud-input-control:focus, .mud-select:focus,
.mud-text-field:focus, .mud-form-input-control:focus {
    outline: 2px solid #258cfb !important;
    outline-offset: 2px !important;
}

/* 커스텀 입력 요소 포커스 스타일 */
input.form-input:focus, textarea.form-input:focus, select.form-select:focus {
    outline: none !important;
    border-color: rgba(66, 133, 244, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2) !important;
}

/* 개발 모드에서 나타나는 불필요한 border 제거 (입력 요소 제외) */
div:not(.mud-input):not(.mud-input-control):not(.mud-select):not(.mud-button):not(.mud-text-field):not(.mud-form-input-control), 
span:not(.mud-input-adornment), 
p, h1, h2, h3, h4, h5, h6 {
    border: none !important;
    box-shadow: none !important;
}

/* 🎯 CTA 버튼 애니메이션 */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 140, 251, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(37, 140, 251, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 140, 251, 0);
    }
}

.hover-lift {
    transition: all 0.3s ease;
    position: relative;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.scan-history-cta {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    border: none !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

.scan-history-cta:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.3) !important;
}

.scan-history-cta:active {
    transform: translateY(-1px);
}

/* 🎨 브랜드 로고 스타일 */
.psc-brand-logo {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.psc-brand-logo:hover {
    text-decoration: none !important;
    transform: scale(1.02);
}

.brand-text {
    background: linear-gradient(135deg, #00c39a 0%, #00a085 50%, #258cfb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
}

.brand-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00c39a, #258cfb);
    transition: width 0.3s ease;
}

.psc-brand-logo:hover .brand-text::after {
    width: 100%;
}

/* 반응형 로고 크기 조정 */
@@media (max-width: 768px) {
    .brand-text {
        font-size: 1.2rem;
        letter-spacing: -0.3px;
    }
}

@@media (max-width: 480px) {
    .brand-text {
        font-size: 1rem;
        letter-spacing: -0.2px;
    }
}

/* 다크 테마 지원 */
@@media (prefers-color-scheme: dark) {
    .brand-text {
        background: linear-gradient(135deg, #00e6b8 0%, #00c39a 50%, #4da6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* 🃏 Card Component - 카드 컴포넌트 */
.card {
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   box-shadow: var(--shadow-sm);
   transition: box-shadow var(--transition-normal);
}

.card:hover {
   box-shadow: var(--shadow-md);
}

.card-header {
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
   border-bottom: 1px solid var(--color-border);
}

.card-title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
   margin: 0;
}

.card-subtitle {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   margin: var(--spacing-xs) 0 0 0;
}

.card-body {
   padding: 0;
}

.card-footer {
   margin-top: var(--spacing-md);
   padding-top: var(--spacing-sm);
   border-top: 1px solid var(--color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.card-compact {
   padding: var(--spacing-sm);
}

.card-large {
   padding: var(--spacing-lg);
   border-radius: var(--radius-lg);
}

/* 🔘 Button System - 버튼 시스템 */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   line-height: 1;
   text-align: center;
   text-decoration: none;
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-fast);
   user-select: none;
   min-height: 2.5rem;
   gap: var(--spacing-xs);
}

.btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
}

.btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
}

/* Primary Button - 주요 버튼 */
.btn-primary {
   background-color: var(--color-primary);
   color: white;
   border-color: var(--color-primary);
}

.btn-primary:hover {
   background-color: rgba(10, 37, 64, 0.9);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

/* Accent Button - 강조 버튼 */
.btn-accent {
   background-color: var(--color-accent);
   color: white;
   border-color: var(--color-accent);
}

.btn-accent:hover {
   background-color: rgba(0, 195, 154, 0.9);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
}

/* Secondary Button - 보조 버튼 */
.btn-secondary {
   background-color: transparent;
   color: var(--color-text-primary);
   border-color: var(--color-border);
}

.btn-secondary:hover {
   background-color: var(--color-background);
   border-color: var(--color-text-secondary);
}

/* Ghost Button - 중복 제거됨 (위에 통합된 스타일 사용) */

/* Button Sizes - 버튼 크기 */
.btn-sm {
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--font-size-xs);
   min-height: 2rem;
}

.btn-lg {
   padding: var(--spacing-md) var(--spacing-lg);
   font-size: var(--font-size-base);
   min-height: 3rem;
}

.btn-xl {
   padding: var(--spacing-lg) var(--spacing-xl);
   font-size: var(--font-size-lg);
   min-height: 3.5rem;
}

.btn-full {
   width: 100%;
}

/* 🪟 Modal/Popup - 모달/팝업 */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-md);
   z-index: var(--z-modal);
   backdrop-filter: blur(2px);
}

.modal {
   background-color: var(--color-surface);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
   max-width: 32rem;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   animation: modal-appear 0.2s ease-out;
}

@keyframes modal-appear {
   from {
      opacity: 0;
      transform: scale(0.95) translateY(-20px);
   }

   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

.modal-header {
   padding: var(--spacing-lg);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.modal-title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   margin: 0;
}

.modal-close {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--color-text-secondary);
   transition: color var(--transition-fast);
   padding: var(--spacing-xs);
   border-radius: var(--radius-sm);
}

.modal-close:hover {
   color: var(--color-text-primary);
   background-color: var(--color-background);
}

.modal-body {
   padding: var(--spacing-lg);
}

.modal-footer {
   padding: var(--spacing-lg);
   border-top: 1px solid var(--color-border);
   display: flex;
   gap: var(--spacing-sm);
   justify-content: flex-end;
}

/* 📊 Progress Bar - 프로그래스 바 */
.progress-container {
   background-color: var(--color-border);
   border-radius: var(--radius-full);
   height: 0.5rem;
   overflow: hidden;
   position: relative;
}

.progress-bar {
   background-color: var(--color-accent);
   height: 100%;
   border-radius: var(--radius-full);
   transition: width var(--transition-normal);
   position: relative;
}

.progress-bar::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(45deg,
         rgba(255, 255, 255, 0.2) 25%,
         transparent 25%,
         transparent 50%,
         rgba(255, 255, 255, 0.2) 50%,
         rgba(255, 255, 255, 0.2) 75%,
         transparent 75%,
         transparent);
   background-size: 1rem 1rem;
   animation: progress-animation 1s linear infinite;
}

@keyframes progress-animation {
   0% {
      background-position: 1rem 0;
   }

   100% {
      background-position: 0 0;
   }
}

/* Step Progress - 단계별 프로그래스 */
.step-progress {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   margin: var(--spacing-lg) 0;
}

.step {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   position: relative;
}

.step-indicator {
   width: 2rem;
   height: 2rem;
   border-radius: var(--radius-full);
   border: 2px solid var(--color-border);
   background-color: var(--color-surface);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
   z-index: 1;
}

.step.completed .step-indicator {
   background-color: var(--color-success);
   border-color: var(--color-success);
   color: white;
}

.step.active .step-indicator {
   background-color: var(--color-accent);
   border-color: var(--color-accent);
   color: white;
}

.step-label {
   margin-top: var(--spacing-xs);
   font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   text-align: center;
}

.step.completed .step-label,
.step.active .step-label {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
}

.step-connector {
   position: absolute;
   top: 1rem;
   left: 50%;
   right: -50%;
   height: 2px;
   background-color: var(--color-border);
   z-index: 0;
}

.step.completed .step-connector {
   background-color: var(--color-success);
}

.step:last-child .step-connector {
   display: none;
}

/* 📱 QR Scanner - QR 스캐너 */
.qr-scanner-container {
   position: relative;
   background-color: #000;
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 1;
   max-width: 24rem;
   margin: 0 auto;
}

.qr-scanner-frame {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 12rem;
   height: 12rem;
   border: 2px solid var(--color-accent);
   border-radius: var(--radius-md);
}

.qr-scanner-frame::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   height: 2px;
   background-color: var(--color-accent);
   animation: qr-scan-line 2s linear infinite;
}

@keyframes qr-scan-line {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(12rem);
   }
}

.qr-scanner-corners {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.qr-scanner-corner {
   position: absolute;
   width: 1rem;
   height: 1rem;
   border: 3px solid var(--color-accent);
}

.qr-scanner-corner.top-left {
   top: 3rem;
   left: 3rem;
   border-right: none;
   border-bottom: none;
}

.qr-scanner-corner.top-right {
   top: 3rem;
   right: 3rem;
   border-left: none;
   border-bottom: none;
}

.qr-scanner-corner.bottom-left {
   bottom: 3rem;
   left: 3rem;
   border-right: none;
   border-top: none;
}

.qr-scanner-corner.bottom-right {
   bottom: 3rem;
   right: 3rem;
   border-left: none;
   border-top: none;
}

/* 🏷️ Tags and Badges - 태그 및 뱃지 */
.badge {
   display: inline-flex;
   align-items: center;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   border-radius: var(--radius-full);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.badge-primary {
   background-color: var(--color-primary);
   color: white;
}

.badge-accent {
   background-color: var(--color-accent);
   color: white;
}

.badge-success {
   background-color: var(--color-success);
   color: white;
}

.badge-warning {
   background-color: var(--color-warning);
   color: white;
}

.badge-error {
   background-color: var(--color-error);
   color: white;
}

.badge-neutral {
   background-color: var(--color-border);
   color: var(--color-text-secondary);
}

/* 🏢 Admin Layout Styles - 관리자 레이아웃 */
.admin-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    background: linear-gradient(180deg, var(--color-primary) 0%, #3a0647 70%);
    color: white;
    padding: var(--spacing-md);
    position: sticky;
    top: 0;
    height: 100vh;
}

/* MudNavLink 스타일 커스터마이징 - 밝은 파스텔 색상 */
.admin-sidebar ::deep .mud-nav-link,
.admin-sidebar .mud-nav-link,
.admin-sidebar a.mud-nav-link {
    color: #E8F4FD !important;
    border-radius: 8px;
    margin: 4px 0;
    transition: all 0.2s ease;
}

.admin-sidebar ::deep .mud-nav-link:hover,
.admin-sidebar .mud-nav-link:hover,
.admin-sidebar a.mud-nav-link:hover {
    background-color: rgba(232, 244, 253, 0.15) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.admin-sidebar ::deep .mud-nav-link.active,
.admin-sidebar .mud-nav-link.active,
.admin-sidebar a.mud-nav-link.active {
    background-color: rgba(232, 244, 253, 0.25) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* MudNavLink 아이콘 색상 */
.admin-sidebar ::deep .mud-nav-link .mud-icon-root,
.admin-sidebar .mud-nav-link .mud-icon-root,
.admin-sidebar a.mud-nav-link .mud-icon-root {
    color: #B8E6B8 !important; /* 연한 민트 그린 */
}

.admin-sidebar ::deep .mud-nav-link:hover .mud-icon-root,
.admin-sidebar .mud-nav-link:hover .mud-icon-root,
.admin-sidebar a.mud-nav-link:hover .mud-icon-root {
    color: #FFFFFF !important;
}

.admin-sidebar ::deep .mud-nav-link.active .mud-icon-root,
.admin-sidebar .mud-nav-link.active .mud-icon-root,
.admin-sidebar a.mud-nav-link.active .mud-icon-root {
    color: #FFFFFF !important;
}

/* MudDivider 색상 */
.admin-sidebar ::deep .mud-divider {
    border-color: rgba(232, 244, 253, 0.3) !important;
}

/* 추가적인 사이드바 메뉴 텍스트 색상 강화 */
.admin-sidebar a,
.admin-sidebar .mud-nav-item,
.admin-sidebar .mud-nav-group,
.admin-sidebar .mud-list-item {
    color: #E8F4FD !important;
}

.admin-sidebar a:hover,
.admin-sidebar .mud-nav-item:hover,
.admin-sidebar .mud-nav-group:hover,
.admin-sidebar .mud-list-item:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 사이드바 내 모든 텍스트 요소 */
.admin-sidebar span,
.admin-sidebar div {
    color: inherit !important;
}

/* 🔐 인증 페이지 스타일 (Login/Signup) */
.auth-layout {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-container {
    width: 100%;
    max-width: 480px;
}

.auth-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin: 0 auto;
}

.signup-card {
    max-width: 600px;
    margin: 2rem auto;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    margin-bottom: 1rem;
}

.auth-title {
    font-size: 2rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: #5f6368;
    font-size: 1rem;
    margin: 0;
}

.auth-form {
    margin-bottom: 2rem;
}

.auth-divider {
    position: relative;
    text-align: center;
    margin: 2rem 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8eaed;
}

.auth-divider span {
    background: white;
    padding: 0 1rem;
    color: #5f6368;
    font-size: 0.875rem;
}

.auth-actions {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-actions p {
    margin-bottom: 1rem;
    color: #5f6368;
}

.auth-footer {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e8eaed;
}

.link-btn {
    background: none;
    border: none;
    color: #1a73e8;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.link-btn:hover {
    background-color: rgba(26, 115, 232, 0.08);
}

/* 폼 섹션 */
.form-section {
    margin-bottom: 2rem;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e8eaed;
}

.form-help {
    font-size: 0.75rem;
    color: #5f6368;
    margin-top: 0.25rem;
}

/* 데모 계정 버튼들 */
.demo-section {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.demo-title {
    text-align: center;
    font-size: 0.875rem;
    color: #5f6368;
    margin-bottom: 1rem;
}

.demo-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

.demo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border: 1px solid rgba(218, 220, 224, 0.6);
    border-radius: 8px;
    background: white;
    color: #5f6368;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-btn:hover {
    border-color: #4285f4;
    color: #4285f4;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}

.demo-btn i {
    font-size: 1.25rem;
}

.demo-btn-admin:hover { border-color: #ea4335; color: #ea4335; }
.demo-btn-vendor:hover { border-color: #34a853; color: #34a853; }
.demo-btn-outsourcing:hover { border-color: #fbbc04; color: #fbbc04; }
.demo-btn-store:hover { border-color: #4285f4; color: #4285f4; }
.demo-btn-user:hover { border-color: #9aa0a6; color: #9aa0a6; }

/* 반응형 디자인 */
@media (max-width: 768px) {
    .auth-layout {
        padding: 1rem;
    }
    
    .auth-card {
        padding: 1.5rem;
    }
    
    .auth-title {
        font-size: 1.75rem;
    }
    
    .demo-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .signup-card {
        margin: 1rem auto;
    }
}

/* 👤 User 페이지 전용 스타일 */

/* 설정 페이지 스타일 */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-info {
    flex: 1;
}

.setting-title {
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.setting-desc {
    font-size: 0.875rem;
    color: #5f6368;
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.875rem;
    color: #5f6368;
}

.info-value {
    font-weight: 500;
    color: #202124;
}

.security-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid rgba(218, 220, 224, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.security-btn:hover {
    border-color: rgba(66, 133, 244, 0.6);
    box-shadow: 0 1px 4px rgba(66, 133, 244, 0.1);
}

.security-btn-content {
    flex: 1;
}

.security-btn-title {
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.security-btn-desc {
    font-size: 0.875rem;
    color: #5f6368;
}

.data-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-danger {
    background: #ea4335 !important;
    color: white !important;
    border: 1px solid #ea4335 !important;
}

.btn-danger:hover {
    background: #d33b2c !important;
    border-color: #d33b2c !important;
}

/* 스캔 이력 페이지 스타일 */
.scan-history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scan-history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(218, 220, 224, 0.4);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.scan-history-item:hover {
    border-color: rgba(66, 133, 244, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scan-product-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.scan-product-info {
    flex: 1;
}

.scan-product-name {
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.scan-product-brand {
    font-size: 0.875rem;
    color: #5f6368;
    margin-bottom: 0.125rem;
}

.scan-product-category {
    font-size: 0.75rem;
    color: #9aa0a6;
}

.scan-details {
    text-align: right;
    flex-shrink: 0;
}

.scan-date {
    font-size: 0.875rem;
    color: #202124;
    margin-bottom: 0.25rem;
}

.scan-location {
    font-size: 0.75rem;
    color: #5f6368;
    margin-bottom: 0.5rem;
}

.scan-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f3f4;
}

.pagination-info {
    font-size: 0.875rem;
    color: #5f6368;
}

/* 리워드 박스 페이지 스타일 */
.reward-balance-card {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
}

.reward-balance {
    text-align: center;
}

.balance-label {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.balance-amount {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.balance-info {
    font-size: 0.875rem;
    opacity: 0.8;
}

.reward-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.level-section {
    margin-bottom: 2rem;
}

.level-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.level-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #4285f4;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    font-weight: 600;
}

.level-details {
    flex: 1;
}

.level-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 0.5rem;
}

.level-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.badges-section {
    margin-top: 2rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #202124;
    margin-bottom: 1rem;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgba(218, 220, 224, 0.4);
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.badge-item.earned {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border-color: #ffd700;
    color: #8b4513;
}

.badge-item.locked {
    opacity: 0.5;
}

.badge-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.badge-name {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.badge-date, .badge-requirement {
    font-size: 0.75rem;
    opacity: 0.8;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f8f9fa;
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #202124;
}

.stat-label {
    font-size: 0.875rem;
    color: #5f6368;
}

.recommended-rewards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(218, 220, 224, 0.4);
    border-radius: 8px;
}

.reward-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-info {
    flex: 1;
}

.reward-name {
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.reward-points {
    font-size: 0.875rem;
    color: #4285f4;
    font-weight: 600;
}

.points-history {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.history-item:last-child {
    border-bottom: none;
}

.history-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.history-icon.earned {
    background: rgba(52, 168, 83, 0.1);
    color: #34a853;
}

.history-icon.used {
    background: rgba(234, 67, 53, 0.1);
    color: #ea4335;
}

.history-info {
    flex: 1;
}

.history-title {
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.history-date {
    font-size: 0.875rem;
    color: #5f6368;
}

.history-points {
    font-weight: 600;
    font-size: 1rem;
}

.history-points.earned {
    color: #34a853;
}

.history-points.used {
    color: #ea4335;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .scan-history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .scan-details {
        text-align: left;
        width: 100%;
    }
    
    .scan-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .level-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .reward-actions {
        flex-direction: column;
        width: 100%;
    }
}

/* 🎛️ 토글 스위치 스타일 */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(218, 220, 224, 0.6);
    border-radius: 24px;
    transition: 0.3s;
    border: 1px solid rgba(218, 220, 224, 0.6);
}

.toggle-switch label:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + label {
    background-color: #4285f4;
    border-color: #4285f4;
}

.toggle-switch input:checked + label:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + label {
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

/* 📈 스크롤 투 탑 버튼 */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #4285f4;
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

.scroll-btn:hover {
    background: #3367d6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
}

.scroll-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.scroll-btn i {
    color: white;
    font-weight: bold;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 1rem;
        right: 1rem;
    }
    
    .scroll-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

.admin-brand {
    margin-bottom: var(--spacing-lg);
}

/* 브랜드 링크 색상 */
.admin-brand a {
    color: #E8F4FD !important;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

.admin-brand a:hover {
    color: #FFFFFF !important;
}

.admin-content {
    display: flex;
    flex-direction: column;
}

/* v0 스타일 모던 파스텔 TopBar */
.v0-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.v0-topbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    padding: 0 24px;
    height: 72px;
}

/* 좌측 페이지 정보 */
.v0-topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.v0-page-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v0-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #1a1a1a;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.v0-breadcrumb {
    display: flex;
    align-items: center;
}

.v0-breadcrumb-text {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* 우측 액션 영역 */
.v0-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* 검색 컨테이너 */
.v0-search-container {
    position: relative;
}

.v0-search-field {
    width: 280px;
}

.v0-search-field ::deep .mud-input-control {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.v0-search-field ::deep .mud-input-control:hover {
    background: rgba(248, 250, 252, 1);
    border-color: rgba(147, 197, 253, 0.8);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.1);
}

.v0-search-field ::deep .mud-input-control.mud-input-control-focused {
    background: rgba(255, 255, 255, 1);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.v0-search-field ::deep .mud-input-adornment .mud-icon-root {
    color: #9ca3af;
}

/* 액션 버튼들 */
.v0-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 공통 액션 버튼 스타일 */
.v0-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.8);
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.v0-action-btn:hover {
    background: rgba(239, 246, 255, 1);
    color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.v0-action-icon {
    font-size: 20px;
}

/* 알림 버튼 */
.v0-notification-wrapper {
    position: relative;
}

.v0-notification-badge ::deep .mud-badge-content {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 사용자 보기 버튼 */
.v0-user-view-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.v0-user-view-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    color: white;
}

.v0-btn-icon {
    font-size: 18px;
}

.v0-btn-text {
    white-space: nowrap;
}

/* 프로필 영역 */
.v0-profile-wrapper {
    position: relative;
}

.v0-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.v0-profile-trigger:hover {
    background: rgba(239, 246, 255, 1);
    border-color: rgba(147, 197, 253, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.v0-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-radius: 8px;
    color: white;
}

.v0-avatar-icon {
    font-size: 18px;
}

.v0-dropdown-icon {
    font-size: 16px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.v0-profile-trigger:hover .v0-dropdown-icon {
    color: #6b7280;
}

/* 프로필 메뉴 */
.v0-menu-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 8px;
    min-width: 200px;
}

.v0-menu-item {
    border-radius: 8px;
    margin: 2px 0;
    transition: all 0.2s ease;
}

.v0-menu-item:hover {
    background: rgba(248, 250, 252, 1);
}

.v0-menu-item-danger:hover {
    background: rgba(254, 242, 242, 1);
    color: #dc2626;
}

.v0-menu-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.v0-menu-icon {
    font-size: 18px;
    color: #6b7280;
}

.v0-menu-item-danger .v0-menu-icon {
    color: #dc2626;
}

.v0-menu-divider {
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.06);
}

.admin-main {
    padding: 24px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(248, 250, 252, 0.8) 100%);
    min-height: calc(100vh - 72px);
}

/* Admin Layout 반응형 - 태블릿 이하에서만 세로 배치 */
@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .admin-sidebar {
        position: static;
        height: auto;
        order: 1;
    }
    .admin-content {
        order: 2;
    }
    
    /* 태블릿에서 v0 TopBar 조정 */
    .v0-topbar-container {
        padding: 0 20px;
        height: 64px;
    }
    
    .v0-page-info {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .v0-breadcrumb {
        display: none; /* 태블릿에서 브레드크럼 숨김 */
    }
    
    .v0-page-title {
        font-size: 1.25rem;
    }
    
    .v0-search-field {
        width: 220px;
    }
    
    .v0-topbar-right {
        gap: 12px;
    }
    
    .v0-btn-text {
        display: none; /* 태블릿에서 버튼 텍스트 숨김 */
    }
    
    .v0-user-view-btn {
        padding: 8px;
        min-width: 40px;
        justify-content: center;
    }
    
    .admin-main {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    /* 작은 모바일에서 v0 TopBar 조정 */
    .v0-topbar-container {
        padding: 0 12px;
        height: 56px;
    }
    
    .v0-page-title {
        font-size: 1rem;
    }
    
    .v0-search-container {
        display: none; /* 작은 화면에서는 검색 필드 숨김 */
    }
    
    .v0-user-view-btn {
        display: none; /* 작은 화면에서는 사용자 보기 버튼 숨김 */
    }
    
    .v0-topbar-right {
        gap: 6px;
    }
    
    .v0-actions {
        gap: 4px;
    }
    
    .v0-action-btn {
        width: 32px;
        height: 32px;
    }
    
    .v0-profile-trigger {
        padding: 2px 6px;
    }
    
    .v0-avatar {
        width: 24px;
        height: 24px;
    }
    
    .v0-avatar-icon {
        font-size: 14px;
    }
    
    .admin-main {
        padding: 16px;
    }
}

/* 📝 Form Validation Styles - 폼 검증 스타일 */
.validation-message {
    color: #ea4335;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* 📋 Guide List Styles - 가이드 리스트 스타일 */
.guide-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.guide-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.guide-icon.success {
    background: #e8f5e8;
    color: #34a853;
}

.guide-icon.info {
    background: #e8f0fe;
    color: #4285f4;
}

.guide-icon.warning {
    background: #fef7e0;
    color: #f9ab00;
}

.guide-content {
    flex: 1;
}

.guide-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.guide-desc {
    font-size: 0.75rem;
    color: #5f6368;
    line-height: 1.4;
}

/* 📦 Recent Products Styles - 최근 제품 스타일 */
.recent-products {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recent-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid rgba(218, 220, 224, 0.4);
}

.recent-product-info {
    flex: 1;
}

.recent-product-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.25rem;
}

.recent-product-meta {
    font-size: 0.75rem;
    color: #5f6368;
}

.recent-product-date {
    font-size: 0.75rem;
    color: #5f6368;
    font-weight: 500;
}

/* 🎯 Modal Styles - 모달 스타일 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.modal-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(218, 220, 224, 0.4);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #202124;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f1f3f4;
    color: #202124;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body p {
    margin: 0 0 0.5rem 0;
    color: #5f6368;
    line-height: 1.5;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(218, 220, 224, 0.4);
}

/* 🎨 Text Color Utilities */
.text-success {
    color: #34a853 !important;
}

.text-info {
    color: #4285f4 !important;
}

.text-warning {
    color: #f9ab00 !important;
}

.text-danger {
    color: #ea4335 !important;
}

/* 📱 Mobile Responsive Adjustments - 모바일 반응형 조정 */
@media (max-width: 767px) {
   .modal {
      margin: var(--spacing-sm);
      max-width: calc(100vw - 2rem);
   }

   .modal-header,
   .modal-body,
   .modal-footer {
      padding: var(--spacing-md);
   }

   .card {
      padding: var(--spacing-sm);
   }

   .btn {
      min-height: 2.75rem;
      padding: var(--spacing-sm) var(--spacing-md);
   }

   .step-progress {
      gap: var(--spacing-xs);
   }

   .step-label {
      font-size: 0.625rem;
   }
}

/* 🎯 Utility Classes - 유틸리티 클래스 */
.loading {
   opacity: 0.6;
   pointer-events: none;
   position: relative;
}

.loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1rem;
   height: 1rem;
   margin: -0.5rem 0 0 -0.5rem;
   border: 2px solid var(--color-border);
   border-top-color: var(--color-accent);
   border-radius: var(--radius-full);
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

.clickable {
   cursor: pointer;
   transition: transform var(--transition-fast);
}

.clickable:hover {
   transform: scale(1.02);
}

.clickable:active {
   transform: scale(0.98);
}