/* =============================================================
   agrosuper 레이아웃 이미지 반응형 오버라이드
   - ui-layout.css 원본 파일을 수정하지 않고 이 파일에 추가 스타일 적용
   ============================================================= */

/* 공통 썸네일 이미지 반응형 */
.thumb img {
    max-width: 100%;
    height: auto;
}

/* YouTube 썸네일: .thumb img의 height:auto가 yt-lazy 이미지를 눌러 숨기는 것을 방지 */
.thumb .yt-lazy img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* howto 카드: .magazine-list .thumb { height:242px; overflow:hidden } 해제
   height:auto → 비율 트릭(padding-bottom:56.25%)이 올바르게 작동
   overflow:visible → YouTube 플레이어 오버레이(타이틀·컨트롤)가 잘리지 않음 */
.agrosuper-howto-list .thumb {
    height: auto;
    overflow: visible;
}

/* overflow:visible로 border-radius 클립이 해제되므로 .yt-lazy로 이관 */
.agrosuper-howto-list .thumb .yt-lazy {
    border-radius: 5px;
}

/* 재생 중: YouTube 플레이어 UI가 컨테이너 밖으로 렌더링될 수 있으므로
   overflow와 border-radius를 모두 해제 */
.agrosuper-howto-list .thumb .yt-lazy.is-playing {
    overflow: visible;
    border-radius: 0;
}

/* 슬라이더 본문 이미지 반응형 */
.slider .magazine-body img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* 슬라이더 썸네일 이미지 반응형 */
.slider-thumb img {
    max-width: 100%;
    height: auto;
}

/* 매거진 상세 콘텐츠 이미지 반응형 (데스크탑) */
@media screen and (min-width: 1025px) {
    .magazine-detail-content .thumb img {
        max-width: 100%;
        height: auto;
    }
}

/* =============================================================
   매거진 본문 에디터 스타일 복원
   - default.css 전역 리셋(u, em, i, h1-h6 등)이 에디터 출력물의
     밑줄·이탤릭·제목 크기를 초기화하므로 .magazine-body 범위 내에서만 복원
   ============================================================= */
.magazine-body u               { text-decoration: underline; }
.magazine-body em,
.magazine-body i               { font-style: italic; }
.magazine-body b               { font-weight: bold; }
.magazine-body s,
.magazine-body strike          { text-decoration: line-through; }
.magazine-body h1              { font-size: 2em;    font-weight: 700; margin: 0.67em 0; }
.magazine-body h2              { font-size: 1.5em;  font-weight: 700; margin: 0.75em 0; }
.magazine-body h3              { font-size: 1.17em; font-weight: 700; margin: 0.83em 0; }
.magazine-body h4              { font-size: 1em;    font-weight: 700; margin: 1.12em 0; }
.magazine-body h5              { font-size: 0.83em; font-weight: 700; margin: 1.5em  0; }
.magazine-body h6              { font-size: 0.67em; font-weight: 700; margin: 1.67em 0; }
.magazine-body blockquote      { border-left: 4px solid #ccc; padding-left: 1em; margin: 1em 0; color: #666; }
.magazine-body p               { margin-bottom: 0.6em; }
.magazine-body a               { text-decoration: underline; }

/* 페이지네이션 테두리 제거 (Bootstrap 기본값 override) */
.pagination > li > a,
.pagination > li > span {
    border: none;
}

/* 오렌지 띠 모바일 표시 및 반응형 높이
   ui-layout.css의 display:none !important 를 전 페이지에서 재정의 */
@media screen and (max-width: 1024px) {
    .section.section--bigfilters {
        display: block !important;
        padding-top: 20px;
    }
    .section--bigfilters_in {
        min-height: 54px;
        padding-top: 0.9rem;
    }
}
@media screen and (max-width: 768px) {
    .section.section--bigfilters {
        padding-top: 10px;
    }
    .section--bigfilters_in {
        min-height: 40px;
        padding-top: 0.6rem;
    }
}
@media screen and (max-width: 480px) {
    .section.section--bigfilters {
        padding-top: 6px;
    }
    .section--bigfilters_in {
        min-height: 28px;
        padding-top: 0.4rem;
    }
    .section--bigfilters .cat-list {
        font-size: 11px !important;
        gap: 0 !important;
    }
    .section--bigfilters .cat-list label {
        margin: 0 4px !important;
    }
    .section--bigfilters .cat-list .ttl {
        display: none;
    }
}