@charset "utf-8";

/* =========================================================
    PRODUCT LIST
========================================================= */
.product-list{padding-top:var(--space-80);}
.product-list .common-grid4 {row-gap:var(--space-40);}
.product-list .common-grid4 .prd-card.is-new{animation:prdIn .4s ease both;}

@keyframes prdIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}


/* =========================================================
    PRODUCT VIEW
========================================================= */
.prd-view{padding:var(--space-60) 0 var(--space-120);}
.prd-view>.inner{max-width:1120px;}
.prd-top{display:grid;grid-template-columns:minmax(0,500fr) minmax(0,540fr);column-gap:var(--space-80);align-items:start;}

/* 이미지 */
.prd-gallery{display:flex;flex-direction:column;row-gap:var(--space-20);min-width:0;}
.prd-main-swiper{width:100%;border-radius:var(--radius-20);}
.prd-main-swiper .swiper-slide{aspect-ratio:1/1;}
.prd-thumb-swiper{width:100%;}
.prd-thumb-swiper .swiper-slide{aspect-ratio:1/1;border-radius:var(--radius-16); cursor: pointer;}
.prd-thumb-swiper .swiper-slide::after{position:absolute; top: 0; left: 0;; width: 100%; height: 100%; display: block; background-color: #000; opacity: 0.4; content:'';}
.prd-thumb-swiper .swiper-slide:hover::after,
.prd-thumb-swiper .swiper-slide-thumb-active::after {opacity:0;transition:opacity var(--transition);}

/* 정보 */
.prd-summary{display:flex;flex-direction:column;min-width:0;}
.prd-name{font-size:var(--fs-18);font-weight:500;line-height:1.5;color:var(--text-1);word-break:keep-all;}

.prd-price-wrap{display:flex;align-items:flex-end;justify-content:space-between;column-gap:var(--space-20);margin-top:var(--space-24);padding-bottom:var(--space-24);border-bottom:1px solid var(--border-2);}
.prd-price{display:flex;flex-direction:column;row-gap:var(--space-6);}
.prd-price .price-sm{color:var(--text-3);}
.prd-price .now{display:flex;align-items:center;column-gap:var(--space-6);}
.prd-price .sale-rate{font-size:var(--fs-24);line-height:1.2;}
.prd-actions{display:flex;column-gap:var(--space-10);}

.prd-spec{display:flex;flex-direction:column;row-gap:var(--space-16);padding:var(--space-24) 0;}
.prd-spec div{display:grid;grid-template-columns:var(--space-100) minmax(0,1fr);column-gap:var(--space-24);font-size:var(--fs-16); font-weight: 500; line-height:1.4;}
.prd-spec dt{color:var(--text-3);}
.prd-spec dd{color:var(--text-1);}

/* 옵션 드롭다운 */
.prd-option{position:relative;}
.prd-actions .btn-icon.circle.line .ico-on path  {fill: var(--static-1);}
.prd-actions .btn-icon.circle.line .ico-off path {fill: transparent;}
.prd-option.open{z-index:810;}   /* 열린 목록이 sticky 탭(800) 위로 */
.prd-option-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--space-56);padding:0 var(--space-24);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);font-size:var(--fs-18);color:var(--text-3); font-weight: 500; transition:border-color var(--transition);}
.prd-option-btn:hover,
.prd-option.open .prd-option-btn{border-color:var(--border-3);}
.prd-option-btn svg{transition:transform var(--transition);}
.prd-option.open .prd-option-btn svg{transform:rotate(180deg);}
.prd-option-list{position:absolute;top:calc(100% + var(--space-6));left:0;right:0;z-index:20;padding:var(--space-10) 0;border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--transition),transform var(--transition),visibility var(--transition);}
.prd-option.open .prd-option-list{opacity:1;visibility:visible;transform:translateY(0);}
.prd-option-list button{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-12);width:100%;min-height:var(--space-48);padding:var(--space-14) var(--space-20);font-size:var(--fs-16);text-align:left;color:var(--text-1);transition:background-color var(--transition);}
.prd-option-list button:hover{background:var(--bg-1);}
.prd-option-list button:disabled{color:var(--text-4);cursor:not-allowed;background:none;}
.prd-option-list .price{flex-shrink:0;font-weight:600;}

/* 선택한 옵션 */
.prd-selected{display:flex;flex-direction:column; row-gap: var(--space-24);}
.prd-selected-item{display:flex;align-items:center;column-gap:var(--space-10);}
.prd-selected-item:first-of-type {margin-top: var(--space-24);}
.prd-selected-item .info{flex:1;min-width:0;display:flex;flex-direction:column;row-gap:var(--space-6);}
.prd-selected-item .name{font-size:var(--fs-15);color:var(--text-1);}
.prd-selected-item .price{font-size:var(--fs-16);font-weight:700;color:var(--text-1);}
.prd-selected-item .qty{height:var(--space-44);}
.prd-selected-item .qty button{display:flex;align-items:center;justify-content:center;}
.prd-selected-item .btn-delete{display:flex;align-items:center;justify-content:center;width:var(--space-44);height:var(--space-44);border:1px solid var(--border-2);border-radius:var(--radius-8);color:var(--text-2);transition:border-color var(--transition);}
.prd-selected-item .btn-delete:hover{border-color:var(--border-3);color:var(--text-1);}

.prd-tab{position:sticky;top:var(--header-h);z-index:800;margin-top:var(--space-80);padding-top:var(--space-8);background:var(--color-white);}   /* 상품 상세 탭만 sticky (모양은 common.css .common-tab) */

.prd-sec{padding-top:var(--space-80);scroll-margin-top:calc(var(--header-h) + var(--space-60));}
.prd-block+.prd-block{margin-top:var(--space-80);}
.prd-sec-tit{margin-bottom:var(--space-24);}

.prd-desc{position:relative;}
.prd-desc-cont{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-40);max-height:500px;overflow:hidden;}
.prd-desc-cont img{width:100%;max-width:700px;height:auto;}
.prd-desc-text{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-12);max-width:700px;text-align:center;}
.prd-desc-text .eyebrow-kr{font-size:var(--fs-14);font-weight:500;color:var(--text-3);}
.prd-desc-text .tit{font-size:var(--fs-24);font-weight:700;color:var(--text-1);}
.prd-desc-text p{font-size:var(--fs-15);line-height:1.7;color:var(--text-2);}
.prd-desc::after{position:absolute;left:0;right:0;bottom:var(--space-56);height:var(--space-120);background:linear-gradient(180deg,rgba(var(--color-white-rgb),0),var(--color-white));pointer-events:none;content:'';}
.prd-desc-more{position:relative;z-index:1; font-weight: 600;}
.prd-desc-more svg{transition:transform var(--transition);}
.prd-desc.open .prd-desc-cont{max-height:none;}
.prd-desc.open::after{display:none;}
.prd-desc.open .prd-desc-more svg{transform:rotate(180deg);}
.prd-desc.no-more::after,
.prd-desc.no-more .prd-desc-more{display:none;}   /* 내용이 500px 이하일 때 */

.prd-delivery{padding:var(--space-32) var(--space-20);border-radius:var(--radius-20);background:var(--bg-1);text-align:center;color:var(--text-1);}

/* ---------- 게시판 공통 (후기 · 문의) ---------- */
.prd-board-head{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-20);margin-bottom:var(--space-24);}
.prd-board-head .prd-sec-tit{margin-bottom:0;}

/* 별점 : base(회색) 위에 fill(포인트색)을 --rate 너비만큼 */
.star-rating{position:relative;display:inline-flex;flex-shrink:0;}
.star-rating .base,
.star-rating .fill{display:flex;}
.star-rating .base{color:var(--border-2);}
.star-rating .fill{position:absolute;top:0;left:0;width:var(--rate,100%);overflow:hidden;color:var(--static-1);}
.star-rating svg{flex-shrink:0;}

/* 후기 */
.review-summary{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-20);padding:var(--space-24) var(--space-32);border-radius:var(--radius-20);background:var(--bg-2);}
.review-summary .tit{font-size:var(--fs-16);font-weight:500;color:var(--text-1);}
.review-score{display:flex;align-items:center;column-gap:var(--space-8);}
.review-score .score{font-size:var(--fs-16);color:var(--text-2);}
.review-score .score strong{font-weight:500;color:var(--text-1);}

.review-list{margin-top:var(--space-24);border-top:1px solid var(--border-2);}
.review-item{display:flex;flex-direction:column;row-gap:var(--space-10);padding:var(--space-24) var(--space-16);border-bottom:1px solid var(--border-2);}
.review-head{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-16);}
.review-head .name{font-size:var(--fs-16);font-weight:500;color:var(--text-1);}
.review-meta{display:flex;align-items:center;column-gap:var(--space-10);}
.review-meta .option{font-size:var(--fs-14);color:var(--text-3);}
.review-cont{font-size:var(--fs-16);line-height:1.4;color:var(--text-1);font-weight: 500;}
.review-foot{display:flex;align-items:center;font-size:var(--fs-14);color:var(--text-3);}
.btn-report{position:relative;margin-left:var(--space-10);padding-left:var(--space-10);font-size:var(--fs-14);color:var(--text-3);text-decoration:underline;text-underline-offset:3px;}
.btn-report::before{position:absolute;top:50%;left:0;width:1px;height:var(--space-10);background:var(--border-2);transform:translateY(-50%);content:'';}
.btn-report:hover{color:var(--text-1);}

/* 문의 */
.qna-notice{display:flex;flex-direction:column;row-gap:var(--space-8);padding: 0 0 var(--space-24) 0;border-bottom:1px solid var(--border-2);}
.qna-notice li{position:relative;font-size:var(--fs-15);line-height:1.6;color:var(--text-2);}
.qna-notice strong{font-weight:400;color:var(--text-1);}

.qna-item{border-bottom:1px solid var(--border-2);}
.qna-q{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:var(--space-16);width:100%;padding:var(--space-24) var(--space-16);text-align:left;transition:background-color var(--transition);}
button.qna-q:hover{background:var(--bg-1);}
.qna-body{display:flex;flex-direction:column;row-gap:var(--space-8);min-width:0;}
.qna-meta{display:flex;align-items:center;flex-wrap:wrap;}
.qna-meta .option{position:relative;margin-left:var(--space-10);padding-left:var(--space-10);}
.qna-meta .option::before{position:absolute;top:50%;left:0;width:1px;height:var(--space-10);background:var(--border-2);transform:translateY(-50%);content:'';}
.qna-text{color:var(--text-2);}
.qna-text ul{margin:var(--space-4) 0;}
.qna-text li{position:relative;padding-left:var(--space-16);}
.qna-text li::before{position:absolute;left:var(--space-4);content:'·';}
.qna-item time{font-size:var(--fs-14);color:var(--text-3);white-space:nowrap;}

.qna-a{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:start;column-gap:var(--space-16);padding:var(--space-24) var(--space-16);background:var(--bg-1);}
.qna-a[hidden]{display:none;}
.qna-a .ico-reply{color:var(--text-2);}


@media screen and (max-width: 1024px) {
    .product-list .common-grid4{grid-template-columns:repeat(3,minmax(0,1fr));}

    .prd-top{grid-template-columns:minmax(0,1fr);row-gap:var(--space-40);}
    .prd-gallery{max-width:600px;width:100%;margin:0 auto;}
}

@media screen and (max-width: 500px) {
    .product-list{padding-top:28px;}
    .product-list .common-grid4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px;}

    .prd-view{padding:16px 0 72px;}
    .prd-view>.inner{width:calc(100% - 32px);}
    .prd-main-swiper{border-radius:var(--radius-16);}
    .prd-thumb-swiper .swiper-slide{border-radius:var(--radius-8);}
    .prd-name{font-size:17px;}
    .prd-price-wrap{margin-top:16px;padding-bottom:16px;}
    .prd-spec{row-gap:10px;padding:20px 0;}
    .prd-spec div{grid-template-columns:84px minmax(0,1fr);font-size:14px;}
    .prd-option-btn{height:52px;}
    .prd-selected-item{flex-wrap:wrap;row-gap:10px;}
    .prd-selected-item .info{flex-basis:100%;}
    .prd-selected-item .qty{margin-right:auto;}

    .prd-tab{margin-top:48px;padding-top:0;}
    .prd-tab .count{display:none;}   /* 좁은 화면 : 탭 글자 줄바꿈 방지 */

    .prd-sec{padding-top:48px;}
    .prd-block+.prd-block{margin-top:48px;}
    .prd-delivery{padding:24px 16px;font-size:14px;}

    .review-summary{flex-direction:column;align-items:flex-start;row-gap:10px;padding:20px;}
    .review-item{padding:20px 4px;}
    .review-cont{font-size:15px;}

    .prd-board-head{flex-wrap:wrap;row-gap:12px;}
    .qna-notice{padding:0 0 24px;}
    .qna-notice li{font-size:14px;}
    .qna-q{grid-template-columns:auto minmax(0,1fr);row-gap:8px;padding:20px 4px;}
    .qna-q time{grid-column:2;}
    .qna-a{grid-template-columns:auto minmax(0,1fr);row-gap:8px;padding:20px 12px;}
    .qna-a .ico-reply{display:none;}
    .qna-a time{grid-column:2;}
}

/*********/
/*********/
/*********/
/*********/
/*********/