/* css/member-training-record.css
   캘린더 > 학습 기록.

   - 날짜 셀 = 그날 완료율(훈련 + 과제)의 초록 농도 4단계. 0%·미래는 무색.
   - 상세는 셀을 눌러 여는 모달(App.openModal)이 맡는다. 인라인 상세는 없다.
   🔑 농도는 rgba 알파로만 준다. --color-success-500(#10B981)을 알파로 못 쓰니
      채널값을 --trec-green 에 두고 단계마다 알파만 바꾼다(색상은 한 곳에서만 정의). */

.trec-section {
    padding: 4px 0 8px;
    --trec-green: 16, 185, 129;   /* = --color-success-500 #10B981 */
}

/* ── 요약 ── */
.trec-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}
.trec-summary-label { font-size: 14px; font-weight: 700; color: var(--color-text); }
.trec-summary-value { font-size: 14px; font-weight: 700; color: var(--color-success-600); }

/* ── 달력 셀 농도 ──
   1~39% / 40~69% / 70~99% / 100%(올클). 선형 비례가 아니라 버킷이라
   90%와 100%가 확실히 다르게 보인다. */
.trec-section .cal-cell.trec-r1,
.trec-section .cal-cell.trec-r2,
.trec-section .cal-cell.trec-r3,
.trec-section .cal-cell.trec-r4 { border-radius: var(--radius-sm); }

.trec-section .cal-cell.trec-r1 { background: rgba(var(--trec-green), .25); }
.trec-section .cal-cell.trec-r2 { background: rgba(var(--trec-green), .45); }
.trec-section .cal-cell.trec-r3 { background: rgba(var(--trec-green), .70); }
.trec-section .cal-cell.trec-r4 { background: rgba(var(--trec-green), 1);   }

/* 진한 두 단계에서만 글자를 흰색으로. 연한 단계는 검정이 더 잘 읽힌다.
   .trec-section 을 붙여 calendar.css 의 주말 색상 규칙(.cal-cell:nth-child(7n±) .cal-day)을
   확실히 이긴다. 같은 명시도면 로드 순서에 의존하게 되는데, 그건 깨지기 쉽다. */
.trec-section .cal-cell.trec-r3 .cal-day,
.trec-section .cal-cell.trec-r4 .cal-day { color: #fff; }
.trec-section .cal-cell.trec-r1 .cal-day,
.trec-section .cal-cell.trec-r2 .cal-day { color: var(--color-text); }
.trec-section .cal-cell.trec-r1 .cal-day,
.trec-section .cal-cell.trec-r2 .cal-day,
.trec-section .cal-cell.trec-r3 .cal-day,
.trec-section .cal-cell.trec-r4 .cal-day { font-weight: 700; }

/* '오늘' 파란 동그라미 제거 — 채워진 셀 위에서는 중복이고 초록과 충돌한다.
   채워지지 않은 날짜에는 기존 오늘 표시를 그대로 남긴다.

   🔑 display 까지 반드시 되돌린다. calendar.css 의 `.cal-cell.today .cal-day` 는
      동그라미를 만들려고 flex + justify-content:center 를 쓰는데, 여기서 크기만
      풀고 display 를 그대로 두면 폭이 셀 전체로 늘어나 날짜가 가운데로 간다
      → 오늘 날짜만 다른 날짜와 정렬이 달라진다. */
.trec-section .cal-cell.trec-r1 .cal-day,
.trec-section .cal-cell.trec-r2 .cal-day,
.trec-section .cal-cell.trec-r3 .cal-day,
.trec-section .cal-cell.trec-r4 .cal-day {
    display: inline-block;
    background: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* 올클 표시 — 100% 셀에만 흰 체크 */
.trec-section .cal-cell.trec-r4 { position: relative; }
.trec-section .cal-cell.trec-r4::after {
    content: '✓';
    position: absolute;
    right: 4px;
    bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* 학습 기록 모드에서는 날짜 셀 전체가 터치 타깃 */
.trec-section .cal-cell {
    cursor: pointer;
    min-height: 44px;
}

/* ── 농도 범례 ── */
.trec-scale {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin: 10px 2px 0;
    font-size: 12px;
    color: var(--color-text-sub);
}
.trec-scale-label { color: var(--color-text-sub); }
.trec-scale-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}
.trec-scale-swatch.trec-r1 { background: rgba(var(--trec-green), .25); }
.trec-scale-swatch.trec-r2 { background: rgba(var(--trec-green), .45); }
.trec-scale-swatch.trec-r3 { background: rgba(var(--trec-green), .70); }
.trec-scale-swatch.trec-r4 { background: rgba(var(--trec-green), 1);   }

.trec-hint {
    margin: 8px 2px 0;
    font-size: 12px;
    color: var(--color-text-sub);
}

/* ── 날짜 상세 모달 ── */
.trec-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}
.trec-modal-rate {
    /* 셀과 같은 농도 단계를 그대로 재사용해 달력↔모달이 같은 값을 말하게 한다 */
    --trec-green: 16, 185, 129;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.trec-modal-rate.trec-r1 { background: rgba(var(--trec-green), .25); }
.trec-modal-rate.trec-r2 { background: rgba(var(--trec-green), .45); }
.trec-modal-rate.trec-r3 { background: rgba(var(--trec-green), .70); color: #fff; }
.trec-modal-rate.trec-r4 { background: rgba(var(--trec-green), 1);   color: #fff; }
.trec-modal-count { font-size: 14px; font-weight: 700; color: var(--color-text-sub); }

.trec-modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
}
.trec-modal-icon { width: 16px; text-align: center; font-weight: 800; }
.trec-modal-row.is-done .trec-modal-icon,
.trec-modal-row.is-done .trec-modal-state { color: var(--color-success-600); }
.trec-modal-row.is-miss .trec-modal-icon,
.trec-modal-row.is-miss .trec-modal-state { color: var(--color-text-sub); }
.trec-modal-name  { flex: 1; min-width: 0; font-weight: 600; color: var(--color-text); }
.trec-modal-note  { font-size: 12px; color: var(--color-text-sub); white-space: nowrap; }
.trec-modal-state { font-weight: 700; white-space: nowrap; }
.trec-modal-empty { font-size: 14px; color: var(--color-text-sub); padding: 6px 0; }