/* BASIC css start */
/* ============================================================
	피시위즈 모바일 리뉴얼 — 공통 + 헤더 CSS v2.0 (2026-07)
	KREAM풍 미니멀 : 블랙(#222) & 화이트 / 포인트 코랄레드 #EF6253
============================================================ */

/* ---------- 공통 유틸 (기존 클래스 유지 — 다른 페이지에서 사용) ---------- */
/* 페이지 전체 가로 밀림 방지 (v2.4) — 화면 폭을 넘는 요소가 있어도 본문이 좌우로 끌리지 않음.
   상품 캐러셀·GNB 등 의도된 가로 스크롤은 각 컨테이너 내부에서 동작하므로 영향 없음 */
html, body {overflow-x:hidden; max-width:100%;}

.cboth { clear:both;*zoom:1 }
.cboth:after { content:" "; display:block; clear:both; }
.fleft {float:left;}
.fright {float:right !important;}
.pdt5 {padding-top:5px;}

/* 각 페이지 상단 타이틀 */
#contents .h_title,
.page_location {padding:10px 12px; border-bottom:1px solid #F0F0F0; font-weight:bold; font-size:13px; color:#222;}
.page_location a {color:#888;}
.page_location li {display:inline-block;}
.page_location li + li:before {content:'>'; margin:0 5px; color:#CCC; font-weight:normal;}

/* 카테고리 열림 시 배경 마스크 */
#mask {top:0 !important; background:rgba(0,0,0,.45) !important;}

/* 더보기 버튼 */
#container .more {margin:5px 12px 20px;}
#container .more a,
#container .more .btn_moreGray {display:block; width:100%; height:44px; line-height:44px; text-align:center; border:1px solid #E5E5E5; border-radius:10px; background:#fff; color:#222; font-size:13px; font-weight:bold;}

/* ---------- 상품 카드 (전 페이지 공통 — KREAM 스타일 3열 (목록·검색 공통)) ---------- */
.list_shopping3x ul:after,
.list_shopping2x ul:after {content:""; display:block; clear:both;}
.list_shopping3x li {width:33.33%; float:left; margin-bottom:16px; box-sizing:border-box;}
.list_shopping2x li {width:50%; float:left; margin-bottom:18px; box-sizing:border-box;}
.list_shopping3x li:nth-child(3n+1) {clear:left;}
.list_shopping2x li:nth-child(odd) {clear:left;}

.list_shopping3x li a,
.list_shopping2x li a {display:block; padding:0; margin:0 5px;}

.list_shopping3x .listPic,
.list_shopping2x .listPic {width:100%; border:0; border-radius:12px; background:#F4F4F4;}

.list_shopping3x .list_shoppingInfo,
.list_shopping2x .list_shoppingInfo {margin:0; padding:8px 2px 0; background:#fff; text-align:left;}

.listName {font-size:12px; line-height:1.4; color:#222; border-bottom:0; padding:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.subname {color:#999; font-size:11px; word-break:break-all; margin-top:2px;}
.consumer {color:#BBB; text-decoration:line-through; font-size:11px;}
.listDiscount {font-size:11px; color:#BBB;}
.listDiscount del {color:#BBB;}
.listPrice {font-size:13px; font-weight:800; color:#222; margin-top:3px;}
.listReserve, .listPoint {font-size:11px; color:#999; margin-top:2px;}
.listSoldout {font-size:12px; font-weight:bold; color:#EF6253; margin-top:2px;}
.listReplce {font-size:12px; font-weight:bold; color:#222;}

/* 리스트형(1열) */
.list_shopping1x {text-align:center;}
.list_shopping1x ul {width:100%; display:table; table-layout:fixed; box-sizing:border-box; text-align:left; font-size:0;}
.list_shopping1x li {width:98%; display:inline-block; vertical-align:top; margin:1%; border:1px solid #F0F0F0 !important; border-radius:12px; box-sizing:border-box; overflow:hidden; background:#fff;}
.list_shopping1x li a {display:block; padding:0 !important; position:relative; overflow:hidden; zoom:1;}
.list_shopping1x li img.listPic {width:40%; float:right;}
.list_shopping1x .list_shoppingInfo {width:54%; float:left; padding:3% 2% 3% 3%; font-size:12px; text-align:left;}

/* 버튼 (기존 클래스명 유지) : 구매 계열 = 코랄레드 */
.btn_Red {background-color:#EF6253 !important; border:1px solid #EF6253 !important; color:#fff !important;}

/* 갤러리 게시판 배경 흰색 */
#gallery-list .item {background-color:#fff;}

.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}

/* 로딩 바 */
#nprogress { pointer-events:none; }
#nprogress .bar { background:#222; position:fixed; z-index:1031; top:0; left:0; width:100%; height:2px; }
#nprogress .peg { display:block; position:absolute; right:0px; width:100px; height:100%; box-shadow:0 0 10px #fff, 0 0 5px #fff; opacity:1.0; transform:rotate(3deg) translate(0px,-4px); }
.nprogress-custom-parent { overflow:hidden; position:relative; }
.nprogress-custom-parent #nprogress .bar { position:absolute; }

/* ---------- 헤더 ---------- */
#header {background:#fff;}


/* 2단 로고 줄 */
#header .hd-main {height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 6px; position:relative;}
#header .hd-btn {width:40px; height:40px; border:0; background:none; display:inline-flex; align-items:center; justify-content:center; position:relative; padding:0;}
#header .hd-btn svg {width:23px; height:23px; stroke:#222; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#header .hd-logo {position:absolute; left:50%; transform:translateX(-50%);}
#header .hd-logo img {height:34px; vertical-align:middle;}
#header .hd-right {display:flex;}
#header .hd-cart-cnt {position:absolute; top:2px; right:0; min-width:16px; height:16px; line-height:16px; border-radius:8px; background:#222; color:#fff; font-size:10px; font-weight:bold; text-align:center; padding:0 4px;}
#header .hd-cart-cnt:empty {display:none;}

/* 3단 검색창 (상시 노출 — KREAM풍 그레이 필) */
#header .hd-search {position:relative; margin:0 12px 10px; height:40px; border:0; border-radius:10px; background:#F4F4F4; padding-right:44px; overflow:visible;}
#header .hd-search fieldset {border:0; margin:0; padding:0;}
#header .hd-search legend {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
#header .hd-search .searchBox {position:relative; width:100%;}
#header .hd-search .searchBox input {width:100%; height:40px; border:0; background:none; padding:0 16px; font-size:14px; box-sizing:border-box; outline:none; color:#222;}
#header .hd-search .searchBox input::placeholder {color:#AAA;}
#header .hd-search .btn_search {position:absolute; top:0; right:0; width:44px; height:40px; display:flex; align-items:center; justify-content:center;}
#header .hd-search .btn_search svg {width:18px; height:18px; stroke:#222; fill:none; stroke-width:2.2; stroke-linecap:round;}

/* 4단 프로모 스트립 */
#header .hd-promo {height:32px; line-height:32px; background:#222; color:#fff; font-size:11px; text-align:center; letter-spacing:-0.2px;}
#header .hd-promo b {color:#fff;}

/* 5단 GNB — KREAM풍 화이트 텍스트 탭 */
#header .hd-gnb {display:flex; align-items:stretch; background:#fff; height:44px; border-bottom:1px solid #F0F0F0;}
#header .hd-gnb .gnb-all {flex:0 0 auto; display:flex; align-items:center; padding:0 12px; color:#222; font-size:13px; font-weight:800; background:#fff; border-right:1px solid #F0F0F0;}
#header .hd-gnb .gnb-scroll {flex:1; display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none;}
#header .hd-gnb .gnb-scroll::-webkit-scrollbar {display:none;}
#header .hd-gnb .gnb-scroll a {flex:0 0 auto; display:flex; align-items:center; padding:0 11px; color:#444; font-size:13px; font-weight:600;}
#header .hd-gnb .gnb-sale {font-weight:800; color:#EF6253 !important;}

/* ---------- 슬라이드 메뉴 (aside) — 화이트 미니멀 ---------- */
aside {position:fixed; width:82%; max-width:340px; height:100%; top:0; left:0; bottom:0; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:1001; display:none; padding:0;}

aside .aside-login {background:#fff; padding:14px 16px; border-bottom:1px solid #F0F0F0;}
aside .aside-login ul {margin:0; padding:0; font-size:0;}
aside .aside-login li {display:inline-block; margin-right:8px;}
aside .aside-login li a {display:block; font-size:12px; font-weight:bold; line-height:30px; padding:0 15px; border-radius:16px; color:#222; border:1px solid #DDD;}
aside .aside-login li.login a {background:#222; color:#fff; border-color:#222;}
aside .aside-login li.close {float:right; margin:0;}
aside .aside-login li.close a {border:0; font-size:16px; padding:0 4px; color:#222;}

aside .aside-quick {border-bottom:1px solid #F0F0F0; padding:12px 8px;}
aside .aside-quick ul {margin:0; padding:0; display:flex;}
aside .aside-quick li {flex:1; text-align:center; position:relative;}
aside .aside-quick li a {display:block; font-size:11px; color:#222; font-weight:600;}
aside .aside-quick .q-ico {display:block; font-size:20px; margin-bottom:4px;}
aside .aside-quick .slide_count {display:inline-block; position:absolute; top:-4px; right:14px; min-width:15px; padding:0 3px; height:15px; line-height:15px; background:#222; color:#fff; font-weight:bold; font-size:10px; border-radius:8px; text-align:center;}
aside .aside-quick .slide_count:empty {display:none;}

aside .section2 {border:0;}
aside .section2 .asideTop {background:#fff; font-size:0; border-bottom:1px solid #E5E5E5;}
aside .section2 .asideTop a {width:33.33%; line-height:44px; height:44px; text-align:center; display:inline-block; font-size:13px; color:#AAA; font-weight:bold; box-sizing:border-box;}
aside .section2 .asideTop a.act {color:#222; background:#fff; border-bottom:2px solid #222;}

aside nav li {border-bottom:1px solid #F5F5F5; position:relative;}
aside nav li a {display:block; height:46px; line-height:46px; padding:0 0 0 16px; margin-right:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; color:#222;}
aside nav li .fa {position:absolute; top:0; right:0; width:44px; text-align:center; height:46px; line-height:46px; color:#CCC; cursor:pointer;}
aside nav .fa-angle-down:after {content:'▾';}
aside nav .fa-rotate-180 {transform:rotate(180deg);}

aside nav li > ul {background:#FAFAFA; display:none; border-top:1px solid #F5F5F5;}
aside nav li > ul > li {border-bottom:0; border-top:1px solid #F5F5F5;}
aside nav li > ul > li:first-child {border-top:0;}
aside nav li > ul > li a {padding:0 44px 0 26px; margin:0; height:40px; line-height:40px; font-size:13px; font-weight:normal; color:#555;}
aside nav li > ul > li .fa {height:40px; line-height:40px;}
aside nav li > ul > li > ul {border-top:1px solid #F5F5F5;}
aside nav li > ul > li > ul > li {border-bottom:0;}
aside nav li > ul > li > ul > li a {padding:0 0 0 38px; margin:0; background:#F4F4F4; height:38px; line-height:38px; font-size:12px; color:#666;}

aside .navCommunity {display:none;}
aside .navMypage {display:none;}

aside .aside-cs {padding:20px 16px 90px; font-size:12px; color:#888; line-height:1.7;}
aside .aside-cs .aside-tel {margin-bottom:12px;}
aside .aside-cs .aside-tel a {display:block; text-align:center; line-height:40px; border:1px solid #222; border-radius:10px; color:#222; font-size:13px; font-weight:bold;}

/* ---------- 최근 본 상품 레이어 ---------- */
#ly_lastView {width:100%; position:absolute; top:86px; left:0; background:#fff; z-index:101; padding-bottom:20px; box-shadow:0 6px 16px rgba(0,0,0,.15); display:none;}
#ly_lastView .h_layerTitle h3 {font-size:14px; padding:12px 14px; border-bottom:1px solid #F0F0F0;}
#ly_lastView .h_layerTitle .fa-times {float:right; cursor:pointer; color:#999; font-size:16px;}

/* ---------- 검색 자동완성 (다찾다) ---------- */
.search-auto-complete-list {display:none; z-index:10; position:absolute; top:44px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 15%); border-radius:10px; overflow:hidden;}
.search-auto-complete-list ul {width:100%; padding:8px 0 10px; border-bottom:1px solid #eee;}
.search-auto-complete-list ul li {text-align:left;}
.search-auto-complete-list ul li a {display:block; padding:8px 14px 7px; color:#222; background:none; font-size:12px; letter-spacing:-0.5px;}
.search-auto-complete-list ul li a strong {color:#EF6253;}
.search-auto-complete-list ul li a:hover {background:#f5f5f5;}
.search-auto-complete-list .search-list-close {display:block; padding:10px 11px; text-align:right; color:#888; font-size:11px;}

/* 검색창 스타일 수정 (기존 유지) */
.xans-layout-searchheader {top:5% !important; width:90%; margin:0 auto;}
.xans-search-form .inner {margin-bottom:15px;}

/* BASIC css end */