@charset "utf-8";
/* ==========================================================================
   산지애 공식몰 — 카페24 「네이처온 반응형」 스킨 기반 메인 시안
   - v3: 스킨 메인 블록 순서·모듈 형태를 그대로 두고 색·카피·사진만 산지애로 바꿨다.
   - 스킨 실측 토큰(Pretendard · 섹션 타이틀 24/700 · 영문 키커 16/500 · pill 버튼 r30)을 그대로 따르고
     스킨의 포인트 변수(--point-color1 / --sale-color)만 산지애 딥틸로 교체했다.
   - 클래스명은 스킨 DOM(header_wrap · mainSlide · cateBanner · inner_area · prdList · tripleBanner …)을 따라
     카페24 스마트디자인 이식 시 그대로 옮겨 붙일 수 있게 했다.
   ========================================================================== */
:root{
  --txt-color1:#222; --txt-color2:#999; --txt-color3:#fff;
  --point-color1:#004445;           /* 스킨 기본 #0F8C22 → 산지애 딥틸 */
  --sale-color:#004445;
  --point-soft:#E6EFEE;
  --heritage:#B0372E;               /* 산지애 레드 — 할인율·강조 포인트 보조 */
  --ivory:#FCFAF6; --ivory-2:#F4EFE6;
  --line:#E5E5E5; --gray-bg:#F7F7F7;
  --inner:1325px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Pretendard,"Noto Sans KR",AppleGothic,sans-serif;font-size:12px;color:#353535;background:#fff;word-break:keep-all;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.blind{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.inner_area{max-width:1440px;width:92%;margin:0 auto}
.mg_60{margin-top:100px}
.pc{display:block}.mo{display:none}

/* ---------- 공통 섹션 타이틀 (스킨: 영문 키커 16/500 포인트색 + 국문 24/700) ---------- */
.title{text-align:center;margin-bottom:36px}
.title p{font-size:16px;font-weight:500;line-height:24px;color:var(--point-color1);letter-spacing:.02em}
.title h2{font-size:24px;font-weight:700;line-height:32px;color:var(--txt-color1);margin-top:4px}
.title .desc{display:block;font-size:14px;color:#777;font-weight:400;margin-top:8px;letter-spacing:0}
section.mainSec{padding-top:100px}

/* ---------- 버튼 (스킨 실측) ---------- */
.btnPill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 22px;border-radius:30px;background:#222;border:1px solid #222;color:#fff;font-size:14.4px;font-weight:500}
.btnPill.point{background:var(--point-color1);border-color:var(--point-color1)}
.btnPill.line{background:#fff;color:#222;border-color:#ccc}
.btnMore{display:flex;justify-content:center;margin-top:40px}
.btnMore a{min-width:200px}

/* ========================= TOP BANNER (스킨 기본 띠 · 포인트색 · 가운데 문구 + 우측 X) ========================= */
.topBanner{background:var(--point-color1);color:#fff;text-align:center;height:40px;display:flex;align-items:center;justify-content:center;position:relative;font-size:14px;font-weight:500}
.topBanner a{display:inline-flex;align-items:center;gap:6px}
.topBanner b{font-weight:700}
.topBanner a svg{width:16px;height:16px;color:#F2C46B}
.topBanner .close{position:absolute;right:calc((100% - min(1440px,100%)) / 2 + 24px);top:50%;transform:translateY(-50%);width:24px;height:24px;color:#fff;display:flex;align-items:center;justify-content:center}
.topBanner .close svg{width:18px;height:18px}

/* ========================= HEADER ========================= */

/* 스킨 실측: 헤더 190 = 유틸 30 + 로고줄 80 + GNB 80. 헤더 자체는 고정하지 않고, 스크롤하면 GNB 줄만 상단 고정(흰 판 + 그림자 1px 1px 10px) */
#header{background:#fff;position:relative;z-index:100}
.header_wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.topArea01{display:flex;justify-content:flex-end;height:30px;align-items:center;gap:18px}
.topArea01 a{font-size:13px;font-weight:500;color:#777;position:relative}
.topArea01 .tong{position:absolute;left:50%;top:18px;transform:translateX(-50%);white-space:nowrap;background:var(--point-color1);color:#fff;font-size:11px;font-weight:600;border-radius:10px;padding:2px 7px;animation:bounce 1.6s infinite}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-3px)}}
.topArea02{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px}
.hotkeyword{width:200px;height:34px;border-radius:17px;background:var(--gray-bg);overflow:hidden;position:relative}
.hotkeyword ul{animation:roll 16s infinite}
.hotkeyword li{height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px;font-weight:500;color:#222}
.hotkeyword .number{width:18px;height:18px;border-radius:50%;background:var(--point-color1);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}
@keyframes roll{0%,10%{transform:translateY(0)}12.5%,22.5%{transform:translateY(-34px)}25%,35%{transform:translateY(-68px)}37.5%,47.5%{transform:translateY(-102px)}50%,60%{transform:translateY(-136px)}62.5%,72.5%{transform:translateY(-170px)}75%,85%{transform:translateY(-204px)}87.5%,97.5%{transform:translateY(-238px)}100%{transform:translateY(0)}}
.logo{display:block;justify-self:center}
.logo img{height:62px;width:auto}
.top_section{justify-self:end;display:flex;align-items:center;gap:14px}
.searchBox{display:flex;align-items:center;width:220px;height:36px;border-radius:18px;background:var(--gray-bg);padding:0 8px 0 16px}
.searchBox input{flex:1;border:0;background:none;font:inherit;font-size:13px;outline:0;min-width:0}
.icon{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.icon svg{width:24px;height:24px}
.icon .count{position:absolute;right:-6px;top:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--point-color1);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.gnbWrap{height:80px}
.gnbIn{background:#fff}
.gnbWrap.fixed .gnbIn{position:fixed;left:0;right:0;top:0;z-index:150;box-shadow:1px 1px 10px rgba(0,0,0,.1)}
.gnbWrap.fixed .gnb{max-width:1440px;margin:0 auto;padding:0 32px}
.gnb{display:flex;align-items:center;gap:30px;height:80px}
.gnb>li>a{font-size:16px;font-weight:600;color:#222;display:block;line-height:80px;position:relative}
.gnb>li>a:hover,.gnb>li>a.on{color:var(--point-color1)}
.gnb>li>a.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--point-color1)}
.gnb .point_btn{display:inline-flex;align-items:center;gap:4px;height:28px;line-height:28px;padding:0 8px 0 12px;border-radius:30px 30px 30px 0;background:var(--point-color1);color:#fff;font-size:14px;font-weight:600}
.gnb .point_btn:after{display:none}
.gnb>li{position:relative}
.gnb .sub{display:none;position:absolute;left:-16px;top:100%;min-width:150px;background:#fff;border:1px solid #eee;border-radius:10px;padding:10px 0;box-shadow:0 8px 20px rgba(0,0,0,.08);z-index:10}
.gnb .has:hover .sub{display:block}
.gnb .sub a{display:block;padding:7px 18px;font-size:14px;color:#444}
.gnb .sub a:hover{color:var(--point-color1)}
/* 모바일 헤더 */
.mHeader{display:none}

/* ========================= ① MAIN SLIDE =========================
   스킨 실측: PC 이미지 1920×638(3.01:1) 폭 100% · 모바일(<1024) 800×1000(4:5) 별도
   텍스트 = 스킨 .txt 구조(제목 28.8/600 한 줄 → 설명 16 → 상세보기 블랙 pill) · 좌 17% 세로 중앙 */
.mainSlide{position:relative;overflow:hidden;background:#eee}
.mainSlide .swiper-slide{position:relative;overflow:hidden}
.mainSlide .swiper-slide>a{display:block;position:relative}
.mainSlide .swiper-slide>a img{width:100%;height:auto;display:block}
.mainSlide .swiper-slide>a img.mobile{display:none}
.mainSlide .swiper-slide.white>a:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,0) 55%)}
.mainSlide .txt{position:absolute;left:17%;top:46%;transform:translateY(-50%);color:#222;z-index:2}
.mainSlide .white .txt{color:#fff}
.mainSlide .txt h3{font-size:28.8px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.mainSlide .txt p{font-size:16px;line-height:24px;margin-top:16px}
.mainSlide .txt .btn{display:inline-flex;align-items:center;height:42px;padding:0 19.2px;border-radius:30px;background:#222;border:1px solid #222;color:#fff;font-size:14.4px;font-weight:500;margin-top:24px}
/* 컨트롤: 진행 바(좌 9% ~) + ‹ | › + ❚❚ — 기본은 밝은 배경용(검정), 어두운 슬라이드(.white)일 때 흰색 */
.slideCtl{position:absolute;left:9%;right:9.5%;bottom:18px;z-index:5;display:flex;align-items:center;gap:16px;color:#222}
.slideCtl .bar{flex:1;height:3px;background:rgba(0,0,0,.15);position:relative;overflow:hidden;margin-right:12px}
.slideCtl .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#222}
.slideCtl button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:15px;color:inherit}
.slideCtl button svg{width:20px;height:20px}
.slideCtl .sep{width:1px;height:12px;background:currentColor;opacity:.3}
.slideCtl.light{color:#fff}
.slideCtl.light .bar{background:rgba(255,255,255,.4)}.slideCtl.light .bar i{background:#fff}

/* ========================= ② CATE BANNER (빠른 카테고리 pill) ========================= */
.cateBanner{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:60px}
.cateBanner a{display:flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 6px;border:1px solid var(--line);border-radius:30px;background:#fff;font-size:15px;font-weight:500;color:#222;transition:.2s}
.cateBanner a:hover{border-color:var(--point-color1);color:var(--point-color1)}
.cateBanner .ic{width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--ivory-2)}
.cateBanner .ic.cs{display:flex;align-items:center;justify-content:center;background:var(--point-soft)}
.cateBanner .ic.cs svg{width:20px;height:20px}

/* ========================= 상품 진열 (prdList · 스킨 카드) ========================= */
.prdList{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 16px}
.prdList.single{display:block}
.prdList .thumbnail{position:relative}
.prdList .prdImg{border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:#f4f4f4}
.prdList .prdImg img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.prdList li:hover .prdImg img{transform:scale(1.04)}
.prdList .badgeTop{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--point-color1);color:#fff;font-size:13px;font-weight:500;border-radius:20px;padding:5px 14px;white-space:nowrap;z-index:2}
.prdList .badgeTop b{font-weight:700;margin-left:6px}
.prdList .description{padding-top:20px}
.prdList .name{display:block;font-size:16px;font-weight:500;color:#000;line-height:1.4}
.prdList .summary{font-size:13px;color:#757575;margin-top:10px;line-height:1.5}
.custom{font-size:13px;color:#999;text-decoration:line-through;margin-top:10px}
.price{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.price .sale{font-size:15px;font-weight:700;color:var(--sale-color)}
.price strong{font-size:19px;font-weight:700;color:#000}
.prdList .summary+.price{margin-top:10px}
.prdList.page2{display:none}

/* ========================= ④ 2단 배너 ========================= */
/* 3차 C안 프로모 배너(.pbn) 디자인 이식 — 회전 쿠폰 카드 + 딥틸 띠 / 베이지 판 + 사과 누끼 */
.dualBanner{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dualBanner a{position:relative;display:flex;align-items:center;overflow:hidden;min-height:172px;padding:30px 40px;border-radius:10px;transition:opacity .2s}
.dualBanner a:hover{opacity:.92}
.dualBanner .b1{background:linear-gradient(135deg,#F1F6F1,#DFEBE3)}
.dualBanner .b2{background:linear-gradient(135deg,#F8F2E6,#F0E6D2)}
.dualBanner .tx{position:relative;z-index:2;max-width:60%}
.dualBanner b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#241F1A}
.dualBanner span{display:block;margin-top:10px;font-size:14px;color:#5B544C}
.dualBanner .cp{position:absolute;right:46px;top:50%;transform:translateY(-50%) rotate(-4deg);z-index:1;width:192px;height:102px;background:#fff;border-radius:10px;box-shadow:0 10px 26px rgba(4,48,47,.14);display:flex;flex-direction:column;justify-content:center;padding-left:24px}
.dualBanner .cp:after{content:"";position:absolute;top:0;right:0;bottom:0;width:42px;background:var(--point-color1);border-radius:0 10px 10px 0}
.dualBanner .cp i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.3em;color:var(--point-color1)}
.dualBanner .cp em{font-style:normal;font-size:30px;font-weight:900;color:#241F1A;margin-top:3px;letter-spacing:-.01em}
.dualBanner .cp em u{text-decoration:none;font-size:15px;font-weight:700;margin-left:2px}
.dualBanner .im{position:absolute;right:16px;top:50%;transform:translateY(-50%);height:150px;width:auto;z-index:1}

/* ========================= ⑤ BEST 10 (순위 슬라이더) ========================= */
.bestWrap{position:relative}
.bestSlide .swiper-slide{padding-top:20px;position:relative}
.bestSlide .rank{position:absolute;left:6px;top:-4px;z-index:3;font-size:48px;font-weight:800;font-style:italic;color:var(--point-color1);line-height:1;letter-spacing:-.04em}
.navBtn{position:absolute;top:36%;z-index:5;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:20px;color:#222}
.navBtn.prev{left:-21px}.navBtn.next{right:-21px}
.navBtn.swiper-button-disabled{opacity:.5}
.progress{height:3px;background:#e5e5e5;margin-top:44px;position:relative}
.progress .swiper-pagination-progressbar-fill{background:#222!important;position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left top}

/* ========================= ⑥ 숏츠 상품 진열 ========================= */
.shorts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shorts .sc{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:315/560;background-size:cover;background-position:center;background-color:#222}
.shorts .sc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shorts .card{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;background:rgba(255,255,255,.94);border-radius:12px;display:flex;gap:14px;padding:16px;align-items:center}
.shorts .card img{width:72px;height:72px;border-radius:8px;object-fit:cover;flex:none}
.shorts .card b{display:block;font-size:15px;font-weight:500;color:#222;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.shorts .card .custom{margin-top:6px;font-size:12px}
.shorts .card .price strong{font-size:17px}.shorts .card .price .sale{font-size:14px}

/* ========================= ⑦ 트리플 카테고리 배너 ========================= */
.tripleBanner{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tripleBanner .tile{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background-size:cover;background-position:center}
.tripleBanner .tile:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%)}
.tripleBanner .tile .tx{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:#fff;z-index:2}
.tripleBanner .tile b{display:block;font-size:24px;font-weight:700}
.tripleBanner .tile span{display:block;font-size:15px;margin-top:6px;opacity:.95}
.tripleBanner .list{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.tripleBanner .list li{display:flex;align-items:center;gap:16px}
.tripleBanner .list .th{width:134px;height:134px;border-radius:10px;overflow:hidden;flex:none;background:#f4f4f4}
.tripleBanner .list .th img{width:100%;height:100%;object-fit:cover}
.tripleBanner .list .bd{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.tripleBanner .list .nm{font-size:16px;font-weight:500;color:#222;line-height:1.4}
.tripleBanner .list .sm{font-size:13px;color:#757575;margin-top:8px;line-height:1.5}
.tripleBanner .list .custom{margin-top:8px}
.tripleBanner .list .cart{align-self:flex-end;width:40px;height:40px;border-radius:8px;background:#f1f1f1;display:flex;align-items:center;justify-content:center;flex:none}
.tripleBanner .list .cart svg{width:18px;height:18px}

/* ========================= ⑧ 영상/이미지 2분할 (풀폭) ========================= */
.videoBannerWrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 8px}
.videoBannerWrap .vb{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:704/396;background-size:cover;background-position:center;background-color:#eee}
.videoBannerWrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ========================= ⑨ 갤러리 게시판 (3.4열 · 가운데 정렬 슬라이더) ========================= */
.galleryWrap{position:relative;max-width:1440px;margin:0 auto}
.gallerySlide .swiper-slide a{display:block}
.gallerySlide .ph{border-radius:12px;overflow:hidden;aspect-ratio:426/340;background-size:cover;background-position:center}
.gallerySlide strong{display:block;font-size:17px;font-weight:600;color:#222;margin-top:24px}
.gallerySlide p{font-size:13px;color:#555;line-height:1.6;margin-top:12px}
.galleryWrap .navBtn{top:30%}
.galleryWrap .navBtn.prev{left:calc(15% - 21px)}.galleryWrap .navBtn.next{right:calc(15% - 21px)}

/* ========================= ⑩ 띠 배너 슬라이드 ========================= */
.lineSlide{border-radius:12px;overflow:hidden;position:relative}
.lineBanner{display:flex;align-items:center;justify-content:space-between;height:184px;padding:0 80px 0 104px;position:relative;overflow:hidden}
.lineBanner.l1{background:#DCEBE7}
.lineBanner.l2{background:#F3EDE3}
.lineBanner h3{font-size:24px;font-weight:700;color:#222;line-height:1.4}
.lineBanner .deco{display:flex;gap:10px}
.lineBanner .deco span{width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;transform:rotate(-8deg)}
.lineBanner .deco b{font-size:20px;font-weight:800;margin-top:2px}
.lineBanner .d1{background:var(--point-color1)}
.lineBanner .d2{background:var(--heritage)}
.lineBanner .d3{background:#E7B85B;color:#3b2a06!important}
.line-pg{position:absolute;left:0;right:0;bottom:12px!important;z-index:3;text-align:center}
.line-pg .swiper-pagination-bullet{width:7px;height:7px;background:#222;opacity:.2;margin:0 3px!important}
.line-pg .swiper-pagination-bullet-active{opacity:1}

/* ========================= ⑪ 상품 사용후기 (베이지 판) ========================= */
.reviewWrap{background:#F4EFE8;padding:70px 0 70px;margin-top:100px}
.reviewSlide .ph{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:12px;overflow:hidden}
.reviewSlide .ph .best{position:absolute;left:8px;top:8px;width:40px;height:40px;border-radius:50%;background:var(--point-color1);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.reviewSlide .prd{display:flex;align-items:center;gap:10px;padding:16px 0 14px;border-bottom:1px solid #DDD6CB}
.reviewSlide .prd img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff}
.reviewSlide .prd span{font-size:12px;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reviewSlide .meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#777;margin-top:16px}
.reviewSlide .stars{color:#F5B301;letter-spacing:1px;font-size:13px}
.reviewSlide .stars b{color:#222;font-weight:600;margin-left:6px;letter-spacing:0}
.reviewSlide p{font-size:14px;color:#222;line-height:1.55;margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reviewWrap .progress{margin-top:30px;background:#DDD6CB}

/* ========================= ⑫ 인스타 ========================= */
.insta{margin-top:100px;padding-bottom:100px}
.instaSlide .swiper-slide{width:210px}
.instaSlide .swiper-slide img{width:210px;height:210px;object-fit:cover;border-radius:12px}
.instaSlide .swiper-wrapper{transition-timing-function:linear!important}

/* ========================= ⑬ FOOTER ========================= */
#footer{background:var(--gray-bg);padding:56px 0 64px}
#footer .inner_area{display:grid;grid-template-columns:300px 1fr;gap:40px;max-width:1260px}
#footer .cs h3{font-size:15px;font-weight:600;color:#222}
#footer .cs .tel{font-size:36px;font-weight:600;color:#000;margin-top:8px;letter-spacing:-.01em}
#footer .cs .time{font-size:13px;color:#777;line-height:1.7;margin-top:12px}
#footer .sns{display:flex;gap:16px;margin-top:20px}
#footer .sns a{width:26px;height:26px;color:#666}
#footer .sns svg{width:26px;height:26px}
#footer .menu{display:flex;gap:20px}
#footer .menu a{font-size:15px;font-weight:600;color:#222}
#footer .menu a.privacy{color:var(--point-color1)}
#footer .info{font-size:12.5px;color:#777;line-height:1.75;margin-top:14px}
#footer .info span{margin-right:14px;display:inline-block}
#footer .bankTit{font-size:15px;font-weight:600;color:#222;margin-top:26px}
#footer .flogo{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
#footer .flogo img{height:40px;width:auto;opacity:.9;margin-right:6px}
#footer .flogo .ccm{font-size:11px;color:#777;border:1px solid #ddd;border-radius:6px;padding:4px 8px;background:#fff}

/* 모바일 하단 탭바 */
.bottomTab{display:none}

/* 우측 고정 퀵버튼 (스킨 실측: 우 14px · 하 88px · 40px 원형 · 그림자 1px 1px 5px) */
.fixed_btn{position:fixed;right:14px;bottom:88px;z-index:140;display:flex;flex-direction:column;gap:12px;align-items:center}
.fixed_btn a,.fixed_btn button{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:1px 1px 5px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.fixed_btn a.dark{background:#222}
.fixed_btn svg{width:22px;height:22px}
/* A/B 시안 스위처 (3차 .tsw 동일 형식) */
.tsw{position:fixed;left:50%;transform:translateX(-50%);z-index:2147483647;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;align-items:stretch;gap:2px;background:rgba(20,17,13,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px;box-shadow:0 8px 30px rgba(20,15,10,.28);font-family:"Apple SD Gothic Neo",Pretendard,sans-serif}
.tsw a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:7px 16px;border-radius:999px;color:rgba(255,255,255,.62);transition:.18s}
.tsw em{display:flex;align-items:center;padding:0 12px 0 14px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.5);white-space:nowrap}
.tsw a b{font-size:14px;font-weight:800;line-height:1.2}
.tsw a span{font-size:10.5px;font-weight:600;opacity:.75;margin-top:1px;white-space:nowrap}
.tsw a:hover{color:#fff;background:rgba(255,255,255,.1)}
.tsw a.on{background:#FBF7F0;color:#241F1A}
/* 시안 안내 배지 */
.draftNote{position:fixed;right:16px;bottom:16px;z-index:200;background:#222;color:#fff;font-size:12px;border-radius:10px;padding:10px 14px;line-height:1.5;max-width:280px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.draftNote b{color:#9CCBC3}
.draftNote button{position:absolute;right:6px;top:4px;color:#aaa;font-size:14px}

/* ========================= MOBILE (스킨: 1024 미만 = 모바일 헤더 + 하단 탭바) ========================= */
@media (max-width:1023px){
  .pc{display:none}.mo{display:block}
  .inner_area{width:auto;margin:0 16px}
  section.mainSec{padding-top:64px}
  .title{margin-bottom:24px}
  .title p{font-size:14px}.title h2{font-size:21px;line-height:29px}
  .header_wrap{padding:0}
  .topBanner{height:34px;font-size:12px}
  .topBanner .close{right:10px}
  .topArea01,.topArea02,.gnbWrap{display:none}
  .mHeader{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 14px}
  .mHeader .logo img{height:40px}
  .mHeader .ham svg,.mHeader .icon svg{width:24px;height:24px}
  .mGnbWrap{height:42px}
  .mGnbWrap.fixed .mGnb{position:fixed;left:0;right:0;top:0;z-index:150;background:#fff;height:46px;padding-top:7px;box-shadow:1px 1px 10px rgba(0,0,0,.1)}
  .mGnb{background:#fff;display:flex;gap:8px;overflow-x:auto;padding:0 16px 10px;align-items:center;scrollbar-width:none}
  .mGnb::-webkit-scrollbar{display:none}
  .mGnb a{font-size:13.5px;font-weight:500;color:#222;white-space:nowrap;height:32px;line-height:30px;padding:0 13px;border:1px solid #e5e5e5;border-radius:20px}
  .mainSlide .swiper-slide>a img.pc{display:none}
  .mainSlide .swiper-slide>a img.mobile{display:block}
  .mainSlide .swiper-slide>a:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(252,250,246,.85) 0%,rgba(252,250,246,.4) 30%,rgba(252,250,246,0) 48%)}
  .mainSlide .swiper-slide.white>a:after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 32%,rgba(0,0,0,0) 50%)}
  .mainSlide .txt{left:8%;right:8%;top:10%;transform:none}
  .mainSlide .txt h3{font-size:20.64px;line-height:27.52px}
  .mainSlide .txt p{font-size:13.76px;line-height:20.64px;margin-top:8px}
  .mainSlide .txt .btn{height:30px;font-size:12.4px;padding:0 14px;margin-top:14px}
  .slideCtl{left:20px;right:20px;bottom:16px;gap:10px}
  .cateBanner{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:28px -16px 0;padding:0 16px;scrollbar-width:none}
  .cateBanner::-webkit-scrollbar{display:none}
  .cateBanner a{flex:none;height:44px;font-size:13.5px}
  .cateBanner .ic{width:32px;height:32px}
  .prdList{grid-template-columns:repeat(2,1fr);gap:28px 10px}
  .prdList .name{font-size:14.5px}
  .prdList .summary{font-size:12.5px}
  .price strong{font-size:16.5px}.price .sale{font-size:14px}
  .prdList .badgeTop{font-size:10.5px;padding:4px 8px;top:8px}
  .prdList .badgeTop b{margin-left:3px}
  .bestSlide .rank{font-size:36px}
  .navBtn{display:none}
  .dualBanner{grid-template-columns:1fr;gap:10px}
  .dualBanner a{min-height:122px;padding:22px 24px}
  .dualBanner .tx{max-width:52%}
  .dualBanner b{font-size:16.5px}.dualBanner span{margin-top:7px;font-size:12.5px}
  .dualBanner .cp{width:118px;height:66px;right:14px;padding-left:14px;border-radius:6px}
  .dualBanner .cp:after{width:26px;border-radius:0 6px 6px 0}
  .dualBanner .cp i{font-size:8px;letter-spacing:.22em}
  .dualBanner .cp em{font-size:19px}.dualBanner .cp em u{font-size:11px}
  .dualBanner .im{height:80px;right:6px}
  .shorts{display:flex;overflow-x:auto;gap:10px;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .shorts::-webkit-scrollbar{display:none}
  .shorts .sc{flex:none;width:64%}
  .shorts .card{left:10px;right:10px;bottom:10px;padding:10px;gap:10px}
  .shorts .card img{width:52px;height:52px}
  .shorts .card b{font-size:13px;max-width:150px}
  .tripleBanner{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .tripleBanner::-webkit-scrollbar{display:none}
  .tripleBanner .col{flex:none;width:84%}
  .tripleBanner .tile b{font-size:20px}
  .tripleBanner .list .th{width:96px;height:96px}
  .tripleBanner .list .nm{font-size:14px}
  .tripleBanner .list .sm{display:none}
  .videoBannerWrap{grid-template-columns:1fr;gap:10px;padding:0 16px}
  .gallerySlide strong{font-size:15px;margin-top:14px}
  .lineBanner{height:150px;padding:0 22px;align-items:flex-start;flex-direction:column;justify-content:center;gap:10px}
  .lineBanner h3{font-size:18px}
  .lineBanner .deco{position:absolute;right:-14px;bottom:-14px;opacity:.95}
  .lineBanner .deco span{width:64px;height:64px;font-size:10px}
  .lineBanner .deco b{font-size:13px}
  .lineBanner .deco span:not(:last-child){display:none}
  .reviewWrap{padding:52px 0;margin-top:64px}
  .insta{margin-top:64px;padding-bottom:40px}
  .instaSlide .swiper-slide,.instaSlide .swiper-slide img{width:140px;height:140px}
  #footer{padding:36px 0 110px}
  #footer .inner_area{grid-template-columns:1fr;gap:26px}
  #footer .cs .tel{font-size:26px}
  #footer .menu{flex-wrap:wrap;gap:12px 18px}
  #footer .menu a{font-size:13px}
  .bottomTab{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;border-top:1px solid #eee;height:62px;padding-bottom:env(safe-area-inset-bottom)}
  .bottomTab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:#222}
  .bottomTab a.on{color:var(--point-color1);font-weight:600}
  .bottomTab svg{width:22px;height:22px}
  .draftNote{display:none}
  .fixed_btn{bottom:150px;right:10px;gap:8px}
  .fixed_btn a,.fixed_btn button{width:36px;height:36px}
  .tsw{bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:3px}
  .tsw a{min-width:46px;padding:6px 11px}
  .tsw em{padding:0 7px 0 11px;font-size:10.5px;letter-spacing:.08em}
}