@charset "UTF-8";
/* ============================================================
   특색프로그램(SPEDU) 상단 내비/필터 공통 컴포넌트
   - tab-lite : 프로그램 12탭을 가벼운 pill 1줄로 (래퍼에 .tab-lite 부여한 페이지만 적용)
   - sense-toolbar : 종류/영역 · 연령 · 월 · 연간계획안 통합 필터 툴바
   사용처: /plan/spedu/sense.htm, /plan/spedu/friend.htm 등
   ============================================================ */

/* ── tab-lite: 프로그램 12탭 카드 2줄 → 가벼운 pill 1줄(가로 스크롤) ── */
.spedu-tab-wrap.tab-lite .edudata_listmenu {
    flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; gap:6px; padding:10px 0 4px;
    font-size:13px;
}
.spedu-tab-wrap.tab-lite .edudata_listmenu::-webkit-scrollbar { height:6px; }
.spedu-tab-wrap.tab-lite .edudata_listmenu::-webkit-scrollbar-thumb { background:#d8d8d8; border-radius:3px; }
.spedu-tab-wrap.tab-lite .edudata_listmenu > li { flex:0 0 auto; }
.spedu-tab-wrap.tab-lite .edudata_listmenu .tab-break { display:none; }
.spedu-tab-wrap.tab-lite .edudata_listmon,
.spedu-tab-wrap.tab-lite .edudata_listmoff { height:34px; border-radius:8px; }
.spedu-tab-wrap.tab-lite .edudata_listmon .edudata_listmt,
.spedu-tab-wrap.tab-lite .edudata_listmoff .edudata_listmt {
    height:34px; line-height:34px; font-size:13px; padding:0 9.2px; white-space:nowrap;
}
.spedu-tab-wrap.tab-lite .edudata_listmon .edudata_listmp { display:none; }

/* ── 상단 통합 필터 툴바 (종류/영역 · 연령 · 월 · 연간계획안) ── */
.sense-toolbar {
    width:1024px; margin:14px auto 20px; box-sizing:border-box;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    background:#fbfcfd; border:1px solid #e5e5e5; border-radius:8px;
    padding:10px 16px;
}
/* sense-toolbar 직후 콘텐츠 영역(.notice_wrap)의 첫 자식 상단 여백 0 처리
   → 페이지마다 다르게 잡혀있던 여백을 sense-toolbar의 margin-bottom 으로 통일 */
.sense-toolbar + .notice_wrap { margin-top:0; }
.sense-toolbar + .notice_wrap > *:first-child { margin-top:0; }
/* a[name=top]가 첫 자식이라 위 규칙이 앵커에만 걸리는 페이지(sense/bookcook/eco 등) —
   DIV_SPEDU_BASE 첫 콘텐츠(problem_section)의 상단 여백도 제거해 간격 통일 */
.sense-toolbar + .notice_wrap #DIV_SPEDU_BASE > .problem_section:first-child,
.sense-toolbar + .notice_wrap #DIV_SPEDU_BASE > div:first-child > .problem_section:first-child { margin-top:0 !important; }
.sense-tb-group { display:flex; align-items:center; gap:8px; }
.sense-tb-label { font-size:12px; color:#888; flex-shrink:0; }
.sense-seg { display:flex; background:#fff; border:1px solid #e0e0e0; border-radius:7px; padding:2px; }
.sense-seg a {
    font-size:13px; color:#666; text-decoration:none; line-height:1;
    padding:6px 14px; border-radius:5px;
    display:flex; align-items:center;
}
.sense-seg a.active { background:#3E5FAC; color:#fff; font-weight:bold; }
.sense-seg a:not(.active):hover { color:#333; }
.sense-month-select {
    height:34px; min-width:85px; padding:0 10px;
    border:1px solid #e0e0e0; border-radius:7px; background:#fff;
    font-size:13px; color:#333; cursor:pointer;
}
.sense-tb-right { margin-left:auto; }
.sense-toolbar .btn-year {
    display:inline-flex; align-items:center; gap:6px;
    height:27px; padding:0 17px; border-radius:7px;
    background:#3E5FAC; color:#fff !important;
    font-size:13px; font-weight:bold; text-decoration:none;
}
.sense-toolbar .btn-year:hover { background:#324c8c; }

/* ── 놀이자료/관련상품을 problem_section 카드 안에 넣을 때 ──
   newplan_file_content 자체 보더(1px #ddd) 제거 → 이중 박스 방지 */
.problem_section_body .newplan_file_content { border:none !important; padding:0 !important; }
/* 고정 height(225px) → 콘텐츠 높이에 맞춤. 슬라이더(float li)일 때 트랙이 무너지지 않게 overflow 컨테인 */
.problem_section_body .newplan_filebox { height:auto !important; }
.problem_section_body .newplan_filebox > div { overflow:hidden; }
.problem_section_body .newplan_filelist dd { height:20px !important; padding:8px 0 0 0 !important; }
/* 좌우 화살표 — include(카드) 안에서만 top:80, 좌우 끝(0). 페이지 인라인(left:30px!important)을 이기도록 specificity 강화 */
.notice_wrap .problem_section_body .newplan_filewrap .newplan_file_arrL { top:80px !important; left:0 !important; }
.notice_wrap .problem_section_body .newplan_filewrap .newplan_file_arrR { top:80px !important; right:0 !important; }