/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/*---------- GNB(상단 카테고리 메뉴) 스타일 ----------
   관리자 페이지( adm/gnb_style.php )에서 목록으로 골라 관리한다(2026-08-24 추가).
   이 줄은 그 페이지가 자동으로 바꿔쓴다 - 수동으로 바꾸려면 파일명만 gnb-style-N.css로
   교체하면 되고(뒤의 물음표숫자는 캐시 무효화용이라 아무 값으로 바꿔도 무방함), 목록/설명은
   data/gnb_style_list.php 에서 관리한다.
   경고: 이 가져오기 구문은 반드시 파일의 다른 모든 CSS 규칙보다 앞에 있어야 한다 - CSS 스펙상
   가져오기 구문은 스타일시트 맨 앞(문자셋 지정 다음)에만 올 수 있고, 다른 규칙 뒤에 오면
   브라우저가 그 구문 전체를 무효로 처리해서 조용히 무시해버린다(2026-08-24 실사용 중 발견 -
   관리자 미리보기는 정상인데 실제 사이트엔 전혀 반영 안 되던 사고의 원인이었음). 이 구문 위치를
   옮기지 말 것. */
@import url("gnb-style-3.css?ver=1787576088");

/* GNB-COLOR-OVERRIDE (adm/gnb_style.php 자동관리 - 수동 편집해도 되지만 다음 적용 시 덮어써짐) */
:root{--gnb-accent:#0277bd;--gnb-accent-ink:#ffffff;}

.product-description-bottom {display:none}
.product-description-in .product-ratings {display:none}

/*---------- 메인 슬라이더 이미지 중앙정렬(항상 컨테이너 폭 꽉 채움) ----------*/
.shop-main-slider img {display:block;width:100% !important;height:auto !important;margin:0 auto}
/* 2026-08-25 추가: shop_style.css의 .shop-main-slider{max-width:90%}는 화면이 넓을 때
   원본 이미지(1500px)보다 더 크게 늘어나서 화질이 흐릿해지는 문제가 있었다(실측: 1280px
   화면에서도 뜨는데, 1920px 화면이면 90%가 1500px를 훌쩍 넘김). 90% 비율은 그대로 두되
   1500px는 절대 넘지 않도록 상한을 추가한다 - 할인상품 배너(.sale-banner)도 이제 정확히
   같은 공식(min(1500px, 90vw))을 쓰므로 둘의 가로폭이 항상 일치한다. */
.shop-main-slider {max-width:min(1500px, 90%) !important;}

/*---------- 상품정보 탭/콘텐츠 카드형 리디자인 ----------*/
.pg-anchor-in .nav-tabs li a {border:1px solid #e5e5e5 !important;border-radius:10px 10px 0 0 !important;background:#fafafa;color:#8f8f8f;font-weight:500;transition:color .2s ease,background-color .2s ease}
.pg-anchor-in .nav-tabs li.active a {color:#cc2300 !important;background:#fff;border-color:#e5e5e5 !important;border-bottom:1px solid #fff !important}
.pg-anchor-in .tab-bottom-line {display:none}
#sit_inf_explan {border:1px solid #e5e5e5;border-radius:0 12px 12px 12px;padding:30px;margin-top:-1px;color:#5f5f5f;line-height:1.9;background:#fff;font-family:'s-core-dream',sans-serif;font-size:12pt;font-weight:normal}
#sit_inf_explan * {font-family:'s-core-dream',sans-serif !important;font-size:12pt !important;font-weight:normal !important}
blockquote.hero {border:1px solid #e5e5e5;border-radius:12px;padding:24px 28px;color:#5f5f5f;background:#fafafa;margin:0 0 20px}

/*---------- 상품이미지 팝업(클릭/호버) - 크기를 이미지에 맞추고 게임창 느낌의 등장 애니메이션 ----------*/
.shop-img-modal-dialog {max-width:90vw;width:auto;display:flex;justify-content:center;margin-left:auto;margin-right:auto}
.shop-img-modal-dialog .modal-content {width:auto;display:inline-block;border-radius:16px;overflow:hidden;border:none;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.shop-img-modal-dialog .fotorama {max-width:80vw}
.shop-img-modal-dialog .fotorama__img {max-height:78vh;object-fit:contain}

@keyframes shopImgPopIn {
    0% {transform:scale(.6);opacity:0}
    60% {transform:scale(1.04);opacity:1}
    100% {transform:scale(1);opacity:1}
}
.shop-img-modal-pop.show .modal-content {animation:shopImgPopIn .38s cubic-bezier(.34,1.56,.64,1) both}

/*---------- 상품 목록 카드의 특판가/소비자가 가운데 정렬 ----------*/
.product-price {text-align:center}

/*---------- 상품 목록 카드의 찜하기/페이스북/트위터 아이콘 숨김 ----------*/
.product-sns {display:none !important}

/*---------- "할인상품" 섹션 제목 - 메인 배너이미지와 동일한 폭의 패턴 배경 배너 ----------*/
.main-heading-sale h2 {margin:0 0 30px}
.main-heading-sale h2:after {display:none}
.main-heading-sale h2 a {display:block}
.main-heading-sale .sale-banner {
    display:flex;align-items:center;justify-content:center;gap:16px;
    /* 2026-08-25 4차 수정(진짜 원인) - 개발자도구로 직접 재보니:
       메인 배너 슬라이더(.shop-main-slider)는 "자기 부모(.basic-body-main, 사실상 화면
       전체 폭)의 90%"로 커지는 방식이었다. 이 배너를 "1500px 또는 화면 전체(100vw)"
       공식으로 맞추려 했던 이전 시도들은 그래서 서로 다른 계산이라 안 맞았던 것.
       이제 메인 배너와 완전히 같은 "화면의 90%, 단 1500px는 안 넘음" 공식으로 통일한다.
       (여전히 .container 탈출은 필요 - min()으로 폭/마진을 짝지어 과다지정 문제 방지). */
    width:min(1500px, 90vw);
    margin-left:calc(50% - min(750px, 45vw));
    margin-right:calc(50% - min(750px, 45vw));
    padding:9px 20px;border-radius:16px; /* 2026-08-25 - 배너 높이 83px->50px로 축소 요청(패딩 26px->9px) */
    position:relative;overflow:hidden;
}
/* 2026-08-25 - 배경을 완성된 이미지(jade, 가장자리 반투명->중앙 진한 청록)로 교체.
   글자는 이미지에 굽지 않고 실텍스트로 유지(화면폭이 1500px 미만이라 리샘플링되어도
   글자 획은 항상 선명함 - 배경만 이미지라 약간 늘어나 보여도 무늬라 티가 안 남). */
.main-heading-sale .sale-banner-bg-img {
    background-image:url('../image/sale-banner-bg-jade.png?v=3');
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
}
.main-heading-sale .sale-banner strong,
.main-heading-sale .sale-banner strong .text-gray {color:#fff !important;font-size:1.6rem;letter-spacing:3px;white-space:nowrap;font-weight:700;position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.4)}
@media (max-width:576px) {
    .main-heading-sale .sale-banner {padding:7px 16px;gap:10px}
    .main-heading-sale .sale-banner strong,.main-heading-sale .sale-banner strong .text-gray {font-size:1.25rem;letter-spacing:1px}
}

/*---------- 상품 상세페이지 썸네일(5개 이하) - 슬라이드 없이 작은 크기로 붙여서 가운데 정렬 ----------*/
.product-thumb.thumb-simple {display:flex !important;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
.product-thumb.thumb-simple .thumb-img {flex:0 0 auto;width:100px;padding:0}

/*---------- 상품 상세페이지 판매기간 안내 배너 ----------*/
.sale-period-banner {background:#eaf6fb;border:1px solid #bfe4f2;border-radius:10px;padding:14px 18px;margin:16px 0;color:#1a6a8a;font-weight:600;font-size:.95rem}
.sale-period-banner i {margin-right:8px;color:#2596be}

/*---------- 관리자 전용 업체별 상품 등록현황 - 오른쪽 접이식 사이드 패널 ----------*/
.ap-drawer {position:fixed;top:110px;right:0;z-index:99999;transform:translateX(100%);transition:transform .25s ease}
.ap-drawer.ap-drawer-open {transform:translateX(0)}
.ap-drawer-tab {
    position:absolute;left:-38px;top:14px;
    background:#cc2300;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;
    padding:14px 8px;border-radius:8px 0 0 8px;cursor:pointer;
    box-shadow:-2px 2px 10px rgba(0,0,0,.2);font-size:.78rem;font-weight:700;letter-spacing:1px;
    text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.ap-drawer-tab i {margin-bottom:6px}
.ap-drawer-panel {
    width:300px;max-height:calc(100vh - 150px);background:#fff;
    border-radius:10px 0 0 10px;box-shadow:-4px 0 24px rgba(0,0,0,.18);
    display:flex;flex-direction:column;overflow:hidden;
}
.ap-drawer-header {display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#2b2b2e;color:#fff;font-size:.82rem;font-weight:700;flex-shrink:0;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.ap-drawer-header i {margin-right:5px}
.ap-drawer-header button {background:none;border:none;color:#fff;cursor:pointer;font-size:.85rem;opacity:.8}
.ap-drawer-header button:hover {opacity:1}
.ap-drawer-body {padding:12px;overflow-y:auto;flex:1 1 auto;font-size:.78rem}

.ap-summary-table {width:100%;border-collapse:collapse;font-size:.72rem}
.ap-summary-table th, .ap-summary-table td {padding:6px 5px;border-bottom:1px solid #eee;text-align:center}
.ap-summary-table thead th {background:#f7f7f7;font-weight:700;font-size:.68rem}
.ap-summary-table .ap-brand {text-align:left;font-weight:700}
.ap-summary-table tfoot th {background:#fafafa;border-top:2px solid #ddd;font-size:.68rem}
.ap-done {color:#2e7d32}
.ap-incomplete {color:#cc2300;text-decoration:underline;cursor:pointer}
.ap-incomplete:hover {color:#a3160a}
.ap-summary-table td:nth-child(2), .ap-summary-table td:nth-child(3),
.ap-summary-table th:nth-child(2), .ap-summary-table th:nth-child(3) {text-align:right}

.ap-list-header {display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee;font-size:.78rem;flex-wrap:wrap}
.ap-back {color:#666;text-decoration:none;font-size:.75rem}
.ap-back:hover {color:#cc2300}
.ap-item-list {list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.ap-item-list li {border-bottom:1px solid #f0f0f0}
.ap-item-list a {display:flex;align-items:center;gap:8px;padding:8px 4px;color:#333;text-decoration:none;font-size:.75rem}
.ap-item-list a:hover {background:#fdf1ef;color:#cc2300}
.ap-item-id {color:#999;font-size:.7rem;flex-shrink:0}
.ap-item-list a i {margin-left:auto;color:#bbb;font-size:.7rem}
.ap-empty {text-align:center;color:#999;padding:20px 0;font-size:.78rem}

.ap-overall {background:#f9f9f9;border-radius:8px;padding:10px 12px;margin-bottom:10px}
.ap-overall-row {display:flex;align-items:center;gap:6px}
.ap-overall-row + .ap-overall-row {margin-top:8px}
.ap-overall-label {flex:0 0 auto;font-weight:700;font-size:.68rem;color:#444;white-space:nowrap;text-shadow:1px 1px 1px rgba(0,0,0,.3)}
.ap-progress {flex:1 1 auto;height:9px;background:#e5e5e5;border-radius:5px;overflow:hidden;border:1px solid #000;box-sizing:border-box;box-shadow:0 2px 4px rgba(0,0,0,.35)}
.ap-progress-bar {height:100%;background:linear-gradient(90deg,#ff8a5c,#cc2300);border-radius:5px;transition:width .3s ease}
.ap-overall-pct {flex:0 0 auto;text-align:right;font-weight:700;font-size:.68rem;color:#cc2300;white-space:nowrap;text-shadow:1px 1px 1px rgba(0,0,0,.3)}

.ap-view-toggle {display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.72rem;flex-wrap:wrap}
.ap-view-toggle label {display:flex;align-items:center;gap:3px;cursor:pointer;font-weight:600;text-shadow:1px 1px 1px rgba(0,0,0,.25)}
.ap-view-toggle select {padding:4px 6px;border:1px solid #ddd;border-radius:5px;font-size:.72rem;width:100%;margin-top:4px}
.ap-summary-table tr.ap-row-hidden {display:none}

@media (max-width:576px) {
    .ap-drawer {top:auto;bottom:0}
    .ap-drawer-panel {width:88vw;max-height:70vh}
}