/*--------------------------------------
    eyoom (이윰빌더)
--------------------------------------*/

/*---------- Item Info ----------*/
.item-info-table {font-size:.875rem}
.item-info-table .width-180px {width:180px}
#sit_rel {position:relative;border:1px solid #757575;padding:20px 20px 10px;margin:20px 0 40px;border-radius:7px}
#sit_rel h2 {margin:0 0 20px;font-size:1.375rem;color:#252525;font-weight:700;text-align:center}
#sit_inf {margin:30px 0}
#sit_use {margin:30px 0}
#sit_qa {margin:30px 0}
#sit_dvr {margin:30px 0}
#sit_ex {margin:30px 0}
#sit_dvr img, #sit_ex img {display:block;max-width:100%;height:auto}
#sit_dvr > ul > li, #sit_ex > ul > li {position:relative;padding-left:14px;color:#757575;font-size:.875rem}
#sit_dvr > ul > li:before, #sit_ex > ul > li:before {content:"";display:block;position:absolute;top:7px;left:0;width:5px;height:5px;background-color:#b5b5b5}
@media (max-width:1199px) {
    #sit_rel {padding:20px 10px 10px}
}
@media (min-width: 768px) {
    .pg-anchor-in .nav-tabs {border-bottom:none}
    .pg-anchor-in .nav-tabs li {width:20%}
    .pg-anchor-in .nav-tabs li a {display:block;border:1px solid #d5d5d5;font-size:.9375rem;padding:12px 10px;text-align:center;margin-right:0;margin-left:-1px;background:#f8f8f8;color:#959595;border-bottom:none !important}
    .pg-anchor-in .nav-tabs li a:hover {color:#000}
    .pg-anchor-in .nav-tabs li a:focus {color:#959595}
    .pg-anchor-in .nav-tabs li.active {z-index:1}
    .pg-anchor-in .nav-tabs li.active a {border:1px solid #757575;padding:12px 10px 13px;font-weight:700;color:#000;background:#fff}
    .pg-anchor-in .tab-bottom-line {position:relative;display:block;height:1px;background:#757575;margin-top:-1px;margin-bottom:20px}
}
@media (max-width: 767px) {
    .pg-anchor-in {position:relative;overflow:hidden;margin-bottom:20px;border:2px solid #000;background:#f8f8f8}
    .pg-anchor-in .nav-tabs {border-bottom:0}
    .pg-anchor-in .nav-tabs li {width:33.33333%;margin:0}
    .pg-anchor-in .nav-tabs li a {display:block;border:none;font-size:.8125rem;padding:10px 0;text-align:center;border-bottom:1px solid #d5d5d5;margin-right:0;background:#f8f8f8;color:#959595}
    .pg-anchor-in .nav-tabs li a:hover {color:#000}
    .pg-anchor-in .nav-tabs li a:focus {color:#959595}
    .pg-anchor-in .nav-tabs li.active a {font-weight:700;border:0;border-bottom:1px solid #d5d5d5 !important;color:#3949ab;background:#fff}
    .pg-anchor-in .nav-tabs li:nth-child(1) a {border-right:1px solid #d5d5d5}
    .pg-anchor-in .nav-tabs li:nth-child(2) a {border-right:1px solid #d5d5d5}
    .pg-anchor-in .nav-tabs li:nth-child(4) a {border-right:1px solid #d5d5d5;border-bottom:0 !important}
    .pg-anchor-in .nav-tabs li:nth-child(5) a {border-right:1px solid #d5d5d5;border-bottom:0 !important}
    .pg-anchor-in .nav-tabs li:nth-child(6) a {border-bottom:0 !important}
    .pg-anchor-in .tab-bottom-line {display:none}
}

/*---------- Item Form ----------*/
/* Shop Detail Product */
.shop-product {position:relative;padding:10px 0}
.shop-product h2 {float:left;color:#687074;font-size:26px;text-transform:uppercase}
.shop-product .list-inline {margin:0}
.shop-different-product {padding:10px 0}
.shop-different-product .btn-default {padding:5px 14px}
.shop-product-img {position:relative;overflow:hidden}
/* Shop Product Img */
.zoomLens {cursor:pointer !important}
.product-img-big {position:relative;padding:0 0 1px;margin:0}
.product-img-big a {display:none}
.product-img-big a.visible {display:block}
.product-img-big img {display:block;width:100% \9;max-width:100%;height:auto}
.product-img-big i {width:100%;background:#e5e5e5;text-align:center;color:#757575;height:408px;line-height:408px;font-size:70px}
.product-img-big .fotorama__thumb-border {border-color:#e53935}
@media (max-width: 500px) {
    .product-img-big i {height:300px;line-height:300px}
}
.product-thumb {position:relative;overflow:hidden;display:none;margin-left:-1px;margin-right:-1px}
.product-thumb .thumb-img {position:relative;outline:none;padding:1px}
.product-thumb .thumb-img img {display:block;max-width:100%;height:auto}
.product-thumb .slick-prev, .product-thumb .slick-next {z-index:1;top:1px;width:20px;height:100%;height:calc(100% - 8px);background:rgba(0, 0, 0, 0.5);transform:none;-webkit-transform:none;-ms-transform:none}
.product-thumb .slick-prev:hover, .product-thumb .slick-next:hover {background:rgba(0, 0, 0, 0.7)}
.product-thumb .slick-next.slick-disabled, .product-thumb .slick-prev.slick-disabled {background:transparent}
.product-thumb .slick-next.slick-disabled:before, .product-thumb .slick-prev.slick-disabled:before {opacity:0}
.product-thumb .slick-prev {left:1px}
.product-thumb .slick-next {right:1px}
.product-thumb .slick-prev:before {font-family:'Font Awesome\ 5 Free';font-weight:900;content:"\f0d9";font-size:16px}
.product-thumb .slick-next:before {font-family:'Font Awesome\ 5 Free';font-weight:900;content:"\f0da";font-size:16px}
/* Shop Product Img Modal */
.shop-img-modal .fotorama__thumb-border {border-color:#FF4848}
@media (min-width: 992px) {
    .shop-img-modal .modal-dialog {width:600px}
    .shop-img-modal .modal-footer {text-align:center}
    .shop-img-modal .modal-footer .btn-e-lg {padding:10px 20px}
}
/* Shop Product Prev Next */
.shop-product-prev-next {position:relative;border:1px solid #e5e5e5;height:45px;padding:10px;line-height:25px}
.shop-product-prev-next .product-prev {position:absolute;top:0;left:0;color:#959595}
.shop-product-prev-next .product-prev i {width:45px;height:45px;line-height:45px;border-right:1px solid #e5e5e5;font-size:15px;text-align:center;margin-right:10px;color:#252525}
.shop-product-prev-next .product-next {position:absolute;top:0;right:0;color:#959595}
/* Shop Product Star Sns */
.shop-product-star-sns {position:relative;border:1px solid #e5e5e5;margin-top:-1px;height:45px;padding:10px 15px;line-height:25px}
.shop-product-prev-next .product-next i {width:45px;height:45px;line-height:45px;border-left:1px solid #e5e5e5;font-size:15px;text-align:center;margin-left:10px;color:#252525}
.shop-product-star-sns .li-divider {display:inline-block;width:2px;height:10px;margin:0 10px;background:#e5e5e5}
.item-share-wrap {position:absolute;top:0;right:0}
.item-share-wrap .item-share-btn {width:45px;height:45px;background:none;border:0;border-left:1px solid #e5e5e5}
.item-share-wrap .dropdown-menu {margin-top:-4px !important;background:#fff;;border:1px solid #757575;box-shadow:none;min-width:180px;height:53px}
.item-share-wrap img {display:block;width:100% \9;max-width:100%;height:auto}
.item-share-wrap .share-sns {position:absolute;top:10px;left:10px}
.item-share-wrap .share-facebook {display:inline-block;width:30px;height:30px;padding:5px;background:#6A82C6}
.item-share-wrap .share-twitter {display:inline-block;width:30px;height:30px;padding:5px;background:#7BBCEB}
.item-share-wrap .share-googleplus {display:inline-block;width:30px;height:30px;padding:5px;background:#CD6C59}
.item-share-wrap .share-rec {position:absolute;top:10px;right:10px;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:#fff;background:#FDAB29}
/* Shop Product Description */
.shop-product-form .product-title {margin:0 0 20px;font-size:1.5rem;color:#151515}
.shop-product .shop-description-box {position:relative;padding:10px 0;background:none;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;margin:20px 0 0}
.shop-product .shop-description-box .table {font-size:.9375rem;margin-bottom:0; --bs-table-bg: #fafaf7 !important;}
.shop-product .shop-description-box .table>tbody>tr>th {width:30%}
.shop-product .shop-description-box .table>tbody>tr>th, .shop-product .shop-description-box .table>tbody>tr>td {border:0;padding:5px 0}
.shop-product .shop-description-box .shop-product-prices {font-size:1.125rem;color:#ab0000}
.shop-product .shop-description-box .line-through {font-size:.9375rem;color:#b5b5b5;text-decoration:line-through;margin-left:5px}

.sit_option {padding:10px 0;border-bottom:1px solid #e5e5e5}
.sit_option label {display:block;margin:0 0 5px;color:#656565}
.sit_option.eyoom-form .select select {background:#f5f5f5}
.sit_option.eyoom-form .select select:disabled {opacity:0.4;cursor:not-allowed}
.sit_option.eyoom-form .select i {background:#f5f5f5}
.sit_option h3 {font-size:14px;margin:0 0 10px}
.sit_sel_btn {position:relative} /* 선택옵션용 추가 버튼 */
.sit_sel_btn button {position:absolute;top:-51px;right:0 !important;right:15px}

#sit_sel_option h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sit_opt_added {margin:0;padding:0;border-bottom:0;background:#fff;list-style:none}
#sit_opt_added li {padding:15px 10px;margin:0;border-width:0 0 1px;border-style:solid;border-color:#e5e5e5;background:#f9f9f9;position:relative}
#sit_opt_added li .opt-left {position:relative}
#sit_opt_added li .opt_name {line-height:20px;font-size:.875rem;margin-bottom:10px;font-weight:400;padding-right:50px}
#sit_opt_added li .opt_count {position:relative}
#sit_opt_added button {float:left;width:30px;height:30px;border:1px solid #a5a5a5;background:#fff;color:#656565;font-size:.75rem}
#sit_opt_added button:hover {color:#000}
#sit_opt_added .num_input {float:left;border:1px solid #a5a5a5;width:45px;height:30px;text-align:center;margin:0 -1px}
#sit_opt_added .sit_opt_del {position:absolute;top:-35px;right:0;border:0;font-size:.9375rem;background-color:transparent}
#sit_opt_added .sit_opt_del:hover {color:#ab0000}
#sit_opt_added .sit_opt_prc {font-weight:400;font-size:.9375rem}
@media (max-width:991px) {
    #sit_opt_added .sit_opt_prc {width:150px}
}

#mod_option_frm #sit_sel_option {margin:20px}
#mod_option_frm #sit_tot_price {margin:20px}
#mod_option_frm #sit_opt_added {border-top:1px solid #e5e5e5}
#mod_option_frm .btn_confirm {margin:20px}
#mod_option_frm .btn_confirm .btn_submit {height:40px;font-size:1rem;font-weight:700;width:100%;cursor:pointer}
#mod_option_frm .btn_confirm .btn_close {position:absolute;top:0;right:0;width:50px;height:50px;border:0;background:none;border-left:1px solid #c5c5c5;font-size:.9375rem}
#mod_option_frm .btn_confirm .btn_close:hover {background:#f5f5f5}

#sit_tot_price {margin:25px 0;font-size:1.25rem;color:#ab0000;line-height:25px;font-weight:700;text-align:right}
#sit_tot_price:after {display:block;visibility:hidden;clear:both;content:""}
#sit_tot_price span {float:left;color:#000}
#sit_ov_soldout {padding:20px 0;margin:10px 0;color:#ab0000;background:#fff0f0;font-weight:700;text-align:center}

/* Shop Product Button */
#sit_ov_btn {margin-top:20px}
#sit_ov_btn:after {display:block;visibility:hidden;clear:both;content:""}
#sit_ov_btn button {width:230px;float:left;margin-right:5px;height:50px;margin-bottom:10px;font-weight:700;font-size:16px;border-radius:7px}
#sit_btn_buy {background:#3f4678;color:#fff;border:0}
#sit_btn_buy:hover {background:#4b5390}
#sit_btn_cart {border:1px solid #3f4678;background:#fff;color:#3f4678}
#sit_btn_cart:hover {background:#f5f5f5}
#sit_btn_wish {display:inline-block;margin-bottom:10px;text-align:center;font-size:16px;float:right;width:70px;height:50px;line-height:48px;height:50px;border:1px solid #c5c5c5;color:#656565;font-weight:700;border-radius:7px}
#sit_btn_wish:hover {color:#3f4678}
#sit_btn_alm {display:inline-block;width:215px;float:left;margin-right:5px;height:50px;line-height:50px;margin-bottom:10px;font-weight:700;font-size:16px;background:#d50c0c;color:#fff;border:0;text-align:center}
@media (max-width:1199px) {
    #sit_ov_btn button {width:170px}
    #sit_btn_wish {width:50px}
}
@media (max-width:991px) {
    #sit_ov_btn button {width:49%;margin-right:0}
    #sit_ov_btn #sit_btn_cart {float:right}
}

/* Shop Scroll Show Button */
.sit-ov-height {position:relative}
#scroll_show_close {display:none;position:absolute;top:5px;right:5px;width:30px;height:30px;line-height:30px;text-align:center;color:#757575;font-size:1.125rem;cursor:pointer}
#scroll_show_close:hover {color:#000}
.buy-btn-wr {display:none}
#sit_ov.static .scroll-show {display:block !important}
#sit_ov.scroll-no {display:block}
#sit_ov.fixed {position:fixed;top:10px;left:50%;width:600px;margin:0;padding:0;margin-left:-300px;max-height:600px;background:transparent;z-index:1050}
#sit_ov.fixed #btn_buy_back {display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:1099;background:rgba(0, 0, 0, 0.7);z-index:1}
#sit_ov.fixed .buy-btn-wr {position:relative;display:block;text-align:center;padding-bottom:10px;z-index:2}
#sit_ov.fixed .buy-btn-wr button {position:relative;width:260px;padding:0 15px;padding-right:55px;background:#3f4678;border:0;height:50px;line-height:50px;border-radius:50px !important;color:#fff;font-size:1rem;font-weight:700;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}
#sit_ov.fixed .buy-btn-wr button:hover {background:#4b5390}
#sit_ov.fixed .buy-btn-wr button i {position:absolute;top:0;right:0;background:#2B2B2E;border-radius:0 25px 25px 0 !important;width:60px;line-height:50px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}
#sit_ov.fixed .buy-btn-wr button:hover i {background:#3c3c3e}
#sit_ov.fixed .scroll-no {display:none}
#sit_ov.fixed .scroll-show {display:none;position:relative;background:#fff;border:0;padding:30px 15px 15px;max-height:600px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:2}
#sit_ov.fixed .scroll-show-popup {display:block}
#sit_ov.fixed .scroll-show-popup #scroll_show_close {display:block}
@media (max-width:767px) {
    #sit_ov.fixed {top:inherit;bottom:71px;left:15px;right:15px;width:inherit;margin-left:0;z-index:1002}
    #sit_ov.fixed .buy-btn-wr {position:absolute;bottom:-56px;left:50%;transform:translateX(-50%);padding-bottom:0}
    #sit_ov.fixed .buy-btn-wr button {width:240px;height:46px;line-height:46px;border-radius:46px !important}
    #sit_ov.fixed .buy-btn-wr button i {line-height:46px}
}

/*---------- Item Use ----------*/
.product-use-top {position:relative;margin:20px 0 20px;line-height:40px}
.product-use-top h4 {display:inline-block;font-size:1rem;font-weight:700;margin-right:10px;color:#3949ab}
.product-use-top .li-divider {display:inline-block;width:2px;height:10px;margin:0 10px;background:#e5e5e5}
.product-use-top .product-use-btn {float:right}
.product-use-wrap {border-top:1px solid #eaeaea}
.product-use-list {position:relative;padding:15px;padding-left:150px;min-height:85px;border:1px solid #eaeaea;border-top:0}
.product-use-thumbnail {float:left;margin-right:15px}
.product-use-thumbnail img {max-width:70px;height:auto}
.product-use-title {font-weight:700;font-size:1rem}
.product-use-more {border:1px solid #656565;padding:2px 15px;color:#fff;font-size:.75rem;margin:10px 0;background:#656565}
.product-use-more:hover {background:#858585;border-color:#858585}
.product-use-dl {margin:0;position:absolute;top:15px;left:15px;zoom:1}
.product-use-dl:after {display:block;visibility:hidden;clear:both;content:""}
.product-use-dl dt {position:absolute;font-size:0;line-height:0;content:""}
.product-use-dl dd {color:#252525;line-height:1.5}
.product-use-dl dd i {color:#959595;margin-right:5px}
.product-use-dl .product-use-star {margin:-3px 0 5px}
.product-use-cont {display:none}
.product-use-p {padding:20px 0}
.product-use-cmd {text-align:right}
@media (max-width:767px) {
    .product-use-list {padding-left:15px}
    .product-use-dl {position:relative;top:inherit;left:inherit;padding-top:15px;margin-top:15px;border-top:1px solid #f0f0f0}
    .product-use-dl dd {float:left;display:inline-block;margin-right:10px}
    .product-use-dl .product-use-star {margin:-2px 10px 0 0}
}
.product-use-reply {position:relative;border-top:1px solid #f0f0f0;margin:15px 0 0;padding:15px 0 0 30px}
.product-use-reply-icon {position:absolute;top:0px;left:0px;width:10px;height:25px;text-indent:-999px;border-left:1px solid #757575;border-bottom:1px solid #757575}
.product-use-reply-icon:after {content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #757575;position:absolute;bottom:-6px;right:-8px}
.product-use-reply-title {font-size:1rem;font-weight:700;line-height:1.5}
.product-use-reply-name {font-size:.9375rem;color:#959595;margin:10px 0}
.product-use-reply-p {padding:0;background:#fff}

/*---------- Item Qa ----------*/
.product-qa-btn {float:right;margin-bottom:20px}
.product-qa-wrap {border-top:1px solid #eaeaea}
.product-qa-list {position:relative;padding:15px;border:1px solid #eaeaea;border-top:0;min-height:56px}
.product-qa-title {display:block;float:left;width:80%;text-align:left;font-size:.9375rem;border:0;background:none;color:#000}
.product-qa-title .sit_qaa_done {display:inline-block;width:72px;position:relative;font-weight:normal;color:#959595;margin-right:8px}
.product-qa-title .sit_qaa_done:after {content:"";position:absolute;top:3px;right:0;width:2px;height:16px;background-color:#d5d5d5}
.product-qa-title .sit_qaa_yet {display:inline-block;width:72px;position:relative;font-weight:normal;color:#3949ab;margin-right:8px}
.product-qa-title .sit_qaa_yet:after {content:"";position:absolute;top:3px;right:0;width:2px;height:16px;background-color:#d5d5d5}
.product-qa-title .fa-lock.color-red {margin-left:5px;color:#ab0000 !important}
.product-qa-dl {color:#757575;margin:0;float:left;width:20%;text-align:right;zoom:1}
.product-qa-dl:after {display:block;visibility:hidden;clear:both;content:""}
.product-qa-dl dt {position:absolute;font-size:0;line-height:0;content:""}
.product-qa-dl dd {display:inline-block;margin-left:10px}
.product-qa-cont {display:none}
.product-qa-p {margin:15px 0}
.product-qa-p .product-qa-alp {position:absolute;top:10px;left:0;font-size:1.5rem;color:#959595;font-weight:700}
.product-qa-qaa {padding:15px 0;padding-left:30px;position:relative;min-height:100px;border-top:1px solid #eaeaea}
.product-qa-qaq {padding:15px 0;padding-left:30px;position:relative;min-height:100px}
.product-qa-cont textarea {display:none}
.product-qa-cmd {text-align:right}
@media (max-width:767px) {
    .product-qa-title {float:inherit;width:inherit}
    .product-qa-dl {float:inherit;width:inherit;padding-top:15px;margin-top:15px;border-top:1px solid #eaeaea}
    .product-qa-dl dd {float:left;display:inline-block;margin-left:0;margin-right:10px}
}

/*---------- 주문제작 디자인 편집기 (PC/모바일 모두 팝업으로 표시) ----------*/
.shop-design-toggle {display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0}
.shop-design-toggle label {display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.9375rem;cursor:pointer;flex:0 0 auto}

.shop-design-backdrop {display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1999}
.shop-design-backdrop--open {display:block}

/* 편집기가 열려있는 동안 뒤 페이지 스크롤을 막음 - position:fixed 없이 overflow:hidden만
   쓰면 iOS Safari에서 배경이 계속 스크롤되면서 편집기가 화면 밖으로 밀려나가는 것처럼
   보이는 문제가 있어서, 스크롤 위치를 고정하는 방식으로 막는다(JS에서 top 값을 채움). */
body.shop-design-body-lock {position:fixed;left:0;right:0;width:100%;overflow:hidden}

.shop-design-root {
    display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:2000;background:#fafafa;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.35);
    width:min(96vw,1200px);max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:15px;
}

.shop-design-root--open {display:block}

.shop-design-toolbar {
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    background:#f5f5f6;border:1px solid #e8e8e8;border-radius:8px;
    padding:8px 10px;margin-bottom:8px;
}
.shop-design-toolbar-group {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.shop-design-toolbar-group--right {margin-left:auto}
.shop-design-chip-row {display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* 버튼/칩/셀렉트/인풋 높이를 모두 맞춰서 한 줄에서 삐뚤빼뚤하지 않도록 함 */
.shop-design-btn,
.shop-design-chip,
.shop-design-select,
.shop-design-input {
    box-sizing:border-box;height:34px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.8125rem;line-height:1;vertical-align:middle;
}

.shop-design-chip {background:#fff;color:#555;border:1px solid #d5d5d5;padding:0 14px;border-radius:999px;cursor:pointer}
.shop-design-chip--active {background:#252525;color:#fff;border-color:#252525}
.shop-design-btn {background:#555;color:#fff;border:0;padding:0 14px;border-radius:5px;cursor:pointer;gap:6px}
.shop-design-btn:disabled {opacity:.4;cursor:not-allowed}
/* .sit_option label {display:block;margin:0 0 5px;color:#656565} 보다 명시도를 높여서 이겨야 함
   ("이미지 업로드"는 <label>이라 .sit_option 안에서 저 규칙에 걸려 통짜 회색 줄로 깨졌었음) */
.shop-design-toolbar label.shop-design-btn {display:inline-flex;margin:0;color:#fff}
.shop-design-btn--primary {background:#252525}
.shop-design-btn--danger {background:#a33}
.shop-design-hint {
    display:flex;align-items:center;gap:7px;font-size:.8125rem;color:#8a6d3b;
    background:#fff8e6;border:1px solid #f0e0b0;border-radius:7px;padding:8px 12px;margin-bottom:8px;
}
.shop-design-hint i {color:#e0a800;font-size:.875rem}

/* 편집기 안 색상 스와치 - 바깥 선택옵션(.color_wrap)과 같은 마크업/클래스를 재사용하되,
   여기서는 앞면/뒷면 탭 옆, 툴바 첫 줄에 다른 버튼들과 같은 34px 높이로 작은 원형 점처럼 인라인
   배치함. 이 파일 위쪽 인라인 <style>의 "div.color_wrap ul li{width:calc((100%-90px)/10)}"
   (사이드바 10칸 가로배치 기준 공식)이 class 1개(.color_wrap)라, .shop-design-color-inline
   단독(class 1개)으론 명시도가 같아서 못 이기고 그 공식이 그대로 적용돼버림 - 같은 요소에 이미
   붙어있는 .color_wrap과 함께 걸어서(class 2개) 확실히 이기도록 함. */
.color_wrap.shop-design-color-inline {display:flex;align-items:center}
.color_wrap.shop-design-color-inline ul {display:flex;gap:6px}
.color_wrap.shop-design-color-inline ul li {width:22px;height:22px;flex:0 0 22px}
.color_wrap.shop-design-color-inline ul li.active {padding:2px}
.color_wrap.shop-design-color-inline ul li button {width:100%;height:100%;padding-bottom:0;border-radius:999px}

.shop-design-preview-wrap {margin-top:12px}
.shop-design-preview-list {display:flex;flex-wrap:wrap;gap:10px}
.shop-design-preview-item {position:relative;width:96px}
.shop-design-preview-item img {display:block;width:100%;height:96px;object-fit:cover;border:1px solid #d5d5d5;border-radius:6px;background:#fff;cursor:pointer}
.shop-design-preview-item span {display:block;margin-top:4px;font-size:.75rem;color:#757575;text-align:center}

.shop-design-status {display:inline-flex;align-items:center;gap:5px;height:34px;font-size:.8125rem;font-weight:600;color:#555;padding:0 10px;border-radius:5px;transition:background-color .15s ease}
.shop-design-status--error {color:#c0392b;background:#fdecea}
.shop-design-status--success {color:#1e8449;background:#e9f7ef}

.shop-design-stage-wrap {position:relative;width:100%;max-width:800px;margin:0 auto;overflow:hidden}
.shop-design-stage {position:relative;background-color:#eee;background-repeat:no-repeat;border:1px solid #e2e2e2}
/* 캔버스 위에서 손가락으로 오브젝트를 옮길 때 브라우저가 페이지 스크롤/줌 제스처로 가로채지 않도록 함
   (안 넣으면 모바일에서 드래그가 페이지 스크롤이랑 섞여서 뚝뚝 끊기거나 안 움직이는 느낌이 남) */
.shop-design-stage canvas {touch-action:none}

.shop-design-close {display:flex;justify-content:flex-end;margin-bottom:8px}
.shop-design-close button {background:none;border:0;font-size:1.0625rem;color:#555;cursor:pointer;padding:4px 8px}

.shop-design-select, .shop-design-input {background:#fff;color:#333;border:1px solid #d5d5d5;border-radius:5px;padding:0 8px;justify-content:flex-start}
.shop-design-input--narrow {width:64px;justify-content:center}
.shop-design-input--color {padding:2px;width:34px;justify-content:center;cursor:pointer}
.shop-design-select:disabled, .shop-design-input:disabled, .shop-design-chip:disabled {opacity:.4;cursor:not-allowed}
.shop-design-sep {display:inline-block;width:1px;align-self:stretch;background:#ddd}
.shop-design-slider {width:120px;vertical-align:middle;cursor:pointer}

.shop-design-spinner {display:none;position:absolute;inset:0;background:rgba(255,255,255,.8);align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:10}
.shop-design-spinner--on {display:flex}
.shop-design-spinner-icon {width:36px;height:36px;border:4px solid #ddd;border-top-color:#252525;border-radius:50%;animation:shop-design-spin .8s linear infinite}
.shop-design-spinner span {font-size:.8125rem;color:#333}
@keyframes shop-design-spin {to {transform:rotate(360deg)}}

@media (max-width:767px) {
    .shop-design-root--open {
        top:0;left:0;transform:none;width:100%;height:100%;max-height:none;
        border-radius:0;margin:0;padding:8px;
    }
    .shop-design-stage-wrap {max-width:100%}

    /* 손가락으로 누르기엔 22px가 작아서 넉넉하게 키움 */
    .color_wrap.shop-design-color-inline ul li {width:30px;height:30px;flex:0 0 30px}

    /* 손가락으로 누르기엔 34px가 작아서 넉넉하게 키움(권장 터치영역 44px) */
    .shop-design-btn,
    .shop-design-chip,
    .shop-design-select,
    .shop-design-input {
        height:44px;font-size:.875rem;
    }
    .shop-design-chip {padding:0 16px}
    .shop-design-btn {padding:0 16px}
    .shop-design-input--narrow {width:72px}
    .shop-design-input--color {width:44px}
    .shop-design-status {height:44px}
    .shop-design-close button {padding:8px 10px;font-size:1.25rem}

    /* 좁은 화면에서 안내문구가 2줄로 넘어갈 때 아이콘이 첫 줄에만 붙지 않고 어색하게 가운데
       뜨는 문제 방지 - 아이콘을 위쪽 기준으로 맞추고 글자 크기도 살짝 줄임 */
    .shop-design-hint {align-items:flex-start;font-size:.75rem;padding:7px 10px}
    .shop-design-hint i {margin-top:2px}

    /* 툴바 한 줄이 화면폭을 넘기면 버튼이 여러 줄로 접혀서 캔버스가 좁아지므로,
       줄바꿈 대신 그룹 단위로 가로 스크롤 되게 해서 캔버스 공간을 최대한 확보함.
       min-width:0이 없으면 flex 아이템이 내용물 크기만큼 계속 넓어져서 화면 밖으로
       그냥 넘쳐버리고(스크롤도 안 걸림) - 실기기 테스트에서 실제로 이 증상이 남. */
    .shop-design-toolbar {padding:6px 8px;gap:6px}
    .shop-design-toolbar-group {
        flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
        max-width:100%;min-width:0;padding-bottom:2px;
    }
    .shop-design-toolbar-group::-webkit-scrollbar {height:0}
    .shop-design-toolbar-group > * {flex:0 0 auto}
    .shop-design-toolbar-group--right {margin-left:0;width:100%;justify-content:flex-end}
}

/*---------- Item Use, Item Qa Paging ----------*/
.pg_current {background-color:#3f4678;border-color:#3f4678}