/* ============================================================================
   지휘소 홈 전용 컴포넌트 (design-system v1.69)
   — Subject Situation Board(§3.8.13 과목 상황판: 과목 블록+전광판 스코어보드)
   — 스터디룸 질문 카드(§4.13 ⑦)
   소비처: thema/Basic/main/rlcnf.php(RL_TAB5_ENABLED ON 분기).
   CSS 소유권: 홈 지휘소 전용 스타일은 본 파일에만(rl_note.css에 추가 금지).
   토큰만 사용(raw hex·임의 px 0 — §8.5 G1/G2, 아이콘 px는 §2.7 스케일).
   ========================================================================== */

/* ── 과목 상황판(.rl-home-board) — 전광판(현재 과목 상태) + 과목변경 (§3.8.13 v1.82) ── */
.rl-home-board {
    /* 탭 간 카드 내부 패딩 정합 — .rl-banner(빠른학습·오답노트·모의 상단 카드) 기본과 동일(sp-4 sp-3).
       홈만 sp-3 전방향이라 상단 여백(12↔14px)이 달라 탭 이동 시 헤더 높이가 흔들리던 것 제거. */
    padding: var(--rl-sp-4) var(--rl-sp-3);
    background: var(--rl-surface-elev);
    border: 1px solid var(--rl-line-2);
    border-radius: var(--rl-r-md);
    margin: 0 0 var(--rl-sp-3);
}

/* 과목 블록 — eyebrow + 과목명 + D-day 칩 + 과목 변경(보조 톤). */
.rl-home-board__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rl-sp-3);
    padding-bottom: var(--rl-sp-2);
    margin-bottom: var(--rl-sp-2);
    border-bottom: 1px solid var(--rl-line-2);
}
.rl-home-board__context { min-width: 0; }
.rl-home-board__eyebrow {
    font-size: var(--rl-fs-caption-sm);
    font-weight: 500;
    /* 탭 간 타이포 정합 — .rl-banner .rl-state-label(빠른학습·오답노트 상단 카드 eyebrow)과 동일 line-height. */
    line-height: var(--rl-lh-snug);
    color: var(--rl-text-3);
}
.rl-home-board__subject-row {
    display: flex;
    align-items: center;
    gap: var(--rl-sp-2);
    margin-top: var(--rl-sp-1);
    min-width: 0;
}
.rl-home-board__name {
    margin: 0;
    /* 탭 간 타이포 정합 — .rl-banner h3(빠른학습·오답노트·모의 상단 카드 과목명)과 동일 크기·자간·행간.
       탭 이동 시 과목명이 커졌다 작아지는(15.5↔17px) 흔들림 제거. 같은 역할 = 같은 토큰. */
    font-size: var(--rl-fs-bodylg);
    font-weight: 700;
    color: var(--rl-text);
    line-height: var(--rl-lh-snug);
    letter-spacing: var(--rl-ls-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 과목 변경 — 보조 토글(§3.1.5 sub-link 톤, 유일한 강=추천 카드와 경쟁 금지). */
.rl-home-board__switch {
    display: inline-flex;
    align-items: center;
    gap: var(--rl-sp-1);
    flex-shrink: 0;
    min-height: 36px;
    margin: calc(var(--rl-sp-2) * -1) calc(var(--rl-sp-2) * -1) 0 0;
    padding: 0 var(--rl-sp-2);
    background: none;
    border: 0;
    border-radius: var(--rl-r-sm);
    font-size: var(--rl-fs-caption);
    font-weight: 500;
    color: var(--rl-text-3);
    cursor: pointer;
}
.rl-home-board__switch:active { color: var(--rl-primary); }
.rl-home-board__switch[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
    .rl-home-board__switch:hover { color: var(--rl-primary); background: var(--rl-surface-2); }
}
.rl-home-board__switch:focus-visible {
    outline: 2px solid var(--rl-primary);
    outline-offset: -2px;
}

/* 전광판 — 상태 수치 3칸 KPI 스코어보드(§3.4.5 Stat/KPI). 순서·경로·현재위치 없음(코치 아님). */
.rl-home-board__stats {
    display: flex;
    margin: 0;
}
.rl-home-board__stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rl-sp-1);
    padding: 0 var(--rl-sp-2);
    text-align: center;
}
/* 칸 사이 헤어라인 구분(스코어보드 그리드). */
.rl-home-board__stat + .rl-home-board__stat {
    border-left: 1px solid var(--rl-line-2);
}
.rl-home-board__stat-label {
    font-size: var(--rl-fs-caption-sm);
    font-weight: 500;
    color: var(--rl-text-3);
    white-space: nowrap;
}
.rl-home-board__stat-value {
    margin: 0;
    max-width: 100%;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 수치가 주인공 — 큰 strong + text 톤(스코어보드 hero). 단위는 축소. */
.rl-home-board__stat-value strong {
    font-size: var(--rl-fs-bodylg);
    font-weight: 700;
    color: var(--rl-text);
}
/* 미상 상태(시작 전·응시 전·—) — 후퇴 톤(수치 아님이 한눈에). */
.rl-home-board__stat-value.is-empty {
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text-4);
}

/* ── 스터디룸 섹션(§4.13 ⑧ v1.76) — 행 마크업·스타일은 rl_study.php 목록 행 그대로
   (study.css .rl-study-item 소유 — 본 파일이 행 내부를 재스타일하지 않는다). 여기는 홈
   컨테이너(head+roll 회전 프레임)만. 경계 메트릭은 모의 티커와 동일(surface+line+r-md). */
.rl-home-study {
    margin: var(--rl-sp-6) 0 var(--rl-sp-3); /* 그룹 간 24 — 위 형제(준비도)와 섹션 경계 단일 출처 */
    padding-top: var(--rl-sp-3);
    background: var(--rl-surface);
    border: 1px solid var(--rl-line);
    border-radius: var(--rl-r-md);
    overflow: hidden; /* 행 hover 풀폭 배경(surface-2)이 radius 밖으로 나가지 않게 */
}
.rl-home-study__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--rl-sp-3);
    padding: 0 var(--rl-page-padding-x); /* 행 좌우 패딩(study.css)과 동일 축 정렬 */
}
.rl-home-study__head-label {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--rl-fs-caption);
    color: var(--rl-text-3); letter-spacing: var(--rl-ls-body);
}
.rl-home-study__more {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--rl-fs-caption); color: var(--rl-text-4);
    text-decoration: none;
    transition: color var(--rl-dur-micro) ease;
}
@media (hover: hover) {
    .rl-home-study__more:hover { color: var(--rl-primary); text-decoration: none; }
}
.rl-home-study__more:active { color: var(--rl-primary); }
.rl-home-study__more:focus-visible {
    outline: 2px solid var(--rl-primary); outline-offset: 2px;
    border-radius: var(--rl-r-sm);
}
/* 회전 프레임 — 단일 슬롯의 내용만 교체(js), fade는 프레임 opacity 단일.
   iOS WebKit은 자체 합성 레이어로 승격되지 않은 다행 텍스트 블록의 opacity 페이드에서 매 프레임 텍스트를
   재래스터·안티에일리어싱해 잔상(겹침)·버벅임을 낸다(작은 head 칩은 무증상). translateZ(0)으로 자체 GPU
   레이어에 승격 → 텍스트 1회 래스터 후 레이어 통째로 페이드해 잔상 제거(will-change=opacity 힌트 동반). */
.rl-home-study__roll {
    transition: opacity var(--rl-dur-sheet) ease;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}
.rl-home-study__roll.is-fading { opacity: 0; }
/* head 칩(과목·유형 라벨)도 회전 행과 동기 fade — 제목·본문처럼 부드럽게(덜그덕 방지). */
[data-rl-study-head-chip] { transition: opacity var(--rl-dur-sheet) ease; }
[data-rl-study-head-chip].is-fading { opacity: 0; }
/* 목록용 행 상단 구분선(::before)은 head 바로 아래 중복 — 홈 프레임에서만 숨김. */
.rl-home-study__roll .rl-study-item::before { display: none; }
/* 홈 컨텍스트 강도 보정(사용자 결정, 2차 조정 반영) — 칩은 서버 opt(hide_chips)로 미출력.
   제목은 목록(fs-body/ink) 대비 크기·색 각 한 단계↓(fs-body-sm/text-2 — 위계는 발췌와 굵기 500/400 차),
   행 상하 패딩 sp-5→sp-2(상)/sp-3(하), body↔foot gap sp-2→0(미리보기·메타 밀착 — line-height가 최소 숨을 확보). */
.rl-home-study__roll .rl-study-item {
    padding-top: var(--rl-sp-2);
    padding-bottom: var(--rl-sp-3);
    gap: 0;
}
.rl-home-study__roll .rl-study-item__title {
    font-size: var(--rl-fs-body-sm);
    color: var(--rl-text-2);
}