/* BASIC css start */
/* ===================================================================
   상품상세페이지 최종 CSS (v4.0 - Table 레이아웃 적용)
=================================================================== */

/* -------------------------------------------------------------------
   [글로벌] 전역 변수, 폰트, 기본 레이아웃
------------------------------------------------------------------- */
:root { --main-color:#0C025B; --main-color-dark:#07013e; --border-color:#ececec; --accent:#d80f27; --tab-bg:#f7f9fa; --light-bg:#fafbfc; }
body { font-family:'Noto Sans KR','Pretendard',Arial,sans-serif; color:#23242a; background:#fcfcfe; font-size:15px; }
#wrap, #contentWrapper, #contentWrap, #content, .page-body { max-width:1240px; width:100%; margin:0 auto; box-sizing:border-box; }
.page-body { max-width:1040px; margin:0 auto; padding:24px 0 0 0; box-sizing:border-box; }
.product-detail-flex { display:flex; gap:24px; align-items:flex-start; width:100%; margin-bottom:28px; }
.loc-navi { max-width:1040px; margin:0 auto 10px auto; text-align:right; font-size:13px; color:#888; padding-bottom:10px; border-bottom:1px solid #eee; }
.loc-navi a { color:#555; text-decoration:none; }
.loc-navi a:hover { text-decoration:underline; }

/* -------------------------------------------------------------------
   [상단] 상품 이미지, 정보, 옵션 영역
------------------------------------------------------------------- */
.thumb-section { flex:0 0 140px; text-align:center; }
.thumb-section img { width:120px; border-radius:8px; box-shadow:0 1px 6px #eee; }
.center-section { flex:1 1 0; min-width:320px; display:flex; flex-direction:column; gap:10px; } 
.brand-model-row { font-size:13px; color:#62646d; display:flex; gap:8px; align-items:center; margin-bottom:2px; }
.tit-prd { font-size:20px; font-weight:700; color:var(--main-color); margin:8px 0 4px 0; letter-spacing:-0.02em; }
.etc { color:#5c78ad; font-size:13px; margin-bottom:8px; }

/* [우측] 결제 정보 영역 */
.right-section { flex:0 0 340px; max-width:370px; background:var(--light-bg); border-radius:10px; box-shadow:0 2px 10px #f4f4fa; padding:20px 12px; display:flex; flex-direction:column; align-items:stretch; min-width:260px; }
.total-label { font-size:13px; color:#1a2545; margin-bottom:4px; text-align:right; font-weight:600; }
.total-price { font-size:22px; color:var(--accent); font-weight:900; margin-bottom:14px; text-align:right; letter-spacing:0.01em; }
.action-buttons { display:flex; gap:8px; width:100%; justify-content:flex-end; margin-top:16px; }
.btn_cart, .btn_buy { padding:12px; flex:1; font-weight:700; border-radius:8px; font-size:15px; text-align:center; border:none; cursor:pointer; transition:all 0.13s; }
.btn_cart { background:#f4f4fa; color:var(--main-color); border:1.5px solid #e8e8f5; }
.btn_cart:hover { background:var(--main-color); color:#fff; }
.btn_buy { background:var(--main-color); color:#fff; border:1.5px solid var(--main-color); }
.btn_buy:hover { background:var(--main-color-dark); }

/* [옵션] 옵션 선택 UI */
.option-section { margin-top:8px; width:100%; }
.table-opt { width:100%; border-collapse:separate; border-spacing:0 4px; }
.table-opt th { color:var(--main-color); font-weight:600; background:var(--tab-bg); font-size:14px; width:76px; min-width:70px; padding:9px 0 9px 10px; border-bottom:1px solid var(--border-color); border-radius:6px 0 0 6px; }
.table-opt td { color:#23242a; font-weight:400; background:#fff; font-size:14px; padding:9px 12px; border-bottom:1px solid var(--border-color); border-radius:0 6px 6px 0; }
.table-opt select { display: none !important; }
.MK_inner-opt-cm { margin:0; padding:0; list-style:none; }
.MK-oneclick-li { display:flex; align-items:center; gap:16px; font-size:19px; font-weight:600; color:#23242a; padding:14px 20px; background:#fff; border-radius:11px; box-shadow:0 2px 8px rgba(22,26,71,0.07); margin-bottom:13px; transition:all 0.18s; cursor:pointer; }
.MK-oneclick-li:last-child { margin-bottom:0; }
.MK-oneclick-li.selected { background: #f4f6fe; box-shadow:0 4px 16px rgba(22,26,71,0.15); color: var(--main-color); }
.MK-oneclick-li.MK-soldout { position: relative; background: #f8f9fa; color: #ced4da !important; cursor: not-allowed; border-color: #dee2e6; text-decoration: line-through; }
.MK-oneclick-li.MK-soldout::after { content: "SOLD OUT"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(33, 37, 41, 0.6); color: white; font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 4px; z-index: 10; }

/* -------------------------------------------------------------------
   [옵션] 선택된 옵션 결과창 UI (Table 레이아웃으로 재작성)
------------------------------------------------------------------- */
.option-result-box { margin-top: 10px; border-top: 1px solid #e9ecef; padding-top: 10px; }
.option-result-box .MK_inner-opt-cm { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.option-result-box .MK_inner-opt-cm li { display: table-row; }
.option-result-box .MK_inner-opt-cm li > * { display: table-cell; vertical-align: middle; padding: 6px 2px; border-bottom: 1px solid #f1f3f5; }

.option-result-box .MK_p-name { width: 100%; font-size: 13px; font-weight: 600; color: #343a40; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.option-result-box .MK_price { width: 75px; font-size: 13px; font-weight: 700; color: var(--main-color, #0C025B); text-align: right; }
.option-result-box .MK_qty-ctrl { width: 85px; text-align: center; }
.option-result-box .MK_qty-ctrl > div { display: flex; align-items: center; justify-content: center; border: 1px solid #dee2e6; border-radius: 5px; margin: 0 auto; }
.option-result-box .MK_qty-ctrl input { width: 28px; text-align: center; border: none; background: none; height: 24px; font-size: 14px; padding: 0; }
.option-result-box .MK_qty-ctrl img { display:none; }

.option-result-box a.MK_btn-up, .option-result-box a.MK_btn-dw { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 24px; background-color: #f8f9fa; cursor: pointer; transition: background-color 0.15s ease; font-size: 0; }
.option-result-box a.MK_btn-up { border-left: 1px solid #dee2e6; border-radius: 0 4px 4px 0; }
.option-result-box a.MK_btn-dw { border-right: 1px solid #dee2e6; border-radius: 4px 0 0 4px; }
.option-result-box a.MK_btn-up:hover, .option-result-box a.MK_btn-dw:hover { background-color: #e9ecef; }

.option-result-box a.MK_btn-del { display: table-cell; width: 26px; text-align: center; }
.option-result-box a.MK_btn-del:hover svg { fill: #e03131; }
.option-result-box svg { width: 18px; height: 18px; transition: fill 0.15s ease; }
.option-result-box a.MK_btn-up svg, .option-result-box a.MK_btn-dw svg { fill: #495057; }
.option-result-box a.MK_btn-del svg { width: 14px; height: 14px; fill: #adb5bd; }

/* [특수 버튼] 견적문의 / 품절 안내 */
.btn_quote { display: block; width: 100%; box-sizing: border-box; padding: 12px; font-weight: 700; border-radius: 8px; font-size: 15px; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.13s ease; background-color: #008060; color: white; border: 1.5px solid #008060; }
.btn_quote:hover { background-color: #006e52; border-color: #006e52; }
.btn_soldout { width: 100%; box-sizing: border-box; text-align: center; padding: 12px 0; font-weight: 700; border-radius: 8px; background-color: #e9ecef; color: #6c757d; border: 1.5px solid #dee2e6; }

/* -------------------------------------------------------------------
   [하단] 탭, 상세설명, 게시판 등
------------------------------------------------------------------- */
.detailTab { margin:28px 0 12px 0; border-bottom:1px solid #e1e4ea; }
.detailTab ul { display:flex; gap:11px; list-style:none; margin:0; padding:0 0 0 1px; }
.detailTab ul li a { display:block; font-size:15px; color:#adb1bc; font-weight:600; padding:8px 19px 8px 9px; text-decoration:none; border-bottom:2px solid transparent; transition:color 0.11s, border-bottom 0.11s; }
.detailTab ul li a.active, .detailTab ul li a:hover { color:var(--main-color); border-bottom:2px solid var(--main-color); background:#f8faff; }
.prd-detail { padding:21px 0 10px 0; font-size:14px; line-height:1.7; color:#31313a; border-bottom:1px solid #f0f1f5; }
.item-wrap { margin:14px 0 12px 0; }
.item-cont { display:flex; flex-wrap:wrap; gap:13px; }
.item-list { background:#fff; border:1px solid #e7e9f1; padding:10px; width:220px; border-radius:7px; box-shadow:0 1px 5px rgba(145,156,175,0.07); transition:box-shadow 0.12s; }
.item-list:hover { box-shadow:0 3px 12px #ecebfd; }
.item-list .thumb img { width:86%; border-radius:6px; box-shadow:0 1px 4px #f4f5fa; }
.item-list .prd-info { margin:7px 0 0 0; }
.item-list .prd-name a { font-size:13px; color:var(--main-color); font-weight:700; text-decoration:none; }
.item-list .prd-price .price { color:var(--accent); font-size:13px; font-weight:700; margin-left:4px; }
.related-allbasket { margin-top:11px; text-align:right; }
.related-allbasket a { color:var(--main-color); font-weight:700; font-size:13px; background:#f3f6fb; padding:5px 13px; border-radius:5px; text-decoration:none; border:1px solid #eceafd; transition:background 0.10s, color 0.10s; }
.related-allbasket a:hover { background:var(--main-color); color:#fff; }
.review-section, .qna-section { margin:17px 0 12px 0; border-radius:6px; background:#fcfdff; box-shadow:0 1px 5px #eaecef; padding:10px 7px; }
.tit-detail { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.tit-detail h3 { font-size:13px; font-weight:700; color:var(--main-color); margin:0; }
.tit-detail .more a { color:#8890ad; font-size:12px; text-decoration:none; font-weight:500; }
.tit-detail .more a:hover { color:var(--main-color); text-decoration:underline; }
.review-list, .qna-list { margin-top:5px; }
.review-list table, .qna-list table { width:100%; border-collapse:collapse; font-size:12px; }
.review-list th, .review-list td, .qna-list th, .qna-list td { padding:6px 4px; border-bottom:1px solid var(--border-color); text-align:left; }
.review-list th, .qna-list th { color:#7e8499; background:#f7f9fb; font-weight:600; font-size:13px; }
.review-list td, .qna-list td { color:#25272b; font-size:13px; }
.review-list.empty, .qna-list.empty { padding:7px 0 0 2px; color:#adb5bd; font-size:12px; background:none; border:none; }
.paging { margin:7px 0 0 0; text-align:right; color:#555; font-size:11px; }

/* -------------------------------------------------------------------
   [반응형] 모바일 화면 대응
------------------------------------------------------------------- */
@media (max-width:960px) { .center-section { min-width:210px; } .option-title { min-width:48px; } .option-result-box { padding:7px 2px 4px 2px; } .option-row { flex-wrap:wrap; gap:5px; } }
@media (max-width:640px) { .option-row { flex-direction:column; align-items:flex-start; gap:4px; } .option-remove { margin-left:0; } .MK_inner-opt-cm li { flex-wrap:wrap; font-size:13px; } .MK_p-name { font-size:12px; } .MK_price { font-size:13px; } }
/* BASIC css end */