/* BASIC css start */
body #contentWrap {width:1400px;}
body .item-wrap {width:100%; margin-top:100px;}
body .cateTit {padding:0;}
body .cateTit h3 {text-align:left; font-size:20px; color:#121212; font-weight:500; margin-bottom:16px; font-family: "SUIT", sans-serif;}

/* class-list */

.prdList ul li{
  position: relative;
}
.prdList ul li .wishIcon{
  position: absolute;
  top: 8px;
  right: 15px;
  z-index: 3;
}

.prdList ul li .imgWrap{
  position: relative;
  z-index: 3;
}

#productClass .cate-wrap {
  overflow:hidden;
  margin-top: 48px !important;
  padding: 32px 40px 28px;
  text-align:center;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 8px;
}

#productClass .cate-wrap .bcate {
  padding-bottom:16px;
  font-size:22px;
  color:#121212;
  font-weight:600;
}
.class-list {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.class-list dd {
  display:inline-block;
  vertical-align:top;
}
.class-list dd a {
  display:block;
  padding:8px 20px;
  border-radius:20px;
  border:0.5px solid var(--border);
  background:var(--surface);
  font-size:14px;
  color:var(--text-sub);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.class-list dd a:hover {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}
.class-list dd a.sel {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color:#fff;
  font-weight:600;
}

/* best-item */
#productClass .best-item {}
#productClass .prdList.basic.best-item ul {gap:16px;}
#productClass .prdList.basic.best-item ul li {width:220px;}

/* total-sort */
#productClass .total-sort { padding-top: 30px; }
.sort {display:flex; align-items:center; justify-content: space-between; margin-bottom:16px;}
.item-total {display:inline-block; color:#121212; font-size:14px;}
.trxSchOrd {}
.trxSchOrd select {width:120px; height:30px; border:1px solid #ededed; border-radius:4px; appearance:none; background:url(//skin.makeshop.co.kr/skin/fragrance/pc/img/sel_down.png)no-repeat 93% center; text-indent: 10px;}

/* ÇÏÀ§ ºÐ·ù */
#productClass .item-cate { display: flex; justify-content: space-between; align-items: end; padding: 30px 0; }
#productClass .item-cate a { font-weight: bold; color: #1c1c1c; letter-spacing: -1px; }
#productClass .item-cate .scate a { font-size: 18px; }
#productClass .item-cont .thumb .main_icons {  position:relative; }

#MS_product {display: flex; flex-wrap: wrap; gap: 60px 20px; justify-content: start;}

/*  Ç°Àý */
.prdList ul li .soldout {position:relative;}
.prdList ul li .soldout .soldout_txt {position: absolute; width: 100%; height:100%; background: rgba(0, 0, 0, 0.5);line-height: 100%; display: flex; text-align: center; color: #dddddd; font-size: 24px; font-weight: 400; align-items: center;justify-content: center;border-radius: 15px;}

/*  ´õº¸±â */
#MS_product_more_btn_area .more {width:280px;height:46px;border:1px solid #EDEDED;text-align:center;line-height:46px;margin:100px auto}
#MS_product_more_btn_area .more a {color:#121212;font-size:14px;}

/* ÇÊÅÍ */
.btn-filter {margin-top:30px; padding-left:25px; font-size:15px; font-weight:bold; background:url(/images/common/icon_filter.png) no-repeat left center;}
.filter-wrap * {font-family:'Malgun Gothic'; color:#202020; word-break:break-all;}
.layer-filter-wrap {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:200; content:'';}
.layer-filter-wrap .layer-filter {position:fixed; left:0; top:0; width:400px; height:100%; background:#fff; z-index:200; overflow:auto;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar {width:6px;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-thumb {height:30%; background:#666; border:2px solid #fff;}
.layer-filter-wrap .layer-filter::-webkit-scrollbar-track {background:#fff;}
.layer-filter-wrap .layer-filter .tit {position:sticky; top:0; padding:30px; background:#fff; border-bottom:1px solid #f0f0f0; z-index:100;}
.layer-filter-wrap .layer-filter .tit h3 {display:inline-block; font-size:17px; font-weight:bold;}
.layer-filter-wrap .layer-filter .tit .total-count {display:inline-block; margin-left:15px; color:#b17efe; font-size:13px;}
.layer-filter-wrap .layer-filter .tit .btn-close {position:absolute; right:30px; top:30px; width:18px; height:18px; font-size:0px; text-indent:-9999px; background:url(/images/common/icon_close.png) no-repeat left center;}
.layer-filter-wrap .layer-filter .opt-box li > div {padding-top:7px;}
.layer-filter-wrap .layer-filter .opt-box li {padding:18px 30px 17px; border-bottom:1px solid #f0f0f0; background:url(/images/common/icon_arr_down.png) no-repeat 92% 22px; font-size:15px; font-weight:bold; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li.active {background:url(/images/common/icon_arr_up.png) no-repeat 92% 22px;}
.layer-filter-wrap .layer-filter .opt-box li input[type="checkbox"]{display:none;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label {position:relative; height:21px; line-height:19px; margin-top:10px; padding-left:26px; display:block; font-size:13px; font-weight:normal; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-box label:before {position:absolute; left:0; top:0; width:21px; height:21px; background:url(/images/common/chkbox_off.png) no-repeat center center; content:'';}
.layer-filter-wrap .layer-filter .opt-box li .chk-box input[type="checkbox"]:checked + label:before {background:url(/images/common/chkbox_on.png) no-repeat center center;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code {display:flex; flex-wrap:wrap; gap:15px; margin-top:10px;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code label {display:block; width:36px; height:36px; border:3px solid #fff; border-radius:50%; font-size:13px; font-weight:normal; box-shadow:0px 0px 1px 1px #dfdfdf; cursor:pointer;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label {box-shadow:0px 0px 1px 1px #000;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code input[type="checkbox"]:checked + label + p {color:#202020;}
.layer-filter-wrap .layer-filter .opt-box li .chk-color-code p {padding-top:9px; color:#a6a6a6; font-size:12px; text-align:center; font-weight:normal;}
.layer-filter-wrap .layer-filter .select-filter {display:flex; flex-wrap:wrap; gap:5px; margin:20px 0 30px; padding:0 30px;}
.layer-filter-wrap .layer-filter .select-filter li {display:flex; align-items:center; padding:6px 10px 7px; background:#f8f8f8; border-radius:5px; font-size:13px;}
.layer-filter-wrap .layer-filter .select-filter li .btn-del {width:10px; height:10px; margin-left:5px; background:url(/images/common/icon_txt_delete.png) no-repeat right center; font-size:0px; text-indent:-9999px;}
.layer-filter-wrap .layer-filter .select-filter li .color-code {display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%;}
.layer-filter-wrap .layer-filter .select-filter li .filter-text {max-width:200px;}
.layer-filter-wrap .layer-filter .btn-wrap {display:flex; margin:30px; border:1px solid #202020; border-radius:5px; box-sizing:border-box;}
.layer-filter-wrap .layer-filter .btn-wrap button {width:auto; padding:16px 0; text-align:center; background:#fff; font-size:14px; font-weight:bold;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-reset {width:100%; min-width:120px; border-radius:5px;}
.layer-filter-wrap .layer-filter .btn-wrap button.btn-search {min-width:220px; background:#202020; border-radius:0 5px 5px 0;}
.layer-filter-wrap .layer-filter .btn-wrap button span {display:inline-block; visibility:visible;}
.layer-filter-wrap .layer-filter .btn-wrap button span.fc-fff {color:#fff;}

@import url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/pretendard.css');

:root{
  --bg: #F3F3F3;
  --surface: #FFFFFF;
  --text: #232320;
  --text-sub: #6F6E67;
  --text-mute: #A6A49B;
  --accent: #A0D3F7;
  --accent-bg: #E9F4FC;
  --accent-dark: #3E7CA6;
  --accent-deep: #24455C;
  --price: #C2402F;
  --border: #E0E0DD;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Pretendard', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.page{
  width: 100%;
  background: var(--bg);
  position: relative;
}

/* ---------- Snowfall ---------- */
.snowfall{
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.snowflake{
  position: absolute;
  top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 55%, transparent 100%);
  animation: snow-fall linear infinite;
}
@keyframes snow-fall{
  0%{ transform: translateY(0) rotate(0deg); }
  100%{ transform: translateY(110vh) rotate(360deg); }
}

/* ---------- Hero ---------- */
.hero{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 110px 40px 90px;
  text-align:center;
  background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg) 100%);
}
.hero-inner{ max-width: 1100px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }
.hero .period{
  font-size: 13px; letter-spacing: 0.16em; color: var(--accent-dark);
  font-weight:600; margin-bottom: 26px; text-transform:uppercase;
}
.hero h1{
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  font-size: 44px;
  line-height:1.45;
  color: var(--text);
  letter-spacing:-0.01em;
}
.hero .divider{ width:44px; height:1px; background: var(--accent); margin: 34px auto; }
.hero .sub{ font-size: 16px; color: var(--text-sub); line-height:1.7; }

/* ---------- Section ---------- */
.section{
  padding: 76px 0 30px;
  border-top: 0.5px solid var(--border);
}
.section-inner{ display:flex; gap:64px; padding: 0 40px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.section-inner.reverse{ flex-direction: row-reverse; }
.section-head{ flex: 0 0 300px; padding-top: 4px; }
.section-media{ flex: 1; min-width: 0; }

.section-slider-full{
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size: 12px; color: var(--accent-dark); font-weight:600;
  letter-spacing:0.08em; margin-bottom: 14px;
}
.section-title{
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  font-size: 23px; margin-bottom:14px; line-height:1.45;
  letter-spacing:-0.01em;
}
.section-copy{ font-size: 15px; color: var(--text-sub); line-height:1.75; }

.lifestyle-shot{
  margin: 0 0 24px;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 10px;
  background: var(--accent-bg);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent-dark); font-size:13px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.lifestyle-shot img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Slider ---------- */
.slider-wrap{ position:relative; z-index: 2; }
.slider{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type: x proximity; padding: 2px 2px 12px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.slider::-webkit-scrollbar{ display:none; }

.arrow{
  position:absolute; top:70px; width:38px; height:38px; border-radius:50%;
  background: var(--surface); border:0.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:16px; color:var(--text); z-index:3; user-select:none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.arrow:hover{ border-color: var(--accent); color: var(--accent-dark); }
.arrow.prev{ left: -19px; }
.arrow.next{ right: -19px; }

.card{ flex: 0 0 190px; scroll-snap-align:start; cursor:pointer; position: relative; z-index: 2; }
.card .thumb{
  width:190px; height:190px; border-radius:8px; overflow:hidden;
  background: var(--surface); border:0.5px solid var(--border);
  position:relative; display:flex; align-items:center; justify-content:center;
  color: var(--text-mute); font-size:12px; transition: border-color .15s;
}
.card .thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .thumb{ border-color: #B5B4AD; }
.card .badge{
  position:absolute; top:9px; left:9px;
  background: var(--accent-dark); color:#fff; font-size:11px;
  padding:4px 8px; border-radius:4px; font-weight:500;
}
.card .badge.badge-green{
  background: #4F7A5A;
}
.card .name{ font-size:13.5px; margin-top:11px; line-height:1.4; color: var(--text); }
.card .price-row{ margin-top:6px; }
.card .consumer{ font-size:12px; color: var(--text-mute); text-decoration: line-through; }
.card .sale{ font-size:15px; font-weight:600; margin-top:3px; }
.card .sale .rate{ color: var(--price); margin-right:6px; }
.card .sale .won{ color: var(--text); }

.more-btn-wrap{ margin-top: 20px; position: relative; z-index: 2; text-align: center; }
.more-btn{
  display:inline-block; padding:11px 26px; text-align:center;
  border:0.5px solid var(--border); border-radius:8px;
  font-size:13.5px; color: var(--text-sub); background: var(--surface);
  cursor:pointer;
  text-decoration: none;
}
.more-btn:hover{ border-color: #B5B4AD; }
.more-btn.hidden{ display:none; }
.hidden{ display:none; }

/* ---------- Coupon / CTA ---------- */
.cta-band{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 40px;
  background: #D3E5F1;
  color: var(--accent-deep);
  padding: 70px 40px;
  text-align:center;
}
.cta-inner{ max-width: 1100px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }
.cta-band .label{ font-size:13px; opacity:0.75; margin-bottom:10px; letter-spacing:0.08em; }
.cta-band .headline{
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  font-size:27px; line-height:1.55; margin-bottom:30px;
  letter-spacing:-0.01em;
}

.coupon-box{ display:inline-flex; align-items:center; gap:22px; border:1px solid rgba(255,255,255,0.55); border-radius:12px; padding:18px 28px; background: rgba(255,255,255,0.22); }
.coupon-box-left{ text-align:left; }
.coupon-title{ font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.coupon-sub{ margin-top:4px; font-size:12.5px; opacity:0.7; }
.coupon-box-divider{ width:0; height:34px; border-left:1px dashed rgba(36,69,92,0.35); }
.kakao-share-btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:11px 22px; border-radius:8px; background:#FEE500; color:#191919; font-size:13.5px; font-weight:700; cursor:pointer; transition: transform .15s ease, opacity .15s ease; }
.kakao-icon{ width:17px; height:17px; color:#191919; }
.kakao-share-btn:hover{ opacity:0.88; }
.kakao-share-btn:active{ transform: scale(0.98); }

.coupon-reveal{ width:100%; max-width:580px; margin:24px auto 0; padding:30px; border-radius:14px; background:#FFFFFF; color:var(--text); box-shadow:0 8px 28px rgba(36,69,92,0.12); animation: coupon-open .45s ease both; }
@keyframes coupon-open{
  0%{ opacity:0; transform: translateY(12px); }
  100%{ opacity:1; transform: translateY(0); }
}
.coupon-reveal-label{ display:inline-block; margin-bottom:10px; padding:5px 10px; border-radius:20px; background: var(--accent-bg); color: var(--accent-dark); font-size:11px; font-weight:700; letter-spacing:0.04em; }
.coupon-reveal-title{ font-size:20px; font-weight:700; line-height:1.5; }
.coupon-reveal-copy{ margin-top:10px; color: var(--text-sub); font-size:14px; line-height:1.7; }
.coupon-code-wrap{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
.coupon-code{ min-width:190px; padding:14px 22px; border:1px dashed var(--accent-dark); border-radius:8px; background: var(--accent-bg); color: var(--accent-deep); font-size:20px; letter-spacing:0.12em; }
.coupon-copy-btn{ min-height:50px; padding:0 18px; border-radius:8px; background: var(--accent-deep); color:#FFFFFF; font-size:13px; font-weight:600; cursor:pointer; }
.coupon-copy-btn:hover{ opacity:0.88; }
.copy-message{ min-height:20px; margin-top:12px; font-size:13px; font-weight:600; color: var(--accent-dark); }
.coupon-goto-btn{ display:inline-block; margin-top:16px; padding:12px 20px; border-radius:8px; border:0.5px solid var(--accent-dark); color: var(--accent-dark); font-size:13.5px; font-weight:600; text-decoration:none; }
.coupon-goto-btn:hover{ background: var(--accent-bg); }

.footer-note{
  text-align:center; font-size:12px; color: var(--text-mute);
  padding: 26px 40px 60px; line-height:1.8;
}


.event-notice{ max-width: 560px; margin: 30px auto 0; padding: 0 40px; text-align:center; }
.event-notice-title{ font-size:12px; font-weight:700; color: var(--text-mute); letter-spacing:0.04em; margin-bottom:8px; }
.event-notice-list{ list-style:none; font-size:11.5px; color: var(--text-mute); line-height:1.9; }
.event-notice-list li{ position:relative; padding-left:10px; }
.event-notice-list li::before{ content:'-'; position:absolute; left:0; }
/* BASIC css end */