@charset "utf-8";

/*
    FLOWER SHOP - Crafto Template Integration
    화환/근조화환/화분 쇼핑몰 스타일
*/

/* 기본 리셋 및 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

:root {
    --flower-primary: #2e8b57;
    --flower-primary-dark: #246b45;
    --flower-dark: #1a1a1a;
    --flower-gray: #555;
    --flower-light: #f5f5f5;
    --celebration-green: #e8f5e9;
    --condolence-gray: #E8E8E8;
    --plant-green: #E8F5E9;
}

/* ===================================
   기본 레이아웃 및 컨테이너
   =================================== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #333;
    font-size: 15px;
    line-height: 1.75;
    background: #fff;
}

a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--flower-primary);
}

#wrapper {
    min-width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 120px; /* 헤더 아래로 콘텐츠 밀어냄 */
}

@media (max-width: 767px) {
    #wrapper {
        padding-top: 80px; /* 모바일 */
    }
}

#container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.shop-content {
    padding: 0;
}

/* 페이지 타이틀 숨김 (Crafto 스타일 사용) */
#wrapper_title {
    display: none;
}

/* 사이드 메뉴 숨김 (Crafto 헤더 사용) */
#side_menu {
    display: none;
}

#aside {
    display: none;
}

/* 글자크기 조정 숨김 */
#text_size {
    display: none;
}

/* ===================================
   공통 컴포넌트
   =================================== */

/* 컨테이너 래퍼 */
.sod_frm_pc,
#sod_bsk,
.sod_list,
.sit_ov_wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 섹션 제목 */
section>h2,
.sod_left>h2,
.sod_right>h2,
#sod_frm_orderer>h2,
#sod_frm_taker>h2,
#sod_frm_addr>h2,
#sod_tot>h2,
#sod_frm_pay>h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--flower-dark);
    margin: 0 0 20px 0;
    padding: 15px 20px;
    background: var(--flower-light);
    border-radius: 6px;
    border-left: 4px solid var(--flower-primary);
}

/* 테이블 스타일 */
.tbl_wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
}

.tbl_wrap th,
.tbl_wrap td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}

.tbl_wrap th {
    background: #f8f9fa;
    font-weight: 500;
    color: var(--flower-dark);
    white-space: nowrap;
}

.tbl_wrap tbody tr:hover {
    background: #fafafa;
}

.tbl_head03 table {
    width: 100%;
    border-collapse: collapse;
}

.tbl_head03 th {
    background: var(--flower-dark);
    color: #fff;
    padding: 15px;
    font-weight: 500;
    text-align: center;
}

.tbl_head03 td {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.tbl_frm01 table {
    width: 100%;
    border-collapse: collapse;
}

.tbl_frm01 th {
    width: 150px;
    padding: 15px;
    background: #f8f9fa;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.tbl_frm01 td {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

/* 폼 요소 */
.frm_input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    max-width: 100%;
}

.frm_input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--flower-primary);
    box-shadow: 0 0 0 3px rgba(232, 180, 184, 0.15);
}

/* 버튼 스타일 */
.btn01,
.btn_frmline {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.btn01:hover,
.btn_frmline:hover {
    border-color: var(--flower-dark);
    color: var(--flower-dark);
}

.btn02,
.btn_submit,
button[type="submit"] {
    display: inline-block;
    padding: 12px 24px;
    background: var(--flower-dark);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-family: inherit;
}

.btn02:hover,
.btn_submit:hover,
button[type="submit"]:hover {
    background: #444;
}

/* ===================================
   주문서 페이지 (orderform)
   =================================== */
#sod_frm {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 주문 상품 목록 */
.od_prd_list {
    margin-bottom: 40px;
}

.od_prd_list table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.od_prd_list thead th {
    background: var(--flower-dark);
    color: #fff;
    padding: 15px;
    font-weight: 500;
}

.od_prd_list tbody td {
    padding: 20px 15px;
    border-bottom: 1px solid #f0f0f0;
}

.od_prd_list tbody tr:last-child td {
    border-bottom: none;
}

#sod_list .td_prd {
    display: flex;
    align-items: center;
    gap: 15px;
}

#sod_list .sod_img {
    flex-shrink: 0;
}

#sod_list .sod_img img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

#sod_list .sod_name {
    flex: 1;
}

#sod_list .sod_name b {
    font-weight: 500;
    color: var(--flower-dark);
    display: block;
    margin-bottom: 5px;
}

#sod_list .sod_opt {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
}

#sod_list .td_num,
#sod_list .td_numbig,
#sod_list .td_dvr {
    text-align: center;
}

#sod_list .td_numbig {
    font-weight: 600;
}

#sod_list .text_right {
    text-align: right !important;
}

/* 쿠폰 버튼 */
.cp_btn {
    margin-top: 10px;
    padding: 5px 12px;
    font-size: 12px;
    background: var(--flower-primary);
    color: #333;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.cp_btn:hover {
    background: var(--flower-primary-dark);
}

/* 주문서 좌우 레이아웃 */
.sod_left,
.sod_right {
    margin-bottom: 30px;
}

/* 주문자/받는분 정보 */
#sod_frm_orderer,
#sod_frm_taker,
#sod_frm_addr {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#sod_frm_orderer .tbl_frm01,
#sod_frm_taker .tbl_frm01,
#sod_frm_addr .tbl_frm01 {
    background: transparent;
}

/* 주소 복사 버튼 */
#sod_frm_addr .btn_address,
.btn_address {
    padding: 8px 15px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 15px;
}

.btn_address:hover {
    background: #e0e0e0;
}

/* 주소 입력 */
#sod_frm_addr .frm_address {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#sod_frm_addr .frm_address input {
    flex: 1;
    min-width: 200px;
}

/* 요청사항 */
.frm_msg {
    margin-top: 15px;
}

.frm_msg input,
.frm_msg select {
    width: 100%;
}

/* 배송지 선택 */
.addr_list {
    margin: 10px 0;
}

.addr_list label {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
}

.addr_list input[type="radio"] {
    margin-right: 5px;
}

/* ===================================
   결제 정보 섹션
   =================================== */
#sod_tot,
#sod_frm_pay {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 결제 금액 요약 */
#sod_bsk_tot,
.sod_bsk_price {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
}

.sod_bsk_price dl {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin: 0;
}

.sod_bsk_price dl:last-child {
    border-bottom: none;
}

.sod_bsk_price dt {
    color: #666;
}

.sod_bsk_price dd {
    font-weight: 600;
    color: var(--flower-dark);
    margin: 0;
}

.sod_bsk_price .tot_price {
    font-size: 24px;
    color: var(--flower-primary);
}

/* 적립 포인트 */
#sod_bsk_save {
    background: #fff8f8;
    padding: 15px 20px;
    border-radius: 6px;
    margin-top: 15px;
}

#sod_bsk_save strong {
    color: var(--flower-primary);
}

/* 결제수단 선택 */
.od_pay_sl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.od_pay_sl label {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    min-width: 150px;
}

.od_pay_sl label:hover {
    border-color: #ddd;
}

.od_pay_sl input[type="radio"] {
    margin-right: 10px;
}

.od_pay_sl input[type="radio"]:checked+span,
.od_pay_sl label:has(input:checked) {
    border-color: var(--flower-primary);
    background: #fff;
}

/* 약관 동의 */
.od_agree {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}

.od_agree label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.od_agree input[type="checkbox"] {
    margin-right: 10px;
}

.od_agree a {
    color: var(--flower-primary);
    margin-left: 10px;
}

/* 주문 버튼 */
#sod_btn {
    text-align: center;
    padding: 30px 0;
}

#sod_btn button {
    padding: 18px 60px;
    font-size: 18px;
    font-weight: 600;
    background: var(--flower-dark);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

#sod_btn button:hover {
    background: #444;
    transform: translateY(-2px);
}

/* ===================================
   장바구니 페이지
   =================================== */
#sod_bsk {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

#sod_bsk_list table {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#sod_bsk_list thead th {
    background: var(--flower-dark);
    color: #fff;
    padding: 15px;
    font-weight: 500;
}

#sod_bsk_list tbody td {
    padding: 20px 15px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

#sod_bsk_list .td_chk {
    text-align: center;
    width: 50px;
}

#sod_bsk_list .td_img {
    width: 100px;
}

#sod_bsk_list .td_img img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

/* 장바구니 버튼 영역 */
#sod_bsk_act {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 15px;
}

#sod_bsk_act .left_btn button,
#sod_bsk_act .right_btn a {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
}

/* 장바구니 합계 */
#sod_bsk_tot {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0;
}

#sod_bsk_tot .tot_wrap {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    padding: 30px;
    border-radius: 8px;
    min-width: 350px;
}

/* ===================================
   상품 상세 페이지
   =================================== */
#sit_ov_from {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

#sit_ov_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* 상품 이미지 */
#sit_pvi {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}

#sit_pvi_big {
    position: relative;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

#sit_pvi_big img {
    width: 100%;
    height: auto;
    display: block;
}

#sit_pvi_big a {
    display: none;
}

#sit_pvi_big a.visible {
    display: block;
}

#sit_pvi_thumb {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

#sit_pvi_thumb li {
    width: 70px;
    height: 70px;
}

#sit_pvi_thumb a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

#sit_pvi_thumb a:hover,
#sit_pvi_thumb a:focus {
    border-color: var(--flower-primary);
}

#sit_pvi_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 상품 정보 */
#sit_ov {
    flex: 1;
    min-width: 300px;
}

#sit_title {
    font-size: 26px;
    font-weight: 600;
    color: var(--flower-dark);
    margin: 0 0 10px 0;
}

#sit_desc {
    font-size: 15px;
    color: #888;
    margin-bottom: 20px;
    line-height: 1.6;
}

#sit_opt_info {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 15px;
}

/* 별점 및 SNS */
#sit_star_sns {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

/* 상품 정보 테이블 */
.sit_info {
    margin-bottom: 25px;
}

.sit_ov_tbl {
    width: 100%;
}

.sit_ov_tbl th {
    padding: 12px 0;
    font-weight: 500;
    color: #888;
    text-align: left;
    width: 100px;
    vertical-align: top;
}

.sit_ov_tbl td {
    padding: 12px 0;
    color: var(--flower-dark);
}

.sit_ov_tbl .tr_price td strong {
    font-size: 28px;
    font-weight: 700;
    color: var(--flower-primary);
}

/* 옵션 선택 */
.sit_option {
    margin-bottom: 20px;
}

.sit_option h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--flower-dark);
    margin: 0 0 10px 0;
}

.sit_option select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* 선택된 옵션 */
#sit_sel_option h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

#sit_opt_added {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}

#sit_opt_added .sit_opt_list {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sit_opt_subj {
    font-size: 14px;
    color: var(--flower-dark);
    flex: 1;
}

.opt_count {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sit_qty_minus,
.sit_qty_plus {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num_input {
    width: 50px !important;
    text-align: center;
    padding: 8px !important;
}

.sit_opt_prc {
    font-weight: 600;
    color: var(--flower-dark);
    min-width: 80px;
    text-align: right;
}

.btn_del {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.btn_del:hover {
    color: #333;
}

/* 총 구매액 */
#sit_tot_price {
    background: var(--flower-dark);
    color: #fff;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
}

#sit_tot_price strong {
    font-size: 24px;
    margin-left: 10px;
}

/* 품절 안내 */
#sit_ov_soldout {
    background: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    margin: 20px 0;
}

/* 구매 버튼 */
#sit_ov_btn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#sit_ov_btn button,
#sit_ov_btn a {
    flex: 1;
    min-width: 120px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sit_btn_cart {
    background: #f0f0f0;
    color: var(--flower-dark);
    border: none;
}

.sit_btn_cart:hover {
    background: #e0e0e0;
}

.sit_btn_buy {
    background: var(--flower-dark);
    color: #fff;
    border: none;
}

.sit_btn_buy:hover {
    background: #444;
}

.sit_btn_wish {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    flex: 0 0 50px;
    min-width: 50px;
}

.sit_btn_wish:hover {
    border-color: var(--flower-primary);
    color: var(--flower-primary);
}

/* 다른 상품 보기 */
#sit_siblings {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#sit_siblings a {
    display: inline-flex;
    align-items: center;
    color: #888;
    font-size: 14px;
}

#sit_siblings a:hover {
    color: var(--flower-dark);
}

/* ===================================
   상품 리스트 (카테고리)
   =================================== */
.sct_wrap {
    padding: 60px 0;
}

.sct_wrap header {
    text-align: center;
    margin-bottom: 40px;
}

.sct_wrap header h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--flower-dark);
    margin: 0;
}

.sct {
    margin: 0 auto;
    padding: 0 30px;
    max-width: 1200px;
}

.sct ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.sct li {
    padding: 15px;
    box-sizing: border-box;
}

.sct .sct_li {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.sct .sct_li:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.sct .sct_img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #f5f5f5;
}

.sct .sct_img img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.sct .sct_li:hover .sct_img img {
    transform: scale(1.05);
}

.sct .sct_icon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.sct .sct_txt {
    font-size: 16px;
    font-weight: 500;
    color: var(--flower-dark);
    margin-bottom: 8px;
}

.sct .sct_basic {
    font-size: 13px;
    color: var(--flower-gray);
    margin-bottom: 8px;
}

.sct .sct_cost {
    font-size: 16px;
    font-weight: 600;
    color: var(--flower-dark);
}

.sct .sct_cost del {
    color: #aaa;
    font-weight: 400;
    font-size: 14px;
    margin-right: 5px;
}

.sct_10 li,
.sct_20 li,
.sct_30 li,
.sct_40 li,
.sct_50 li {
    width: 20%;
}

/* ===================================
   페이지네이션
   =================================== */
.pg_wrap {
    text-align: center;
    padding: 30px 0;
}

.pg_wrap .pg {
    display: inline-flex;
    gap: 5px;
}

.pg a,
.pg strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    color: #666;
    border-radius: 4px;
    font-size: 14px;
}

.pg a:hover {
    border-color: var(--flower-dark);
    color: var(--flower-dark);
}

.pg strong {
    background: var(--flower-dark);
    border-color: var(--flower-dark);
    color: #fff;
}

/* ===================================
   접근성 및 유틸리티
   =================================== */
.sound_only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.frm_info {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.empty_table {
    text-align: center;
    padding: 50px;
    color: #888;
}

/* 체크박스/라디오 스타일 */
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--flower-primary);
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* ===================================
   반응형
   =================================== */
@media (max-width: 1200px) {

    .sct_10 li,
    .sct_20 li,
    .sct_30 li,
    .sct_40 li,
    .sct_50 li {
        width: 25%;
    }
}

@media (max-width: 992px) {
    #sit_ov_wrap {
        flex-direction: column;
    }

    #sit_pvi {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sct_10 li,
    .sct_20 li,
    .sct_30 li,
    .sct_40 li,
    .sct_50 li {
        width: 33.333%;
    }

    .tbl_frm01 th {
        width: 120px;
    }

    .od_pay_sl label {
        min-width: 120px;
    }
}

@media (max-width: 768px) {

    #sod_frm,
    #sod_bsk,
    #sit_ov_from {
        padding: 20px 15px;
    }

    .sct_wrap {
        padding: 40px 0;
    }

    .sct_wrap header h2 {
        font-size: 24px;
    }

    .sct {
        padding: 0 15px;
    }

    .sct_10 li,
    .sct_20 li,
    .sct_30 li,
    .sct_40 li,
    .sct_50 li {
        width: 50%;
    }

    .tbl_frm01 th,
    .tbl_frm01 td {
        display: block;
        width: 100%;
    }

    .tbl_frm01 th {
        background: transparent;
        padding-bottom: 5px;
        border-bottom: none;
    }

    .tbl_frm01 td {
        padding-top: 0;
    }

    #sod_list thead {
        display: none;
    }

    #sod_list tbody td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding: 10px 15px;
        border: none;
    }

    #sod_list tbody tr {
        display: block;
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }

    #sod_list .td_prd {
        flex-direction: column;
        align-items: flex-start;
    }

    section>h2,
    .sod_left>h2,
    .sod_right>h2 {
        font-size: 16px;
        padding: 12px 15px;
    }

    #sit_ov_btn {
        flex-direction: column;
    }

    #sit_ov_btn button,
    #sit_ov_btn a {
        width: 100%;
        min-width: auto;
    }

    .sit_btn_wish {
        flex: 1;
    }

    .od_pay_sl {
        flex-direction: column;
    }

    .od_pay_sl label {
        width: 100%;
    }

    #sod_btn button {
        width: 100%;
        padding: 15px;
    }
}

@media (max-width: 480px) {

    .sct_10 li,
    .sct_20 li,
    .sct_30 li,
    .sct_40 li,
    .sct_50 li {
        width: 100%;
    }

    #sit_title {
        font-size: 22px;
    }

    .sit_ov_tbl .tr_price td strong {
        font-size: 24px;
    }
}

/* ===================================
   상품 상세 페이지 UI 개선 (2026-01-29)
   =================================== */

/* 1. 가격 표시 강화 */
.sit_ov_tbl .tr_price td {
    padding: 20px 0 !important;
}

.sit_ov_tbl .tr_price td strong {
    font-size: 32px !important;
    font-weight: 700;
    color: var(--flower-dark);
    letter-spacing: -0.5px;
}

.sit_ov_tbl .tr_price td .discounted-price {
    font-size: 32px !important;
    color: var(--base-color, #E8B4B8) !important;
}

.sit_ov_tbl .tr_price td .original-price {
    font-size: 18px;
    color: #aaa;
    margin-right: 12px;
}

/* 2. 할인 뱃지 개선 */
.sit_ov_tbl .discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 12px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
    animation: pulse-badge 2s ease-in-out infinite;
}

.sit_ov_tbl .discount-badge::before {
    content: '▼';
    font-size: 10px;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* 3. 상품명 가독성 개선 */
#sit_title {
    font-size: 28px !important;
    font-weight: 600;
    line-height: 1.4;
    color: var(--flower-dark);
    margin-bottom: 12px !important;
    word-break: keep-all;
}

#sit_desc {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

/* 4. 옵션 선택 UI 개선 */
.sit_option h3 {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--flower-dark);
    margin-bottom: 12px !important;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.sit_option select {
    padding: 14px 16px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sit_option select:hover {
    border-color: #aaa !important;
}

.sit_option select:focus {
    border-color: var(--flower-primary) !important;
    box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.1);
    outline: none;
}

/* 5. 선택된 옵션 카드 스타일 */
#sit_opt_added .sit_opt_list {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 18px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s;
}

#sit_opt_added .sit_opt_list:hover {
    border-color: var(--flower-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sit_opt_subj {
    font-size: 15px !important;
    font-weight: 500;
    color: var(--flower-dark);
}

/* 6. 수량 조절 버튼 개선 */
.opt_count {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sit_qty_minus,
.sit_qty_plus {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #ddd !important;
    background: white !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sit_qty_minus:hover,
.sit_qty_plus:hover {
    border-color: var(--flower-primary) !important;
    background: var(--flower-primary) !important;
    color: white;
}

.sit_qty_minus:active,
.sit_qty_plus:active {
    transform: scale(0.95);
}

.num_input {
    width: 60px !important;
    height: 36px !important;
    text-align: center;
    padding: 8px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600;
}

.sit_opt_prc {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--flower-dark);
    min-width: 90px;
    text-align: right;
}

/* 7. 총 구매액 강조 */
#sit_tot_price {
    background: linear-gradient(135deg, var(--flower-dark) 0%, #333 100%);
    color: white;
    padding: 24px !important;
    border-radius: 12px !important;
    text-align: right !important;
    margin: 24px 0 !important;
    font-size: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#sit_tot_price strong {
    font-size: 28px !important;
    margin-left: 12px;
    color: var(--base-color, #E8B4B8);
}

/* 8. 버튼 스타일 개선 */
#sit_ov_btn {
    margin-top: 30px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* 바로구매 버튼 - 가로 100% */
.sit_btn_buy {
    width: 100%;
    display: block;
    padding: 22px 32px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--flower-dark) 0%, #333 100%);
    color: white !important;
    border: none;
    border-radius: 10px !important;
    font-size: 19px !important;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}

.sit_btn_buy:hover {
    background: linear-gradient(135deg, #333 0%, #000 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sit_btn_buy:active {
    transform: translateY(0);
}

/* 9. 포커스 스타일 통일 */
button:focus,
a:focus,
input:focus,
select:focus {
    outline: 3px solid var(--flower-primary);
    outline-offset: 2px;
}

/* 10. 이미지 갤러리 개선 */
#sit_pvi_big {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

#sit_pvi_thumb li {
    width: 80px !important;
    height: 80px !important;
    margin-right: 10px;
}

#sit_pvi_thumb a {
    border-radius: 8px !important;
    border: 3px solid transparent !important;
    transition: all 0.3s;
}

#sit_pvi_thumb a:hover,
#sit_pvi_thumb a:focus {
    border-color: var(--flower-primary) !important;
    box-shadow: 0 4px 12px rgba(46, 139, 87, 0.2);
}

/* 11. 모바일 반응형 개선 */
@media (max-width: 768px) {
    #sit_title {
        font-size: 22px !important;
    }

    .sit_ov_tbl .tr_price td strong,
    .sit_ov_tbl .tr_price td .discounted-price {
        font-size: 26px !important;
    }

    #sit_tot_price {
        padding: 20px !important;
    }

    #sit_tot_price strong {
        font-size: 24px !important;
    }

    .sit_btn_buy {
        width: 100% !important;
        font-size: 18px !important;
        padding: 20px 24px !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    #sit_title {
        font-size: 20px !important;
    }

    .sit_ov_tbl .tr_price td strong,
    .sit_ov_tbl .tr_price td .discounted-price {
        font-size: 24px !important;
    }

    .sit_option select {
        font-size: 14px !important;
    }

    #sit_opt_added .sit_opt_list {
        padding: 15px !important;
    }
}

/* ===================================
   상품 상세 페이지 레이아웃 개선 (2026-01-29)
   - 전체 폰트 크기 감소
   - 오른쪽 영역(#sit_ov) 레이아웃 최적화
   =================================== */

/* 1. 상품 상세 페이지 전용 폰트 크기 설정 */
#sit_ov_from,
#sit_ov_wrap,
#sit_ov {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* 2. 상품명 크기 조정 */
#sit_title {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 10px !important;
}

/* 3. 상품 설명 크기 */
#sit_desc {
    font-size: 14px !important;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 4. 옵션 정보 텍스트 */
#sit_opt_info {
    font-size: 13px !important;
    color: #777;
    margin-bottom: 12px;
}

/* 5. 별점 및 SNS 영역 개선 */
#sit_star_sns {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

#sit_star_sns .sit_star {
    width: 80px !important;
}

#sit_star_sns>span {
    font-size: 13px !important;
    color: #666;
}

#sit_btn_opt {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

#btn_wish {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

#btn_wish:hover {
    border-color: #ff4444;
    color: #ff4444;
    background: #fff5f5;
}

/* 위시리스트 숫자 카운트 */
.btn_wish_num {
    display: none;
}

.btn_sns_share {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn_sns_share:hover {
    border-color: var(--flower-primary);
    background: #f0f8f0;
}

/* 6. 정보 테이블 개선 */
.sit_info {
    margin-bottom: 15px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sit_ov_tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px !important;
}

.sit_ov_tbl th {
    width: 120px;
    padding: 12px 15px !important;
    background: #fafafa !important;
    color: #333 !important;
    font-weight: 600 !important;
    text-align: left !important;
    border-bottom: 1px solid #e5e5e5 !important;
    font-size: 13px !important;
}

.sit_ov_tbl td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    font-size: 14px !important;
}

/* 가격 행 특별 스타일링 */
.sit_ov_tbl .tr_price th {
    font-weight: 700 !important;
}

.sit_ov_tbl .tr_price td {
    font-size: 15px !important;
}

.sit_ov_tbl .tr_price td strong {
    font-size: 26px !important;
    font-weight: 700;
}

.sit_ov_tbl .tr_price td .original-price {
    font-size: 15px !important;
}

.sit_ov_tbl .tr_price td .discounted-price {
    font-size: 26px !important;
}

.sit_ov_tbl .tr_price td .discount-badge {
    font-size: 12px !important;
    padding: 4px 10px;
}

/* 7. 선택옵션/추가옵션 섹션 */
.sit_option {
    margin-bottom: 15px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sit_option h3 {
    font-size: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

.sit_option select {
    width: 100%;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border: 1.5px solid #ddd !important;
}

/* 8. 선택된 옵션 영역 */
#sit_sel_option {
    margin-bottom: 15px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#sit_sel_option h3 {
    font-size: 15px !important;
    font-weight: 600;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
}

#sit_opt_added .sit_opt_list {
    padding: 12px !important;
    margin-bottom: 8px !important;
}

.sit_opt_subj {
    font-size: 14px !important;
}

.opt_name {
    margin-bottom: 10px;
}

.opt_count {
    font-size: 14px !important;
}

.sit_qty_minus,
.sit_qty_plus {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
}

.num_input {
    width: 55px !important;
    height: 34px !important;
    font-size: 14px !important;
}

.sit_opt_prc {
    font-size: 15px !important;
    min-width: 80px;
}

/* 9. 총 구매액 */
#sit_tot_price {
    padding: 20px !important;
    font-size: 16px !important;
    margin: 20px 0 !important;
    text-align: right !important;
}

#sit_tot_price strong {
    font-size: 24px !important;
}

/* 10. 구매 버튼 영역 */
#sit_ov_btn {
    margin-top: 25px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* 바로구매 버튼 - 가로 100% */
.sit_btn_buy {
    width: 100% !important;
    padding: 18px 24px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--flower-dark) 0%, #333 100%);
    color: white !important;
    border: none;
    border-radius: 10px !important;
    font-size: 17px !important;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    display: block;
}

.sit_btn_buy:hover {
    background: linear-gradient(135deg, #333 0%, #000 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sit_btn_buy:active {
    transform: translateY(0);
}

/* 11. 이미지 영역과 정보 영역 간격 조정 */
#sit_ov_wrap {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

#sit_pvi {
    flex: 0 0 500px;
}

#sit_ov {
    flex: 1;
    min-width: 0;
}

/* 12. 모바일 반응형 */
@media (max-width: 992px) {
    #sit_ov_wrap {
        flex-direction: column;
        gap: 30px;
    }

    #sit_pvi {
        flex: none;
        width: 100%;
    }

    #sit_ov {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sit_ov_tbl th {
        width: 100px;
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .sit_ov_tbl td {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .sit_ov_tbl .tr_price td strong,
    .sit_ov_tbl .tr_price td .discounted-price {
        font-size: 22px !important;
    }

    #sit_tot_price strong {
        font-size: 20px !important;
    }

    .sit_btn_buy {
        width: 100% !important;
        font-size: 16px !important;
        padding: 16px 20px !important;
        margin: 0 !important;
    }
}

/* ===================================
   상품 상세정보 탭 영역 (item.info.skin.php)
   =================================== */

/* 탭 섹션 전체 */
#sit_info {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* 탭 버튼 */
#sit_tab .tab_tit {
    display: flex;
    justify-content: center;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
}

#sit_tab .tab_tit li {
    margin: 0;
    padding: 0;
}

#sit_tab .tab_tit li button {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

#sit_tab .tab_tit li button:hover {
    color: var(--flower-dark);
}

#sit_tab .tab_tit li button.selected {
    color: var(--flower-dark);
    border-bottom-color: var(--flower-dark);
}

/* 탭 내용 */
#sit_tab .tab_con {
    padding: 0;
    list-style: none;
    font-size: 13px;
    max-width: 900px;
    margin: 0 auto;
}

#sit_tab .tab_con>li {
    padding: 25px 0;
}

#sit_tab .tab_con h2 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--flower-dark);
}

#sit_tab .tab_con h2.contents_tit {
    font-size: 15px;
    font-weight: 600;
}

#sit_tab .tab_con h2.contents_tit span {
    font-size: 15px;
}

#sit_tab .tab_con h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 25px 0 12px;
    color: var(--flower-dark);
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

/* 상세설명 영역 */
#sit_inf_explan {
    line-height: 1.7;
    color: #333;
    margin: 15px auto;
    font-size: 13px;
    max-width: 900px;
    text-align: center;
}

#sit_inf_explan img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 15px auto;
}

#sit_inf_explan p {
    margin-bottom: 12px;
    line-height: 1.7;
    font-size: 13px;
    text-align: left;
}

/* 상품 정보 고시 테이블 */
#sit_inf_open {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-top: 2px solid var(--flower-dark);
    font-size: 13px;
}

#sit_inf_open th {
    width: 200px;
    padding: 12px 15px;
    background: #fafafa;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    color: var(--flower-dark);
    font-size: 13px;
}

#sit_inf_open td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
    font-size: 13px;
}

/* 배송/교환 정보 */
#sit_dvr,
#sit_ex {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
}

#sit_dvr h3,
#sit_ex h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding: 0;
    border: none;
    color: var(--flower-dark);
}

#sit_dvr p,
#sit_ex p {
    font-size: 13px;
    line-height: 1.7;
}

/* 고정된 구매 박스 (사이드바 형태) */
#sit_buy {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 320px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

#sit_buy .sit_buy_inner {
    padding: 0;
}

/* 사이드 옵션 */
.sit_side_option {
    margin-bottom: 15px;
}

.sit_side_option h3 {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: none !important;
}

.sit_side_option select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

/* 사이드 선택된 옵션 */
.sit_sel_option {
    margin-bottom: 15px;
    padding: 0 !important;
}

.sit_sel_option h3 {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: none !important;
}

.sit_sel_option .sit_opt_added {
    padding: 0;
    list-style: none;
}

.sit_sel_option .sit_opt_added li {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* 총 금액 섹션 */
.sum_section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e0e0e0;
}

.sum_section .sit_tot_price {
    text-align: right;
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
}

.sum_section .sit_tot_price strong {
    font-size: 22px;
    color: var(--flower-dark);
    font-weight: 700;
    margin-left: 8px;
}

/* 사이드 구매 버튼 */
.sit_order_btn {
    display: flex;
    gap: 8px;
}

.sit_order_btn .sit_btn_cart,
.sit_order_btn .sit_btn_buy {
    flex: 1;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    font-weight: 600;
}

.sit_order_btn .sit_btn_cart {
    background: white !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

.sit_order_btn .sit_btn_buy {
    background: var(--flower-dark) !important;
    color: white !important;
}

/* 모바일에서는 고정 박스 숨김 */
@media (max-width: 1400px) {
    #sit_buy {
        display: none;
    }
}

/* 모바일 탭 최적화 */
@media (max-width: 768px) {
    #sit_tab .tab_tit li button {
        padding: 12px 15px;
        font-size: 14px;
    }

    #sit_inf_open th {
        width: 120px;
        font-size: 13px;
        padding: 12px 15px;
    }

    #sit_inf_open td {
        font-size: 13px;
        padding: 12px 15px;
    }
}

/* ===================================
   인덱스 카테고리 아이콘 - 모바일 3열 레이아웃
   =================================== */
@media (max-width: 767.98px) {
    .category-icons {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .category-icons > .col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 20px !important;
    }
    .category-icons .w-110px,
    .category-icons .h-110px {
        width: 65px !important;
        height: 65px !important;
        min-width: 65px !important;
        min-height: 65px !important;
    }
    .category-icons .fs-50 {
        font-size: 26px !important;
    }
    .category-icons .w-60px,
    .category-icons .h-60px {
        width: 32px !important;
        height: 32px !important;
    }
    .category-icons .fs-18 {
        font-size: 12px !important;
    }
    .category-icons .mb-15px {
        margin-bottom: 8px !important;
    }
}