@charset "utf-8";

/* 웹폰트 - 관리자 페이지에 영향을 주지 않도록 설정 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 테마 변수 - 색상 개선과 더 세련된 색조 적용 */
:root:not(.is-admin) { 
    --body-bg: #ffffff; 
    --body-color: #333333; 
    --border-color: #e5e7eb; 
    --header-bg: rgba(255, 255, 255, 0.9); 
    --card-bg: #ffffff; 
    --input-bg: #f3f4f6; 
    --input-color: #333333; 
    --button-bg: #5D5FEF; 
    --button-hover: #4547c9; 
    --button-color: #ffffff; 
    --accent-color: #5D5FEF; 
    --accent-second: #FF6692; 
    --secondary-color: #6b7280; 
    --shadow: rgba(0, 0, 0, 0.08); 
    --glass-bg: rgba(255, 255, 255, 0.8); 
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
}

/* 라이트 모드 명시적 변수 */
[data-theme="light"]:not(.is-admin) { 
    --body-bg: #ffffff; 
    --body-color: #333333; 
    --border-color: #e5e7eb; 
    --header-bg: rgba(255, 255, 255, 0.9); 
    --card-bg: #ffffff; 
    --input-bg: #f3f4f6; 
    --input-color: #333333; 
    --button-bg: #5D5FEF; 
    --button-hover: #4547c9; 
    --button-color: #ffffff; 
    --accent-color: #5D5FEF; 
    --accent-second: #FF6692; 
    --secondary-color: #6b7280; 
    --shadow: rgba(0, 0, 0, 0.08); 
    --glass-bg: rgba(255, 255, 255, 0.8); 
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
}

/* 다크 모드 변수 - 색상 개선 및 대비 강화 */
[data-theme="dark"]:not(.is-admin) { 
    --body-bg: #111827; 
    --body-color: #f3f4f6; 
    --border-color: #374151; 
    --header-bg: rgba(31, 41, 55, 0.9); 
    --card-bg: #1f2937; 
    --input-bg: #374151; 
    --input-color: #f3f4f6; 
    --button-bg: #5D5FEF; 
    --button-hover: #4547c9; 
    --button-color: #ffffff; 
    --accent-color: #5D5FEF; 
    --accent-second: #FF6692; 
    --secondary-color: #9ca3af; 
    --shadow: rgba(0, 0, 0, 0.25); 
    --glass-bg: rgba(31, 41, 55, 0.85); 
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --info-color: #60a5fa;
}

/* 기본 스타일 - 관리자가 아닌 경우에만 적용 */
html:not(.is-admin) {
    overflow-y: scroll;
    height: 100%;
    font-size: 16px;
    scroll-behavior: smooth;
}
body:not(.is-admin) {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    height: 100%;
    background-color: var(--body-bg);
    color: var(--body-color);
    transition: background-color 0.4s ease, color 0.4s ease;
}
body:not(.is-admin) a { 
    color: var(--body-color); 
    text-decoration: none; 
    transition: color 0.2s ease; 
}
body:not(.is-admin) a:hover { 
    color: var(--accent-color); 
}
body:not(.is-admin).overflow-hidden {
    overflow: hidden;
}

/* 스크롤바 스타일링 */
body:not(.is-admin)::-webkit-scrollbar {
    width: 8px;
}
body:not(.is-admin)::-webkit-scrollbar-track {
    background: var(--body-bg);
}
body:not(.is-admin)::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
}
body:not(.is-admin)::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

/* 선택 영역 스타일링 */
body:not(.is-admin)::selection {
    background-color: var(--accent-color);
    color: #ffffff;
}

/* 레이아웃 */
.container { 
    width: 100%; 
    max-width: 1280px; 
    margin: 0 auto; 
    padding: 0 1rem; 
    box-sizing: border-box; 
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* 그리드 시스템 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { 
    position: relative; 
    width: 100%; 
    padding-right: 1rem; 
    padding-left: 1rem; 
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }

@media (min-width: 576px) {
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 768px) {
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 992px) {
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}

/* 유틸리티 클래스 */
.mt-10 { margin-top: 0.625rem !important; }
.mt-20 { margin-top: 1.25rem !important; }
.mt-30 { margin-top: 1.875rem !important; }
.mt-40 { margin-top: 2.5rem !important; }
.mt-50 { margin-top: 3.125rem !important; }
.mb-10 { margin-bottom: 0.625rem !important; }
.mb-20 { margin-bottom: 1.25rem !important; }
.mb-30 { margin-bottom: 1.875rem !important; }
.mb-40 { margin-bottom: 2.5rem !important; }
.mb-50 { margin-bottom: 3.125rem !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.p-0 { padding: 0 !important; }
.p-10 { padding: 0.625rem !important; }
.p-20 { padding: 1.25rem !important; }
.p-30 { padding: 1.875rem !important; }

/* 애니메이션 */
.fade-in { 
    opacity: 0; 
    animation: fadeIn 0.5s ease forwards; 
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

.fade-in.active {
    opacity: 1;
}

.slide-up { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.6s ease, transform 0.6s ease; 
}
.slide-up.active { 
    opacity: 1; 
    transform: translateY(0); 
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

/* 특수 효과 */
.neon-text { 
    text-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--accent-color), 0 0 15px var(--accent-color); 
}

.glass-card { 
    background: var(--glass-bg); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 1rem; 
    transition: all 0.3s ease;
}
.glass-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.gradient-text { 
    background: linear-gradient(45deg, var(--accent-color), var(--accent-second)); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    display: inline-block; 
}

/* 공통 요소 스타일 */
.sound_only { 
    display: inline-block !important; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    margin: 0 !important; 
    padding: 0 !important; 
    font-size: 0; 
    line-height: 0; 
    border: 0 !important; 
    overflow: hidden !important; 
}
.clearfix:after { 
    content: ''; 
    display: block; 
    clear: both; 
}
.img-fluid { 
    max-width: 100%; 
    height: auto; 
}

/* 버튼 스타일 개선 */
.btn { 
    display: inline-block; 
    padding: 0.75rem 1.5rem; 
    border-radius: 0.5rem; 
    background-color: var(--accent-color); 
    color: white; 
    font-size: 0.95rem; 
    font-weight: 600; 
    transition: all 0.2s ease; 
    border: none; 
    cursor: pointer; 
    text-align: center; 
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover { 
    background-color: var(--button-hover); 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(93, 95, 239, 0.25);
}

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

.btn-outline { 
    background-color: transparent; 
    border: 1px solid var(--accent-color); 
    color: var(--accent-color); 
}
.btn-outline:hover { 
    background-color: var(--accent-color); 
    color: white;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

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

.btn-block {
    display: block;
    width: 100%;
}

/* 상태 색상 */
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-info { color: var(--info-color) !important; }

.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-error { background-color: var(--error-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* 알림 배지 */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-primary { background-color: var(--accent-color); color: white; }
.badge-secondary { background-color: var(--secondary-color); color: white; }
.badge-success { background-color: var(--success-color); color: white; }
.badge-warning { background-color: var(--warning-color); color: white; }
.badge-error { background-color: var(--error-color); color: white; }
.badge-info { background-color: var(--info-color); color: white; }

/* 페이지 로더 */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(93, 95, 239, 0.3);
    border-top-color: var(--accent-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}