/* 일반 카테고리 상품 목록 */ #list-page .section-top-banner { overflow: hidden; height: 350px; } /* 리스트류 페이지 공통 */ #list-page .list-no-data, #brand-list-page .list-no-data, #plan-list-page .list-no-data, #type-list-page .list-no-data { border-top: 0px !important; } /* 리스트류 페이지 공통 — 정렬 활성 항목 스타일 (동일하게 통합) */ #brand-list-page .product-sorting .menu a.active, #plan-list-page .product-sorting .menu a.active, #type-list-page .product-sorting .menu a.active { font-weight: bold; color: #777; } /* 상품목록 상단 툴바 (Mobile Toolbar) */ .mobile-sort-container { background: #fff; border-bottom: 1px solid #eee; margin-bottom: 20px; padding: 10px 0; } /* 기획전(기본 plan_list / 베스트 plan_best100, 둘 다 #plan-list-page) */ #plan-list-page .mobile-sort-container { border-bottom: 0; } #plan-list-page .mobile-sort-container .controls-row { justify-content: flex-end; } .mobile-sort-container .count-row { padding: 0 15px 10px 15px; /* 좌우 여백 */ text-align: left; } .mobile-sort-container .count-row p { margin: 0; font-size: 0.875rem; color: #666; } .mobile-sort-container .count-row strong { color: #222; font-weight: 700; } .mobile-sort-container .divider-line { height: 1px; background: #f5f5f5; margin: 0; } .mobile-sort-container .controls-row { display: flex; justify-content: space-between; /* 좌우 끝으로 밀기 */ align-items: center; padding: 10px 15px 0 15px; } .mobile-sort-container .controls-row .left-col { display: flex; align-items: center; gap: 10px; } .mobile-sort-container .sorting-dropdown { font-size: 0.9375rem; color: #333; font-weight: 500; } .mobile-sort-container .sorting-dropdown .dropdown.icon { margin-left: 5px; font-size: 0.75rem; color: #999; } .mobile-sort-container .sorting-dropdown .menu { border-color: #eee !important; margin-top: 5px !important; z-index: 999 !important; } .mobile-sort-container .view-type-group { display: flex; gap: 10px; } .mobile-sort-container .type-btn { text-decoration: none; color: #ccc; /* 꺼진 상태 (회색) */ display: flex; align-items: center; } .mobile-sort-container .type-btn i { font-size: 1.5rem; } .mobile-sort-container .type-btn.on { color: #333; /* 켜진 상태 (검정) */ } /* 필터 열기 버튼 스타일 */ .btn-open-filter { background: none; border: none; padding: 5px; cursor: pointer; } .btn-open-filter i { font-size: 1.5rem; color: #333; } /* 브랜드 상품 목록 */ #brand-list-page .brand-logo { width: auto; } /* 기획전 상품 목록 */ #plan-list-page .plan-image { text-align: center; } #plan-list-page .plan-image img { width: 100%; } /* 기획전 섹션(구획) 아코디언 */ #plan-list-page .plan-section { margin-bottom: 24px; } #plan-list-page .plan-section-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 2px solid #333; cursor: pointer; user-select: none; } #plan-list-page .plan-section-title { margin: 0; font-size: 16px; font-weight: 700; color: #222; } #plan-list-page .plan-section-arrow { font-size: 20px; color: #888; transition: transform 0.2s ease; } #plan-list-page .plan-section.collapsed .plan-section-arrow { transform: rotate(-90deg); } #plan-list-page .plan-section-body { padding-top: 14px; } #plan-list-page .plan-section.collapsed .plan-section-body { display: none; } /* 유형별 상품 목록 — 페이지 고유 규칙 없음 (공통 규칙은 상단으로 통합) */ /* 상품검색 목록 */ /* [모바일 검색창] 크기 축소 커스텀 */ .mobile-search-wrapper { padding:18px 0; background:#f8f8f8; border-bottom:1px solid #eee; } /* 1. 폼 레이블 크기 축소 */ .mobile-search-wrapper .ui.form .field > label { font-size: 0.875rem !important; /* 폰트 줄임 */ font-weight:400 !important; margin-bottom: 0.5rem !important; /* 간격 줄임 */ } /* 2. 카테고리 칩 크기 축소 */ .category-chip { padding: 0.5em 0.8em !important; /* 내부 여백 줄임 */ font-size: 0.875rem !important; /* 폰트 줄임 */ font-weight:400 !important; } .category-chip .detail { margin-left: 0.4em !important; font-size: 0.875rem !important; font-weight:400 !important; } /* 3. 입력 필드 및 버튼 크기 축소 (mini 클래스 보정) */ /* 가격 입력 & 재검색 입력 공통 */ .mobile-search-wrapper .ui.mini.input > input, .mobile-search-wrapper .ui.mini.action.input > input, .mobile-search-wrapper .ui.mini.action.input > .button, .mobile-search-wrapper .ui.mini.labeled.input > .label { font-size: 0.875rem !important; /* 폰트 크기 */ padding: 0.6em 0.8em !important; /* 패딩 축소 */ height: auto !important; /* 높이 자동 */ font-weight:400 !important; } /* 재검색 버튼 아이콘 크기 */ .mobile-search-wrapper .ui.mini.action.input > .button > .icon { font-size: 0.9em !important; } /* 가격 입력 '원' 라벨 */ .mobile-search-wrapper .ui.mini.labeled.input > .label { padding-left: 0.6em !important; padding-right: 0.6em !important; min-width: auto !important; /* 최소 너비 해제 */ } /* 세그먼트 내부 여백도 조금 줄임 */ .mobile-search-wrapper .ui.segment { padding: 12px !important; } /* 4. 카테고리 칩 */ .mobile-search-wrapper .category-scroll-container { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .mobile-search-wrapper .category-scroll-container::-webkit-scrollbar { height: 4px; } .mobile-search-wrapper .category-scroll-container::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; } .mobile-search-wrapper .category-chip { flex: 0 0 auto; white-space: nowrap; margin: 0 !important; } /* 5. 가격 구간 — 최소 ~ 최대 한 줄 정렬(Fomantic two-fields 그리드 대체) */ .mobile-search-wrapper .price-range { display: flex; align-items: center; gap: 8px; margin-bottom: 0; } .mobile-search-wrapper .price-range .ui.input { flex: 1 1 0; min-width: 0; } .mobile-search-wrapper .price-range .price-tilde { flex: 0 0 auto; color: #999; } /* 브랜드 검색 목록 */ #search-brand-page .search-box { position: relative; margin: 0 0 20px 0; padding: 15px; font-size: 1rem; border-radius: 0; border: 1px solid #ddd; background: #f9f9f9; box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .0); } #search-brand-page .quick-search { overflow: hidden; } #search-brand-page .quick-search .category { float: left; margin: 0 15px 0 0; padding: 0; border: 1px solid #555; background: #fff; } #search-brand-page .quick-search .category li { float: left; width: 50%; text-align: center; cursor: pointer; } #search-brand-page .quick-search .category li a { display: block; padding: 5px; color: #666; } #search-brand-page .quick-search .category li.active a { color: #fff; background-color: #555; } #search-brand-page .quick-search .buttons { float: left; margin: 0; padding: 0; } #search-brand-page .quick-search .buttons li { float: left; margin-right: 5px; } #search-brand-page .quick-search .buttons li a { display: inline-block; padding: 5px 7px; border: 1px solid #ddd; background: #fff; color: #666; } #search-brand-page .quick-search .buttons li a:hover { border: 1px solid #555; } #search-brand-page .quick-search .buttons li.active a { color: #fff; border: 1px solid #555; background-color: #555; } #search-brand-page .brand-list ul { padding: 0; margin: 0 0 0 -1%; font-size: 0; } #search-brand-page .brand-list li { display: inline-block; padding: 0px !important; margin: 0 0 1% 1%; width: 15.6666%; } #search-brand-page .brand-list li .box { border: 1px solid #ddd; } #search-brand-page .brand-list li:hover .box { border: 1px solid #222; } #search-brand-page .brand-list li a { overflow: hidden; display: block; height: auto; padding: 10px 15px; color: #666; text-align: center; } #search-brand-page .brand-list li img { width: auto; max-width: 128px; height: 40px; } #search-brand-page .brand-list li p { font-size: 1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 상품목록 필터 모달 */ /* 상품목록 필터 모달 레이아웃 (폼 태그 대응) */ /* 1. 가장 바깥 레이어 */ .filter-modal-layer { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 9999; background: #fff; /* 애니메이션 */ transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } .filter-modal-layer.active { transform: translateY(0); } .filter-modal-layer form { display: flex; flex-direction: column; height: 100%; width: 100%; } /* 2. 헤더 (고정) */ .filter-header { flex: 0 0 50px; /* 높이 고정 */ display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eee; position: relative; background: #fff; } .filter-header h2 { font-size: 1rem; font-weight: 700; margin: 0; color: #000; } .btn-close-filter { position: absolute; right: 0; top: 0; bottom: 0; width: 50px; background: none; border: none; font-size: 2rem; color:#999; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* 3. 본문 (스크롤 영역) */ .filter-body { flex: 1; /* 남은 공간 모두 차지 */ overflow-y: auto; /* 내용 넘치면 스크롤 */ min-height: 0; /* Flex 스크롤 보정 */ -webkit-overflow-scrolling: touch; padding-bottom: 20px; } /* 섹션 스타일 (기존과 동일) */ .filter-section { padding: 20px 15px; border-bottom: 1px solid #f5f5f5; } .filter-section.row-type { display: flex; justify-content: space-between; align-items: center; } .filter-section .sec-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 12px; color: #222; } .filter-section.row-type .sec-title { margin-bottom: 0; } /* 태그 및 인풋 스타일 */ .sec-content.tags { display: flex; flex-wrap: wrap; gap: 8px; } .check-tag input { display: none; } .check-tag span { display: inline-block; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.8125rem; color: #666; cursor: pointer; } .check-tag input:checked+span { border-color: #000; background: #fff; color: #000; font-weight: bold; } .price-range { display: flex; align-items: center; gap: 10px; } .input-price { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.875rem; width: 100%; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } .toggle-switch input:checked+.slider { background-color: #000; } .toggle-switch input:checked+.slider:before { transform: translateX(18px); } /* 4. 하단 버튼 (고정) */ .filter-footer { flex: 0 0 auto; /* 내용물 크기만큼 높이 고정 */ background: #fff; border-top: 1px solid #eee; padding: 10px 15px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .filter-footer .btn-group { display: flex; gap: 10px; } .btn-reset { width: 40%; height: 40px; border: 1px solid #ddd; background: #fff; border-radius: 4px; font-size: 0.875rem; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; } .btn-apply { width: 60%; height: 40px; background: var(--point-color) !important; border: 1px solid var(--point-border-color) !important; border-radius: 4px; font-size: 0.875rem; color: var(--text-on-point) !important; font-weight: 700; cursor: pointer; } /* 상품명 검색 & 삭제 버튼 스타일 */ /* 1. 인풋 감싸는 틀 (기준점) */ .input-wrapper { position: relative !important; width: 100%; display: flex; align-items: center; z-index: 1; } /* 2. 인풋창 */ .input-full-text { width: 100%; height: 42px; padding: 0 45px 0 12px !important; /* 오른쪽 버튼 공간 확보 */ border: 1px solid #ddd; border-radius: 4px; font-size: 0.875rem; background: #f9f9f9; color: #333; box-sizing: border-box; transition: all 0.2s; position: relative; z-index: 5; } .input-full-text:focus { background: #fff; border-color: #333; outline: none; } /* 3. 삭제 버튼 (아이콘) */ .btn-input-clear { position: absolute !important; top: 0 !important; right: 0 !important; width: 45px !important; /* 터치 영역 넉넉하게 */ height: 100% !important; background: transparent !important; border: none; padding: 0; cursor: pointer; z-index: 10 !important; /* 인풋창보다 무조건 위에 */ /* 기본 상태: 숨김 */ display: none; /* 정렬 */ align-items: center; justify-content: center; } /* 아이콘 스타일 */ .btn-input-clear i { color: #bbb; /* 연한 회색 */ font-size: 1.25rem; transition: color 0.2s; } .btn-input-clear:hover i { color: #888; /* 호버 시 진해짐 */ } /* 4. 활성화 클래스 (JS가 제어) */ .btn-input-clear.show { display: flex !important; } /* 브랜드 페이지 모바일 오버라이드 */ /* 브랜드 상품목록 헤더 이미지 */ #brand-list-page .brand-header-image { padding: 0 13px; margin-bottom: 8px; } #brand-list-page .brand-header-image img { width: 100%; display: block; border-radius: 8px; } /* 브랜드 검색 */ #search-brand-page { padding-bottom: 30px; } #search-brand-page .search-box { margin: 12px 16px 16px; padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fafafa; } #search-brand-page .brand-search-input .ui.input input { border-radius: 8px; } #search-brand-page .quick-search { overflow: visible; margin-top: 12px; } #search-brand-page .quick-search .category { float: none; display: flex; margin: 0 0 10px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } #search-brand-page .quick-search .category li { float: none; flex: 1; width: auto; } #search-brand-page .quick-search .category li a { padding: 8px; font-size: 0.8125rem; } #search-brand-page .quick-search .category li.active a { background: var(--point-color); color: var(--text-on-white-point); } #search-brand-page .quick-search .buttons { float: none; display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } #search-brand-page .quick-search .buttons::-webkit-scrollbar { display: none; } #search-brand-page .quick-search .buttons li { float: none; flex: 0 0 auto; margin: 0; } #search-brand-page .quick-search .buttons li a { padding: 7px 11px; border-radius: 8px; font-size: 0.8125rem; } #search-brand-page .quick-search .buttons li.active a { background: var(--point-color); border-color: var(--point-color); color: var(--text-on-white-point); } /* 브랜드 그리드 3열 */ #search-brand-page .brand-list ul { margin: 0; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #search-brand-page .brand-list li { display: block; width: auto; margin: 0; padding: 0 !important; } #search-brand-page .brand-list li .box { border: 1px solid #eee; border-radius: 8px; } #search-brand-page .brand-list li a { padding: 12px 8px; } #search-brand-page .brand-list li img { max-width: 100%; height: 32px; object-fit: contain; } #search-brand-page .brand-list li .brand-no-logo { display: flex; align-items: center; justify-content: center; height: 32px; color: #ccc; font-size: 1.5rem; } #search-brand-page .brand-list li p { margin: 6px 0 0; font-size: 0.75rem; } /* 상품 검색 필터(facet) 모바일 바텀시트 */ .product-facet.mobile-facet { } /* 딤 배경 */ .mobile-facet .facet-dimmer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 10000; } .mobile-facet.sheet-open .facet-dimmer { opacity: 1; visibility: visible; } /* 시트 본체(하단 슬라이드업) */ .mobile-facet .facet-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001; max-height: 85vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .28s ease; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); } .mobile-facet.sheet-open .facet-sheet { transform: translateY(0); } /* 헤더 */ .mobile-facet .facet-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #eee; flex-shrink: 0; } .mobile-facet .facet-sheet-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: #222; } /* 닫기 버튼을 타이틀 오른쪽 flex 아이템으로 */ .mobile-facet .facet-sheet-head .btn-close-filter { position: static; right: auto; top: auto; bottom: auto; width: auto; flex: 0 0 auto; padding: 0; margin: 0; background: none; border: 0; font-size: 2rem; color: #999; cursor: pointer; line-height: 1; } /* 스크롤 바디 */ .mobile-facet .facet-sheet-body { padding: 4px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 빠른선택 플래그 */ .mobile-facet .facet-flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; } .mobile-facet .facet-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 13px; border: 1px solid #ddd; border-radius: 20px; font-size: 0.8125rem; color: #555; background: #fff; } .mobile-facet .facet-btn i { font-size: 0.95rem; } .mobile-facet .facet-btn.active { border-color: #333; color: #fff; background: #333; } /* 그룹 */ .mobile-facet .facet-group { padding: 16px 0; border-top: 1px solid #f2f2f2; } .mobile-facet .facet-group-title { margin-bottom: 10px; font-size: 0.875rem; font-weight: 700; color: #333; } .mobile-facet .facet-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mobile-facet .facet-opt { padding: 5px 13px; border: 1px solid #ddd; border-radius: 5px; font-size: 0.8125rem; color: #555; background: #fff; } .mobile-facet .facet-opt.active { border-color: #999; color: #fff; font-weight: 600; background: #999; } /* 직접입력 */ .mobile-facet .facet-direct { display: flex; align-items: center; gap: 6px; margin-top: 12px; } .mobile-facet .facet-direct .facet-direct-input { flex: 1; min-width: 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 0.875rem; text-align: center; } .mobile-facet .facet-direct .unit { flex-shrink: 0; color: #888; font-size: 0.8125rem; } .mobile-facet .facet-direct .tilde { flex-shrink: 0; color: #aaa; } .mobile-facet .facet-direct .facet-direct-btn { flex-shrink: 0; padding: 7px 14px 6px; border-radius: 5px; background: #fff; border:1px solid #767676; color: #767676; font-size: 0.8125rem; } /* 결과 내 검색 */ .mobile-facet .facet-subsearch { display: flex; align-items: center; gap: 6px; } .mobile-facet .facet-subsearch-input { flex: 1; padding: 11px 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 0.875rem; } .mobile-facet .facet-subsearch-btn { flex-shrink: 0; width: 46px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #333; color: #fff; font-size: 1.15rem; } /* 푸터 */ .mobile-facet .facet-sheet-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #eee; flex-shrink: 0; } .mobile-facet .facet-reset { display: inline-flex; align-items: center; gap: 4px; padding: 13px 18px; border: 1px solid #ddd; border-radius: 6px; color: #555; font-size: 0.875rem; } /* 적용버튼(구 .facet-done 닫기 → .facet-apply 적용): 선택 누적 후 검색 확정 */ .mobile-facet .facet-apply { flex: 1; padding: 16px 0; border: 0; border-radius: 6px; background: #333; color: #fff; font-size: 0.9375rem; font-weight: 700; } /* 결과 내 검색 툴바 (모바일: 풀폭, 테마/가격/브랜드/당일발송 목록 공용) */ .delivery-result-search {display:flex; align-items:center; gap:8px; padding:10px 12px 0;} .delivery-result-search .drs-box {display:flex; flex:1 1 auto; align-items:center; height:40px; padding:0 4px 0 12px; background:#fff; border:1px solid #999; border-radius:6px;} .delivery-result-search .drs-input {flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-size:0.9375rem;} .delivery-result-search .drs-btn {flex:0 0 auto; color:#555; text-decoration:none; padding:6px 8px; font-size:1.15rem;} .delivery-result-search .drs-reset {flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; color:#777; font-size:0.875rem; text-decoration:none; white-space:nowrap;} /* 가격대 서브메뉴(breadcrumb 드롭다운) */ #search-price-list-page .breadcrumb-menu-grid { grid-template-columns: 1fr 1fr !important; } #search-price-list-page .breadcrumb-menu-grid .breadcrumb-item { min-width: 0; word-break: keep-all; line-height: 1.35; } /* 기획전 베스트100 스킨 전용 스타일 */ /* 각 상품 목록(ul.grid) 단위로 순번 카운터 리셋 → li.item 마다 1씩 증가 */ .plan-best100 .product.list ul.grid { counter-reset: best-rank; } .plan-best100 .product.list ul.grid > li.item { counter-increment: best-rank; } /* 베스트100: 최대 100개까지만 노출(101번째 상품부터 숨김) */ .plan-best100 .product.list ul.grid > li.item:nth-child(n+101) { display: none; } /* 순위 뱃지 — 썸네일 좌상단 오버레이. 숫자는 카운터가 자동 출력. */ .plan-best100 .product.list ul.grid > li.item .thumbnail::before { content: counter(best-rank); position: absolute; top: 8px; left: 8px; z-index: 6; min-width: 28px; height: 28px; padding: 0 7px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; line-height: 1; color: #fff; background: #9ca3af; /* 기본(6위 이하) 회색 */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); pointer-events: none; } /* 1~5위 = 동일한 빨간 뱃지(금·은·동은 식별이 어려워 통일). 6위+ 는 기본 회색 유지. */ .plan-best100 .product.list ul.grid > li.item:nth-child(-n+5) .thumbnail::before { background: linear-gradient(135deg, #ff5a5a, #e03131); } /* 기획전은 개수/필터/정렬 행 없이 디스플레이 토글만 → 우측 정렬. */ .plan-best100 .mobile-sort-container .controls-row { justify-content: flex-end; }