@charset "utf-8";
/* ==========================================================================
   필라리 매거진 테마 — 쇼핑몰 반응형 보정
   --------------------------------------------------------------------------
   영카트 모바일 쇼핑몰 스킨(skin/shop/basic/style.css)은 좁은 화면만 보고
   만들어진 것이라, 필라리처럼 한 벌로 모든 폭을 감당하는 구조에서는
   넓은 화면에서 상품이 두 개만 크게 늘어서거나 표가 화면을 뚫고 나간다.
   이 파일은 그 위에 얹어 폭에 따라 자연스럽게 늘어나게 만든다.

   모두 #shop-wrap 안쪽에만 적용되므로 매거진 본문에는 영향이 없고,
   이 파일 하나만 지우면 원래대로 돌아간다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 기초 — 가로 스크롤 0 을 불변 조건으로 삼는다
   -------------------------------------------------------------------------- */
#shop-wrap,
#shop-wrap * { box-sizing: border-box; }

#shop-wrap { word-break: keep-all; overflow-wrap: break-word; }

#shop-wrap img,
#shop-wrap video,
#shop-wrap iframe { max-width: 100%; height: auto; }

/* 상품 상세 설명은 쇼핑몰 관리자가 붙여넣는 HTML 이라 폭이 고정된 경우가 많다.
   넘치면 그 영역만 밀어서 보게 하고 페이지 전체는 흔들리지 않게 한다. */
#shop-wrap .item_info,
#shop-wrap #it_explan,
#shop-wrap .tbl_wrap,
#shop-wrap .tbl_head01,
#shop-wrap .tbl_frm01 { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   2. 헤더 — 쇼핑몰 모드
   --------------------------------------------------------------------------
   매거진과 헤더 파일을 같이 쓰되, 쇼핑몰에서만 켜지는 부분들이다.
   -------------------------------------------------------------------------- */

/* 매거진 ↔ 스토어 전환 — 메뉴바의 다크모드 버튼 바로 왼쪽
   홈(남색)·다크모드(검정)처럼 메뉴바 높이를 꽉 채우는 색 블록으로 둔다.
   992px 미만에서는 메뉴바가 햄버거 서랍으로 들어가므로 여기서는 숨기고,
   대신 햄버거 옆 버튼을 쓴다(아래 규칙). */
.navbar-nav > li.mode-menu { display: none; }

@media (min-width: 992px) {
    .navbar-nav > li.mode-menu {
        display: block;
        position: absolute; top: 0; right: 61px;   /* 61px = 다크모드 블록 폭. 사이를 띄우지 않는다 */
        background-color: #e0a63a;                 /* 색만 바꾸면 블록 색이 바뀐다 */
    }
    .navbar-nav > li.mode-menu > .nav-link {
        display: flex; align-items: center; gap: 8px;
        padding: 20px 18px !important;
        color: #241a06 !important; font-weight: 700;
    }
    .navbar-nav > li.mode-menu > .nav-link i { color: inherit; }
    .navbar-nav > li.mode-menu:hover { background-color: #eeb44b; }
    .navbar-nav > li.mode-menu > .nav-link:hover { color: #000 !important; }
}

/* 서랍(햄버거) 안 — 다크모드 아래의 매거진 · 스토어 바로가기
   다크모드 항목과 같은 글자 형식을 쓴다. 넓은 화면에서는 메뉴바 우측의
   색 블록이 그 일을 하므로 여기서는 숨긴다. */
.navbar-nav > li.mode-link-menu { display: none; }
@media (max-width: 991px) {
    .navbar-nav > li.mode-link-menu { display: block; }
    .navbar-nav > li.mode-link-menu > .nav-link { padding: 0 15px !important; }
    .navbar-nav > li.mode-link-menu > .nav-link i { width: 18px; text-align: center; }
    .navbar-nav > li.mode-link-menu > .nav-link span { margin-left: 5px; display: inline-block; }
}

/* 좁은 화면 : 햄버거 오른쪽의 매체 이름 (링크 아님)
   .top-header-mobile-btn 은 992px 이상에서 display:none 이라 데스크톱에는 안 나온다.
   원래 폭이 55px 로 묶여 있어 버튼 하나만 들어가므로 가로로 늘려 준다. */
@media (max-width: 991px) {
    .top-header-mobile-btn {
        display: flex !important; align-items: center; gap: 4px;
        width: auto !important;
    }
    .top-header-mobile-btn .navbar-toggler { flex: 0 0 auto; }
}
.top-header-mobile-btn .mobile-brand {
    color: #f0f0f0; font-size: 1rem; font-weight: 700;
    letter-spacing: -.01em; white-space: nowrap; line-height: 1;
}

/* 로고 옆 STORE 배지 */
.title-logo-shop { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.title-logo-badge {
    display: inline-block; padding: 3px 8px;
    border-radius: 5px; background: #1a6cf0; color: #fff;
    font-size: .625rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4;
}

/* 상단 띠의 쇼핑몰 바로가기 (장바구니·주문조회·관심상품·마이페이지) */
.top-header-nav .thn-shop a { position: relative; }
.top-header-nav .thn-shop-count {
    display: inline-block; min-width: 17px; margin-left: 4px; padding: 1px 5px;
    border-radius: 999px; background: #d94b3f; color: #fff;
    font-size: .625rem; font-style: normal; font-weight: 700; line-height: 1.4;
    vertical-align: middle;
}
/* 상단 띠에 회원 메뉴가 빠지면서 쇼핑몰 네 항목만 남았다.
   장바구니·주문조회·관심상품·마이페이지·로그인 다섯 개다. 글자까지 다 넣으면
   왼쪽의 햄버거 + 전환 버튼과 부딪힌다. 여러 폭에서 재 본 결과 768px 부터 안 부딪혀서,
   그보다 좁으면 아이콘만 남긴다.
   글자는 지우는 게 아니라 눈에만 안 보이게 해서 화면 낭독기에는 그대로 읽힌다. */
@media (max-width: 767px) {
    .top-header-nav .thn-shop a { padding-left: 7px; padding-right: 7px; }
    .top-header-nav .thn-shop a > span {
        position: absolute; width: 1px; height: 1px; margin: -1px;
        padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
        white-space: nowrap; border: 0;
    }
    .top-header-nav .thn-shop a i { margin-right: 0; font-size: 1rem; }
    .top-header-nav .thn-shop-count { margin-left: 2px; }
}
/* --------------------------------------------------------------------------
   3. 사이드 — 쇼핑몰 모드
   -------------------------------------------------------------------------- */
.pl-shop-side-box { margin-bottom: 18px; }
.pl-shop-side-box .shop-member-box-title {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(128, 128, 128, .22);
    font-size: .9375rem; font-weight: 700;
}
.pl-shop-side-box .op-area ul { margin: 0; padding: 0; list-style: none; }
.pl-shop-side-box .op-area li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(128, 128, 128, .14);
}
.pl-shop-side-box .prd-img { flex: 0 0 auto; }
.pl-shop-side-box .prd-img img { border-radius: 6px; display: block; }
.pl-shop-side-box .prd-name { flex: 1 1 auto; min-width: 0; font-size: .8125rem; line-height: 1.5; }
.pl-shop-side-box .prd-name a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; color: inherit; text-decoration: none;
}
.pl-shop-side-box .prd-cost { flex: 0 0 auto; font-size: .8125rem; font-weight: 700; }
.pl-shop-side-go {
    display: flex; align-items: center; justify-content: center;
    min-height: 42px; margin-top: 10px;
    border: 1px solid rgba(128, 128, 128, .3); border-radius: 8px;
    font-size: .875rem; font-weight: 600;
    color: inherit; text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. 상품 목록 — 여기가 핵심
   --------------------------------------------------------------------------
   스킨은 "1줄에 몇 개" 설정값을 li 에 style="width:50%" 처럼 인라인으로 박는다.
   인라인 스타일은 CSS 보다 세므로 !important 로 풀고, 대신 그리드가 열 수를
   정하게 한다. 그래야 폭이 바뀔 때마다 관리자 설정을 고치지 않아도 된다.
   -------------------------------------------------------------------------- */
#shop-wrap ul[id="sct_wrap"],
#shop-wrap .product-list-10,
#shop-wrap .product-main-10 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 좁은 화면 : 2열 */
    gap: 22px 16px;
    margin: 0 0 30px; padding: 0; list-style: none;
}
#shop-wrap .item-list-wrap,
#shop-wrap .item-main-wrap {
    width: auto !important;      /* 인라인 width 무력화 */
    float: none !important;
    margin: 0 !important;
    min-width: 0;                /* 그리드 칸을 뚫고 나가는 것을 막는다 */
}
/* 화면이 넓어지면 한 줄에 더 담는다.
   992px 부터 본문 옆에 사이드가 붙어 실제 본문 폭이 그만큼 줄어든다.
   그래서 4열은 사이드를 빼고도 카드가 200px 을 넘는 1100px 부터 적용한다. */
@media (min-width: 560px) {
    #shop-wrap ul[id="sct_wrap"],
    #shop-wrap .product-list-10,
    #shop-wrap .product-main-10 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    #shop-wrap ul[id="sct_wrap"],
    #shop-wrap .product-list-10,
    #shop-wrap .product-main-10 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 리스트뷰로 전환하면(스킨의 보기방식 버튼) 한 줄에 하나씩 */
#shop-wrap #product_list.product-type-list ul[id="sct_wrap"],
#shop-wrap #product_list.product-type-list .product-list-10 {
    grid-template-columns: minmax(0, 1fr);
}

/* 상품 사진 — 비율을 미리 잡아 두면 이미지가 늦게 와도 화면이 튀지 않는다 */
#shop-wrap .product-img-in {
    position: relative; aspect-ratio: 1 / 1;
    overflow: hidden; border-radius: 10px; background: rgba(128, 128, 128, .08);
}
#shop-wrap .product-img-in img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 상품명 — 말줄임 한 줄로 자르지 않고 두 줄까지 보여 준다 */
#shop-wrap .item-list .sct_txt,
#shop-wrap .item-main-10 .sct_txt,
#shop-wrap .product-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal !important;
    font-size: clamp(.875rem, 2.4vw, .9375rem); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. 장바구니·주문서 표 — 좁은 화면에서 밀어서 본다
   --------------------------------------------------------------------------
   표를 카드로 접는 방식은 주문서처럼 칸이 많은 화면에서 오히려 읽기 어려워서,
   표 모양을 유지한 채 그 영역만 옆으로 밀도록 했다.
   -------------------------------------------------------------------------- */
#shop-wrap table { width: 100%; border-collapse: collapse; }
#shop-wrap .tbl_head01 table,
#shop-wrap .tbl_frm01 table { min-width: 560px; }
#shop-wrap th,
#shop-wrap td { word-break: keep-all; }

/* 입력 칸은 16px 이상 (아이폰 자동 확대 방지) + 터치 높이 확보 */
#shop-wrap input[type="text"],
#shop-wrap input[type="password"],
#shop-wrap input[type="email"],
#shop-wrap input[type="tel"],
#shop-wrap input[type="number"],
#shop-wrap select,
#shop-wrap textarea { font-size: 16px; max-width: 100%; }
#shop-wrap input[type="text"],
#shop-wrap input[type="password"],
#shop-wrap input[type="email"],
#shop-wrap input[type="tel"],
#shop-wrap input[type="number"],
#shop-wrap select { min-height: 44px; }
#shop-wrap input[type="checkbox"],
#shop-wrap input[type="radio"] { width: 20px; height: 20px; }

/* 버튼 묶음 — 좁으면 세로로 쌓고 손가락 크기를 지킨다 */
#shop-wrap .btn_confirm .btn_submit,
#shop-wrap .btn_confirm .btn_cancel,
#shop-wrap .btn_cart, #shop-wrap .btn_buy {
    min-height: 48px; font-size: 1rem;
}
@media (max-width: 480px) {
    #shop-wrap .btn_confirm { display: flex; flex-direction: column; gap: 8px; }
    #shop-wrap .btn_confirm a,
    #shop-wrap .btn_confirm button,
    #shop-wrap .btn_confirm input { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. 푸터 — 쇼핑몰 사업자 정보
   --------------------------------------------------------------------------
   매거진 푸터와 같은 자리, 같은 글자 크기를 쓰되 항목이 많아 줄바꿈이 잦다.
   구분선(|)이 줄 끝에 혼자 남지 않도록 항목 단위로 붙여서 흘린다.
   -------------------------------------------------------------------------- */
.footer-shop-info .footer-shop-rows { line-height: 2; }
.footer-shop-info .footer-shop-rows > span {
    display: inline-block; white-space: nowrap; word-break: keep-all;
}
/* 주소처럼 긴 값은 좁은 화면에서 줄바꿈을 허용한다 */
@media (max-width: 575px) {
    .footer-shop-info .footer-shop-rows > span { white-space: normal; }
}
.footer-shop-info .info-divider { margin: 0 8px; opacity: .45; }
@media (max-width: 575px) {
    .footer-shop-info .info-divider { display: none; }
    .footer-shop-info .footer-shop-rows > span { display: block; }
}

/* --------------------------------------------------------------------------
   7. 화면 낭독기 전용 문구
   -------------------------------------------------------------------------- */
#shop-wrap .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   8. 상품이 아직 없을 때 안내
   -------------------------------------------------------------------------- */
.shop-empty {
    margin: 10px 0 40px; padding: clamp(36px, 8vw, 64px) 24px;
    border: 1px solid rgba(128, 128, 128, .25); border-radius: 14px;
    text-align: center; line-height: 1.8;
}
.shop-empty-title {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 4.5vw, 1.5rem); font-weight: 800;
}
.shop-empty p { margin: 0 0 6px; }
.shop-empty-links {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 10px; margin-top: 22px !important;
}
.shop-empty-links a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 20px;     /* 터치 대상 확보 */
    border-radius: 999px; color: inherit; text-decoration: none;
    border: 1px solid rgba(128, 128, 128, .3);
}
.shop-empty-links a.shop-empty-btn {
    background: #1a6cf0; border-color: #1a6cf0; color: #fff; font-weight: 700;
}
.shop-empty-admin {
    margin-top: 20px !important; font-size: .8125rem; opacity: .7;
}

/* --------------------------------------------------------------------------
   9. 상품 묶음 제목 (히트상품·최신상품 …)
   -------------------------------------------------------------------------- */
#shop-wrap .shop-section { margin: 0 0 34px; }
#shop-wrap .shop-section-title {
    margin: 0 0 14px;
    font-size: clamp(1.0625rem, 3.4vw, 1.25rem); font-weight: 800;
}
#shop-wrap .shop-section-title a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   10. 관리자 미리보기 띠 (방문자에게는 준비 중 화면이 나가는 중)
   -------------------------------------------------------------------------- */
.shop-preview-bar {
    margin: 0 0 22px; padding: 12px 16px;
    border: 1px dashed rgba(224, 166, 58, .8); border-radius: 10px;
    background: rgba(224, 166, 58, .12);
    font-size: .875rem; line-height: 1.7;
}
.shop-preview-bar a {
    display: inline-block; margin-left: 6px; padding: 2px 0;
    color: inherit; font-weight: 700;
    text-decoration: underline; text-underline-offset: 4px;
}
.shop-empty-admin code {
    padding: 1px 5px; border-radius: 4px;
    background: rgba(128, 128, 128, .16); font-size: .95em;
}

/* --------------------------------------------------------------------------
   11. 전체 메뉴(메가메뉴) — 항목 수에 맞춰 한 줄로 펼친다
   --------------------------------------------------------------------------
   테마 기본값은 한 칸을 20% 로 고정해 '한 줄에 5개'를 전제한다.
   매거진은 메뉴가 5개라 딱 맞지만, 쇼핑몰은 분류가 7개라 5개 + 2개로 갈라져
   둘째 줄이 휑하게 남는다. 칸을 고정 폭 대신 고르게 나누도록 바꿔서,
   메뉴가 몇 개든 한 줄에 같은 너비로 놓이게 한다.
   (칸이 130px 밑으로 내려갈 만큼 많아지면 그때는 자연스럽게 줄이 나뉜다)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar-nav .mega-menu { flex-wrap: wrap; }

    .navbar-nav .mega-menu-col {
        flex: 1 1 130px;
        width: auto !important;      /* 20% 고정 해제 */
        min-width: 0;                /* 긴 이름이 칸을 뚫고 나가지 않게 */
        border-right: 1px solid #e5e5e5 !important;
    }
    .navbar-nav .mega-menu-col:last-child { border-right: 0 !important; }

    /* 6번째부터 윗줄과 떨어뜨리던 규칙 해제 — 한 줄이면 필요 없다 */
    .navbar-nav .mega-menu-col:nth-child(n+6) h5 {
        border-top: 0; padding-top: 0; margin-top: 0;
    }

    /* 칸이 좁아지므로 좌우 여백을 조금 줄이고, 한글은 단어 단위로 줄바꿈 */
    .navbar-nav .mega-menu-col h5 a {
        padding-left: 12px !important; padding-right: 12px !important;
        word-break: keep-all;
    }
    .navbar-nav .mega-menu-col .mega-menu-item {
        padding-left: 12px; padding-right: 12px;
        white-space: normal; word-break: keep-all;
    }
}