@charset "utf-8";

/* Stemply 쇼핑몰 테마 — coupon 서비스와 동일한 디자인 토큰 */
:root {
    --primary-color: #6F4E37;
    --accent-color: #D2691E;
    --bg-color: #FDFBF9;
    --text-color: #3E2723;
    --card-shadow: 0 4px 15px rgba(62, 39, 35, 0.08);
    --card-radius: 15px;
}

body {
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color);
    font-size: 12px;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
    -webkit-box-shadow: 0 0 5px rgba(111, 78, 55, 0.35) !important;
    -moz-box-shadow: 0 0 5px rgba(111, 78, 55, 0.35) !important;
    box-shadow: 0 0 5px rgba(111, 78, 55, 0.35) !important;
    border-color: var(--primary-color) !important;
}

/* ── 상단 ── */
#hd {
    background: #8d7b6f;
    box-shadow: 0 2px 12px rgba(62, 39, 35, 0.06);
}

#tnb {
    background: var(--bg-color);
    border-bottom: 1px solid #e8e0d8;
}

#hd_define li a { color: #8d7b6f; }
#hd_define li.active a { color: var(--primary-color); font-weight: 700; }
#hd_define li { border-right-color: #ddd5cc; }

#hd_qnb li a { color: #8d7b6f; }
#hd_qnb li a:hover { color: var(--primary-color); }
#hd_qnb li { border-right-color: #ddd5cc; }

#hd_wrapper {
    background: var(--primary-color);
    padding-bottom: 10px;
}

.shop-brand {
    display: block;
    text-decoration: none;
    padding: 20px 0 10px;
    line-height: 1.2;
}

.shop-brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #fff;
    letter-spacing: 2px;
    display: block;
}

.shop-brand-tag {
    font-size: 0.75rem;
    color: #8d7b6f;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#logo img { max-height: 50px; }

/* 상단 검색창 감싸는 Form 레이아웃 */
.hd_sch_form {
    width: 100%;
    max-width: 400px; /* ⭐ 여기서 PC 화면 기준 원하시는 검색창 가로크기를 픽셀(px)로 자유롭게 조정하세요! */
    margin: 0 auto;
}

/* 실제 테두리와 입력을 담당하는 필드셋 */
#hd_sch {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: 40px;
    border-radius: 30px;
    border: 1px solid #e8e0d8;
    overflow: hidden;
    background: var(--bg-color);
    margin: 0;
    padding: 0; /* 필드셋 기본 패딩 제거 */
}

/* 인풋 박스 */
#hd_sch #sch_str {
    flex: 1;
    height: 100% !important;
    border: none !important;
    padding: 0 15px !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font-size: 14px;
}

/* 검색 버튼 */
#hd_sch #sch_submit {
    width: 55px;
    height: 100% !important;
    border: none !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hd_sch #sch_str::placeholder { color: #a89888; }

#hd_sch #sch_submit:hover { background: var(--accent-color); }

.hd_login > li.login a {
    color: #fff !important;
    border-color: var(--primary-color) !important;
    border-radius: 20px;
    font-weight: 600;
}

.hd_login > li.login a:hover {
    background: var(--primary-color);
    color: #fff !important;
}

.hd_login > li a { color: var(--text-color); }
.hd_login .count { background: var(--accent-color); }

#hd_menu {
    background: var(--primary-color);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

#hd_menu button#menu_open {
    background: rgba(0, 0, 0, 0.15);
}

#hd_menu button#menu_open:hover { background: rgba(0, 0, 0, 0.25); }

.hd_menu li a {
    color: #fff;
    border-right-color: rgba(255, 255, 255, 0.15);
    transition: background 0.2s;
}

.hd_menu li a:hover { background: rgba(0, 0, 0, 0.12); }

#category .cate_li_1_a { color: var(--primary-color); }
#category { border-color: #e8e0d8; border-radius: 0 0 8px 8px; }

/* ── 메인 히어로 (index) ── */
.stemply-shop-hero {
    background: linear-gradient(rgba(62, 39, 35, 0.82), rgba(62, 39, 35, 0.82)),
        url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=1200') center/cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 48px 20px;
    margin: 0 0 24px;
    border-radius: var(--card-radius);
}

.stemply-shop-hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin: 0 0 8px;
    letter-spacing: 2px;
    font-weight: 700;
}

.stemply-shop-hero p {
    margin: 0;
    opacity: 0.92;
    font-size: 1rem;
}

/* ── 본문 레이아웃 ── */
#wrapper {
    background: var(--bg-color) !important;
    padding-top: 20px;
}

#wrapper_title {
    color: var(--primary-color);
    font-family: 'Playfair Display', serif;
    border-bottom: 2px solid #e8e0d8;
    padding-bottom: 12px;
}

#aside #side_pd,
#gnb {
    border-radius: var(--card-radius);
    border-color: #e8e0d8;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

#side_pd h2,
#gnb .gnb_1dli_on .gnb_1da {
    color: var(--primary-color);
}

#gnb .gnb_1dli_on .gnb_1da:after { background: var(--primary-color); }
.gnb_2da:focus,
.gnb_2da:hover { color: var(--accent-color); }

.sct_wrap > header h2,
.sct_wrap h2 a,
#sev h2 {
    color: var(--primary-color);
    font-family: 'Playfair Display', serif;
}

.sct_wrap > header h2 a:hover { color: var(--accent-color); }

/* 상품 카드 */
.sct_li,
.sct_10 .sct_li,
#sit_ov_wrap {
    border-radius: var(--card-radius);
}

/* ── 버튼 · 링크 (기본 블루 → Stemply) ── */
a.btn02,
.btn_submit,
.btn_frmline:not(.btn_cancel),
#display_pay_button .btn_submit,
#smb_ws_act .btn02,
#sod_ws_act .btn02,
.pg_current,
.status_05,
.sod_frm_mobile .cp_apply {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 8px;
}

.btn_sm_on i,
.qk_con_wr .side_tnb li:hover a,
#sod_frm_pay input[type="radio"]:checked + .lb_icon,
#sev .ev_prd .sev_more,
#smb_my_ov .smb_me a.smb_info,
#smb_private a strong,
#smb_private li:hover i,
.smb_my_od .cost,
#sod_fin_no,
#sod_bsk_tot2 li.sod_fin_tot strong,
#coupon .cou_pri,
.sod_frm_mobile .sod_list .total_price strong,
.new_win .win_ul .selected,
.new_win .win_total {
    color: var(--primary-color) !important;
}

.new_win .win_ul .selected {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

a.btn02:hover,
.btn_submit:hover,
.btn_frmline:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.cp_btn,
.sod_frm_mobile .cp_btn,
.sod_frm_mobile .cp_btn1 {
    color: var(--primary-color) !important;
    border-color: #d4c4b8 !important;
    background: #fff !important;
}

.chk_box input[type="checkbox"]:checked + label span {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#sod_right #sod_bsk_tot,
#sod_bsk_tot2 { border-color: var(--primary-color) !important; }

.sod_opt li:before,
#sod_fin_list .sod_name .sod_opt:before,
.status_04 {
    background: #f5ebe3 !important;
    color: var(--primary-color) !important;
}

/* ── 사이드 퀵메뉴 ── */
#side_menu { border-left-color: #e8e0d8; }

#quick li button:hover,
#quick .btn_sm_on {
    color: var(--primary-color);
}

#top_btn:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* ── 하단 ── */
#ft {
    background: var(--text-color);
    margin-top: 40px;
}

#ft_link a { color: #f5ebe3; }
#ft_link a:hover { color: #fff; }
#ft_company { color: #c9b8a8; }

#ft_copy {
    color: #8d7b6f;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.stemply-ft-tagline {
    display: block;
    margin-top: 8px;
    font-size: 0.85em;
    color: #a89888;
}

/* ── 모바일 쇼핑몰 ── */
#hd#hd,
header#hd {
    background: var(--primary-color) !important;
}

#hd_sch {
    background: var(--primary-color) !important;
}

#hd_sch #sch_str {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
}

#hd_sch #sch_str::placeholder { color: rgba(255, 255, 255, 0.7); }

.menu .menu_wr { background: var(--bg-color); }

.cate a:hover,
.sub_cate a:hover { color: var(--primary-color); }

#container_wr,
#container {
    background: var(--bg-color);
}

.sct_10 .sct_txt a,
.sct_10 .sct_cost { color: var(--text-color); }

.sct_10 .sct_cost strong { color: var(--accent-color); }

.shop-brand--mobile {
    padding: 0;
    text-align: center;
}

.shop-brand--mobile .shop-brand-name {
    font-size: 1.35rem;
    color: #fff;
    letter-spacing: 1px;
}

#hd #logo .shop-brand--mobile { padding: 12px 0; }

.stemply-shop-hero {
    margin: 0 10px 16px;
    padding: 32px 16px;
}

.stemply-shop-hero h2 { font-size: 1.5rem; }

#ft {
    background: var(--text-color) !important;
    color: #c9b8a8;
}

#ft a { color: #f5ebe3; }

#ft_copy .stemply-ft-tagline,
#ft .stemply-ft-tagline {
    display: block;
    margin-top: 6px;
    font-size: 0.8em;
    color: #8d7b6f;
}