/**
 * DaisyUI 테마 커스터마이징
 * 
 * 이 파일은 프로젝트의 색상 테마를 중앙에서 관리합니다.
 * 색상을 변경하려면 아래 색상 변수만 수정하면 됩니다.
 */

/* ============================================
   NanumSquareNeo (한글) - Variable Font
   ============================================ */
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('../assets/font/NanumSquareNeo/NanumSquareNeo-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* 한글 자간 보정 (NanumSquareNeo 기본 자간이 다소 넓음) */
body {
    letter-spacing: -0.05em;
}

/* ============================================
   Montserrat 폰트
   ============================================ */
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/font/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* ============================================
   색상 변수 정의
   ============================================ */
:root {
    /* Primary 색상 - 차분한 slate 계열 */
    --color-primary: #475569;        /* slate-600 */
    --color-primary-hover: #334155;  /* slate-700 */
    --color-primary-focus: #334155;  /* slate-700 */
    --color-primary-content: #ffffff; /* white */
    
    /* Primary 투명도 변형 */
    --color-primary-10: rgba(71, 85, 105, 0.1);  /* slate-600 10% */
    --color-primary-20: rgba(71, 85, 105, 0.2);  /* slate-600 20% */
    
    /* Base 색상 (배경, 텍스트) */
    --color-base-100: #ffffff;
    --color-base-200: #f1f5f9;  /* slate-100 */
    --color-base-300: #e2e8f0;  /* slate-200 */
    --color-base-content: #0f172a;  /* slate-900 */
}

/* ============================================
   버튼 스타일
   ============================================ */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* ============================================
   링크 스타일
   ============================================ */
.link-primary {
    color: var(--color-primary) !important;
}

.link-primary:hover {
    color: var(--color-primary-hover) !important;
}

/* ============================================
   배지 스타일
   ============================================ */
.badge-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-content) !important;
}

/* ============================================
   텍스트 및 배경 색상
   ============================================ */
.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-primary\/10 {
    background-color: var(--color-primary-10) !important;
}

.bg-primary\/20 {
    background-color: var(--color-primary-20) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

/* ============================================
   입력 필드 포커스 색상
   ============================================ */
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-primary) !important;
    outline-color: var(--color-primary) !important;
}

/* ============================================
   추가 컴포넌트 스타일
   ============================================ */

/* 체크박스, 라디오 버튼 */
.checkbox-primary:checked,
.radio-primary:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* 탭 */
.tab-active {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* 진행 바 */
.progress-primary {
    background-color: var(--color-primary) !important;
}

/* 토글 */
.toggle-primary:checked {
    background-color: var(--color-primary) !important;
}

/* ============================================
   Works 직무소개 카드 애니메이션
   ============================================ */
@keyframes worksFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes worksTextReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 카드 그리드: 카드가 순차적으로 등장 */
.works-card-grid > .card {
    opacity: 0;
    animation: worksFadeInUp 0.6s ease-out forwards;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.works-card-grid > .card:hover {
    transform: translateY(-2px);
}

/* 카드 내부 텍스트: 제목 → 본문 순서로 등장 */
.works-card-grid .card .card-title {
    opacity: 0;
    animation: worksTextReveal 0.5s ease-out forwards;
}

.works-card-grid .card .card-body > p {
    opacity: 0;
    animation: worksTextReveal 0.5s ease-out 0.15s forwards;
}

/* 스타거 딜레이 (카드 순차 등장) */
.works-card-grid > .card:nth-child(1) { animation-delay: 0s; }
.works-card-grid > .card:nth-child(1) .card-title { animation-delay: 0.1s; }
.works-card-grid > .card:nth-child(1) .card-body > p { animation-delay: 0.25s; }

.works-card-grid > .card:nth-child(2) { animation-delay: 0.08s; }
.works-card-grid > .card:nth-child(2) .card-title { animation-delay: 0.18s; }
.works-card-grid > .card:nth-child(2) .card-body > p { animation-delay: 0.33s; }

.works-card-grid > .card:nth-child(3) { animation-delay: 0.16s; }
.works-card-grid > .card:nth-child(3) .card-title { animation-delay: 0.26s; }
.works-card-grid > .card:nth-child(3) .card-body > p { animation-delay: 0.41s; }

.works-card-grid > .card:nth-child(4) { animation-delay: 0.24s; }
.works-card-grid > .card:nth-child(4) .card-title { animation-delay: 0.34s; }
.works-card-grid > .card:nth-child(4) .card-body > p { animation-delay: 0.49s; }

.works-card-grid > .card:nth-child(5) { animation-delay: 0.32s; }
.works-card-grid > .card:nth-child(5) .card-title { animation-delay: 0.42s; }
.works-card-grid > .card:nth-child(5) .card-body > p { animation-delay: 0.57s; }

.works-card-grid > .card:nth-child(6) { animation-delay: 0.4s; }
.works-card-grid > .card:nth-child(6) .card-title { animation-delay: 0.5s; }
.works-card-grid > .card:nth-child(6) .card-body > p { animation-delay: 0.65s; }

.works-card-grid > .card:nth-child(7) { animation-delay: 0.48s; }
.works-card-grid > .card:nth-child(7) .card-title { animation-delay: 0.58s; }
.works-card-grid > .card:nth-child(7) .card-body > p { animation-delay: 0.73s; }

.works-card-grid > .card:nth-child(8) { animation-delay: 0.56s; }
.works-card-grid > .card:nth-child(8) .card-title { animation-delay: 0.66s; }
.works-card-grid > .card:nth-child(8) .card-body > p { animation-delay: 0.81s; }

.works-card-grid > .card:nth-child(9) { animation-delay: 0.64s; }
.works-card-grid > .card:nth-child(9) .card-title { animation-delay: 0.74s; }
.works-card-grid > .card:nth-child(9) .card-body > p { animation-delay: 0.89s; }

.works-card-grid > .card:nth-child(10) { animation-delay: 0.72s; }
.works-card-grid > .card:nth-child(10) .card-title { animation-delay: 0.82s; }
.works-card-grid > .card:nth-child(10) .card-body > p { animation-delay: 0.97s; }

.works-card-grid > .card:nth-child(11) { animation-delay: 0.8s; }
.works-card-grid > .card:nth-child(11) .card-title { animation-delay: 0.9s; }
.works-card-grid > .card:nth-child(11) .card-body > p { animation-delay: 1.05s; }

.works-card-grid > .card:nth-child(12) { animation-delay: 0.88s; }
.works-card-grid > .card:nth-child(12) .card-title { animation-delay: 0.98s; }
.works-card-grid > .card:nth-child(12) .card-body > p { animation-delay: 1.13s; }

/* ============================================
   Sub Banner / 직무소개 영상: 좌→우 무한 스크롤, 호버 시 확대·정지
   ============================================ */
.sub-banner-mask {
    overflow: hidden;
    width: 100%;
}

.sub-banner-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    will-change: transform;
    animation: sub-banner-scroll 20s linear infinite;
}

.sub-banner-track:has(.sub-banner-card:hover) {
    animation-play-state: paused;
}

.sub-banner-card {
    flex-shrink: 0;
    width: 400px;
    transition: transform 0.3s ease;
}

/* 직무소개 영상·서브배너: DaisyUI image-full 기본 오버레이(opacity-75) 완화 → 원래 색이 잘 보이도록 */
.sub-banner-card.image-full::before {
    opacity: 0.25 !important;
}

.sub-banner-card figure.aspect-video {
    aspect-ratio: 16 / 9;
}

.sub-banner-card:hover {
    transform: scale(1.06);
}

@keyframes sub-banner-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}