/* BASIC css start */
/* ===== [CSS 칸] 가자안전mall 모바일 메인 - 이 파일은 "CSS" 입력란에 넣으세요 ===== */
/* ================================================================
   가자안전mall 모바일 메인 (2026-08) - PC 장바구니(cart_v2) 토큰 기준
   토큰: 그린 #438c46 / 딥그린 #367038 / 가격 #ff3c00
         글자 #222 #666 #888 / 선 #ddd #ccc / 소프트 #f7f7f7 / 라운드 4px
   ================================================================ */

#header .head_inner .head_bottom ul li:first-child a{border-bottom:2px solid #000; font-weight:700;}

.gj-main{
  --ink:#222; --sub:#666; --muted:#888;
  --line:#ddd; --line2:#ccc; --soft:#f7f7f7;
  --green:#438c46; --green-d:#367038; --price:#ff3c00; --tint:#eef5ef;
  font-family:Pretendard,'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',sans-serif;
  color:var(--ink); letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
  background:#fff;
}
.gj-main *{box-sizing:border-box;}
.gj-main a{color:inherit; text-decoration:none;}

/* ---------- 공통 섹션 ---------- */
.section{margin-bottom:34px;}
.section *{box-sizing:border-box;}
.sec_inner{padding:0 14px;}
.item-title{
  margin:0 14px 14px; padding:0;
  font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; text-align:center;
  text-decoration:underline; text-decoration-color:var(--green);
  text-decoration-thickness:3.5px; text-underline-offset:6px;
}

/* ---------- 인기검색어 : 왼쪽 고정 라벨 + 순위 칩 ---------- */
.gj-chipbar{display:flex; align-items:center; gap:10px; padding:14px 0 12px 14px; background:#fff;}
.gj-chip-label{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  padding-right:10px; border-right:1px solid #ececec;
  font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.gj-chip-label svg{color:var(--green);}
.gj-chips{
  flex:1 1 auto; min-width:0;
  display:flex; gap:6px; padding:0 14px 0 0; background:#fff;
  overflow-x:auto; -webkit-overflow-scrolling:touch; cursor:grab;
}
.gj-chips::-webkit-scrollbar{display:none;}
.gj-chips.is-drag{cursor:grabbing;}
.gj-chips.is-drag a{pointer-events:none;}
/* 아래 상품 탭(.sec5_cate li a)과 같은 규칙을 쓴다 - 흰 배경 + 얇은 테두리 */
.gj-main .gj-chip,
.gj-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 14px; border-radius:16px;
  border:1px solid var(--line2); background:#fff;
  font-size:12.5px; font-weight:600; color:var(--sub); white-space:nowrap;
}
.gj-chip i{font-style:normal; font-weight:800; color:var(--green); font-size:12px; margin-right:1px;}
.gj-chip:active{border-color:var(--muted); color:var(--ink); background:#fafbfc;}

/* ---------- 신뢰 스트립 ---------- */
.gj-trust{
  min-height:38px; padding:9px 12px; background:#fff;
  border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:2px 6px; font-size:11.5px; color:var(--sub); font-weight:500;
  text-align:center; line-height:1.5;
}
.gj-trust svg{color:var(--green); flex:0 0 auto;}
.gj-trust i{font-style:normal; color:#d5dcd6;}
/* 메시지는 항상 둘째 줄로 내려 폭에 상관없이 같은 모양을 유지 */
.gj-trust b{flex:0 0 100%; margin-top:2px; color:var(--green); font-weight:700; white-space:nowrap;}
/* '당일출고' 는 상품 아이콘을 가리키는 말이라 뱃지처럼 보이게 */
.gj-trust b em{
  font-style:normal; display:inline-block; padding:1px 6px; margin-right:3px;
  background:var(--green); color:#fff; border-radius:3px; font-size:10.5px; font-weight:800;
}

/* ---------- sec1 : 이벤트 배너 ---------- */
#sec1{margin-top:16px; margin-bottom:28px; padding:0 14px;}
#sec1 .swiper{position:relative; border-radius:4px; overflow:hidden;}
#sec1 .swiper-wrapper{display:flex; margin:0; padding:0; list-style:none;}
#sec1 .swiper-slide{flex:0 0 100%; width:100%; max-width:100%;}
#sec1 .swiper-slide a{display:block; width:100%;}
#sec1 .swiper-slide img{width:100%; display:block;}
#sec1 .swiper-pagination{
  position:absolute; right:10px; bottom:10px; left:auto; width:auto; z-index:5;
  background:rgba(20,30,22,.55); color:#fff; font-size:11px; border-radius:12px; padding:3px 10px;
}

/* ---------- sec2 : 카테고리 아이콘 ---------- */
#sec2{margin-bottom:30px;}
#sec2 .sec_inner{padding:0;}
.slider-wrapper{overflow:hidden; width:100%; background:#fff; padding:18px 0 4px;}
.slider-track{display:flex; transition:transform .3s ease; width:max-content;}
.slider-page{display:flex; flex-wrap:wrap; width:100vw; max-width:850px; flex-shrink:0; margin:0; padding:0; list-style:none;}
.slider-page li{width:20%; box-sizing:border-box; padding:0 2px 12px; list-style:none; text-align:center;}
.slider-page li a{display:block;}
.slider-page li img{width:46px; height:46px; object-fit:contain; display:block; margin:0 auto 6px;}
.slider-page li p{font-size:11px; line-height:1.25; color:var(--ink); margin:0; word-break:keep-all;}
.dot-pagination{position:relative; display:flex; justify-content:center; gap:6px; margin-top:10px; text-align:center;}
.sec3_prd .dot-pagination,
.sec5_prd .dot-pagination{margin-top:18px;}
.dot-pagination .dot,
.dot-pagination span{
  display:inline-block; width:7px; height:7px; background:#d0d0d0;
  border-radius:10px; margin:0 3px; transition:all .3s ease;
}
.dot-pagination .dot.active,
.dot-pagination .swiper-pagination-bullet-active{width:20px; background:var(--green);}

/* ---------- 브랜드관 (원형 / 테두리 없음) ---------- */
/* 브랜드가 30개라 2줄로 배치하고 가로로 밀어서 본다 */
.gj-brand-scroll{
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-auto-columns:72px;
  gap:18px 10px; overflow-x:auto; padding:8px 14px 12px;
  -webkit-overflow-scrolling:touch; cursor:grab;
}
.gj-brand-scroll::-webkit-scrollbar{display:none;}
.gj-brand-scroll.is-drag{cursor:grabbing;}
.gj-brand-scroll.is-drag a{pointer-events:none;}
.gj-brand{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; color:var(--ink); width:72px;
}
.gj-brand-mark{
  width:72px; height:72px; border-radius:50%; border:0; background:#fff;
  box-shadow:0 1px 7px rgba(20,40,25,.13);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* 브랜드몰과 같은 로고(177x50, 흰 배경 · 테두리 없음)를 쓰므로 잘라낼 필요가 없다. */
.gj-brand-mark img{
  max-width:58px; max-height:20px; width:auto; height:auto; display:block;
}
.gj-brand-name{display:block; width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gj-brand-all .gj-brand-mark{background:var(--tint); box-shadow:none; color:var(--green-d); font-weight:800; font-size:12px;}

/* ---------- 상품 탭 (sec3 / sec5 공통) ---------- */
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate){
  margin:0 0 16px; padding:0 14px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; cursor:grab;
}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate)::-webkit-scrollbar{display:none;}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate).is-drag{cursor:grabbing;}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate).is-drag a{pointer-events:none;}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate) ul{display:flex; margin:0; padding:0 4px 0 0; list-style:none; width:max-content;}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate) ul li{display:inline-block; width:auto !important; margin-right:6px; list-style:none;}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate) ul li a{
  display:block; height:32px; line-height:30px; padding:0 14px;
  background:#fff; border:1px solid var(--line2); border-radius:16px;
  text-align:center; color:var(--sub); font-size:12.5px; font-weight:600;
  white-space:nowrap; transition:all .12s;
}
:is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate) ul li.on>a{color:#fff; background:var(--green); border-color:var(--green);}

:is(#sec3,.sec5) :is(.sec3_prd,.sec5_prd)>div{display:none; position:relative; opacity:0; transition:opacity .35s;}
:is(#sec3,.sec5) :is(.sec3_prd,.sec5_prd)>div.show{display:block;}
:is(#sec3,.sec5) :is(.sec3_prd,.sec5_prd)>div.act{opacity:1;}
/* ★ 안전장치 : JS 가 안 돌아도 첫 탭 상품은 보이게 한다.
   (JS 가 정상 동작하면 섹션에 .gj-tabs-on 이 붙어 이 규칙이 꺼진다) */
:is(#sec3,.sec5):not(.gj-tabs-on) :is(.sec3_prd,.sec5_prd)>div:first-child{display:block; opacity:1;}

/* ---------- 상품 카드 (3열) ----------
   flex + calc 는 소수점 반올림 때문에 3번째 카드가 다음 줄로 밀리는 일이 있어
   grid 로 고정한다. 스킨 기본 CSS 의 .item_list{width:calc(...)} 도 무력화. */
.item_cont{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px 10px; margin:0; padding:0; list-style:none;
}
.item_cont::before,.item_cont::after{display:none !important; content:none !important;}
.item_cont .item_list{
  width:auto !important; max-width:none !important; min-width:0; float:none !important;
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; text-align:left; position:relative;
}
.item_cont .item_list .tumb,
.item_cont .item_list .thumb{
  display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
  border:1px solid var(--line); border-radius:4px; background:var(--soft); position:relative;
}
.item_cont .item_list .tumb a{display:block; width:100%; height:100%;}
.item_cont .item_list .tumb img{width:100%; height:100%; object-fit:cover; display:block;}
.item_cont .item_list .info{padding:8px 1px 0;}
.item_cont .item_list .info_link{display:block; color:inherit;}
.item_cont .item_list .prdname{
  margin:0; font-size:12.5px; line-height:1.4; color:var(--ink); font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.item_cont .item_list .prdetc{
  margin:3px 0 0; font-size:11px; line-height:1.35; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.item_cont .item_list .prdprice{margin:6px 0 0; font-size:14px; font-weight:800; color:var(--ink); line-height:1.25;}
.item_cont .item_list .prdprice .price{font-size:14px; font-weight:800; color:var(--ink);}
.item_cont .item_list .prdprice .percent{color:var(--price); font-weight:800; margin-right:4px; font-size:12.5px;}
.item_cont .item_list .prdprice strike{display:block; font-size:11px; color:#9aa39b; font-weight:400; margin-top:1px;}
.item_cont .item_list .prdprice .soldout{font-size:13px; font-weight:700; color:var(--muted);}
.item_cont .item_list .prdreview{margin:4px 0 0; font-size:11px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap;}
.item_cont .item_list .prdreview:empty{display:none;}
.item_cont .item_list .prdreview .score{color:var(--green); font-weight:700;}
.item_cont .item_list .prdreview img{height:11px; vertical-align:middle;}

/* 섹션 내부 슬라이드 */
.sec5_swiper,.sec3_swiper{overflow:hidden;}
.sec5_swiper .swiper-wrapper,
.sec3_swiper .swiper-wrapper{display:flex;}
.sec5_swiper .swiper-slide,
.sec3_swiper .swiper-slide{flex:0 0 100%; width:100%;}

/* ---------- sec6 : 라인 배너 ---------- */
#sec6 .sec_inner a{display:block; width:100%;}
#sec6 .sec_inner a img{width:100%; display:block; border-radius:4px;}

/* ---------- 혜택 ---------- */
.gj-benefit{margin:0 14px; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff;}
.gj-benefit-row{display:flex; align-items:center; gap:12px; padding:14px 14px;}
.gj-benefit-row+.gj-benefit-row{border-top:1px solid #eee;}
.gj-benefit-ico{
  width:36px; height:36px; border-radius:4px; background:var(--tint);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--green);
}
.gj-benefit-row p{margin:0; font-size:13px; line-height:1.5; color:var(--ink);}
.gj-benefit-row p b{font-weight:700;}
.gj-benefit-row p span{font-size:11.5px; color:var(--muted);}

/* ---------- 포토리뷰 ---------- */
.gj-reviewbanner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 14px; padding:16px 14px; background:var(--tint); border-radius:4px;
}
.gj-reviewbanner strong{display:block; font-size:14.5px; font-weight:800; color:var(--green-d); letter-spacing:-0.3px;}
.gj-reviewbanner p{margin:5px 0 0; font-size:12px; color:#5e6b60;}

/* ---------- B2B ---------- */
.gj-b2b{margin:0 14px 34px; padding:18px 16px; background:var(--tint); border-radius:4px;}
.gj-b2b strong{display:block; font-size:15px; font-weight:800; color:var(--green-d); letter-spacing:-0.3px;}
.gj-b2b p{margin:7px 0 14px; font-size:12px; color:#5e6b60; line-height:1.6;}
.gj-b2b-btns{display:flex; gap:8px;}
.gj-btn-fill{
  flex:1; height:50px; background:var(--green); color:#fff; border-radius:4px;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;
}
.gj-btn-line{
  flex:1; height:50px; background:#fff; border:1px solid var(--green); color:var(--green);
  border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}

/* ---------- 고객센터 ---------- */
.gj-cs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 14px;}
.gj-cs a{
  border:1px solid var(--line); border-radius:4px; padding:14px 6px; background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.gj-cs strong{font-size:12.5px; font-weight:700; color:var(--ink);}
.gj-cs span{font-size:11px; color:var(--muted);}
.gj-cs-hours{margin:12px 14px 0; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6;}

/* ---------- 넓은 화면 (스킨 컨테이너 최대 850px) ---------- */
@media screen and (min-width:560px){
  /* ★ 태블릿에서도 3열 유지 : 한 슬라이드 6개 = 3열 x 2줄 로 딱 맞게 채워짐
        (4열로 두면 6개가 4+2 로 어긋나 보임) */
  .item_cont{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px 14px;}
  .slider-page li{width:10%;}
  .item_cont .item_list .prdname{font-size:13px;}
}
@media screen and (min-width:760px){
  .sec_inner{padding:0 20px;}
  #sec1{padding:0 20px;}
  .item-title,.gj-benefit,.gj-reviewbanner,.gj-b2b{margin-left:20px; margin-right:20px;}
  .gj-chipbar{padding-left:20px;}
  .gj-brand-scroll,.gj-cs{padding-left:20px; padding-right:20px;}
  :is(#sec3,.sec5) :is(.sec3_cate,.sec5_cate){padding-left:20px; padding-right:20px;}
}

/* ================= 시즌상품 : 제목 블록에만 배경 이미지 (겨울) =================
   ★ 색은 --season / --season-d 두 값만 바꾸면 배지·탭·도트가 같이 바뀝니다.
   ★ 이미지 주소는 아래 background-image 의 url() 한 곳만 바꾸면 됩니다.
     옅은 정도는 ::before 의 rgba(255,255,255,.62) 값으로 조절합니다. */
.gj-season{--season:#da1414; --season-d:#B00F0F;}

.gj-season .gj-season-band{
  position:relative; overflow:hidden;
  margin:0 14px 18px; padding:26px 16px 24px;
  border-radius:14px;
  background-color:#EAF3FD;
  background-image:url('https://chsbd.img7.kr/WEB/mobile/WINTER44.png'),
                   linear-gradient(180deg,#F2F7FF 0%,#E4EFFC 100%);
  background-size:cover, auto;
  background-position:center bottom, center;   /* 보여줄 위치 : center top / center / center bottom */
  background-repeat:no-repeat, no-repeat;
}
.gj-season .gj-season-band::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.62);
}
.gj-season .gj-season-band > *{position:relative; z-index:1;}

.gj-season .gj-season-eyebrow{
  display:table; margin:0 auto 10px; height:22px; line-height:22px; padding:0 11px;
  background:var(--season); color:#fff; border-radius:11px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
}
.gj-season .item-title{
  text-decoration:none; color:var(--ink);
  font-size:20px; letter-spacing:-0.03em; margin:0 0 6px;
}
.gj-season .gj-season-desc{margin:0; text-align:center; font-size:12px; color:#5F7185; line-height:1.5;}

/* 탭 : 원본 CSS 를 이기도록 #sec5_5 로 고정, 선택 시 레드 채움 */
#sec5_5.gj-season .sec5_cate{margin-bottom:16px;}
#sec5_5.gj-season .sec5_cate ul li{border-color:#EFB3B3 !important;}
#sec5_5.gj-season .sec5_cate ul li a{border-color:#EFB3B3 !important; color:var(--season-d) !important; font-weight:700 !important;}
#sec5_5.gj-season .sec5_cate ul li.on>a{background:var(--season) !important; border-color:var(--season) !important; color:#fff !important;}

.gj-season .dot-pagination .swiper-pagination-bullet-active{background:var(--season);}

/* ---------- 브랜드관 : 전체보기 카드 ---------- */
.gj-brand-all .gj-brand-mark{
    background:var(--tint);
    border:1.5px solid var(--green);
    box-shadow:none;
    color:var(--green);
}
.gj-brand-all .gj-brand-name{
    color:var(--green-d);
    font-weight:800;
}

/* ===== 부제 글자 잘림 보정 (line-height 가 박스 높이와 같아 받침이 잘렸음) ===== */
.item_cont .item_list .prdetc{line-height:1.5; height:auto; overflow:hidden}
/* BASIC css end */

