@charset "utf-8";

/* =========================================================
   ROOT / 변수 (common.css가 참조하는 변수 정의)
   ========================================================= */
:root{
  --color-background:#ffffff;
  --color-text-default:#222222;
  --color-text-sub:#666666;
  --color-text-placeholder:#aaaaaa;
  --color-line:#e6e6e6;
  --input-border:#d9d9d9;
  --input-bg:#ffffff;
  --point:#cd0111;            /* 브랜드 레드 */
  --point-dark:#c01a12;
  --accent:#cd0111;           
  --footer-bg:#f7f7f7;
  --footer-line:#e3e3e3;
  --content:1280px;           /* 컨텐츠 최대 폭 */
  --color-panel-divider :#f8f8f8;     /* 햄버거메뉴 패널 구분선 */
  --btn-line-default:#b4b3b3; /* 기본 버튼 외곽선 */
}

/* 기본 폰트 (데스크탑 & 태블릿 17px) */
html{font-size:17px;overflow-x:hidden;}
body{font-size:1rem;line-height:1.6;padding-top:calc(var(--header-h) + var(--ad-h));transition:padding-top .3s ease;} /* ★수정: 배너 높이(--ad-h) 합산 + 트랜지션 */
/* 고정 헤더 높이만큼 본문 상단 여백 확보 (JS가 정확값으로 갱신, 아래는 폴백) */
:root{--header-h:181px;}
@media (max-width:1024px){:root{--header-h:175px;}}
@media (max-width:767px){:root{--header-h:169px;}}

img{max-width:100%;}
.inner{width:100%;max-width:calc(var(--content) + 40px);margin:0 auto;padding:0 20px;}

/* 로고 */
.logo img {width:160px;height:60px;}
.logo a{display:inline-flex;align-items:baseline;font-weight:700;letter-spacing:-0.04em;color:#1a1a1a;position:relative;}

/* =========================================================
   공통 상단 광고바
   ========================================================= */
:root{ --ad-h:40px; }   /* 배너 높이(열림 40 / 닫힘 0) */
.ad-bar{position:fixed;top:0;left:0;right:0;z-index:200;   /* 최상단 고정(헤더 150보다 위) */width:100%;height:var(--ad-h);background:#161d24;overflow:hidden;transition:height .3s ease;}
/* 콘텐츠 폭(1280) 기준 정렬 : 닫기버튼을 1280 우측 끝에 고정 */
.ad-bar__inner{position:relative;max-width:calc(1280px + 40px); /* 좌우 20px 패딩 포함 → 콘텐츠 1280 */ height:40px;margin:0 auto;padding:0 20px;display:flex;align-items:center; justify-content:center;}
.ad-bar__text{color:#ffffff;font-size:.86rem;text-align:center;letter-spacing:-0.01em;/* 좁은 화면에서 버튼과 겹치지 않도록 패딩값 부여 */padding:0 36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ad-bar__text > strong {font-weight:600;color:#ffff01;}
.ad-bar__close{position:absolute;top:50%;right:20px;/* 콘텐츠 1280 우측 끝 안쪽 */transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#ffffff;background:none;border:0;cursor:pointer;opacity:.85;transition:opacity .15s;}
.ad-bar__close:hover{opacity:1;}
html.ad-closed .ad-bar{display:none;}   /* 닫힘 복원 시 배너 미표시 */

/* =========================================================
   데스크탑 헤더
   ========================================================= */
.header-mo{display:none;}
.header-pc{width:100%;background:#fff;border-bottom:1px solid var(--color-line);position:fixed;top:var(--ad-h);left:0;right:0;z-index:150;transition:top .3s ease;} /* ★수정: top:0 → var(--ad-h) + 트랜지션 */

/* 상단 유틸 */
.hp-top{border-bottom:1px solid var(--color-line);}
.hp-top .inner{display:flex;justify-content:flex-end;}
.hp-util{display:flex;align-items:stretch;}
.hp-util>li{position:relative;}
.hp-util>li>a,.hp-util .cs-toggle{display:flex;align-items:center;height:36px;padding:0 14px;font-size:.68rem;color:#555;}
.hp-util>li+li{border-left:1px solid var(--color-line);}
.hp-util>li>a:hover{color:var(--point);}
.cs-toggle{gap:6px;background:none;border:none;}
.cs-arrow{width:7px;height:7px;border-right:1.5px solid #888;border-bottom:1.5px solid #888;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
.hp-util .cs.open .cs-arrow{transform:rotate(-135deg) translateY(-1px);}
.cs-drop{position:absolute;top:100%;right:-1px;min-width:140px;background:#fff;border:1px solid var(--color-line);box-shadow:0 8px 20px rgba(0,0,0,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:120;}
.hp-util .cs.open .cs-drop{opacity:1;visibility:visible;transform:translateY(0);}
.cs-drop li+li{border-top:1px solid var(--color-line);}
.cs-drop a{display:block;padding:11px 16px;font-size:.82rem;color:#555;}
.cs-drop a:hover{background:#fafafa;color:var(--point);}
.member-drop{min-width:172px;padding:4px 0;}
.member-drop li+li{border-top:0;}/* 정보행 사이 구분선 제거 */
.member-info{padding:0 16px;font-size:.82rem;color:#555;white-space:nowrap;}
.member-info:first-child{padding-top:13px;}
.member-info strong{font-weight:700;color:var(--point);padding-right:2px;}
.member-logout{padding:8px 16px 10px;border-top:1px solid var(--color-line);text-align:right;}
.btn-logout{padding:4px 10px;font-size:.7rem;color:#555;background:#f1f1f1;border:1px solid var(--color-line);border-radius:3px;}

/* 로고 / 검색 / 아이콘 */
.hp-mid .inner{display:flex;align-items:center;gap:30px;padding-top:15px;padding-bottom:15px;}
.hp-mid .logo a{display:block;width:160px;height:60px;background:url('../img/logo.png') no-repeat center;background-size:160px 60px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; /* 화면에서만 텍스트 숨김 (접근성 유지) */}
.hp-search{flex:1;display:flex;align-items:center;max-width:540px;border:1px solid #333;background:#fff;}
.hp-search input{flex:1;border:none;background:none;padding:10px 16px;font-size:.95rem;}
.hp-search .btn-search{padding:0 14px;color:#333;background:none;border:none;display:flex;align-items:center;}
.hp-icons{display:flex;align-items:center;gap:18px;margin-left:auto;}
.hp-icons .ico{position:relative;color:#333;display:flex;}
.hp-icons .ico:hover{color:var(--point);}
.hp-icons .ico-cart{margin-left:15px;} /* 찜 ↔ 장바구니 사이만 추가로 띄우기 */
.ico-badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--point);color:#fff;font-size:.6rem;font-weight:500;line-height:19px;text-align:center;font-family:'Roboto', sans-serif;}

/* GNB */
.hp-gnb{border-top:1px solid #e9ebee;position:relative;}
.hp-gnb .inner{display:flex;align-items:center;justify-content:space-between;}
.gnb-list{display:flex;align-items:center;font-family: 'NoonnuBasicGothic', sans-serif;}
.gnb-list>li>a,.gnb-list .btn-allmenu{display:flex;align-items:center;gap:7px;height:52px;padding:0 18px;font-size:1.05rem;color:#222;background:none;border:none;position:relative;}
.gnb-list > li:first-child > a,
.gnb-list > li:first-child > .btn-allmenu{padding-left:3px;}
.gnb-list>li.gnb-all{margin-right:6px;}
.gnb-list .btn-allmenu .ham-mini{width:18px;height:13px;position:relative;display:inline-block;transform:translateY(-2px); /* 위치조절 */}
.gnb-list .btn-allmenu .ham-mini::before,
.gnb-list .btn-allmenu .ham-mini::after,
.gnb-list .btn-allmenu .ham-mini{border-top:2px solid #222;}
.gnb-list .btn-allmenu .ham-mini::before,
.gnb-list .btn-allmenu .ham-mini::after{content:"";position:absolute;left:0;width:100%;}
.gnb-list .btn-allmenu .ham-mini::before{top:5px;}
.gnb-list .btn-allmenu .ham-mini::after{top:11px;}
.gnb-list>li>a::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--point);transform:scaleX(0);transition:transform .2s;}
.gnb-list>li.on>a,.gnb-list>li>a:hover{color:var(--point);}
.gnb-list>li.on>a::after,.gnb-list>li>a:hover::after{transform:scaleX(1);}
/* 이벤트 */
:root{
  --ev-tint:#fdeced;   /* 이벤트 - 연한 레드 배경 */
  --ev-line:#f3c2c4;   /* 이벤트 - 레드 외곽선 */

  --plan-color:#0176cd;      /* 기획전 - 블루 텍스트/아이콘 */
  --plan-tint:#ecf5fd;       /* 기획전 - 연한 블루 배경 */
  --plan-line:#c2dcf3;       /* 기획전 - 블루 외곽선 */
  --plan-tint-hover:#dceaf6; /* 기획전 - hover 배경 */
}
.gnb-promo{display:flex;align-items:center;gap:8px;}
.gnb-event{display:inline-flex;align-items:center;gap:6px;font-size:.98rem;font-weight:500;color:var(--point);background:var(--ev-tint);border:1px solid var(--ev-line);padding:5px 16px;border-radius:999px;font-family:'NoonnuBasicGothic', sans-serif;transition:background .15s,border-color .15s;}
.gnb-event:hover{background:#fce0e1;}
.gnb-event__ico{width:17px;height:17px;flex:0 0 auto;}
.gnb-event--plan{color:var(--plan-color);background:var(--plan-tint);border-color:var(--plan-line);}
.gnb-event--plan:hover{background:var(--plan-tint-hover);}
.gnb-event--plan .gnb-event__ico{transform:scaleX(-1);}

/* 전체 메뉴 레이어 */
.allmenu-layer{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);box-shadow:0 12px 24px rgba(0,0,0,.08);
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:.25s;z-index:130;}
.allmenu-layer.open{max-height:600px;opacity:1;visibility:visible;}
.allmenu-layer .inner{position:relative;padding-top:26px;padding-bottom:40px;}
.btn-allmenu-close{position:absolute;top:18px;right:20px;background:none;border:none;color:#333;}
.allmenu-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:30px;}
.allmenu-col h4{font-size:.94rem;font-weight:600;color:#222;padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid #222;}
/* 전체 탭 gnb depth 패딩 값 조절  - 260901 하유정 */
.allmenu-col li a{display:block;padding:4px 0;font-size:.88rem;color:#666;}
.allmenu-col li a:hover{color:var(--point);}

/* =========================================================
   윙 배너 (PC 전용)
   ========================================================= */
 @media (max-width:1540px){.wing{display:none;}} /* 컨텐츠 옆 공간이 부족하면 윙 숨김 */
.wing-left{position:fixed;top:calc(206px + var(--ad-h));z-index:90;width:103px;left:calc(50% - 768px);} /* ★수정: 배너 높이 합산 */
.wing-right{position:fixed;top:calc(206px + var(--ad-h));z-index:90;width:108px;right:calc(50% - 773px);} /* ★수정: 배너 높이 합산 */
.wing-recent{border:1px solid var(--color-line);background:#fff;}
.wr-tit{font-size:.76rem;font-weight:500;color:#fff;background:#222;padding:7px 0;display:flex;align-items:center;justify-content:center;}
.wr-tit span{color:#999;font-weight:400;}
.wr-cur {text-align:center;font-size:0.76rem;padding:6px 0;line-height:1;font-family:'Roboto', sans-serif;color:rgba(0,0,0,0.7);}
.wr-cur .n-cur {font-weight:600;color:rgba(0,0,0,1);}
.wr-list {padding:0 10px;}
.wr-list li+li{margin-top:8px;}
.wr-list img{width:100%;border:1px solid var(--color-line);}
.wr-nav{display:flex;justify-content:center;margin-top:10px;}
.wr-nav .nav-group{display:inline-flex;width:106px;border-top:1px solid var(--color-line);overflow:hidden;}
.wr-nav button{flex:1;height:32px;border:none;background:#f6f7f8;color:#7b7b7c;font-size:0.9rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.wr-nav button:first-child{border-right:1px solid var(--color-line);  /* 가운데 구분선 */}
.wr-nav button:hover{color:#222;font-weight:700;}

/* =========================================================
   메인 비주얼
   ========================================================= */
.visual{padding-top:26px;}
.visual-inner{display:grid;grid-template-columns:305px 1fr 305px;gap:20px;align-items:stretch;}
.v-promo{display:flex;flex-direction:column;gap:20px;min-height:0;}
.v-promo-item{position:relative;display:block;flex:1;min-height:0;overflow:hidden;}
.v-promo-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* 메인 슬라이더 */
.v-main{position:relative;}
.slider{position:relative;aspect-ratio:630/628;overflow:hidden;touch-action:pan-y;}
.slider-track{display:flex;height:100%;transition:transform .5s ease;}
.slider-track .slide{flex:0 0 100%;height:100%;}
.slider-track .slide a,.slider-track .slide picture,.slider-track .slide img{display:block;width:100%;height:100%;object-fit:cover;}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:rgba(0,0,0,.32);color:rgba(255,255,255,0.7);border:none;font-size:2rem;line-height:1;z-index:5;display:flex;align-items:center;justify-content:center;font-family:'Roboto', sans-serif;}
.slider-arrow:hover{background:rgba(0,0,0,.5);color:rgba(255,255,255,1);}
.slider-arrow.prev{left:0;}
.slider-arrow.next{right:0;}
.slider-page{position:absolute;right:16px;bottom:14px;padding:5px 13px;border-radius:20px;background:rgba(0,0,0,.45);color:rgba(255,255,255,0.6);font-size:.8rem;z-index:5;font-family:'Roboto', sans-serif;}
.slider-page .cur{color:rgba(255,255,255,1);font-weight:600;}

/* 우측 소형 배너 */
.v-side{display:flex;flex-direction:column;gap:20px;min-height:0;}
.v-side-item{position:relative;display:block;flex:1;min-height:0;overflow:hidden;}
.v-side-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* =========================================================
   상품 섹션 공통
   ========================================================= */
.prod-sec{padding:48px 0 0;}
.prod-sec:last-of-type{padding-bottom:60px;}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;}
.sec-head h2{font-size:1.45rem;font-weight:500;color:#1a1a1a;font-family: 'NoonnuBasicGothic', sans-serif;}
.btn-more{height:28px;padding:0 8px;border:1px solid #d5d5d5;border-radius:4px;background:#fff;color:#777;font-size:.76rem;letter-spacing:-0.03em;line-height:27px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}
.btn-more:hover{color:var(--point);border-color:var(--point);}

/* 상품 카드 */
.prod-item{}
.prod-item a.thumb{display:block;border:1px solid #eee;overflow:hidden;aspect-ratio:1/1;position:relative;}
.prod-item a.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.prod-item .badge-free{position:absolute;top:0;left:0;z-index:2;height:21px;padding:0 4px;font-size:0.64rem;line-height:20px;letter-spacing:-1px;color:#fff;border:1px solid #cd0111;background:rgba(205,1,17,1);}
.prod-name{display:block;margin-top:12px;font-size:.84rem;color:#333;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;}
.prod-name .free {height:23px;padding:0 2px;margin-right:3px;font-size:0.67rem;line-height:21px;font-weight:400 !important;letter-spacing:-1px;color:#fff;border:2px solid #cd0111;background:rgba(205,1,17,1);border-radius:3px;}
.prod-price{display:block;margin-top:6px;font-size:1.1rem;font-weight:700;color:#1a1a1a;font-family:'Roboto', sans-serif;}
.prod-btns{display:flex;gap:5px;margin-top:11px;}
.prod-btns button{display:flex;align-items:center;gap:2px;height:30px;padding:0 8px;background:#e8eaee;font-size:.72rem;line-height:1.1;color:#555;letter-spacing:-0.5px;border:none;font-weight:400;}
/* 버튼 border-radius - 260901 하유정 */
.prod-btns .btn-wish{flex:0 0 auto;border-radius:4px;}
.prod-btns .btn-cart{flex:1;justify-content:center;}
.btn-wish .heart{width:13px;height:13px;display:inline-block;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.7-9C.9 9.1 2.2 5.5 5.6 5.1 7.6 4.9 9.3 6 12 8.6 14.7 6 16.4 4.9 18.4 5.1c3.4.4 4.7 4 3.3 6.9C19.5 16.4 12 21 12 21Z' fill='none' stroke='%23888' stroke-width='1.7'/></svg>") no-repeat center/contain;
  background:#888;}
.btn-wish.on .heart{background:var(--point);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.7-9C.9 9.1 2.2 5.5 5.6 5.1 7.6 4.9 9.3 6 12 8.6 14.7 6 16.4 4.9 18.4 5.1c3.4.4 4.7 4 3.3 6.9C19.5 16.4 12 21 12 21Z'/></svg>");}
.btn-wish.on{color:var(--point);border-color:var(--point);}

/* 인기 BEST : 데스크탑은 6열 그리드 */
.prod-carousel{position:relative;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
.carousel-arrow{display:none;}

/* 건강 BEST : 그리드 */
.prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}

/* =========================================================
   푸터 (디테일 업, 가운데 정렬 유지)
   ========================================================= */
.footer{margin-top:20px;background:var(--footer-bg);border-top:1px solid var(--footer-line);text-align:center;padding:40px 0 56px;}
.ft-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.ft-links li{position:relative;padding:0 18px;}
.ft-links li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(calc(-50% + 3px));/* 위아래 위치 이동시 3px 값 변경 */width:1px;height:11px;background:#ccc;}
.ft-links-top li a{font-size:.86rem;color:#333;font-weight:700;}
.ft-links-sub{margin-top:8px;}
.ft-links-sub li a{font-size:.82rem;color:#666;}
.ft-links li a:hover{color:var(--point);}
.ft-info{margin-top:26px;color:#555;font-size:.82rem;line-height:1.9;}
.ft-info strong{color:var(--point);font-weight:700;}
.ft-info a{color:#555;text-decoration:underline;}
.ft-note{color:#999;}
.ft-addr{margin-top:18px;padding-top:18px;border-top:1px solid var(--footer-line);color:#777;font-size:.78rem;line-height:1.8;}


/* =========================================================
   breadcrumb — 현재위치 (재사용)
   ========================================================= */
.breadcrumb{margin-bottom:24px;}
.breadcrumb__list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;font-size:.82rem;color:var(--color-text-sub);}
.breadcrumb__item{display:inline-flex;align-items:center;gap:6px;}
.breadcrumb__item + .breadcrumb__item::before{content:"›";color:var(--color-text-placeholder);font-size:.95rem;line-height:1;transform:translateY(-1px);}
.breadcrumb__link{color:var(--color-text-sub);transition:color .15s;}
.breadcrumb__link:hover{color:var(--point, #cd0111);}
.breadcrumb__item--current{color:var(--color-text-default);font-weight:600;}
@media (max-width:560px){
  .breadcrumb{margin-bottom:16px;}
  .breadcrumb__list{font-size:.76rem;}
}

/* =========================================================
   상품 목록 사이 중간 배너
   ========================================================= */
/* 구간별 이미지 반응형 배너 (<picture>) */
.mid-banner-rwd{
  display:block;
  max-width:calc(1280px + 40px);   /* 콘텐츠 1280 + 좌우 20 거터 */
  margin:60px auto 0;                       /* 위 여백 + 중앙정렬 */
  padding:0 20px;                             /* 상품과 동일 거터 */
}
.mid-banner-rwd picture{display:block;}
.mid-banner-rwd img{display:block;width:100%;height:auto;}
/* 반응형 */
@media (max-width:1024px){
	.mid-banner-rwd{padding:0;margin:40px auto 0;}
	.mid-banner-rwd img{width:100%;}
}
@media (max-width:767px){
	.mid-banner-rwd{margin:30px auto 0;}
}


/* =========================================================
   모바일 사이드바 / 카테고리 공통
   ========================================================= */
.m-dim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.25s;z-index:600;}
.m-dim.open{opacity:1;visibility:visible;}
.m-sidebar,.m-category{position:fixed;top:0;right:0;height:100%;width:78%;max-width:380px;background:#fff;z-index:610;
transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.m-sidebar.open,.m-category.open{transform:translateX(0);}
.m-close{position:absolute;background:none;border:none;color:#333;z-index:5;}

/* 사이드바(열림1) */
.m-sidebar{padding:54px 0 40px 0;}
.m-sidebar .m-close{top:14px;right:18px;}
.ms-auth{display:flex;gap:12px;padding:0 22px 20px 22px;border-bottom:1px solid var(--color-line);}
.ms-btn{flex:1;text-align:center;height:38px;line-height:38px;border:1px solid var(--accent);border-radius:26px;color:#cd0111;font-size:.9rem;font-weight:600;}
.ms-auth .ms-btn:first-child{background:#cd0111;color:#fff;border-color:#cd0111;}
.ms-auth--member{gap:5px;}
.ms-auth--member .ms-btn{font-size:.9rem;white-space:nowrap;}
.ms-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:16px 0;border-bottom:1px solid var(--color-line);}
.ms-cat-item{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;background:none;border:none;font-size:.8rem;color:#333;font-weight:600;}
.ms-ico{width:52px;height:52px;border-radius:20px;background:#f1f4f6;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem;}
.ms-ico img{width:32px;height:32px;object-fit:contain;}
.ms-cs{}
.ms-cs h3{font-size:1.05rem;font-weight:700;color:#222;padding:16px 22px 10px 22px;border-bottom:1px solid var(--color-line);}
.ms-cs-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding:16px 22px;}
.ms-cs-list li.full{grid-column:1 / -1;}
.ms-cs-list a{font-size:.92rem;color:#444;}
.ms-cs-list a:hover{color:var(--point);}
hr {border: none;height: 8px;background-color: var(--color-panel-divider);padding: 0;margin: 0;}

/* 카테고리 상세(열림2) */
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;padding:0 18px;border-bottom:1px solid var(--color-line);position:relative;}
.mc-head .m-close{position:static;}
.mc-title{font-size:1.05rem;font-weight:700;color:#222;}
.mc-body{display:flex;height:calc(100% - 58px);}
.mc-tabs{display:flex;flex-direction:column;flex:0 0 33%;background:#f6f6f6;overflow-y:auto;}
.mc-tabs::after{/* 마지막 메뉴 아래 빈 영역 채우기 */content:"";flex:1 0 auto; /* 남은 세로 공간을 모두 차지 */border-right:1px solid var(--color-line);   /* 그 영역에도 우측 라인 */}
.mc-tabs li button{display:block;width:100%;box-sizing:border-box; /* 추가: 우측 보더를 너비 안에 포함 */text-align:left;padding:18px 18px;font-size:.96rem;font-weight:700;color:#333;background:none;border:none;border-bottom:1px solid #eee;border-right:1px solid var(--color-line);/* 컨테이너 대신 버튼에 부여 */}
.mc-tabs li.on button{background:#fff;color:var(--point);border-right-color:#fff;/* 활성 탭만 우측 라인 숨김 */}
.mc-list{flex:1;overflow-y:auto;padding:6px 0;}
.mc-list li a{display:block;padding:14px 20px;font-size:.95rem;color:#333;}
.mc-list li a:hover{color:var(--point);}

/* 위로가기버튼 */
.btn-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border:none;border-radius:50%;background:rgba(0,0,0,.55);cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;
opacity:0;/* 평소 숨김 */visibility:hidden;transform:translateY(10px);transition:opacity .3s, transform .3s, visibility .3s;}
.btn-top.show{ /* 스크롤 시 노출 */opacity:1;visibility:visible;transform:translateY(0);}
.btn-top:hover{background:rgba(0,0,0,.8);}
.btn-top .arrow{width:12px;height:12px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(45deg);margin-top:3px; /* 시각적 중심 보정 */}

/* =========================================================
   태블릿 (max-width:1024px) : 통합 헤더 + 슬라이더 전환
   ========================================================= */
@media (max-width:1024px){
  .header-pc{display:none;}
  .header-mo{display:block;width:100%;background:#fff;border-bottom:1px solid var(--color-line);position:fixed;top:var(--ad-h);left:0;right:0;z-index:150;transition:top .3s ease;} /* ★수정: top:0 → var(--ad-h) + 트랜지션 */
  .wing{display:none;}

  /* 모바일 헤더 */
  .hm-top{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:8px 18px;border-bottom:1px solid var(--color-line);}
  .hm-util{display:flex;align-items:center;gap:13px;}
  .hm-util a{font-size:.82rem;color:#555;}
  .hm-ico{color:#444;}
  .btn-hamburger{width:24px;height:18px;position:relative;background:none;border:none;padding:0;}
  .btn-hamburger span{display:block;position:absolute;left:0;width:100%;height:2px;background:#222;}
  .btn-hamburger span:nth-child(1){top:0;}
  .btn-hamburger span:nth-child(2){top:8px;}
  .btn-hamburger span:nth-child(3){top:16px;}
  .hm-mid{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 15px;;}
  .hm-mid .logo a{display:block;width:128px;height:48px;background:url('../img/logo.png') no-repeat center;background-size:128px 48px;}
  .hm-search{flex:1;min-width:0;display:flex;align-items:center;border:1px solid #333;}
  .hm-search input{flex:1;min-width:0;border:none;background:none;padding:10px 14px;font-size:.95rem;}
  .hm-search .btn-search{padding:0 12px;color:#333;background:none;border:none;display:flex;}
  .hm-gnb{border-top:1px solid var(--color-line);overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .hm-gnb::-webkit-scrollbar{display:none;}
  .hm-gnb ul{display:flex;align-items:center;min-width:max-content;padding:0 8px;}
  .hm-gnb li a{display:block;padding:13px 15px;font-size:0.98rem;font-weight:700;color:#333;white-space:nowrap;}
  .hm-gnb li:first-child a{padding-left:9px;}
  .hm-gnb li.on a{color:var(--point);}

  /* 비주얼 : 메인 슬라이더만 노출, 좌/우 배너 숨김 (Full Width) */
  .visual{padding:0;}
  .visual .inner{padding:0;max-width:none;}
  .visual-inner{display:block;}
  .v-promo,.v-side{display:none;}
  .v-main .slider{border-radius:0;aspect-ratio:16/10;height:auto;}
  .slider-page{right:12px;bottom:12px;}

  /* 모바일 프로모 배너(MUJI/비오레) : 비주얼 아래 노출 */
  .v-main::after{content:none;}

  /* 인기 BEST → 슬라이더(3개씩, 무한루프) */
  .prod-sec{padding-top:34px;}
  .sec-head h2{font-size:1.25rem;font-weight:600;}
  .prod-name .free {padding:0 3px;letter-spacing:-0.5px;}
  .prod-carousel{padding:0 36px;}
  .carousel-viewport{overflow:hidden;touch-action:pan-y;}
  .carousel-track{display:flex;gap:16px;grid-template-columns:none;will-change:transform;}
  .carousel-track .prod-item{flex:0 0 calc((100% - 32px)/3);}
  .carousel-arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:38%;transform:translateY(-50%);
    width:32px;height:32px;border:1px solid #ddd;border-radius:50%;background:#fff;color:#777;font-size:1.5rem;line-height:1;z-index:5;font-family:'Roboto', sans-serif;}
  .carousel-arrow.prev{left:0;}
  .carousel-arrow.next{right:0;}
  .carousel-arrow:hover{color:var(--point);border-color:var(--point);}
  .prod-btns button{padding:0 5px;font-size:.68rem;letter-spacing:-0.8px;}
  .prod-btns .btn-wish{font-size:0;/* '찜' 글자 숨김 */padding:0 8px;gap:0;}
  .prod-btns .btn-wish .heart{margin:0;/* 아이콘만 가운데 */}
  .prod-btns .btn-cart{white-space:nowrap;}

  /* 건강 BEST : 태블릿 4열 */
  .prod-grid{grid-template-columns:repeat(4,1fr);gap:18px;}
}

/* 모바일 프로모 배너(태블릿/모바일에서만) : Full Width, 틈새 없이 밀착 */
.m-promo{display:none;}
@media (max-width:1024px){
  .m-promo{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;margin:0;}
  .m-promo a{display:block;border-radius:0;overflow:hidden;font-size:0;aspect-ratio:4/3;}
  .m-promo img{display:block;width:100%;height:100%;object-fit:cover;}
}

/* =========================================================
   모바일 (max-width:767px) : 폰트 15px, 그리드 축소
   ========================================================= */
@media (max-width:767px){

  html{font-size:15px;}
  .inner{padding:0 16px;}
  .hm-search input{font-size:16px;} 
  .ad-bar__close{ right:8px; }

  /* 메인 히어로: 모바일에서도 16:10 비율(공통) 유지 → 높이 ↑ */
  .v-main .slider{aspect-ratio:16/10;}

  /* 메인슬라이드 */
  .slider-arrow{width:36px;height:40px;font-size:2rem;text-align:center;}

  /* 인기 BEST 슬라이더 : 화살표/여백 축소 */
  .prod-sec{padding-top:26px;}
  .prod-carousel{padding:0 8px;}
  .carousel-track{gap:12px;}
  .carousel-track .prod-item{flex:0 0 calc((100% - 24px)/3);}
  .carousel-arrow.prev{left:-4px;}
  .carousel-arrow.next{right:-4px;}

  /* 건강 BEST : 모바일 2열 */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:14px 12px;}
  .prod-name{font-size:.92rem;}
  .prod-price{font-size:1.05rem;}
  .prod-btns button{font-size:.72rem;padding:0 7px;}

  .m-promo{grid-template-columns:1fr 1fr;}

  .sec-head h2{font-size:1.2rem;}
  .footer{padding:30px 0 44px;}
  .ft-links li{padding:0 10px;}
  .ft-links-top li a{font-size:.8rem;}
  .ft-addr{font-size:.72rem;}
}

/* 아주 작은 화면 보정 */
@media (max-width:360px){
  .hm-util a{font-size:.76rem;}
  .carousel-track .prod-item{flex:0 0 calc((100% - 16px)/2);}
}

/* =========================================================
   페이지네이션 (공통)
   ========================================================= */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:34px;}
.pagination__page,
.pagination__nav{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 7px;font-size:.9rem;color:var(--color-text-default);background:transparent;border:1px solid var(--color-line);border-radius:5px;font-family:'Roboto', sans-serif;transition:background .15s, border-color .15s, color .15s;}
.pagination__nav{color:var(--color-text-sub);}
.pagination__page:hover,
.pagination__nav:hover{border-color:var(--point);color:var(--point);background:rgba(0,0,0,.02);}
.pagination__page.is-current{background:var(--point);border-color:var(--point);color:#fff;font-weight:700;}
.pagination__page.is-current:hover{background:var(--point);color:#fff;}
.pagination__arrow{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;}
.pagination__nav--prev .pagination__arrow{transform:rotate(135deg);position:relative;left:1px;}
.pagination__nav--next .pagination__arrow{transform:rotate(-45deg);position:relative;right:1px;}

@media (max-width:560px){
  .pagination{gap:5px;margin-top:26px;}
  .pagination__page,
  .pagination__nav{min-width:30px;height:30px;font-size:.84rem;}
}


.subpage-content {
  width: 1000px;
  margin: 40px auto;
}
@media (max-width: 768px) {
  .subpage-content {
    width: 100% !important;
    margin: 20px auto !important;
    padding: 0 16px;
    box-sizing: border-box;
  }
}