/* ============================================================
   learn.css — 학습 영역 공용 레이아웃
   두뇌 게임(wellness/cognitive.php) · 프린트 학습지(print/) · 자동생성 학습지(print/auto/)
   세 메인이 같은 위계를 따른다: 헤더 → 추천 배너 → 검색 → 분류 → 정렬 → 목록
   마크업 파셜: _learn_head.php(헤더) · _learn_cat_nav.php(분류)
   ============================================================ */

/* ── 페이지 헤더: 아이콘 배지 + 제목 + 부제 + 우측 이동 버튼 ── */
.lm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:6px;}
.lm-head-left{display:flex;align-items:flex-start;gap:13px;min-width:0;}
.lm-head-ic{width:42px;height:42px;border-radius:12px;background:#E7F0FB;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;}
.lm-head-title{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em;color:#1B2A3A;line-height:1.15;}
.lm-head-sub{margin:9px 0 0;font-size:16px;color:#5A6B7E;line-height:1.45;}
.lm-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.lm-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #E2E8F1;border-radius:10px;padding:10px 15px;font-size:14px;font-weight:700;color:#1B2A3A;text-decoration:none;transition:border-color .12s,box-shadow .12s;cursor:pointer;font-family:inherit;}
.lm-btn:hover{border-color:#BFD2EA;box-shadow:0 8px 20px -14px rgba(20,40,70,.35);text-decoration:none;color:#1B2A3A;}
.lm-btn--primary{background:#15406F;border-color:#15406F;color:#fff;}
.lm-btn--primary:hover{background:#0E3258;border-color:#0E3258;color:#fff;box-shadow:none;}
@media(max-width:560px){
  .lm-head-title{font-size:22px;}
  .lm-head-sub{font-size:13px;}
  .lm-btn{padding:9px 12px;font-size:13px;}
}

/* ── 검색바 ── */
.lm-search{display:flex;gap:8px;margin-bottom:14px;}
.lm-search input{flex:1;height:44px;padding:0 16px;font-size:15px;border:2px solid #e2e8f0;border-radius:12px;outline:none;font-family:inherit;min-width:0;background:#fff;}
.lm-search input:focus{border-color:#15406F;}
.lm-search button{height:44px;padding:0 18px;border-radius:12px;background:#15406F;color:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer;white-space:nowrap;font-family:inherit;}

/* ── 분류: 1차 알약 칩 + 위계형 세부 패널 (print/category.php 디자인 표준) ── */
.lm-cat-nav{margin-bottom:14px;}
.lm-cat-nav-label{font-size:13px;font-weight:800;color:#5A6B7E;margin:0 0 8px 2px;}
.lm-cat-chips{display:flex;flex-wrap:wrap;gap:8px;}
/* 가로 스크롤 변형 (두뇌 게임 인지영역 칩) */
.lm-cat-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 0;}
.lm-cat-chips--scroll::-webkit-scrollbar{display:none;}
.lm-cat-chips--scroll .lm-cat-chip{flex:0 0 auto;}
.lm-cat-chip{display:inline-flex;align-items:center;gap:7px;height:46px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:800;text-decoration:none;border:1.5px solid #E2E8F1;background:#fff;color:#1B2A3A;white-space:nowrap;word-break:keep-all;transition:all .12s;cursor:pointer;font-family:inherit;}
.lm-cat-chip:hover{border-color:#15406F;color:#15406F;text-decoration:none;}
.lm-cat-chip.is-active,
.lm-cat-chip.active{background:#15406F;color:#fff;border-color:transparent;box-shadow:0 6px 14px -8px rgba(20,40,70,.4);}
.lm-cat-chip.is-active:hover,
.lm-cat-chip.active:hover{color:#fff;}
/* 칩 내부 색점·개수 */
.lm-cat-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.lm-cat-chip .cnt{opacity:.6;font-weight:600;}
.lm-cat-chip.is-active .cnt,
.lm-cat-chip.active .cnt{opacity:.85;}
/* 세부 분류 패널 — 선택한 1차에 딸린 하위 분류를 한 상자로 묶음 */
.lm-sub-panel{background:#F4F7FB;border:1.5px solid #E2E8F1;border-radius:16px;padding:14px 16px;margin:0 0 16px;}
.lm-sub-panel .lm-cat-nav{margin-bottom:0;}
.lm-sub-panel .lm-cat-chip{height:42px;font-size:14px;}
.lm-sub-panel .lm-cat-chip:not(.is-active){background:#fff;}
.lm-sub-divider{height:1px;background:#E2E8F1;margin:13px 0;}
/* 3차(유형) — 2차 알약형과 구분되는 각진 소형 버튼, 아이콘 없음 */
.lm-cat-chip.lm-chip-l3{height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:700;}

/* ── 결과 수 + 정렬 툴바 ── */
.lm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.lm-count{font-size:13px;color:#64748b;margin:0;}
.lm-sort{height:38px;padding:0 10px;font-size:14px;font-weight:700;color:#1B2A3A;border:1.5px solid #E2E8F1;border-radius:10px;background:#fff;font-family:inherit;cursor:pointer;flex-shrink:0;}