@charset "utf-8";

/* jj_class에서 jj_shop 뷰 CSS 변수를 그대로 사용하기 위한 별칭 */
#bo_v.jj-class-shop-view{
    --white:#ffffff;
    --dark:#0f172a;
    --slate:#64748b;
    --rose:#e11d48;
    --shop-accent:var(--class-accent, #001e45);
}


/* ============================================================
   JEILJOA 상품 상세
   ============================================================ */

/* ============================================================
   12컬럼 그리드 (좌:43, 우:17, gap:20px)
   ============================================================ */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 0;
}

/* ---------- 패키지 구성 ---------- */
.package-component-section{margin-top:24px;padding:24px;border:1px solid #e2e8f0;border-radius:22px;background: var(--white);box-shadow:0 4px 18px rgba(15,23,42,.04)}
.package-component-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.package-component-heading>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.package-component-heading h2{margin:0;color: var(--dark);font-size:19px;font-weight:800}
.package-component-badge{padding:4px 9px;border-radius:7px;background:var(--shop-accent);color: var(--white);font-size:11px;font-weight:800}
.package-component-count{padding:3px 9px;border-radius:999px;background:#f1f5f9;color:var(--shop-accent);font-size:12px;font-weight:700}
.package-component-intro{margin:8px 0 14px;color: var(--slate);font-size:13px}
.package-component-items{border-top:1px solid #f1f5f9}
.package-component-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:13px;align-items:center;padding:15px 4px;border-bottom:1px dashed #e2e8f0}
.package-component-item:last-child{border-bottom:0}
.package-component-item.excluded{opacity:.58;background:#f8fafc}
.package-component-index{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;background:#f1f5f9;color:var(--shop-accent);font-size:11px;font-weight:800}
.package-component-info{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}
.package-component-info strong{color: var(--dark);font-size:14px}
.package-component-info>span{color: var(--slate);font-size:12px}
.package-reference-button{margin-top:4px;padding:3px 8px;border:1px solid #dbe4ee;border-radius:7px;background: var(--white);color:var(--slate);font-size:11px;cursor:pointer}
.package-reference-button:hover{border-color:var(--shop-accent);color:var(--shop-accent)}
.package-component-control{display:flex;align-items:center;gap:7px}
.package-component-qty{display:flex;height:34px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background: var(--white)}
.package-component-qty button{width:32px;border:0;background: var(--white);color:#334155;font-size:15px;font-weight:700;cursor:pointer}
.package-component-qty button:disabled{opacity:.3;cursor:not-allowed}
.package-component-qty input{width:46px;border:0;border-right:1px solid #e2e8f0;border-left:1px solid #e2e8f0;text-align:center;font-weight:700;-moz-appearance:textfield}
.package-component-qty input::-webkit-inner-spin-button,.package-component-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.package-component-toggle{min-width:38px;height:34px;padding:0 9px;border:1px solid #e2e8f0;border-radius:8px;background: var(--white);color: var(--slate);font-size:17px;font-weight:700;cursor:pointer}
.package-component-item.excluded .package-component-qty{display:none}
.package-component-item.excluded .package-component-toggle{min-width:58px;color:var(--shop-accent);font-size:12px}
.package-summary-label{color: var(--slate);font-size:11px;font-weight:600}
.package-summary-components{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:10px;border-radius:10px;background:#f8fafc}
.package-summary-row{display:flex;justify-content:space-between;gap:8px;color:var(--slate);font-size:12px}
.package-summary-row.excluded{color:#94a3b8;text-decoration:line-through}
.reference-image-modal[hidden],
.reference-image-body img[hidden],
.reference-image-empty[hidden]{display:none!important}
.reference-image-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px}
.reference-image-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.66)}
.reference-image-dialog{position:relative;width:min(520px,100%);padding:20px;border-radius:18px;background: var(--white);box-shadow:0 25px 70px rgba(0,0,0,.25)}
.reference-image-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.reference-image-header h2{margin:0;color: var(--dark);font-size:18px;font-weight:800}
.reference-image-x{border:0;background:transparent;color: var(--slate);font-size:26px;cursor:pointer}
.reference-image-body{display:flex;width:100%;aspect-ratio:1/1;min-height:0;align-items:center;justify-content:center;overflow:hidden;border-radius:13px;background: var(--white)}
.reference-image-body img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background: var(--white)}
.reference-image-empty{display:flex;max-width:330px;flex-direction:column;align-items:center;gap:8px;padding:34px;text-align:center}
.reference-image-empty i{color:#cbd5e1;font-size:48px}
.reference-image-empty strong{color:#334155;font-size:15px}
.reference-image-empty span,.reference-image-notice{color:#94a3b8;font-size:12px;line-height:1.55}
.reference-image-notice{margin:13px 0;text-align:center}
.reference-image-close{display:block;width:100%;padding:11px;border:0;border-radius:10px;background:var(--shop-accent);color: var(--white);font-weight:700;cursor:pointer}
@media(max-width:640px){.package-component-section{padding:18px}.package-component-item{grid-template-columns:34px minmax(0,1fr)}.package-component-control{grid-column:1/-1;justify-content:flex-end}.package-reference-button{margin-top:6px}}

/* PC/태블릿 반응형
   - 넓은 화면에서는 기존 비율(55778:24222)로 두 칼럼이 함께 줄어듭니다.
   - 오른쪽 칼럼은 최소 276px을 유지합니다.
   - 오른쪽이 276px에 도달한 뒤에는 왼쪽 칼럼만 더 줄어듭니다.
*/
@media (min-width: 768px) {
    .product-detail-grid {
        grid-template-columns: minmax(0, 703642fr) minmax(276px, 296358fr);
        gap: 32px;
    }
}

/* 모바일: 1컬럼 (767px 이하) */
@media (max-width: 767px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .product-right {
        position: static;
    }
}

/* ---------- 좌측 컬럼 ---------- */
.product-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---------- 이미지 카드 (수정됨: 패딩 제거 + 정사각형 + cover) ---------- */
.product-image-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.product-image-card .card-header {
    padding: 0 0 4px;
}
.product-image-card .card-header .badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-image-card .card-header .badge-category {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 2px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate);
}
.product-image-card .card-header .badge-type {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid rgba(0,30,69,0.1);
    background: rgba(0,30,69,0.05);
    padding: 2px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--shop-accent);
}

/* ★ 모바일에서 배지가 보이도록 강제 ★ */
@media (max-width: 767px) {
    .product-image-card .card-header .badge-group {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }
    .product-image-card .card-header .badge-category,
    .product-image-card .card-header .badge-type {
        font-size: 10px;
        padding: 2px 10px;
    }
}

.product-image-card .card-header .product-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-top: 12px;
}
@media (min-width: 1280px) {
    .product-image-card .card-header .product-title {
        font-size: 32px;
    }
}
.product-image-card .card-header .product-desc {
    font-size: 15px;
    color: var(--slate);
    margin-top: 8px;
    line-height: 1.6;
}
.product-image-card .card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: transparent;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 400px;
    margin: 24px auto 0;
}
.product-image-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
    transform: none;
    border-radius: 8px;
}
/* ---------- 상품 정보 탭 ---------- */
.product-tabs {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.product-tabs .tab-nav {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
}
.product-tabs .tab-nav .tab-btn {
    flex: 1;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    color: #94a3b8;
    position: relative;
}
.product-tabs .tab-nav .tab-btn:hover {
    color: var(--dark);
    background: #fafafa;
}
.product-tabs .tab-nav .tab-btn.active {
    color: var(--shop-accent);
    background: #f8fafc;
}
.product-tabs .tab-nav .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--shop-accent);
}
.product-tabs .tab-content .tab-pane {
    display: none;
}
.product-tabs .tab-content .tab-pane.active {
    display: block;
}
.tab-pane-body {
    min-height: 300px;
    padding: 24px;
}
@media (min-width: 640px) {
    .tab-pane-body {
        padding: 40px;
    }
}
.tab-pane-flush {
    padding: 0;
}

/* ---------- 상세 이미지 없는 경우 (탭 없음) ---------- */
.product-tabs-single {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.product-tabs-single .tab-content-single {
    padding: 32px 24px;
}
@media (min-width: 640px) {
    .product-tabs-single .tab-content-single {
        padding: 40px;
    }
}

/* ---------- 상세정보 빈 상태 (Font Awesome) ---------- */
.detail-empty-state {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.detail-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.detail-empty-icon {
    font-size: 48px;
    color: #e2e8f0;
}
.detail-empty-text {
    font-size: 16px;
    color: #94a3b8;
    margin: 0;
}

/* ---------- 대여 안내 탭 ---------- */
.rental-guide {
    max-width: 720px;
    margin: 0 auto;
}
.rental-guide .guide-intro {
    margin-bottom: 40px;
}
.rental-guide .guide-badge {
    display: inline-block;
    background: rgba(0,30,69,0.08);
    color: var(--shop-accent);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}
.rental-guide .guide-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin: 0 0 12px;
}
.rental-guide .guide-desc {
    font-size: 15px;
    color: var(--slate);
    line-height: 1.7;
    margin: 0;
}
.rental-guide .guide-steps {
    border-top: 1px solid #f1f5f9;
    padding-top: 32px;
}
.rental-guide .guide-steps-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 20px;
}
.rental-guide .guide-step-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.rental-guide .guide-step-card {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s;
}
.rental-guide .guide-step-card:hover {
    border-color: #e2e8f0;
    transform: translateY(-2px);
}
.rental-guide .guide-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rental-guide .guide-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-accent);
    font-size: 16px;
}
.rental-guide .guide-step-num {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
}
.rental-guide .guide-step-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 6px;
}
.rental-guide .guide-step-desc {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 640px) {
    .rental-guide .guide-step-grid {
        grid-template-columns: 1fr;
    }
    .rental-guide .guide-title {
        font-size: 20px;
    }
}

/* ---------- 우측 견적 요약 ---------- */
.product-right {
    position: relative;
}

@media (min-width: 768px) {
    .product-right::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        width: 1px;
        background: #d6dce5;
        pointer-events: none;
    }
}
.quote-summary {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 24px;
    box-shadow: none;
}
.quote-summary .summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 6px;
}
.quote-summary .summary-title i {
    color: var(--shop-accent);
    font-size: 20px;
}
.quote-summary .summary-desc {
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ---------- 수량 조절 (우측 칼럼) ---------- */
.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13.5px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 4px;
}
.selected-item .label {
    color: var(--slate);
    flex: 1;
}
.qty-control-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}
.qty-control-inline .qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--white);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: #334155;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-control-inline .qty-btn:hover {
    background: #f1f5f9;
}
.qty-control-inline .qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.qty-control-inline .qty-value {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

/* ---------- 옵션 (견적 요약 내부) ---------- */
.option-in-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.option-divider {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 8px;
}
.option-divider:first-of-type {
    margin-top: 0;
}
.option-group {
    margin-bottom: 10px;
}
.option-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 3px;
}
.option-group select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: var(--white);
    transition: border-color 0.2s;
    appearance: auto;
}
.option-group select:focus {
    outline: none;
    border-color: var(--shop-accent);
}

/* ★ 추가 구성품 체크박스 - 강화된 스타일 */
.extra-check-item {
    margin-bottom: 8px;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    transition: all 0.2s ease;
}
.extra-check-item:hover {
    border-color: #cbd5e1;
    background: #fafbfc;
}
.extra-check-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background 0.2s;
    width: 100%;
}
.extra-check-item .checkbox-label:hover {
    background: #f8fafc;
}
.extra-check-item .checkbox-label input[type="checkbox"] {
    display: none;
}
.extra-check-item .checkbox-label .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}
.extra-check-item .checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--shop-accent);
    border-color: var(--shop-accent);
}
.extra-check-item .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.extra-check-item .checkbox-label .extra-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    flex: 1;
}
.extra-check-item .checkbox-label .extra-desc {
    font-size: 12px;
    color: #94a3b8;
    flex: 1;
}
.extra-check-item .checkbox-label .option-badge {
    font-weight: 600;
    color: var(--slate);
    background: #f1f5f9;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.2s;
}
.extra-check-item .checkbox-label input[type="checkbox"]:checked ~ .option-badge {
    background: var(--shop-accent);
    color: white;
}

/* ---------- 가격 ---------- */
.quote-summary .price-area {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.quote-summary .price-area .price-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate);
}
.quote-summary .price-area .price-note {
    font-size: 11px;
    color: #0d9488;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}
.quote-summary .price-area .price-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--rose);
}

/* ---------- 버튼 ---------- */
.quote-summary .btn-group {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.quote-summary .btn-group .btn-quote,
.quote-summary .btn-group .btn-cart {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}
.quote-summary .btn-group .btn-quote {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--shop-accent);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.quote-summary .btn-group .btn-quote:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}
.quote-summary .btn-group .btn-quote:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
}
.quote-summary .btn-group .btn-cart {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: var(--shop-accent);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.quote-summary .btn-group .btn-cart:hover {
    background: #f1f5f9;
    border-color: var(--shop-accent);
}

/* ---------- 푸터 ---------- */
.quote-summary .summary-footer {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
    color: #94a3b8;
    line-height: 1.8;
}
.quote-summary .summary-footer .highlight {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--shop-accent);
    font-weight: 500;
    background: #f8fafc;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #f1f5f9;
    margin-top: 6px;
}

/* ---------- 인증 배지 (Font Awesome) ---------- */
.cert-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.cert-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    background: transparent;
    transition: none;
}
.cert-badge:hover {
    box-shadow: none;
}
.cert-badge .badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.cert-badge .badge-icon.blue {
    background: #eff6ff;
    color: #3b82f6;
}
.cert-badge .badge-icon.purple {
    background: #f5f3ff;
    color: #8b5cf6;
}
.cert-badge .badge-icon.pink {
    background: #fdf2f8;
    color: #ec4899;
}
.cert-badge .badge-icon.slate {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: var(--slate);
}
.cert-badge .badge-info .badge-title {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--dark);
}
.cert-badge .badge-info .badge-desc {
    font-size: 12.5px;
    color: var(--slate);
    margin-top: 2px;
}

/* ---------- 하단 버튼 (관리자) ---------- */
.bo_v_bottom_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}
.bo_v_bottom_actions .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: var(--white);
    color: var(--slate);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.bo_v_bottom_actions .btn-action:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--dark);
}
.bo_v_bottom_actions .btn-action.danger {
    color: var(--rose);
}
.bo_v_bottom_actions .btn-action.danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

/* ---------- 모달 스타일 ---------- */
.quote-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.quote-modal-overlay.active {
    display: flex;
}
.quote-modal {
    background: var(--white);
    border-radius: 28px;
    max-width: 460px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.quote-modal .modal-header {
    padding: 28px 28px 16px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}
.quote-modal .modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}
.quote-modal .modal-header p {
    font-size: 14px;
    color: var(--slate);
    margin: 4px 0 0;
}
.quote-modal .modal-body {
    padding: 24px 28px;
}
.quote-modal .modal-body .summary-box {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
}
.quote-modal .modal-body .summary-box .product-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}
.quote-modal .modal-body .summary-box .product-row .label {
    color: var(--slate);
}
.quote-modal .modal-body .summary-box .product-row .value {
    font-weight: 500;
    color: var(--dark);
}
.quote-modal .modal-body .summary-box .extra-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.quote-modal .modal-body .summary-box .extra-section .extra-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: 6px;
}
.quote-modal .modal-body .summary-box .extra-section .extra-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #334155;
    padding: 2px 0;
}
.quote-modal .modal-body .summary-box .extra-section .extra-item .qty {
    font-weight: 500;
    color: var(--dark);
}
.quote-modal .modal-footer {
    display: flex;
    gap: 12px;
    padding: 0 28px 28px;
}
.quote-modal .modal-footer .btn-cancel {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: var(--white);
    color: var(--slate);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.quote-modal .modal-footer .btn-cancel:hover {
    background: #f8fafc;
}
.quote-modal .modal-footer .btn-confirm {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: var(--shop-accent);
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.quote-modal .modal-footer .btn-confirm:hover {
    filter: brightness(1.2);
}

/* ---------- 기존 게시판 요소 숨김 ---------- */
#bo_v_info,
#bo_v_act,
#bo_v_share,
.bo_v_nb,
#bo_v_bottom {
    display: none !important;
}
#bo_v_atc {
    padding: 0;
    min-height: auto;
}

/* ---------- 성공 아이콘 ---------- */
.success-icon {
    margin: 0 auto 16px;
    width: 64px;
    height: 64px;
    background: rgba(0,30,69,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-icon i {
    font-size: 32px;
    color: var(--shop-accent);
}

/* ---------- 상품 등록 완료 모달 ---------- */
body.product-register-modal-open {
    overflow: hidden;
}
.product-register-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
    box-sizing: border-box;
}
.product-register-modal {
    width: 100%;
    max-width: 460px;
    padding: 34px 30px 30px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    text-align: center;
    animation: productRegisterModalIn 0.22s ease-out;
    box-sizing: border-box;
}
@keyframes productRegisterModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.product-register-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #16a34a;
}
.product-register-modal-icon i {
    font-size: 32px;
}
.product-register-modal h2 {
    margin: 0 0 10px;
    color: var(--dark);
    font-size: 23px;
    font-weight: 800;
}
.product-register-modal p {
    margin: 0;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.65;
    word-break: keep-all;
}
.product-register-modal p strong {
    color: #334155;
}
.product-register-modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}
.product-register-modal-buttons a,
.product-register-modal-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.product-register-modal-continue {
    border: 1px solid var(--shop-accent);
    background: var(--shop-accent);
    color: var(--white);
}
.product-register-modal-continue:hover {
    filter: brightness(1.2);
    color: var(--white);
}
.product-register-modal-view {
    border: 1px solid #cbd5e1;
    background: var(--white);
    color: #334155;
}
.product-register-modal-view:hover {
    background: #f8fafc;
}
@media (max-width: 480px) {
    .product-register-modal-overlay { padding: 14px; }
    .product-register-modal {
        padding: 28px 18px 20px;
        border-radius: 16px;
    }
    .product-register-modal h2 { font-size: 20px; }
    .product-register-modal-buttons { flex-direction: column; }
    .product-register-modal-buttons a,
    .product-register-modal-buttons button { width: 100%; }
}

/* ============================================================
법적 고지 섹션 스타일 (신규 추가)
============================================================ */
.legal-notice-section {
    margin-top: 40px;
    padding: 24px 28px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fafbfc;
}

.notice-header {
    margin-bottom: 20px;
}

.notice-badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--shop-accent);
    color: var(--white);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.notice-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 10px 0 4px;
}

.notice-desc {
    font-size: 13px;
    color: var(--slate);
    margin: 0;
}

.notice-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 0;
}

.notice-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}

.notice-row:last-child {
    border-bottom: none;
}

.notice-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.notice-value {
    font-size: 13px;
    color: var(--dark);
}

.notice-important {
    color: #dc2626;
    font-weight: 600;
}

.text-muted {
    color: #94a3b8;
}

.notice-row-image {
    grid-template-columns: 130px 1fr;
    align-items: flex-start;
}

.nutrition-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.common-notice,
.trade-terms {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid #e2e8f0;
}

.common-notice h5,
.trade-terms h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 10px;
}

.common-notice ul,
.trade-terms ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.common-notice ul li,
.trade-terms ul li {
    padding: 4px 0;
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
}

.common-notice ul li::before {
    content: "· ";
    color: var(--shop-accent);
    font-weight: 700;
}

.notice-image-area {
    margin-top: 16px;
    text-align: center;
}

.image-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 10px;
}

@media (max-width: 640px) {
    .notice-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 8px;
    }
    
    .notice-label {
        font-weight: 700;
    }
    
    .legal-notice-section {
        padding: 16px;
    }
}

/* ---------- 법적 고지 섹션 스타일 끝 ---------- */


/* 상품 상세 이미지와 고시를 순서대로 노출 */
.product-detail-images{margin:28px 0 22px;background:transparent;border:0;border-radius:0;overflow:visible}
.section-heading-simple{padding:18px 22px;border-bottom:1px solid #eef2f7}
.section-heading-simple h2{margin:0;font-size:20px;line-height:1.35;color: var(--dark);font-weight:800}
.product-detail-images .detail-image-list{padding:0}
.product-detail-images .detail-image-list img{display:block;width:850px;max-width:100%;height:auto}

/* 브레드크럼을 숨기되, 검색 봇은 볼 수 있음 */
.mb-6 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   jj_shop 원본의 product tabs / policy accordion
   ============================================================ */
.jj-product-tabs{margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
.jj-product-tablist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;background:transparent}
.jj-product-tab{position:relative;min-height:58px;padding:15px 18px;border:0;background:transparent;color:var(--slate);font-size:16px;font-weight:800;cursor:pointer}
.jj-product-tab+.jj-product-tab{border-left:1px solid #e2e8f0}
.jj-product-tab:hover{color:var(--dark);background:#fff}
.jj-product-tab.is-active{color:var(--dark);background:#fff}
.jj-product-tab.is-active:after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--dark)}
.jj-product-tab:focus-visible{outline:3px solid rgba(0,30,69,.22);outline-offset:-3px}
.jj-product-tabpanel{padding:0}
.jj-product-tabpanel[hidden]{display:none!important}
.jj-product-content{padding:26px 24px;color:#334155;line-height:1.8;overflow-wrap:anywhere}
.jj-product-content img{max-width:100%;height:auto}
.jj-product-tabs .product-detail-images{margin:0;border:0;border-radius:0}
.jj-empty-panel{padding:54px 24px;text-align:center;color:#94a3b8}

.jj-policy-accordion-card{margin:26px 0 0;padding-top:24px;border:0;border-top:1px solid #e2e8f0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
.jj-policy-accordion-head{padding:0 0 14px;border-bottom:1px solid #edf2f7}
.jj-policy-accordion-head h2{margin:0 0 4px;color:var(--dark);font-size:17px;line-height:1.35;font-weight:900}
.jj-policy-accordion-head p{margin:0;color:#94a3b8;font-size:12px;line-height:1.5}
.jj-policy-accordion-item{border-bottom:1px solid #edf2f7}
.jj-policy-accordion-item:last-child{border-bottom:0}
.jj-policy-accordion-item h3{margin:0}
.jj-policy-accordion-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:13px 0;border:0;background:transparent;color:#334155;font-size:14px;font-weight:800;text-align:left;cursor:pointer}
.jj-policy-accordion-button:hover,.jj-policy-accordion-item.is-open .jj-policy-accordion-button{background:#f8fafc;color:var(--dark)}
.jj-policy-accordion-button:focus-visible{outline:3px solid rgba(0,30,69,.2);outline-offset:-3px}
.jj-policy-accordion-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;margin-left:10px;border-radius:50%;background:#f1f5f9;color:var(--dark);font-size:18px;font-weight:500;line-height:1}
.jj-policy-accordion-panel{padding:0 0 16px;background:transparent;color:var(--slate);font-size:12.5px;line-height:1.65}
.jj-policy-accordion-panel[hidden]{display:none!important}
.jj-policy-accordion-panel dl{margin:0}
.jj-policy-row{padding:11px 0;border-top:1px solid #e2e8f0}
.jj-policy-row:first-child{border-top:0}
.jj-policy-row dt{margin:0 0 4px;color:#334155;font-weight:800}
.jj-policy-row dd{margin:0;color:var(--slate);overflow-wrap:anywhere}

.class-total-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #f1f5f9;
}
.class-total-row span{font-size:13px;color:var(--slate)}
.class-total-row strong{font-size:22px;font-weight:800;color:var(--dark)}

.class-register-success{
    margin:0 0 18px;
    padding:14px;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#f0fdf4;
    color:#166534;
}
.class-inquiry-wrap{margin-top:28px}

/* 강좌 안내 탭 */
.class-course-guide{padding:0}
.class-guide-row{
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    border-top:1px solid #eef2f7;
}
.class-guide-row:first-child{border-top:0}
.class-guide-label{
    padding:16px 18px;
    background:#f8fafc;
    color:#64748b;
    font-size:13px;
    font-weight:700;
}
.class-guide-value{
    padding:16px 18px;
    color:#334155;
    font-size:14px;
    line-height:1.65;
}
.class-guide-chip{
    display:inline-flex;
    margin:0 6px 4px 0;
    padding:4px 10px;
    border-radius:999px;
    background:#f1f5f9;
    color:var(--dark);
    font-size:12px;
    font-weight:700;
}

/* JJEditor 본문은 shop detail image area의 폭 규칙을 그대로 사용 */
.class-editor-detail,
.class-editor-detail .detail-image-list{
    padding:0 !important;
}
.class-editor-detail .detail-image-list > *{
    max-width:100%;
}
.class-editor-detail .detail-image-list img{
    display:block;
    width:850px;
    max-width:100%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:640px){
    .jj-product-tab{min-height:52px;padding:13px 8px;font-size:14px}
    .jj-product-tab.is-active:after{left:10px;right:10px}
    .jj-product-content{padding:20px 15px}
    .class-guide-row{grid-template-columns:1fr}
    .class-guide-label{padding-bottom:6px}
    .class-guide-value{padding-top:6px}
}

@media (max-width: 767px) {
    .product-image-card .card-image {
        width: calc(100% - 40px);
        max-width: 400px;
        margin: 20px auto;
    }
}

/* ---------- 열린 레이아웃 모바일 보정 ---------- */
@media (max-width: 767px) {
    .product-image-card .card-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .product-image-card .card-image {
        width: calc(100% - 40px);
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-right::before {
        display: none;
    }

    .quote-summary {
        padding-left: 0;
        padding-right: 0;
    }
}

.product-image-card .card-image img,
.product-image-card .card-image img:hover {
    transform: none !important;
    transition: none !important;
}


/* ============================================================
   30px 컬럼 간격 + 모바일 섹션 구분
   ============================================================ */
@media (min-width: 768px) {
    .product-detail-grid {
        gap: 32px !important;
    }

    .product-right::before {
        left: -16px !important; /* gap 30px의 정확한 중앙 */
        background: #d6dce5 !important;
    }
}

@media (max-width: 767px) {
    .product-detail-grid {
        gap: 0 !important;
    }

    .product-left {
        gap: 24px;
        padding-bottom: 24px;
    }

    .product-right {
        position: static;
        margin-top: 0;
        padding-top: 24px;
        border-top: 1px solid #cfd6df; /* 너무 진하지 않은 모바일 구분선 */
    }

    .product-right::before {
        display: none !important;
    }

    .quote-summary {
        padding-top: 0;
    }
}