/* css/member-home.css
   홈 화면 뼈대 — 섹션 제목(L1) · 진도 메모 · 오늘의 VOD 카드 · 오늘의 미션 카드.
   기준 뷰포트 390px. 모든 인터랙티브 타깃 최소 44px.

   ⚠️ 예전엔 VOD·데일리 미션이 Figma Task Row(썸네일 52px · 높이 84px)였는데,
      진도 연결 이후 하루 3~4줄이 되면서 훈련 카드를 첫 화면 밖으로 밀어냈다.
      둘 다 목록형 카드로 바꿨다(이 파일 아래 .vod-card / .mission-card).
      그래서 .task-row 계열은 전부 삭제했다 — 소비처가 없다. */

/* ── 홈 섹션 제목 (L1) ────────────────────────────────────────
   공지 · 오늘의 학습 · 자주 쓰는 기능이 전부 이걸 쓴다. 카드 밖에 놓고,
   카드 안 제목(L2: 오늘의 훈련 · 오늘의 미션 = 15px/700)보다 확실히 크게
   잡아 '무엇 안에 무엇이 있는지'가 글자 크기만으로 읽히게 한다. */
.home-section-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0 0 10px;
    padding: 0 2px;
}

/* 섹션 사이 간격 — 제목이 앞 섹션 카드에 붙어 보이지 않게 */
.today-section,
.quick-actions {
    display: block;
    margin-top: 22px;
}
.today-section:first-child,
.quick-actions:first-child {
    margin-top: 0;
}

/* ── 진도 메모 (커리큘럼 progress) ───────────────────────────
   '오늘 몇 강까지'는 오늘의 학습 전체에 걸리는 전제라 카드가 아니라
   섹션 첫 줄로 둔다. */
.today-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    background: var(--color-primary-50, #eff6ff);
    border: 1px solid var(--color-primary-200, #bfdbfe);
}

.today-progress-day {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.today-progress-note {
    font-size: 13px;
    color: var(--color-text-sub);
    line-height: 1.45;
    word-break: keep-all;
}

/* ── 오늘의 VOD (L2 카드) ────────────────────────────────────
   그룹(강의 종류)마다 라벨을 달고 그 아래 강 목록을 둔다.
   🔴 라벨은 장식이 아니다 — 소리블록 1단계와 부트캠프 훈련 강의는 4~50강 제목이
      글자까지 같아서, 라벨이 없으면 같은 줄이 두 번 나온 것처럼 보인다. */
.vod-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.vod-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.vod-group + .vod-group {
    margin-top: 4px;
    border-top: 1px solid var(--color-gray-100);
}

/* 출처 칩 — 이 화면에서 기능적으로 가장 중요한 요소다.
   🔴 소리블록 1단계와 부트캠프 훈련 강의는 4~50강 제목이 글자까지 같아서,
      1단계 회원 화면에는 **똑같은 제목이 두 번** 뜬다. 이 칩이 유일한 구분자다.
      그래서 12px 회색 텍스트가 아니라 칩으로 세워 둔다.
   색은 장식이 아니라 출처 식별용이라 그룹마다 고정이다. 홈에서 이미 뜻을 가진
   파랑(진도·단계)·초록(완료·진행)은 피했다 — 상태색과 섞이면 뜻이 흐려진다. */
.vod-group-label {
    display: inline-flex;
    align-items: center;
    margin: 10px 0 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    /* 그룹 키가 없을 때(기본 폴백)의 중립색 */
    background: var(--color-gray-100);
    color: var(--color-text-sub);
}

.vod-group-label[data-group="soriblock"] {
    background: #F5F3FF;   /* violet-50  */
    color: #6D28D9;        /* violet-700 */
}

.vod-group-label[data-group="bootcamp"] {
    background: var(--color-accent-50);
    color: var(--color-accent-600);
}

.vod-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
}

.vod-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    word-break: keep-all;
}

.vod-row-go {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
}

.vod-row:active { background: var(--color-bg-subtle); }

/* ── 오늘의 미션 (L2 카드) ───────────────────────────────
   데일리·내맛33·말까는 상시, 하멈말은 오늘 커리큘럼에 잡힌 날만 온다.
   VOD 처럼 큰 행이 아니라 목록형이다 — 매일 같은 세 줄이라 시각적 무게를
   낮춰야 훈련 카드가 계속 주인공으로 남는다. */
.mission-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.mission-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.mission-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-top: 1px solid var(--color-gray-100);
}
.mission-row:first-child { border-top: none; }

/* 본문이 곧 링크 — 라벨과 메모를 한 덩어리로 잡는다.
   (안내 '?' 는 별도 버튼이라 링크 밖에 둔다 — a 안의 button 은 무효 마크업)
   🔑 폭은 내용만큼만 차지한다(flex: 0 1 auto). 예전처럼 1 1 auto 로 늘리면
      바로 뒤의 '?' 가 오른쪽 끝까지 밀려, 이동 버튼이 없는 하멈말 행에서는
      '?' 만 혼자 오른쪽에 떠 있었다. 지금은 항상 이름 바로 옆에 붙는다. */
.mission-row-main {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-self: stretch;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
}

.mission-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.mission-row-note {
    font-size: 12px;
    color: var(--color-text-sub);
    line-height: 1.4;
    word-break: keep-all;
}

/* 이동 화살표·완료 배지는 오른쪽 끝 (본문이 더 이상 늘어나지 않으므로 직접 민다) */
.mission-row-go {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
}

.mission-row-state {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-success-50);
    color: var(--color-success-600);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.mission-row.is-done .mission-row-label { color: var(--color-text-sub); }