/* ============================================================
   모바일 메인 + 분류리스트 상품카드 미관 (market 테마 · mobile 전용)
   : 흰카드 + 라운드 + 그림자 + 정사각(contain) 이미지
   PC 버전(theme_market_elec.css)과 동일한 비주얼 언어를 모바일에 적용
   ============================================================ */
:root{
  --ec-blue:#0071e3;
  --ec-ink:#1c1e21;
  --ec-gray:#767a80;
  --ec-line:#eef0f4;
  --ec-radius:14px;
  --ec-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.05);
}

/* ---------- 메인 섹션 제목 (좌측 파란 세로선) ---------- */
.sct_wrap h2{
  font-size:17px; font-weight:800; color:var(--ec-ink); letter-spacing:-.3px;
  text-align:left; margin:28px 2px 16px; padding-left:12px;
  border-left:4px solid var(--ec-blue); line-height:1.3;
}
.sct_wrap h2 a{ color:var(--ec-ink); }
.sct_wrap h2:after{ display:none !important; }

/* ============================================================
   갤러리(2단) 상품카드 — 분류리스트 slt_10
   ============================================================ */
.slt_10 .sct_li{ padding:0 6px; margin-bottom:14px; }
.slt_10 .sct_li .li_wr{
  background:#fff;
  border:1px solid var(--ec-line);
  border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.slt_10 .sct_li:hover .li_wr,
.slt_10 .sct_li:active .li_wr{
  border-color:var(--ec-blue);
  box-shadow:0 10px 26px rgba(0,113,227,.16);
  transform:translateY(-2px);
}
/* 이미지 영역: 흰배경 + 정사각 + contain(잘리지 않음) */
.slt_10 .sct_li .sct_img{
  background:#fff; aspect-ratio:1/1; overflow:hidden;
}
.slt_10 .sct_li .sct_img img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center; display:block;
}
.slt_10 .sct_li .sct_wrap_ct{ padding:8px 8px 10px; }
.slt_10 .sct_li .sct_txt{
  font-size:12.5px; font-weight:600; color:var(--ec-ink); line-height:1.45;
  margin:0 0 4px; text-align:left;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.slt_10 .sct_li .sct_txt a{ color:var(--ec-ink); }
.slt_10 .sct_li .sct_cost{
  font-size:15px; font-weight:800; color:var(--ec-ink); text-align:left; margin:2px 0 2px;
}

/* ============================================================
   메인 슬라이더 — sct_40 (인기상품 / 추천상품)
   ============================================================ */
.sct_40 .sct_li .sct_img{
  background:#fff; aspect-ratio:1/1; overflow:hidden; border-radius:var(--ec-radius);
}
.sct_40 .sct_li .sct_img img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center; display:block;
}
.sct_40 .sct_txt_wr{ padding:8px 4px 10px; }
.sct_40 .sct_txt{
  font-size:12.5px; font-weight:600; line-height:1.45; margin:0 0 3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sct_40 .sct_cost{ font-size:15px; font-weight:800; color:var(--ec-ink); margin:0; }
.sct_40 .sct_rank{ border-radius:8px; }

/* ============================================================
   4단 카드 — sct_10
   ============================================================ */
.sct_10 .sct_li .li_wr{
  background:#fff; border:1px solid var(--ec-line); border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow); overflow:hidden;
}
.sct_10 .sct_li .sct_img{ aspect-ratio:1/1; overflow:hidden; background:#fff; }
.sct_10 .sct_li .sct_img img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; display:block;
}
.sct_10 .sct_li .sct_txt{ font-size:12px; font-weight:600; }
.sct_10 .sct_li .sct_cost{ font-size:14px; font-weight:800; color:var(--ec-ink); }

/* ============================================================
   한 줄 리스트 — slt_20 (가로 나열)
   ============================================================ */
.slt_20 .sct_li .li_wr{
  border:1px solid var(--ec-line); border-radius:var(--ec-radius); background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.04);
  margin-bottom:10px; overflow:hidden;
}
.slt_20 .sct_li .sct_img{ border-radius:8px; overflow:hidden; background:#fff; }
.slt_20 .sct_li .sct_img img{ object-fit:contain; }
.slt_20 .sct_li .sct_txt{ font-size:13px; font-weight:600; }
.slt_20 .sct_li .sct_cost{ font-size:15px; font-weight:800; color:var(--ec-ink); }

/* ============================================================
   모바일 상단 — logo(마트) 아래 8대 분류 가로 배열 (캡슐형, 좌우 스크롤)
   ============================================================ */
#hd_cate_mobile{
  display:flex; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch;
  gap:8px; padding:6px 10px 9px; background:#fff;
  white-space:nowrap; scrollbar-width:none;
}
#hd_cate_mobile::-webkit-scrollbar{ display:none; }
#hd_cate_mobile a{
  flex:0 0 auto; padding:8px 14px; font-size:13px; font-weight:600; color:var(--ec-ink);
  background:#f5f7fa; border:1px solid var(--ec-line); border-radius:20px;
  text-decoration:none; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
#hd_cate_mobile a:active{ background:#eef4ff; color:var(--ec-blue); border-color:var(--ec-blue); }

/* ============================================================
   모바일 상단 — 헤더 배경 그라데이션 (soft blue-white)
   ============================================================ */
#hd_sec{
  background:linear-gradient(180deg,#eaf1fb 0%,#f7faff 55%,#ffffff 100%);
}

/* ============================================================
   모바일 메인 v3 — 홈 인기상품(sct_30) 카드 + 배너 + 푸터 정돈
   ============================================================ */

/* ---------- 페이지 배경: 연회색 위 흰 카드 부각 ---------- */
body{ background:#f2f4f8; }

/* ---------- 메인 배너: 카드형 라운드 + 그림자 ---------- */
#main_bn{
  margin:10px 12px 2px; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
#main_bn .swiper-slide img{ width:100% !important; height:auto; display:block; }

/* ---------- 메인 인기상품 2열 카드 (sct_30) ---------- */
.sct_30 .sct_li{ padding:0 6px; margin-bottom:14px; background:transparent; }
.sct_30 .sct_li .li_wr{
  background:#fff; border:1px solid var(--ec-line); border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sct_30 .sct_li:active .li_wr{
  border-color:var(--ec-blue);
  box-shadow:0 10px 26px rgba(0,113,227,.16);
  transform:translateY(-2px);
}
.sct_30 .sct_li .sct_img{ background:#fff; aspect-ratio:1/1; overflow:hidden; }
.sct_30 .sct_li .sct_img img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center; display:block;
}
.sct_30 .sct_li .sct_wrap_ct{ padding:8px 8px 10px; }
.sct_30 .sct_li .sct_txt{
  font-size:12.5px; font-weight:600; color:var(--ec-ink); line-height:1.45;
  margin:0 0 4px; text-align:left;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sct_30 .sct_li .sct_txt a{ color:var(--ec-ink); }
.sct_30 .sct_li .sct_cost{
  font-size:15px; font-weight:800; color:var(--ec-ink); text-align:left; margin:2px 0;
}
.sct_30 .sct_li .sct_cart_btn{ text-align:right; margin:6px 0 0; }
.sct_30 .sct_li .sct_cart_btn .sct_cart{
  background:#f5f7fa; color:var(--ec-blue); width:34px; height:34px; line-height:32px;
  border-radius:50%; border:1px solid var(--ec-line); font-size:14px; margin:0; padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,.04); text-align:center;
}
.sct_30 .sct_li .sct_cart_btn .sct_cart:active{ background:var(--ec-blue); color:#fff; }

/* ---------- 섹션 타이틀 간격 다듬기 ---------- */
.sct_wrap{ margin:0 12px 26px; }
.sct_wrap h2{ margin:24px 2px 14px; }

/* ---------- 푸터 정돈 ---------- */
#ft{ border-top:0; background:#fff; margin-top:16px; border-radius:16px 16px 0 0; }
#ft_wr{ border-bottom:0; }
#ft_wr .ft_ul{ padding:18px 0 12px; }
#ft_wr .ft_ul li{ margin:0 8px; }
#ft_wr .ft_ul li a{ color:#4a4d55; font-size:13px; font-weight:600; }
.ft_info{ color:#9aa0a8; font-size:12px; line-height:1.9; padding:6px 18px 26px; }
.ft_info div{ padding-top:3px; }


/* ============================================================
   sct_10 분류리스트: 카드 하단 흰배경 제거 (회색 바탕 + 카드 간격)
   ============================================================ */
.sct_10{ background:transparent !important; }
.sct_10 #sct_wrap, .sct_10 ul.sct{ background:transparent !important; }
.sct_10 .sct_li{ background:transparent !important; padding:0 6px !important; margin:0 0 12px !important; }
.sct_10 .sct_li .li_wr{
  background:#fff; border:1px solid var(--ec-line); border-radius:var(--ec-radius);
  box-shadow:var(--ec-shadow); overflow:hidden; padding:8px 8px 12px;
  border-right:1px solid var(--ec-line);
}
.sct_10 .sct_li .sct_txt{ font-size:12.5px; font-weight:600; color:var(--ec-ink); line-height:1.4; margin:6px 0 2px; text-align:left; }
.sct_10 .sct_li .sct_cost{ font-size:14.5px; font-weight:800; color:var(--ec-ink); text-align:left; }
.sct_10 .sct_li .sct_sns{ margin:6px 0 0; text-align:left; }
.sct_10 .sct_li_0{ background:transparent !important; padding:0 6px !important; margin:0 0 12px !important; }
.sct_10 .sct_li_0 .li_wr{ border-right:1px solid var(--ec-line); }


/* ============================================================
   하단 탭 메뉴 (메인 / 분류 / My / 충전 / 출금)
   ============================================================ */
#m_tab{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; background:#fff; border-top:1px solid var(--ec-line);
  box-shadow:0 -2px 12px rgba(28,30,33,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
#m_tab .m_tab_li{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 0 7px; color:#9aa0a6; text-decoration:none; min-height:50px;
}
#m_tab .m_tab_li i{ font-size:20px; line-height:1; margin-bottom:3px; }
#m_tab .m_tab_li span{ font-size:10.5px; font-weight:600; letter-spacing:-.2px; }
#m_tab .m_tab_li.on{ color:var(--ec-blue); }
#m_tab .m_tab_li.on i{ transform:translateY(-1px); }
body{ padding-bottom:58px; }


/* ============================================================
   로그인 팝업 꾸미기 (회원로그인)
   ============================================================ */
#ol_before{
  border-radius:18px; overflow:hidden;
  border:1px solid var(--ec-line);
  box-shadow:0 10px 34px rgba(28,30,33,.14);
}
#ol_before h2{
  font-size:17px; font-weight:800; color:var(--ec-ink);
  background:#fafbfc; border-bottom:1px solid var(--ec-line);
  padding:16px 18px; letter-spacing:-.3px;
}
#ol_before h2 .user_close{
  float:right; border:0; background:none; color:#9aa0a6; font-size:18px;
  width:28px; height:28px; line-height:26px; border-radius:8px; padding:0; margin:-4px -6px 0 0;
}
#ol_before h2 .user_close:active{ background:#f0f2f5; }
#ol_before form{ padding:22px 18px 10px; }
#ol_before .ol_wr{ margin-bottom:4px; }
#ol_before input[type=text], #ol_before input[type=password]{
  width:100%; height:46px; box-sizing:border-box;
  border:1px solid var(--ec-line); border-radius:12px;
  background:#f7f8fa; padding:0 14px; margin-bottom:12px;
  font-size:14px; color:var(--ec-ink); text-indent:0;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
#ol_before input[type=text]::placeholder, #ol_before input[type=password]::placeholder{ color:#b6bcc4; }
#ol_before input[type=text]:focus, #ol_before input[type=password]:focus{
  border-color:var(--ec-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(0,113,227,.10); outline:0;
}
#ol_auto{ display:flex; align-items:center; gap:7px; margin:2px 0 14px; }
#ol_auto input[type=checkbox]{ width:17px; height:17px; accent-color:var(--ec-blue); margin:0; }
#ol_auto label{ font-size:13px; color:#5d636b; cursor:pointer; }
#ol_submit{
  width:100%; height:48px; border:0; border-radius:12px;
  background:var(--ec-blue); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:1px;
  box-shadow:0 5px 14px rgba(0,113,227,.28);
  transition:transform .12s, box-shadow .12s; cursor:pointer;
}
#ol_submit:active{ transform:scale(.97); box-shadow:0 2px 8px rgba(0,113,227,.2); }
#ol_svc{ text-align:center; padding:14px 0 18px; }
#ol_svc a{ font-size:13px; color:#8a9099; padding:0 14px; margin-top:0; }
#ol_svc a b{ color:var(--ec-blue); font-weight:700; }
#ol_password_lost{ border-left:1px solid var(--ec-line); }


/* ============================================================
   로그인 페이지 꾸미기
   ============================================================ */
#mb_login.mbskin{
  background:#fff; border:1px solid var(--ec-line); border-radius:20px;
  box-shadow:0 8px 28px rgba(28,30,33,.08);
  margin:16px 12px; padding:26px 18px 22px; text-align:center;
}
#mb_login h1{ font-size:22px; font-weight:800; color:var(--ec-ink); margin:0 0 18px; letter-spacing:-.5px; }
#mb_login #login_frm{ padding:0; }
#mb_login .frm_input{
  width:100%; height:48px; box-sizing:border-box;
  border:1px solid var(--ec-line); border-radius:12px;
  background:#f7f8fa; padding:0 14px; margin:0 0 12px;
  font-size:14px; color:var(--ec-ink); text-indent:0;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
#mb_login .frm_input::placeholder{ color:#b6bcc4; }
#mb_login .frm_input:focus{
  border-color:var(--ec-blue); background:#fff;
  box-shadow:0 0 0 3px rgba(0,113,227,.10); outline:0;
}
#mb_login #login_info{ display:flex; align-items:center; justify-content:center; gap:7px; margin:2px 0 16px !important; }
#mb_login #login_info input[type=checkbox]{ width:17px; height:17px; accent-color:var(--ec-blue); margin:0; }
#mb_login #login_info label{ padding-left:0; font-size:13px; color:#5d636b; }
#mb_login .btn_submit{
  width:100%; height:48px; line-height:48px; border:0; border-radius:12px;
  background:var(--ec-blue); color:#fff; font-size:15px; font-weight:800;
  letter-spacing:1px; box-shadow:0 5px 14px rgba(0,113,227,.28);
  transition:transform .12s; cursor:pointer;
}
#mb_login .btn_submit:active{ transform:scale(.97); }
#mb_login .mb_login_join{ padding:18px 0 0; border-top:1px solid var(--ec-line); margin-top:20px; }
#mb_login .mb_login_join h2{ display:none; }
#mb_login .mb_login_join a{ width:50%; color:#8a9099; font-size:13px; }
#login_password_lost{ border-right:1px solid var(--ec-line); }
#mb_login .mb_login_join a b{ color:var(--ec-blue); }

#mb_login .btn_submit{ background:var(--ec-blue) !important; color:#fff !important; box-shadow:0 5px 14px rgba(0,113,227,.28) !important; }