/* =========================================================
   Dailyca hema-shop.css — 영카트5 전 페이지 Hema 룩 스킨
   (기본 스킨 마크업 ID 대상 / 자체 제작)
   ========================================================= */

/* ---------- 공통 컨테이너·타이포 ---------- */
#sct, #sit, #sod_bsk, #sod_frm, #sod_fin, #smb_my, #sod_inquiry, #sod_v,
#sit_use, #sit_qa, #mb_login, #register, #register_form {
  max-width: var(--max); margin-left: auto; margin-right: auto;
  font-family: var(--font);
}
#container { background:#fff; }
#container_title {
  max-width: var(--max); margin: 34px auto 6px; padding: 0 20px;
  font-size: 24px; font-weight: 700; letter-spacing: .04em; border: 0;
}

/* 공통 버튼 */
.btn_submit, .btn01, .btn02, .btn_frmline, a.btn_frmline,
#sit_ov .btn_submit, .sod_ws_act .btn_submit {
  font-family: var(--font); font-weight: 600; font-size: 13.5px;
  border: 0; cursor: pointer; transition: .2s; border-radius: 0;
}
.btn_submit { background: #1d1d1d; color: #fff; }
.btn_submit:hover { background: var(--accent); }
.btn01 { background: #fff; border: 1px solid #ddd; color: #333; }
.btn01:hover { border-color: var(--accent); color: var(--accent); }
.btn02 { background: var(--accent); color: #fff; }
.btn02:hover { background: var(--accent-dark); }

/* 공통 인풋 */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], select, textarea, .frm_input {
  font-family: var(--font); border: 1px solid #ddd; background: #fff;
  padding: 10px 12px; font-size: 13.5px; border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* 페이징 */
.pg_wrap { padding: 34px 0; }
.pg_page, .pg_current {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  min-width: 34px; height: 34px; line-height: 34px; border: 1px solid var(--line);
  background: #fff; margin: 0 2px;
}
.pg_current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg_page:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================
   1) 상품 목록 (/shop/list.php  #sct)
   ========================================================= */
#sct_ct, .sct_wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* 정렬바 */
#sct_sort, #sct_sortov {
  display: flex; gap: 6px; justify-content: flex-end; align-items: center;
  max-width: var(--max); margin: 0 auto 20px; padding: 0 20px;
}
#sct_sort a, #sct_sortov a {
  font-size: 12.5px; font-weight: 600; color: #888; padding: 6px 10px;
  border: 1px solid transparent;
}
#sct_sort a.sct_on, #sct_sort a:hover,
#sct_sortov a.sct_on, #sct_sortov a:hover { color: var(--accent); }

/* 카드 그리드 — 기본 스킨 ul.sct 대응 */
ul.sct, .sct_10, .sct_20, .sct_30 {
  display: grid !important; grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px; list-style: none; margin: 0 auto; padding: 0 20px;
  max-width: var(--max);
}
@media (max-width:1080px){ ul.sct, .sct_10, .sct_20, .sct_30 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px){ ul.sct, .sct_10, .sct_20, .sct_30 { grid-template-columns: repeat(2,1fr); gap: 22px 12px; } }

.sct_li { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.sct_img { position: relative; overflow: hidden; background: #f5f5f5; aspect-ratio: 625/808; }
.sct_img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .5s; }
.sct_li:hover .sct_img img { transform: scale(1.06); }
.sct_txt, .sct_last { padding: 12px 2px 0; }
.sct_txt a { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.sct_txt a:hover { color: var(--accent); }
.sct_cost { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 5px; }
.sct_cost .sct_ori { color:#aaa; font-weight:400; font-size:12px; text-decoration:line-through; margin-left:5px; }
.sct_icon img { display: inline-block; margin-right: 3px; }
.sct_sold_out { background: #1d1d1d; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; }
.sct_basket, .sct_wish { display: none; } /* 카드에선 숨김 — 상세에서 구매 */

/* 카테고리 상단 이미지/설명 */
#sct_hhtml, #sct_thtml { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* =========================================================
   2) 상품 상세 (/shop/item.php  #sit)
   ========================================================= */
#sit { padding: 0 20px; }
#sit_ov_wrap {
  display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: 48px; align-items: start; margin-bottom: 60px;
}
@media (max-width:900px){ #sit_ov_wrap { grid-template-columns: 1fr; gap: 26px; } }

/* 이미지 영역 */
#sit_pvi { width: auto !important; float: none !important; }
#sit_pvi_big { width: 100%; background:#f5f5f5; position: relative; }
/* 기본 스킨 갤러리: 전체 이미지 중 .visible 한 장만 표시 (썸네일 호버로 전환) */
#sit_pvi_big > a.popup_item_image { display: none; }
#sit_pvi_big > a.popup_item_image.visible { display: block; }
#sit_pvi_big a img { width: 100% !important; height: auto !important; display: block; }
#sit_pvi_big > a#popup_item_image { /* 확대 아이콘 */
  display: flex; position: absolute; right: 12px; bottom: 12px;
  width: 40px; height: 40px; background: rgba(255,255,255,.92);
  align-items: center; justify-content: center; font-size: 16px; color: #333;
  border: 1px solid var(--line);
}
#sit_pvi_big > a#popup_item_image:hover { background: var(--accent); color: #fff; }
#sit_pvi_thumb { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#sit_pvi_thumb li { border: 1px solid var(--line); cursor: pointer; }
#sit_pvi_thumb li:hover, #sit_pvi_thumb .selected { border-color: var(--accent); }
#sit_pvi_thumb img { width: 70px; height: 90px; object-fit: cover; display: block; }

/* 요약/구매 영역 */
#sit_ov { width: auto !important; float: none !important; position: sticky; top: 96px; }
#sit_title { font-size: 24px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
#sit_desc { font-size: 13.5px; color: var(--ink2); margin: 0 0 18px; }
#sit_ov_tbl, .sit_ov_tbl { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
#sit_ov_tbl th, .sit_ov_tbl th {
  text-align: left; font-size: 12.5px; font-weight: 600; color: #888;
  padding: 9px 0; width: 110px; border: 0;
}
#sit_ov_tbl td, .sit_ov_tbl td { font-size: 13.5px; padding: 9px 0; border: 0; }
#sit_tot_price { font-size: 20px; font-weight: 800; color: var(--ink); padding: 16px 0; border-top: 1px solid var(--ink); margin-top: 8px; }
#sit_opt_added li { font-size: 12.5px; background: #faf7f5; padding: 8px 10px; margin-top: 6px; display:flex; justify-content:space-between; align-items:center; }

/* 구매 버튼 묶음 */
#sit_ov_btn { display: flex; gap: 8px; margin-top: 14px; }
#sit_ov_btn .btn_submit { flex: 1; height: 50px; font-size: 14px; }
#sit_ov_btn #sit_btn_buy { background: var(--accent); }
#sit_ov_btn #sit_btn_buy:hover { background: var(--accent-dark); }
#sit_ov_btn .btn01, #sit_ov_btn button[type=submit] { height: 50px; }
#sit_btn_wish, #sit_btn_compare { width: 50px; border: 1px solid #ddd; background: #fff; }

/* 상세 앵커 탭 */
#sit .anchor, ul.anchor {
  display: flex; justify-content: center; gap: 0; list-style: none;
  margin: 40px 0 0; padding: 0; border-bottom: 1px solid var(--line);
  position: sticky; top: 72px; background: #fff; z-index: 50;
}
#sit .anchor li a, ul.anchor li a {
  display: block; padding: 15px 24px; font-size: 13.5px; font-weight: 600; color: #888;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#sit .anchor li a:hover, #sit .anchor .anchor_on a { color: var(--ink); border-bottom-color: var(--ink); }

/* 상세설명/정보/후기/문의 섹션 */
#sit_inf, #sit_desc_ct, #sit_use, #sit_qa, #sit_dvr, #sit_ex { padding: 44px 0; }
#sit_inf h2, #sit_use h2, #sit_qa h2, .sit_ct_tit {
  font-size: 18px; font-weight: 700; margin: 0 0 22px; text-align: center; letter-spacing: .04em;
}
#sit_inf_explan { line-height: 1.75; font-size: 14.5px; }
#sit_inf_explan img { margin: 0 auto; }
#sit_tab_info table, .tbl_head01 table, #sit_inf_basic table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.tbl_head01 th, #sit_inf_basic th {
  background: #faf7f5; font-weight: 600; padding: 11px 14px; border: 1px solid var(--line); text-align: left;
}
.tbl_head01 td, #sit_inf_basic td { padding: 11px 14px; border: 1px solid var(--line); }

/* 후기/문의 리스트 */
#sit_use ul, #sit_qa ul { list-style: none; margin: 0; padding: 0; }
.sit_use_li, .sit_qa_li { border-bottom: 1px solid var(--line); padding: 18px 4px; }
#sit_use_wbtn a, #sit_qa_wbtn a { background: #1d1d1d; color: #fff; padding: 10px 22px; font-size: 13px; font-weight: 600; }
#sit_use_wbtn a:hover, #sit_qa_wbtn a:hover { background: var(--accent); }

/* 관련 상품 */
#sit_rel h2 { font-size: 20px; text-align: center; margin: 50px 0 26px; letter-spacing: .06em; }
#sit_rel ul { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px 18px; list-style: none; margin: 0; padding: 0; }
@media (max-width:680px){ #sit_rel ul { grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   3) 장바구니 (/shop/cart.php  #sod_bsk)
   ========================================================= */
#sod_bsk { padding: 0 20px; }
#sod_bsk_list table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#sod_bsk_list thead th {
  background: #faf7f5; font-weight: 600; font-size: 12.5px; padding: 13px 10px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
#sod_bsk_list tbody td { padding: 18px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }

/* 상품 셀: 기본 스킨 absolute 배치 리셋 → 이미지 좌측 + 정보 우측 플렉스 */
#sod_bsk_list .sod_img {
  position: static !important; float: left; margin: 0 16px 0 0 !important;
  width: auto !important; height: auto !important;
}
#sod_bsk_list .sod_img img { width: 76px; height: 96px; object-fit: cover; display: block; }
#sod_bsk_list .sod_name {
  overflow: hidden; text-align: left; margin: 0 !important; padding: 2px 0 0 !important;
  position: static !important; min-height: 96px;
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
}
#sod_bsk_list .sod_name > a { font-weight: 700; font-size: 14px; line-height: 1.4; }
#sod_bsk_list .sod_name a:hover { color: var(--accent); }
#sod_bsk_list .sod_opt { font-size: 12.5px; color: #888; }
#sod_bsk_list .sod_opt li, #sod_bsk_list .sod_opt ul { list-style: none; margin: 0; padding: 0; }
.sod_option_btn button, .mod_options {
  border: 1px solid #ddd; background: #fff; font-size: 11.5px; padding: 4px 10px; cursor: pointer;
}
.sod_option_btn button:hover { border-color: var(--accent); color: var(--accent); }
#sod_bsk_list .frm_input, #sod_bsk_list input[type=text], #sod_bsk_list input[type=number] {
  width: 64px; height: 34px; text-align: center; padding: 0 6px;
}
#sod_bsk_list .sod_qty button, #sod_bsk_list .qty_btn { height: 34px; border: 1px solid #ddd; background: #fff; cursor: pointer; }

/* 선택삭제/비우기 줄 */
#sod_bsk .btn01 { padding: 9px 16px; font-size: 12.5px; }

/* 합계 박스 — ul/li 실마크업 기준, 다크 블록 제거 */
#sod_bsk_tot {
  margin: 26px 0 18px; padding: 20px 26px; background: #faf7f5 !important;
  border: 1px solid var(--line); overflow: hidden;
}
#sod_bsk_tot ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: flex-end; align-items: stretch; gap: 0;
}
#sod_bsk_tot li {
  background: none !important; color: var(--ink) !important;
  width: auto !important; height: auto !important; float: none !important;
  padding: 4px 28px !important; margin: 0 !important; text-align: right;
  border-left: 1px solid #e5ddd6;
}
#sod_bsk_tot li:first-child { border-left: 0; }
#sod_bsk_tot li span {
  display: block; font-size: 12px; font-weight: 600; color: #999 !important; margin-bottom: 6px;
}
#sod_bsk_tot li strong { font-size: 17px; font-weight: 800; color: var(--ink) !important; }
#sod_bsk_tot li.sod_bsk_cnt strong { color: var(--accent) !important; font-size: 20px; }
@media (max-width: 680px) {
  #sod_bsk_tot ul { flex-direction: column; gap: 10px; }
  #sod_bsk_tot li { border-left: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 !important; }
  #sod_bsk_tot li span { margin: 0; }
}

.sod_ws_act, #sod_bsk_act { display: flex; gap: 8px; justify-content: flex-end; }
.sod_ws_act .btn_submit, #sod_bsk_act .btn_submit { min-width: 180px; height: 50px; font-size: 14px; background: var(--accent); }
.sod_ws_act .btn_submit:hover, #sod_bsk_act .btn_submit:hover { background: var(--accent-dark); }

/* =========================================================
   4) 주문서 (/shop/orderform.php  #sod_frm) / 완료(#sod_fin)
   ========================================================= */
#sod_frm { padding: 0 20px; }
#sod_frm h2, #sod_frm .h2_frm {
  font-size: 16px; font-weight: 700; margin: 34px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
#sod_frm .tbl_frm01 table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#sod_frm .tbl_frm01 th {
  width: 140px; text-align: left; background: #faf7f5; padding: 12px 14px;
  font-weight: 600; font-size: 12.5px; border: 1px solid var(--line);
}
#sod_frm .tbl_frm01 td { padding: 10px 14px; border: 1px solid var(--line); }
#sod_frm_pay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#sod_frm_pay li label {
  display: block; border: 1px solid #ddd; padding: 12px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#sod_frm_pay input:checked + label, #sod_frm_pay li label:hover { border-color: var(--accent); color: var(--accent); }
#sod_frm_orderer .frm_input, #sod_frm_taker .frm_input { width: min(360px, 100%); }

#display_sod_frm_paysel, #sod_frm_tot {
  background: #faf7f5; border: 1px solid var(--line); padding: 22px 26px; margin-top: 26px; font-size: 14px;
}
#alrdy { font-size: 20px; font-weight: 800; }
#show_total_price, .sod_fin_price strong { color: var(--accent); font-weight: 800; }
#sod_frm_send .btn_submit { width: 100%; height: 54px; font-size: 15px; background: var(--accent); margin-top: 18px; }
#sod_frm_send .btn_submit:hover { background: var(--accent-dark); }

/* 주문 완료 */
#sod_fin { padding: 30px 20px 0; text-align: center; }
#sod_fin_no { font-size: 15px; margin-bottom: 8px; }
#sod_fin_no strong { color: var(--accent); }
#sod_fin .tbl_head01 { margin-top: 26px; text-align: left; }

/* =========================================================
   5) 마이페이지/주문내역 (#smb_my, #sod_inquiry, #sod_v)
   ========================================================= */
#smb_my, #sod_inquiry, #sod_v { padding: 0 20px; }
#smb_my_ov {
  display: flex; gap: 30px; align-items: center; background: #faf7f5;
  border: 1px solid var(--line); padding: 24px 28px; margin-bottom: 26px;
}
#smb_my_ov strong { font-size: 16px; }
#smb_my_act a, .my_wr_btn a {
  display: inline-block; border: 1px solid #ddd; background: #fff; padding: 9px 16px;
  font-size: 12.5px; font-weight: 600; margin: 2px;
}
#smb_my_act a:hover, .my_wr_btn a:hover { border-color: var(--accent); color: var(--accent); }
#sod_inquiry table, #smb_my table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#sod_inquiry th, #smb_my th {
  background: #faf7f5; padding: 12px 10px; font-size: 12.5px; font-weight: 600;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
#sod_inquiry td, #smb_my td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: center; }

/* =========================================================
   6) 로그인/회원가입 (#mb_login, #register)
   ========================================================= */
#mb_login { max-width: 420px !important; padding: 40px 20px 0; }
#mb_login #login_fs { border: 1px solid var(--line); padding: 34px 30px; }
#mb_login .frm_input { width: 100%; height: 46px; margin-bottom: 10px; }
#mb_login .btn_submit { width: 100%; height: 50px; font-size: 14px; background: var(--accent); }
#mb_login .btn_submit:hover { background: var(--accent-dark); }
#login_info, #login_etc { margin-top: 14px; font-size: 12.5px; }
#login_etc a:hover { color: var(--accent); }
#register_form .tbl_frm01 th { background:#faf7f5; }

/* =========================================================
   7) 박스카트/찜 위젯, 기타
   ========================================================= */
#boxcart, #boxwish { font-family: var(--font); }
#sanchor, .to_top { background: var(--accent) !important; }

/* 기본 스킨 잔여 인라인 폭 무력화 */
#sct_ct .sct_li, #sit_ov_wrap > * { box-sizing: border-box; }

/* 5.6.23 목록 스킨 float 무력화 */
ul.sct > li, .lists-row > li { float: none !important; width: auto !important; }
ul.sct .row-clear { clear: none !important; }
#sct { padding: 0; }

/* ---------- 자체 목록 페이지 (theme shop/list.php) ---------- */
.hm-listhead { padding: 30px 0 24px; }
.hm-listtitle { font-size: 24px; font-weight: 700; margin: 0 0 14px; letter-spacing: .02em; }
.hm-listtitle .up { display:inline-block; width:30px; height:30px; line-height:27px; text-align:center;
  border:1px solid var(--line); margin-right:8px; vertical-align:3px; font-size:18px; }
.hm-listtitle .up:hover { border-color: var(--accent); color: var(--accent); }
.hm-listtitle small { font-size: 13px; color:#999; font-weight:500; margin-left:8px; }
.hm-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.hm-chips a { border:1px solid var(--line); padding:7px 14px; font-size:12.5px; font-weight:600; }
.hm-chips a.on, .hm-chips a:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.hm-sort { display:flex; gap:2px; justify-content:flex-end; border-top:1px solid var(--line); padding-top:12px; }
.hm-sort a { font-size:12.5px; font-weight:600; color:#888; padding:4px 10px; }
.hm-sort a.on, .hm-sort a:hover { color:var(--accent); }