@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; } html {font-size:16px; scrollbar-gutter:stable;} /* 전체 폰트 16px */ /* Fomantic 모달은 스크롤바를 없앨 때 body 에 padding-right */ body.dimmed {padding-right:0 !important; margin-right:0 !important;} * {font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif; word-break:break-all;} /* 비한국어 문서 */ html:not([lang="ko"]) *, html:not([lang="ko"]) {word-break:normal; overflow-wrap:break-word;} body {overflow-x:auto; min-width:200px; background:#fff; font-size:0.875rem;} h1, h2, h3, h4, h5 {font-family:"Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', -apple-system, Helvetica, sans-serif; font-weight:normal;} /**** IE11 Hacks ****/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { body {letter-spacing:-0.02em;} } #layout-contents {position:relative; margin:0 auto;} .fluid {} .fluid:after {content:''; display:block; clear:both;} .container {position:relative; width:1200px; margin:0 auto;} .container:after {content:''; display:block; clear:both;} .clearfix {clear:both;} /* header */ #global-top-banner {text-align:center; position:relative; overflow-x:hidden;} #global-top-banner a {height:auto;display:block;text-decoration:none !important;} #global-top-banner .banner-img { display:block; position:relative; left: 50%; -o-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); transform:translate(-50%,0); } #global-top-banner-close {font-size:1.571rem; position:absolute;top:50%;right:17px;margin-top:-20px; width:40px; height:40px; cursor:pointer; background:rgba(255,255,255,0.6); border-radius:50px;} #global-top-banner-close:before {content:''; display:block; position:relative; z-index:1000; top:19px; left:8px; width:24px; height:2px; background:rgba(0,0,0,0.9); transform:rotate(45deg);} #global-top-banner-close:after {content:''; display:block; position:relative; z-index:1000; top:17px; left:8px; width:24px; height:2px; background:rgba(0,0,0,0.9); transform:rotate(-45deg);} header { background: #fff; } .gnb-area {background:#fff; border-bottom:1px solid #eee; font-size:0.8125rem; font-weight:500;} .gnb-area .gnb { display:flex; align-items:center; justify-content:space-between; padding:8px 0; } /* GNB 좌측 인사 문구 — 가나다순 상품찾기를 대체한다(그 자리의 글자 톤을 그대로 따른다) */ .gnb-thanks {display:flex; align-items:center; font-size:0.875rem; font-weight:600; color:#666;} .initial-search {position:relative; padding:0;} .initial-search ul {display:flex; margin:0; padding:0;} .initial-search ul li {padding-right:3px;} .initial-search ul li:first-child {width:140px; padding:0 10px 0 0; font-weight:600; color:#666; font-size:0.875rem; } .initial-search ul li > a {padding:5px 5px; line-height:1.6; color:#777; font-size:0.8125rem; background-color:#efefef; border-radius:2px;} .initial-search ul li:hover > a {background-color:#333; color:#fff;} .initial-search ul li:hover .initial {display:block;} .initial-search ul li .initial { position:absolute; top:20px; left:140px; z-index:1000; padding:10px 15px; width:407px; border:1px solid #333; background-color:#fff; display:none; -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; } .initial-search ul li .initial a {padding:0; line-height:1.7;display:inline-block;} .initial-search ul li .initial a:hover {color:#000;} /* 즐겨찾기 별표 */ .initial-search ul li .initial a i.ri-star-fill {padding-left:5px; font-size:0.875rem; color:#faa828;} .initial-search ul li .initial a:hover i.ri-star-fill {color:#faa828;} .initial-search ul li .initial span {display:inline-block;} .initial-search ul li .initial span:last-child:after {display:none;} .initial-search ul li .initial span:after {content:""; display:inline-block; width:1px; height:11px; margin:0 10px 1px 10px; background-color:#ddd; vertical-align:middle;} .gnb-menu { display:flex; align-items:center; justify-content:flex-end; margin:0; padding:0; } .gnb-menu li {} .gnb-menu li:before {content:"|"; padding:0 8px; color:#ddd;} .gnb-menu li:first-child:before {content:""; padding:0;} .gnb-menu .badge.number { position:relative; top:-1px; background:var(--point-color); display:inline-block; line-height: 1; text-align:center; vertical-align:baseline; margin:0 0 0 3px; padding:2px 5px; font-size: 0.75rem; color:#fff; font-weight:400; border-radius: 30px; } .header-contents { display:flex; align-items:center; justify-content:flex-start; } h1.logo {flex:1 0 250px; margin:0; padding:0; position:relative;} /* 로고 인트로 배너 */ .logo_intro { position:absolute; right:100%; /* 이미지 오른쪽 끝 = 로고 왼쪽 가장자리 */ margin-right:50px; /* 로고에서 왼쪽으로 50px 간격 */ top:50%; transform:translateY(-50%); max-height:60px; /* 로고 높이에 맞춰 조절 */ width:auto; } .header-search {flex:1 0 20px;} .header-search .form-header-search {} .header-search .ui.input > input {width:380px; border-radius:0; border:0; border-bottom:3px solid #111; font-size:1.071rem; background:#fff;} .header-search .ui.input > button {position:absolute; top:10px; right:0; color:#111; font-size:1.286rem; cursor:pointer;} .header-search.box .ui.input > input {width:380px; border-radius:0; border:0; border:2px solid #111; font-size:1.071rem; background:#fff;} .header-search.box .ui.input > button {position:absolute; top:2px; right:0; width:40px; height:40px; color:#fff; font-size:1.5rem; cursor:pointer; background:#111;} .header-search.round-box .ui.input > input { width:380px; border-radius:0; border:0; border:3px solid var(--point-color); font-size:1rem; background:#fff; border-radius:50px !important; padding-right:80px !important; } /* 검색상자 그라디언트 보더 적용 */ .header-search.round-box .ui.input > input { border: 2px solid transparent; border-radius: 10px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, var(--point-color), var(--point-color), #b142d6, #f12d85); background-origin: border-box; background-clip: padding-box, border-box; } .header-search.round-box .ui.input > button {position:absolute; top:11px; right:6px; color:#ff618e; font-size:1.5rem; cursor:pointer;} .header-search.round-box .ui.input > button.search-button {font-weight:600;} .search-keyword-rank { overflow:hidden; display:flex; align-items: center; width:380px; min-height:24px; /* fade 중 높이 변동으로 검색박스가 흔들리지 않게 높이 고정 */ margin:10px 0 0; white-space:nowrap; text-overflow:ellipsis; font-size:0.8571rem; } .search-keyword-rank h3 {flex:0 0 75px; margin:0; padding:0 0 0; font-size:0.8571rem; color:red;} .search-keyword-rank ul {display:flex; flex:0 0 auto; margin:0; padding:0;} .search-keyword-rank ul li { flex:1 1 auto; margin:0 15px 0 0; padding:0; max-width:90px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .search-keyword-rank ul li span.num {display:inline-block; width:16px; height:17px; background:#333; font-size:0.6875rem; color:#fff; border-radius:2px; text-align:center;} .search-keyword-rank ul li span.keyword {padding-top:2px;} /* 로드 시 깜빡임 방지: 기본은 첫 3개만 노출(JS가 10초마다 다음 3개로 fade 롤링) */ .search-keyword-rank ul li:nth-child(n+4) {display:none;} /* 추천 서제스트 (통합검색 드롭다운) */ .top-search-suggest { /* ▼ 커스터마이즈 포인트 (여기 값만 바꾸면 전체 반영) */ --suggest-bg: #fff; --suggest-radius: 18px; /* pill 입력창(50px)과 어울리는 부드러운 라운드 */ --suggest-border: rgba(0,0,0,.06); --suggest-shadow: 0 14px 34px rgba(17,17,17,.16); --suggest-item-radius: 10px; --suggest-item-hover: rgba(0,0,0,.05); /* 호버/선택 배경 — 연한 회색 */ --suggest-match-color: var(--point-color); --suggest-text: #2b2b2b; --suggest-max-height: 340px; max-height: none !important; /* 플러그인 인라인 max-height 무력화 — 높이는 .inner 가 담당 */ margin-top: 8px; /* 검색창과 살짝 띄움 */ background: transparent; border: 0; /* 실제 박스는 .inner 가 그림(라운드 클리핑 안정) */ } /* devbridge 기본 하단 '닫기' 바 */ .top-search-suggest .suggestions { position: static; } .top-search-suggest .suggestions .close { display: none !important; } /* 실제 드롭다운 박스 */ .top-search-suggest .suggestions .inner { background: var(--suggest-bg); border: 1px solid var(--suggest-border); border-radius: var(--suggest-radius); box-shadow: var(--suggest-shadow); max-height: var(--suggest-max-height); overflow-y: auto; overflow-x: hidden; padding: 8px; color: var(--suggest-text); } /* 각 추천 항목 */ .top-search-suggest .autocomplete-suggestion { padding: 9px 14px; line-height: 1.4; border-radius: var(--suggest-item-radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-size: 0.95rem; font-weight: 400; /* 기본은 얇게 */ transition: background-color .12s ease; } /* hover / 키보드 이동 선택 */ .top-search-suggest .autocomplete-suggestion:hover, .top-search-suggest .autocomplete-selected { background: var(--suggest-item-hover); } /* 입력어와 일치하는 부분 — 포인트 컬러로 은은하게 강조(과하지 않게 얇은 굵기) */ .top-search-suggest strong { font-weight: 500; color: var(--suggest-match-color); } /* 그룹 헤더(현재 미사용이나 유지) */ .top-search-suggest .autocomplete-group { padding: 6px 14px; } .top-search-suggest .autocomplete-group strong { display: block; border-bottom: 1px solid #eee; color: #888; } /* 슬림 스크롤바 */ .top-search-suggest .suggestions .inner::-webkit-scrollbar { width: 8px; } .top-search-suggest .suggestions .inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 8px; } .top-search-suggest .suggestions .inner::-webkit-scrollbar-track { background: transparent; } .header-right-banner {flex:1 0 240px; width:240px; text-align:right;} .header-right-banner .header-customer {padding:20px 0; text-align:right; font-size:1.143rem;} .header-customer span.ui.text.bold {display:block; margin-top:3px; font-weight:bold; font-size:2.429rem; color:#d51f1f;} .lnb {position:relative; border-bottom:1px solid #eaeaea; background-color:#fff;} .lnb:before { content: ""; position: absolute; top: 0; left: 0; border-top:2px solid var(--point-color); border-image:var(--gradient-color-bar); display:block; width:100%; } .lnb.fixed {position:fixed; top:0; z-index:1000; width:100%;} .lnb > .container { } /* lnb-menu */ .lnb-menu { display:flex; margin:0; padding:0; justify-content:flex-start; flex-wrap: wrap; flex-direction: row; align-content: space-between; } .lnb-menu > ul { display:flex; flex:1 1 95%; margin:0; padding:0; align-items:center; justify-content:flex-start; flex-wrap: wrap; flex-direction: row; align-content: center; } .lnb-menu > ul > li { position:relative; flex:0 0 auto; font-size:1.0625rem; font-weight:600; text-align:center; white-space: nowrap; } .lnb-menu > ul > li:after {position:absolute; right:0; top:18px; content:''; display:block; width:1px; height:13px; border-radius:5px; background:rgba(255,255,255,0.3);} .lnb-menu > ul > li:last-child:after {display:none;} .lnb-menu > ul > li > a {display:block; padding:15px 20px; letter-spacing:-0.01em; color:#333; background:rgba(0,0,0,0.0);} .lnb-menu > ul > li > a img {position:relative; top:2px; height:16px; margin-left:3px;} .lnb-menu > ul > li > a:hover {/* background:rgba(0,0,0,0.2); */ color:#000;} .lnb-menu > ul > li > a:before { content:''; display:block; position:absolute; bottom:0; left:50%; width: 0; height: 0; margin-left:-7px; border-left:7px solid transparent; border-right: 7px solid transparent; border-bottom: 0 solid transparent; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .lnb-menu > ul > li > a:hover:before { } /* category-all */ .category-all { position:relative; display:flex; align-items: center; flex:0 0 50px; border-left:0px solid #eaeaea; border-right:0px solid #eaeaea; background:var(--point-color); -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } .category-all .category-button {display:block; width:100%; padding:14px 14px; font-size:1.4rem; color:#fff; font-weight:500; cursor:pointer;} .category-all .category-button i {margin-right:0;} .category-all .category-layer { position:absolute; /* 기본 위치: 전체메뉴 버튼 바로 아래 */ top:100%; z-index: 99999; left:0; width:1200px; height:600px; padding:0 0; background:#fff; border:2px solid var(--point-color); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; display:none; overflow:auto; } .category-all .category-layer > ul { display: grid; grid-template-columns: repeat(6, 1fr); /* 5개씩 무조건 고정 */ gap: 0; /* 아이템 사이 간격 */ text-align:left; margin:0; padding:0; } .category-all .category-layer > ul > li {flex:1 1 15%; margin:0; padding:0; border-right:1px solid #eee; border-bottom:1px dotted #ddd; box-sizing:border-box;} .category-all .category-layer > ul > li:nth-child(6n) {border-right:0;} /* 대분류 a: 스크롤 시 해당 li 영역 끝까지 상단 고정(sticky) */ /* 대분류 칸 높이 통일 */ .category-all .category-layer > ul > li > a {display:flex; align-items:center; padding:13px 15px; font-size:0.9375rem; line-height:22px; color:#333; font-weight:600; position:sticky; top:0; z-index:2; background:#f5f5f5; border-bottom:1px solid #eaeaea;} /* 대분류 앞 카테고리 이미지(모바일 전체카테고리와 동일 소스 {$.icon}) */ .category-all .category-layer > ul > li > a .cat-layer-icon {flex:0 0 auto; width:22px; height:22px; margin-right:8px; object-fit:contain; border-radius:4px;} .category-all .category-layer > ul > li > a:hover {color:#000; background:#ececec;} .category-all .category-layer > ul > li ul {margin:0 0 20px; padding:0 0;} .category-all .category-layer > ul > li ul li {padding:0 0;} .category-all .category-layer > ul > li ul li a {position:relative; display:block; color:#666; font-size:0.875rem; font-weight:500; padding:5px 22px;} .category-all .category-layer > ul > li ul li a:hover {color:#000; background:#f9f9f9;} .category-all .category-layer > ul > li ul li a:hover:after {position: absolute; display: block; width: 100%; height: 6px; left: 0; bottom: 0; background: #eee; border-radius: 4px; content: ''; z-index: -1;} .category-all .category-layer a i.ri-star-fill { padding-left: 5px; font-size: 0.875rem; color: #faa828;} /* page-title */ .page-title {margin:40px auto 50px; text-align:center;} .page-title h2 {margin:0 0 0; font-size:1.75rem; font-weight:700; color:#222; font-family: "Pretendard Variable", "Pretendard", 'Helvetica Neue', 'Apple SD Gothic Neo', '맑은고딕', 'malgun gothic', 'Open Sans', Helvetica, sans-serif;} .page-title h2:after {content:''; display:block; width:20px; height:1px; margin:10px auto; background:#222;} .page-title p.desc {margin:0; padding:0; font-size:1.0625rem; color:#555;} /* page-title align-left */ .page-title.align-left {margin:40px auto 30px; padding:0 0 0; text-align:left; border-bottom:1px solid #ccc; vertical-align:middle;} .page-title.align-left h2 {position:relative; display:inline-block; margin:0 0 0; font-size:1.5rem; font-weight:500; color:#222; letter-spacing:-0.05em;} .page-title.align-left h2:after {content:''; display:block; position:relative; width:100%; height:1px; margin:10px 0 -1px; background:#000;} .page-title.align-left p.desc {display:inline-block; margin:0; padding:0 0 0 10px; font-size:1rem; color:#555;} /* breadcrumb selection */ .breadcrumb.selection {margin:20px 0 20px; height:22px; font-size:0.9375rem;} .breadcrumb.selection a.home i {font-size:1.2rem;} .breadcrumb.selection > i {font-size:1rem; font-weight:400; color:#aaa;} .breadcrumb.selection .ui.dropdown {padding:5px 10px 5px 15px; font-size:0.875rem !important; border:1px solid #ddd; border-radius:2px;} .breadcrumb.selection .ui.dropdown > i {padding-left:5px} .breadcrumb.selection .ui.selection.dropdown {min-height:auto; height:30px !important; padding: .45em 2.1em .78571429em 1em !important; border-radius:2px;} .breadcrumb.selection .ui.selection.dropdown>.dropdown.icon {padding:.64em .71666667em;} .breadcrumb.selection .ui.dropdown .menu {left:-1px;} .breadcrumb.selection .ui.dropdown .menu .item { font-size:0.875rem;} /* [SEO] 현재 카테고리는 h2 로 마크업한다(목록 페이지의 주제) */ .breadcrumb.selection .ui.dropdown > h2.text {display:inline; margin:0; padding:0; font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit;} .page-wrap {position:relative; padding-bottom:50px;} /* quick */ body:has([data-main-visual="1"]) #side-left:not(.side-ready), body:has([data-main-visual="1"]) #side-right:not(.side-ready) {visibility:hidden;} /* #side-left */ /* 퀵메뉴 z-index 980: 하단 바(900) 위, 실시간 상담 버튼(990)과 고정 대메뉴·AI 추천 패널(1000) 아래 */ #side-left {position:absolute; right:50%; z-index:980; width:120px; margin-right:620px; margin-bottom:10px; margin-top:10px;} #side-left.fixed {position:fixed; top:58px;} #side-left .theme-select {padding:10px; border:1px solid #ddd; border-top:3px solid #333; background:#fff;} #side-left .theme-select h4 {margin-bottom:10px; text-align:center; font-size:0.875rem; font-weight:600; color:#333;} #side-left .theme-select .ui.dropdown {margin-top:5px; padding: .78571429em 2.2em .78571429em 1em;} #side-left .theme-select .ui.dropdown, #side-left .theme-select .ui.dropdown .menu>.item {font-size: 0.875rem;} #side-left .theme-select .ui.dropdown .menu>.item {padding:10px 10px; min-height: 1.57142857rem; font-size:0.8125rem;} #side-left .theme-select .ui.selection.dropdown .menu>.item {padding:10px 5px !important; font-size: 0.875rem; line-height:1.2; min-height:auto !important;} #side-left .theme-select .ui.upward.selection.dropdown.active, #side-left .theme-select .ui.upward.selection.dropdown.visible {border-radius:0 !important;} /* custom dropdown */ #side-left .ui.dropdown.custom {width:100%; margin-top:0; padding-right:10px; border:1px solid #ddd;} #side-left .ui.dropdown.custom:focus {border-color:#333;} #side-left .ui.dropdown.custom:not(.labeled)>.dropdown.icon.custom {float:right; margin:4px 12px 0 0;} #side-left .theme-select .ui.dropdown.custom {padding:6px 0 6px 10px;} #side-left .ui.dropdown.custom > .text {float:left; display:block; width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #side-left .ui.dropdown.custom .menu {left:-1px; min-width:97px; border-radius:0 !important;} #side-left .side-left-banner ul {margin:0; padding:0;} #side-left .side-left-banner ul li {margin-top:5px;} #side-left .side-left-banner ul li a {display:block;} #side-left .side-left-banner ul li img {display:block;} /* #side-right */ #side-right {position:absolute; left:50%; z-index:980; width:120px; margin-left:620px; margin-top:10px;} #side-right.fixed {position:fixed; top:58px;} #side-right .side-right-top-banner {margin:0; padding:0;} #side-right .side-right-top-banner ul {margin:0; padding:0; list-style:none;} #side-right .side-right-top-banner ul li {margin:0 0 5px 0; padding:0;} #side-right .side-right-top-banner ul li a {display:block;} #side-right .side-right-top-banner ul li img {display:block;} #side-right .side-right-bottom-banner {margin:0; padding:0;} #side-right .side-right-bottom-banner ul {margin:0; padding:0; list-style:none;} #side-right .side-right-bottom-banner ul li {margin:0 0 5px 0; padding:0;} #side-right .side-right-bottom-banner ul li a {display:block;} #side-right .side-right-bottom-banner ul li img {display:block;} /* product-recent */ #side-right .product-recent {margin:0 0 5px; padding:0;} #side-right .product-recent h4 {margin:0; padding:5px; text-align:center; font-size:0.875rem; font-weight:600; color:#fff; background-color:#555;} #side-right .product-recent ul {margin:0; padding:8px 10px; border:1px solid #ddd; border-top:0; background:#fff;} #side-right .product-recent ul li {margin:2px 0; padding:0;} /* 로드 직후 깜빡임 방지: 기본은 첫 2개(페이징 단위)만 노출, 나머지는 JS 페이징이 인라인으로 제어 */ #side-right .product-recent ul li:nth-child(n+3) {display:none;} #side-right .product-recent ul li a {position:relative; display:block; background:#fff; border:2px solid #fff; overflow:hidden;} #side-right .product-recent ul li a img {float:right; display:block; width:94px; height: auto !important;} /* 노이미지 폴백 박스 — 썸네일 부재/로드실패 시 아이콘(우측 정렬, 이미지 자리와 동일 폭) */ #side-right .product-recent ul li a .no-image {float:right; width:94px; height:94px; align-items:center; justify-content:center; background:#f5f5f5; color:#d1d1d1; font-size:1.5rem;} #side-right .product-recent ul li a span.product-name {display:none; float:left; width:115px; padding:10px; font-size:0.8125rem; font-weight:500;} #side-right .product-recent ul li a:hover {position:relative; left:-122px; border-color:#333; width:220px;} #side-right .product-recent ul li a:hover span.product-name {display:block;} #side-right .product-recent .recent-control {margin:5px 0 0; text-align:center;} #side-right .product-recent .recent-control:after {content:''; display:block; clear:both;} #side-right .product-recent .recent-control .prev {float:left; display:block; height:20px; width:20px; margin:0; padding:2px 3px; line-height:1; border:1px solid #ddd; cursor:pointer; background-color:#fff;} #side-right .product-recent .recent-control .next {float:right; display:block; height:20px; width:20px; margin:0; padding:2px 3px; line-height:1; border:1px solid #ddd; cursor:pointer; background-color:#fff;} #side-right .product-recent .recent-control .recent-count {position:relative; top:1px; font-size:0.75rem; color:#666;} #side-right #btn-page-top, #side-right #btn-page-bottom {position:relative; display:block; width:120px; height:30px; padding:4px 0 0 0; font-size: 0.9375rem; font-weight:400; color:#aaa; margin-top:-1px; background-color:#fff; border:1px solid #ddd; text-align:center; outline:none;} #side-right #btn-page-top i, #side-right #btn-page-bottom i {position:relative; top:1px; font-size:1.286rem;} /* quick-page-toggle */ .quick-page-toggle {position:fixed; bottom:30px; right:30px; z-index:1000;} .quick-page-toggle.active {position:absolute;bottom:0;} .quick-page-toggle #btn-page-top, .quick-page-toggle #btn-page-bottom {display:block; width:50px; height:50px; padding:5px 0 0 0; font-size:0.8571rem; font-weight:600; color:#aaa; margin-top:-1px; background-color:#fff; border:1px solid #ddd; text-align:center; outline:none;} .quick-page-toggle #btn-page-top i, .quick-page-toggle #btn-page-bottom i {display:block; margin:0 auto; font-size:1.429rem;} /* footer */ footer {border-top:2px solid #333; background:#fff;} .footer-contents { display:flex; justify-content:flex-start; } .footer-contents .footer-column {flex:1 1 33.3%; margin:20px 0; padding:5px 30px; border-left:1px solid #eee;} .footer-contents .footer-column:first-child {padding-left:0; border-left:0;} .footer-contents .footer-column:last-child {flex:1 0 33.3%; padding-right:0;} .footer-contents .footer-column h3 {margin:0; padding:0 0 20px; font-size: 1.25rem; font-weight:600; color:#333;} .footer-contents .footer-column h3 i {font-size: 1.3rem; font-weight:400;} .footer-contents .footer-column p.description {font-size:0.9375rem; color:#666; font-weight:500;} /* footer-design */ .footer-design {} .footer-design .info-wrap { display:flex; align-items:center; } .footer-design .info-wrap.mail {margin-top: 10px; padding:10px 0 0; border-top: 1px solid #ddd;} .footer-design .info-wrap.only-mail {margin-bottom:0;} .footer-design .info-wrap a.webhard-link {width:139px; padding: .78571429em 0.7em !important; font-size:0.875rem; text-align:left; letter-spacing:-0.05em;} .footer-design .info-wrap a.webhard-link i {float:left; display:inline-block; font-size:1.5rem; width:20px; padding-top:10px; font-weight:400 !important;} .footer-design .info-wrap a.button span {display:inline-block; width:60px; line-height:1.3; font-size:0.875rem; font-weight:600; padding-left:13px;} /* EN/JA: 웹하드 버튼은 아이콘 숨김 */ html:lang(en) .footer-design .info-wrap a.webhard-link, html:lang(ja) .footer-design .info-wrap a.webhard-link {display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px;} html:lang(en) .footer-design .info-wrap a.webhard-link span.webhard-label, html:lang(ja) .footer-design .info-wrap a.webhard-link span.webhard-label {width:auto; padding:0; white-space:nowrap; font-size:0.8rem;} .footer-design p.info {width:100%; line-height:1.5; font-size:1rem; letter-spacing:-0.03rem;} .footer-design p.info strong {font-weight:500; display:inline-block; width:30px; margin:2px 5px 2px 10px; padding:3px 0; color:#fff; font-size:0.7857rem; background:#999; text-align:center; border-radius:3px;} .footer-design p.info strong.mail-label {font-weight:500; width:auto; margin:2px 5px 5px 0; padding:3px 10px;} .footer-design p.info .mail-address {font-size:1.125rem; line-height:1.5;} .footer-design p.info a.copy {float:right; margin-top:2px; margin-left:10px; padding:5px 10px; font-weight:500; font-size:0.8125rem;} .footer-design p.info a.mail-copy {margin-left:15px; padding:5px 10px;} .footer-design ul { display:flex; justify-content:space-between; margin:5px 0 0; padding:0; } .footer-design ul li {flex:1 1 33%; margin:0 20px 0 0; padding:0;} .footer-design ul li:last-child {margin-right:0;} .footer-design ul li a {display:block; overflow:hidden;} .footer-design ul li img {display:block; overflow:hidden;} /* footer-cs */ .footer-cs {} .footer-cs .tel {margin:20px 0 10px; font-size:2.286rem; font-weight:bold;} .footer-cs .tel i {font-size:1.9rem;} .footer-cs p.info {margin:0; padding:0 0 10px 0; line-height:1.6; border-bottom:1px dotted #ddd;} /* 긴급통화 값이 없어도 줄 높이를 확보해 정렬 유지 */ .footer-cs p.info .urgent-tel {display:inline-block; min-height:1.6em;} .footer-cs p.business-hours {margin:0; padding:10px 0 0; line-height:1.7; font-size:0.8571rem;} /* footer-bank */ .footer-bank {} .footer-bank .account {margin:10px 0 5px; font-size:1.5rem; line-height:1.1; font-weight:bold;} .footer-bank .account a { float: right; margin-top: 0; margin-left: 10px; padding: 5px 10px; font-weight: 500; font-size: 0.8125rem !important; } .footer-bank .bank-name {display:block; margin-bottom:5px; font-size:1.143rem;} .footer-bank p.holder {margin:0; padding:0 0 15px 0; line-height:1.6; border-bottom:1px dotted #ddd;} .footer-bank .checkout-link { display:flex; justify-content:space-between; margin-top:15px; } .footer-bank .checkout-link a {flex:1 1 33%; margin:0 5px; padding:10px 0; text-align:center; line-height:1.5; font-size:0.9375rem !important;} /* footer-board (게시판 최근글 위젯) */ .footer-contents .footer-board {margin-top:12px;} .footer-contents .footer-board h3 {display:flex; align-items:center; justify-content:space-between; margin:0 0 5px; padding:0; font-size:1rem; font-weight:600; color:#333;} .footer-contents .footer-board h3 a.more {font-size:0.8125rem; font-weight:400; color:#999;} .footer-contents .footer-board h3 a.more:hover {color:#333;} .footer-contents .footer-board ul {margin:0; padding:0; list-style:none;} .footer-contents .footer-board ul li {margin:0; padding:1px 0;} .footer-contents .footer-board ul li a {display:flex; align-items:center; justify-content:space-between; gap:10px; color:#555; text-decoration:none;} /* 공지 제목 밑줄 제거 */ .footer-contents .footer-board ul li a .subject { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.875rem; overflow:hidden; display:block; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-wrap: break-word !important; max-height:calc(1em * 1.4 * 2); white-space:normal; } .footer-contents .footer-board ul li a .date {flex:0 0 auto; color:#999; font-size:0.8125rem;} .footer-contents .footer-board ul li a:hover .subject {color:#000;} /* hover 시에도 밑줄 없이 색상만 강조 */ /* footer-quick (고객 편의 바로가기) */ .footer-quick ul.quick-links {display:flex; gap:6px; margin:15px 0 18px; padding:0 0 18px; list-style:none; border-bottom:1px dotted #ddd;} .footer-quick ul.quick-links li {flex:1 1 20%; margin:0; padding:0; text-align:center;} .footer-quick ul.quick-links li a {display:block; color:#555;} .footer-quick ul.quick-links li a i {display:block; margin-bottom:8px; font-size:1.857rem; line-height:1; color:#333;} .footer-quick ul.quick-links li a span {display:block; font-size:0.8125rem; letter-spacing:-0.03em;} .footer-quick ul.quick-links li a:hover {color:#000;} .footer-quick ul.quick-links li a:hover i {color:#000;} /* 이메일로 디자인 파일 보내기(대체 구성 col2 하단) — 계좌 블록과 시각 간격 */ .footer-design h3.mail-title {padding:15px 0 5px;} /* footer-menu */ .footer-menu {border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#f9f9f9;} .footer-menu ul { display:flex; justify-content:flex-start; margin:0; padding:0; } .footer-menu ul li {position:relative; padding:15px 20px;} .footer-menu ul li:first-child {padding-left:0;} .footer-menu ul li:before {content:''; position:absolute; top:18px; left:0; display:block; width:1px; height:12px; background:#ddd;} .footer-menu ul li:first-child:before {display:none;} .footer-menu ul li a {color:#666; font-size:0.875rem; font-weight:500;} .footer-address { display:flex; justify-content:space-between; } .footer-address > div {padding:20px;} .footer-address .address {flex:1 1 75%; padding-left:0;} .footer-address .escrow {flex:1 1 25%; padding-right:0;} /* address */ .footer-address .address {font-size: 0.875rem; font-weight:500;} .footer-address .address > p {line-height:1.8; color:#888; letter-spacing:-0.03rem;} .footer-address .address span {} .footer-address .address span:before {content:''; display:inline-block; position:relative; top:1px; width:1px; height:11px; margin:0 7px; background:#ddd;} .footer-address .address span.first:before {display:none;} .footer-address .address a.btn.bizinfo {margin-left:5px; padding:2px 7px; text-align:center; font-size:0.7857rem; border:1px solid #ddd; border-radius:3px; background:#fff;} .footer-address .address a.btn.bizinfo:hover {color:#fff; border-color:#666; background:#666;} .footer-address .address p.law {line-height:1; color:#999; font-style:normal;} .footer-address .address address {color:#444; font-style:normal;} /* escrow */ .footer-address .escrow {color:#777;} .footer-address .escrow h3 {margin:0; padding:0 0 10px; font-size:1rem; font-weight:600; color:#666;} .footer-address .escrow p {font-size:0.8125rem; letter-spacing:-0.03rem; font-weight:500;} .footer-address .escrow a.btn.escrow {padding:2px 5px 3px; text-align:center; font-size:0.7857rem; border:1px solid #ddd; border-radius:3px; background:#fff;} .footer-address .escrow a.btn.escrow:hover {color:#fff; border-color:#666; background:#666;} .footer-address .escrow a.btn.escrow i {position:relative; top:1px; margin-right:0;} /* 로그인 페이지등 간소화 카피라이트 */ p.copyright {margin-top:60px; text-align:center; color:#666;} /* Fomantic 토글(.ui.toggle.checkbox) 축소 */ .ui.toggle.checkbox {min-height:1.1rem;} .ui.toggle.checkbox input {width:1.9rem; height:1.1rem;} .ui.toggle.checkbox label {padding-left:2.5rem;} .ui.toggle.checkbox label::before {width:1.9rem; height:1.1rem; top:50%; margin-top:-0.55rem;} .ui.toggle.checkbox label::after {width:1.1rem; height:1.1rem; top:50%; margin-top:-0.55rem;} .ui.toggle.checkbox input ~ label::after {left:-0.05rem;} .ui.toggle.checkbox input:checked ~ label::after {left:0.85rem;} .ui.right.aligned.toggle.checkbox label {padding-right:2.5rem;} /* ===== 하단 고정 퀵바 ===== */ #bottom-quick-bar {position:fixed; left:0; bottom:0; width:100%; z-index:900;} #bottom-quick-bar .container {position:relative;} #bottom-quick-bar .qb-inner { position:relative; bottom:0; display:flex; align-items:center; height:60px; max-width:1200px; margin:0 auto; padding:0 10px; border-radius:0 6px 0 0; /* 1. 기본 투명 배경 */ background: rgba(255, 255, 255, 0.1); /* 2. 블러 처리 (iOS 스타일) */ backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); /* 3. 유리의 두께감과 하이라이트 */ border: 1px solid rgba(0, 0, 0, 0.15); /* 밝은 테두리 */ border-bottom:0; /* 4. 내부 하이라이트 (빛이 맺히는 느낌) */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), /* 얇은 내부 테두리 */ 0 10px 20px rgba(0, 0, 0, 0.3); /* 바닥에 깔리는 그림자 */ } @media (pointer: coarse) { #bottom-quick-bar .qb-inner { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255, 255, 255, 0.95); } } #bottom-quick-bar .qb-inner:hover {background-color:#fff;} #bottom-quick-bar .qb-handle {position:absolute; left:-50px; top:0; flex:0 0 auto; width:50px; height:60px; border:0; cursor:pointer; background:rgba(0,0,0,0.5); color:#fff; border-radius:6px 0 0 0;} #bottom-quick-bar .qb-handle:hover {background:rgba(0,0,0,0.8); } #bottom-quick-bar .qb-handle i {margin:0; font-size:1.7rem;} #bottom-quick-bar .qb-home {flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:46px; background:var(--point-color); color:#fff; border-radius:4px; font-size:0.75rem; font-weight:400; text-decoration:none;} #bottom-quick-bar .qb-home:hover {background-color:var(--point-color);} #bottom-quick-bar .qb-home i {margin:0 0 2px; font-size:1.15rem; font-weight:400; line-height:0.7; padding-top:8px;} #bottom-quick-bar .qb-search {flex:0 1 300px; height:60px; padding:10px 30px; border-right:1px solid rgba(0,0,0,0.06);} #bottom-quick-bar .qb-search .ui.input {width:100%;} #bottom-quick-bar .qb-search input {width:100%; height:40px; padding:0 42px 0 16px; border:2px solid var(--point-color); border-radius:24px; background:#f6f6f6; font-size: 0.9375rem;} #bottom-quick-bar .qb-search-btn {position:absolute; top:0; right:0; width:40px; height:40px; border:0; background:none; cursor:pointer; color:var(--point-color);} #bottom-quick-bar .qb-search-btn i {margin:0; font-size:1.25rem; font-weight:500;} #bottom-quick-bar .qb-item {flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:54px; height:60px; padding:14px 15px; color:#666; font-size:0.75rem; font-weight:500; text-decoration:none; position:relative; border-right:1px solid rgba(0,0,0,0.06); border-left:1px solid rgba(255,255,255,0.4);} #bottom-quick-bar .qb-item i {margin:5px 0 6px; font-size:1.25rem;} #bottom-quick-bar .qb-item:hover {color:#000;} #bottom-quick-bar .qb-badge {position:absolute; top:3px; right:13px; min-width:18px; padding:2px 5px 0 5px; background:var(--point-color); color:#fff; font-size:0.75rem; line-height:1; border-radius:18px; text-align:center;} #bottom-quick-bar .qb-recent {flex:0 0 auto; display:flex; align-items:center; height:60px; gap:4px; padding-left:20px; border-left:1px solid rgba(255,255,255,0.4);} #bottom-quick-bar .qb-thumb {display:block; width:38px; height:38px; border:1px solid #eee; overflow:hidden; border-radius:4px;} #bottom-quick-bar .qb-thumb img {width:100%; height:100%; object-fit:cover;} /* 노이미지 폴백 박스 — 썸네일 부재/로드실패 시 아이콘(퀵바 썸네일 크기 채움) */ #bottom-quick-bar .qb-thumb .no-image {width:100%; height:100%; align-items:center; justify-content:center; background:#f5f5f5; color:#d1d1d1; font-size:1rem;} #bottom-quick-bar .qb-more {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin-left:10px; border:1px solid #666; border-radius:50%; color:#666; text-decoration:none;} #bottom-quick-bar .qb-more i {margin:0; font-size:0.9rem;} #bottom-quick-bar .qb-right-first {position:relative; margin-left:auto;} #bottom-quick-bar .qb-right-first:before { content:''; display:block; position:absolute; left:-2px; width:1px; height:60px; background:rgba(0,0,0,0.06); } #bottom-quick-bar .qb-item.qb-right-last {border-right:0;} #bottom-quick-bar .qb-scroll {flex:0 0 auto; width:46px; height:46px; border:0; cursor:pointer; background:#404d69; color:#fff; border-radius:4px;} #bottom-quick-bar .qb-scroll i {margin:0; font-size:1.2rem;} #bottom-quick-bar .qb-scroll.to-top i {transform:rotate(180deg);} /* 접힘: 핸들만 가운데 탭으로 노출 */ /* 접힘 시 핸들 위치를 펼침과 동일하게 유지 (좌측 flex-start + 동일 좌우패딩) */ #bottom-quick-bar.collapsed .qb-inner {bottom:-60px;} #bottom-quick-bar.collapsed .qb-inner > *:not(.qb-handle) {display:none;} /* 접힘 시 투명 컨테이너가 하단 60px 영역의 클릭을 가로채지 않도록 통과시키고, 핸들만 클릭 가능하게 */ #bottom-quick-bar.collapsed {pointer-events:none;} #bottom-quick-bar.collapsed .qb-handle {pointer-events:auto;} #bottom-quick-bar.collapsed .qb-handle {box-shadow:0 0 6px rgba(0,0,0,0.15);} #bottom-quick-bar.collapsed .qb-handle i {transform:rotate(180deg);} /* 바에 컨텐츠가 가려지지 않도록: 흐름상 spacer 가 바 높이만큼 문서 하단 공간 확보(접히면 0) */ .qb-spacer {height:66px;} .qb-spacer.collapsed {height:0;} /* 퀵바 아이콘/글자 세로 정렬 미세보정 (Fomantic 아이콘 글리프가 위로 떠 보이는 것 보정) */ /* 모든 바 아이콘(버튼 안 handle/scroll 포함) 1px 하향 + Fomantic 우측마진 제거 */ #bottom-quick-bar i.icon {margin-right:0; position:relative; top:1px;} #bottom-quick-bar .qb-item span {line-height:1.2;} /* HOME 아이콘만 글리프가 위로 떠 보여 추가 하향 보정 */ #bottom-quick-bar .qb-home i.icon {top:3px;} /* 알림 토스트 폰트 축소: 기본 크기가 과도하게 커서 줄인다 */ .ui.toast-container .toast-box, .ui.toast {font-size:0.85rem;} .ui.toast > .content > .header {font-size:0.95rem; margin-bottom:2px;} /* ===== 디자인관리 팝업 (footer 출력) ===== */ .design-popup {position:fixed; background:#fff; border:1px solid #333; box-shadow:0 3px 16px rgba(0,0,0,0.28); max-width:96vw;} .design-popup .design-popup-head {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#333; color:#fff;} .design-popup .design-popup-head .title {font-size:0.95rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .design-popup .design-popup-x {flex:0 0 auto; width:24px; height:24px; border:0; background:none; color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; padding:0;} .design-popup .design-popup-body {overflow:auto; padding:0; background:#fff;} .design-popup .design-popup-body img {max-width:100%;} .design-popup .design-popup-foot {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:#f6f6f6; border-top:1px solid #eee; font-size:0.85rem;} .design-popup .design-popup-foot label {display:flex; align-items:center; gap:5px; cursor:pointer; color:#444;} .design-popup .design-popup-foot button {border:1px solid #ccc; background:#fff; padding:5px 14px; cursor:pointer; border-radius:3px; font-size:0.85rem;} .design-popup .design-popup-foot button:hover {background:#f0f0f0;} /* 퀵바 보정2: 버튼 아이콘 flex 중앙정렬 + 라벨 줄바꿈 방지(찌그러짐 방지) */ #bottom-quick-bar .qb-handle, #bottom-quick-bar .qb-scroll {display:flex; align-items:center; justify-content:center;} #bottom-quick-bar .qb-item span {white-space:nowrap; line-height:1.3;} /* compact selection 드롭다운 */ .ui.compact.selection.dropdown > .menu, .ui.compact.selection.dropdown > .menu:not(.multiline) {width: calc(100% + 2px) !important; min-width: calc(100% + 2px) !important; margin: 0 -1px !important;} /* 목록 head 의 상품표시 개수 드롭다운 */ .product-sorting .ui.compact.selection.dropdown > .menu {max-height: none !important; overflow-y: visible !important;} .btn-view-mobile-version { display: block; width: 100%; padding: 22px 10px; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff !important; background: #333; text-decoration: none; box-sizing: border-box; } .btn-view-mobile-version:hover, .btn-view-mobile-version:focus { background: #000; color: #fff !important; } .btn-view-mobile-version i { margin-right: 6px; } /* ===== Flatpickr 날짜선택 하단 단축버튼(오늘/없음) — 관리자와 동일 톤 ===== */ .flatpickr-shortcuts { display: flex; justify-content: space-between; padding: 8px 10px; border-top: 1px solid #e2e8f0; background: #f8fafc; } .flatpickr-shortcut-btn { padding: 5px 14px; font-size: 12px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; } .flatpickr-shortcut-clear { color: #64748b; background: #fff; border: 1px solid #e2e8f0; } .flatpickr-shortcut-clear:hover { background: #f1f5f9; border-color: #cbd5e1; } .flatpickr-shortcut-today { color: #fff; background: #333; border: 1px solid #333; } .flatpickr-shortcut-today:hover { background: #000; border-color: #000; } /* 비공개 게시판 비밀번호 확인 모달(secret/detail/comment 공통 .board.password) */ .ui.modal.board.password .inline.fields { flex-wrap: nowrap; } .ui.modal.board.password .inline.fields > label { white-space: nowrap; flex-shrink: 0; margin-right: .75em; } .ui.modal.board.password .inline.fields > .field { flex: 1 1 auto; min-width: 0; } .ui.modal.board.password .inline.fields > .field .ui.input, .ui.modal.board.password .inline.fields > .field input { width: 100%; min-width: 0; } /* 주소 찾기 우편번호 입력칸 */ .ui.action.input > input.zipcode-input { flex: 0 0 auto !important; width: 120px !important; min-width: 0 !important; max-width: 120px !important; } /* 언어 스위처 */ /* GNB 우측 묶음: 로그인/장바구니 메뉴 + 언어 스위처를 한 줄로(세로 중앙정렬) */ .gnb-right { display:flex; align-items:center; margin-left:auto; } /* 언어 선택 드롭다운 — GNB 맨 끝. 호버 시 언어목록 노출(JS 비의존). 세로 중앙정렬 */ .language-switcher { position:relative; display:inline-flex; align-items:center; margin:0 0 0 10px; } .language-switcher .lang-current { display:inline-flex; align-items:center; cursor:pointer; color:#777; line-height:1; padding:4px; white-space:nowrap; } .language-switcher .lang-current:hover { color:#333; } .language-switcher .lang-current > i { font-size:1.25rem; } /* 상단 공간 절약: 지구본 아이콘만 노출 — 라벨/캐럿 숨김(되돌리려면 아래 display:none 해제) */ .language-switcher .lang-current .lang-label, .language-switcher .lang-current .caret { display:none; } .language-switcher .lang-current .caret { transition:transform 0.2s ease; } .language-switcher:hover .lang-current { color:#333; } .language-switcher:hover .lang-current .caret { transform:rotate(180deg); } /* 드롭다운 메뉴: 트리거 바로 아래(간격 없이) 우측정렬. 호버 유지 위해 컨테이너 hover 로 노출 */ .language-switcher .lang-menu { position:absolute; top:100%; right:0; z-index:1100; min-width:120px; margin:0; padding:5px 0; list-style:none; background:#fff; border:1px solid #ddd; border-radius:3px; box-shadow:0 6px 16px rgba(0,0,0,0.10); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity 0.15s ease, transform 0.15s ease; } .language-switcher:hover .lang-menu { opacity:1; visibility:visible; transform:translateY(0); } .language-switcher .lang-menu li { padding:0; } .language-switcher .lang-menu .lang-item { display:block; padding:7px 14px; color:#666; font-size:0.8125rem; line-height:1.3; text-decoration:none; white-space:nowrap; } .language-switcher .lang-menu .lang-item:hover { background:#f5f5f5; color:#111; } .language-switcher .lang-menu .lang-item.active { font-weight:700; color:#111; } /* ── 해외(비한국어) 국가/국가번호 셀렉트 — 전화입력과 한 줄 배치 (다국어 확장) ── */ .intl-phone-group { display: flex; gap: 6px; align-items: stretch; } /* 닫힘 표시가 '+82' 뿐이라 좁게 고정한다. Fomantic 의 min-width 14em 을 이겨야 해서 특이도를 올린다 */ .intl-phone-group .ui.selection.dropdown.intl-dial-select { flex: 0 0 100px; width: 100px; min-width: 100px; max-width: 100px; white-space: nowrap; padding-top: 0; padding-bottom: 0; padding-left: .8em; padding-right: 2em; height: auto; min-height: 0; align-self: stretch; display: flex; align-items: center; } .intl-phone-group .ui.selection.dropdown.intl-dial-select > input.search { padding-top: 0; padding-bottom: 0; padding-left: .8em; height: 100%; } /* 목록은 국가명 전체라 닫힘 폭과 따로 논다 */ .intl-phone-group .ui.selection.dropdown.intl-dial-select > .menu { min-width: 260px; width: auto; } /* 입력이 남는 폭을 통째로 먹어 과대해지지 않게 최대폭 캡(전화번호 길이 기준) */ .intl-phone-group .ui.input { flex: 1 1 auto; min-width: 0; max-width: 320px; display: flex; } .intl-phone-group .ui.input > input { width: auto; flex: 1 1 auto; min-width: 0; } .intl-phone-group .ui.action.input > .button { flex: 0 0 auto; } /* 폼 안에서는 Fomantic 이 width:auto·min-width:auto 를 더 센 선택자로 걸어 둔다. 그보다 세게 잡아야 폭이 내용만큼 줄지 않는다 */ .ui.selection.dropdown.intl-country-select, .ui.form .field > .ui.selection.dropdown.intl-country-select, .ui.form .inline.fields .field > .ui.selection.dropdown.intl-country-select { flex: 1 1 auto; width: 100%; min-width: 200px; max-width: 320px; } .intl-phone-group + .intl-phone-group { margin-top: 8px; } /* 신청폼 해외 우편번호 */ #seller-apply input[name="companyZipcode"]:not([readonly]), #apply-apply input[name="companyZipcode"]:not([readonly]), #info-page input[name="zipcode"]:not([readonly]) { max-width: 180px; } /* 상품카드 스타일 10종 (PC) — 클래스 하나(gs-style1~10)로 갈아탄다 */ /* 공통 : style2~10 은 코드 오버레이 해제(썸네일을 가리지 않게) */ .product.list.thumb ul.grid li.item.gs-style2 .description .code, .product.list.thumb ul.grid li.item.gs-style3 .description .code, .product.list.thumb ul.grid li.item.gs-style4 .description .code, .product.list.thumb ul.grid li.item.gs-style5 .description .code, .product.list.thumb ul.grid li.item.gs-style6 .description .code, .product.list.thumb ul.grid li.item.gs-style7 .description .code, .product.list.thumb ul.grid li.item.gs-style8 .description .code, .product.list.thumb ul.grid li.item.gs-style9 .description .code, .product.list.thumb ul.grid li.item.gs-style11 .description .code, .product.list.thumb ul.grid li.item.gs-style10 .description .code { position:static; top:auto; right:auto; left:auto; display:inline-block; width:auto; margin:0 0 4px; padding:0; color:#868e96; background:none; border-radius:0; text-align:left; letter-spacing:0.02em; white-space:nowrap; } .product.list.thumb ul.grid li.item.gs-style2 .description .code:before, .product.list.thumb ul.grid li.item.gs-style3 .description .code:before, .product.list.thumb ul.grid li.item.gs-style4 .description .code:before, .product.list.thumb ul.grid li.item.gs-style5 .description .code:before, .product.list.thumb ul.grid li.item.gs-style6 .description .code:before, .product.list.thumb ul.grid li.item.gs-style7 .description .code:before, .product.list.thumb ul.grid li.item.gs-style8 .description .code:before, .product.list.thumb ul.grid li.item.gs-style9 .description .code:before, .product.list.thumb ul.grid li.item.gs-style11 .description .code:before, .product.list.thumb ul.grid li.item.gs-style10 .description .code:before {display:none;} .product.list.thumb ul.grid li.item.gs-style4 .description .info, .product.list.thumb ul.grid li.item.gs-style7 .description .info, .product.list.thumb ul.grid li.item.gs-style10 .description .info {display:flex; flex-direction:column; align-items:flex-start;} /* style2 : 상품번호 왼쪽 · 찜 하트 오른쪽 한 줄 (요청 레퍼런스형) */ .product.list.thumb ul.grid li.item.gs-style2 .box {display:grid; grid-template-columns:1fr auto; align-items:start;} .product.list.thumb ul.grid li.item.gs-style2 .thumbnail {grid-column:1 / -1;} .product.list.thumb ul.grid li.item.gs-style2 .thumbnail .btns {display:none;} .product.list.thumb ul.grid li.item.gs-style2 .description {grid-column:1; grid-row:2; margin-top:10px;} .product.list.thumb ul.grid li.item.gs-style2 > .box > .btns {grid-column:2; grid-row:2; margin:10px 0 0; padding:0; display:flex; justify-content:flex-end;} .product.list.thumb ul.grid li.item.gs-style2 > .box > .btns .zoom {display:none;} /* 하트만 남긴다 */ .product.list.thumb ul.grid li.item.gs-style2 > .box > .btns .wish {padding:0; border:0; background:none;} .product.list.thumb ul.grid li.item.gs-style2 > .box > .btns .wish span {display:none;} /* ── style3 : 코드를 흐린 인라인 텍스트로 (가장 담백) ── */ .product.list.thumb ul.grid li.item.gs-style3 .description .code {color:#adb5bd;} /* ── style4 : 가격을 상품명 위로 + 코드는 상품명 아래 (가격 우선) ── */ .product.list.thumb ul.grid li.item.gs-style4 .description {display:flex; flex-direction:column;} .product.list.thumb ul.grid li.item.gs-style4 .description .price.area {order:1; margin-bottom:3px;} .product.list.thumb ul.grid li.item.gs-style4 .description .info {order:2;} .product.list.thumb ul.grid li.item.gs-style4 .description .info .name {order:1;} .product.list.thumb ul.grid li.item.gs-style4 .description .info .summary {order:2;} .product.list.thumb ul.grid li.item.gs-style4 .description .info .code {order:3; margin:3px 0 0;} .product.list.thumb ul.grid li.item.gs-style4 .description .price.area .price {font-size:1.0625rem; font-weight:700;} /* ── style5 : 전체 가운데 정렬 (코드도 가운데) ── */ .product.list.thumb ul.grid li.item.gs-style5 .description {text-align:center;} .product.list.thumb ul.grid li.item.gs-style5 .description .info .name {text-align:center;} /* ── style6 : 라운드 썸네일 + 코드 테두리 배지 + 상품명 굵게 ── */ .product.list.thumb ul.grid li.item.gs-style6 .thumbnail {border-radius:10px; overflow:hidden;} .product.list.thumb ul.grid li.item.gs-style6 .description .code {padding:1px 7px; color:#495057; border:1px solid #dee2e6; border-radius:4px;} .product.list.thumb ul.grid li.item.gs-style6 .description .info .name {font-weight:700;} /* ── style7 : 상품명 2줄 고정 + 가격 크게, 코드는 가격 옆 작은 글씨로 남긴다(숨기지 않음) ── */ .product.list.thumb ul.grid li.item.gs-style7 .description .info .name {order:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.9em;} .product.list.thumb ul.grid li.item.gs-style7 .description .info .summary {order:2;} .product.list.thumb ul.grid li.item.gs-style7 .description .info .code {order:3; margin:2px 0 0; font-size:0.6875rem;} .product.list.thumb ul.grid li.item.gs-style7 .description .price.area .price {font-size:1.125rem; font-weight:800;} /* ── style8 : 상품명 아래 구분선 + 가격 우측 정렬 (코드는 상품명 위) ── */ .product.list.thumb ul.grid li.item.gs-style8 .description .info {padding-bottom:7px; border-bottom:1px solid #eee;} .product.list.thumb ul.grid li.item.gs-style8 .description .price.area {margin-top:7px; text-align:right;} /* ── style9 : 테두리 있는 박스 카드 (칸이 또렷하게 나뉨) ── */ .product.list.thumb ul.grid li.item.gs-style9 .box {padding:10px; border:1px solid #eee; border-radius:8px; background:#fff;} .product.list.thumb ul.grid li.item.gs-style9 .description {margin-top:9px;} .product.list.thumb ul.grid li.item.gs-style9 .description .code {color:#495057; font-weight:600;} /* 한 줄(row) 안의 카드 테두리 높이를 맞춘다 */ /* 슬라이드 위젯(ul.grid.swiper-wrapper)은 반드시 제외한다 */ .product.list.thumb ul.grid:not(.swiper-wrapper):has(> li.item.gs-style9) {display:flex; flex-wrap:wrap; align-items:stretch;} .product.list.thumb ul.grid:not(.swiper-wrapper) li.item.gs-style9 {display:flex; flex-shrink:0;} /* 슬라이드 안에서도 줄높이를 맞추려면 슬라이드의 height */ .product.list.thumb ul.grid.swiper-wrapper > li.item.gs-style9 {height:auto; align-self:stretch;} /* 슬라이드 좌우 끝 카드 테두리 보정 */ .product.list.thumb ul.grid.swiper-wrapper > li.item.gs-style9 > .box {margin-left:1px; margin-right:1px;} .product.list.thumb ul.grid li.item.gs-style9 > .box {display:flex; flex-direction:column; flex:1 1 auto; height:100%; min-width:0; box-sizing:border-box;} .product.list.thumb ul.grid li.item.gs-style9 > .box > .thumbnail {flex:0 0 auto;} .product.list.thumb ul.grid li.item.gs-style9 > .box > .description {display:flex; flex-direction:column; flex:1 1 auto; min-width:0;} .product.list.thumb ul.grid li.item.gs-style9 > .box > .description > ul.price.area {margin-top:auto;} /* ── style10 : 코드를 상품명 '아래' 테두리 배지로 + 가격 강조 ── */ .product.list.thumb ul.grid li.item.gs-style10 .description .info .name {order:1;} .product.list.thumb ul.grid li.item.gs-style10 .description .info .summary {order:2;} .product.list.thumb ul.grid li.item.gs-style10 .description .info .code {order:3; margin:5px 0 0; padding:2px 8px; color:#495057; border:1px solid #dee2e6; border-radius:4px;} .product.list.thumb ul.grid li.item.gs-style10 .description .price.area .price {font-size:1.0625rem; font-weight:700; color:#111;} /* 혜택 뱃지 (컬러인쇄·인쇄무료·무료배송 등) */ .product.list.thumb ul.grid li.item .description ul.benefit-badges, .benefit-badges {display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:6px 0 0; padding:0; list-style:none; font-size:0;} .product.list.thumb ul.grid li.item .description ul.benefit-badges:before {display:none;} .product.list.thumb ul.grid li.item .description ul.benefit-badges > li.badge, .benefit-badges .badge {display:inline-block; width:auto; margin:0; padding:3px 5px; font-size:0.75rem; font-weight:600; line-height:1.3; letter-spacing:-0.01em; border-radius:4px; white-space:nowrap;} /* 인쇄/제작 계열 — 붉은 톤 */ .benefit-badges .gb-colorPrint {color:#e03131; background:#fff0f0;} .benefit-badges .gb-customMade {color:#e8590c; background:#fff4e6;} .benefit-badges .gb-domestic {color:#2f9e44; background:#ebfbee;} .benefit-badges .gb-event {color:#c2255c; background:#fff0f6;} /* 무료 제공 계열 — 회색 톤(혜택이 여러 개 붙어도 시끄럽지 않게) */ .benefit-badges .gb-free-print, .benefit-badges .gb-free-case, .benefit-badges .gb-free-gift, .benefit-badges .gb-free-sticker, .benefit-badges .gb-free-label {color:#495057; background:#f1f3f5;} /* 무료배송 — 파란 톤(가장 강한 구매 유인) */ .benefit-badges .gb-freeShip {color:#1971c2; background:#e7f5ff;} /* 기본형(style1)은 혜택 뱃지를 노출하지 않는다 */ .product.list.thumb ul.grid li.item.gs-style1 .description ul.benefit-badges, .product.list.thumb ul.grid li.item:not([class*="gs-style"]) .description ul.benefit-badges, .product.list.webzine ul.grid li.item.gs-style1 .description ul.benefit-badges, .product.list.webzine ul.grid li.item:not([class*="gs-style"]) .description ul.benefit-badges {display:none;} /* 웹진형(.product.list.webzine) 보정 */ .product.list.webzine ul.grid li.item .description ul.benefit-badges {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px; margin:6px 0 0; padding:0; text-align:left; vertical-align:baseline;} .product.list.webzine ul.grid li.item .description ul.benefit-badges:before {display:none;} .product.list.webzine ul.grid li.item .description ul.benefit-badges > li.badge {display:inline-block; width:auto; margin:0; padding:3px 8px; font-size:0.625rem; font-weight:600; line-height:1.3; border-radius:4px; white-space:nowrap;} /* 웹진형 상품명 밑줄 제거 */ .product.list.webzine ul.grid li.item .description a.name, .product.list.webzine ul.grid li.item .description a.name:hover {text-decoration:none;} /* ── style11 : 코드를 진한 알약 배지로 (상품명 위, 가장 눈에 띔) ── */ .product.list.thumb ul.grid li.item.gs-style11 .description .code {padding:2px 8px; color:#fff; background:#495057; border-radius:11px;} /* 상품번호 — 절대배치 해제 후 설명영역 첫 줄로 */ .product.list.thumb ul.grid li.item.gs-style11 .description .code {position:static; top:auto; right:auto; display:inline-block; width:auto; margin:0; padding:0; color:#868e96; background:none; border-radius:0; text-align:left; letter-spacing:0.02em; white-space:nowrap;} .product.list.thumb ul.grid li.item.gs-style11 .description .code:before {display:none;} .product.list.thumb ul.grid li.item.gs-style11 .description .info {display:flex; flex-direction:column; align-items:flex-start;} .product.list.thumb ul.grid li.item.gs-style11 .description .info .name {order:2; margin-top:5px;} .product.list.thumb ul.grid li.item.gs-style11 .description .info .summary {order:3;} /* ===== 상품카드 특가 표기 (공통 import_product_items) ===== 특가가 걸린 상품에만 붙는다. ★flex 를 쓰지 않는다 — 카드스타일(gs-style1~11)마다 정렬이 왼쪽·가운데(2·5)·오른쪽(8)으로 달라서, flex 로 만들면 그 text-align 을 무시해 금액줄만 왼쪽에 붙는다(남은시간 줄과 어긋난다). 특가금액은 그 카드의 기존 가격 스타일을 그대로 쓰고, 정가 취소선만 em 으로 따라 줄인다. 특가 전용 페이지(.deal-page)는 자기 CSS 가 더 구체적이라 그대로다. */ .product.list ul.grid li.item .description ul.price.area li.price .special-sale-badge { display:inline-block; margin-right:5px; padding:2px 7px; border-radius:999px; background:var(--point-color); color:#fff; font-size:0.75rem; font-weight:700; font-style:normal; line-height:1.4; vertical-align:middle; } .product.list ul.grid li.item .description ul.price.area li.price .special-sale-price {vertical-align:middle;} .product.list ul.grid li.item .description ul.price.area li.price .deal-origin { display:inline-block; margin-left:5px; font-size:0.8em; font-weight:400; color:#bdbdbd; text-decoration:line-through; vertical-align:middle; } .product.list ul.grid li.item .description ul.price.area li.price .deal-origin .money, .product.list ul.grid li.item .description ul.price.area li.price .deal-origin .prefix, .product.list ul.grid li.item .description ul.price.area li.price .deal-origin .suffix { font-size:inherit; font-weight:inherit; color:inherit; } /* 남은시간 — 블록이라 카드의 정렬(왼쪽/가운데/오른쪽)을 그대로 따른다. 숫자 폭 고정으로 매초 안 흔들리게 */ .product.list ul.grid li.item .description ul.price.area li.deal-remain { margin-top:4px; font-size:0.8125rem; color:#d03935; font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; } .product.list ul.grid li.item .description ul.price.area li.deal-remain .ended {color:#999; font-weight:400;} /* GNB 회원 이름: 본인 로그인 확인용이라 다른 메뉴보다 굵게 */ .gnb-menu > li > a.user-name {font-weight:700;} /* 이미지 유사검색 UI */ /* 검색창 카메라 버튼 + 떠있는 뱃지 */ .header-search .ui.icon.input { position: relative; } /* 카메라 버튼 */ .header-search .ui.input > button.image-search-button, .header-search.round-box .ui.input > button.image-search-button { position: absolute; top: 50%; transform: translateY(-50%); right: var(--is-cam-right, 46.5px); /* 기본 테마 입력창 오른쪽이 x.5 라 .5 를 태워 정수에 맞춘다 */ /* 폭·높이 고정: 하프픽셀 래스터로 글자가 뿌옇게 되는 것 방지 */ width: var(--is-cam-size, 25px); height: var(--is-cam-size, 25px); display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; color: #8c8c8c; /* 살짝 흐리게 */ font-size: var(--is-cam-size, 25px); line-height: 1; cursor: pointer; z-index: 3; transition: color .15s ease; } .header-search .ui.input > button.image-search-button:hover { color: #b142d6; } .header-search .image-search-button .camera.icon { margin: 0; } /* 카메라 아이콘 위에 둥둥 떠있는 "이미지 검색" 뱃지 */ .header-search .image-search-badge { position: absolute; /* 카메라 바로 위에 변수 간격(--is-badge-gap)으로 배치 */ bottom: calc(100% + var(--is-badge-gap, 5px)); left: 50%; transform: translateX(-50%); background: #b142d6; color: #fff; font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; padding: 4px 8px; border-radius: 5px; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.2); /* 한 번 튀고 나머지 시간은 쉬는 바운스. keyframe 마다 translateX(-50%) 유지 필요 */ animation: imageSearchBadgeBounce 2.6s ease-in-out infinite; transform-origin: 50% 100%; /* will-change 미사용(정지 시 글자 흐림 방지) */ } /* 통통(더블 바운스): 크게 한 번 → 작게 한 번 튀고 정지 */ @keyframes imageSearchBadgeBounce { 0% { transform: translateX(-50%) translateY(0); } 6% { transform: translateX(-50%) translateY(-8px); } /* 1차: 크게 위로 */ 12% { transform: translateX(-50%) translateY(0); } 17% { transform: translateX(-50%) translateY(-4px); } /* 2차: 작게 위로 */ 22% { transform: translateX(-50%) translateY(0); } 100% { transform: translateX(-50%) translateY(0); } /* 나머지 시간 정지(쉼) */ } /* 모션 최소화 선호 사용자는 애니메이션 비활성화(접근성) */ @media (prefers-reduced-motion: reduce) { .header-search .image-search-badge { animation: none; } } .header-search .image-search-badge::after { /* 말풍선 꼬리 */ content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #b142d6; } /* 업로드 레이어(팝오버): 카메라 아이콘 아래 */ .image-search-popover { position: absolute; top: calc(100% - 3px); /* 입력창 아래, 카메라에 더 가깝게 위로 */ right: 0; width: 300px; background: #fff; border: 3px solid #b142d6; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 14px; z-index: 1200; display: none; text-align: left; } .image-search-popover.open { display: block; } .image-search-popover .arrow { /* 카메라 아이콘 방향 꼬리 */ /* 카메라 위치/크기 변수를 따라 카메라 중앙 아래를 가리킨다 */ position: absolute; top: -9px; right: calc(var(--is-cam-right, 46.5px) + var(--is-cam-size, 25px) / 2 - 6px); width: 12px; height: 12px; background: #fff; border-left: 3px solid #b142d6; border-top: 3px solid #b142d6; transform: rotate(45deg); } .image-search-dropzone { border: 2px dashed #cfcfcf; border-radius: 8px; padding: 20px 14px; text-align: center; color: #777; transition: border-color .15s ease, background .15s ease; } .image-search-dropzone.dragover { border-color: #f2c037; background: #fffae6; } .image-search-dropzone .images.icon { color: #cfcfcf; } .image-search-guide { margin: 8px 0 12px; font-size: 13px; line-height: 1.4; } .image-search-loading { text-align: center; padding: 6px 0; } .image-search-loading .image-search-preview { margin-bottom: 10px; } .image-search-loading .image-search-preview img { max-width: 110px; max-height: 110px; border-radius: 8px; border: 1px solid #eee; object-fit: contain; } .image-search-loading .image-search-status { color: #888; font-size:0.875rem; } /* 결과 페이지 */ /* 테두리는 회색 단색(브랜드색 그라데이션 미사용) */ .image-search-result-head { position:relative; display: flex; align-items: center; gap: 30px; padding: 25px 210px 25px 25px; margin-bottom: 20px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; } .image-search-result-head:after { position:absolute; top:50%; right:45px; font-family: 'remixicon'; content:'\f567'; display:block; margin-top:-60px; font-size:120px; line-height:1; height:120px; text-align:center; opacity:0.3; /* 배경 장식 아이콘: 회색 단색 */ color:#c8c8c8; } .image-search-result-head .uploaded img { width: 200px; height: 200px; object-fit: cover; border-radius: 0; border: 1px solid #eee; } .image-search-result-head .summary h2 { margin: 20px 0 6px; font-size:1.5rem; font-weight:600;} .image-search-result-head .summary .total.count { margin: 0; color: #666; font-size:1rem; font-weight:500;} /* 강조는 테마 포인트컬러 변수 */ .image-search-result-head .summary .total.count strong { color: var(--point-color);} .image-search-result-head .summary .privacy {padding-top:20px; font-size:0.875rem; color:#888;} .image-search-result-head .summary .privacy a {text-decoration:underline; color:#026bff;} .image-search-result-head .box-image {width:400px;} .image-search-result-head .box-image i {font-size:50px;} /* 유사도(관련도) 배지: 상품 카드 썸네일 위 */ .product .thumbnail { position: relative; } .product .thumbnail .similarity-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.68); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 10px; } .image-search-more { margin: 28px auto 10px; max-width: 320px; } /* 제안(유사 카테고리) 섹션 */ .image-search-suggest { margin-top: 40px; padding-top: 26px;} .image-search-suggest .suggest-title {position:relative; font-size: 1.125rem; margin: 0 0 16px; color: #333; font-weight:600; text-align:center;} .image-search-suggest .suggest-title:before { position:absolute; top:12px; content:''; display:block; width:100%; height:1px; background:#000; } .image-search-suggest .suggest-title span {position:relative; z-index:1; padding:0 10px; background:#fff;} /* 연관 카테고리 칩 */ .image-search-categories { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; padding-bottom: 4px; } .image-search-categories .cat-label { flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; color: #333; } .image-search-categories .cat-chips { list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: wrap; gap: 8px; } .image-search-categories .cat-chips li { margin: 0; } .image-search-categories .cat-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #e2e2e2; border-radius: 18px; background: #fff; color: #444; font-size: 0.875rem; line-height: 1; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .image-search-categories .cat-chips a:hover { border-color: #b142d6; color: #b142d6; background: #faf0fd; } .image-search-categories .cat-chips a .count { font-size: 0.875rem; font-weight: 700; color: #b0b0b0; } .image-search-categories .cat-chips a:hover .count { color: #b142d6; } /* 카테고리 광고 시 제목 옆 'AD' 뱃지(광고 고지) */ .image-search-suggest .suggest-title .suggest-ad { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid #c9cfda; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #8a93a6; line-height: 1; vertical-align: middle; } /* '이런 상품 찾아주세요' 상담 모달 */ /* 모달 공통 */ #find-item-modal { border-radius:4px; max-width:760px; } /* 커스텀 X: Fomantic 글리프 제거 후 2선으로 직접 그림 */ #find-item-modal > .close.icon { z-index:100; top:1rem; right:1rem; width:32px; height:32px; margin:0; opacity:1; font-size:0 !important; } #find-item-modal > .close.icon::before, #find-item-modal > .close.icon::after { content:"" !important; position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:#999; border-radius:1px; } #find-item-modal > .close.icon::before { transform:translate(-50%,-50%) rotate(45deg); } #find-item-modal > .close.icon::after { transform:translate(-50%,-50%) rotate(-45deg); } #find-item-modal > .close.icon:hover::before, #find-item-modal > .close.icon:hover::after { background:#333;} #find-item-modal .fi-head { padding:28px 28px 18px; background:#fff; border-radius:4px 4px 0 0; text-align:center; border-bottom:1px solid #f0f1f3; } #find-item-modal .fi-title { margin:0 0 8px; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:#1c1a17; } #find-item-modal .fi-title b { color:#ff5a1f; } #find-item-modal .fi-title .fi-title-ic { color:#ff5a1f; margin-right:4px; font-style:normal; } #find-item-modal .fi-desc { margin:0 auto; max-width:540px; font-size:0.9rem; color:#6b6661; line-height:1.55; } #find-item-modal .fi-body { padding:20px 28px 24px; background:#fff; } /* 탭 */ #find-item-modal .fi-tabs { display:flex; gap:0; background:#f8f8f8; padding:0; border-radius:0; margin-bottom:20px; } #find-item-modal .fi-tab { flex:1; padding:11px 12px; margin-left:-1px; border-radius:3px 3px 0 0; font-weight:600; font-size:1rem; color:#888; text-align:center; cursor:pointer; user-select:none; transition:background .12s,color .12s; border:1px solid #ccc; } #find-item-modal .fi-tab.active { background:#fff; color:#111; box-shadow:0 0 0px rgba(0,0,0,.00); border-bottom:1px solid #fff;} /* 쇼핑 검색 탭 활성 색은 사이트 포인트 컬러 */ #find-item-modal .fi-tab.fi-tab-search.active { color:var(--point-color); } /* 입력 공통 */ #find-item-modal input[type=text], #find-item-modal input[type=url], #find-item-modal input[type=tel], #find-item-modal input[type=email], #find-item-modal input[type=date], #find-item-modal select, #find-item-modal textarea { width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:0; background:#fff; font-size:0.875rem; color:#1c1a17; outline:none; transition:border-color .12s, box-shadow .12s; box-sizing:border-box; } #find-item-modal select {padding:11px 14px;} #find-item-modal input:focus, #find-item-modal select:focus, #find-item-modal textarea:focus { border-color:#333; box-shadow:0 0 0 0px rgba(255,90,31,.12); } #find-item-modal #fi-pane-search input:focus { border-color:var(--point-color); box-shadow:0 0 0 0px rgba(0,0,0,.06); } #find-item-modal textarea { min-height:82px; resize:vertical; } #find-item-modal .fi-input-block { margin-top:8px; } .fi-search-row { display:flex; gap:8px; } .fi-search-row input { flex:1; } #find-item-modal .fi-btn-dark { padding:0 18px; border-radius:3px; background:#1c1a17; color:#fff; font-weight:700; border:0; cursor:pointer; } /* 검색 버튼은 사이트 포인트 컬러 변수 */ #find-item-modal .fi-btn-point { padding:0 18px; border-radius:3px; background:var(--point-color); color:#fff; font-weight:700; border:0; cursor:pointer; } #find-item-modal .fi-btn-point:hover { background:var(--point-hover-color); } .fi-hint { margin:8px 2px 0; color:#8a847c; font-size:0.78rem; line-height:1.5; } /* 별도 행(full-width)으로 뺀 힌트는 위가 아니라 아래 여백을 준다 */ .fi-hint.fi-field-full { margin:0 2px 8px; } .fi-hint-sm { font-size:0.8125rem; } /* 검색 결과 */ #fi-results {padding-right:5px;} #fi-results .fi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; max-height:300px; overflow-y:auto; } .fi-result { display:flex; gap:10px; padding:10px; border:1px solid #ddd; border-radius:3px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s; } .fi-result:hover { border-color:#333; background:#fefefe; } .fi-result.selected { border-color:#000; background:#f2f2f2; } .fi-result img { width:62px; height:62px; border-radius:3px; object-fit:cover; flex-shrink:0; background:#f0eadf; } .fi-result .fi-r-title { font-size:0.875rem; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .fi-result .fi-r-price { font-size:0.8123rem; font-weight:600; color:#db0000; margin-top:4px; } .fi-result .fi-r-mall { font-size:0.8123rem; color:#989898; } .fi-skeleton { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; } .fi-sk { height:82px; border-radius:3px; background:linear-gradient(90deg,#f3ede3 0%,#faf5ec 50%,#f3ede3 100%); background-size:200% 100%; animation:fiSh 1.2s infinite; } @keyframes fiSh { 0%{background-position:200% 0} 100%{background-position:-200% 0} } .fi-empty { margin-top:14px; text-align:center; color:#8a847c; font-size:0.9rem; padding:20px; border:1px dashed #0d0d0d; border-radius:3px; background:#fafbfc; } /* 선택한 상품 */ .fi-selected-wrap { margin-top:16px; padding:14px; background:#f7f8fa; border:1px solid #ddd; border-radius:0; } .fi-selected-head { font-size:0.85rem; font-weight:700; color:#3a3631; margin-bottom:10px; } .fi-selected-head #fi-selected-count { color:#db0000; margin:0 3px; } .fi-selected-head .fi-hint-inline { font-size:0.8125rem; color:#8a847c; font-weight:400; margin-left:6px; } .fi-selected-list { display:flex; flex-direction:column; gap:8px; } .fi-empty-msg { text-align:center; padding:16px; color:#8a847c; font-size:0.82rem; } .fi-selected-item { display:flex; align-items:center; gap:10px; padding:10px; background:#fff; border:1px solid #ccc; border-radius:3px; } .fi-selected-item .fi-si-thumb { width:42px; height:42px; border-radius:3px; object-fit:cover; flex-shrink:0; background:#f0eadf; } .fi-selected-item .fi-si-body { flex:1; min-width:0; } .fi-selected-item .fi-si-title { font-size:0.8123rem; font-weight:600; color:#222; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fi-selected-item .fi-si-url { font-size:0.75rem; color:#8a847c; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fi-selected-item .fi-si-remove { padding:6px 10px; font-size:0.8125rem; color:#fff; font-weight:600; background:#db2828; border:0; border-radius:3px; cursor:pointer; } .fi-selected-item .fi-si-remove:hover { background:#D01919; } /* 순서 드래그: 핸들 + 드래그 중/드롭대상 상태 */ .fi-selected-item .fi-si-handle { flex-shrink:0; width:18px; text-align:center; color:#c4c4c4; cursor:grab; font-size:1rem; line-height:1; user-select:none; } .fi-selected-item .fi-si-handle:active { cursor:grabbing; } .fi-selected-item.fi-dragging { opacity:.45; } .fi-selected-item.fi-drag-over { border-color:#ff1f3f; box-shadow:inset 0 0 0 1px #ff1f3f; } /* 신청 폼 */ .fi-form { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; } .fi-field { display:flex; flex-direction:column; gap:6px; } .fi-field-full { grid-column:1/-1; } .fi-field label { font-size:0.875rem; font-weight:600; color:#3a3631; } .fi-field label .require, .fi-agree .fi-agree-chk .require { color:#ff0000; margin-left:2px; } .fi-field label .opt { color:#8a847c; font-weight:400; font-size:0.75rem; margin-left:3px; } .fi-chk-row { display:flex; gap:10px; } /* 해외(비한국어) 입력 — 이름/성 분리 2입력 한 줄 배치 */ .fi-field .fi-name-split { display:flex; gap:6px; } .fi-field .fi-name-split input { flex:1 1 auto; min-width:0; width:auto; } /* 해외 전화: 국가번호 셀렉트 80px 고정, 남는 폭은 번호 입력 */ .fi-field .intl-phone-group input { flex:1 1 auto; min-width:0; width:auto; } .fi-field .intl-phone-group .ui.selection.dropdown.intl-dial-select { border:1px solid #ddd; border-radius:3px; background:#fff; } /* 기본 border는 다른 입력칸(#ddd)과 동일, 세로 패딩 10px로 왼쪽 입력칸과 높이 맞춤 */ .fi-chk { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border:1.5px solid #ddd; border-radius:3px; background:#fff; font-size:0.9rem; font-weight:600; color:#3a3631; cursor:pointer; user-select:none; transition:border-color .12s, background .12s, color .12s; } /* 체크 시 체크박스 색만 변경 */ .fi-chk.on { border-color:#ddd; } /* 체크박스 틱은 동의 체크박스와 동일 중립색(#888) */ .fi-chk input { width:18px; height:18px; accent-color:#888; cursor:pointer; } .fi-chk-inline { display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:0.8rem; color:#6b6661; cursor:pointer; } /* 개인이에요·동의 등 인라인 체크박스도 동일 중립색(#888) */ .fi-chk-inline input { width:16px; height:16px; accent-color:#888; cursor:pointer; } .fi-agree { margin-top:16px; padding:14px 16px; background:#f7f8fa; border:1px solid #888; border-radius:3px; } .fi-agree .fi-agree-chk { margin-top:0; font-size:0.9rem; color:#3a3631; font-weight:600; } /* 액션 버튼 */ #find-item-modal .fi-actions { display:flex; gap:10px; padding:16px 28px; background:#fff; border-top:1px solid #0d0d0d; } #find-item-modal .fi-btn-kakao { flex:1; padding:15px; border-radius:3px; background:#fee500; color:#1c1a17; font-weight:800; font-size:0.95rem; border:0; cursor:pointer; } #find-item-modal .fi-btn-kakao:hover { filter:brightness(.97); } #find-item-modal .fi-btn-apply { flex:1; padding:15px; border-radius:3px; background:#1c1a17; color:#fff; font-weight:800; font-size:0.95rem; border:0; cursor:pointer; } #find-item-modal .fi-btn-apply:hover { background:#000; } #find-item-modal .fi-btn-kakao[disabled], #find-item-modal .fi-btn-apply[disabled] { opacity:.55; cursor:default; } /* 처리중 로딩: 버튼 텍스트를 숨기고 가운데 스피너를 돌린다(버튼 크기는 그대로 유지) */ #find-item-modal .fi-btn-kakao.is-loading, #find-item-modal .fi-btn-apply.is-loading { position:relative; color:transparent!important; pointer-events:none; opacity:1; } #find-item-modal .fi-btn-kakao.is-loading::after, #find-item-modal .fi-btn-apply.is-loading::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid transparent; animation:fiSpin .6s linear infinite; } #find-item-modal .fi-btn-kakao.is-loading::after { border-color:rgba(28,26,23,.25); border-top-color:#1c1a17; } /* 카카오=밝은 배경 → 어두운 스피너 */ #find-item-modal .fi-btn-apply.is-loading::after { border-color:rgba(255,255,255,.35); border-top-color:#fff; } /* 신청=어두운 배경 → 흰 스피너 */ @keyframes fiSpin { to { transform:rotate(360deg); } } /* 토스트 (body 직속, 모달 위) */ #fi-toast { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); background:rgba(28,26,23,.96); color:#fff; padding:18px 22px; border-radius:4px; font-size:0.95rem; font-weight:600; line-height:1.5; text-align:center; white-space:pre-line; max-width:88vw; width:max-content; box-shadow:0 18px 50px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:99999; } #fi-toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); } /* 좁은 화면(모바일 기기에서 PC보기 시엔 뷰포트 고정이라 잘 안 걸리지만 안전망) */ @media (max-width:600px) { .fi-form { grid-template-columns:1fr; } #fi-results .fi-grid, .fi-skeleton { grid-template-columns:1fr; } #find-item-modal .fi-title { font-size:1.35rem; } } /* AI 추천 채팅 패널 */ /* 통합검색 우측 'AI 추천' 라운드 버튼 */ :root{ --ai-purple:linear-gradient(135deg,#6a5bd0 0%,#8b5cf0 55%,#3c7de0 100%); } .ai-reco-open-btn{ align-self:center; position:relative; /* 빛 테두리(::before/::after) 기준 + 스태킹 격리 */ isolation:isolate; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 18px; margin-right:10px; border:none; border-radius:999px; cursor:pointer; background:#fff; /* 기본 흰 바탕 */ font-size:14px; font-weight:700; white-space:nowrap; transition:background .3s ease, transform .18s cubic-bezier(.33,1,.68,1), box-shadow .3s ease, filter .3s ease; background:var(--ai-purple); box-shadow:0 1px 3px rgba(60,45,160,.28); color:#fff; } .ai-reco-inline-btn i, .ai-reco-inline-btn .txt{ position:relative; z-index:1; color:#fff; -webkit-text-fill-color:#fff; } .ai-reco-inline-btn i{ font-size:13px; line-height:1; } /* 입력한 검색어가 뱃지 아래로 들어가지 않게 오른쪽 여백을 뱃지 폭만큼 넓힌다 */ .header-search .ui.icon.input:has(> .ai-reco-inline-btn) > input{ padding-right:106px !important; } .header-search .ui.icon.input:has(> .ai-reco-inline-btn.with-image-search) > input{ padding-right:138px !important; } /* 테두리 링(::before)과 바깥 후광(::after) */ @property --ai-ring-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; } .ai-reco-open-btn::before, .ai-reco-open-btn::after{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; /* 링 두께(얇게) */ background:var(--ai-purple); /* 기본: 보라 그라데이션 테두리 */ /* content-box(안쪽)만 빼서 테두리 링만 남김 → 중앙 투명 */ -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .3s cubic-bezier(.33,1,.68,1); pointer-events:none; } /* 후광은 기본 숨김(크게+블러) */ .ai-reco-open-btn::after{ inset:-4px; padding:2.5px; filter:blur(5px); opacity:0; } /* 무지개 회전 링(호버 상태에서만 conic 으로 교체 + 회전) */ .ai-reco-open-btn:hover::before, .ai-reco-open-btn:focus-visible::before, .ai-reco-open-btn:hover::after, .ai-reco-open-btn:focus-visible::after{ background:conic-gradient(from var(--ai-ring-angle), transparent 0 6%, #00d8c0 20%, #0094ff 40%, #22d3ee 60%, #8a5cff 78%, #00d8c0 90%, transparent 94% 100%); animation:ai-ring-spin 2.6s linear infinite; } /* 호버: 색상 반전 — 보라 그라데이션 배경 + 흰 글자/이모지 */ .ai-reco-open-btn:hover, .ai-reco-open-btn:focus-visible{ background:var(--ai-purple); transform:translateY(-1px); box-shadow:0 6px 18px rgba(90,70,200,.35); } .ai-reco-open-btn:hover i, .ai-reco-open-btn:focus-visible i, .ai-reco-open-btn:hover .txt,.ai-reco-open-btn:focus-visible .txt{ background:none; -webkit-text-fill-color:#fff; color:#fff; } .ai-reco-open-btn:hover::after, .ai-reco-open-btn:focus-visible::after{ opacity:.85; } .ai-reco-open-btn:active{ transform:translateY(0); } @keyframes ai-ring-spin{ to{ --ai-ring-angle:360deg; } } /* 모션 최소화 환경: 회전만 정지(반전/테두리는 유지) */ @media (prefers-reduced-motion:reduce){ .ai-reco-open-btn:hover::before, .ai-reco-open-btn:hover::after, .ai-reco-open-btn:focus-visible::before, .ai-reco-open-btn:focus-visible::after{ animation:none; } } /* 배경 딤 */ /* z-index 1000: 퀵메뉴(999) 위, Fomantic 모달(1001) 아래 */ .ai-reco-backdrop{ position:fixed; inset:0; z-index:1000; background:rgba(20,22,30,.42); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; } .ai-reco-backdrop.open{ opacity:1; visibility:visible; } /* ── 우측 슬라이드 패널 (화면 절반) ── */ .ai-reco-panel{ position:fixed; top:0; right:0; z-index:1000; width:50vw; min-width:360px; max-width:560px; height:100%; background:#f7f8fc; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); } /* 그림자는 열렸을 때만 — 숨겨진 상태에서 가장자리로 새는 그림자 방지(플랫) */ .ai-reco-panel.open{ transform:translateX(0); box-shadow:-12px 0 40px rgba(20,22,30,.18); } .ai-reco-head{ flex:none; display:flex; align-items:center; gap:8px; padding:16px 18px; border-bottom:1px solid #e7e9f2; background:#fff; } .ai-reco-title{ display:flex; align-items:center; gap:7px; font-size:16px; font-weight:800; color:#3a3f55; } .ai-reco-title i{ color:#5b6bd8; font-size:20px; } .ai-reco-reset{ margin-left:auto; width:34px; height:34px; border:none; background:transparent; color:#9aa0b3; cursor:pointer; border-radius:50%; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; } .ai-reco-reset:hover{ background:#eef0f7; color:#5b6bd8; } .ai-reco-close{ width:34px; height:34px; border:none; background:transparent; color:#9aa0b3; cursor:pointer; border-radius:50%; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; } .ai-reco-close:hover{ background:#eef0f7; color:#555; } /* ── 대화 영역 ── */ .ai-reco-body{ flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; } .ai-reco-msg{ display:flex; } .ai-reco-msg .bubble{ max-width:88%; padding:11px 14px; border-radius:15px; font-size:14.5px; line-height:1.62; white-space:pre-wrap; word-break:break-word; } .ai-reco-msg.user{ justify-content:flex-end; } .ai-reco-msg.user .bubble{ background:#4a5bd0; color:#fff; border-bottom-right-radius:5px; } .ai-reco-msg.bot .bubble{ background:#fff; color:#2c2f3d; border-bottom-left-radius:5px; box-shadow:0 1px 3px rgba(20,22,30,.06); } /* 타이핑 인디케이터 */ .ai-reco-typing{ display:inline-flex; gap:4px; align-items:center; } .ai-reco-typing i{ width:7px; height:7px; border-radius:50%; background:#b7bcd0; display:inline-block; animation:aiRecoBlink 1.2s infinite ease-in-out; } .ai-reco-typing i:nth-child(2){ animation-delay:.2s; } .ai-reco-typing i:nth-child(3){ animation-delay:.4s; } @keyframes aiRecoBlink{ 0%,60%,100%{opacity:.25} 30%{opacity:1} } /* ── 상품 카드 (추천 결과) ── */ /* 상품 말풍선은 전체 폭의 80% 고정. bot .bubble 보다 구체도 높게 지정 */ .ai-reco-msg.bot.ai-reco-products-msg .bubble{ width:80%; max-width:80%; padding:0; background:transparent; box-shadow:none; } .ai-reco-products{ display:flex; flex-direction:column; gap:8px; margin-top:2px; } .ai-reco-card{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e7e9f2; border-radius:12px; padding:10px; text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s; } .ai-reco-card:hover{ border-color:#c6ccf0; box-shadow:0 4px 12px rgba(74,91,208,.12); } .ai-reco-card .thumb{ flex:none; width:60px; height:60px; border-radius:9px; object-fit:cover; background:#eef0f7; border:1px solid #eceef5; } .ai-reco-card .info{ min-width:0; flex:1; } .ai-reco-card .pname{ font-size:13.5px; font-weight:600; color:#2c2f3d; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ai-reco-card .pprice{ font-size:13px; font-weight:700; color:#4a5bd0; margin-top:3px; } .ai-reco-card .go{ flex:none; color:#b7bcd0; font-size:20px; } /* ── 입력 영역 ── */ .ai-reco-input{ flex:none; border-top:1px solid #e7e9f2; padding:10px 14px 14px; background:#fff; } .ai-reco-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; } .ai-reco-chip{ border:1px solid #d7dbef; background:#f7f8fc; color:#5b6178; border-radius:999px; padding:5px 12px; font-size:12.5px; cursor:pointer; } .ai-reco-chip:hover{ background:#eef0f9; color:#333; } /* 상담 연결 칩: 강조(액센트). 아이콘 정렬. */ .ai-reco-chip-consult{ border-color:#4a5bd0; background:#eef1fc; color:#4a5bd0; font-weight:600; } .ai-reco-chip-consult:hover{ background:#4a5bd0; color:#fff; } .ai-reco-chip-consult i{ font-size:13px; vertical-align:-1px; margin-right:1px; } .ai-reco-input-row{ display:flex; align-items:flex-end; gap:8px; } .ai-reco-input-row textarea{ flex:1; resize:none; border:1px solid #d7dbef; border-radius:12px; padding:11px 13px; font-size:14.5px; font-family:inherit; line-height:1.5; max-height:120px; outline:none; color:#2c2f3d; } .ai-reco-input-row textarea:focus{ border-color:#5b6bd8; box-shadow:0 0 0 3px rgba(91,107,216,.15); } .ai-reco-send{ flex:none; width:44px; height:44px; border:none; border-radius:12px; background:#4a5bd0; color:#fff; cursor:pointer; display:grid; place-items:center; font-size:20px; } .ai-reco-send:hover{ opacity:.92; } .ai-reco-send:disabled{ opacity:.4; cursor:default; } .ai-reco-note{ margin:8px 2px 0; font-size:11.5px; color:#a3a8ba; } /* ── 패널 열릴 때 BODY 스크롤 잠금(다른 레이어처럼 스크롤바 제거) ── */ html.ai-reco-locked, html.ai-reco-locked body{ overflow:hidden !important; } /* 모바일 전체화면 */ @media (max-width:767px){ .ai-reco-panel{ width:100vw; min-width:0; max-width:none; } .ai-reco-open-btn .txt{ display:none; } .ai-reco-open-btn{ height:40px; padding:0 12px; } } body[data-device="mobile"] .ai-reco-panel{ width:100vw; min-width:0; max-width:none; } /* 모바일 기기에서도 'AI 추천' 라벨 노출, 버튼만 컴팩트 */ body[data-device="mobile"] .ai-reco-open-btn{ height:40px; padding:0 14px; } /* ── 상담신청 폼 (채팅 말풍선 내) ── */ .ai-reco-consult{ display:flex; flex-direction:column; gap:8px; } .ai-reco-consult input{ border:1px solid #d7dbef; border-radius:9px; padding:10px 12px; font-size:14px; outline:none; font-family:inherit; color:#2c2f3d; } .ai-reco-consult input:focus{ border-color:#5b6bd8; box-shadow:0 0 0 3px rgba(91,107,216,.15); } .acf-submit{ border:none; border-radius:9px; padding:11px; background:#4a5bd0; color:#fff; font-weight:700; font-size:14px; cursor:pointer; } .acf-submit:hover{ opacity:.92; } .acf-submit:disabled{ opacity:.5; cursor:default; } /* 안내문구는 내용이 있을 때만 노출 */ .acf-msg{ margin:2px 0 0; font-size:12.5px; color:#c0392b; } .acf-msg:empty{ display:none; } .acf-done{ font-size:14px; font-weight:600; color:#2e7d46; padding:6px 2px; } /* ── 최근 주문 다시 주문 (재주문 카드) ───────────────────────────── */ .ai-reco-chip-reorder { border-color: #2185d0; color: #2185d0; } .ai-reco-orders { display: flex; flex-direction: column; gap: 8px; } .ai-reco-order-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; } .ai-reco-order-card .thumb { width: 48px; height: 48px; flex: 0 0 48px; object-fit: cover; border-radius: 6px; background: #f4f4f4; display: block; } .ai-reco-order-card .info { flex: 1 1 auto; min-width: 0; } .ai-reco-order-card .oname { font-size: 13px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-reco-order-card .ometa { margin-top: 2px; font-size: 12px; color: #888; } .ai-reco-order-card .oresult { margin-top: 4px; font-size: 12px; } .ai-reco-order-card .oresult:empty { display: none; } .ai-reco-order-card .oresult.is-fail { color: #db2828; } .ai-reco-reorder-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12px; white-space: nowrap; color: #fff; background: #2185d0; border: 0; border-radius: 6px; cursor: pointer; } .ai-reco-reorder-btn:disabled { opacity: .6; cursor: default; } /* 견적 바구니 액션 */ .ai-reco-msg.bot.ai-reco-basket-msg .bubble { background: transparent; box-shadow: none; padding: 0; } .ai-reco-basket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: #f7f9ff; border: 1px solid #dde5f7; border-radius: 10px; } .ai-reco-basket .bq-label { font-size: 13px; color: #555; } .ai-reco-basket .bq-input { width: 84px; height: 32px; padding: 0 8px; font-size: 13px; text-align: right; border: 1px solid #cbd5e8; border-radius: 6px; background: #fff; } .ai-reco-basket .bq-unit { font-size: 13px; color: #555; margin-right: 4px; } .ai-reco-basket .bq-make { height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff; background: #2185d0; border: 0; border-radius: 6px; cursor: pointer; } .ai-reco-basket .bq-make:disabled { opacity: .6; cursor: default; } /* 결과줄(성공/실패 표시) */ .ai-reco-basket .bq-result { flex: 1 0 100%; margin: 6px 0 0; font-size: 13px; } .ai-reco-basket .bq-result:empty { display: none; } .ai-reco-basket .bq-result.is-fail { color: #db2828; } .ai-reco-basket .bq-go { font-weight: 700; color: #2185d0; text-decoration: underline; } .ai-reco-basket .bq-sum { color: #333; } .ai-reco-basket .bq-drop { color: #999; font-size: 12px; } /* ── 구조화 주문 폼(주문 의도 감지 시) ── */ .ai-reco-orderform { display: flex; flex-direction: column; gap: 8px; } .ai-reco-orderform .of-product { display: flex; gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #eee; } .ai-reco-orderform .of-img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #eee; border-radius: 6px; flex: 0 0 auto; } .ai-reco-orderform .of-name { font-size: 13px; font-weight: 600; color: #2c2f3d; line-height: 1.35; } .ai-reco-orderform .of-code { font-size: 11px; color: #999; margin-top: 2px; } .ai-reco-orderform .of-row { display: flex; align-items: center; gap: 8px; } .ai-reco-orderform .of-label { flex: 0 0 66px; font-size: 12px; color: #555; } .ai-reco-orderform .of-label em { color: #db2828; font-style: normal; } .ai-reco-orderform .of-row input, .ai-reco-orderform .of-row select { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; background: #fff; } .ai-reco-orderform .of-inline { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; } /* 확정된 옵션(읽기전용 표시) */ .ai-reco-orderform .of-opt-text { flex: 1 1 auto; min-width: 0; padding: 6px 0; font-size: 12px; font-weight: 600; color: #2185d0; } .ai-reco-orderform .of-qty-text { flex: 1 1 auto; padding: 6px 0; font-size: 13px; font-weight: 600; color: #2c2f3d; } .ai-reco-orderform .of-request { width: 100%; min-height: 44px; padding: 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; resize: vertical; box-sizing: border-box; } .ai-reco-orderform .of-email-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; } .ai-reco-orderform .of-email-row .of-email-local { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; } .ai-reco-orderform .of-email-row .of-at { color: #888; font-size: 12px; } .ai-reco-orderform .of-email-row .of-email-custom { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; } .ai-reco-orderform .of-email-row .of-email-domain { flex: 0 0 auto; max-width: 130px; height: 32px; padding: 0 6px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; background: #fff; } .ai-reco-orderform .of-zip-row { display: flex; gap: 6px; margin-top: 6px; } .ai-reco-orderform .of-zip-row .of-zip { flex: 0 0 110px; height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; background: #f5f6fa; } .ai-reco-orderform .of-zip-row .of-zipsearch { flex: 0 0 auto; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; color: #4a5bd0; background: #eef1fc; border: 1px solid #cbd5e8; border-radius: 6px; cursor: pointer; } .ai-reco-orderform .of-addr1, .ai-reco-orderform .of-addr2 { display: block; width: 100%; height: 32px; margin-top: 6px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; box-sizing: border-box; } .ai-reco-orderform .of-addr1[readonly] { background: #f5f6fa; } .ai-reco-orderform .of-inline .of-qty { max-width: 90px; } .ai-reco-orderform .of-unit { font-size: 12px; color: #666; } .ai-reco-orderform .of-sec { margin-top: 2px; padding-top: 8px; border-top: 1px solid #eee; } .ai-reco-orderform .of-sec-title { font-size: 12px; font-weight: 700; color: #444; margin-bottom: 6px; } .ai-reco-orderform .of-hint { font-weight: 400; color: #999; } .ai-reco-orderform .of-radio { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #444; margin-right: 12px; cursor: pointer; } .ai-reco-orderform .of-bank { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; background: #f7f9fc; border-radius: 6px; } .ai-reco-orderform .of-grid { display: flex; flex-wrap: wrap; gap: 6px; } .ai-reco-orderform .of-grid input { flex: 1 1 calc(50% - 3px); height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; } .ai-reco-orderform .of-grid .of-wide { flex: 1 1 100%; } .ai-reco-orderform .of-submit { margin-top: 8px; height: 38px; border: 0; border-radius: 8px; background: #4a5bd0; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; } .ai-reco-orderform .of-submit:disabled { opacity: .6; cursor: default; } .ai-reco-orderform .of-result { margin: 6px 0 0; font-size: 12px; } .ai-reco-orderform .of-result.is-fail { color: #db2828; } .ai-reco-orderform .of-result:empty { display: none; } /* 해외(비ko) 주문폼: 이름 분리, 전화 국가번호, 국가 셀렉트 */ .ai-reco-orderform .of-intl-hp { display: flex; gap: 4px; flex: 1 1 calc(50% - 3px); min-width: 0; } /* 국가번호 셀렉트: 폭 80px 통일, 닫힘 상태 +82 표시 */ .ai-reco-orderform .of-intl-hp .of-hp-dial { flex: 0 0 80px; width: 80px; min-width: 80px; max-width: 80px; height: 32px; padding: 0 4px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; background: #fff; white-space: nowrap; } .ai-reco-orderform .of-intl-hp .of-hp { flex: 1 1 auto; min-width: 0; } .ai-reco-orderform .of-country { flex: 1 1 100%; height: 32px; padding: 0 8px; font-size: 12px; border: 1px solid #cbd5e8; border-radius: 6px; background: #fff; margin-top: 6px; } /* 해외 폼 우편번호는 자유입력이라 회색 배경 해제 */ .ai-reco-orderform .of-zip-row .of-zip:not([readonly]) { background: #fff; }