/* 상품 상세 페이지 전용 스타일 - 대문 디자인 톤 맞춤
   주의: 이 파일은 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(가로 배치 전용 값)가 그대로 적용되어
   높이 계산이 틀어져 썸네일/본문이 겹치고 이미지가 갑자기 커 보이는 문제가 생김 */
/* Keep desktop images within the purchase panel while scrolling. */
@media (min-width:1201px) {
    #sit_pvi {
        position:sticky;
        top:20px;
        align-self:flex-start;
    }
}
@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;
    /* A1(2026-09-26): 썸네일이 많아도 한 줄 유지, 넘치면 옆으로 밀기(360에서 2줄 되던 문제) */
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:8px;
    width:100% !important;
    margin:0 !important;
    padding:0 !important; /* 2026-09-29 아래 10px 삭제(사용자) */
    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;
    flex-shrink:0;
}
/* 적을 땐 가운데 정렬 유지(justify-content:center 는 넘칠 때 왼쪽이 잘려서 auto 여백으로 대신) */
#sit_pvi_thumb li:first-child {margin-left:auto;}
#sit_pvi_thumb li:last-child {margin-right:auto;}
#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;
}
/* 2026-09-29: 가격 카드가 사진 아래로 내려가는 1200px 이하에서는 상품명을 사진 위에 표시
   (item.form.skin.php 의 #sit_title_top). 1201px 이상은 카드 안 #sit_title 그대로 */
#sit_title_top {display:none}
@media (max-width:1200px) {
    #sit_title_top {display:block;margin:0 0 10px;font-size:1.8em;font-weight:700;line-height:normal;color:#000}
    /* 2026-09-29 가운데·한 줄(글자 줄임은 item.form.skin.php 스크립트, 16px 에서도 넘치면 …) */
    #sit_title_top {position:relative;min-width:0;max-width:100%} /* flex 칸이 한 줄 글자 폭만큼 늘어나 가로 넘침 방지 */
    #sit_title_top .sit_title_txt {display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #sit_title_top .sit_admin {top:50%;transform:translateY(-50%)} /* 제목 오른쪽에 겹쳐 띄움, 세로 가운데 */
    #sit_title {display:none}
}
@media (max-width:600px) {
    #sit_title_top {margin:6px 0}
}

/* 판매가격 강조 - 포인트 컬러 */
.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;
    aspect-ratio:16/9; /* 2026-09-26: height:auto 만으론 iframe 이 150px 로 눌림 → 폭 기준 16:9 */
}

/* 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;
    /* A2(2026-09-26): 순정 min-height:600px 는 없앤 오른쪽 구매상자(#sit_buy) 높이 맞춤용 → 해제 */
    min-height: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;
    }
}

/* 1200px 이하 세로 스택에서 사진(600)+썸네일열(70)+간격(10)=680px 가 들어가는 705px 이상이면 작은 이미지들을
   대표이미지 좌측에 세로로 배치(2026-09-29: 1025→705, 사이드바 없는 705~1024px 도 공간 충분). 705px 미만은
   원래(가로/중앙정렬) 배치 */
@media (min-width:705px) 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;
        /* A1: 세로 배치는 큰 이미지 높이(600px)까지만, 넘치면 세로 스크롤 */
        max-height:600px;
        overflow-x:hidden;
        overflow-y:auto;
    }
    /* 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;
}

/* 장바구니/바로구매/찜 버튼 줄을 옵션칸 전체 폭으로 늘림(장바구니·바로구매가 나눠 갖고 찜은 고정),
   아래 네이버페이 템플릿 버튼도 같은 폭 — SDK 가 칸 폭(360 미만/768 이하/초과)에 맞춰 스스로 크기를 바꿈 — 2026-09-20 */
#sit_ov_btn {
    gap:5px;
}
#sit_ov_btn button {
    flex:1 1 0;
    width:auto;
    height:40px;
    font-size:14px;
    border-radius:4px;
    margin:0;
}
#sit_ov_btn .sit_btn_wish {
    flex:0 0 40px;
    width:40px;
    height:40px;
    line-height:38px;
    font-size:16px;
    border-radius:4px;
    margin:0;
    box-sizing:border-box;
}
.itemform-naverpay #npay-button-container {
    width:100%;
}

/* A1(2026-09-26): 폰 폭(600 이하)에서 썸네일이 70px→최소 52px까지 줄어 한 줄에 들어가게
   (360 폭 5장 = 약 61px). 그보다 많으면 옆으로 밀기 */
@media (max-width:600px) {
    #sit_pvi_thumb li {
        flex:0 1 70px;
        min-width:52px;
    }
    #sit_pvi_thumb li a {
        display:block;
        width:100%;
    }
    #sit_pvi_thumb li img {
        display:block;
        width:100% !important;
        height:auto !important;
    }
}

/* A3(2026-09-26): 관련상품 슬라이더 대신 가로 스크롤. 개수 그대로, 칸 140px 고정,
   PC는 스크롤바·폰은 손가락으로 밀면 칸 단위로 멈춤 */
#sit_rel .scr_10 {
    display:flex;
    gap:16px;
    margin:0;
    padding:0 0 10px;
    list-style:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
#sit_rel .scr_10 > li {
    flex:0 0 140px;
    width:140px;
    float:none;
    margin:0;
    scroll-snap-align:start;
}

/* A3 걸침(2026-09-26): 폰 폭(600 이하)·관련상품 4개 이상일 때만 칸을 3.33개 크기로 →
   5번째 칸이 1/5 걸쳐 보여 옆으로 더 있다는 걸 알려줌. PC는 스크롤바가 보여서 140px 그대로 */
@media (max-width:600px) {
    #sit_rel .scr_10:has(> li:nth-child(4)) > li {
        flex:0 0 calc((100% - 64px) / 4.2); /* 4칸 + 5번째 1/5 */
        width:auto;
    }
}
/* 칸이 100px 아래로 작아지는 폭(480 이하)에선 상품명·가격 숨기고 사진만 */
@media (max-width:480px) {
    #sit_rel .scr_10:has(> li:nth-child(4)) > li > :not(.sct_img) {
        display:none;
    }
}

/* 폰 폭(600 이하) 상품상세 모든 상자 좌우 여백 10px 통일(2026-09-26 사용자 지시)
   순정 #sit_rel 35px · .tab_con 15px · .sit_opt_list 15px · .dwf_box 16px → 10px */
@media (max-width:600px) {
    #container #sit_ov_wrap,
    #container .dwf_box,
    #container .sit_opt_list,
    #container #sit_tab .tab_con,
    #container #sit_rel {
        padding-left:10px;
        padding-right:10px;
    }
}

/* 탭(상품정보·리뷰·상품문의·배송/교환) 다듬기(2026-09-26)
   - 리뷰·상품문의 숫자: 대표 오렌지(로고색 #F28F2B) 바탕 + 흰 굵은 글씨
   - 폰(600 이하)에서 순정 style.css 1047줄이 숨기던 리뷰 숫자 다시 표시
   - 탭 높이 58px(line-height 38 + 위아래 10) → 40px */
#sit_tab .item_use_count,
#sit_tab .item_qa_count {
    background:#F28F2B;
    color:#fff;
    font-weight:700;
    border-radius:3px; /* 알약 → 사각 모서리 라운딩(2026-09-28) */
}
#sit_tab .tab_tit li button {
    line-height:22px;
    padding-top:9px;
    padding-bottom:9px;
}
@media (max-width:600px) {
    #sit_tab .item_use_count {
        display:inline-block;
    }
}

/* 리뷰 수 메달(2026-09-26): item.info.skin.php 가 숫자 칸에 rv_bronze(10+)·rv_silver(20+)·rv_trophy(30+) 붙임.
   숫자 오른쪽 위에 살짝 겹쳐, 흰 테두리(drop-shadow 4방향) */
#sit_tab .item_use_count,
#sit_tab .item_qa_count {
    vertical-align:2px; /* 숫자 칸이 옆 글자보다 처져 보여 올림 */
}
#sit_tab .item_use_count.rv_bronze,
#sit_tab .item_use_count.rv_silver,
#sit_tab .item_use_count.rv_trophy {
    position:relative;
    overflow:visible;
}
#sit_tab .item_use_count.rv_bronze::after,
#sit_tab .item_use_count.rv_silver::after,
#sit_tab .item_use_count.rv_trophy::after {
    content:"";
    position:absolute;
    top:-14px; /* 탭 상자 윗선 밖으로 4px 나오게(윗선에 딱 붙으면 잘린 것처럼 보임) */
    right:-9px;
    width:18px;
    height:18px;
    pointer-events:none;
    background:no-repeat center/contain;
    filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
#sit_tab .item_use_count.rv_bronze::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E53935%22%20d%3D%22M6%201h4l3%207h-4z%22/%3E%3Cpath%20fill%3D%22%231E6FD9%22%20d%3D%22M18%201h-4l-3%207h4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%227.5%22%20fill%3D%22%23D08A4E%22%20stroke%3D%22%239C5A24%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22M12%2010.5l1.3%202.7%203%20.4-2.2%202.1.5%203-2.6-1.4-2.6%201.4.5-3-2.2-2.1%203-.4z%22/%3E%3C/svg%3E"); }
#sit_tab .item_use_count.rv_silver::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E53935%22%20d%3D%22M6%201h4l3%207h-4z%22/%3E%3Cpath%20fill%3D%22%231E6FD9%22%20d%3D%22M18%201h-4l-3%207h4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%227.5%22%20fill%3D%22%23C9D0D6%22%20stroke%3D%22%238A949C%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22M12%2010.5l1.3%202.7%203%20.4-2.2%202.1.5%203-2.6-1.4-2.6%201.4.5-3-2.2-2.1%203-.4z%22/%3E%3C/svg%3E"); }
#sit_tab .item_use_count.rv_trophy::after { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23F5B400%22%20stroke%3D%22%23C98A00%22%20stroke-width%3D%221%22%20d%3D%22M6%202h12v5a6%206%200%200%201-12%200z%22/%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23C98A00%22%20stroke-width%3D%221.8%22%20d%3D%22M6%204H3v2a4%204%200%200%200%204%204M18%204h3v2a4%204%200%200%201-4%204%22/%3E%3Cpath%20fill%3D%22%23F5B400%22%20stroke%3D%22%23C98A00%22%20stroke-width%3D%221%22%20d%3D%22M10%2013h4v4h-4zM7%2018h10v4H7z%22/%3E%3C/svg%3E"); }
/* 메달이 탭 상자 위로 넘쳐 보이게: #sit_info 의 overflow:hidden(모서리 둥글림용) 해제,
   대신 탭 줄·내용에 같은 둥글림 */
#sit_info {
    overflow:visible;
}
#sit_tab .tab_tit {
    border-radius:8px 8px 0 0;
}
#sit_tab .tab_con {
    border-radius:0 0 8px 8px;
}
@media (max-width:768px) {
    #sit_tab .tab_tit,
    #sit_tab .tab_con {
        border-radius:0;
    }
}

/* 관련상품 PC(601 이상) 칸 140 → 110px, 한 번에 더 많이 보이게(2026-09-26) */
@media (min-width:601px) {
    #sit_rel .scr_10 > li {
        flex:0 0 110px;
        width:110px;
    }
}

/* 네이버페이 버튼 아래 빈 공간 52px → 약 17px(2026-09-26)
   default_shop.css 1441줄 .itemform-naverpay margin-bottom:15px · 순정 style.css #sit_ov padding-bottom:20px 을 이 화면만 0 */
#container .itemform-naverpay {
    margin-bottom:0;
}
#container #sit_ov {
    padding-bottom:0;
}

/* 탭 줄 폰(600 이하) 2×2 두 줄 → 한 줄 4칸(2026-09-26 사용자 선택 T2)
   순정 style.css 1063줄 li{width:50%} 해제, 글자 14px, 선택 탭 밑줄 유지 */
@media (max-width:600px) {
    #sit_tab .tab_tit {
        display:flex;
        padding:0 4px;
    }
    #sit_tab .tab_tit li {
        float:none;
        width:auto;
        flex:1 1 auto;
    }
    #sit_tab .tab_tit li button {
        font-size:14px;
        padding-left:2px;
        padding-right:2px;
        white-space:nowrap;
    }
}

/* ===== 카드 팝업(2026-09-26) =====
   상품문의·배송/교환·상품정보고시: 화면 가운데 카드(사용자 지시로 P2 아래카드 → 가운데로 변경).
   리뷰(#sit_use)는 원래 전체화면 창 그대로 - 여기서 제외. 순정 style.css 673줄(탭 아래 펼침)을 덮어씀.
   가운데 정렬은 inset 0 + margin auto + height:fit-content (transform 안 씀) */
#sit_tab .tab_con > li.sit_overlay_show:not(#sit_use) {
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:min(92vw, 640px) !important;
    height:fit-content !important;
    max-height:80vh !important;
    margin:auto !important;
    padding:0 20px 20px !important;
    border-radius:16px !important;
    box-shadow:0 12px 40px rgba(0,0,0,.28) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:10001 !important;
}
/* 머리글(제목 + 숫자 + 닫기) - 카드 위에 붙어 있음 */
#sit_tab .sit_pop_head {
    position:sticky;
    top:0;
    z-index:3;
    height:auto;
    margin:0 -20px 15px;
    padding:14px 20px 12px;
    line-height:32px;
    background:#fff;
    border-bottom:1px solid #E6EAEF;
    text-align:left;
    font-size:16px;
    font-weight:700;
    color:#222;
}
.sit_pop_head { display:none; }
.sit_overlay_show > .sit_pop_head { display:block; }
/* 제목 옆 숫자: 연파랑 알약 */
#sit_tab .sit_pop_cnt {
    display:inline-block;
    min-width:22px;
    height:22px;
    margin-left:6px;
    padding:0 8px;
    border-radius:11px;
    background:#EAF4FE;
    color:#0080EA;
    font-size:13px;
    font-weight:700;
    line-height:22px;
    text-align:center;
    vertical-align:2px;
    box-sizing:border-box;
}
/* 닫기: 리뷰 머리글의 파랑 "닫기" 버튼과 같은 모양 */
/* 머리글 오른쪽 버튼 묶음(상품문의: 글쓰기 + 닫기) */
#sit_tab .sit_pop_head .sit_pop_btns {
    position:absolute;
    right:20px;
    bottom:12px;
    display:flex;
    gap:6px;
}
#sit_tab .sit_pop_head .sit_pop_btns .sit_pop_close { position:static; }
/* 글쓰기: 닫기(파랑 채움)와 구별되게 흰 바탕 + 파랑 테두리·글씨 + 연필 */
#sit_tab .sit_pop_head .sit_pop_write {
    display:inline-block;
    height:32px;
    padding:0 12px;
    border:1px solid #0080EA;
    border-radius:4px;
    background:#fff;
    color:#0080EA;
    font-size:13px;
    font-weight:600;
    line-height:30px;
    text-decoration:none;
    box-sizing:border-box;
}
#sit_tab .sit_pop_head .sit_pop_write:hover { background:#EAF4FE; }
#sit_tab .sit_pop_head .sit_pop_close {
    position:absolute;
    right:20px;
    bottom:12px;
    height:32px;
    padding:0 16px;
    border:1px solid #0080EA;
    border-radius:4px;
    background:#0080EA;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:30px;
    cursor:pointer;
    box-sizing:border-box;
}
#sit_tab .sit_pop_head .sit_pop_close:hover { background:#006fcc; border-color:#006fcc; }
/* 원래 동그란 ✕ 닫기·팝업 안 옛 제목 숨김 */
#sit_overlay_close_btn { display:none !important; }
.sit_overlay_show#sit_dex > h2,
.sit_overlay_show#sit_infopen > h2 { display:none; }
#sit_qa.sit_overlay_show .sit_qa_write { padding-right:0; }
/* 팝업 동안 뒷화면 고정 + 떠 있는 버튼(메뉴·검색·위로가기)이 카드 위로 못 올라오게 */
body:has(#sit_tab .tab_con > li.sit_overlay_show) { overflow:hidden; }
body:has(#sit_tab .tab_con > li.sit_overlay_show) #wrapper { z-index:11; }
body:has(#sit_tab .tab_con > li.sit_overlay_show) #top_btn { display:none !important; } /* 원래 규칙이 !important */
/* 폰(600 이하): 글쓰기 버튼 가운데, 작성일 숨김 */
@media (max-width:600px) {
    #sit_qa .sit_qa_write { text-align:center; }
    table.sit_qa_list th:nth-child(3),
    table.sit_qa_list td.td_date { display:none; }
}

/* 가운데 카드 팝업 스크롤바가 둥근 모서리를 네모로 덮던 문제(2026-09-26):
   얇은 둥근 스크롤바 + 트랙 위아래 16px 띄움 → 모서리는 카드 바탕(흰색)이 둥글게 보임 */
/* 크롬은 scrollbar-width 를 쓰면 ::-webkit-scrollbar 를 무시하므로 파이어폭스용으로만 */
@supports not selector(::-webkit-scrollbar) {
    #sit_tab .tab_con > li.sit_overlay_show:not(#sit_use) {
        scrollbar-width:thin;
        scrollbar-color:#C5CBD3 transparent;
    }
}
#sit_tab .tab_con > li.sit_overlay_show:not(#sit_use)::-webkit-scrollbar { width:8px; }
#sit_tab .tab_con > li.sit_overlay_show:not(#sit_use)::-webkit-scrollbar-track { background:transparent; margin:16px 0; }
#sit_tab .tab_con > li.sit_overlay_show:not(#sit_use)::-webkit-scrollbar-thumb { background:#C5CBD3; border-radius:4px; border:2px solid #fff; }

/* 상품문의 카드 360 이하: 작성자 칸 120px → 한글 4자 폭(약 4em + 좌우 여백), 넘치면 … (2026-09-26, 사용자 지시로 360만) */
@media (max-width:360px) {
    table.sit_qa_list th:nth-child(2),
    table.sit_qa_list td.td_name {
        width:calc(4em + 16px);
        max-width:calc(4em + 16px);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        box-sizing:border-box;
    }
}

/* 상품문의 목록 제목 옆 답변 수: 대표 파랑 + 대표 폰트 굵게, 괄호 없음(2026-09-26) */
table.sit_qa_list .sit_qa_cmt {
    margin-left:3px;
    color:#0080EA;
    font-family:'Pretendard Variable', 'Malgun Gothic', dotum, sans-serif;
    font-weight:700;
}

/* A6(2026-09-26): 상품상세 네이버페이 버튼 위 SDK 여백 18px → 8px (장바구니 #sod_bsk_act 와 같은 값).
   SDK 규칙이 !important 라 id 로 명시도 올려 덮음. 혜택 말풍선(위로 12px 튀어나옴)은 5+8=13px 안에 들어가 겹치지 않음 */
#sit_ov_btn .npay_button_sdk_wrapper {
    padding-top:8px !important;
}

/* 구매 버튼 줄(장바구니·바로구매·찜·네이버페이) 최대 360px 가운데(2026-09-26 사용자 선택 안3, 모든 폭 공통).
   네이버페이 버튼 높이는 CSS로 바꾸지 않음 - SDK가 칸 폭(360~768 medium)을 보고 스스로 40px 크기를 고르게 둠 */
#sit_ov_btn {
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
}

/* ===== 상품상세 테마 v1 (2026-09-26 사용자 확정) =====
   상품 설명(#sit_inf_explan)의 DB HTML 은 그대로 두고 화면에서만 정리. 스크립트는 item.info.skin.php 끝.
   본문 15px·500·행간 1.7·#333 / 강조 700 / 소제목 17px / 제목 19px+파란 점 / 경고 상자(연빨강 바탕, 왼쪽 선 없음)
   색: 빨강 #D32F2F(경고) · 파랑 #2C5AA0(안내) · 검정 #222 · 대표 파랑 #0080EA 은 장식(점)만 — 흰 바탕 글자 대비 4.5:1 기준
   글자 크기 최소 15px·최대 19px 는 스크립트가 맞춤. 가운데 정렬은 한 줄짜리 경고 상자만 */
#sit_inf_explan {
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    font-size:15px;
    line-height:1.7;
    font-weight:500;
    color:#333;
    letter-spacing:-0.01em;
}
#sit_inf_explan,
#sit_inf_explan * {
    font-family:'Pretendard Variable', 'Malgun Gothic', dotum, sans-serif !important;
}
#sit_inf_explan *:not(.info-title):not(.info-subtitle) {
    line-height:1.7 !important;
}
#sit_inf_explan b,
#sit_inf_explan strong,
#sit_inf .info-body b,
#sit_inf .info-body strong {
    font-weight:700 !important;
}
#sit_inf .info-body {
    font-size:15px;
    font-weight:500;
    line-height:1.7;
}
#sit_inf .info-red { color:#D32F2F; }
#sit_inf .info-blue { color:#2C5AA0; }
#sit_inf .info-black { color:#222; }
#sit_inf .info-subtitle {
    display:block;
    margin:28px 0 8px;
    font-size:17px;
    line-height:1.45;
    color:#222;
    text-align:left;
}
#sit_inf .info-title {
    display:block;
    position:relative;
    margin:36px 0 12px;
    padding-left:14px;
    font-size:19px;
    line-height:1.4;
    color:#222;
    text-align:left;
}
#sit_inf .info-title::before {
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#0080EA;
}
/* 경고 상자: 이름표(info-title info-red) 또는 스크립트가 찾은 경고(.t-warn) */
#sit_inf .info-title.info-red,
#sit_inf_explan .t-warn {
    display:block;
    margin:16px 0 !important;
    padding:12px 14px !important;
    border-radius:8px;
    background:#FDEDED !important;
    color:#B71C1C !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.6 !important;
    text-align:left !important;
}
#sit_inf .info-title.info-red::before { display:none; }
#sit_inf_explan .t-warn * {
    color:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    background:transparent !important;
}
#sit_inf_explan .t-warn .t-warn-in {
    display:block;
    margin:0 !important;
    padding:0 !important;
    text-align:inherit !important;
}
#sit_inf_explan .t-warn.t-one,
#sit_inf .info-title.info-red.t-one { text-align:center !important; }

/* 테마 v1 추가(2026-09-26 사용자 지시): 설명 이미지 모서리 8px(경고 상자와 같은 값).
   틈 없이 위아래로 붙은 이미지는 이음새에 홈이 보여 스크립트가 .t-img-gap 을 달아 3px 띄움 */
#sit_inf_explan img { border-radius:8px; }
#sit_inf_explan img.t-img-gap { display:inline-block; margin-top:3px; }

/* 2026-09-27 상품상세 입력칸·선택칸 30px, 수량 줄(−·입력·+) 35px — 사용자 지정. 구매 버튼 줄은 40 그대로 */
#sit_ov_wrap .dwf_in,
#sit_ov_wrap .dwf_sel,
#sit_ov_wrap .dwf_txt {height:30px;padding-top:0;padding-bottom:0}
#sit_ov_wrap .sit_option select {height:30px}
#sit_ov_wrap #sit_opt_added button {width:35px;height:35px}
#sit_ov_wrap #sit_opt_added .sit_opt_del {width:30px;height:30px}
#sit_ov_wrap #sit_opt_added .num_input {height:35px}
#sit_ov_wrap #sit_opt_added .sit_opt_prc {line-height:35px}
/* 공유·위시 아이콘: 모양·가격 줄 높이(28px)는 그대로, 보이지 않는 누름 영역만 약 40×40 */
.sit_ov_tbl td.sit_price_td #btn_wish,
.sit_ov_tbl td.sit_price_td .btn_sns_share {position:relative;z-index:2}
.sit_ov_tbl td.sit_price_td #btn_wish::after,
.sit_ov_tbl td.sit_price_td .btn_sns_share::after {content:"";position:absolute;top:-8px;bottom:-8px;left:-2px;right:-2px}

/* 2026-09-27 A12: 폰 리뷰 창 스크롤 시 뒤 화면이 같이 움직이던 것
   - 리뷰 창 끝에 닿아도 스크롤을 뒤로 넘기지 않음(카드 팝업은 이미 contain)
   - 페이지 스크롤은 html(default_shop.css 14줄 overflow-y:scroll)이 하므로 body 잠금은 효과 없음 → 창 열린 동안 html 잠금.
     손가락 기기만(PC는 스크롤바가 사라져 화면이 흔들리고, 휠은 shop.head.php 가 따로 처리) */
#sit_use.sit_overlay_show {overscroll-behavior:contain}
@media (pointer:coarse){
html:has(#sit_tab .tab_con > li.sit_overlay_show) {overflow:hidden}
}

/* 2026-09-29 상품 카드(#sit_ov_wrap) 여백 네 방향 같게 + 가격 표 줄 높이 */
#sit_ov {min-height:0} /* style.css 564행 min-height:355px 때문에 옵션 적은 상품은 오른쪽 칸 아래가 빔 */
#sit_ov_btn::after {display:none} /* style.css 630행 clearfix 가 flex 줄을 하나 더 만들어 페이 버튼 아래 5px 추가됨 */
@media (min-width:601px) {
    /* 판매가격 줄만 아래 여백 15px(style.css 595행)이라 51px·라벨이 값보다 위 → 두 줄 같은 높이·세로 가운데 */
    #sit_ov .sit_info .tr_price th, #sit_ov .sit_info .tr_price td,
    #sit_ov .sit_ov_tbl th, #sit_ov .sit_ov_tbl td {height:36px;padding:6px 0;vertical-align:middle;line-height:normal}
}
@media (max-width:768px) {
    html #container #sit_ov_wrap {padding:10px} /* 위아래(20·12px)를 좌우 10px 에 맞춤 */
    html #sit_title_top {margin-top:0}
}
@media (max-width:600px) {
    #sit_info {margin-top:0} /* 페이 버튼 아래 탭 카드까지 빈 공간 줄임 */
}


/* 2026-09-29 가격 표 1행으로 합침: 가격·배송비 등 "이름 값" 묶음을 한 줄에 나란히, 찜·공유는 오른쪽 끝 */
.sit_ov_tbl td.sit_price_td {flex-wrap:wrap;justify-content:flex-start;column-gap:16px}
.sit_ov_tbl .sit_ov_item {display:inline-flex;align-items:center;white-space:nowrap}
.sit_ov_tbl .sit_ov_lbl {margin-right:6px;color:#666}
.sit_ov_tbl td.sit_price_td #sit_star_sns {margin-left:auto}
/* 2026-09-29 가격 줄 아래 가로줄 2개(표 줄·칸 밑줄)와 그 사이 빈 공간(예전 배송비 줄 자리) 삭제 */
html #sit_ov .sit_info {border-top:0;border-bottom:0;padding-bottom:0} /* 09-29 윗줄도 삭제 */
html #sit_ov .sit_info .tr_price {border-bottom:0}
/* 2026-09-29 가격 줄 글자 키움(이름·배송비 15px, 가격 20px) + 이름·값 글자 밑선 맞춤(모바일에서 가격이 3px 떠 있던 것) */
html #container #sit_ov .sit_ov_tbl td .sit_ov_item {font-size:15px;line-height:normal;align-items:baseline}
html #container #sit_ov .sit_ov_tbl td .sit_ov_item > * {line-height:normal;vertical-align:baseline}
html #container #sit_ov .sit_ov_tbl td #sit_price_view {font-size:20px;line-height:normal;position:static;top:auto}
html #container #sit_ov .sit_ov_tbl td.sit_price_td {align-items:baseline} /* 가격·배송비 묶음끼리 밑선 맞춤 */
html #container #sit_ov .sit_ov_tbl td.sit_price_td #sit_star_sns {align-self:center} /* 찜·공유는 줄 가운데 */
@media (max-width:600px) { html #container #sit_ov .sit_ov_tbl td .sit_ov_item {position:relative;top:2px} } /* 폰: 줄 28px 안에서 글자 묶음(24px)이 위에 붙어 2px 떠 있던 것 가운데로 */
/* 치수 입력칸: 단위만 입력칸 안 오른쪽, 범위·추가가격은 칸 뒤(원래 자리), 칸은 숫자 4자리 길이, '직접입력' 안내 글자 숨김(10-01, 카드 폭 448→330 위해) */
#sit_ov_wrap .dwf_in, #sit_ov_wrap .dwf_txt {flex:0 0 auto;width:78px;padding-right:41px;text-align:right} /* 숫자 3자리+mm 묶음이 칸 가운데: 좌우 여백 약 12px */
#sit_ov_wrap .dwf_txt::placeholder {color:transparent}
#sit_ov_wrap .dwf_row .dwf_unit {flex:0 0 26px;margin-left:-46px;text-align:left;color:#333;font-weight:600;position:relative;pointer-events:none}
#sit_ov_wrap .dwf_row .dwf_range {margin-left:12px;white-space:nowrap}
/* 태블릿(601~1200): 치수 상자 왼쪽 반, 수량·총 금액·버튼 오른쪽 반(10-01). 오른쪽 셋은 flow-root 로 안쪽 clear 가 왼쪽 float 를 넘지 않게, #sit_ov_btn 은 원래 flex 라 margin 만 */
@media (min-width:601px) and (max-width:1200px) {
#sit_ov_wrap #sit_ov {display:flow-root}
#sit_ov_wrap #sit_ov > .dwf_box {float:left;width:calc(50% - 6px);margin-top:0;box-sizing:border-box}
#sit_ov_wrap #sit_ov > #sit_sel_option, #sit_ov_wrap #sit_ov > #sit_tot_price {margin-left:calc(50% + 6px);display:flow-root}
#sit_ov_wrap #sit_ov > #sit_ov_btn {margin-left:calc(50% + 6px);width:auto}
}
/* 배송비·찜·공유: 가격 줄 오른쪽, 배송비는 작게(10-01). 태블릿은 가격 줄을 치수 상자 폭으로 → 찜·공유가 치수 상자 위 */
html #container #sit_ov .sit_ov_tbl td .sit_ov_item.sit_ov_ship {font-size:11px;color:#888;margin-left:auto}
html #container #sit_ov .sit_ov_tbl td.sit_price_td #sit_star_sns {margin-left:0}
@media (min-width:601px) and (max-width:1200px) { #sit_ov_wrap #sit_ov .sit_info .sit_ov_tbl {width:calc(50% - 6px)} #sit_ov_wrap #sit_opt_added > li:first-child {margin-top:0} } /* 수량 박스 윗선 = 치수 상자 윗선 */
#sit_ov_wrap #sit_opt_added .opt_count > label.sound_only {position:static;display:block !important;float:left;width:70px;height:35px;line-height:35px;font-size:15px;font-weight:bold;color:#333;overflow:visible !important} /* 10-01 숨김 라벨 '수량' 보이기, 총 금액(16.3px)보다 약간 작게, 폭 70 = − 버튼이 치수 입력칸 왼쪽 선에 */