/* RLCNF Main — 4 카테고리 카드 + 위젯 인덱스 그리드
 * 4 카테고리는 메인 보조 동선 — surface 배경 + line-2 보더 + 좌측 brand 아이콘만 컬러로
 * 식별성만 남기고 시선을 차지하지 않는다 (도구형 UI §1: 주변 후퇴, 본문 시선). */

.widget-index { padding-bottom: 25px !important; }
.widget-index .at-main,
.widget-index .at-side { padding-bottom: 0; }
.widget-index .div-title-underbar { margin-bottom: 15px; }
.widget-index .div-title-underbar span { padding-bottom: 4px; }
.widget-index .div-title-underbar span b { font-weight: 500; }
.widget-index .widget-img img { display: block; max-width: 100%; }
.widget-box { margin-bottom: 25px; }

/* 메인은 learn-tokens.css(:root) 미로드 — `--rl-cat-*` 카테고리 색만 본 파일에 self-contain.
 * 시스템 토큰(`--rl-*` 전반: primary/surface/surface-2/line-2/ink 등)은 mobile-nav.css의 `.rl-mnav-enabled` cascade 의존 — kill switch off 시 회귀.
 * 추가 카테고리 도입 시 토큰 한 줄 + 셀렉터 한 줄, 페이지 마크업은 data-cat만 변경. */
.pushable {
    --rl-cat-exam:   var(--rl-primary);
    --rl-cat-note:   #fd7e14;
    --rl-cat-review: #9b59b6;
    --rl-cat-study:  #6f42c1;
    width: 100%;
    height: 72px;
    margin: 8px 0;
    padding: 0;
    background: var(--rl-surface);
    border: 1px solid var(--rl-line-2);
    border-radius: 12px;
    cursor: pointer;
    outline-offset: 4px;
    transition: background 150ms ease, border-color 150ms ease;
}
.pushable:hover,
.pushable:active { background: var(--rl-surface-2); }
.pushable[data-cat="exam"]   { --cat-color: var(--rl-cat-exam); }
.pushable[data-cat="note"]   { --cat-color: var(--rl-cat-note); }
.pushable[data-cat="review"] { --cat-color: var(--rl-cat-review); }
.pushable[data-cat="study"]  { --cat-color: var(--rl-cat-study); }

.front {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
    padding: 0 16px;
    background: transparent;
    border-radius: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--rl-ink);
    text-align: left;
}
.front i {
    color: var(--cat-color, var(--rl-primary));
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.modal-footer .btn { border-radius: 4px !important; }