/* BASIC css start */
/* =========================================================
   모바일 메인 (리뉴얼) · 색은 공통 CSS의 --b-* 변수
   ========================================================= */
#mmain {padding-bottom:8px;}

/* 메인 배너 */
#event {position:relative; margin:0;}
#event .MS_img-wrap {position:relative; width:100%; overflow:hidden;}
#event .event-imgs {position:relative;}
#event .MS_img-area {float:left;}
#event .MS_img-area:not(:first-child) {display:none;}
#event .MS_img-area img {display:block; width:100%; height:auto; aspect-ratio:1260 / 743; object-fit:cover; background:var(--m-gray);} /* PC와 같은 1260 x 743 비율로 고정 */
#event .pagination {position:absolute; left:0; right:0; bottom:12px; z-index:5; display:flex; justify-content:center; gap:5px; text-align:center;}
#event .pagination .swiper-pagination-switch {display:inline-block; width:6px; height:6px; margin:0; border:0; border-radius:3px; background:rgba(255,255,255,.6); text-indent:-9999px; overflow:hidden; box-shadow:0 0 2px rgba(0,0,0,.25); transition:width .25s, background-color .25s;}
#event .pagination .swiper-active-switch {width:18px; background:#fff;}

/* 섹션 공통 제목 */
#mmain .mm-hd {display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 16px; margin-bottom:14px;}
#mmain .mm-hd h2 {font-size:19px; font-weight:900; line-height:1.3; color:var(--b-ink);}
#mmain .mm-hd-more {display:inline-flex; align-items:center; gap:2px; height:32px; font-size:13px; color:var(--b-mute);}
#mmain .mm-sec {margin-top:40px;}

/* 쇼핑 혜택 */
#mmain .mm-perks {margin-top:16px;}
#mmain .mm-perks ul {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 16px;}
#mmain .mm-perks li {min-width:0;}
#mmain .mm-perks a, #mmain .mm-perk-box {display:flex; align-items:center; gap:10px; height:100%; padding:12px; border:1px solid var(--b-line); border-radius:14px; box-sizing:border-box; color:var(--b-ink);}
#mmain .mm-perk-ico {flex:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#e4eff2; color:var(--b-deep);}
#mmain .mm-perk-ico svg {width:21px; height:21px;}
#mmain .mm-perks li:nth-child(2) .mm-perk-ico {background:#efe7df; color:#7a5a3c;}
#mmain .mm-perks li:nth-child(3) .mm-perk-ico {background:#e3efe8; color:#2f5e45;}
#mmain .mm-perks li:nth-child(4) .mm-perk-ico {background:#e6e1ee; color:#5a4c7a;}
#mmain .mm-perk-txt {display:flex; flex-direction:column; gap:2px; min-width:0;}
#mmain .mm-perk-txt strong {font-size:14px; font-weight:700; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#mmain .mm-perk-txt span {font-size:11.5px; line-height:1.35; color:var(--b-mute); word-break:keep-all;}

/* 공지사항 */
#mmain .mm-notice {margin:24px 16px 0; padding:18px 0 6px; border-radius:16px; background:var(--b-soft);}
#mmain .mm-notice .mm-hd {margin-bottom:4px;}
#mmain .mm-notice .mm-hd h2 {font-size:16px;}
#mmain .mm-notice-list {padding:0 16px;}
#mmain .mm-notice-list li {border-top:1px solid #e1e9ec;}
#mmain .mm-notice-list li:first-child {border-top:0;}
#mmain .mm-notice-list a {display:block; padding:11px 0; font-size:14px; color:var(--b-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 신상품 탭 */
#mmain .mm-tabs {display:flex; gap:6px; padding:0 16px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none;}
#mmain .mm-tabs::-webkit-scrollbar {display:none;}
#mmain .mm-tabs button {flex:none; height:36px; padding:0 15px; border:1px solid var(--m-line2); border-radius:18px; background:#fff; font-size:14px; font-weight:500; color:var(--b-ink); cursor:pointer;}
#mmain .mm-tabs button.is-on {background:var(--b-ink); border-color:var(--b-ink); color:#fff; font-weight:700;}
#mmain .mm-panel[hidden] {display:none;}

/* 상품 (공통 CSS 3단 위에 메인용 보정) */
#mmain .list_shopping3x figure {margin:0;}
/* 메인은 6개 · 9개씩 진열하므로 폰·태블릿 모두 3열로 고정 (줄이 딱 맞게) */
#mmain .list_shopping3x ul {grid-template-columns:repeat(3,minmax(0,1fr));}
#mmain .mm-pic {position:relative; display:block;}
#mmain .listPrice {display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px;}
#mmain .listPrice del {font-size:11.5px; font-weight:400; color:#9aa5aa;}
#mmain .listSoldout {font-size:13px;}
#mmain .mm-icons {margin-top:4px; line-height:0;}
#mmain .mm-icons img {height:14px; width:auto; margin:0 2px 2px 0;}
#mmain .more {margin:22px 0 0;}
#mmain .btn_moreGray {display:flex; align-items:center; justify-content:center; gap:4px;}

/* 베스트 순위 숫자 */
#mmain .mm-best-list ul {counter-reset:mmrank;}
#mmain .mm-best-list li {counter-increment:mmrank;}
#mmain .mm-rank {position:absolute; left:6px; top:6px; min-width:22px; height:22px; padding:0 5px; box-sizing:border-box; border-radius:11px; background:rgba(31,42,48,.78); color:#fff; font-size:12px; font-weight:700; line-height:22px; text-align:center; font-family:'Roboto',sans-serif; letter-spacing:0;}
#mmain .mm-rank:before {content:counter(mmrank);}
#mmain .mm-best-list li:nth-child(-n+3) .mm-rank {background:var(--b-point);}

/* 인스타그램 */
#mmain .mm-insta {margin-top:44px;}
#mmain .mm-insta-grid {display:flex; gap:6px; padding:0 16px; overflow-x:auto; scrollbar-width:none;}
#mmain .mm-insta-grid::-webkit-scrollbar {display:none;}
#mmain .mm-insta-grid li {flex:none; width:38%;}
#mmain .mm-insta-grid a {display:block; aspect-ratio:1/1; border-radius:10px; background:var(--m-gray) center/cover no-repeat;}

/* 아주 좁은 폰(갤럭시 폴드 접은 화면, 아이폰 SE 등) : 아이콘을 글자 위로 */
@media screen and (max-width:374px) {
#mmain .mm-perks a, #mmain .mm-perk-box {flex-direction:column; align-items:flex-start; gap:8px; padding:12px;}
#mmain .mm-perk-ico {width:32px; height:32px;}
#mmain .mm-perk-ico svg {width:18px; height:18px;}
#mmain .mm-perk-txt strong {white-space:normal;}
}
@media screen and (min-width:600px) {
#mmain .list_shopping3x ul {column-gap:14px; row-gap:28px; padding:0 20px;}
#mmain .mm-insta-grid li {width:19%;}
}

/* BASIC css end */