/* ------------------------------
   Google Font (optional)
------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

.album-card, .album-info, .lightbox {
    font-family: 'Noto Sans KR', sans-serif;
}

/* ------------------------------
   앨범 카드
------------------------------- */
/* 앨범 전체를 감싸는 그리드 */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* 고정 너비 삭제 */
.album-card {
    width: 100%;        /* ← 카드가 칸의 너비에 맞춰 자동 조절됨 */
    max-width: 260px;   /* ← 카드가 너무 넓어지는 것 방지 */
    margin: 0 auto;     /* 가운데 정렬 */
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.album-card:hover {
    transform: translateY(-4px);
}

.album-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.album-info {
    padding: 10px 15px;
    background: #fff;
    color: #444;
    font-size: 14px;
}


/* ------------------------------
   Lightbox Modal
------------------------------- */
/* 라이트박스 전체 */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.hidden { display: none; }

/* 정사각형 고정 */
.lightbox-image-wrapper {
    position: relative;        /* ← 화살표 위치 기준 */
    width: 80vmin;
    height: 80vmin;
    border-radius: 12px;
    overflow: hidden;
}

/* 블러 배경 */
.blur-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(25px) brightness(0.7);
    transform: scale(1.2);
    z-index: 1;
}

/* 정면 이미지 */
.front-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

/* 텍스트 */
.lightbox-text {
    margin-top: 18px;
    color: white;
    text-align: center;
}

/* 닫기 버튼(X) */
.close-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 42px;
    cursor: pointer;
    -webkit-text-stroke: 2px white;
    font-weight: 200;
    color: white;
    z-index: 99999;
}

.close-btn:hover {
    opacity: 0.7;
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* 좌우 화살표 — 이미지 박스 기준 */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   /* 정확히 가운데 */
    font-size: 55px;
    color: white;
    cursor: pointer;
    user-select: none;
    -webkit-text-stroke: 1px white; /* X와 두께 동일 */
    font-weight: 200;
    z-index: 10;
    opacity: 0.9;
}

.nav-btn:hover {
    opacity: 0.7;
    transform: scale(1.1) translateY(-46%);
    transition: transform 0.2s ease;
}

.prev { left: 20px; }
.next { right: 20px; }


/* ------------------------------
   TOP / YEAR TOGGLE COMMON WRAPPER
------------------------------ */
.toggle-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* 두 토글 사이 간격 */
    margin: 40px 0 25px;
}

/* --- Toggle Container --- */
.pill-toggle {
    position: relative;
    display: inline-flex;
    gap: 6px;
    padding: 1px;                    /* 전체 높이 증가 */
    border-radius: 32px;             /* 더 둥글게 */
    background: #fafafb;
    border: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
    align-items: center;
}

/* === Slider === */
.pill-slider {
    position: absolute;
    top: 0;              /* 4px → 0 */
    left: 0;             /* 4px → 0 */
    height: 100%;        /* calc(100% - 8px) → 100% */
    width: 0;
    border-radius: 32px;
    z-index: 0;
    transition: transform 0.25s ease, width 0.25s ease;
}

/* Gradient blue */
/* .pill-slider::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: linear-gradient(135deg, #66ffff, #00ccff, #3399ff);
    z-index:-1;
} */

/* Inner solid color */
/* .pill-slider::after {
    content:"";
    position:absolute;
    inset:2px;                       
    border-radius:inherit;
    background:#007bff;
    z-index:-1;
} */

/* Gradient border */
.pill-slider::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: linear-gradient(135deg, #444, #dfdfdf, #6f6f6f);
    z-index:-1;
}

/* Inner solid color */
.pill-slider::after {
    content:"";
    position:absolute;
    inset:2px;                       
    border-radius:inherit;
    background:#3f3f3f;
    z-index:-1;
}

.pill-btn {
    position: relative;
    z-index: 1;
    padding: 8px 20px;               /* iOS 기준 가장 안정적인 값 */
    font-size: 18px;
    font-weight: 400;
    border-radius: 24px;
    cursor: pointer;
    color: #444;
    user-select: none;
    transition: color 0.25s ease;
}

.pill-btn.active {
    color: white;
}


/* --- Animated Gradient Keyframes --- */
@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Animated Card Fade Up ---- */
@keyframes cardFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Album Card Hover Animation --- */
.album-card {
    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    cursor: pointer;
}

/* hover 되었을 때 */
.album-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    filter: brightness(1.05);
}

@media (max-width: 600px) {

    /* 모바일에서는 토글 2개를 세로로 나열 */
    .toggle-bar {
        flex-direction: column;  /* 가로 → 세로 */
        gap: 16px;               /* 세로 간격 적당히 */
        align-items: center;     /* 가운데 정렬 */
        margin: 20px 0;
    }

    /* 토글 자체 크기 축소 */
    .pill-toggle {
        padding: 4px;
        border-radius: 24px;
        gap: 4px;
    }

    /* 슬라이더 높이/위치도 맞게 축소 */
    .pill-slider {
        top: 4px;
        left: 0px;
        height: calc(100% - 8px);
    }

    /* 슬라이더 내부 파란 영역도 축소 */
    .pill-slider::after {
        inset: 1.5px;
    }

    /* 버튼 크기/폰트 축소 */
    .pill-btn {
        padding: 6px 14px;
        font-size: 14px;
        border-radius: 18px;
    }

    /* 정사각형 이미지 박스 자체 축소 */
    .lightbox-image-wrapper {
        width: 90vmin;     /* 기존 80vmin → 약간 키움 (세로 화면 고려) */
        height: 90vmin;
        border-radius: 10px;
    }

    /* 닫기 버튼(X) 줄이기 */
    .close-btn {
        font-size: 28px;        /* 42px → 28px */
        top: 15px;              /* 25px → 15px (조금 더 붙이기) */
        right: 18px;            /* 35px → 18px */
        -webkit-text-stroke: 1.5px white; /* 두께도 줄임 */
    }

    /* 좌우 화살표 크기·위치 축소 */
    .nav-btn {
        font-size: 34px;        /* 55px → 34px */
        -webkit-text-stroke: 1px white;
        opacity: 0.85;
    }

    .prev { left: 10px; }       /* 좌우 여백 축소 */
    .next { right: 10px; }

    /* 텍스트 크기 조정 */
    .lightbox-text {
        font-size: 14px;
        margin-top: 14px;
        padding: 0 10px;        /* 모바일에서 텍스트 폭 보정 */
    }
}