@charset "UTF-8";
/* ============================================================
   PC 대분류 메가메뉴 v2 (2026-07-12) — 2-pane 클릭토글 + 추천 + 통합검색 + 인기 생활재 + 바로담기.
   ?cat=1 게이트 뒤에서만. 자립형(.catz-*). 딥그린 #3D6041 단일 강조·헤어라인·여백 중심.
   ============================================================ */
.catz-mega{ position:absolute; top:100%; left:0; z-index:120; width:1160px; max-width:calc(100vw - 40px);
  background:#fff; border:1px solid #E7EBE2; border-top:none; border-radius:0 0 16px 16px;
  box-shadow:0 26px 44px -20px rgba(24,42,24,.28); display:none; overflow:hidden; }
.catz-mega.open{ display:block; max-height:880px; }
/* 헤더 `.menu_list li a`(display:block;height:49px…)·`.menu_list li`(float:left) 스타일이 메가 내부로 침투 방지
   — 메가가 menu_list li 안에 위치. #catzMega ID(1,0,0)로 헤더 클래스 규칙을 상회해 리셋. 컴포넌트 앵커는 #catzMega 접두로 보강. */
#catzMega a{ float:none; height:auto; line-height:1.4; }
#catzMega li{ float:none; position:static; margin:0; }

/* 검색바 */
.catz-search{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 26px; border-bottom:1px solid #ECEFE8; }
.catz-field{ position:relative; flex:1 1 auto; max-width:520px; }
.catz-sic{ position:absolute; left:2px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  background:url(../../images/shop/icon_search_bar.svg) 50%/18px no-repeat; opacity:.5; }
.catz-field input{ width:100%; height:46px; border:none; border-bottom:2px solid #D9E3D4; background:transparent;
  padding:0 8px 0 30px; font-size:16px; color:#1A211A; letter-spacing:-.01em; }
.catz-field input:focus{ outline:none; border-bottom-color:#3D6041; }
.catz-field input::placeholder{ color:#95A093; }
.catz-hint{ font-size:13px; color:#68736A; white-space:nowrap; }

.catz-body{ display:grid; grid-template-columns:308px 1fr; }
/* 대분류 레일 2열(추천·라벨·서비스는 전체폭) — 세로 길이 절반. #catzMega ID로 헤더 li 침투 상회 */
#catzMega #catzRail{ display:flex; flex-wrap:wrap; }
#catzMega #catzRail > li{ width:50%; }
#catzMega #catzRail > li.catz-sepli, #catzMega #catzRail > li.catz-featli{ width:100%; }
#catzMega .catz-item .catz-nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#catzMega .catz-item{ padding:10px 11px; }

/* 좌 레일 */
.catz-rail{ background:#F7F9F5; border-right:1px solid #ECEFE8; padding:14px 14px 10px; max-height:760px; overflow-y:auto; }
.catz-railgroup{ list-style:none; margin:0; padding:0; }
.catz-sepli{ list-style:none; }
.catz-label{ font-size:11.5px; font-weight:700; color:#95A093; padding:13px 14px 6px; letter-spacing:.06em; }
.catz-item{ position:relative; width:100%; display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  background:none; border:none; font:inherit; font-size:16px; font-weight:600; color:#1A211A; padding:11px 13px; border-radius:10px; letter-spacing:-.02em; }
.catz-item .catz-ic{ width:24px; height:24px; object-fit:contain; flex:0 0 auto; }
/* 2026-07-13 두레맛찬(추천) 아이콘 = 딥그린 씰 + 골드 링 + 골드 별(모바일 카드와 톤 통일) */
.catz-item .catz-ic-feat{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:radial-gradient(120% 120% at 30% 24%,#4E7554,#2E4A32); box-shadow:0 0 0 1.5px #F8A31E; }
.catz-item .catz-ic-feat::after{ content:'\2605'; font-size:11px; line-height:1; color:#F8A31E; }
.catz-item.feat .catz-nm{ color:#2E4A32; font-weight:800; }
.catz-nm{ line-height:1.2; }
.catz-item:hover{ background:#EEF3EC; }
.catz-item[aria-selected="true"]{ background:#fff; color:#2E4A32; box-shadow:inset 0 0 0 1px #D9E3D4; }
.catz-item[aria-selected="true"]::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:#3D6041; }
.catz-item.hide{ display:none; }
.catz-item.feat{ background:#EEF3EC; color:#2E4A32; font-weight:700; }
.catz-item.feat:hover{ background:#E2EEDE; }
.catz-item.feat[aria-selected="true"]{ background:#3D6041; color:#fff; box-shadow:none; }
.catz-item.feat[aria-selected="true"]::before{ display:none; }
.catz-item.feat[aria-selected="true"] .catz-ic-feat{ box-shadow:0 0 0 1.5px #FFD98A; }
.catz-item.feat[aria-selected="true"] .catz-nm{ color:#fff; }
.catz-sep{ height:1px; background:#ECEFE8; margin:10px 8px; }
.catz-svc{ display:flex; flex-wrap:wrap; gap:7px; padding:0 10px 6px; }
#catzMega .catz-svc a{ display:inline-flex; align-items:center; height:auto; line-height:1; font-size:13.5px; font-weight:600; color:#9A6A10; background:#FFFaF0; border:1px solid #F0DCB0; border-radius:999px; padding:8px 13px; text-decoration:none; }

/* 우 패널 */
.catz-panel{ padding:24px 28px 26px; max-height:760px; overflow-y:auto; }
.catz-phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.catz-ptitle{ font-family:"Maru Buri","Nanum Myeongjo",serif; font-size:24px; font-weight:700; color:#1A211A; letter-spacing:-.01em; }
#catzMega .catz-pall{ flex:none; display:inline-block; height:auto; font-size:14px; font-weight:700; color:#3D6041; text-decoration:none; }
.catz-subs{ display:flex; flex-wrap:wrap; gap:9px; }
#catzMega .catz-subs a{ min-height:42px; height:auto; display:inline-flex; align-items:center; line-height:1.2; font-size:15px; font-weight:500; color:#68736A;
  background:#fff; border:1px solid #D9E3D4; border-radius:999px; padding:0 17px; text-decoration:none; }
#catzMega .catz-subs a:hover{ border-color:#3D6041; color:#3D6041; background:#EEF3EC; }
#catzMega .catz-subs a.all{ color:#3D6041; font-weight:700; background:#EEF3EC; }

.catz-pop{ margin-top:24px; padding-top:20px; border-top:1px solid #ECEFE8; }
.catz-pophead{ display:flex; align-items:baseline; gap:10px; margin-bottom:15px; }
.catz-pophead h4{ margin:0; font-family:"Maru Buri","Nanum Myeongjo",serif; font-size:17px; font-weight:700; color:#1A211A; }
.catz-popsub{ font-size:12.5px; color:#95A093; font-weight:600; }
.catz-popgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; min-height:60px; }
.catz-loading, .catz-empty{ grid-column:1/-1; padding:26px 0; text-align:center; color:#95A093; font-size:14px; }

.catz-card{ position:relative; }
#catzMega .catz-go{ display:block; height:auto; text-decoration:none; color:inherit; }
.catz-thumb{ position:relative; display:block; width:100%; padding-bottom:100%; border-radius:12px; overflow:hidden; border:1px solid #EAEAEA; background:#f7f7f4; }
.catz-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.catz-card:hover .catz-thumb img{ transform:scale(1.05); }
.catz-badges{ position:absolute; top:0; left:0; z-index:2; display:flex; }
.catz-dc{ height:26px; line-height:26px; padding:0 9px; background:#F8A31E; color:#3b2a06; font-size:14px; font-weight:800; font-family:'Roboto',sans-serif; border-radius:12px 0 12px 0; }
.catz-b{ height:26px; line-height:26px; padding:0 8px; font-size:12px; font-weight:700; color:#fff; }
.catz-b-gift{ background:#8a8f86; }
.catz-b-cp{ background:#3D6041; }
/* 한정수량 N개 남음 (메인 time_box2 대응) */
.catz-limit{ position:absolute; left:0; bottom:0; z-index:2; width:100%; box-sizing:border-box; background:rgba(29,39,26,.74); color:#fff; font-size:12px; font-weight:600; text-align:center; padding:4px 0; letter-spacing:-.02em; }
.catz-limit b{ font-family:'Roboto',sans-serif; color:#ffd27a; font-weight:800; margin:0 1px; }
.catz-spec{ display:block; font-size:12px; color:#95A093; margin:-2px 0 4px; }
.catz-cnt{ font-family:'Roboto',sans-serif; color:#3D6041; font-weight:800; }
.catz-so{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-size:15px; font-weight:600; }
.catz-cnm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:10px 0 4px; font-size:14.5px; font-weight:600; line-height:1.4; color:#1A211A; min-height:41px; }
.catz-pr{ display:flex; align-items:baseline; gap:5px; font-family:'Roboto',sans-serif; flex-wrap:wrap; }
.catz-old{ font-size:12px; color:#a7a7a7; text-decoration:line-through; }
.catz-now{ font-size:16px; font-weight:800; color:#1A211A; }
.catz-w{ font-size:12.5px; font-weight:600; color:#1A211A; }
.catz-card.soldout .catz-now, .catz-card.soldout .catz-cnm{ color:#9a9a9a; }
.catz-add{ margin-top:9px; width:100%; height:38px; border:1.5px solid #3D6041; border-radius:9px; background:#fff; color:#3D6041;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:background .14s, color .14s; }
.catz-add:hover{ background:#3D6041; color:#fff; }

/* 검색 결과 */
.catz-results{ padding:22px 28px 26px; max-height:720px; overflow-y:auto; }
.catz-rblock + .catz-rblock{ margin-top:22px; }
.catz-results h4{ margin:0 0 12px; font-size:13px; font-weight:800; color:#68736A; letter-spacing:.02em; }
.catz-results h4 span{ font-family:'Roboto',sans-serif; color:#3D6041; }
.catz-rchips{ display:flex; flex-wrap:wrap; gap:9px; }
#catzMega .catz-rchips a{ display:inline-flex; align-items:center; height:auto; line-height:1.2; font-size:14.5px; font-weight:600; color:#68736A; background:#fff; border:1px solid #D9E3D4; border-radius:999px; padding:9px 15px; text-decoration:none; }
#catzMega .catz-rchips a:hover{ border-color:#3D6041; color:#3D6041; background:#EEF3EC; }
#catzMega .catz-rchips a b{ color:#3D6041; font-weight:700; }
#catzMega .catz-godsearch{ display:inline-flex; align-items:center; height:auto; font-size:15px; font-weight:700; color:#3D6041; text-decoration:none;
  border:1.5px solid #3D6041; border-radius:999px; padding:10px 18px; }
#catzMega .catz-godsearch:hover{ background:#3D6041; color:#fff; }

/* 토스트 */
.catz-toast{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%) translateY(14px); z-index:2000;
  background:#2E4A32; color:#fff; font-size:15px; font-weight:600; padding:13px 24px; border-radius:999px;
  box-shadow:0 10px 30px -8px rgba(20,40,22,.5); display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; }
.catz-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.catz-tic{ width:22px; height:22px; border-radius:50%; background:#fff; color:#2E4A32; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; }

/* hover→클릭 전환 안내 말풍선 (전체 생활재 보기에 마우스 올리면) */
.catz-tip{ position:absolute; top:calc(100% + 9px); left:14px; z-index:130; white-space:nowrap;
  background:#3D6041; color:#fff; font-size:13px; font-weight:600; letter-spacing:-.01em; padding:9px 15px; border-radius:9px;
  box-shadow:0 8px 20px -7px rgba(20,40,22,.5); opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; }
.catz-tip.show{ opacity:1; transform:translateY(0); }
.catz-tip-ar{ position:absolute; top:-5px; left:24px; width:10px; height:10px; background:#3D6041; transform:rotate(45deg); border-radius:2px; }

/* ============================================================
   두레맛찬 hover 프리뷰 (2026-07-14 v2.5) — 영상 9:16 원본비율 고정(크롭없음) + 우측 대표상품 가로형 행카드 5개 세로 리스트
   ============================================================ */
#catzMega .catz-featview{ display:flex; gap:22px; padding:4px 2px 2px; align-items:flex-start; }
#catzMega .cfv-video{ position:relative; flex:0 0 300px; width:300px; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#3f6547,#22391f); box-shadow:0 18px 36px -18px rgba(20,40,22,.55); }
#catzMega .cfv-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
#catzMega .cfv-vcap{ position:absolute; left:14px; bottom:14px; z-index:2; color:#fff; font-family:"Noto Serif KR","Maru Buri",serif;
  font-size:17px; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.6); letter-spacing:-.01em; }
#catzMega .cfv-video::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,14,8,.6),transparent 40%); pointer-events:none; }
/* 우측 = 헤더 + 중분류 칩 + 행카드 리스트 */
#catzMega .cfv-right{ flex:1; min-width:0; display:flex; flex-direction:column; }
#catzMega .cfv-rhead{ display:flex; align-items:baseline; gap:8px; margin:2px 2px 10px; }
#catzMega .cfv-rhead h4{ font-size:17px; font-weight:800; color:#1D271E; letter-spacing:-.01em; }
#catzMega .cfv-rhead span{ font-size:12.5px; color:#8A907F; font-weight:700; }
#catzMega .cfv-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 2px 12px; }
#catzMega .cfv-chips a{ font-size:12.5px; font-weight:700; color:#3D6041; background:#EEF3EC; border:1px solid #D9E3D4;
  border-radius:999px; padding:6px 13px; text-decoration:none; }
#catzMega .cfv-chips a:hover{ background:#3D6041; color:#fff; border-color:#3D6041; }
/* 대표상품 = 가로형 행카드 5개 세로 나열 */
#catzMega .cfv-cards{ display:flex; flex-direction:column; gap:9px; }
#catzMega .cfv-card{ display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid #EAE6DB; border-radius:14px; background:#fff; }
#catzMega .cfv-card:hover{ border-color:#C7D8C4; box-shadow:0 6px 16px -12px rgba(20,40,22,.35); }
#catzMega .cfv-card.hot{ border-color:#E8D9BE; background:#FFFDF8; }
#catzMega .cfv-go{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; }
#catzMega .cfv-thumb{ position:relative; flex:0 0 64px; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#FAFAF6; }
#catzMega .cfv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#catzMega .cfv-dc{ position:absolute; left:0; bottom:0; background:#D8352A; color:#fff; font-size:10.5px; font-weight:800;
  font-family:"Roboto",sans-serif; padding:2px 6px; border-radius:0 8px 0 0; }
#catzMega .cfv-info{ flex:1; min-width:0; }
#catzMega .cfv-nm{ display:block; font-size:14px; font-weight:700; color:#1D271E; line-height:1.32; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#catzMega .cfv-hotk{ font-style:normal; display:inline-block; margin-right:6px; font-size:11px; font-weight:800; color:#C98A18;
  background:#FBF3E2; border:1px solid #F0E2C2; border-radius:5px; padding:1px 6px; vertical-align:2px; }
#catzMega .cfv-card.new{ border-color:#C7D8C4; background:#F8FBF7; }
#catzMega .cfv-newk{ font-style:normal; display:inline-block; margin-right:6px; font-size:11px; font-weight:800; color:#3D6041;
  background:#EEF3EC; border:1px solid #D9E3D4; border-radius:5px; padding:1px 6px; vertical-align:2px; }
#catzMega .cfv-pr{ display:block; margin-top:3px; font-size:12.5px; color:#3A4235; }
#catzMega .cfv-pr b{ font-family:"Roboto","Pretendard",sans-serif; font-size:17px; font-weight:800; color:#1D271E; }
#catzMega .cfv-add{ flex:0 0 auto; margin:0; background:#EAF1E8; color:#3D6041; border:1.5px solid #C7D8C4; border-radius:10px;
  padding:9px 15px; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
#catzMega .cfv-add:hover{ background:#3D6041; color:#fff; border-color:#3D6041; }
#catzMega .cfv-more{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:8px;
  padding:11px 0; border:1px solid #D9E3D4; border-radius:12px; font-size:14px; font-weight:800; color:#3D6041; text-decoration:none; }
#catzMega .cfv-more:hover{ background:#EEF3EC; }