@charset "utf-8";
/* ==========================================================================
   장사특강(monosolution) — PC(1024px~) 전용
   board/monosolution.html · 토큰: gd_tokens.css
   모바일 화면은 건드리지 않는다 — 모든 규칙을 미디어쿼리 안에만 둔다.
   스와이퍼(퀵메뉴/식자재정보/사장님톡)는 slidesPerView:auto 라 컨테이너 폭만
   잡아주면 자연히 적응한다 — 스와이퍼 자체는 건드리지 않는다.
   @entwiz 2026-09
   ========================================================================== */
@media (min-width: 1024px) {

    /* 레이아웃 — 콘텐츠 폭 가운데 정렬. 좌우 여백(20px)은 여기 한 곳에만 두고(모바일의 흩어진 20px 는 아래에서 0 처리),
       모든 섹션/타이틀/카드가 이 컨테이너 좌측선에 정렬되게 한다. box-sizing:border-box 라 max-width 안에 padding 포함. */
    .monosolution {box-sizing:border-box; max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:0 var(--layout-margin, 20px) var(--space-16, 64px);}
    .monosolution * {box-sizing:border-box;}

    /* 비주얼 배너 — 중앙 정렬 */
    .monosolution .visual {display:flex; justify-content:center;}
    /* 퀵메뉴 아이콘 중앙정렬은 CSS가 아니라 Swiper 옵션(centerInsufficientSlides)으로 처리 — monosolution.html 참고 */

    /* 모노마트 TV — PC 2열 그리드 (iframe은 이미 aspect-ratio 반응형) */
    .monosolution .monotv_list ul {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-6, 24px);}
    .monosolution .monotv_list li + li {margin-top:0;}

    /* 가로 스와이퍼 3종(비법레시피·식자재정보·사장님톡) — PC에서 중앙 컬럼 밖으로 삐져나오던 것 클립.
       모바일 overflow:auto/scroll 이 넘침을 그대로 보여주던 것을 hidden 으로 바꿔 컬럼 경계에서 자른다.
       Swiper 초기화/기존 규칙이 overflow 를 덮어쓰는 경우가 있어 !important 로 강제한다.
       (Swiper 드래그는 그대로 동작. peek/슬라이드 이동 유지) @entwiz 2026-09 */
    .monosolution .recipe_list,
    .monosolution .monoplanet_list,
    .monosolution .monoletter_list {display:block !important; overflow:hidden !important; max-width:100%;}

    /* 정렬 — 모바일 edge 여백(20px)이 타이틀박스/리스트/첫·끝 슬라이드에 흩어져 있어 PC 중앙정렬과 이중으로 겹쳐 어긋남.
       PC에선 그 20px 를 전부 0 으로 하고 여백은 위 .monosolution padding 한 곳으로 통일 →
       타이틀·더보기·첫 카드가 모두 같은 좌측선에 정렬. (아래 전부 미디어쿼리 안이라 모바일은 그대로 유지) */
    .monosolution .mainTitBox {padding-left:0; padding-right:0;}
    .monosolution .recipe_list,
    .monosolution .monotv_list {padding-left:0; padding-right:0;}
    /* 첫/끝 슬라이드는 모바일에서 폭+20px(여백)로 커져 있음 → PC에선 여백 0 + 일반 슬라이드 폭으로 되돌려 정렬 */
    .monosolution .recipe_list .swiper-slide:first-child {width:218px; padding-left:0;}
    .monosolution .recipe_list .swiper-slide:last-child {width:218px; padding-right:0;}
    .monosolution .monoplanet_list .swiper-slide:first-child {width:160px; padding-left:0;}
    .monosolution .monoplanet_list .swiper-slide:last-child {width:160px; padding-right:0;}
    .monosolution .monoletter_list .swiper-slide:first-child {width:288px; padding-left:0;}
    .monosolution .monoletter_list .swiper-slide:last-child {width:288px; padding-right:0;}
}