/**
 * celimax HR Admin - 공통 스타일
 * 무채색 기반의 미니멀하고 고급스러운 디자인 시스템
 */

/* ========================================
   CSS 변수 (디자인 토큰)
   ======================================== */
:root {
    /* 기본 무채색 팔레트 */
    --color-charcoal: #1a1a1a;
    --color-graphite: #2d2d2d;
    --color-slate: #4a4a4a;
    --color-silver: #8a8a8a;
    --color-pearl: #e8e8e8;
    --color-ivory: #f5f5f5;
    --color-white: #ffffff;

    /* 시맨틱 컬러 */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;

    /* 트랜지션 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* 그림자 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ========================================
   기본 스타일
   ======================================== */
* {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
}

/* ========================================
   애니메이션 Keyframes
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========================================
   페이지 전환 애니메이션 (View Transitions API)
   ======================================== */

/* View Transitions 활성화 */
@view-transition {
    navigation: auto;
}

/* 메인 콘텐츠 영역에 view-transition-name 지정 */
#main-content {
    view-transition-name: main-content;
}

/* 사이드바는 전환에서 제외 (고정) */
aside {
    view-transition-name: sidebar;
}

/* 전환 애니메이션: 이전 페이지가 사라질 때 */
::view-transition-old(main-content) {
    animation: fadeOut 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* 전환 애니메이션: 새 페이지가 나타날 때 */
::view-transition-new(main-content) {
    animation: fadeIn 0.22s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* 사이드바는 애니메이션 없이 유지 */
::view-transition-old(sidebar),
::view-transition-new(sidebar) {
    animation: none;
}

/* 폴백: View Transitions 미지원 브라우저용 */
.page-transition-wrapper {
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

.page-transition-wrapper.fade-out {
    opacity: 0;
}

/* 페이지 진입 애니메이션 */
.page-content-enter {
    animation: fadeIn 0.3s ease-out forwards;
}

/* ========================================
   노이즈 텍스처 오버레이
   ======================================== */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ========================================
   버튼 스타일
   ======================================== */

/* Primary 버튼 */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-charcoal);
    color: var(--color-white);
    font-weight: 500;
    border-radius: 0.75rem;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

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

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Secondary 버튼 */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-white);
    color: var(--color-slate);
    font-weight: 500;
    border: 1px solid var(--color-pearl);
    border-radius: 0.75rem;
    transition: all var(--transition-normal);
}

.btn-secondary:hover {
    background-color: var(--color-ivory);
    border-color: var(--color-silver);
    transform: translateY(-1px);
}

/* Ghost 버튼 */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: var(--color-slate);
    font-weight: 500;
    border-radius: 0.75rem;
    transition: all var(--transition-normal);
}

.btn-ghost:hover {
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
}

/* ========================================
   카드 스타일
   ======================================== */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-pearl);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

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

/* ========================================
   사이드바 스타일
   ======================================== */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--color-silver);
    border-radius: 0.75rem;
    transition: all var(--transition-normal);
}

.sidebar-nav-item:hover {
    background-color: var(--color-graphite);
    color: var(--color-white);
}

.sidebar-nav-item.active {
    background-color: var(--color-graphite);
    color: var(--color-white);
}

/* ========================================
   구분선 스타일
   ======================================== */
.divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-silver), transparent);
}

.divider-line-light {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-pearl), transparent);
}

/* ========================================
   로고 스타일
   ======================================== */
.logo-text {
    font-weight: 200;
    letter-spacing: 0.15em;
    transition: letter-spacing var(--transition-slow);
}

.logo-text:hover {
    letter-spacing: 0.25em;
}

/* ========================================
   그라데이션 배경
   ======================================== */
.bg-gradient-dark {
    background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-graphite) 50%, var(--color-charcoal) 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.bg-gradient-light {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-ivory) 50%, var(--color-pearl) 100%);
}

/* ========================================
   라인 패턴 (장식용)
   ======================================== */
.line-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-silver) 0px,
        var(--color-silver) 1px,
        transparent 1px,
        transparent 80px
    );
    pointer-events: none;
}

/* ========================================
   장식용 원
   ======================================== */
.decorative-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

/* ========================================
   스크롤바 스타일
   ======================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-ivory);
}

::-webkit-scrollbar-thumb {
    background: var(--color-silver);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-slate);
}

/* ========================================
   유틸리티 클래스
   ======================================== */
.text-charcoal { color: var(--color-charcoal); }
.text-graphite { color: var(--color-graphite); }
.text-slate { color: var(--color-slate); }
.text-silver { color: var(--color-silver); }

.bg-charcoal { background-color: var(--color-charcoal); }
.bg-graphite { background-color: var(--color-graphite); }
.bg-slate { background-color: var(--color-slate); }
.bg-ivory { background-color: var(--color-ivory); }
.bg-pearl { background-color: var(--color-pearl); }

.border-pearl { border-color: var(--color-pearl); }
.border-silver { border-color: var(--color-silver); }