/* ===================================================
 * @module ron-box1-home-widget | @source strava-personal/assets/frontend-style.css (BOX1 관련 규칙만 추출)
 * @pair inc/ron-box1-home-widget.php
 * @flow 홈 화면 뉴스룸 우측 컬럼(.nhw-col-right)에 RON 대시보드 BOX1을 원본 그대로 이식.
 *
 * 원본과의 차이점(의도적):
 *   - 전체 frontend-style.css(3879줄)를 그대로 불러오지 않고 BOX1(.strava-box-combined)
 *     관련 규칙만 추출. 원본의 :root 전역 변수(--text/--orange/--stbc-div)는 여기서
 *     --ron- 접두어를 붙여 .nhw-col-right로 스코프 다운 — 사이트 전역 :root 오염 방지.
 *   - 반응형은 원본(BOX2 캘린더와 나란히 배치되는 넓은 1400px 컨텍스트 기준)을 그대로
 *     포팅하지 않고, 이 위젯의 실제 폭(뉴스룸 그리드 브레이크포인트 900px/640px와 연동)에
 *     맞춰 폰트 크기만 축소하는 자체 규칙으로 재작성.
 *   - Bebas Neue 폰트는 원래 strava_YYYYMM 페이지에서만 로드되므로, 홈에서도 이 위젯이
 *     켜져 있을 때 functions.php에서 별도로 Google Fonts CDN을 enqueue한다.
 * =================================================== */

.nhw-col-right {
    --ron-orange: #ff8787;
    --ron-text: #1a1a1a;
    --ron-stbc-div: rgba(0, 0, 0, 0.10);
}
body.dark-theme .nhw-col-right {
    --ron-orange: #e05252;
    --ron-text: rgba(255, 255, 255, 0.9);
    --ron-stbc-div: rgba(255, 255, 255, 0.22);
}

/* .nhw-col-right는 <a> 래퍼(레이아웃 담당), 그 안의 .strava-box-combined가 실제 BOX1
   카드(원본 마크업 그대로) — 카드룩은 .strava-box-combined에, 래퍼는 flex item 배치만 담당.
   래퍼가 display:flex라 자식(.strava-box-combined)이 기본 align-items:stretch로 높이를 꽉 채움. */
/* flex-basis(8:2 비율)는 이 위젯의 레이아웃 오너인 css/newsroom-home-widget.css의
   .nhw-main-row 규칙에서 관리 — 여기서는 BOX1 카드 자체의 모양만 담당 */
.nhw-col-right {
    display: flex;
    text-decoration: none;
    min-width: 0;
}

.nhw-col-right .strava-box-combined {
    width: 100%;
    background: #fff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* 왼쪽 상단만 RIDE OR NOT 태그 접점에 맞춰 각지게, 좌하단은 원래대로 둥글게 유지
       (2026-07-13, 태그/캡션 컬럼 양쪽 모서리도 둥글어서 대칭) */
    border-top-left-radius: 0 !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.dark-theme .nhw-col-right .strava-box-combined {
    background:   rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:   0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
/* BOX1 카드는 4개 위젯 중 유일하게 호버 피드백이 없던 클릭 카드 — 뉴스룸/게임 카드와
   같은 "리프트+테두리 악센트" 문법이되, 사이트 공통 레드 대신 RON 고유 색상(--ron-orange,
   .nhw-col-right에 라이트/다크 각각 스코프 선언됨)을 사용해 위젯 정체성을 살림 */
.nhw-col-right:hover .strava-box-combined {
    transform: translateY(-2px);
    border-color: var(--ron-orange) !important;
    box-shadow: 0 6px 18px rgba(252, 76, 2, 0.15) !important;
}

.stbc-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border-bottom: 1px solid var(--ron-stbc-div) !important;
}

.stbc-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 10px 14px !important;
    border-right: 1px solid var(--ron-stbc-div) !important;
}

.stbc-month-year {
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #bbb !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

.stbc-month-num {
    font-family: 'Bebas Neue', 'Impact', sans-serif !important;
    font-size: 72px !important;
    font-weight: 400 !important;
    line-height: 0.9 !important;
    color: var(--ron-text) !important;
    letter-spacing: -2px !important;
}

.stbc-right {
    display: flex !important;
    flex-direction: column !important;
}

.stbc-year-block,
.stbc-month-block {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 10px !important;
}

.stbc-year-block {
    border-bottom: 1px solid var(--ron-stbc-div) !important;
}

.stbc-year-label,
.stbc-mt-label {
    font-size: 7.5px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--ron-orange) !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

.stbc-year-val {
    font-family: 'Bebas Neue', 'Impact', sans-serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 0.9 !important;
    color: var(--ron-text) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

.stbc-year-unit {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #aaa !important;
}

.stbc-mt-val {
    font-family: 'Bebas Neue', 'Impact', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 0.9 !important;
    color: #1864ab !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

.stbc-mt-unit {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(24, 100, 171, 0.55) !important;
}

.stbc-spark-section {
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.stbc-spark-stack {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
}

.stbc-spark-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}

.stbc-trend-tag {
    font-size: 7.5px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--ron-orange) !important;
    margin-bottom: 1px !important;
}

.stbc-trend-sub {
    font-size: 9px !important;
    color: #ccc !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.stb-spark-chart {
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 36px !important;
    margin-top: 6px !important;
}

.s-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
}

.s-bar {
    width: 100% !important;
    border-radius: 3px 3px 0 0 !important;
    background: #ebebeb;
    min-height: 4px;
}

.s-bar.on {
    background: #1864ab !important;
}

.s-bar.has {
    background: rgba(24, 100, 171, 0.30) !important;
}

.s-lbl {
    font-size: 7px !important;
    font-weight: 700;
    color: #d0d0d0;
}

.s-lbl.on {
    color: #1864ab !important;
}

.s-lbl.has {
    color: #1864ab !important;
    opacity: 0.5;
}

.stbc-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    border-top: 1px solid var(--ron-stbc-div) !important;
    align-items: center !important;
}

.stbc-stat {
    padding: 9px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.stbc-stat--mid {
    position: relative !important;
}
.stbc-stat--mid::before,
.stbc-stat--mid::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 40% !important;
    background: var(--ron-stbc-div) !important;
}
.stbc-stat--mid::before { left: 0 !important; }
.stbc-stat--mid::after  { right: 0 !important; }

.stbc-stat-val {
    font-family: 'Bebas Neue', 'Impact', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--ron-text) !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
}

.stbc-stat-unit {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #aaa !important;
}

.stbc-stat-label {
    font-size: 7.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #ccc !important;
    margin-top: 3px !important;
}

/* ── 이 위젯 전용 반응형: 원본(1400px, BOX2와 나란히) 브레이크포인트 대신
   뉴스룸 그리드 브레이크포인트(900px/640px)에 맞춰 폰트만 축소 ── */
@media (max-width: 900px) {
    .stbc-month-num { font-size: 56px !important; }
    .stbc-year-val  { font-size: 28px !important; }
    .stbc-mt-val    { font-size: 20px !important; }
}

@media (max-width: 640px) {
    .stbc-month-num { font-size: 64px !important; }
    .stbc-year-val  { font-size: 32px !important; }
    .stbc-mt-val    { font-size: 22px !important; }
}