/* 메인 페이지 상단 다음 세션 카운트다운 위젯 (F1 box-box 다크 블록 스타일) */

/* ── 1. 위젯 컨테이너 ─────────────────────────────────────── */
.countdown-widget {
    margin: 1rem 0 0.5rem;
}

.countdown-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;                 /* 헤더·시계·타깃 사이 간격 압축 */
    /* 아래 검색바(max-width: 48rem)와 좌우 폭을 맞춰 중앙 정렬 */
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.9rem 1rem;         /* 전체 padding 16px 내외로 축소 */
    background: #0a0a0c;
    border: 1px solid #26272e;
    border-left: 4px solid #ff1801;
    border-radius: 0.65rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* ── 2. 한 줄 배치: [세션 정보] | [타이머(중앙)] | [시간대 토글] ── */
/* 좌/우 컬럼을 1fr로 동일하게 잡아, 좌우 요소 폭과 무관하게 타이머(auto)가 항상 정중앙에 오도록 함 */
.countdown-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.countdown-meta {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;                 /* 라벨/세션/트랙 줄 간격 타이트하게 */
    min-width: 0;
    justify-self: start;
}

.countdown-clock {
    justify-self: center;
}

.countdown-bar .countdown-tz-toggle {
    justify-self: end;
}

.countdown-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #ff1801;
    text-transform: uppercase;
}

.countdown-session {
    font-size: 1.15rem;           /* 타이머 숫자(2rem) 대비 계층 확보 */
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.countdown-track {
    font-size: 0.8rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 3. 시간대 토글 (KST / Track Time) ────────────────────── */
.countdown-tz-toggle {
    display: inline-flex;
    background: #17181d;
    border: 1px solid #2c2e36;
    border-radius: 0.5rem;
    padding: 0.15rem;
    gap: 0.15rem;
    flex-shrink: 0;
}

.tz-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tz-btn:hover {
    color: #e5e7eb;
}

.tz-btn.active {
    background: #ff1801;
    color: #ffffff;
}

/* ── 4. 시계: HRS : MINS : SECS 블록 ──────────────────────── */
.countdown-clock {
    display: flex;
    align-items: center;
    gap: 0.5rem;                  /* 블록 간 기본 간격 (콜론 포함 12~16px) */
}

.countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 3.7rem;
    padding: 0.45rem 0.4rem;
    background: #121317;
    border: 1px solid #26272e;
    border-radius: 0.45rem;
}

.countdown-digits {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 2rem;              /* 세션 타이틀(1.15rem)보다 확실히 크게 */
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.countdown-unit {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #6b7280;
    text-transform: uppercase;
}

.countdown-sep {
    font-size: 1.5rem;
    font-weight: 800;
    color: #3a3d47;
    line-height: 1;
    /* 콜론 좌우 여백을 음수 마진으로 당겨 숫자에 밀착 */
    margin: -0.55rem -0.2rem 0;
}

/* 세션 임박(1시간 이내) 강조 */
.countdown-clock.imminent .countdown-digits {
    color: #ff1801;
    animation: countdown-pulse 1.2s ease-in-out infinite;
}

@keyframes countdown-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── 5. 타깃 시각(선택된 시간대 기준) ─────────────────────── */
.countdown-target {
    font-size: 0.76rem;
    color: #9ca3af;
    text-align: center;           /* 타이머 아래 중앙 정렬 */
}

.countdown-target-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ── 6. 반응형 (모바일 640px 이하) ────────────────────────── */
@media (max-width: 640px) {
    .countdown-card {
        padding: 0.8rem 0.85rem;
        gap: 0.5rem;
    }
    /* 모바일: 3분할이 좁아지므로 세로로 쌓아 중앙 정렬 (세션 → 타이머 → 토글) */
    .countdown-bar {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.55rem;
    }
    .countdown-meta {
        justify-self: center;
        align-items: center;
        text-align: center;
    }
    .countdown-bar .countdown-tz-toggle {
        justify-self: center;
    }
    .countdown-clock {
        gap: 0.35rem;
    }
    .countdown-block {
        min-width: 3.1rem;
        padding: 0.4rem 0.3rem;
    }
    .countdown-digits {
        font-size: 1.7rem;
    }
    .countdown-sep {
        font-size: 1.3rem;
        margin: -0.5rem -0.15rem 0;
    }
    .countdown-session {
        font-size: 1.05rem;
    }
}