/* ===================================================
 * @module now-timeline-home-widget | @vars 전역 다크모드 변수 재사용 (신규 변수 없음 — 케이스 A)
 * @pair inc/now-timeline-home-widget.php
 * @flow 홈/프론트 화면 최상단 — 최근 45일을 눈금자형 그래프로, 우측 15칸(25%)은
 *       아직 오지 않은 날짜라 데이터 없이 빈 눈금으로 자연스럽게 이어짐.
 *
 * 라이트 모드 폴백 안내: newsroom/game-review-home-widget.css와 동일 원칙 — 이 파일이 쓰는
 * --bg-/--text-/--border-/--point 계열 전역 변수는 body.dark-theme 프리셋 안에서만
 * 정의되므로 모든 사용처에 라이트 폴백 값을 명시한다. --point-color는 프리셋 무관하게
 * :root에 고정값이라 폴백만 있으면 다크모드 별도 선언 불필요(케이스 A 원칙 그대로).
 * =================================================== */

.now-timeline-home-widget-wrap {
    margin: 40px auto 8px;
}

/* ── 눈금자 본체. 타이틀+설명은 박스 우상단 구석에 그룹으로 배치, 오른쪽 끝
   고정하고 콘텐츠가 늘어나는 만큼 왼쪽으로 확장 ── */
.ntw-scroll {
    position: relative;
    overflow-x: auto;
    padding: 14px 4px 4px;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 10px;
}
.ntw-inner {
    position: relative;
    z-index: 1;
    min-width: 900px;
    padding: 0 20px 10px;
}

/* 다른 홈 위젯 헤더(newsroom/game-review)와 동일한 알약+세로바+설명 조합을 박스 우상단
   구석 그룹으로 배치 — right 고정, width auto라 콘텐츠만큼 왼쪽으로 늘어남.
   눈금자 레이어(z-index:1)보다 위(z-index:2)라 겹쳐도 항상 보임 */
.ntw-title-group {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.ntw-title {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffffff;
    background: var(--point-color, #C21807);
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.ntw-title-bar {
    width: 1px;
    height: 12px;
    background: var(--border-main, #d8d8de);
    flex: 0 0 auto;
}
.ntw-title-caption {
    color: #b8971a;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ntw-month-row,
.ntw-tick-row,
.ntw-scale-row {
    display: grid;
    grid-template-columns: repeat(60, 1fr);
    column-gap: 1px;
}

.ntw-month-row { height: 11px; margin-bottom: 4px; }
.ntw-month-label {
    position: relative;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-soft, #8a8a92);
    white-space: nowrap;
    align-self: end;
}
/* 월 라벨(MAY/JUN/JUL 등) 위에 뒤집힌 쐐기(역삼각형) 표식 — 레드 */
.ntw-month-label:not(:empty)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--point-color, #C21807);
}

.ntw-tick-row {
    align-items: end;
    height: 42px;
    border-bottom: 2px solid var(--border-main, #e2e2e8);
    position: relative;
}

.ntw-scale-row { height: 14px; margin-top: 4px; align-items: start; }
.ntw-scale-label {
    font-variant-numeric: tabular-nums;
    font-size: 8px;
    color: var(--text-soft, #8a8a92);
    text-align: center;
    line-height: 1;
}
/* 10일 단위(10/20/30)는 더 크고 진하게 — 눈금자 위에서 대략적인 위치 파악용 앵커 */
.ntw-scale-label.is-tenth {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main, #211a15);
}
/* 일요일은 레드로 구분 — is-tenth와 같이 붙으면(예: 10일이 일요일) 색상만 레드 우선 */
.ntw-scale-label.is-sunday {
    color: var(--point-color, #C21807);
}

.ntw-day {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}
.ntw-day.has-content { cursor: pointer; }
.ntw-day:focus-visible { outline: none; }
.ntw-day:focus-visible .ntw-tick,
.ntw-day:focus-visible .ntw-marker {
    box-shadow: 0 0 0 2px var(--bg-panel, #fff), 0 0 0 4px var(--point-color, #C21807);
}

/* 기준선 눈금 — 빈 날은 흐리게, 콘텐츠 있는 날은 포인트 컬러 */
.ntw-tick {
    width: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--border-main, #d9d3cd);
    height: 6px;
    transition: filter 0.15s ease;
}
.ntw-day.has-content .ntw-tick { background: var(--point-color, #C21807); }
.ntw-day.is-today .ntw-tick { background: var(--text-main, #211a15); }
.ntw-day.is-today.has-content .ntw-tick { background: var(--point-color, #C21807); }
/* 호버 피드백 — 막대는 폭이 3px라 scale은 왜곡되기 쉬워 밝기만 살짝 올림 */
.ntw-day.has-content:hover .ntw-tick { filter: brightness(1.15); }

/* A타입 — 텍스트만 있는 단일 글: 짧은 막대 */
.ntw-day.type-a .ntw-tick { height: 15px; }

/* B타입 — 이미지/갤러리 또는 복수 글: 막대보다 긴 이벤트 마커.
   확산 링은 box-shadow만 애니메이션(위치 정렬용 transform: translateX(-50%)와
   분리해 충돌 방지, hover 시의 scale transform도 그대로 유지됨) */
.ntw-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--point-color, #C21807);
    border: 2px solid var(--bg-panel, #fff);
    box-shadow: 0 0 0 1px var(--point-color, #C21807);
    transition: transform 0.15s ease, filter 0.15s ease;
    /* 라이트 배경은 어두운 브랜드 레드만으로도 대비가 충분하지만, 다크모드의
       어두운 --bg-panel 위에서는 같은 저채도 레드끼리 겹쳐 루미넌스 차이가 거의
       없어 잘 안 보임 — body.dark-theme에서만 더 밝고 채도 높은 톤으로 교체 */
    --ntw-glow-rgb: 194, 24, 7;
    animation: ntw-marker-breathe 2.4s ease-in-out infinite;
}
body.dark-theme .ntw-marker {
    --ntw-glow-rgb: 255, 92, 74;
}
@keyframes ntw-marker-breathe {
    0%, 100% {
        box-shadow: 0 0 0 1px var(--point-color, #C21807), 0 0 0 0 rgba(var(--ntw-glow-rgb), 0.55);
    }
    50% {
        box-shadow: 0 0 0 1px var(--point-color, #C21807), 0 0 0 7px rgba(var(--ntw-glow-rgb), 0);
    }
}
/* 원형이라 중심 기준 scale은 왜곡 없이 자연스러움 */
.ntw-day.has-content:hover .ntw-marker {
    transform: translateX(-50%) scale(1.15);
    filter: brightness(1.15);
}
.ntw-stem {
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 1.5px;
    height: 24px;
    background: var(--point-color, #C21807);
    opacity: 0.55;
    transform: translateX(-50%);
}

/* TODAY 가이드 — 세로 점선 + 그 위에 얹히는 라벨(겹치지 않도록 선 위쪽 끝에 별도 배치).
   점선 아래쪽은 눈금(기준선) 바로 위에서 멈추도록 bottom:0 — 날짜 숫자 행까지 내려가지 않음 */
.ntw-today-line {
    position: absolute;
    left: 50%;
    top: -13px;
    bottom: 0;
    width: 0;
    border-left: 1.5px dashed var(--text-soft, #a89b8f);
    transform: translateX(-50%);
    pointer-events: none;
}
.ntw-today-chip {
    position: absolute;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-main, #e2e2e8);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-soft, #6e6259);
    white-space: nowrap;
    z-index: 2;
}

/* 호버/포커스 툴팁 — CSS ::after(content:attr) 방식은 .ntw-scroll의 overflow-x:auto가
   스펙상 overflow-y도 강제로 auto(클리핑)로 만들어 상단 행에서 잘리는 문제가 있어
   (2026-07-13) js/now-timeline-home-widget.js가 document.body에 직접 붙이는
   position:fixed 툴팁으로 교체 — 박스의 overflow/클리핑에 전혀 영향받지 않음 */
.ntw-tooltip {
    position: fixed;
    background: var(--text-main, #211a15);
    color: var(--bg-panel, #fff);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    padding: 6px 9px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease;
    /* JS가 top에 앵커 좌표(요소 상단 - 9px)를 심어주므로, 툴팁 자기 높이만큼(-100%)
       위로 완전히 띄워야 앵커 지점에 "떠 있는" 모양이 됨 — 박스 밖으로도 자유롭게 나감 */
    transform: translate(-50%, calc(-100% + 4px));
    z-index: 9999;
    pointer-events: none;
}
.ntw-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%);
}

@media (max-width: 640px) {
    .ntw-inner { padding: 0 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .ntw-tooltip,
    .ntw-tick,
    .ntw-marker {
        transition: none;
    }
    .ntw-marker {
        animation: none;
    }
}