/* * Malone storefront overrides — loaded after master-styles.css. * * Holds the small delta between the crawled cafe24 skin and the native * Next.js port. Keep rules narrow and commented so we can fold them * back into the crawl or upstream to the design team later. */ /* 상품 목록: 그리드·정렬·페이지네이션만 1230px 제한. * 브레드크럼(.section.path)과 카테고리 타이틀(.section.titleArea)은 * #contents > .section { max-width:1320px } 규칙 그대로 유지. */ #container #contents.page-products-list .xans-product-normalmenu, #container #contents.page-products-list .ec-base-product, #container #contents.page-products-list .ec-base-paginate { max-width: 1230px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { #container #contents.page-products-list .xans-product-normalmenu, #container #contents.page-products-list .ec-base-product, #container #contents.page-products-list .ec-base-paginate { padding: 0 10px; } } /* Header menu text: force black regardless of scroll state. * Overrides the crawled rule * body header *:not(aside *) { color:#fff !important } * which paints every header child (MENU, nav links, logo, right-side * icons) white against the hero banner. Matches the same specificity * with black so we win via source order. */ body header *:not(aside *) { color: #000 !important; } /* Header 중앙 로고 복원 — 라이브 cafe24 optimizer_user.php 는 홈 전용 * 번들에만 `body header .logo { display: none; }` 를 포함한다. 우리는 * 단일 master-styles.css 를 모든 페이지에서 로드하므로 로고가 전 페이지 * 에서 숨겨진다. 히어로 배너(#visual)가 있는 홈에서만 숨기도록 스코프 * 재설정. */ body:not(:has(#visual)) header .logo { display: flex; } /* 모바일 헤더 로고 opacity·visibility 복원 — master-styles.css의 * @media(max-width:767px) { #main header .logo { opacity:0; visibility:hidden } } * 가 로고를 비표시로 만든다. #visual 없는 서브페이지에서만 해제. */ @media all and (max-width: 767px) { body:not(:has(#visual)) header .logo { opacity: 1; visibility: visible; } } /* 서브페이지 상단 여백 복원 — 라이브 malone 은 /home 에만 body#main 이 * 붙어 `#main #container > #contents { margin-top: 0 }` 로 히어로 배너를 * 헤더(position:fixed) 아래 즉시 시작시켰다. 우리 root layout.tsx 는 * 전 페이지에 `` 를 달아 이 규칙이 상세/마이페이지/장바구니/ * 게시판 등 모든 서브페이지까지 적용 → fixed 헤더 뒤로 콘텐츠가 숨는다. * #visual 이 없는 페이지에서 원본 기본값(데스크탑 90px / 모바일 66px = * header 높이)을 복원. */ body#main:not(:has(#visual)) #container > #contents { margin-top: 90px; } @media all and (max-width: 767px) { body#main:not(:has(#visual)) #container > #contents { margin-top: 66px; } } /* 상품목록·상품상세 모바일 좌우 16px 여백. * master-styles.css @media(max-width:767px) 는 * #container > #contents { padding: 0 16px } — 서브페이지 여백 * #main #container > #contents { padding: 0 } — 홈만 제거 * layout.tsx 가 body#main 을 전 페이지에 달아 후자가 서브페이지까지 덮어씀. * 상품목록(.page-products-list)·상품상세(.xans-product-detail 포함) 두 페이지에서만 복원. */ @media all and (max-width: 767px) { #contents.page-products-list, #wrap:has(.xans-product-detail) #contents { padding-left: 16px; padding-right: 16px; } } /* /register/agreement + /register 약관 아코디언 — 라이브 cafe24 * optimizer_user.php 번들에 있던 .xans-member-join 규칙을 재현. * 기본은 접힌 상태, .on 또는 .selected 클래스 붙을 때만 펼친다. * MaloneInitScript의 initAgreementAccordion이 .btnToggle 클릭을 * 받아 .on 토글을 담당한다. */ /* .titleArea 는 .xans-member-join 컨테이너 밖(#contents 직계)에 있어 * 부모-스코프 셀렉터로는 못 잡는다. 라이브 cafe24 홈 이외 페이지의 * body 에는 id 가 없어 `.titleArea { text-align: center }` 가 그대로 * 먹지만, 우리 루트 layout.tsx 는 전 페이지에 `body id="main"` 을 * 붙이므로 master-styles.css 의 `#main .titleArea { text-align: left }` * (specificity 0,1,1) 이 우선 적용돼 좌측 정렬됨. specificity 를 * 맞춰 override. */ #main .titleArea { text-align: center; } .xans-member-join .agreeArea { margin: 0 0 40px; } .xans-member-join .agreeAll { font-size: 16px; } .xans-member-join .agreeArea .contents { display: none; overflow: hidden auto; height: 152px; margin: 20px 0 0; padding: 20px; color: #6d6d6d; font-size: 12px; line-height: 20px; box-sizing: border-box; background: #f7f7f7; } .xans-member-join .agreeArea.on .contents, .xans-member-join .agreeArea.selected .contents { display: block; } .xans-member-join .agreeArea .contents p { margin: 0 0 20px; } /* /register 가입정보 확인 모달 — 원본 cafe24 는 submit 시 JS 로 toggle. * 우리는 그 JS 를 실행하지 않으므로 기본적으로 fixed 전체화면 오버레이 * (z-index:1000) 가 폼 전체를 가린다. 항상 숨긴다. */ #ec_shop_member_confirm-infolayer { display: none !important; } /* ═══════════════════════════════════════════════════ */ /* /order — 말론 톤 오버라이드 */ /* 공용 .order-* 스타일은 쥬스박스 파란색(#508bed) + */ /* 라운드 4px 박스 기반. 말론은 블랙 라인 + 논라운드 + */ /* Belleza 타이틀 톤을 따라간다. */ /* ═══════════════════════════════════════════════════ */ .order-title-area { border-bottom: 1px solid #000; padding: 24px 0 16px; margin-bottom: 28px; } .order-title-area h1 { font-family: 'Belleza', 'Jost', sans-serif; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: #000; } .order-title-area h1::before { content: "Order "; color: #000; font-weight: 400; margin-right: 6px; } .order-section { border: 1px solid #e5e5e5; border-radius: 0; background: #fff; } .order-section-header { padding: 14px 18px; border-bottom: 1px solid #e5e5e5; } .order-section-header h2 { font-family: 'Jost', 'Pretendard', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #000; } .order-section-count { color: #888; font-weight: 400; } .order-input, .order-select, .order-textarea { border-radius: 0; border: 1px solid #dcdcdc; font-family: 'Pretendard', sans-serif; } .order-input:focus, .order-select:focus, .order-textarea:focus { border-color: #000; outline: none; } .order-btn-zip, .order-btn-sm { border-radius: 0; border-color: #000; color: #000; } .order-btn-zip:hover, .order-btn-sm:hover { background: #000; color: #fff; } .order-same-member input[type="checkbox"], .order-save-address input[type="checkbox"], .order-agree-label input[type="checkbox"], .order-pay-label input[type="radio"] { accent-color: #000; } .order-summary-total strong { color: #000; } .order-discount-price, .order-summary-row .txt-red { color: #b00020; } .order-submit-btn { border-radius: 0; background: #000; font-family: 'Jost', 'Pretendard', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; } .order-submit-btn:hover { background: #222; } /* 사은품 안내 강조색 — 그린 대신 말론 블랙 */ .order-prd-name[style*="color"], .order-prd-price[style*="color"] { color: #000 !important; } .order-section-body p[style*="color: rgb(42, 122, 42)"], .order-section-body p[style*="color:#2a7a2a"] { color: #000 !important; } /* ═══════════════════════════════════════════════════ */ /* /products 서브카테고리 pill 탭 (ec-base-tab.typeMenu) */ /* 라이브 cafe24 optimizer_user.php 번들에서 재현. */ /* 부모 카테고리(cate_no) 진입 시 자식 카테고리를 pill로. */ /* ═══════════════════════════════════════════════════ */ .ec-base-tab { position: relative; } .ec-base-tab.typeMenu { display: flex; max-width: 1230px; margin: 10px auto; padding: 0; } .ec-base-tab.typeMenu ul { display: flex; margin: 0 auto; } .ec-base-tab.typeMenu .menu { flex-wrap: wrap; box-sizing: border-box; } .ec-base-tab.typeMenu li { position: relative; height: auto; margin-bottom: 10px; white-space: nowrap; float: none; list-style: none; } .ec-base-tab.typeMenu li a.button { display: inline-block; font-size: 13px; font-weight: 500; color: #1a1a1a; background-color: #f4f4f4; border: 1px solid #f4f4f4; line-height: 1; padding: 13px 25px; margin: 0 5px; border-radius: 35px; box-sizing: border-box; } .ec-base-tab.typeMenu li:first-child a.button { margin-left: 0; } .ec-base-tab.typeMenu li.selected a.button { color: #1a1a1a; background-color: #fff; border: 1px solid #1a1a1a; } /* 모바일 서브카테고리 탭 클리핑 해제. * master-styles.css 가 .ec-base-tab.typeMenu { height:40px } * + .menu { position:absolute; height:100%; overflow-y:hidden } 로 * 컨테이너를 40px 고정 + 세로 클리핑한다. * 모바일에서 5개 탭(Goods·Key ring·Case·Sticker·Drip tip)이 한 줄에 * 안 들어가 wrap 시 잘리므로, height/position/overflow를 해제해서 * 모든 탭이 노출되도록 한다. */ @media all and (max-width: 1024px) { .ec-base-tab.typeMenu { height: auto !important; flex-wrap: wrap; } .ec-base-tab.typeMenu .menu { position: static !important; height: auto !important; overflow: visible !important; flex-wrap: wrap; width: 100%; } .ec-base-tab.typeMenu li a.button { padding: 7px 11px; } } /* /mypage 헤더 카드 레이아웃 복원. * master-styles.css: `.xans-myshop-asyncbankbook li { display:flex !important; align-items:center; justify-content:center; padding:50px 30px }` * 가 li 를 flex container 로 만들어 thumb/data/title 이 가로 배치됨(사용자 보고: "주입된 display flex"). * skin4 원본은 li 내부가 세로 쌓임(block)이므로 display:block 으로 재설정. */ .xans-myshop-asyncbankbook ul { display: flex; flex-wrap: wrap; justify-content: space-around; } .xans-myshop-asyncbankbook li { display: block !important; /* override master-styles display:flex !important */ text-align: center; } @media all and (max-width: 1024px) { .xans-myshop-asyncbankbook li { padding: 20px 0 !important; } } @media all and (min-width: 1025px) { .xans-myshop-asyncbankbook li { flex: 1; padding: 28px 0 27px !important; } } /* /mypage/profile — 회원탈퇴 모달(#eLeaveLayer)은 cafe24 JS 가 click * 이벤트로 열어주던 레이어인데, 우리는 해당 JS 를 싣지 않아 기본 노출 * 되어 페이지 상단을 덮는다. CSS 로만 닫아두고 "회원탈퇴" 버튼 클릭 * 훅은 별도 구현 필요 시 추가한다. */ #eLeaveLayer.layerLeave { display: none; } /* /mypage 홈 — benefit 섹션 max-width. * master-styles.css 의 `#contents > .section { max-width:1320px; padding:0 40px; margin:0 auto }` * 규칙이 MyPageHomeClient 의

래퍼 때문에 직계자식 셀렉터에 매칭되지 않는다. * 말론 전용으로 여기서 동일 제약을 재현. */ .section.benefit { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* mypage 서브페이지 스캐폴드 — `.myshop-content` 가 flex item, * `.wrap_order` 는 그 안의 콘텐츠 래퍼. 세로 간격 정돈. */ .myshopArea .wrap_order { min-width: 0; } .myshopArea .wrap_order > .titleArea--myshop { margin-top: 0; } .myshopArea .wrap_order > form { margin: 0; } .myshopArea .wrap_order > .xans-myshop-orderhistorytab { margin-bottom: 16px; } .myshopArea .wrap_order > .xans-myshop-orderhistorypaging { margin-top: 24px; } /* mypage 사이드바 레이아웃 — flexbox 방식. * master-styles.css 전역 규칙: .myshopArea { padding:0 0 0 220px !important } * 이 방식은 사이드바를 직접 포지셔닝하는 규칙이 없어서 깨진다. * flexbox 로 재구현: .wrap_order(첫째) + .xans-myshop-main(둘째, order:-1 로 왼쪽) * 데스크탑(≥1025px)에서 사이드바 220px + 콘텐츠 1100px = 총 1320px. * 모바일(≤1024px)에서는 사이드바 숨김. */ @media all and (max-width: 1024px) { .myshopArea .xans-myshop-main { display: none; } } /* mypage 서브페이지 상단 타이틀 영역 여백. * `.titleArea--myshop` / `.titleArea--mysho` (juicebox 크롤 오타) 모두 대응. */ .myshopArea .titleArea--myshop, .myshopArea .titleArea--mysho { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 2px solid #1a1a1a; } .myshopArea .titleArea--myshop h2, .myshopArea .titleArea--mysho h2 { font-size: 20px; font-weight: 500; color: #1a1a1a; } /* wishlist empty-state 와 관심상품 박스 상단 마진 정돈 */ .myshopArea .xans-myshop-wishlist { margin-top: 16px; } /* 위시리스트 버튼 행: float 레이아웃이 모바일에서 gRight를 뷰포트 밖으로 * 밀어냄 → flexbox로 전환해 줄바꿈 없이 양쪽 정렬 */ .Myshop_WishlistButton.ec-base-button { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .Myshop_WishlistButton.ec-base-button::after { display: none; } .Myshop_WishlistButton.ec-base-button .gLeft, .Myshop_WishlistButton.ec-base-button .gRight { float: none; } /* 스캐폴드에 딸려 온 path(breadcrumb) 와 mobileaction 뒤로가기 버튼은 * malone 네이티브 chrome 에서 상단 헤더가 이미 있으므로 숨긴다. */ #contents > .site-wrap > .path, #contents > .site-wrap > .xans-layout-mobileaction, #contents > div > .site-wrap > .path, #contents > div > .site-wrap > .xans-layout-mobileaction { display: none; } /* /order 데스크탑 구매상품 카드 상품명 줄바꿈 수정. * 크롤 master-styles.css @media (min-width: 1025px) { * .ec-base-prdInfo .description { margin: 0 250px 0 0 } * } 은 원본 cafe24 가 .sumPrice 를 absolute 우측 배치하기 위한 공간 * 확보용인데 현재 normal flow 라 불필요. margin-right 만 제거. */ @media (min-width: 1025px) { #mCafe24Order .ec-base-prdInfo .description { margin-right: 0; } } /* /order 페이지 전용 — #contents 배경을 orderform 회색으로 통일. * #titleArea 가 #mCafe24Order 밖으로 이동(page.tsx) 되면서 상단에 * 풀폭 타이틀 띠가 되고, 좌우 마진 영역이 body 흰색으로 노출되는 것을 * 방지한다. :has() 로 /order 에서만 스코프. */ body:has(.malone-order-shell) #contents { background: #f2f2f2; } /* 상품 상세 모바일 썸네일 — master-styles.css의 * @media(max-width:1024px) { .RW { display:none !important } } 이 * imgArea 내 이미지 래퍼까지 숨긴다. detail imgArea 내에서만 해제. */ @media all and (max-width: 1024px) { .xans-product-detail .imgArea .RW { display: block !important; } } /* 게시판 목록(notice/faq/inquiry) 모바일 — 카드형 레이아웃. * 리뷰 게시판은 갤러리 그리드(.boardList)를 쓰므로 영향 없음. */ @media all and (max-width: 767px) { .ec-base-table.typeList thead { display: none; } .ec-base-table.typeList table, .ec-base-table.typeList tbody { display: block; } .ec-base-table.typeList table { border-collapse: collapse; border: 0; width: 100%; } .ec-base-table.typeList tr { display: block; position: relative; padding: 20px 8px 19px; border-bottom: 1px solid #e5e5e5; text-align: left; } .ec-base-table.typeList tr:after { content: ""; display: block; clear: both; } .ec-base-table.typeList td { height: auto; display: block; float: left; padding: 3px 8px; border: 0; text-align: left; color: #6d6d6d; } .ec-base-table.typeList td a { color: #6d6d6d; } .ec-base-table.typeList td.chk { box-sizing: border-box; padding: 0; } .ec-base-table.typeList td.subject { float: none; box-sizing: border-box; } .ec-base-table.typeList td.subject a { color: #000; } /* 날짜: .displaynone !important 제압 */ .ec-base-table.typeList td.board-date { display: block !important; float: left; padding: 3px 8px; color: #6d6d6d; } .ec-base-table.typeList td.board-views { display: block; float: left; padding: 3px 8px; color: #6d6d6d; } } /* #one_best Lilac Edition swiper 네비게이션 버튼 노출 수정. * master-styles.css 는 버튼을 기본 opacity:0/visibility:hidden 으로 두고 * #one_best:hover 시에만 보이게 한다. 그러나 #one_best 에 overflow:hidden * 이 적용되어 있어 position:absolute 버튼이 잘릴 수 있고, 터치 디바이스에서는 * hover 자체가 발동하지 않는다. * 데스크탑(≥1025px)에서는 항상 노출로 전환하고, overflow 클리핑을 해제한다. */ @media (min-width: 1025px) { #one_best { overflow: visible; } #one_best .swiper-button-next, #one_best .swiper-button-prev { opacity: 1 !important; visibility: visible !important; background: transparent; } } /* #one_best 화살표: 원본 cafe24 아이콘 폰트(::after) 복원. * master-styles.css 는 product 페이지 optimizer_user.php 에서 유래한 * .swiper-button-prev:after,.swiper-button-next:after { display: none !important } * 를 포함해서 home #one_best 의 swiper-icons 아이콘 폰트까지 죽인다. * 원본 의도(#one_best .swiper-button-*:after { font-size:20px } + @font-face swiper-icons) * 를 살리기 위해 ::after 를 !important 로 복원한다. * Swiper v12 주입 SVG 는 globals.css 에서 계속 숨김 상태로 두고, * 대신 ::after 의 content: 'prev'/'next' 를 swiper-icons 폰트로 렌더한다. */ #one_best .swiper-button-next::after, #one_best .swiper-button-prev::after { display: block !important; font-family: swiper-icons !important; font-size: 20px !important; color: var(--basic) !important; font-weight: 200; line-height: 1; text-transform: none !important; letter-spacing: 0; font-variant: initial; } #one_best .swiper-button-prev::after { content: 'prev'; } #one_best .swiper-button-next::after { content: 'next'; } /* 상품 목록 모바일 2열 고정. * globals.css의 .prdList.grid4 > li { width: calc(25% - 19px) !important } * 가 master-styles.css 모바일 calc(50% - 2px) 규칙을 덮어쓰기 때문에 * custom-overrides에서 !important로 재지정. */ @media all and (max-width: 767px) { .ec-base-product .prdList.grid4 > li { width: calc(50% - 2px) !important; margin-left: 0 !important; margin-right: 4px; margin-bottom: 20px; } .ec-base-product .prdList.grid4 > li:nth-child(2n) { margin-right: 0; } } /* 게시판 탭 메뉴 노출. * master-styles.css 가 .xans-board-listpackage 내부의 .ec-base-tab.typeMenu 를 * display:none 으로 숨기지만, 우리는 탭을 listpackage 안에서 렌더하므로 강제 표시. */ .xans-board-listpackage .ec-base-tab.typeMenu { display: flex !important; } /* 게시판 탭 pill 하단 짤림 해제. * master-styles.css .gScroll { overflow-y: hidden } 이 pill 버튼 하단(li margin-bottom 포함)을 * 클리핑한다. 게시판 탭 래퍼에 한해 overflow-y: visible 로 재정의. */ .xans-board-listpackage .xans-layout-boardinfo.gScroll { overflow-y: visible !important; height: auto !important; padding-bottom: 12px; } /* 게시판 탭 활성 스타일. * master-styles.css 는 .button.active 를 타겟하지만 cafe24 원본은 .button.this 를 사용. * .button.this 를 .button.active 와 동일하게 처리한다. */ .ec-base-tab.typeMenu .button.this { position: relative; font-weight: bold; color: #000 !important; border: 1px solid #000; border-radius: 30px; } .ec-base-tab.typeMenu .button:not(.this) { border: 1px solid #e5e5e5; border-radius: 30px; } /* 이벤트 게시판 카드 — 2열 그리드, 이미지 전체 표시 + 하단 참여하기 바 */ .board-event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 30px 0; } .board-event-grid .event-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; } .board-event-grid .event-card img { display: block; width: 100%; transition: opacity 0.2s; } .board-event-grid .event-card:hover img { opacity: 0.85; } .board-event-grid .event-card-footer { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 4px; } .board-event-grid .event-card-footer .event-title { color: #222; font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-event-grid .event-card-footer .event-author { color: #888; font-size: 13px; } @media (max-width: 767px) { .board-event-grid { grid-template-columns: 1fr; gap: 14px; padding: 20px 4%; } .board-event-grid .event-card img { max-width: 100%; } } /* Action buttons (cart/buy) — moved out of globals.css so vaporwave keeps * its crawled module-bundle.css rules untouched. */ .xans-product-action .ec-base-button.gColumn { display: flex; justify-content: center; margin: 0 auto; } .xans-product-action .ec-base-button.gColumn [class^='btn'] { flex: 1; display: flex; align-items: center; justify-content: center; height: 4.2rem; line-height: 4.2rem; padding: 0; font-size: 1.2rem; font-weight: 500; border-radius: 0.8rem; box-shadow: 0 3px 13px 0 rgb(169 169 169 / 30%); margin: 0 0 0 9px; } .xans-product-action .ec-base-button.gColumn [class^='btn']:first-child { margin-left: 0; } .xans-product-action .ec-base-button.gColumn [class^='btn'] > img { width: 20px; margin-right: 8px; } .xans-product-action .ec-base-button.gColumn [class^='btnSubmit'] { flex: 1.3; } /* ── Story page (css/module/mall/company.css) ────────────────────────── * 이 모듈 CSS는 master-styles.css 크롤에서 누락됨. * story.html의 에 해당. * ─────────────────────────────────────────────────────────────────── */ .xans-mall-company .info { border-top: 1px solid #000; margin-top: 20px; } .xans-mall-company .map { border-top: 1px solid #000; } #magazine { max-width: 960px; margin: 60px auto; padding: 0 20px; } .mag-header { margin-bottom: 40px; text-align: center; } .mag-header .brand-name { font-size: 44px; font-weight: 400; letter-spacing: 1px; margin-bottom: 6px; font-family: "DM Serif Display", serif; line-height: 1; } .mag-header .brand-tagline { font-size: 15px; font-weight: 300; } .mag-content { column-count: 1; column-gap: 0rem; margin: 40px 0; text-align: center; } .mag-content p { margin-bottom: 1.2rem; font-size: 1rem; } .mag-content strong { font-weight: 400; } .mag-footer { text-align: center; font-size: 0.9rem; color: #999; margin-top: 40px; } @media all and (max-width: 1024px) { #magazine { padding: 0; margin: 30px auto; } .mag-header .brand-name { font-size: 26px; } .mag-header .brand-tagline { font-size: 13px; } .mag-content p { font-size: 13px; margin-bottom: 10px; } .mag-footer { margin-top: 20px; font-size: 11px; } #magazine img { margin: 0 -16px !important; max-width: calc(100% + 32px) !important; width: calc(100% + 32px) !important; } } /* popup blur backdrop */ #one_popup.show { background-color: #fcfcf973; box-shadow: 0 -6px 6px rgba(0, 0, 0, 0.05); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } /* 사이드메뉴 소분류 아코디언 — .has-sub.open 시 ul.sub-cate 표시 */ aside .has-sub .sub-cate { display: none; margin: 0; padding: 0; list-style: none; } aside .has-sub.open .sub-cate { display: block; } aside .has-sub .title .xi-angle-down { cursor: pointer; display: inline-block !important; transition: transform 0.2s ease; } aside .has-sub.open .title .xi-angle-down { transform: rotate(180deg); } aside .sub-cate li { padding: 8px 0 8px 16px; } aside .sub-cate li a { font-size: 13px; color: #888; } /* MaloneSideRight — quick-nav 추가 항목 */ .quick-nav .quick_cart, .quick-nav .quick_auth { margin: 5px 0; } .quick-nav .quick_cart a, .quick-nav .quick_auth a, .quick-nav .quick_auth button { display: inline-block; position: relative; } .quick-nav .pageTop a { display: inline-block; cursor: pointer; } @media all and (max-width:767px) { .quick-nav { top: auto; bottom: 90px; } } /* 사이드 메뉴 열림 시 quick-nav 숨김. * aside(z-index:9)와 .quick-nav(z-index:9)가 같은 레이어라 * DOM 후순위인 .quick-nav 가 aside 위에 렌더되어 하단 버튼을 가린다. * initMenuToggle이 aside 열릴 때 body 에 .mask 클래스를 추가하므로 * 이를 신호로 삼아 quick-nav 를 숨겨 마이페이지/장바구니/공지사항 등 * aside 하단 버튼을 항상 탭할 수 있도록 보장. */ body.mask .quick-nav { display: none; } /* 사이드 메뉴 열림 시 배경 페이지 스크롤 방지. * body.mask 에 overflow:hidden 이 없으면 모바일에서 aside 뒤의 페이지가 * 터치 스크롤되어, 링크 클릭 시 스크롤 오프셋이 보존된 채 새 페이지로 * 진입하는 버그(마이페이지 최상단 미표시)가 발생한다. */ body.mask { overflow: hidden; } /* master-styles.css 의 padding:0 0 30px 제거 */ .ec-base-box.typeThin > .agree p { padding: 0; }