/* =========================================================
   메인 리뉴얼(2026-09) 신설 영역 — 접두사 mr26_
   과목색은 --mr26-accent / --mr26-soft 커스텀 프로퍼티로 주입
   2026-09-21: 공용 필터(전체·정보·일본어·윤리) 하나로 교과서·단행본을 한 패널에
   ========================================================= */

/* 공통 헤더 */
.mr26_hub, .mr26_news, .mr26_resources { margin-top: 110px; }
.mr26_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mr26_pill { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: 18px; border: 1px solid #ddd; font-size: 15px; font-weight: 500; color: #333; background: #fff; transition: all .2s; }
.mr26_pill:hover { background: #333; border-color: #333; color: #fff; }

/* ---------- 공용 과목 필터 ---------- */
.mr26_tabs { display: flex; gap: 10px; margin-top: 28px; }
.mr26_tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 1px solid #e3e3e3; border-radius: 22px; background: #fff; font-size: 16px; font-weight: 600; color: #444; cursor: pointer; transition: all .2s; }
.mr26_tab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mr26-accent, #999); }
.mr26_tab:hover { border-color: var(--mr26-accent, #333); color: var(--mr26-accent, #333); }
.mr26_tab.on { background: var(--mr26-accent, #333); border-color: var(--mr26-accent, #333); color: #fff; }
.mr26_tab.on .dot { background: #fff; }

/* ---------- 필터 패널 (교과서 + 단행본을 한 카드에) ---------- */
.mr26_panel { margin-top: 18px; padding: 32px; border-radius: 24px; background: var(--mr26-soft, #f5f7fa); box-sizing: border-box; }
.mr26_panel[hidden] { display: none; }
.mr26_block + .mr26_block { margin-top: 30px; padding-top: 30px; border-top: 1px dashed rgba(0, 0, 0, .14); }
.mr26_block_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mr26_block_head strong { font-size: 18px; font-weight: 700; color: #222; }
.mr26_block_head .hint { margin-left: 8px; margin-right: auto; font-size: 13px; color: #777; }
.mr26_more_group { display: flex; gap: 14px; flex: none; }
.mr26_more { font-size: 14px; font-weight: 600; color: var(--mr26-accent, #555); white-space: nowrap; }
.mr26_more:hover { text-decoration: underline; }

/* 과목 배지 (표지·도서 카드 공통) */
.mr26_subject { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--mr26-accent); }
.mr26_subject .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mr26-accent); }

/* 캐러셀 공통 — 교과서·단행본이 같은 폭과 같은 화살표를 쓴다 */
.mr26_carousel { position: relative; margin-top: 20px; }
.mr26_carousel .swiper { overflow: hidden; }
/* Swiper 기본 height:100% 가 슬라이드를 늘리므로 내용 높이로 고정 */
.mr26_carousel .swiper .swiper-wrapper { height: auto; align-items: flex-start; }
.mr26_carousel .swiper .swiper-slide { height: auto; width: calc((100% - 80px) / 5); display: flex; flex-direction: column; }

/* 교과서 표지 */
.mr26_cover_card a { display: block; }
.mr26_cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform .25s; }
.mr26_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr26_cover .cta { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--mr26-accent); transform: translateY(100%); transition: transform .25s; }
.mr26_cover_card a:hover .mr26_cover { transform: translateY(-4px); }
.mr26_cover_card a:hover .cta, .mr26_cover_card a:focus-visible .cta { transform: translateY(0); }
.mr26_cover_card .cap { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; color: #333; line-height: 1.35; }
.mr26_cover_card a:hover .cap { color: var(--mr26-accent); }

/* 단행본 카드 */
.mr26_book_cover { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); transition: transform .25s; }
.mr26_book_cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr26_book_card:hover .mr26_book_cover { transform: translateY(-4px); }
.mr26_book_card .t { margin-top: 4px; font-size: 14px; font-weight: 600; color: #222; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mr26_book_card .t:hover { color: var(--mr26-accent); }
.mr26_pds { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--mr26-accent); }
.mr26_pds::before { content: ''; width: 11px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5l3 3 3-3M1 10h10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5l3 3 3-3M1 10h10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- 정보 쿠키 + 토모레터 2분할 ---------- */
.mr26_split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.mr26_split.single { grid-template-columns: minmax(0, 1fr); }
.mr26_cookie { --mr26-bubble: #ffe48e; --mr26-tone: #9c8337; }
.mr26_letter { --mr26-bubble: #fde1ec; --mr26-tone: #e2699f; }
.mr26_card { position: relative; display: flex; height: 284px; margin-top: 35px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.mr26_card_img { width: 60%; flex: none; }
.mr26_card_img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr26_letter_empty { display: flex; align-items: center; justify-content: center; color: #e2699f; background: linear-gradient(135deg, #fde7f1 0%, #f9c6dc 100%); }
.mr26_card_body { position: absolute; top: 0; right: 0; width: 50%; height: 100%; padding: 30px 20px 0 50px; box-sizing: border-box; }
.mr26_card_body::before { content: ''; position: absolute; top: -50%; right: 0; width: 100%; height: 200%; background: var(--mr26-bubble); border-radius: 100% 0 0 100%; }
.mr26_card_body > * { position: relative; display: block; }
.mr26_card_body .date { font-size: 16px; color: #333; }
.mr26_card_body .tit { margin-top: 40px; font-size: 19px; font-weight: 700; line-height: 1.35; color: #222; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mr26_card_body .tit p { margin: 0; }
.mr26_ext { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--mr26-tone); }
.mr26_split.single .mr26_card_img { width: 50%; }
.mr26_split.single .mr26_card_body { width: 45%; }

/* ---------- 선생님 맞춤 자료 ---------- */
.mr26_res_wrap { position: relative; margin-top: 40px; }
.mr26_res_swiper { overflow: hidden; }
/* Swiper 기본 height:100% 가 슬라이드를 늘려 카드 아래가 비므로 내용 높이로 고정 */
.mr26_res_swiper .swiper-wrapper { height: auto; align-items: flex-start; }
.mr26_res_swiper .swiper-slide.mr26_res_card { height: auto; }
.mr26_res_swiper .swiper-slide.mr26_res_card { width: calc((100% - 80px) / 5); }
.mr26_res_card a { display: block; }
.mr26_res_thumb { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #f2f2f2; box-shadow: 0 4px 12px rgba(0,0,0,.1); transition: transform .25s; }
.mr26_res_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr26_res_card a:hover .mr26_res_thumb { transform: translateY(-4px); }
.mr26_res_card .cap { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #222; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mr26_arrow { position: absolute; top: 44px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: all .2s; }
.mr26_arrow.prev { left: -56px; } .mr26_arrow.next { right: -56px; }
/* 단행본은 표지 위에 겹치므로 표지 세로 중앙(표지가 카드 높이의 약 72%)에 맞추고 패널 여백까지 살짝 뺀다 */
.mr26_carousel .mr26_arrow { top: 36%; }
.mr26_carousel .mr26_arrow.prev { left: -18px; } .mr26_carousel .mr26_arrow.next { right: -18px; }
.mr26_arrow:hover { background: #333; border-color: #333; color: #fff; }
.mr26_arrow.swiper-button-disabled { opacity: .3; cursor: default; }

/* ---------- 반응형 ---------- */
@media screen and (max-width: 1350px) {
    .mr26_arrow.prev { left: 0; } .mr26_arrow.next { right: 0; }
    .mr26_carousel .mr26_arrow.prev { left: -18px; } .mr26_carousel .mr26_arrow.next { right: -18px; }
}
@media screen and (max-width: 1200px) {
    .mr26_hub, .mr26_news, .mr26_resources { margin-top: 80px; }
    .mr26_panel { padding: 24px; }
    .mr26_carousel .mr26_arrow.prev { left: -12px; } .mr26_carousel .mr26_arrow.next { right: -12px; }
    .mr26_carousel .swiper .swiper-slide { width: calc((100% - 60px) / 4); }
    .mr26_res_swiper .swiper-slide.mr26_res_card { width: calc((100% - 60px) / 4); }
}
@media screen and (max-width: 860px) {
    .mr26_head { flex-wrap: wrap; }
    .mr26_block_head { flex-wrap: wrap; }
    .mr26_carousel .swiper .swiper-slide { width: calc((100% - 40px) / 3); }
    .mr26_split { grid-template-columns: minmax(0, 1fr); gap: 50px; }
    .mr26_card { height: 220px; margin-top: 24px; }
    .mr26_card_body { padding: 20px 14px 0 36px; }
    .mr26_card_body .tit { margin-top: 18px; font-size: 16px; }
    .mr26_res_swiper .swiper-slide.mr26_res_card { width: calc((100% - 40px) / 3); }
}
@media screen and (max-width: 640px) {
    .mr26_hub, .mr26_news, .mr26_resources { margin-top: 48px; }
    .mr26_tabs { gap: 6px; margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-right: -16px; padding-right: 16px; }
    .mr26_tab { flex: none; height: 38px; padding: 0 16px; font-size: 14px; }
    .mr26_panel { margin-top: 12px; padding: 18px 16px; border-radius: 16px; }
    .mr26_block + .mr26_block { margin-top: 22px; padding-top: 22px; }
    .mr26_block_head strong { font-size: 16px; }
    .mr26_block_head .hint { display: none; }
    .mr26_more_group { gap: 10px; }
    .mr26_more { font-size: 13px; }
    .mr26_cover .cta { display: none; }
    .mr26_cover_card .cap { font-size: 13px; }
    .mr26_subject { margin-top: 8px; font-size: 12px; }
    /* 모바일은 화살표 대신 손가락으로 넘긴다. overflow:visible 로 두면 넘친 슬라이드가
       문서 폭을 늘려 페이지에 가로 스크롤이 생기므로, 패널 좌우 여백만큼 넓혀서 잘라낸다 */
    .mr26_carousel { margin-top: 14px; }
    .mr26_carousel .swiper { margin: 0 -16px; padding: 0 16px; }
    .mr26_carousel .swiper .swiper-slide { width: 40%; }
    .mr26_book_card .t { font-size: 13px; }
    .mr26_card { height: 200px; }
    .mr26_card_img { width: 55%; }
    .mr26_card_body { width: 55%; padding: 16px 12px 0 30px; }
    .mr26_card_body .date { font-size: 13px; }
    .mr26_card_body .tit { margin-top: 12px; font-size: 15px; -webkit-line-clamp: 3; }
    .mr26_ext { margin-top: 10px; font-size: 13px; }
    .mr26_res_wrap { margin-top: 20px; }
    .mr26_res_swiper { overflow: visible; }
    .mr26_res_swiper .swiper-slide.mr26_res_card { width: 62%; }
    .mr26_res_card .cap { font-size: 14px; margin-top: 8px; }
    .mr26_arrow { display: none; }
}