@charset "utf-8";


/***************************************************************************/
/*				           모바일/Small Devices (991px 이하)	   	                     /
/***************************************************************************/

/* 상품목록 */
.sub-top-ban {width:100%;margin:15px auto 0;display: grid;grid-template-columns: repeat(2, 1fr);gap:20px;}
.sub-top-ban .banbox:nth-child(3) {display: none;} /* 마지막 3번째 배너는 숨김처리 */
.sub-top-ban .banbox img {width: 100%; object-fit: cover;}
.goods-sub {width:100%;margin: 20px auto 0;}
.goods-sub >.tit {font-size: 1.2rem;font-weight:600;padding-bottom:5px;}

/* ----- 숨김 처리 ---- */
.buy-wrap {display:none;} /* 옵션/갯수/금액/버튼 한개로 묶음 */

/* 주문하기 모달창 */
.modal {display:none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100vw;height: 100dvh;background-color: rgba(0,0,0,0.8);justify-content: center;align-items: center;overflow: hidden;}
.modal-content {position: relative;background-color:var(--color-background);padding:0;border-radius: 0;width: 100vw;height: 100dvh;box-shadow: none;display: flex;flex-direction: column;}
.btn-modal-close {position: absolute;top:-11px;right:15px;color:var(--color-text-default);font-size:2.6rem;font-weight:300;cursor: pointer;z-index: 1001;}
.modal-body {flex-grow: 1;display: flex;flex-direction: column;width: 100%;overflow-y: auto;padding-bottom:20px;}
.orderpage-tit {text-align:left;font-size:1.4rem;font-weight:700;padding:10px 15px 10px 15px;}

 /* 모바일 하단 고정바 */
#initial-bar {position: fixed;bottom:0;left:0;display:block;display:flex;justify-content: space-between;background:var(--color-background);width:100%;z-index:500;
padding-bottom: constant(safe-area-inset-bottom); /* iOS 11 이하 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11 이상 및 최신 브라우저 */}
.btn-mbuy {width:70%;height:54px;line-height:54px;display:block;background-color:#dd2432;border:1px solid #dd2432;border-radius:0;color:#fff;font-size:1.1rem;font-weight:500;letter-spacing:-0.5px;text-align:center;cursor: pointer;outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-order-zzim {width:49%;height:54px;line-height:54px;background:#fff;border:1px solid var(--btnorder-bottom-border);border-left:none;border-radius:0;font-size:1rem;color:#333;font-weight:400;letter-spacing:-0.5px;text-align:center;cursor:pointer;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;gap:5px;}
.btn-order-zzim .zzim-icon-img {display: inline-block;width: 20px;height: 20px;background:url('/theme/osakapick/img/zzim.png') no-repeat center center;background-size: contain;}
.btn-order-zzim.active .zzim-icon-img, .btn-order-zzim:active .zzim-icon-img {background-image: url('/theme/osakapick/img/zzim-on.png');}

/* 구매하기 슬라이드 패널 */
#purchase-panel { position: fixed; bottom: 0; left: 0; width: 100%;background-color:var(--panel-bg-darksoft); border-radius: 16px 16px 0 0;box-shadow: 0 -4px 8px rgba(0,0,0,0.1); z-index: 501; transform: translateY(104%); transition: transform 0.2s linear; display: flex; flex-direction: column;opacity: 1; }
#purchase-panel.is-open { transform: translateY(0); }        
/* 패널 헤더 */
.panel-header {padding:14px 0 0 0;text-align:center;}
.panel-header .close-btn {
    width:24px;
    height:24px;
    border:none;
    background:none;
    cursor:pointer;
    transition:background-image 0.3s ease;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    /* 기본 이미지 경로 설정 */
    background-image: url('/theme/osakapick/img/arrow_down.png');
}
@media (prefers-color-scheme: dark) {
    .panel-header .close-btn { background-image: url('/theme/osakapick/img/arrow_down_dark.png') !important; }
}


/* 패널 콘텐츠 영역  */
.panel-content {width:100%;padding:0 15px 10px 15px;}
.panel-content .placeholder {width:100%;}
 /* 패널 내부 하단 버튼 바 */
.panel-bar {display:flex;justify-content: space-between;width:100%;background:var(--panelbtn-bg-tone);}
.btn-mbuy2 {width:50%;height:54px;line-height:54px;display:block;background-color:#dd2432;border:1px solid #dd2432;border-radius:0;color: #fff;font-size:1.1rem;font-weight:500;letter-spacing:-0.5px;text-align:center;cursor: pointer;outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-order-cart {width:50%;height:54px;line-height:54px;display:block;background:#fff;border:1px solid var(--btnorder-bottom-border);border-left:none;border-radius:0;font-size:1.1rem;font-weight:500;color:#333;letter-spacing:-0.5px;text-align:center;cursor: pointer;outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0);display: flex;align-items: center;justify-content: center;gap:5px;}
.btn-order-cart .cart-icon-img {display: inline-block;width: 20px;height: 20px;background:url('/theme/osakapick/img/cart.png') no-repeat center center;background-size: contain;}

/* 상품정보 */
.product-detail-top {width:100%;display:flex;justify-content: space-between;flex-wrap: wrap;}
.product-detail-top .pimg {width:100%;position:relative;}
.product-detail-top .pimg img {width:100%;height:auto;object-fit:cover;}
.product-detail-top .oneplusone-icon {position:absolute;width:10% !important;height:unset !important;object-fit:cover;scale: 3.5;top:calc(50% - 37.5%);left:calc(50% - 37.5%);}
.product-detail-top .pinfo {position: relative;width:100%;}
.product-detail-top .pinfo h1 {padding-top:21px;width:80%;font-size:1.3rem;font-weight:700;line-height:1.3;}
.product-detail-top .pinfo h1 strong {font-weight:700;}
.product-detail-top .pinfo h2 {padding-top:10px;font-size:0.86rem;font-weight:300;color:var(--color-text-lightgray-lm);letter-spacing:-0.5px;line-height:1.4;}
.product-detail-top .pinfo .pricebox {padding:10px 0;margin-top:20px;border-top:1px solid var(--btn-basic-border);border-bottom:1px solid var(--btn-basic-border);}
.product-detail-top .pinfo .pricebox .costprice {color:#e30303;font-weight:500;letter-spacing:-1px;padding-left:2px;}
.product-detail-top .pinfo .pricebox .costprice span {margin-right:8px;font-size:1.2rem;color:#a1a1a1;font-weight:300 !important;letter-spacing:0;text-decoration:line-through;text-decoration-color:#e30303;text-decoration-thickness:1px;}
.product-detail-top .pinfo .pricebox .saleprice {font-size:1.1rem;font-weight:500;line-height:1.3;letter-spacing:-0.5px;}
.product-detail-top .pinfo .pricebox .saleprice img {width:32px;height:32px;margin:2px 4px 0 0;}
.product-detail-top .pinfo .pricebox .saleprice .promo-price {padding-left:5px;color:#e30303;font-size:1.7rem;font-weight:600;}
.product-detail-top .pinfo .pricebox .saleprice .won {font-weight:400 !important;margin-left:2px;}

/* 버튼(할인쿠폰) */
.btn-coupon {margin:20px auto 0;width:65%;display:block;background:#533399;color:#fff;font-size:1rem;font-weight:300;text-align:center;padding:18px 0;line-height:1;cursor: pointer;border-radius:4px;}
.btn-coupon img {width:16px;height:16px;margin:0 0 0 10px;}
.btn-coupon strong {color:#ffeb00;font-weight:400;}

/* 갯수선택 */
.product-option {width:100%;margin-top:10px;}
.product-option-filter {width:100%;font-size:0.9rem;padding:15px 36px 15px 12px;}
.product-count {padding:15px 0 0 0;}
.product-count p {font-size:0.9rem;}
.product-count-inner {width:100%;padding-top:5px;display:flex;justify-content: space-between;}
.counter-wrapper {display:inline-flex;border:1px solid var(--qtyinput-border-tone);overflow:hidden;border-radius: 4px;}
.counter-button { width:32px; height:32px; border: none;background-color:var(--qtyinput-bg-tone);font-size:0.9rem;cursor: pointer; transition: background-color 0.2s; }
.counter-button:hover {background-color:var(--qtyinput-hover-tone);}
.counter-button:first-child {border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
.counter-button:last-child {border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.counter-value { width: 50px; height: 32px; text-align: center; line-height: 32px; font-size:1rem;border-left:1px solid var(--qtyinput-border-tone);border-right:1px solid var(--qtyinput-border-tone);background-color:var(--qtyinput-bg-tone);}
.counter-wrapper * { user-select: none; }
.counter-price {width:40%;display:flex;justify-content: flex-end;align-items:center;}
.counter-price .price-item {padding-right:20px;font-size:1.1rem;}
.counter-price .price-item strong {font-weight:600;}
.counter-price .delete {}
.close-button {display: flex; justify-content: center; align-items: center; width:28px; height:28px; cursor: pointer; border: none; background-color: transparent; padding: 0; }
.close-button svg { width: 100%; height: 100%; stroke: #888; stroke-width:1; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 총 상품 금액 */
.total-price {width:100%;padding:5px;margin-top:20px;border-top:1px solid var(--color-border);display:flex;justify-content: space-between;}
.total-price .tit {width:30%;height:40px;line-height:48px;font-weight:500;}
.total-price .price-item {width:70%;height:40px;display:flex;justify-content: flex-end;}
.total-price .price-item .total {padding-right:20px;line-height:48px;}
.total-price .price-item .price-all {line-height:48px;}
.total-price .price-item .price-all strong {color:#e30303;font-size:1.5rem;font-weight:600;line-height:40px;padding-right:3px;}

/* 버튼 */
.btn-buy {margin:18px auto 0;width:100%;display:block;background:#dd2432;color:#fff;font-size:1.1rem;font-weight:500;text-align:center;padding:20px 0;line-height:1;cursor: pointer;border-radius:4px;}
.btn-b-wrap {width:100%;padding:11px 0 0 0;display: flex;justify-content: space-between;}
.btn-b-wrap button {width:49%;background-color: var(--btncart-bg-light);border:1px solid var(--btncart-border-light);font-size:1rem;font-weight:500;border-radius:4px;text-align:center;padding:17px 0;line-height:1;cursor: pointer;display: flex;align-items: center;justify-content: center;}

/* 탭메뉴 */
.tab-menu {padding-top:30px;width:100%;box-shadow: 0 2px 1px rgba(0,0,0,0.03);}
.tab-menu ul {display: flex;border:1px solid var(--color-border);border-radius: 4px 4px 0 0;overflow: hidden;}
.tab-menu li { flex: 1; text-align: center;padding:12px 0;font-size:0.9rem; border-right:1px solid var(--color-border);background:var(--tab-bg-base-lm); transition: background 0.3s ease, color 0.3s ease; }
.tab-menu li:first-child {border-top-left-radius: 4px;}
.tab-menu li:last-child {border-top-right-radius: 4px;border-right: none;}
.tab-menu li a { display: block; text-decoration: none;color:var(--color-text-default);}
.tab-menu li span {display:none;}
.tab-menu li:hover a {color: #131c40;}
.tab-menu li:hover { background:var(--tab-bg-hover-lm); }
.tab-menu li.active { background:var(--tab-bg-active-lm); font-weight:500; }
.tab-menu li.active a {color: #fff;}
.tab-menu li:last-child { border-right: none; }
.tab-section {padding:30px 0; border-bottom:1px solid var(--color-border);scroll-margin-top:100px; }
.tab-section:last-child { border-bottom: none; }
.tab-section h3 {padding:10px 0;font-size:1.4rem;font-weight:500;text-align:center;line-height:1.5;}
.tab-section .tit {font-size:1.2rem;font-weight:600;letter-spacing:-0.5px;}
.tab-section .sub-tit {padding:20px 0 5px 0;font-size:0.96rem;font-weight:500;}
.tab-section .sub-tit .btn-receive {display: inline-block;margin-left:10px;padding:7px 17px 6px 17px;font-size:0.76rem;line-height:1;color:#fff;background-color: #0099ff;border-radius: 3px;}
.tab-section .dtxtbox {font-size:0.8rem;color:#666;line-height:1.5;}
.tab-section .imgbox {text-align:center;padding:30px 0 10px 0;}
.tab-section .imgbox img {width:100%;}
.tab-section .imgbox-de {text-align:center;padding:20px 0;}
.tab-section .imgbox-de img {width:100%;height:auto;}

/* 공유하기 창 */
.share-container {position:absolute;right:0;top:10px;display: inline-block;}
.share-container .btn-share {display:block;width:40px;height:40px;background:#fff url('/theme/osakapick/img/share.png') no-repeat center center;background-size:24px 24px;cursor: pointer;text-indent: -9999px;}
@media (prefers-color-scheme: dark){.share-container .btn-share{background-color:transparent;background-image:url('/theme/osakapick/img/share_dark.png') !important;}}
.sns-icons-window {display: none;position: absolute;top: 100%; /* 버튼 바로 아래 */left: -140px;background-color:#fff;border: 1px solid #e1e1e1;border-radius:4px;padding: 12px;box-shadow: 0 4px 8px rgba(0,0,0,0.05);margin-top: 8px;z-index: 1000; /* 아래 display: flex는 .show 클래스에서 제어합니다. */gap: 12px;}
.sns-icons-window.show {display: flex; /* <<-- 중요: 이 클래스가 JS에 의해 추가되면 보여짐 */}
.sns-icon {width: 30px;height: 30px;border-radius: 50%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;cursor: pointer;overflow: hidden;}
.sns-icon img {width: 100%;height: auto;}
.sns-icon:hover {opacity: 0.8;}

/* 서브메뉴 스와이프 */
.web-submenu-container {display:none;}
.submenu-container {display: flex;position: relative;border-bottom: none;z-index: 100;margin-bottom:20px;border-top:1px solid var(--color-border);}
.submenu-container::after {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 1px;background:var(--color-border);z-index: 1;}
.submenu-tabs-wrapper {flex-grow: 1;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;-ms-overflow-style: none;}
.submenu-tabs-wrapper::-webkit-scrollbar {display: none;}
.submenu-tabs {display: flex;list-style: none;padding: 0 5px;margin: 0;white-space: nowrap;}
.submenu-item {flex-shrink: 0;padding: 0 10px;}
.submenu-item a {display: block;font-size:0.9rem;padding:9px 0 0 0;transition: color 0.2s;border-bottom: none !important;position: relative;z-index: 2;}
.submenu-item.active a {font-weight:600;}
.submenu-item.active a::after {content: '';position: absolute;bottom: -9px;left: 0;right: 0;height:2px;background: #764ba2;z-index: 10;}
.submenu-toggle-btn {flex-shrink: 0;width:40px;height:40px;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);cursor: pointer;display: flex;justify-content: center;align-items: center;position: relative;z-index: 10;margin-left: -1px;}
.submenu-arrow-icon {display: block;width:14px;height:14px;background-repeat: no-repeat;background-position: center;transition: background 0.3s ease;background-image: url('/theme/osakapick/img/down-arrow.png');background-size: contain;}
.submenu-toggle-btn.expanded .submenu-arrow-icon {background-image: url('/theme/osakapick/img/up-arrow.png');}
.submenu-expanded-panel {position: absolute;top:40px;left: 0;right: 0;background:var(--color-background);border-bottom: 1px solid var(--color-border);max-height:160px;overflow-y: auto;opacity: 0;visibility: hidden;transform: translateY(0);transition: opacity 0.3s, visibility 0.3s, transform 0.3s;z-index: 99;}
.submenu-expanded-panel.open {opacity: 1;visibility: visible;transform: translateY(0);}
.submenu-full-tabs {display: grid;grid-template-columns: repeat(2, 1fr);gap: 5px 0;padding: 10px 10px;}
.submenu-full-tabs .submenu-item {padding: 0;}
.submenu-full-tabs .submenu-item a {padding:5px 7px;border-bottom: none;}
.submenu-full-tabs .submenu-item.active a {font-weight:600;border-bottom: none;}
.submenu-full-tabs .submenu-item.active a::after {content: none;}

/* 1204 세부 카테고리 no-data일 경우 포함-하유정 */
.goods-inner {display:flex;flex-wrap:wrap;width:100%;justify-content:flex-start;gap:5.5555%;}
.goods-inner .gbox {position:relative;width:47.2222%;padding:0 0 20px 0;margin-bottom:20px;}
.goods-inner .no-data-m {width:80%;margin:0 auto;padding:30px 0;}

/* 1204 세부 카테고리 no-data일 경우 포함-하유정 (태블릿의 경우)*/
@media (min-width: 640px) and (max-width: 991px) {
.goods-inner {display:flex;flex-wrap:wrap;width:100%;justify-content:flex-start;gap:3.3613%;}
.goods-inner .gbox {position:relative;width:31.0924%;padding:0 0 20px 0;margin-bottom:20px;}
.goods-inner .no-data-m {width:80%;margin:0 auto;padding:30px 0;}
}

/***************************************************************************/
/*				        데스크톱/Large Devices (992px 이상)	   	                     /
/***************************************************************************/
@media (min-width: 992px) {

.sub-top-ban {padding:15px 0 0 0;display: grid;grid-template-columns: repeat(3, 1fr);gap:30px;}
.sub-top-ban .banbox:nth-child(3) {display: block;}
.sub-top-ban .banbox img {border-radius:0;}
.goods-sub {margin:50px auto 0;}
.goods-sub >.tit {font-size: 1.7rem;text-align: center;font-weight:600;margin-bottom:30px;}

/* ----- 숨김 처리 ---- */
.mb-menubar {display:none;} /* 모바일 하단메뉴바 */
.option-slide {display:none;} /* 모바일 옵션슬라이드창 */
#initial-bar {display:none;} /* 모바일 구매하기 슬라이드창 */
#purchase-panel {display:none;} /* 모바일 구매하기 슬라이드창 */
.panel-bar {display: none;} /* 모바일 구매하기 슬라이드창 */

/* 상품정보 */
.product-detail-top .pimg {width:50%;position:unset;}
.product-detail-top .pimg img {width:100%;height:100%;object-fit:cover;}
.product-detail-top .oneplusone-icon {position:absolute;width:10% !important;height:unset !important;object-fit:cover;scale:unset;top:unset;left:unset;}
.product-detail-top .pinfo {position: relative;width:44%;}
.product-detail-top .pinfo h1 {width:86%;font-size:1.6rem;padding-top:0;font-weight:600;}
.product-detail-top .pinfo h2 {text-align:left;padding-top:15px;font-size:0.86rem;letter-spacing:-0.5px;line-height:1.5;}
.product-detail-top .pinfo .pricebox .costprice {font-family:"Pretendard", sans-serif;}
.product-detail-top .pinfo .pricebox .saleprice {font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-0.5px;}
.product-detail-top .pinfo .pricebox .saleprice .won {margin-left:2px;}
.product-detail-top .pinfo .pricebox .saleprice .promo-price {font-family:"Pretendard", sans-serif;}

/* 버튼(할인쿠폰) */
.btn-coupon {margin:20px auto 0;width:50%;background:#533399;color:#fff;font-size:1rem;font-weight:500;padding:20px 0;border-radius:4px;}
.btn-coupon strong {color:#ffde00;font-weight:600;}
.btn-order-cart {width: 49%;font-size: 1rem;font-weight: 400;letter-spacing: -0.5px;text-align: center;padding: 18px 0;line-height: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;gap:5px;}
.btn-order-cart .cart-icon-img {display: inline-block;width: 20px;height: 20px;background:url('/theme/osakapick/img/cart.png') no-repeat center center;background-size: contain;}

/* 옵션/갯수/금액/버튼 한개로 묶음(모바일은 숨김) */
.buy-wrap {display:block;} 
.product-option {width:100%;margin-top:20px;}
.product-option-filter {width:100%;font-size:0.96rem;padding:10px 36px 10px 12px;}
.product-count {padding:17px 0 0 0;}
.product-count p {font-size:0.96rem;}
.counter-value {font-size:0.9rem;}
.counter-price .price-item {font-family:"Pretendard", sans-serif;}
.close-button {display: flex; justify-content: center; align-items: center; width:28px; height:28px; cursor: pointer; border: none; background-color: transparent; padding: 0; }
.close-button svg { width: 100%; height: 100%; stroke: #888; stroke-width:1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.total-price {width:100%;padding:15px 0 0 0;margin-top:20px;border-top:1px solid var(--color-border);display:flex;justify-content: space-between;}
.total-price .tit {width:30%;height:40px;line-height:48px;font-weight:500;}
.total-price .price-item {width:60%;height:40px;display:flex;justify-content: flex-end;}
.total-price .price-item .total {padding-right:50px;line-height:48px;}
.total-price .price-item .price-all {line-height:48px;font-family:"Pretendard", sans-serif;}
.total-price .price-item .price-all strong {color:#e30303;font-size:1.8rem;font-weight:600;line-height:40px;padding-right:3px;}

/* 탭메뉴 */
.tab-menu {padding-top:100px;}
.tab-menu li {padding:15px 0;font-size:1rem;}
.tab-menu li span {display:block;font-size:0.9rem;font-weight:300;}
.tab-menu li span strong {font-weight:400;padding:0 1px;}
.tab-section {padding:50px 0;scroll-margin-top:200px; }
.tab-section h3 {padding:50px 0;font-size:1.8rem;font-weight:600;}
.tab-section .tit {font-size:1.26rem;}
.tab-section .sub-tit {padding:40px 0 5px 0;font-size:1rem;font-weight:600;}
.tab-section .dtxtbox {font-size:0.9rem;}
.tab-section .imgbox {text-align:center;padding:30px 0;}
.tab-section .imgbox img {width: auto;height: auto;max-width: 100%;object-fit: contain;display: block; margin: 0 auto;}
.tab-section .imgbox-de {padding:30px 0;}
.tab-section .imgbox-de img {width:768px;height:512px;}

/* 공유하기 창 */
.share-container {top:-6px;}

/* 서브메뉴 */
.submenu-container {display: none;}
.web-submenu-container {display:block;width:100%;max-width:900px;margin: 0 auto;text-align: center;margin-bottom:40px;}
.web-submenu-list {display: inline-block;padding: 0;margin: 0;list-style: none;}
.web-submenu-item {display: inline-block;margin-right:5px;margin-bottom: 10px;}
.web-submenu-item:last-child {margin-right: 0;}
.web-submenu-item a {display: block;padding:8px 20px;border:1px solid var(--color-border);border-radius:30px;font-size:0.9rem;transition: all 0.3s;white-space: nowrap;}
.web-submenu-item.web-active a {background-color: #533399;border-color:#533399;color: #fff;font-weight:500;}
.web-submenu-item:not(.web-active) a:hover {background-color:var(--color-background-secondary);border-color: var(--color-border);}

/* 1204 세부 카테고리 no-data일 경우 포함-하유정 */
.goods-inner {display:flex;flex-wrap:wrap;width:100%;justify-content:flex-start;gap:1.5873%;}
.goods-inner .gbox {position:relative;width:23.8095%;padding:0 0 80px 0;}
.goods-inner .no-data {width:300px;margin:0 auto;padding:20px 0 30px;}
}