@charset "utf-8";
/* ==========================================================================
   캐디몬 쇼핑몰 반응형 테마 (2026-10-01)
   - 기존 default_shop.css / mobile_shop.css / 스킨 style.css 다음에 불러와서
     PC·모바일 화면을 같은 디자인으로 맞춥니다. (head.sub.php 에서 순서 100 으로 추가)
   - 색상: 주요 버튼 청록 #1ea8c6, 보조 녹색 #6fa51c, 글자 차콜 #23272e
   ========================================================================== */

:root {
    --cm-btn: #1ea8c6;
    --cm-btn-hover: #1795b0;
    --cm-btn2: #6fa51c;
    --cm-btn2-hover: #5f9015;
    --cm-ink: #23272e;
    --cm-muted: #5b5f6b;
    --cm-faint: #8b909a;
    --cm-line: #e6e8ec;
    --cm-out: #c4c7ce;
    --cm-soft: #f5f6f8;
    --cm-img: #eef0f3;
    --cm-tint: #e6f5f8;
    --cm-rate: #007f99;
    --cm-badge: #94c11f;
    --cm-ft: #2b2f36;
    --cm-max: 1200px;
    --cm-gutter: 40px;
    --cm-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
@media (max-width: 1023px) { :root { --cm-gutter: 16px; } }

/* ---------- 기본 ---------- */
html.cm-lock, html.cm-lock body { overflow: hidden; }
body { margin: 0; background: #fff; color: var(--cm-ink); font-family: var(--cm-font); font-size: 14px; line-height: 1.5; letter-spacing: -0.2px; -webkit-text-size-adjust: 100%; word-break: keep-all; }
body a { color: inherit; }
img { max-width: 100%; }
#hd_login_msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-ico { display: block; flex-shrink: 0; }
.sound_only { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
#skip_to_container a { position: absolute; left: -9999px; z-index: 100000; }
#skip_to_container a:focus { left: 16px; top: 8px; padding: 10px 16px; background: var(--cm-ink); color: #fff; border-radius: 8px; }
.cm-inner { box-sizing: border-box; width: 100%; max-width: calc(var(--cm-max) + var(--cm-gutter) * 2); margin: 0 auto; padding: 0 var(--cm-gutter); }
.cm-only-m { display: none !important; }
@media (max-width: 1023px) {
    .cm-only-pc { display: none !important; }
    .cm-only-m { display: inline-flex !important; }
    li.cm-only-m { display: list-item !important; }
}
.cm-empty { padding: 60px 0; text-align: center; color: var(--cm-muted); }

/* ---------- 버튼 (캐디몬 버튼 기준: 양끝 둥근 알약형) ---------- */
.cm-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.cm-btn-sm { height: 36px; padding: 0 16px; font-size: 13px; font-weight: 500; }
.cm-btn-primary { background: var(--cm-btn); color: #fff !important; }
.cm-btn-primary:hover { background: var(--cm-btn-hover); }
.cm-btn-secondary { background: var(--cm-btn2); color: #fff !important; }
.cm-btn-secondary:hover { background: var(--cm-btn2-hover); }
.cm-btn-outline { background: #fff; border-color: var(--cm-out); color: var(--cm-ink) !important; font-weight: 500; }
.cm-btn-outline:hover { border-color: var(--cm-ink); }
.cm-icon-btn { box-sizing: border-box; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; height: 48px; padding: 0 4px; border: 0; background: transparent; color: var(--cm-ink); cursor: pointer; text-decoration: none !important; }
.cm-icon-txt { font-size: 11px; color: var(--cm-muted); line-height: 1.2; margin-top: 2px; }

/* 기존 그누보드/영카트 공통 버튼을 같은 스타일로 */
.btn_submit, input.btn_submit, button.btn_submit, a.btn_submit,
.sit_btn_buy, #sit_btn_buy, .btn_confirm .btn_submit {
    border: 1px solid var(--cm-btn) !important; background: var(--cm-btn) !important; color: #fff !important; border-radius: 999px !important; font-family: inherit; font-weight: 700;
}
.btn_submit:hover, .sit_btn_buy:hover, #sit_btn_buy:hover { background: var(--cm-btn-hover) !important; border-color: var(--cm-btn-hover) !important; }
.sit_btn_cart, #sit_btn_cart { border: 1px solid var(--cm-btn2) !important; background: var(--cm-btn2) !important; color: #fff !important; border-radius: 999px !important; font-weight: 700; }
.sit_btn_cart:hover, #sit_btn_cart:hover { background: var(--cm-btn2-hover) !important; }
a.btn01, button.btn01, .btn_cancel, a.btn_cancel, button.btn_cancel, .btn02, a.btn02, button.btn02,
a.btn_frmline, button.btn_frmline, .btn_address, .cp_btn, .cp_btn1, .mod_options, .mod_btn, .sit_btn_wish, #sit_btn_wish {
    border: 1px solid var(--cm-out) !important; background: #fff !important; color: var(--cm-ink) !important; border-radius: 999px !important; font-family: inherit;
}
a.btn01:hover, button.btn01:hover, .btn_cancel:hover, a.btn_frmline:hover, button.btn_frmline:hover, .mod_options:hover { border-color: var(--cm-ink) !important; }

/* 입력창 */
.frm_input, input.frm_input, select.frm_input, textarea.frm_input, .sit_option select, #sod_frm select, #sod_frm textarea {
    border: 1px solid #cfd2d8 !important; border-radius: 8px !important; font-family: inherit; color: var(--cm-ink);
}
.frm_input:focus, .sit_option select:focus { outline: 2px solid var(--cm-btn); outline-offset: 0; border-color: var(--cm-btn) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--cm-btn); }

/* ==========================================================================
   헤더
   ========================================================================== */
#hd, #side_menu, #aside, #ft, #tnb, #hd_menu, #category_all_bg { display: none; } /* 기존 헤더/사이드/푸터 요소가 남아 있을 경우 숨김 */
.cm-hd { position: relative; z-index: 900; background: #fff; }
.cm-topbar { background: var(--cm-soft); border-bottom: 1px solid var(--cm-line); font-size: 12px; color: var(--cm-muted); }
.cm-topbar .cm-inner { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.cm-topbar a { color: var(--cm-muted); text-decoration: none; }
.cm-topbar a:hover { color: var(--cm-ink); }
.cm-topbar-menu { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.cm-hello { color: var(--cm-ink); font-weight: 500; }

.cm-hd-main .cm-inner { display: flex; align-items: center; gap: 40px; height: 88px; }
.cm-logo { display: flex; flex-shrink: 0; }
.cm-logo img { display: block; height: 44px; width: auto; }
.cm-search { flex: 1 1 auto; display: flex; align-items: center; max-width: 480px; height: 46px; margin: 0 auto; padding: 0 6px 0 20px; border: 1.5px solid var(--cm-ink); border-radius: 999px; background: #fff; box-sizing: border-box; }
.cm-search input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; color: var(--cm-ink); -webkit-appearance: none; }
.cm-search input::-webkit-search-cancel-button { display: none; }
.cm-search-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--cm-ink); cursor: pointer; }
.cm-hd-icons { display: flex; gap: 6px; flex-shrink: 0; }
.cm-count { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--cm-btn); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.cm-gnb { border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line); background: #fff; }
.cm-gnb .cm-inner { display: flex; align-items: center; gap: 28px; }
.cm-gnb-all { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px 0 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--cm-ink); cursor: pointer; }
.cm-gnb-list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.cm-gnb-list a { display: flex; align-items: center; height: 52px; box-sizing: border-box; border-bottom: 3px solid transparent; font-size: 15px; color: var(--cm-muted); text-decoration: none; white-space: nowrap; }
.cm-gnb-list a.cm-gnb-cate { color: var(--cm-ink); font-weight: 700; }
.cm-gnb-list a:hover { color: var(--cm-ink); }
.cm-gnb-list a.is-on { color: var(--cm-ink); font-weight: 700; border-bottom-color: var(--cm-btn); }
.cm-gnb-sep { width: 1px; height: 14px; background: var(--cm-line); }

@media (max-width: 1023px) {
    .cm-topbar { display: none; }
    .cm-hd { position: sticky; top: 0; }
    .cm-hd-main { border-bottom: 1px solid var(--cm-line); }
    .cm-hd-main .cm-inner { position: relative; justify-content: space-between; gap: 0; height: 56px; padding: 0 6px; }
    .cm-logo { position: absolute; left: 50%; transform: translateX(-50%); }
    .cm-logo img { height: 32px; }
    .cm-hd-main #cm_drawer_open { width: 88px; align-items: flex-start; padding-left: 4px; }
    .cm-hd-icons { width: 88px; justify-content: flex-end; gap: 0; }
    .cm-search { display: none; position: absolute; left: 12px; right: 12px; top: 64px; max-width: none; z-index: 5; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
    .cm-search.is-open { display: flex; }
    .cm-count { top: 4px; right: 0; }
    .cm-gnb { border-top: 0; }
    .cm-gnb .cm-inner { padding: 0; }
    .cm-gnb-list { gap: 22px; width: 100%; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .cm-gnb-list::-webkit-scrollbar { display: none; }
    .cm-gnb-list a { height: 44px; font-size: 14px; border-bottom-width: 2px; }
    .cm-gnb-list a.cm-gnb-cate { font-weight: 400; color: var(--cm-muted); }
    .cm-gnb-list a.is-on { color: var(--cm-ink); font-weight: 700; }
}

/* 전체 메뉴(서랍) */
.cm-drawer-bg { position: fixed; inset: 0; z-index: 1990; background: rgba(20,22,26,.45); }
.cm-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 2000; width: 320px; max-width: 86vw; overflow-y: auto; background: #fff; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
.cm-drawer[hidden], .cm-drawer-bg[hidden] { display: none; }
.cm-drawer-hd { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--cm-line); font-size: 16px; }
.cm-drawer-member { padding: 20px; background: var(--cm-tint); }
.cm-drawer-member p { margin: 0 0 12px; font-size: 14px; color: var(--cm-ink); }
.cm-drawer-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-drawer-nav { padding: 8px 20px 32px; }
.cm-drawer-nav h3 { margin: 24px 0 8px; font-size: 12px; font-weight: 700; color: var(--cm-faint); }
.cm-drawer-nav ul { margin: 0; padding: 0; list-style: none; }
.cm-drawer-cate { display: block; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--cm-ink); text-decoration: none; }
.cm-drawer-sub { padding: 0 0 6px 12px !important; }
.cm-drawer-sub a { display: block; padding: 6px 0; font-size: 14px; color: var(--cm-muted); text-decoration: none; }
.cm-drawer-links { display: grid; grid-template-columns: 1fr 1fr; }
.cm-drawer-links a { display: block; padding: 8px 0; font-size: 14px; color: var(--cm-ink); text-decoration: none; }
.cm-drawer-community { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding: 14px 16px; border-radius: 10px; background: var(--cm-soft); color: var(--cm-ink); text-decoration: none; font-size: 14px; font-weight: 500; }

/* ==========================================================================
   레이아웃 (기존 고정폭 1200px 해제)
   ========================================================================== */
#wrapper.cm-wrapper { min-width: 0 !important; width: 100% !important; background: #fff !important; }
#container.cm-container { box-sizing: border-box; float: none !important; width: 100% !important; max-width: calc(var(--cm-max) + var(--cm-gutter) * 2); min-width: 0 !important; min-height: 400px; margin: 0 auto !important; padding: 0 var(--cm-gutter) 80px !important; position: relative; top: auto !important; }
#container.cm-container.fixed { position: relative !important; }
#container .shop-content, #container .is_index { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
.cm-page-title { display: flex; align-items: center; gap: 4px; padding: 40px 0 24px; border-bottom: 2px solid var(--cm-ink); margin-bottom: 24px; }
.cm-page-title h1, #container_title { margin: 0; font-size: 28px; font-weight: 700; color: var(--cm-ink); }
.cm-page-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -10px; color: var(--cm-ink); }
#container .cm-container-sub > #container_title, .cm-container-sub #container_title { padding: 40px 0 24px; border-bottom: 2px solid var(--cm-ink); margin-bottom: 24px; }
#container_title span { font-size: inherit; }
#text_size { display: none; }
@media (max-width: 1023px) {
    #container.cm-container { padding-bottom: 56px !important; }
    .cm-page-title { padding: 14px 0; margin-bottom: 16px; border-bottom-width: 1px; }
    .cm-page-title h1, #container_title { font-size: 18px; }
    .cm-container-sub #container_title { padding: 14px 0; }
}
/* 표는 좁은 화면에서 가로 스크롤 */
.tbl_wrap, .tbl_head01, .tbl_head02, .tbl_head03 { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   푸터
   ========================================================================== */
.cm-ft { margin-top: 40px; background: var(--cm-ft); color: #c3c7ce; font-size: 13px; line-height: 1.8; }
.cm-ft .cm-inner { display: flex; justify-content: space-between; gap: 48px; padding-top: 40px; padding-bottom: 48px; }
.cm-ft a { color: #fff; text-decoration: none; }
.cm-ft-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 0; list-style: none; }
.cm-ft-links .is-strong { font-weight: 700; }
.cm-ft-info { margin: 0 0 14px; }
.cm-ft-info span { display: inline-block; margin-right: 14px; }
.cm-ft-info b { font-weight: 500; color: #e3e5e9; margin-right: 2px; }
.cm-ft-copy { margin: 0; color: #8d929b; }
.cm-ft-cs { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; text-align: right; }
.cm-ft-cs strong { color: #fff; }
.cm-ft-tel { font-size: 24px; font-weight: 700; color: var(--cm-btn) !important; line-height: 1.3; }
.cm-ft-community { margin-top: 8px; font-size: 13px; text-decoration: underline !important; }
.cm-ft-device { padding: 12px 16px; border-top: 1px solid #3a3f47; text-align: center; }
.cm-ft-device a { color: #c3c7ce; font-size: 12px; }
@media (max-width: 1023px) {
    .cm-ft .cm-inner { flex-direction: column-reverse; gap: 20px; padding-top: 28px; padding-bottom: 32px; font-size: 12px; }
    .cm-ft-cs { align-items: flex-start; text-align: left; }
    .cm-ft-info span { display: block; }
}
.cm-top-btn { position: fixed; right: 16px; bottom: 20px; z-index: 800; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cm-line); border-radius: 50%; background: #fff; color: var(--cm-ink); box-shadow: 0 4px 12px rgba(0,0,0,.1); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s; }
.cm-top-btn.is-show { opacity: 1; visibility: visible; }

/* ==========================================================================
   메인
   ========================================================================== */
.cm-main { padding-top: 28px; }
.cm-intro { display: flex; align-items: center; gap: 40px; padding: 44px 56px; border-radius: 14px; background: var(--cm-tint); }
.cm-intro-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; background: var(--cm-btn); color: #fff; font-size: 38px; font-weight: 700; }
.cm-intro-txt { flex: 1 1 auto; }
.cm-intro-txt h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.35; font-weight: 700; color: var(--cm-ink); }
.cm-intro-txt p { margin: 0; font-size: 16px; color: var(--cm-muted); }
.cm-intro-point strong { color: var(--cm-rate); }
.cm-intro-btns { display: flex; gap: 10px; flex-shrink: 0; }
.cm-main-banner { border-radius: 14px; overflow: hidden; }
.cm-main-banner img { display: block; width: 100%; height: auto; }

.cm-shortcut ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; margin: 40px 0 0; padding: 0; list-style: none; }
.cm-shortcut a { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: var(--cm-ink); text-decoration: none; }
.cm-shortcut-ico { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--cm-soft); color: var(--cm-ink); transition: background .15s; }
.cm-shortcut a:hover .cm-shortcut-ico { background: var(--cm-tint); }

.cm-sec { margin-top: 72px; }
.cm-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cm-sec-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--cm-ink); }

@media (max-width: 1023px) {
    .cm-main { padding-top: 16px; }
    .cm-intro { flex-wrap: wrap; gap: 14px; padding: 22px 20px; border-radius: 12px; }
    .cm-intro-mark { width: 48px; height: 48px; font-size: 21px; }
    .cm-intro-txt { flex: 1 1 calc(100% - 62px); }
    .cm-intro-txt h2 { margin: 0 0 2px; font-size: 18px; }
    .cm-intro-txt p { font-size: 13px; }
    .cm-intro-btns { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .cm-intro-btns .cm-btn { height: 44px; padding: 0 10px; font-size: 14px; }
    .cm-main-banner { border-radius: 12px; }
    .cm-shortcut ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 0; margin-top: 24px; }
    .cm-shortcut a { gap: 6px; font-size: 12px; }
    .cm-shortcut-ico { width: 56px; height: 56px; }
    .cm-shortcut-ico .cm-ico { width: 26px; height: 26px; }
    .cm-sec { margin-top: 40px; }
    .cm-sec-hd { margin-bottom: 16px; }
    .cm-sec-title { font-size: 19px; }
}

/* 상품 카드 */
.cm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.cm-card-link { display: flex; flex-direction: column; gap: 10px; color: var(--cm-ink); text-decoration: none !important; }
.cm-card-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--cm-img); }
.cm-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cm-card-link:hover .cm-card-img img { transform: scale(1.03); }
.cm-badge { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 4px; background: var(--cm-badge); color: var(--cm-ink); font-size: 11px; font-weight: 700; }
.cm-soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(35,39,46,.5); color: #fff; font-weight: 700; letter-spacing: 1px; }
.cm-card-body { display: flex; flex-direction: column; gap: 2px; }
.cm-card-name { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-card-basic { font-size: 12px; color: var(--cm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.cm-rate { font-size: 17px; font-weight: 700; color: var(--cm-rate); }
.cm-price { font-size: 17px; font-weight: 700; color: var(--cm-ink); }
.cm-cust { font-size: 12px; color: var(--cm-faint); }
@media (max-width: 1023px) {
    .cm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
}
@media (max-width: 767px) {
    .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
    .cm-card-name { font-size: 14px; }
    .cm-rate, .cm-price { font-size: 16px; }
}

/* ==========================================================================
   상품 목록 (기존 목록 스킨: 분류목록·유형별·검색 결과, PC/모바일 공통)
   ========================================================================== */
#sct_location { position: static !important; display: flex; align-items: center; gap: 6px; margin: -8px 0 16px !important; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--cm-muted); }
#sct_hhtml:empty, #sct_thtml:empty { display: none; }
#sct_location select { border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--cm-ink); }
#sct_ct_1, #sct_ct_2, #sct_ct_3, .sct_ct { border: 0 !important; background: transparent !important; }
#sct_ct_1 ul, #sct_ct_2 ul, #sct_ct_3 ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
#sct_ct_1 li, #sct_ct_2 li, #sct_ct_3 li { float: none !important; width: auto !important; border: 0 !important; }
#sct_ct_1 a, #sct_ct_2 a, #sct_ct_3 a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px !important; border: 1px solid var(--cm-line) !important; border-radius: 999px; background: #fff; color: var(--cm-ink); font-size: 14px; }

#sct_sortlst { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 8px 0; border: 0 !important; border-bottom: 1px solid var(--cm-line) !important; background: transparent !important; } /* 위쪽 굵은 선은 페이지 제목 밑줄과 겹쳐 제거 */
#sct_sort { float: none !important; width: auto !important; flex: 1 1 auto; min-width: 0; }
#ssch_sort, #sct_sort ul { float: none !important; }
#sct_sort ul, #ssch_sort { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
#sct_sort li, #ssch_sort li { float: none !important; height: auto !important; margin: 0 !important; padding: 6px 0 !important; line-height: 1.4 !important; }
#sct_sort li a, #ssch_sort li a { padding: 0 !important; border: 0 !important; color: var(--cm-muted); font-size: 13px; text-decoration: none; }
#sct_sort li a:hover, #ssch_sort li a:hover { color: var(--cm-ink); }
#sct_lst { float: none !important; display: flex; flex: none; margin-left: auto !important; }
#sct_lst button { width: 36px !important; height: 36px !important; background: transparent !important; }

/* 상품 진열을 카드 격자로 (기존 float 레이아웃 해제) */
ul.sct, .sct_wrap ul.sct, #sct ul.sct, #ssch ul.sct { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 0 !important; padding: 0 !important; list-style: none; }
ul.sct::after { display: none !important; }
ul.sct > li.sct_li { float: none !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; clear: none !important; text-align: left; }
ul.sct .sct_img { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--cm-img); }
ul.sct .sct_img a, ul.sct .sct_img .sct_a { display: block; width: 100%; height: 100%; }
ul.sct .sct_img img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
ul.sct .sct_cart { display: none !important; } /* 마우스 올리면 나오던 장바구니 버튼은 상세에서 담도록 숨김 */
ul.sct .sct_ct_wrap { padding-top: 10px; }
ul.sct .sct_txt { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 15px !important; line-height: 1.4; }
ul.sct .sct_txt a { color: var(--cm-ink); text-decoration: none; }
ul.sct .sct_basic { margin: 2px 0 0 !important; font-size: 12px; color: var(--cm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.sct .sct_bottom { min-height: 0; }
ul.sct .sct_cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0 0 !important; font-size: 17px !important; font-weight: 700; color: var(--cm-ink); }
ul.sct .sct_dict, ul.sct .sct_cost del { display: inline !important; font-size: 12px !important; font-weight: 400 !important; color: var(--cm-faint) !important; text-decoration: line-through; }
ul.sct .sct_star { margin: 0 0 4px !important; }
ul.sct .sct_op_btn { right: 0 !important; bottom: auto !important; top: 0; }
ul.sct .sct_id, ul.sct .sit_icon_li { font-size: 11px; }
.sct_noitem { padding: 80px 0; text-align: center; color: var(--cm-muted); }
@media (max-width: 1023px) {
    ul.sct, .sct_wrap ul.sct, #sct ul.sct, #ssch ul.sct { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 12px; }
}
@media (max-width: 767px) {
    ul.sct, .sct_wrap ul.sct, #sct ul.sct, #ssch ul.sct { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
    ul.sct .sct_txt { font-size: 14px !important; }
    ul.sct .sct_cost { font-size: 16px !important; }
    #sct_sortlst { flex-wrap: wrap; }
}

/* 페이지 번호 */
.pg_wrap { margin: 48px 0 0 !important; text-align: center; }
.pg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pg_page, .pg_current, .qa_page { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px !important; height: 36px !important; padding: 0 8px !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; color: var(--cm-muted) !important; font-size: 14px !important; line-height: 1 !important; }
.pg_current { background: var(--cm-btn) !important; color: #fff !important; font-weight: 700; }
.pg_page:hover { background: var(--cm-soft) !important; }

/* ==========================================================================
   상품 상세 (PC 스킨 + 모바일 스킨)
   ========================================================================== */
#sit_ov_from { border: 0 !important; background: transparent !important; }
#sit_ov_wrap { box-sizing: border-box; display: flex; gap: 64px; width: 100% !important; margin: 0 !important; padding: 24px 0 0 !important; border: 0 !important; }
#sit_ov_wrap::after { display: none !important; }
#sit_pvi { float: none !important; flex: 0 0 46%; max-width: 560px; }
#sit_pvi_big { float: none !important; }
#sit_pvi_big a.visible { display: block; border-radius: 12px; overflow: hidden; background: var(--cm-img); }
#sit_pvi_big img { display: block; width: 100% !important; height: auto !important; }
#sit_pvi_thumb { float: none !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px !important; }
#sit_pvi_thumb li { margin: 0 !important; }
#sit_pvi_thumb img { width: 100% !important; height: auto !important; border-radius: 8px; border: 1px solid var(--cm-line) !important; }
#sit_ov { float: none !important; flex: 1 1 auto; width: auto !important; min-height: 0 !important; }
#sit_title { margin: 0 0 6px !important; font-size: 28px !important; font-weight: 700; line-height: 1.35; color: var(--cm-ink); }
#sit_desc { margin: 0 0 14px !important; font-size: 15px !important; color: var(--cm-muted) !important; }
.sit_info { margin: 16px 0 0 !important; border-color: var(--cm-line) !important; }
.sit_ov_tbl th { color: var(--cm-muted); font-size: 14px; width: 100px; }
.sit_ov_tbl td { color: var(--cm-ink); font-size: 14px; }
.sit_ov_tbl td strong { font-size: 26px !important; color: var(--cm-ink); line-height: 1.3 !important; }
.sit_option select { height: 48px !important; border-radius: 8px !important; }
#sit_sel_option li, #sit_opt_added li { border-radius: 8px; background: var(--cm-soft) !important; border: 0 !important; margin-bottom: 8px; }
#sit_tot_price { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 !important; font-size: 15px !important; }
#sit_tot_price strong { font-size: 26px !important; color: var(--cm-ink); }
#sit_ov_btn { display: flex; flex-wrap: wrap; gap: 10px; }
#sit_ov_btn button, #sit_ov_btn a { float: none !important; margin: 0 !important; }
#sit_ov_btn .sit_btn_cart, #sit_ov_btn .sit_btn_buy, #sit_ov_btn #sit_btn_cart, #sit_ov_btn #sit_btn_buy { flex: 1 1 0; width: auto !important; height: 56px !important; font-size: 16px !important; }
#sit_ov_btn .sit_btn_wish, #sit_ov_btn #sit_btn_wish { width: 56px !important; height: 56px !important; display: inline-flex !important; align-items: center; justify-content: center; }
#sit_btn_alm { border-radius: 999px !important; }
#sit_ov_soldout { border-radius: 8px; }
#sit_info { box-sizing: border-box; display: flex !important; width: 100% !important; margin-top: 56px !important; border: 0 !important; }
#sit_tab { flex: 1 1 auto; width: auto !important; min-width: 0; display: block !important; }
#sit_tab .tab_tit { display: flex; padding: 0 !important; border-bottom: 1px solid var(--cm-line) !important; }
#sit_tab .tab_tit li { flex: 1 1 0; float: none !important; }
#sit_tab .tab_tit li button { font-size: 15px !important; font-family: inherit; color: var(--cm-muted); }
#sit_tab .tab_tit li .selected { color: var(--cm-ink) !important; }
#sit_tab .tab_tit li .selected:after { background: var(--cm-ink) !important; }
#sit_tab .tab_con { padding: 32px 0 !important; }
#sit_tab .tab_con img, #sit_inf_explan img { max-width: 100% !important; height: auto !important; }
#sit_buy { width: 300px !important; border-left: 1px solid var(--cm-line) !important; }
#sit_siblings { border: 0 !important; }
@media (max-width: 1023px) {
    #sit_ov_wrap { flex-direction: column; gap: 24px; padding-top: 0 !important; }
    #sit_pvi { flex: none; max-width: none; margin: 0 calc(var(--cm-gutter) * -1); }
    #sit_pvi_big a.visible { border-radius: 0; }
    #sit_pvi_thumb { padding: 0 var(--cm-gutter) !important; }
    #sit_title { font-size: 21px !important; }
    #sit_buy { display: none !important; } /* 좁은 화면에서는 오른쪽 구매 패널 대신 상단 구매 영역 사용 */
    #sit_info { margin-top: 32px !important; }
    #sit_tab .tab_tit li button { font-size: 13px !important; padding: 10px 4px !important; }
}

/* ==========================================================================
   장바구니 (PC/모바일)
   ========================================================================== */
#sod_bsk { margin: 0 0 40px !important; }
#sod_bsk .tbl_head03 thead th, #sod_bsk table thead th { padding: 14px 8px !important; border-top: 0 !important; border-bottom: 1px solid var(--cm-line) !important; background: transparent !important; font-size: 13px !important; color: var(--cm-muted) !important; font-weight: 500; letter-spacing: 0 !important; }
#sod_bsk .tbl_head03 td, #sod_bsk table td { padding: 20px 8px !important; border-left: 0 !important; border-top: 1px solid var(--cm-line) !important; }
#sod_bsk .sod_img img, #sod_bsk_list .sod_img img { border-radius: 8px; }
#sod_bsk .prd_name, #sod_bsk_list .prd_name { font-size: 15px; font-weight: 500; color: var(--cm-ink); }
#sod_bsk #sod_bsk_tot, #sod_bsk_tot { border: 0 !important; margin: 24px 0 !important; border-radius: 12px; overflow: hidden; }
#sod_bsk #sod_bsk_tot ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
#sod_bsk #sod_bsk_tot li { float: none !important; width: auto !important; background: var(--cm-soft) !important; color: var(--cm-ink) !important; border: 0 !important; padding: 20px 24px !important; font-size: 15px !important; }
#sod_bsk #sod_bsk_tot li span { color: var(--cm-muted); }
#sod_bsk #sod_bsk_tot .sod_bsk_cnt { background: var(--cm-tint) !important; }
#sod_bsk #sod_bsk_tot .sod_bsk_cnt strong { font-size: 20px; color: var(--cm-ink); }
#sod_bsk_act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#sod_bsk_act p { flex: 1 1 100%; }
#sod_bsk_act .btn_submit, #sod_bsk_act .btn01 { width: 220px !important; height: 52px !important; line-height: 50px !important; padding: 0 20px !important; font-size: 16px !important; }
@media (max-width: 767px) {
    #sod_bsk #sod_bsk_tot ul { grid-template-columns: 1fr; }
    #sod_bsk #sod_bsk_tot li { padding: 14px 16px !important; font-size: 14px !important; }
    #sod_bsk_act .btn_submit, #sod_bsk_act .btn01 { flex: 1 1 0; width: auto !important; }
}

/* ==========================================================================
   주문서 (PC/모바일)
   ========================================================================== */
/* PC 주문서: 위 = 주문상품 표(전체 폭), 아래 = 왼쪽 입력 / 오른쪽 결제금액 */
#sod_frm.sod_frm_pc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px 40px; align-items: start; }
#sod_frm.sod_frm_pc::after { display: none; }
#sod_frm.sod_frm_pc > .od_prd_list { grid-column: 1 / -1; margin: 0 !important; }
#sod_frm.sod_frm_pc > .sod_left { grid-column: 1; float: none !important; width: auto !important; min-width: 0; margin: 0 !important; display: block; }
#sod_frm.sod_frm_pc > .sod_right { grid-column: 2; float: none !important; width: auto !important; margin: 0 !important; position: sticky; top: 24px; }
#sod_frm .od_prd_list table { width: 100%; }
#sod_frm .od_prd_list thead th { padding: 14px 8px !important; border-top: 0 !important; background: var(--cm-soft) !important; font-size: 13px !important; color: var(--cm-muted) !important; font-weight: 500; letter-spacing: 0 !important; }
#sod_frm .od_prd_list td { padding: 16px 8px !important; border-left: 0 !important; word-break: keep-all !important; }
#sod_frm .od_prd_list .sod_img img { border-radius: 8px; }
#sod_frm .od_prd_list .sod_name { text-align: left; }
#sod_frm .tbl_frm01 td input.frm_input, #sod_frm .tbl_frm01 td select { width: 100% !important; max-width: 420px; height: 44px; box-sizing: border-box; }
#sod_frm .tbl_frm01 td .addr input.frm_input { width: auto !important; }
#sod_frm .od_prd_list .td_prd { display: flex; align-items: center; gap: 16px; text-align: left; padding-left: 16px !important; }
#sod_frm .od_prd_list .td_prd .sod_img { position: static !important; flex: none; width: 80px; margin: 0 !important; }
#sod_frm .od_prd_list .td_prd .sod_img img { width: 80px !important; height: 80px !important; object-fit: cover; }
#sod_frm .od_prd_list .td_prd .sod_name { padding: 0 !important; margin: 0 !important; font-size: 15px; font-weight: 500; }
#sod_frm input#od_zip, #sod_frm input#od_b_zip { width: 140px !important; margin-bottom: 6px; }
#sod_frm .frm_address { margin-bottom: 6px; }
#sod_frm .btn_confirm, #sod_frm #display_pay_button { border: 0 !important; background: transparent !important; padding: 16px 0 0 !important; }
#sod_frm #display_pay_button .btn_submit, #sod_frm #display_pay_button .btn01 { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 52px !important; margin: 0 0 8px !important; box-sizing: border-box; font-size: 16px; }
#sod_frm h2, #sod_frm_orderer h2, #sod_frm_taker h2 { font-size: 18px; color: var(--cm-ink); }
#sod_frm_orderer, #sod_frm_taker, #sod_frm_pay, #sod_frm .od_prd_list { border: 1px solid var(--cm-line) !important; border-radius: 12px; background: #fff !important; overflow: hidden; }
#sod_frm .tbl_frm01 th { color: var(--cm-muted); font-weight: 500; }
#sod_frm .tbl_frm01 td .addr button, #sod_frm .btn_address { border-radius: 999px !important; }
#sod_frm_taker .tbl_frm01 .choice_place { border-radius: 8px; background: var(--cm-tint) !important; border-color: transparent !important; }
#sod_frm #sod_bsk_tot li { background: #fff !important; }
#sod_frm #sod_bsk_tot .sod_bsk_cnt strong, #od_tot_price strong { color: var(--cm-ink) !important; }
#od_tot_price { border-radius: 12px; background: var(--cm-tint) !important; padding: 8px 16px !important; }
#sod_frm_paysel ul, #sod_frm_paysel .pay_way { display: flex; flex-wrap: wrap; gap: 8px; }
#sod_frm_paysel input[type=radio] + label { border-radius: 999px !important; }
#sod_frm #sod_frm_pt_alert { color: var(--cm-rate) !important; }
#display_pay_button .btn_submit, #sod_frm .btn_submit, #show_progress + .btn_submit, #forderform .btn_submit { min-height: 52px; font-size: 16px; }
@media (max-width: 1023px) {
    #sod_frm.sod_frm_pc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #sod_frm.sod_frm_pc > .sod_left, #sod_frm.sod_frm_pc > .sod_right { grid-column: 1; position: static; }
    #sod_frm .tbl_frm01 th, #sod_frm .tbl_frm01 td { display: block; width: auto !important; padding: 6px 12px !important; }
    #sod_frm .tbl_frm01 td .addr input { width: 100% !important; margin-bottom: 6px; }
}

/* ==========================================================================
   회원·게시판 등 그 밖의 화면: 고정폭 해제
   ========================================================================== */
#mb_login, #register_form, .register, #fregisterform, #find_info, .mbskin { max-width: 100% !important; box-sizing: border-box; }
#smb_my, #smb_my_ov, #smb_my_od, #smb_my_wish { max-width: 100%; }
#bo_list, #bo_v, #bo_w { width: auto !important; max-width: 100%; }
#bo_v_con img, #bo_v_img img { max-width: 100% !important; height: auto !important; }

/* 팝업 창 (포인트 내역 등): 사이트 헤더 없이 내용만 */
#wrapper.cm-popup #container.cm-container { max-width: none; min-height: 0; padding: 0 !important; }