/* 상품 상세 페이지 전용 스타일 - 대문 디자인 톤 맞춤
   주의: 이 파일은 item.php(basic 스킨) 전용이며, default_shop.css와 skin/style.css는 건드리지 않음 */

/* 상품 요약정보(이미지+구매) 카드 */
#sit_ov_from {
    background:#fff;
    border:1px solid #EEF0F3;
    border-radius:8px;
    box-shadow:0px 1px 4px rgba(0,0,0,0.06);
    box-sizing:border-box;
}
#sit_ov_wrap {
    padding:30px;
    border-top:0;
}

/* 12번: 썸네일 배치 변경 (좌측 세로 → 메인 이미지 아래 가로).
   내부 배치(메인이미지 위, 썸네일 아래 가로)는 그대로 유지.
   단, width:100% !important로 폭 전체를 강제해서 #sit_ov_wrap의 원래
   좌(이미지)/우(가격·구매) 2단 배치(구서버 방식, style.css의
   justify-content:space-between)가 항상 세로 스택으로 깨져있던 문제를
   수정 — 넓은 화면에서는 좌우 배치, 좁은 화면에서는 style.css 자체
   미디어쿼리(max-width:1200px에서 #sit_ov_wrap이 column으로 전환)와
   같은 기준으로 세로 스택 유지 */
#sit_pvi {
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 400px;
    min-width:280px;
    max-width:100%;
}
/* #sit_ov_wrap이 세로 스택으로 바뀌는 기준(style.css @media max-width:1200px)과
   반드시 같은 기준을 써야 함. 여기만 1000px로 다르게 잡혀 있으면 1000~1200px 구간에서
   #sit_pvi가 세로 배치인데도 flex:1 1 400px(가로 배치 전용 값)가 그대로 적용되어
   높이 계산이 틀어져 썸네일/본문이 겹치고 이미지가 갑자기 커 보이는 문제가 생김 */
@media (max-width:1200px) {
    #sit_pvi {
        width:100% !important;
        flex:1 1 100% !important;
    }
}
#sit_pvi_big {
    order:1;
    margin-bottom:15px;
    width:100% !important;
}
/* style.css의 #sit_pvi_big img{width:500px}가 고정폭이라, #sit_pvi가
   500px보다 좁아지는 상황(예: 좌우 배치 시 우측 #sit_ov 448px에 밀려
   폭이 줄어드는 경우)에 이미지가 컨테이너를 넘어 우측 정보 영역과
   겹치던 문제 수정 - 컨테이너 폭에 맞춰 축소되도록 함 */
#sit_pvi_big img {
    width:100% !important;
    max-width:100%;
    height:auto !important;
    border-radius:16px;
}
#sit_pvi_thumb {
    order:2;
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    width:100% !important;
    margin:0 !important;
    padding:0 0 10px !important;
    float:none !important;
    height:auto !important;
    margin-left:0 !important;
}
#sit_pvi_thumb li {
    width:auto;
    min-width:0;
    margin-right:0;
    margin-bottom:0;
    float:none !important;
    display:flex !important;
}
#sit_pvi_thumb img {
    border-radius:6px;
}

/* 2번: 상품 제목 크기 - style.css 원본 2.4em(33.6px)이 상품목록 카드
   제목(list_detail.css 1.5em)·관련상품 h2(1.15em)·상세설명 본문(16.3px)
   대비 과도하게 커서 대문 비례에 맞게 축소 */
#sit_title {
    font-size:1.8em;
}

/* 판매가격 강조 - 포인트 컬러 */
.sit_ov_tbl .tr_price strong {
    color:#0080EA;
}

/* 4번: 옵션 추가금액 색상 - 포인트 컬러 */
.sit_opt_prc {
    color:#0080EA;
}

/* 구매 버튼 - 포인트 컬러 */
.sit_btn_buy {
    background:#0080EA;
    border:1px solid #0080EA;
    border-radius:8px;
}
.sit_btn_buy:hover {
    background:#0070CC;
    border-color:#0070CC;
}
.sit_btn_cart {
    border:1px solid #d7e1ea;
    border-radius:8px;
    color:#333;
}
.sit_btn_cart:hover {
    background:#F7F9FC;
    border-color:#0080EA;
    color:#0080EA;
}
.sit_btn_wish {
    border-radius:8px;
}
#sit_btn_alm {
    border-radius:8px;
}

/* 관련상품 카드 */
#sit_rel {
    border:1px solid #EEF0F3;
    border-radius:8px;
    box-shadow:0px 1px 4px rgba(0,0,0,0.06);
    box-sizing:border-box;
}
#sit_rel h2 {
    text-align:left;
    font-size:1.15em;
    font-weight:700;
    margin:0 0 20px;
    padding-bottom:12px;
    border-bottom:1px solid #D7E1EA;
}
#sit_rel h2::before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:8px;
    margin-bottom:1px;
    border-radius:50%;
    background:#0080EA;
    vertical-align:middle;
}

/* 상품정보/사용후기/상품문의/배송교환 탭 카드 */
#sit_info {
    border:1px solid #EEF0F3;
    border-radius:8px;
    box-shadow:0px 1px 4px rgba(0,0,0,0.06);
    box-sizing:border-box;
    overflow:hidden;
}
#sit_tab .tab_tit {
    border-bottom:1px solid #D7E1EA;
}
#sit_tab .tab_tit li .selected:after {
    background:#0080EA;
}

/* 상품정보고시 버튼 - 탭에서 sit_inf_basic_desc(기본설명) 안으로 이동, 우측정렬 */
#sit_inf_basic_desc {
    overflow:hidden;
}
#sit_inf_basic_desc #btn_sit_infopen {
    float:right;
    margin-left:10px;
    padding:5px 14px;
    font-size:0.8em;
    line-height:1.5;
    border:1px solid #ccc;
    border-radius:4px;
    color:#888;
    background:#fafafa;
}
#sit_inf_basic_desc #btn_sit_infopen.selected {
    border-color:#0080EA;
    color:#0080EA;
    background:#fff;
}
/* 참고: #sit_inf, #sit_use, #sit_qa 의 h2/h3는 탭 버튼 라벨과 중복되어
   skin/style.css에서 의도적으로 숨김 처리(position:absolute) 되어 있음.
   #sit_dex(배송/교환정보)만 실제로 보이는 제목이라 여기에만 라인 정리. */
#sit_dex h2 {
    font-size:1.15em;
    font-weight:700;
    margin:0 0 16px;
    padding-bottom:12px;
    border-bottom:1px solid #D7E1EA;
}
#sit_dex h2::before {
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:8px;
    margin-bottom:1px;
    border-radius:50%;
    background:#0080EA;
    vertical-align:middle;
}

/* 선택된 옵션/추가옵션 소제목 */
.sit_option h3,
#sit_sel_option h3,
.sit_side_option h3,
.sit_sel_option h3 {
    color:#222;
}

@media (max-width:768px) {
    #container .shop-content.is_item {
        padding-left:0;
        padding-right:0;
    }
    #sit_ov_wrap {
        padding:20px 10px;
    }
    #sit_ov_from {
        border-radius:0;
    }
    #sit_rel {
        border-radius:0;
    }
    #sit_info {
        border-radius:0;
    }
}

/* 1&5번: 가로 오버플로우 근본 원인 수정
   버그1 - style.css의 #sit_ov_wrap {width:1200px} 고정값이
   뷰포트 1201px~1699px 구간(기존 max-width:1200px 미디어쿼리가
   커버하지 못하는 구간)에서 좌측 사이드바와 합쳐 가로 스크롤 유발.
   고정폭을 max-width로 바꿔 뷰포트에 맞게 항상 줄어들도록 처리. */
#sit_ov_wrap {
    max-width:1200px;
    width:100%;
    box-sizing:border-box;
}

/* 버그2 - 상세설명(#sit_inf) 안에 삽입된 유튜브 등 iframe이
   고정 픽셀폭으로 렌더링되어 360px 이하 뷰포트에서 가로 스크롤 유발.
   비율은 유지하되 컨테이너 폭을 넘지 않도록 반응형 처리. */
#sit_inf iframe {
    max-width:100%;
    height:auto;
}

/* 2번: 관련상품 상품명 글자 넘침 방지 - 카드 폭(175px) 기준 2줄까지 허용,
   그 이상은 말줄임 처리 */
#sit_rel .scr_10 .sct_img img {
    border-radius:6px;
}
#sit_rel .scr_10 .sct_cost {
    text-align:right;
}
#sit_rel .scr_10 .sct_txt {
    overflow:hidden;
}
#sit_rel .scr_10 .sct_txt a {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
}

/* 4번: 상단 위치 표시(홈 아이콘 + 카테고리 드롭다운, #sct_location)는
   상품 상세 페이지에서는 중복 정보로 판단되어 숨김 처리.
   navigation.skin.php는 상품목록 페이지와 공유하는 파일이라 PHP단
   주석 대신 이 페이지 전용 CSS로만 범위를 한정해 숨김(하드 삭제 아님,
   list.php 등 목록 페이지에는 영향 없음) */
#sct_location.view_location {
    display:none;
}
/* #sct_location이 실제로 차지하던 상단 여백이 display:none으로 사라지며
   깨진 위아래 균형을 랜딩화면 기준으로 재보정.
   랜딩화면은 상단 마진 20px / 하단 마진 0(단, 최하단 개체 자체의 패딩이
   배경색과 같아 육안상 위아래 20으로 보이는 구조)이 기준.
   상품상세 페이지의 상단(#sit_ov_from)/하단(#sit_info) 개체는 배경색이
   본문 배경과 달라 그 패딩이 여백으로 보이지 않으므로, 마진 자체를
   랜딩화면과 같은 실질값(20px)으로 맞춤 */
#sit_ov_from {
    margin-top:20px;
}
/* 하단: 기존 style.css #sit_info(margin-bottom:30px) + #sit(margin-bottom:10px)
   = 40px로 과도했던 것을 20px로 재보정(이 페이지 전용으로만 override,
   style.css 원본은 건드리지 않음) */
#sit_info {
    margin-bottom:0;
}
#sit {
    margin-bottom:20px;
}

/* 3번(#sit_buy 중복 사이드바) 관련 추가 수정: item.info.skin.php에서
   #sit_buy 출력은 막았지만(PHP if(false)), style.css의 #sit_tab이
   width:928px 고정값이라 #sit_buy(270px)가 채우던 오른쪽 공간이 빈
   여백으로 그대로 남아있었음. #sit_buy가 더 이상 출력되지 않으므로
   #sit_tab이 #sit_info 박스 전체 폭을 채우도록 수정(하드 삭제 아님,
   style.css 원본 값은 유지, 이 페이지에서만 override) */
#sit_tab {
    width:100%;
}

/* 5번(1차): 관리자 전용 상품관리 톱니바퀴 아이콘 - 우하단 고정 배치했던 것을
   "상품 제목 옆으로 이동" 요청에 따라 재변경. DOM상 위치는 멀리 떨어져 있어
   (core shop/item.php에서 출력) JS로 #sit_title 옆에 옮기고, 인라인으로
   나란히 보이도록 스타일 변경(코어 파일은 건드리지 않음, item.form.skin.php
   말미 스크립트에서 이동 처리) */
.sit_admin {
    display:inline-block;
    vertical-align:middle;
    margin-left:8px;
}
.sit_admin a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #e0e0e0;
    border-radius:50%;
    width:28px;
    height:28px;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    padding:0;
    font-size:0.8em;
}

/* 6번: 상품정보(#sit_inf) 폰트 체계 3단계 정리
   제목(가장 크게) > 소제목 > 본문. 최소 글자크기 1em 기준으로 재조정
   (기존 본문 0.875em이 최소 기준 1em보다 작아 상향).
   같은 등급끼리는 font-size/font-weight/line-height를 완전히 동일하게
   통일 — 색상은 별도(.info-red/.info-blue/.info-black)로 관리하고 이
   3개 클래스에는 색상을 넣지 않음(난잡하게 섞여있던 임의 태그 정리). */
#sit_inf .info-title {
    font-size:1.5em;
    font-weight:700;
    line-height:1.4;
}
#sit_inf .info-subtitle {
    font-size:1.25em;
    font-weight:700;
    line-height:1.4;
}
#sit_inf .info-body {
    font-size:1em;
    font-weight:400;
    line-height:1.6;
}

/* 색상 3종 통일: 붉은색 1개 / 푸른색 1개 / 검은색(나머지) 1개.
   기존에 rgb(255,0,0)/#ff0000, rgb(84,141,212)/#548dd4,
   rgb(34,34,34)/#222222 등 미세하게 다른 값들이 난잡하게 섞여있던 것을
   이 3개 클래스로 통일해서 적용 */
#sit_inf .info-red {
    color:#D32F2F;
}
#sit_inf .info-blue {
    color:#2C5AA0;
}
#sit_inf .info-black {
    color:#222222;
}
/* 같은 등급끼리 굵기 통일 - 본문 안에 남아있던 <b>/<strong> 태그로 인한
   굵기 불일치를 강제로 정리(태그 자체는 안 건드리고 렌더링만 통일) */
#sit_inf .info-title, #sit_inf .info-title b, #sit_inf .info-title strong {
    font-weight:700;
}
#sit_inf .info-subtitle, #sit_inf .info-subtitle b, #sit_inf .info-subtitle strong {
    font-weight:700;
}
#sit_inf .info-body, #sit_inf .info-body b, #sit_inf .info-body strong {
    font-weight:500;
}
/* info-* 클래스가 없는 나머지 본문 텍스트(색상/크기 지정이 원래 없던
   부분)도 최소 1em / 동일 굵기 기준을 따르도록 기준값 지정 - 클래스
   유무와 상관없이 상세설명 전체가 통일되게 함 */
#sit_inf_explan {
    font-size:1em;
    font-weight:500;
    color:#222222;
}

/* 이 상품의 원래 기본설명을 상품상세 최상단에 중간제목 크기의
   포인트 블루로 노출 */
#sit_inf_basic_desc {
    font-size:1.25em;
    font-weight:700;
    color:#0080EA;
    margin:0 0 20px;
}

/* 제목 옆으로 옮긴 잘려나간 제목 뒷부분 - 기본설명(#sit_desc)보다
   20% 작은 크기로 구분되게 표시 */
.sit_desc_suffix {
    font-size:0.8em;
}

/* 대표이미지와 우측 정보 영역 사이 여백 */
#sit_ov_wrap {
    column-gap:30px;
}

/* 총 금액(하단 합계) 강조색 - 판매가격과 동일하게 포인트 블루 */
#sit_tot_price strong,
.sit_tot_price strong {
    color:#0080EA;
}

/* 관리자 상품관리 버튼을 상품 제목과 같은 줄에 맞춤(제목이 길어
   여러 줄로 감싸질 수 있어 flex 대신 자연스러운 inline 흐름 유지) */
.sit_admin {
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    margin-left:8px;
}
.sit_admin a {
    vertical-align:middle;
}

/* 공유하기 팝업 맨 위 상품 URL - 기존 팝업 폭(175px)이 URL 표시엔
   너무 좁아 글자 단위로 줄바꿈되던 문제 수정 */
#sit_star_sns .sns_area {
    max-width:260px;
}
.sit_share_url {
    order:-1;
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    margin-bottom:8px;
    border-bottom:1px solid #EEF0F3;
    font-size:0.8em;
    color:#555;
    text-align:left;
    overflow-wrap:break-word;
    word-break:normal;
    user-select:all;
}

/* 관련상품 상하 패딩 10, 제목 글자 바로 아래 패딩 6 */
#sit_rel {
    padding-top:10px;
    padding-bottom:10px;
}
#sit_rel h2 {
    padding-bottom:6px;
}

/* 관련상품 이전/다음 화살표를 "관련상품" 제목과 같은 줄(구분선 위쪽)에 나란히 맞춤 */
#sit_rel h2 {
    border-bottom:0;
}

/* h2의 비대칭 padding-bottom:6px를 없애서 h2 박스 = 글자 그 자체가 되도록 정리
   (아래쪽에만 있던 여분의 6px 여백 제거 - 위 405번째 줄 규칙 재정의) */
#sit_rel h2 {
    padding-bottom:0;
}

/* 카드(#sit_rel) 자체 테두리(둥근 모서리, 실제로 눈에 보임) ~ "관련상품" 글자+화살표 묶음
   ~ 아래 상품이미지 사이 간격. 실측 픽셀은 거의 동일(12px대)해도 위쪽은 옅은 회색 테두리,
   아래쪽은 진한 사진이 바로 붙어 있어 시각적으로 위쪽이 더 좁아 보이므로(착시),
   위쪽 여백을 조금 더 크게 줘서 보정 */
#sit_rel {
    padding-top:23px;
}
#sit_rel .bx-controls-direction {
    top:15px;
}
#sit_rel h2 {
    margin-bottom:16.5px;
}

/* 세로 스택으로 전환되는 1200px 이하에서는 대표이미지가 컨테이너 전체 폭(100%)까지
   커지지 않도록 600px로 제한하고 가운데 정렬 */
@media (max-width:1200px) {
    #sit_pvi_big img {
        width:600px !important;
        max-width:100% !important;
        margin:0 auto;
        display:block;
    }
}

/* 좌측 사이드바(#aside)가 남아있는 1025~1200px 구간에서만 작은 이미지들을
   대표이미지 좌측에 세로로 배치. #aside가 사라지는 1024px 이하(default_shop.css
   @media max-width:1024px)에서는 이 규칙이 꺼지고 원래(가로/중앙정렬) 배치로 돌아감 */
@media (min-width:1025px) and (max-width:1200px) {
    /* 썸네일을 대표이미지 좌측에, 서로 붙지만 겹치지는 않게 나란히 배치.
       #sit_pvi_big의 강제 width:100%를 해제(auto)해서 이미지 자기 크기만큼만 차지하고,
       그 옆(gap)에 썸네일 세로열이 자연스러운 간격을 두고 붙게 함 */
    #sit_pvi {
        flex-direction:row !important;
        align-items:flex-start;
        gap:10px;
    }
    #sit_pvi_thumb {
        order:1;
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        width:auto !important;
        padding:0 !important;
    }
    /* li 너비를 정하지 않음 - 썸네일 원본이 서버에서 70x70으로 고정 크롭되어 나오므로
       (예: thumb-..._70x70.jpg) width를 안 정해도 이미지 크기에 딱 맞게 됨 */
    #sit_pvi_thumb li {
        width:auto !important;
        min-width:0 !important;
        margin:0 0 8px 0 !important;
    }
    #sit_pvi_big {
        order:2;
        width:auto !important;
    }
}

/* 장바구니/바로구매/찜 버튼(#sit_ov_btn)을 좌측 정렬(float:left) 대신 중앙정렬 */
#sit_ov_btn {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}
#sit_ov_btn button {
    float:none;
}

/* 판매가격 줄 오른쪽에 찜·공유를 나란히 (겹치지 않게 한 줄에 좌우로 벌림) — 2026-09-11 */
.sit_ov_tbl td.sit_price_td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sit_ov_tbl td.sit_price_td #sit_star_sns {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}
.sit_ov_tbl td.sit_price_td #sit_btn_opt {
    position: static;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sit_ov_tbl td.sit_price_td #btn_wish,
.sit_ov_tbl td.sit_price_td .btn_sns_share {
    float: none;
    margin: 0;
}