/* SoyTwo 상품상세 커스텀 스타일
   네이티브 카페24 모듈 마크업(product_detail/product_option/product_detaildesign/
   product_action/ec-base-tab/product_relation)은 그대로 두고 시각 레이어만 덧씌운다.
   벤치마크(COS, ecudemo131980.cafe24.com) 실측 기준: 이미지 600 : 정보 405 비율,
   Outfit류 심플 산세리프 넘버링, 블랙 단색 CTA — SoyTwo 자체 톤(--ml-*, pill 버튼)으로 재해석.

   모든 셀렉터는 `#contents`(레이아웃 공통 ID)를 접두로 붙여 명시도를 ID 단계로 끌어올린다.
   네이티브 detail.css/ec-base-*.css는 전부 class/attribute 셀렉터만 쓰므로(예:
   `.xans-product-detail .headingArea h2`, `.ec-base-button[class*="gColumn"] [class^='btn']`)
   ID 하나만 섞이면 클래스를 몇 개 쌓든 항상 이 파일이 이긴다 — @css 선언 순서와 무관.
   (2026-08-19 실측 발견: 접두 없는 이전 버전은 소스 순서상 나중에 로드돼도 네이티브의
   `.xans-product-detail X` 조합(클래스 2개)에 명시도로 져서 폰트/색상/레이아웃이 카페24
   기본값으로 그대로 노출되고 있었다. 로컬·실서버·라이브 전부 동일하게 재현됨.)

   🔴 2차 함정(2026-08-19, 라이브 재검증 중 발견): `[module="product_action"]`/
   `[module="product_option"]` 속성 셀렉터는 로컬 시뮬레이터(`local_server.js`)에서는
   `module="..."` 속성을 그대로 남겨두지만, 실제 카페24 엔진은 이 속성을 제거하고
   `class="xans-element- xans-product xans-product-action"` 형태로 바꿔치기한다 — 그래서
   구매 버튼 등 이 속성 셀렉터에 의존한 규칙은 로컬에서만 통과하고 라이브에선 전혀 매칭되지
   않았다(디자인 백업/복구는 "성공"이라고 뜨지만 CSS 자체가 안 먹는 것과는 별개 원인).
   `:is([module="..."], .xans-product-X)`로 두 표기를 동시에 커버해 로컬·라이브 모두
   매칭되도록 수정.
*/

/* ---------- 공통 ---------- */
#contents { max-width: var(--ml-content-width); margin: 0 auto; padding: 40px 20px 0; }

#contents .headingArea { padding-bottom: 20px; border-bottom: 1px solid var(--ml-border); margin-bottom: 32px; }
#contents .headingArea h2 { font-size: 26px; font-weight: 800; color: var(--ml-fg); letter-spacing: -0.01em; line-height: 1.4; }
#contents .headingArea .delivery { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--ml-muted); font-weight: 400; }
#contents .headingArea .icon { display: block; margin-top: 8px; }

/* ---------- 이미지/정보 2단 레이아웃 (600 : 405 비율 실측 반영) ---------- */
#contents .detailArea { display: flex; gap: 60px; align-items: flex-start; min-width: 0; }
#contents .imgArea { flex: 0 0 auto; width: 56%; max-width: 600px; min-width: 0; }
#contents .infoArea { flex: 1 1 auto; min-width: 0; }

#contents .imgArea .keyImg .thumbnail { position: relative; display: block; border-radius: 4px; overflow: hidden; background: #f7f7f5; }
#contents .imgArea .keyImg .thumbnail img { width: 100%; height: auto; display: block; }
#contents .imgArea .keyImg .thumbnail .wish { position: absolute; top: 16px; right: 16px; }

#contents .imgArea .listImg ul { display: flex; gap: 10px; margin-top: 12px; list-style: none; padding: 0; flex-wrap: wrap; }
#contents .imgArea .listImg ul li { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 4px; overflow: hidden; border: 1px solid var(--ml-border); min-width: 0; }
#contents .imgArea .listImg ul li img { width: 100%; height: 100%; object-fit: cover; display: block; }

#contents .imgArea .control { margin-top: 10px; text-align: right; }
#contents .imgArea .control .btnZoom { font-size: 12px; color: var(--ml-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

#contents .imgArea .color { margin-top: 16px; }
#contents .imgArea .color .chips { display: inline-block; width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; border: 1px solid var(--ml-border); }

#contents .imgArea .ec-base-button.gColumn { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
#contents .imgArea .ec-base-button.gColumn a.btnNormal { font-size: 12px; padding: 8px 14px; border: 1px solid var(--ml-border); border-radius: 999px; color: var(--ml-muted); text-decoration: none; white-space: nowrap; }
#contents .imgArea .ec-base-button.gColumn a.btnNormal:hover { border-color: var(--ml-fg); color: var(--ml-fg); }

#contents .imgArea .likeButton { margin-top: 16px; }
#contents .imgArea .likeButton button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--ml-border); border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--ml-fg); cursor: pointer; }

/* ---------- 정보영역: 상품기본정보(product_detaildesign) 테이블 ---------- */
#contents .infoArea .xans-product-detaildesign { margin-bottom: 24px; }
#contents .infoArea .xans-product-detaildesign table { width: 100%; border-collapse: collapse; }
#contents .infoArea .xans-product-detaildesign caption { display: none; }
#contents .infoArea .xans-product-detaildesign tr { border-bottom: 1px solid var(--ml-border); }
#contents .infoArea .xans-product-detaildesign th,
#contents .infoArea .xans-product-detaildesign td { padding: 12px 0; text-align: left; vertical-align: top; font-weight: 400; }
#contents .infoArea .xans-product-detaildesign th { width: 110px; min-width: 90px; color: var(--ml-muted); font-size: 13px; }
#contents .infoArea .xans-product-detaildesign td { color: var(--ml-fg); font-size: 14px; }
#contents .infoArea .xans-product-detaildesign td span { font-size: 14px !important; color: var(--ml-fg) !important; }

/* ---------- 옵션/수량(product_option) ---------- */
#contents :is(table[module="product_option"], .xans-product-option) { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
#contents :is(table[module="product_option"], .xans-product-option) caption { display: none; }
#contents :is(table[module="product_option"], .xans-product-option) th,
#contents :is(table[module="product_option"], .xans-product-option) td { padding: 10px 0; text-align: left; vertical-align: middle; }
#contents :is(table[module="product_option"], .xans-product-option) th { width: 90px; min-width: 70px; font-size: 13px; color: var(--ml-muted); font-weight: 400; }
#contents :is(table[module="product_option"], .xans-product-option) select {
    width: 100%; max-width: 320px; padding: 11px 14px; border: 1px solid var(--ml-border); border-radius: 4px;
    font-size: 14px; color: var(--ml-fg); background: #fff; box-sizing: border-box;
}
#contents .ec-base-qty { display: inline-flex; align-items: center; border: 1px solid var(--ml-border); border-radius: 4px; overflow: hidden; }
#contents .ec-base-qty input { width: 46px; text-align: center; border: 0; padding: 9px 0; font-size: 14px; color: var(--ml-fg); }
#contents .ec-base-qty a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 34px; }
#contents .ec-base-qty a img { opacity: 0.5; }

#contents .guideArea { margin: 4px 0 20px; }
#contents .guideArea .info { font-size: 12px; color: var(--ml-muted); }

/* ---------- 담긴 상품 목록 + 총 상품금액 ---------- */
#contents #totalPrice_area, #contents [id^="totalPrice_area"] { margin-top: 8px; }
#contents .totalPrice { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--ml-fg); margin-top: 8px; }
#contents .totalPrice strong { font-size: 14px; color: var(--ml-muted); font-weight: 400; }
#contents .totalPrice em { font-size: 22px; font-weight: 800; color: var(--ml-fg); font-style: normal; }

/* ---------- 구매 버튼(product_action) ---------- */
#contents :is(div[module="product_action"], .xans-product-action) .ec-base-button.gColumn { display: flex; gap: 10px; margin-top: 20px; }
#contents :is(div[module="product_action"], .xans-product-action) a.btnSubmit,
#contents :is(div[module="product_action"], .xans-product-action) a.btnNormal,
#contents :is(div[module="product_action"], .xans-product-action) .btnEm {
    flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 16px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap !important;
    text-decoration: none; box-sizing: border-box; border: 1px solid var(--ml-fg); min-width: 0; margin: 0 !important;
}
#contents :is(div[module="product_action"], .xans-product-action) a.btnSubmit span { white-space: nowrap !important; }
#contents :is(div[module="product_action"], .xans-product-action) a.btnSubmit { background: var(--ml-fg); color: #fff; }
#contents :is(div[module="product_action"], .xans-product-action) a.btnSubmit:hover { opacity: 0.85; }
#contents :is(div[module="product_action"], .xans-product-action) a.btnNormal { background: #fff; color: var(--ml-fg); }
#contents :is(div[module="product_action"], .xans-product-action) a.btnNormal:hover { background: #f7f7f5; }
#contents :is(div[module="product_action"], .xans-product-action) .btnEm { background: var(--ml-border); color: var(--ml-muted); border-color: var(--ml-border); }

/* ---------- 하단 상세정보/구매안내/후기/Q&A/관련상품: 앵커 구획 ---------- */
#contents .ec-base-tab.gFlex { margin-top: 0; padding-top: 56px; border-top: 1px solid var(--ml-border); }
#contents #prdDetail.ec-base-tab { border-top: 0; padding-top: 72px; }

#contents .ec-base-tab.gFlex .menu {
    display: flex; gap: 4px; margin: 0 0 28px; padding: 0; border: 0; background: none;
}
#contents .ec-base-tab.gFlex .menu li { flex: none; border: 0 !important; background: none !important; }
#contents .ec-base-tab.gFlex .menu li:last-child { border-right: 0 !important; }
#contents .ec-base-tab.gFlex .menu li a {
    display: inline-block; min-width: 0; margin: 0 !important; padding: 6px 14px !important; border: 0 !important;
    border-radius: 999px; background: none !important; color: var(--ml-muted); font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; position: static !important; top: auto !important; left: auto !important;
}
#contents .ec-base-tab.gFlex .menu li.selected { border: 0 !important; background: none !important; }
#contents .ec-base-tab.gFlex .menu li.selected a { background: var(--ml-fg) !important; color: #fff !important; }

#contents .ec-base-tab.gFlex .cont > h3,
#contents .ec-base-tab.gFlex .board > h3 {
    font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ml-fg); margin-bottom: 8px;
}
#contents .ec-base-tab.gFlex .board .desc { font-size: 13px; color: var(--ml-muted); margin-bottom: 24px; }
#contents .ec-base-tab.gFlex .cont { margin-bottom: 40px; }
#contents .ec-base-tab.gFlex .cont ul.delivery { list-style: none; padding: 0; margin-top: 12px; }
#contents .ec-base-tab.gFlex .cont ul.delivery li { padding: 10px 0; border-bottom: 1px solid var(--ml-border); font-size: 13px; color: var(--ml-fg); }

/* 상품상세정보(에디터 콘텐츠) 폭 제한 */
#contents #prdDetail .cont { max-width: 860px; margin-left: auto; margin-right: auto; }
#contents #prdDetail .cont img { max-width: 100%; height: auto; }

/* ---------- 후기/Q&A 리스트 ---------- */
#contents .ec-base-table.typeList table { width: 100%; border-collapse: collapse; margin-top: 8px; }
#contents .ec-base-table.typeList caption { display: none; }
#contents .ec-base-table.typeList th { padding: 12px 8px; font-size: 12px; color: var(--ml-muted); font-weight: 600; border-bottom: 1px solid var(--ml-fg); }
#contents .ec-base-table.typeList td { padding: 14px 8px; font-size: 13px; color: var(--ml-fg); border-bottom: 1px solid var(--ml-border); }
#contents .ec-base-table.typeList td.subject a { color: var(--ml-fg); text-decoration: none; }

#contents .ec-base-button.typeBorder { display: flex; justify-content: flex-end; margin-top: 16px; }
#contents .ec-base-button.typeBorder a.btnNormal {
    display: inline-block; margin-left: 8px; padding: 9px 18px; border: 1px solid var(--ml-border); border-radius: 999px;
    font-size: 12px; color: var(--ml-fg); text-decoration: none;
}
#contents .ec-base-button.typeBorder a.btnNormal:hover { border-color: var(--ml-fg); }

#contents .ec-base-paginate.typeSub { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
#contents .ec-base-paginate.typeSub ol { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 6px; }
#contents .ec-base-paginate.typeSub a { font-size: 13px; color: var(--ml-muted); }
#contents .ec-base-paginate.typeSub a.on { color: var(--ml-fg); font-weight: 700; }

/* ---------- 관련상품(product_relation) ---------- */
#contents #prdRelated .relation h3 { display: none; }
#contents #prdRelated .prdList { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 0; line-height: 0; min-width: 0 !important; }
#contents #prdRelated .prdList li.item { min-width: 0; }
#contents #prdRelated .prdList .box { display: block; }
#contents #prdRelated .prdList .box a img.thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; display: block; background: #f7f7f5; }
#contents #prdRelated .prdList .box p { margin: 12px 0 6px; font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#contents #prdRelated .prdList .box p a { color: var(--ml-fg); text-decoration: none; }
#contents #prdRelated .prdList .box ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; align-items: baseline; }
#contents #prdRelated .prdList .box ul li { font-size: 14px; font-weight: 800; color: var(--ml-fg); white-space: nowrap; }
#contents #prdRelated .prdList .box ul li.salePrice { color: var(--ml-accent); }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
    #contents { padding: 24px 16px 0; }
    #contents .detailArea { flex-direction: column; gap: 28px; }
    #contents .imgArea { width: 100%; max-width: none; }
    #contents .headingArea h2 { font-size: 20px; }
    #contents :is(div[module="product_action"], .xans-product-action) .ec-base-button.gColumn { flex-direction: column; }
    #contents .ec-base-tab.gFlex .menu { flex-wrap: wrap; }
    #contents #prdRelated .prdList { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}