/* BASIC css start */
@charset "utf-8";
/* ============================================================
FINE 공식스토어 — 상품 상세 (PC 스킨)
------------------------------------------------------------
★ 이 페이지는 shopdetail.html 을 한 줄도 고치지 않았습니다.
CSS 만으로 디자인을 바꿨습니다. 이유:
· shopdetail.html 에는 메이크샵 태그가 320종 들어있습니다.
(form_product / multi_option_box / link_basket /
link_immediate / btn_kakaopay …)
· MK_innerOptWrap · MK_innerOptScroll · MK_innerOptTotal ·
MK_p_total 은 메이크샵 스크립트가 직접 찾아 쓰는 영역이라
이름이나 중첩이 바뀌면 옵션 선택과 금액 합산이 멈춥니다.
· 마크업을 새로 쓰면 장바구니 · 바로구매 · 간편결제가
깨질 위험이 실제로 있습니다.
그래서 구조는 그대로 두고 겉모양만 교체했습니다.
되돌리려면 이 파일만 원본으로 바꾸면 됩니다. HTML 은 무관합니다.
------------------------------------------------------------
레이아웃 : 1200 고정폭 · 좌 썸네일 586 / 우 정보 566 / 간격 48
============================================================ */
#content{
/* common.css 의 #contentWrap(1200px · 위 60 아래 100 여백) 안에서
화면 전체 폭으로 빠져나와 바탕색을 깝니다. */
width:100vw;
margin-top:-60px;margin-bottom:-100px;
margin-left:calc(50% - 50vw);
background:#F0F1F2;
font-family:'Noto Sans KR','Nanum Gothic',sans-serif;
font-size:15px;line-height:1.6;color:#16181B;letter-spacing:-0.01em;
text-align:left;
}
#content *{box-sizing:border-box}
#content a{text-decoration:none;color:inherit}
#content img{border:0;max-width:100%}
#content a:focus-visible{outline:2px solid #FC671A;outline-offset:3px}
/* ══════════════ 상단 카테고리 표시 ══════════════ */
#content .title_etc{
width:100%;height:auto;padding:26px 0 0;margin:0;
background:none;text-align:left;
}
#content .title_etc h2{
width:1200px;margin:0 auto;padding:0;height:auto;
background:none;display:block;
font-family:'Archivo','Noto Sans KR',sans-serif;
font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
color:#FC671A;text-align:left;
}
/* ══════════════ 본문 래퍼 ══════════════ */
#content #productDetail{width:100%;margin:0;padding:0;background:none}
#content .page-body{width:1200px;margin:0 auto;padding:22px 0 80px}
/* common.css 가 #wrap · #contentWrap · #productDetail 에
text-align:center 를 걸어놔 상품명 · 가격 · 옵션이 모두
가운데 정렬로 나옵니다. 필요한 블록만 왼쪽으로 되돌립니다.
(상세 이미지 영역 .prd-detail 은 가운데 정렬이 맞아 그대로 둡니다) */
#content #productDetail,
#content .page-body,
#content .thumb-info,
#content .thumb-info > form,
#content .info,
#content #div_content,
#content #sangse_name,
#content .price-text,
#content .table-opt,
#content .prd-btns,
#content .tab-wrapper,
#content .relatedpro{text-align:left}
/* ══════════════ 썸네일 + 정보 (2단) ══════════════ */
#content .thumb-info{
display:flex;align-items:flex-start;gap:48px;
width:100%;margin:0 0 64px;padding:0;background:none;
zoom:normal;overflow:visible;
}
/* clearfix 를 넣으면 안 됩니다 — flex 컨테이너에서는 ::after 도
flex 아이템이 되어 gap 이 한 번 더 들어갑니다.
(그 탓에 우측 정보 폭이 566 이 아니라 518 로 줄어들었습니다) */
/* ── 왼쪽 : 큰 이미지 ── */
#content .thumb-wrap,
#content #div_left{
flex:0 0 586px;width:586px;margin:0;padding:0;float:none;
}
#content .thumb{
width:100%;margin:0;padding:0;
background:#fff;border:1px solid #E2E5E8;border-radius:14px;
overflow:hidden;position:relative;
}
#content .thumb img{
display:block;width:100%;height:auto;margin:0 auto;
}
/* 메이크샵 확대보기(multi_image_enlarge)가 내부에 자체 마크업을 넣습니다.
폭만 맞춰주고 나머지는 메이크샵 쪽에 맡깁니다. */
#content .thumb > *{max-width:100%}
/* ── 추가 이미지 목록 ── */
#content .listImg{margin:14px 0 0;padding:0;width:100%}
#content .listImg ul{margin:0;padding:0;list-style:none;display:block}
#content .listImg li{
margin:0;padding:0;list-style:none;
display:flex;flex-wrap:wrap;gap:8px;
}
/* 원본이 img 에 인라인 style="width:50px" 을 박아둬서
!important 로 덮습니다 (HTML 을 안 고치기로 했으므로) */
#content .listImg img{
width:72px !important;height:72px !important;
margin:0 !important;
object-fit:contain;background:#fff;
border:1px solid #E2E5E8;border-radius:8px;
cursor:pointer;transition:border-color .15s ease;
}
#content .listImg img:hover{border-color:#16181B}
/* ══════════════ 오른쪽 : 상품 정보 ══════════════
⚠ 중요 — form_product 태그가 .info 를