@charset "utf-8"; /* html 16px 기준 rem 환산 — 14px=0.875rem, 16px=1rem, 24px=1.5rem */ /* 템플릿 포인트 컬러 설정 */ :root { --point-color: #32c0b6; /* 메인 강조 색상 */ --point-hover-color: #119a90; /* 메인 강조 호버 색상 */ --point-border-color: #119a90; --point-color-light: #8fd2cd; /* 배경용 연한 색상 */ --point-text-color: #32c0b6; /* 포인트 컬러 글자색 */ --text-on-point: #ffffff; /* 포인트 컬러 글자색 */ --text-on-white-point: #ffffff; /* 포인트 컬러 위의 흰색 글자색 */ --gradient-color-bar: linear-gradient(to right, var(--point-color), var(--point-color), #b142d6, #f12d85) 1; /* 포인트 그라데이션 색상 */ --text-total-price-color: #dd0d00; /* 결제금액 색상 */ --text-discount-color: #247de9; /* 할인금액 색상 */ --text-link-color: #32c0b6; /* 텍스트링크 색상 */ --text-coupon-color: #dd0d00; /* 텍스트쿠폰 색상 */ --point-special-sale-color: #e43328; /* 스페셜세일 뱃지 컬러 */ --product-thumb-radius: 5px; /* 상품이미지 라운드 처리 */ } /* 초기화 */ a { color: #666; text-decoration: none; } a:hover { color: #333; text-decoration: none; } ul {} ul li {list-style:none;} legend {display:none;} fieldset {border:0; margin:0; padding:0;} button[type="submit"] { color: inherit; font: inherit; margin: 0; border:0; background:none; -webkit-appearance: button; } /* custom */ .hide {display:none !important;} .transition { -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; } /* 테마 강조 버튼은 .ui.primary.button 으로 통일 */ .ui.toggle.checkbox input:checked~label::before { background-color: var(--point-color); } .ui.toggle.checkbox input:focus:checked~label::before { background-color: var(--point-color); } .ui.form .field>label {font-size:0.875rem; font-weight:500;} /* 소셜버튼 */ .ui.facebook.color.button {background:#3b5998; color:#fff; font-size:1rem;} .ui.twitter.color.button {background:#00aced; color:#fff; font-size:1rem;} .ui.google.color.button {background:#c3272b; color:#fff; font-size:1rem;} /* 모달창 */ .ui.dimmer {background-color:rgba(0,0,0,.6);} .ui.modal {border-radius:;} .ui.modal > .header {background:#fff; color:#333; border-bottom:0; padding-bottom:3px; border-radius:.28571429rem .28571429rem 0 0;} .ui.modal > .header .title {font-weight:700;} /* 닫기 X 는 배경이미지로 그린다 */ .ui.modal > .close {width:24px; height:24px; top:1.0535rem; right:1rem; color:rgba(255,255,255,1); font-size:0 !important; background:url('/theme/site/giftwiki/giftwiki/base/assets/css/../images/common_icon_big_close.png') no-repeat center center;} .ui.modal>.icon:first-child+*, .ui.modal>:first-child:not(.icon) {} .ui.modal>:last-child {} .ui.modal .actions>.button:not(.fluid) { margin-left: .25em;} /* 커스텀 모달창 */ .ui.modal.custom > .content { margin: 10px 20px 0px; padding: 20px; width: auto; background: #f8f8f8; } .ui.modal.custom > .actions { padding: 20px 0; text-align: center; background: none; border-top: 0px;} /* 알림창 */ .ui.alerts {position:fixed; z-index:2060; padding:22px; max-width:500px; top:20px; right:20px; cursor:default;} .ui.alerts .progress {position:absolute; left:0; bottom:0; width:100%;} .ui.alerts .progress .bar {min-width:1px;} @media (min-width:500px) { .ui.alerts {max-width:90%;} } /* 수량버튼 */ .ui.quantity { } .ui.quantity button {cursor:pointer;} .ui.quantity button:active {background:#eee;} .ui.quantity button .icon {margin: 0 -.11428571em 0 -.11428571em !important;} .ui.quantity input {font-weight:bold; text-align:center; border-top-left-radius:0; border-bottom-left-radius:0; border-left:0; border-right:0;} /* 파일 업로드 */ .ui.file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .ui.file .text { width: auto !important; min-width: 250px; margin-right: 3px !important; } .ui.divider:not(.vertical):not(.horizontal) { border-top: 1px solid rgba(34,36,38,.1); border-bottom: 1px solid rgba(255,255,255,.1); } /* divder css 오류수정 */ .ui.horizontal.divider:before, .ui.horizontal.divider:after {top: 0;} /***** semantic ui custom *****/ /* Pagination 페이징버튼 */ .ui.pagination.menu { margin: 0em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; border:0; box-shadow:none; background:transparent; /* 페이지 버튼이 많으면 오른쪽으로 넘치지 않고 아래 줄로 떨어지게 한다(상품문의·리뷰 페이징) */ max-width:100%; flex-wrap:wrap; justify-content:center; row-gap:4px; } .ui.pagination.menu .item {padding:.37857143em 1.00285714em .35857143em;} .ui.pagination.menu .item:last-child {border-radius:0;} .ui.pagination.menu .item:first-child {border-radius:0;} .ui.pagination.menu .item:last-child:before { display: none; } .ui.pagination.menu .item { min-width: 20px; max-width:80px; height:auto; margin:0 2px; padding: .56857143em 0.80285714em; font-size:0.875rem; line-height:1; color:#777; text-align: center; border:1px solid #eee; background:#fff; } .ui.pagination.menu .item:before {width:0; background:none;} .ui.pagination.menu .item:hover {color:#222; border-color:#ccc; background:#fff;} .ui.pagination.menu .icon.item i.icon { vertical-align: top; font-size:0.6875rem; } /* Active */ .ui.pagination.menu .active.item { border: 1px solid #222; padding-top:.56857143em; background-color:#fff; color:#222; -webkit-box-shadow: none; box-shadow: none; } .ui.statistic>.label, .ui.statistics .statistic>.label { font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; word-break:break-all; } .ui.dropdown .menu { margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; border-color:rgba(34, 36, 38, 0.25); } .ui.selection.dropdown { /* border-color:rgba(34, 36, 38, 0.35); */ } .ui.selection.dropdown .menu { } /* Active */ .ui.selection.active.dropdown { border-color: #333; } .ui.selection.active.dropdown .menu { border-color: #333; } /* Focus */ .ui.selection.dropdown:hover, .ui.selection.dropdown:focus { border-color: #333 !important; } .ui.selection.dropdown:focus .menu { border-color: #333 !important; } /* Focus */ .ui.selection.dropdown:focus { border-color: #333; } .ui.selection.dropdown:focus .menu { border-color: #333; } /* Visible */ .ui.selection.visible.dropdown > .text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover { border-color: #333; } .ui.selection.active.dropdown:hover .menu { border-color: #333; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid #ddd; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0em 0em 0em 0em transparent inset; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; margin: 0em; outline: none; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); line-height: 1.21428571em; padding: 0.67857143em 1em; font-size: 1em; background: #FFFFFF; border: 1px solid #ddd; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0em 0em 0em 0em transparent inset; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; } /* Focus */ .ui.form input:not([type]):focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus { color: rgba(0, 0, 0, 0.95); border:1px solid #333 !important; border-radius: 0.28571429rem; background: #FFFFFF; -webkit-box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; } /* 예외: Fomantic 검색 드롭다운 */ .ui.form .ui.search.dropdown > input.search:focus { border: none !important; background: none transparent !important; box-shadow: none !important; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #333; border-radius: 0.28571429rem; background: #FFFFFF; -webkit-box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; box-shadow: 0px 0em 0em 0em rgba(0, 0, 0, 0.35) inset; -webkit-appearance: none; } .ui.input>input {font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; word-break:break-all;} .ui.card>.content>.header, .ui.cards>.card>.content>.header {font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; word-break:break-all;} .ui.input.focus > input, .ui.input > input:focus { border-color: #aaa; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: none; box-shadow: none; } .ui.input.focus > input::-webkit-input-placeholder, .ui.input > input:focus::-webkit-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus > input:-ms-input-placeholder, .ui.input > input:focus:-ms-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.action.input:not([class*="left action"]) > input:focus { border-right-color: #333 !important; } .ui.form textarea { margin: 0em; -webkit-appearance: none; tap-highlight-color: rgba(255, 255, 255, 0); padding: 0.78571429em 1em; background: #FFFFFF; border: 1px solid #ddd; outline: none; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: 0em 0em 0em 0em transparent inset; box-shadow: 0em 0em 0em 0em transparent inset; -webkit-transition: color 0.1s ease, border-color 0.1s ease; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; line-height: 1.2857; resize: vertical; } .ui.form textarea:focus { color: rgba(0, 0, 0, 0.95); border-color: #333; background: #FFFFFF; -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; -webkit-appearance: none; } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { font-size:0.875rem; } /* Fomantic 기본 회색/700 을 밝은톤+#ddd 보더+weight500 으로 오버라이드 */ .ui.button { border-radius: 4px; background-color: #f9f9f9; color: #222; font-weight: 500; /* semantic 기본 700 → 500 (어색함 제거, 폰트패밀리는 아래 Pretendard 규칙 유지) */ } .ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color), .ui.button:not(.basic):not(.inverted):not(.primary):not(.secondary):not(.positive):not(.negative):not(.info):not(.warning):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.color):focus { border: 1px solid #ddd; } .ui.buttons .button { border: 0 !important; } .ui.basic.buttons:not(.inverted) .button:not(.basic) { border-right: 1px solid rgba(34, 36, 38, 0.15) !important; } /* focus */ .ui.button:focus { background-color: #f9f9f9; color: #222; } .ui.button:hover, .ui.button:active { /* active=누르는 순간 피드백도 hover 와 동일 다크 반전 */ border-color: transparent; /* hover 시 테두리 제거(1px 유지+transparent 라 크기 흔들림 없음) */ background-color: #222; color: #fff; } .ui.basic.button, .ui.basic.buttons .button {border-radius:;} .ui.label {border-radius:4px;} /* 버튼들을 세로로 쌓고 '가장 넓은 버튼' 폭에 맞춰 동일 폭 */ .design-manage-actions { display: inline-grid; gap: 5px; justify-items: stretch; } .design-manage-actions > .ui.button { margin: 0; } /* 그룹 아닌 낱개 버튼의 기본 우측여백 제거(gap 으로 대체) */ /* 굿즈 시안 목록 고유번호 뱃지 (PC) — 관리자 목록의 고유번호 뱃지와 동일 개념, 프론트 톤으로 연회색 */ #goods-design-list-page .design-no { display: inline-block; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; color: #555; background: #f0f0f0; border-radius: 4px; } /* 버튼컬러 custom */ /* naver */ .ui.naver.button { background-color: #26c826; color: #FFFFFF; text-shadow: none; background-image: none; -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.naver.button:hover { background-color: #26c826; color: #FFFFFF; text-shadow: none; } .ui.naver.button:active { background-color: #2d4373; color: #FFFFFF; text-shadow: none; } /* kakao */ .ui.kakao.button { background-color: #fcce00; color: #1d1d1d; text-shadow: none; background-image: none; -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; } .ui.kakao.button:hover { background-color: #fcce00; color: #1d1d1d; text-shadow: none; } .ui.kakao.button:active { background-color: #fcce00; color: #1d1d1d; text-shadow: none; } .ui.basic.button, .ui.basic.buttons .button {background:#fff;} /* Column Width */ .ui.table th.one-half.wide, .ui.table td.one-half.wide { width: 10%; } /* .ui.table */ .ui.table {font-size:0.875rem;} /* custom */ .right.floated {float:right;} .left.floated {float:left;} .m-0 {margin:0 !important;} .mt-5 {margin-top:5px !important;} .mt-10 {margin-top:10px !important;} .mt-20 {margin-top:20px !important;} .mt-30 {margin-top:30px !important;} .mt-100 {margin-top:100px !important;} .ml-5 {margin-left:5px !important;} .ml-10 {margin-left:10px !important;} .ml-20 {margin-left:20px !important;} .ml-30 {margin-left:30px !important;} .ml-40 {margin-left:40px !important;} .ml-50 {margin-left:50px !important;} .mr-5 {margin-right:5px !important;} .mr-10 {margin-right:10px !important;} .mr-20 {margin-right:20px !important;} .mr-30 {margin-right:30px !important;} .mx-5 {margin-left:5px !important; margin-right:5px !important;} .mx-10 {margin-left:10px !important; margin-right:10px !important;} .mx-20 {margin-left:20px !important; margin-right:20px !important;} .mx-30 {margin-left:30px !important; margin-right:30px !important;} .p-0 {padding:0px !important;} .mb-0 {margin-bottom:0px !important;} .mb-5 {margin-bottom:5px !important;} .mb-10 {margin-bottom:10px !important;} .mb-20 {margin-bottom:20px !important;} .py-5 {padding-left:5px !important; padding-right:5px !important;} .py-10 {padding-left:10px !important; padding-right:10px !important;} .py-20 {padding-left:20px !important; padding-right:20px !important;} .py-30 {padding-left:30px !important; padding-right:30px !important;} .pb-5 {padding-bottom:5px !important;} .pb-10 {padding-bottom:10px !important;} /* img.full-image */ img.full-image { display:block; position:relative; left: 50%; height:100%; -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); } /* 로딩이미지 */ #loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; text-align: center; } #loading img {position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -24px; width: 48px; height: 10px; } /* 로딩 일반 메세지 */ #loading-message {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; } #loading-message .message {position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -215px; width: 430px; height: 85px; } #loading-message .message .content {padding:10px 0;} /* 로딩 결제 메세지 */ #loading-payment-message {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #loading-payment-message .message {position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -215px; width: 430px; height: 85px; } #loading-payment-message .message .content {padding:10px 0;} /* html 로드후 보여져야 할 영역 */ .after-show { display: none;} /**************** 상품목록관련 ****************/ /* product-sorting */ .product-sorting {display:flex; align-items:center; margin:0 0 20px; padding:13px 10px; font-size:0.875rem; font-weight:400; border-top:1px solid #222; border-bottom:1px solid #ddd; text-align:left;} .product-sorting:after {content:''; display:block; clear:both;} .product-sorting p.count {flex:1 1 15%; margin:0; padding:0 0 0;} .product-sorting p.count strong {color:#000;} .product-sorting ul.menu {display:inline-block; margin:0; padding:0 10px 0 0;} .product-sorting ul.menu li {display:inline-block; margin:0; padding:0; letter-spacing:-0.02rem;} .product-sorting ul.menu li:before {content:''; display:inline-block; position:relative; top:2px; width:1px; height:13px; margin:0 11px 0 10px; background:#ddd;} .product-sorting ul.menu li:first-child:before {width:0; margin:0;} .product-sorting ul.menu li a {color:#444;} .product-sorting ul.menu li a:hover, .product-sorting ul.menu li a.on {color:#000;} .product-sorting .ui.compact.selection.dropdown {position:relative; width:130px; min-height: 1.71428571em; margin-left:10px; padding:7px 0 7px 10px; font-size: 0.875rem; border-radius:0 !imporant;} /* 비한국어: 라벨 폭을 내용에 맞춘다 */ html:not([lang="ko"]) .product-sorting .ui.compact.selection.dropdown {display:flex; align-items:center; gap:6px; width:auto; min-width:0; padding:7px 10px;} html:not([lang="ko"]) .product-sorting .ui.compact.selection.dropdown > .text {white-space:nowrap;} html:not([lang="ko"]) .product-sorting .ui.compact.selection.dropdown > i {position:static !important; right:auto !important; margin:0 !important; padding:0 !important;} .product-sorting .ui.upward.selection.dropdown.visible, .product-sorting .ui.active.upward.selection.dropdown {border-radius:0 !important;} .product-sorting .ui.compact.selection.dropdown i {right:20px !important; padding: 7px 0 7px 10px;} .product-sorting .ui.compact.selection.dropdown .item {font-size:0.875rem; padding:5px 10px 5px; line-height:2.1;} /* flex 행이 좁아져도(영문 등 긴 라벨) 보기방식 아이콘 2개가 두 줄로 접히지 않게 축소 금지 */ .product-sorting .list-type {display:inline-block; flex:0 0 auto; padding:0 0 0 20px;} .product-sorting .list-type a {display:inline-block; width:20px; margin:0 0 0 5px; line-height:0; font-size:0; vertical-align:middle;} .product-sorting .list-type a.type.thumb {margin-top:-1px;} .product-sorting .list-type a span {display:inline-block; width:8px; height:8px; margin:1px; background:#ddd;} .product-sorting .list-type a.type.webzine span {width:20px; height:3px; margin:1px 0 3px;} .product-sorting .list-type a:hover span, .product-sorting .list-type a.on span {background:#777;} /* product list thumb */ .product.list.thumb {margin-bottom:40px;} .product.list.thumb ul.grid {margin:0 0 0 -2rem; padding:0; font-size:0;} .product.list.thumb ul.grid li.item {position:relative; display:inline-block; width:25%; margin:20px 0; padding-left:2rem; font-size:0.9375rem; vertical-align:top; box-sizing:border-box;} /* product list thumb grid */ .product.list.thumb.one ul.grid {margin:0;} .product.list.thumb.one ul.grid > li.item {width:100%; padding-left:0;} .product.list.thumb.two ul.grid > li.item {width:50%;} .product.list.thumb.three ul.grid > li.item {width:33.3%;} .product.list.thumb.four ul.grid > li.item {width:25%;} .product.list.thumb.five ul.grid > li.item {width:20%;} .product.list.thumb.six ul.grid > li.item {width:16.666%;} .product.list.thumb.seven ul.grid > li.item {width:14.28%;} .product.list.thumb.eight ul.grid > li.item {width:12.5%;} /* product list thumb thumbnail */ /* 썸네일 1:1 높이 예약 + 로딩 placeholder */ .product.list.thumb ul.grid li.item .thumbnail {position:relative; width:100%; padding-top:100%; background:#fff;} .product.list.thumb ul.grid li.item .thumbnail a.link {display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; margin:0; padding:0; font-size:0; line-height:0; border-radius:var(--product-thumb-radius, 0);} .product.list.thumb ul.grid li.item .thumbnail a.link img.thumb {width:100% !important; height:100% !important; object-fit:contain; object-position:center;} /* 이미지 없음/로드실패 대체 박스 (onerror 시 노출) */ .product.list.thumb ul.grid li.item .thumbnail .no-image {position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border:1px solid #eee;} .product.list.thumb ul.grid li.item .thumbnail .no-image i {font-size:2rem; color:#d1d1d1;} /* product list thumb thumbnail btns */ .product.list.thumb ul.grid li.item .thumbnail .btns { position:absolute; right: 0; bottom:-30px; z-index:3; padding:0; font-size:0; line-height:0; border-radius:0; } .product.list.thumb ul.grid li.item:hover .thumbnail .btns {} .product.list.thumb ul.grid li.item .thumbnail .btns a {position:relative; display:inline-block; margin:0; padding:0; line-height:20px; font-size:1.1rem; text-align:center;} .product.list.thumb ul.grid li.item .thumbnail .btns a.zoom {display:none;} .product.list.thumb ul.grid li.item .thumbnail .btns a:last-child {border-right:0;} .product.list.thumb ul.grid li.item .thumbnail .btns a:hover {} .product.list.thumb ul.grid li.item .thumbnail .btns a i.ri-heart-line {color:#999;} .product.list.thumb ul.grid li.item .thumbnail .btns a i.ri-heart-fill {color:var(--point-color);} /* product list thumb description */ .product.list.thumb ul.grid li.item .description {position:relative; margin:12px 0 0 0;} .product.list.thumb ul.grid li.item .description .info {} .product.list.thumb ul.grid li.item .description .code { position:; bottom:-6px; right:0; width:auto; display:block; margin:0 0 5px; padding:0; font-size:0.8125rem; line-height:1rem; letter-spacing:0.01em; color:#888; text-align:left; background:rgba(0,0,0,0.0); } .product.list.thumb ul.grid li.item .description .code:before { content:''; position:absolute; top:-3px; right:0; display:none; width: 0; height: 0; /* 삼각형의 크기를 조절하려면 border의 픽셀(px) 값을 수정하세요 */ border-top: 3px solid transparent; /* 위쪽 변 (투명) */ border-left: 3px solid #000; /* 오른쪽 변 (색상) */ border-bottom: 0 solid transparent; /* 아래쪽 변 */ border-right: 0 solid transparent; /* 왼쪽 변 */ } .product.list.thumb ul.grid li.item .description a.name { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; white-space:normal; margin:0 0 0; padding:0; font-size:0.875rem; line-height:1.3rem; color:#222; font-weight:normal; } /* 공급처명(관리자 전용) */ .product.list ul.grid li.item .description a.seller-name { display:block; overflow:hidden; max-width:100%; margin:0 0 3px; font-size:0.75rem; line-height:1.2; font-weight:600; color:#e8590c; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; } .product.list ul.grid li.item .description a.seller-name:hover {color:#d9480f; text-decoration:underline;} .product.list ul.grid li.item .description a.seller-name i {margin-right:3px; font-size:0.8125rem; vertical-align:-1px;} .product.list.thumb ul.grid li.item .description p.summary { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.3 * 3); white-space:normal; margin:5px 0 5px; padding:0; font-size: 0.8125rem; line-height:1.3; color:#777; font-weight:400; } .product.list.thumb ul.grid li.item .description ul {position:relative; margin:0; padding:0; font-size:0;} .product.list.thumb ul.grid li.item .description ul:before {content:''; display:block; margin:5px 0; border-bottom:0px solid #ddd;} .product.list.thumb ul.grid li.item .description ul li {display:block; margin:0 0 5px; padding:0; font-size:1rem;} .product.list.thumb ul.grid li.item .description ul li.price {display:inline-block; margin-bottom:0; font-size: 0.875rem; color:#111;} .product.list.thumb ul.grid li.item .description ul li.price strong {font-weight:600;} .product.list.thumb ul.grid li.item .description ul li.price .money {font-size:0.9375rem; font-weight:600; color:#000; font-family:;} .product.list.thumb ul.grid li.item .description ul li.price .suffix {font-size:0.9375rem; font-weight:600; color:#000; } .product.list.thumb ul.grid li.item .box > .btns {display:none;} /* product thumb card */ .product.list.thumb.card ul.grid li.item .box {padding:10px; border:1px solid #ddd; background:#fff;} .product.list.thumb.card ul.grid li.item .description .icons {padding-top:10px; border-top:1px solid #e8e8e8;} /* product thumb zoom */ /* ★translateZ(0) 금지 — 평상시 레이어 승격을 하면 안 된다. * 썸네일 하나하나가 GPU 합성 레이어가 되는데, 메인은 한 화면에 상품이 150개 넘게 깔린다. * 폴더블을 펼치고 'PC 화면으로 보기' 를 하면 레이아웃 뷰포트가 커져 동시 표시 카드가 더 늘고, * GPU 메모리 한도를 넘는 순간 일부 레이어가 래스터되지 않아 그 칸만 '순백'으로 남는다. * (이미지는 이미 로드돼 있어 그 카드를 터치/호버해 리페인트되면 그제서야 보인다 — 실제 제보 증상) * 호버 확대는 transform 전이 중에 브라우저가 알아서 레이어를 올리므로 상시 승격이 필요없다. * transition 도 all → transform 로 좁힌다(all 은 전 속성을 감시해 리페인트 비용을 키운다). */ .product.list.thumb.zoom ul.grid li.item .thumbnail img.thumb { -webkit-transition:-webkit-transform 0.4s ease; -moz-transition:-moz-transform 0.4s ease; -o-transition:-o-transform 0.4s ease; transition:transform 0.4s ease; image-rendering: -webkit-optimize-contrast; } @media (hover: hover) and (pointer: fine) { .product.list.thumb.zoom ul.grid li.item:hover .thumbnail img.thumb { transform: scale(1.10); -webkit-transform: scale(1.10); -moz-transform: scale(1.10); -ms-transform:scale(1.10); } } /* product thumb bg */ .product.list.thumb.bg ul.grid li.item .thumbnail .thumb.layer.bg { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; font-size:0; line-height:0; overflow:hidden; background:rgba(255,255,255,0.0); cursor:pointer; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; } .product.list.thumb.bg ul.grid li.item:hover .thumbnail .thumb.layer.bg {background:rgba(255,255,255,0.6);} /* product thumb layer */ .product.list.thumb.layer ul.grid li.item .description {display:none;} .product.list.thumb.layer ul.grid li.item .thumbnail .thumb.layer.bg { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; font-size:0; line-height:0; overflow:hidden; background:rgba(0,0,0,0.0); cursor:pointer; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; } .product.list.thumb.layer ul.grid li.item:hover .thumbnail .thumb.layer.bg {background:rgba(0,0,0,0.4);} .product.list.thumb.layer ul.grid li.item .thumbnail .thumb.layer.area { position:absolute; top:0; left:0; z-index:2; display:table; width:100%; height:100%; cursor:pointer; opacity:0; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; } .product.list.thumb.layer ul.grid li.item:hover .thumbnail .thumb.layer.area {opacity:1.0;} .product.list.thumb.layer ul.grid li.item .thumb.layer.area .description {display:table-cell; padding:20px; vertical-align:middle;} .product.list.thumb.layer ul.grid li.item .thumb.layer.area .description * {color:#fff; text-align:center;} .product.list.thumb.layer ul.grid li.item .thumbnail .btns {display:none;} /* product list webzine */ .product.list.webzine {margin-bottom:40px;} .product.list.webzine ul.grid {margin:0 0 0 0; padding:0; font-size:0;} .product.list.webzine ul.grid li.item {position:relative; display:block; width:100%; margin:0; padding:0; font-size:1rem; vertical-align:top; border-bottom:1px solid #e7e7e7;} .product.list.webzine ul.grid li.item:first-child {} .product.list.webzine ul.grid li.item .box {position:relative; display:table; width:100%; padding:20px 20px 20px 20px;} .product.list.webzine ul.grid li.item .box:after {content:''; display:block; clear:both;} /* product list webzine thumbnail */ .product.list.webzine ul.grid li.item .thumbnail {position:relative; display:table-cell; width:150px; height:150px; padding-right:40px; vertical-align:middle;} .product.list.webzine ul.grid li.item .thumbnail a.link {display:block; overflow:hidden; margin:0; padding:0; font-size:0; line-height:0;} .product.list.webzine ul.grid li.item .thumbnail a.link img.thumb {width:150px !important; height:auto !important;} /* product list webzine thumbnail btns */ .product.list.webzine ul.grid li.item .thumbnail .btns {display:none !important;} /* product list webzine description */ .product.list.webzine ul.grid li.item .description {display:table-cell; width:100%; margin:0; padding-right:40px; vertical-align:middle;} .product.list.webzine ul.grid li.item .description .info {display:table-cell; width:100%; padding-right:40px;} .product.list.webzine ul.grid li.item .description .code {display:inline-block; margin:0 0 15px; padding:3px 10px; border-radius:3px; font-size: 0.8125rem; line-height:1rem; letter-spacing:0.05rem; color:#fff; background:rgba(0,0,0,0.5);} .product.list.webzine ul.grid li.item .description a.name { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.4 * 2); white-space:normal; margin:0 0 0; padding:0; font-size:1rem; line-height:1.4; color:#111; font-weight:normal; } .product.list.webzine ul.grid li.item .description a.name:hover {text-decoration:underline;} .product.list.webzine ul.grid li.item .description p.summary { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.52 * 2); white-space:normal; margin:5px 0 0; padding:0; font-size:1rem; line-height:1.4rem; color:#777; font-weight:300; } .product.list.webzine ul.grid li.item .description ul {position:relative; display:table-cell; margin:0; padding:0; font-size:0; vertical-align:middle; text-align:right;} .product.list.webzine ul.grid li.item .description ul:before {content:''; display:block; margin:5px 0; border-bottom:0px solid #ddd; width:150px;} .product.list.webzine ul.grid li.item .description ul li {display:block; margin:0 0 5px; padding:0; font-size:1rem;} .product.list.webzine ul.grid li.item .description ul li.price {margin-bottom:0; font-size: 1rem; color:#111; font-weight:600;} .product.list.webzine ul.grid li.item .description ul li.price strong {font-weight:700; font-size:1.286rem;} .product.list.webzine ul.grid li.item .box > .btns {position:relative; right:0; display:table-cell; width:150px; vertical-align:middle;} /* 라벨이 길어지면 폭이 늘어나게 (최소폭만 고정) */ .product.list.webzine ul.grid li.item .box > .btns a {display:block; min-width:100px; margin:3px auto; padding:4px 10px; white-space:nowrap; color:#555; font-size:0.8125rem; font-weight:500; text-align:center; border:1px solid #888;} .product.list.webzine ul.grid li.item .box > .btns a.cart {color:#f44336; border:1px solid #f44336;} .product.list.webzine ul.grid li.item .box > .btns a img {vertical-align:middle; padding-right:5px;} .product.list.webzine ul.grid li.item .box > .btns a i {position:relative; top:2px; font-size:1.2rem; color:#999; margin-right:5px;} .product.list.webzine ul.grid li.item .box > .btns a i.ri-heart-fill {color:var(--point-color);} /* product-slide */ .product-slide {position:relative;} .product-slide.on {} .product-slide.on ul.grid {margin-left:0 !important;} .product-slide.on ul.grid li.item {padding-left:0 !important;} .product-slide ul.grid {} .product-slide.off ul.grid {} .product-slide .prev { position:absolute; z-index:1; top:50%; left:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 14px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .product-slide .next { position:absolute; z-index:1; top:50%; right:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 16px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .product-slide .prev:hover, .product-slide .next:hover {background-color:rgba(255,255,255,1.0);} .product-slide .pager {position:absolute; z-index:5; margin:0; width:100%; text-align:center;} .product-slide .pager span { overflow:hidden; position:relative; display:inline-block; width:10px; height:10px; margin:0 3px; text-indent:-9999px; background:#ddd; border-radius:30px; opacity:1; outline:none; } .product-slide .pager span.swiper-pagination-bullet-active {background:#333;} .product.swiper ul.grid {margin:0 0 0; padding:0; font-size:0;} .product.swiper ul.grid li.item {position:relative; display:inline-block; width:auto; margin:20px 0; padding-left:0; font-size:1rem; vertical-align:top;} /* normal-slide */ .normal-slide {position:relative; padding-bottom:20px;} .normal-slide.on {} .normal-slide.on ul.grid {margin-left:0 !important;} .normal-slide.on ul.grid li.item {padding-left:0 !important;} .normal-slide ul.grid {} .normal-slide.off ul.grid {} .normal-slide .prev { position:absolute; z-index:1; top:50%; left:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 14px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .next { position:absolute; z-index:1; top:50%; right:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 16px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .prev:hover, .normal-slide .next:hover {background-color:rgba(255,255,255,1.0);} /* 슬라이드 컨트롤/페이저 off 면 CSS로 즉시 숨김 */ .normal-slide[data-controls="false"] .prev, .normal-slide[data-controls="false"] .next { display:none !important; } .normal-slide[data-pager="false"] .pager, .normal-slide[data-pager="false"] .swiper-pagination { display:none !important; } .normal-slide .pager {position:absolute; z-index:5; margin:0; width:100%; text-align:center;} .normal-slide .pager span { overflow:hidden; position:relative; display:inline-block; width:10px; height:10px; margin:0 3px; text-indent:-9999px; background:#ddd; border-radius:30px; opacity:1; outline:none; } .normal-slide .pager span.swiper-pagination-bullet-active {background:#333;} /**************** 기본양식 ****************/ /* 기본 테이블 목록 */ .normal-list .board-top-sort {clear:both;} .normal-list .board-top-sort:after {content:''; display:block; clear:both;} .normal-list .ui.count {padding:0;} .normal-list .total-count {display:inline-block; padding-bottom:5px; font-size: 0.9375rem;} .normal-list .total-count strong {color:#000;} .normal-list .ui.table {border:0; border-bottom:1px solid #d5dbe0; border-radius:0;} .normal-list .ui.table thead th {border-left:0; background:#fff !important; border-top:2px solid #000; border-bottom:1px solid #d5dbe0; color:#000; font-weight:500; font-size:0.875rem; border-radius:0 !important;} .normal-list .ui.sortable.table>thead>tr>th {border-left:0;} .normal-list .ui.table tbody td {font-size: 0.875rem; color:#222; padding: 1.48571429em .78571429em; border-color:#eee;} .normal-list .ui.table tbody tr:hover {background:#fff !important;} .normal-list .ui.table tbody td.product-info img.thumb {width:80px;} .normal-list .ui.table tbody td.product-info span.product-name { overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.4 * 2); white-space:normal; margin:0 0 0; padding:0; font-size: 0.8571rem; line-height:1.4; color:#666; font-weight:normal; } /* no-data */ .list-no-data {padding:100px 0 !important; text-align:center !important; border-top:2px solid #000; background:#fff;} .list-no-data p {color:#999;} .list-no-data p i {position:relative; width:100px; height:100px; padding:; line-height:94px; font-size:6rem; color:#ccc; font-weight:100; border:0;} .list-no-data p i:after {content:''; display:block; position:absolute; bottom:0; right:0; width:25px; height:25px; border:0px solid #eaeaea; border-radius:30px;} .list-no-data p span {display:block; margin:15px 0 0; text-align:center; font-size:1rem; line-height:1.6;} /* 기본 폼 등록/수정 */ .ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu>.item {font-size: 0.875rem;} .normal-form .ui.form {background:#fff;} .normal-form .ui.form.segment {border-top:1px solid #dedede; padding:20px;} .normal-form .ui.form > .field, .normal-form .ui.form > .fields {} .normal-form .ui.form .field.border-none, .normal-form .ui.form .fields.border-none {border-bottom:0;} .normal-form .ui.form .field.padding-bottom-none, .normal-form .ui.form .fields.padding-bottom-none {padding-bottom:0 !important;} .normal-form .ui.form .field.margin-bottom-none, .normal-form .ui.form .fields.margin-bottom-none {margin-bottom:0 !important;} .normal-form .ui.form em.at {font-style:normal; display:inline-block; margin:0 0; font-size:1rem; vertical-align:middle;} .normal-form .ui.form p.desc {font-weight:normal !important; color:#777; } .normal-form .ui.form .field>label, .normal-form .ui.form .inline.fields>label { display:inline-block; min-width:130px; font-size:0.875rem; font-weight:500; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .normal-form .ui.form .inline-radio { display: inline-block; margin-right: 5px; padding: 5px 0; } .normal-form .upload {margin:0; -webkit-box-shadow:none !important; box-shadow:none !important;} .normal-form .upload .file { border:0px !important; } .normal-form .upload .content { margin-top: 10px !important; } .normal-form .upload .delete-file { margin-top: 10px; } .normal-form .fields.captcha { align-items:stretch !important; } .normal-form .ui.divider:not(.vertical):not(.horizontal) { margin:1.3rem 0; border-top: 1px solid rgba(34,36,38,.1); border-bottom: 1px solid rgba(255,255,255,.1); } /* semantic-ui toggle.checkbox custom */ .ui.toggle.checkbox label:before {width:3rem;} .ui.toggle.checkbox input:checked~label:after {left:1.65rem;} .ui.toggle.checkbox label {padding-left:4rem; padding-top:.3em} /* semantic-ui elements font */ .ui.header, .ui.button {font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif;} /* semantic-ui Tabular custom */ .ui.tabular.menu.custom { border-radius: 0; -webkit-box-shadow: none !important; box-shadow: none !important; border: none; background:#fafafa; border-top:2px solid #333; border-bottom: 1px solid #ddd; margin-bottom:10px; display:flex; justify-content:space-between; } .ui.tabular.fluid.menu { width: calc(100% + 2px) !important; } .ui.tabular.menu .item { background: transparent; border-bottom: none; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 2px solid transparent; padding: 1.2em 1.2em; color: rgba(0, 0, 0, 0.6); font-size:0.9375rem; font-weight:500; } /* 카테고리 베스트 등 '가로 탭'(top attached) */ html:not([lang="ko"]) .ui.top.attached.tabular.menu.custom > .item { display: block; flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 0.75em; padding-right: 0.75em; } .ui.tabular.menu .item:before { display: none; } /* Hover */ .ui.tabular.menu .item:hover { background-color: transparent; color: rgba(0, 0, 0, 0.8); } /* Active */ .ui.tabular.menu .active.item { background: none #FFFFFF; color: rgba(0, 0, 0, 1.0); border-top-width: 0; border-color: #ddd; font-weight: 500; margin-bottom: -1px; -webkit-box-shadow: none; box-shadow: none; border-radius:0 !important; } /* Coupling with segment for attachment */ .ui.tabular.menu + .attached:not(.top).segment, .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { border-top: none; margin-left: 0; margin-top: 0; margin-right: 0; width: 100%; } .top.attached.segment + .ui.bottom.tabular.menu { position: relative; width: calc(100% + 2px); left: -1px; } /* 더보기 글내용 */ .more-text {display:none;} .ui.primary.buttons .button, .ui.primary.button { background-color: var(--point-color) !important; color: var(--text-on-white-point); text-shadow: none; background-image: none; } .ui.primary.button { box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; } .ui.primary.buttons .button:hover, .ui.primary.button:hover { background-color: var(--point-hover-color) !important; color: var(--text-on-white-point); text-shadow: none; } .ui.primary.buttons .button:focus, .ui.primary.button:focus { background-color: var(--point-hover-color) !important; color: var(--text-on-white-point); text-shadow: none; } /* basic(외곽선형) 강조 버튼 */ .ui.basic.primary.buttons .button, .ui.basic.primary.button { background: transparent none !important; box-shadow: 0 0 0 1px var(--point-border-color) inset !important; color: var(--point-text-color) !important; } .ui.basic.primary.buttons .button:hover, .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:focus, .ui.basic.primary.button:focus { background: transparent none !important; box-shadow: 0 0 0 1px var(--point-hover-color) inset !important; color: var(--point-hover-color) !important; } .ui.primary.buttons .button:active, .ui.primary.button:active { background-color: var(--point-hover-color) !important; color: var(--text-on-white-point); text-shadow: none; } .ui.primary.buttons .active.button, .ui.primary.buttons .active.button:active, .ui.primary.active.button, .ui.primary.button .active.button:active { background-color: var(--point-hover-color) !important; color: #fff; text-shadow: none; } /* 커스텀 버튼폰트 사이즈 */ .ui.buttons .button, .ui.buttons .or, .ui.button { font-size: 0.875rem; } .ui.mini.buttons .button, .ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown .menu>.item, .ui.mini.buttons .or, .ui.ui.ui.ui.mini.button { font-size: 0.8125rem; padding:0.4rem 0.6rem; font-weight:500; } .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.ui.ui.ui.tiny.button { font-size: 0.8125rem; padding:.6em 1.0em .6em; } .ui.small.buttons .dropdown, .ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .button, .ui.small.buttons .or, .ui.ui.ui.ui.small.button { font-size: 0.8125rem; font-weight:500; } .ui.large.buttons .dropdown, .ui.large.buttons .dropdown .menu > .item, .ui.large.buttons .button, .ui.large.buttons .or, .ui.ui.ui.ui.large.button { font-size: 1.0625rem; font-weight:500; } .ui.big.buttons .dropdown, .ui.big.buttons .dropdown .menu > .item, .ui.big.buttons .button, .ui.big.buttons .or, .ui.ui.ui.ui.big.button { font-size: 1.125rem; font-weight:500; } .ui.huge.buttons .dropdown, .ui.huge.buttons .dropdown .menu > .item, .ui.huge.buttons .button, .ui.huge.buttons .or, .ui.ui.ui.ui.huge.button { font-size: 1.42857143rem; font-weight:500; } .ui.massive.buttons .dropdown, .ui.massive.buttons .dropdown .menu > .item, .ui.massive.buttons .button, .ui.massive.buttons .or, .ui.ui.ui.ui.massive.button { font-size: 1.71428571rem; } .ui.header {font-weight:600;} /* .rich-content — 에디터 저장본 렌더 스타일 */ .rich-content { box-sizing: border-box; line-height: 1.42; text-align: left; white-space: normal; /* 루트는 normal */ word-wrap: break-word; tab-size: 4; -moz-tab-size: 4; /* 본문 14px = 에디터 .ql-container 기준값. size 배율(small/large/huge)의 기준 */ font-size: 14px; font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif; } /* 블록 여백/카운터 초기화 (snow .ql-editor 와 동일) */ .rich-content p, .rich-content ol, .rich-content ul, .rich-content pre, .rich-content blockquote, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { margin: 0; padding: 0; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } /* 공백/줄바꿈(에디터 다중공백·수동 줄맞춤) 보존은 블록 요소에만 */ .rich-content p, .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6, .rich-content li, .rich-content blockquote { white-space: pre-wrap; } /* 본문 줄간격 = 에디터(.ql-editor 1.42 '단위없는' 배수)와 동일 */ .rich-content p, .rich-content li, .rich-content blockquote { line-height: 1.8; } /* ── 헤딩 글자크기 = 에디터 initialize.css 와 동일(px 못박음) ── */ .rich-content h1 { font-size: 32px; } .rich-content h2 { font-size: 27px; } .rich-content h3 { font-size: 21px; } .rich-content h4 { font-size: 17px; } .rich-content h5 { font-size: 16px; } .rich-content h6 { font-size: 14px; } /* 헤딩 굵기·줄간격 = 에디터와 동일 고정 */ .rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6 { font-weight: 500; line-height: 1.2; margin: 0.5em 0; } /* ── 내용 글자크기(size 피커) = 에디터 initialize.css 와 동일 ── */ .rich-content .ql-size-small { font-size: 12px; } .rich-content .ql-size-large { font-size: 18px; } .rich-content .ql-size-huge { font-size: 24px; } /* ── 리스트(ordered/bullet) + 중첩 카운터 (snow 원본 그대로) ── */ .rich-content ol, .rich-content ul { padding-left: 1.5em; list-style-type: none; /* Fomantic/Bootstrap 기본 마커 제거 — 카운터/•로 대체 */ } .rich-content ol > li, .rich-content ul > li { list-style-type: none; } .rich-content ul > li::before { content: '\2022'; } .rich-content li::before { display: inline-block; white-space: nowrap; width: 1.2em; } .rich-content li:not(.ql-direction-rtl)::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; } .rich-content ol li:not(.ql-direction-rtl), .rich-content ul li:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content ol li { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-increment: list-0; } .rich-content ol li:before { content: counter(list-0, decimal) '. '; } .rich-content ol li.ql-indent-1 { counter-increment: list-1; } .rich-content ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; } .rich-content ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-2 { counter-increment: list-2; } .rich-content ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; } .rich-content ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-3 { counter-increment: list-3; } .rich-content ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; } .rich-content ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-4 { counter-increment: list-4; } .rich-content ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; } .rich-content ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-5 { counter-increment: list-5; } .rich-content ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; } .rich-content ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } .rich-content ol li.ql-indent-6 { counter-increment: list-6; } .rich-content ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; } .rich-content ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; } .rich-content ol li.ql-indent-7 { counter-increment: list-7; } .rich-content ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; } .rich-content ol li.ql-indent-7 { counter-reset: list-8 list-9; } .rich-content ol li.ql-indent-8 { counter-increment: list-8; } .rich-content ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; } .rich-content ol li.ql-indent-8 { counter-reset: list-9; } .rich-content ol li.ql-indent-9 { counter-increment: list-9; } .rich-content ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; } /* 중첩 목록 카운터는 점으로 통일 */ .rich-content ol li.ql-indent-1:before, .rich-content ol li.ql-indent-2:before, .rich-content ol li.ql-indent-3:before, .rich-content ol li.ql-indent-4:before, .rich-content ol li.ql-indent-5:before, .rich-content ol li.ql-indent-6:before, .rich-content ol li.ql-indent-7:before, .rich-content ol li.ql-indent-8:before, .rich-content ol li.ql-indent-9:before { content: '\2022'; } /* 들여쓰기(indent) 패딩 */ .rich-content .ql-indent-1:not(.ql-direction-rtl) { padding-left: 1.5em; } .rich-content li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content .ql-indent-2:not(.ql-direction-rtl) { padding-left: 3em; } .rich-content li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content .ql-indent-3:not(.ql-direction-rtl) { padding-left: 4.5em; } .rich-content li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content .ql-indent-4:not(.ql-direction-rtl) { padding-left: 6em; } .rich-content li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content .ql-indent-5:not(.ql-direction-rtl) { padding-left: 7.5em; } .rich-content li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content .ql-indent-6:not(.ql-direction-rtl) { padding-left: 9em; } .rich-content li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content .ql-indent-7:not(.ql-direction-rtl) { padding-left: 10.5em; } .rich-content li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content .ql-indent-8:not(.ql-direction-rtl) { padding-left: 12em; } .rich-content li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content .ql-indent-9:not(.ql-direction-rtl) { padding-left: 13.5em; } .rich-content li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 15em; } /* ── 정렬 ── */ .rich-content .ql-align-center { text-align: center; } .rich-content .ql-align-justify { text-align: justify; } .rich-content .ql-align-right { text-align: right; } .rich-content .ql-direction-rtl { direction: rtl; text-align: inherit; } /* ── 글자색/배경색 (팔레트) ── */ .rich-content .ql-color-white { color: #fff; } .rich-content .ql-color-red { color: #e60000; } .rich-content .ql-color-orange { color: #f90; } .rich-content .ql-color-yellow { color: #ff0; } .rich-content .ql-color-green { color: #008a00; } .rich-content .ql-color-blue { color: #06c; } .rich-content .ql-color-purple { color: #93f; } .rich-content .ql-bg-black { background-color: #000; } .rich-content .ql-bg-red { background-color: #e60000; } .rich-content .ql-bg-orange { background-color: #f90; } .rich-content .ql-bg-yellow { background-color: #ff0; } .rich-content .ql-bg-green { background-color: #008a00; } .rich-content .ql-bg-blue { background-color: #06c; } .rich-content .ql-bg-purple { background-color: #93f; } /* ── 서체(font 피커) ── */ .rich-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; } .rich-content .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; } /* ── 링크/인용/코드/이미지/비디오 ── */ .rich-content a { text-decoration: underline; color: #06c; } /* 링크색 고정 — 전역 a{color:#666} 지배 차단(에디터와 동일) */ .rich-content blockquote { border-left: 4px solid #ccc; margin-top: 5px; margin-bottom: 5px; padding-left: 16px; } .rich-content code, .rich-content pre { background-color: #f0f0f0; border-radius: 3px; } .rich-content pre { white-space: pre-wrap; margin-top: 5px; margin-bottom: 5px; padding: 5px 10px; font-family: Consolas, Monaco, 'Courier New', monospace; font-size: 13px; /* 에디터 코드블록과 동일 — 전역 pre 가 키우지 못하게 고정 */ } .rich-content code { font-size: 85%; padding: 2px 4px; } .rich-content pre.ql-syntax { background-color: #23241f; color: #f8f8f2; overflow: visible; } .rich-content img { max-width: 100%; } .rich-content video, .rich-content iframe { max-width: 100%; height: auto; } .rich-content .ql-video { display: block; max-width: 100%; } .rich-content .ql-video.ql-align-center { margin: 0 auto; } .rich-content .ql-video.ql-align-right { margin: 0 0 0 auto; } /* 표(table) */ .rich-content table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0.5em 0; } /* width 100% 강제 안 함 */ .rich-content td, .rich-content th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; } .rich-content th { background: #f6f7f9; font-weight: 600; text-align: center; } /* Fomantic 툴팁 */ [data-tooltip]::before, [data-tooltip]::after { font-size: 0.8125rem; } /* Quill 2.0 목록 */ .rich-content li[data-list] { list-style-type: none; } .rich-content ol li[data-list="bullet"][data-list] { counter-increment: none; } .rich-content ol li[data-list="bullet"][data-list]::before { content: '\2022'; } /* 에디터가 마커를 그리려고 넣는 빈 span — 보기 화면에서는 li::before 가 그린다 */ .rich-content .ql-ui { display: none; }