/* =========================
   SRCH FINAL ONLY
========================= */

body.hh-mobile .hh-srch-section {
  padding: 0 12px 20px !important;
}

body.hh-mobile .hh-srch-list {
  width: 100% !important;
  max-width: 100% !important;
}

body.hh-mobile .hh-srch-list table,
body.hh-mobile .hh-srch-list tbody {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.hh-mobile .hh-srch-list tr {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

body.hh-mobile .hh-srch-list td {
  vertical-align: top !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #333 !important;
  word-break: break-word !important;
}

body.hh-mobile .hh-srch-list td:first-child {
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list td:not(:first-child) {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

body.hh-mobile .hh-srch-list img {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list a {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

body.hh-mobile .hh-srch-list font,
body.hh-mobile .hh-srch-list span {
  font-size: 12px !important;
  color: #777 !important;
}

body.hh-mobile .hh-srch-list br {
  display: block !important;
  margin: 4px 0 !important;
  line-height: 1.4 !important;
}

body.hh-mobile .hh-srch-list tr + tr {
  margin-top: 14px !important;
}

/* 검색결과 하단 상품 영역 보호 */
body.hh-mobile .Pdata,
body.hh-mobile .Bdata {
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
}

/* ===== SRCH fine tune ===== */

body.hh-mobile .hh-srch-list tr {
  gap: 10px !important;
  padding: 10px !important;
}

body.hh-mobile .hh-srch-list td:first-child {
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list img {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list a {
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}

body.hh-mobile .hh-srch-list td {
  line-height: 1.5 !important;
}

/* =========================
   MOBILE FINAL OVERRIDE
========================= */

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body.hh-mobile {
  min-width: 320px !important;
  background: #f8fafc !important;
  color: #222;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
  line-height: 1.5;
}

body.hh-mobile *,
body.hh-mobile *::before,
body.hh-mobile *::after {
  box-sizing: border-box !important;
}

body.hh-mobile img {
  max-width: 100% !important;
  height: auto !important;
}

body.hh-mobile > div {
  padding: 0 !important;
}

/* 상단 */
body.hh-mobile .hh-mobile-top {
  padding: 12px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

body.hh-mobile .hh-mobile-search-form {
  margin: 0 !important;
}

body.hh-mobile .hh-mobile-top .m-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

body.hh-mobile .hh-mobile-top .ci {
  flex: 0 0 110px !important;
  display: block !important;
  margin: 0 !important;
}

body.hh-mobile .hh-mobile-top .ci img {
  display: block !important;
  width: 100% !important;
  max-width: 110px !important;
  height: auto !important;
}

body.hh-mobile .hh-mobile-top .m-search {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.hh-mobile .hh-mobile-top .m-search input[type="text"],
body.hh-mobile .hh-mobile-top .m-search .text01 {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  border: 1px solid #cfd4dc !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 15px !important;
  line-height: 42px !important;
}

body.hh-mobile .hh-mobile-top .m-search-btn {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111a87 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 메인 공통 폭 */
body.hh-mobile .Mcon_area,
body.hh-mobile .contents,
body.hh-mobile .content,
body.hh-mobile #content,
body.hh-mobile .container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 12px 20px !important;
  margin: 0 auto !important;
}

/* 상단 아이콘/메뉴 */
body.hh-mobile .Mmenu,
body.hh-mobile .Mypage,
body.hh-mobile .mypage {
  margin: 10px 0 12px !important;
  padding: 0 12px !important;
}

body.hh-mobile .Mmenu ul {
  display: flex !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.hh-mobile .Mmenu ul li {
  float: none !important;
  width: auto !important;
}

body.hh-mobile .Mnavi_bg {
  margin-bottom: 12px !important;
  background: #111a87 !important;
}

body.hh-mobile .Mnavi,
body.hh-mobile .Mnavi_bg {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body.hh-mobile .Mnavi::-webkit-scrollbar,
body.hh-mobile .Mnavi_bg::-webkit-scrollbar {
  display: none !important;
}

body.hh-mobile .Mnavi_rull {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  list-style: none !important;
}

body.hh-mobile .Mnavi_rull li {
  flex: 0 0 auto !important;
  float: none !important;
}

body.hh-mobile .Mnavi_rull li a {
  display: block !important;
  color: #fff !important;
  padding: 11px 10px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* 비주얼 */
body.hh-mobile .hh-main-hero,
body.hh-mobile .main_visual,
body.hh-mobile .visual,
body.hh-mobile .banner {
  margin: 0 0 14px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.hh-mobile .hh-main-hero img,
body.hh-mobile .main_visual img,
body.hh-mobile .visual img,
body.hh-mobile .banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 로그인 */
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}

body.hh-mobile .login_area .form {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body.hh-mobile .login_area .input_box_id,
body.hh-mobile .login_area .input_box_pw {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.hh-mobile .login_area .input_box_id input,
body.hh-mobile .login_area .input_box_pw input {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
}

body.hh-mobile .login_area .btn_login input,
body.hh-mobile .login_area .btn_Nlogin img,
body.hh-mobile .login_area .btn_Nlogin a {
  height: 38px !important;
}

/* 메인 섹션 */
body.hh-mobile .hh-main-section {
  margin: 0 0 18px 0 !important;
  padding: 14px 12px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
}

body.hh-mobile .hh-main-section h2,
body.hh-mobile .hh-main-section h3,
body.hh-mobile .hh-main-section .title,
body.hh-mobile .hh-main-section .subject {
  margin: 0 0 12px 0 !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

/* 카드 공통 */
body.hh-mobile [data-hh-mobile-card],
body.hh-mobile .Pdata,
body.hh-mobile .Bdata,
body.hh-mobile .Newpaper,
body.hh-mobile .Newbook,
body.hh-mobile .Notice {
  width: 100% !important;
  float: none !important;
  display: block !important;
  margin: 0 0 10px 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

body.hh-mobile .Pdata img,
body.hh-mobile .Bdata img,
body.hh-mobile .Newpaper img,
body.hh-mobile .Newbook img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}

body.hh-mobile .Pdata a,
body.hh-mobile .Bdata a,
body.hh-mobile .Newpaper a,
body.hh-mobile .Newbook a {
  text-decoration: none !important;
}

body.hh-mobile .Pdata .title,
body.hh-mobile .Bdata .title,
body.hh-mobile .Newpaper .title,
body.hh-mobile .Newbook .title,
body.hh-mobile .Pdata strong,
body.hh-mobile .Bdata strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
}

body.hh-mobile .Pdata span,
body.hh-mobile .Bdata span,
body.hh-mobile .Newpaper span,
body.hh-mobile .Newbook span {
  font-size: 12px !important;
  color: #6b7280 !important;
}

/* 공지/FAQ */
body.hh-mobile .hh-main-board table,
body.hh-mobile .hh-main-board tbody,
body.hh-mobile .hh-main-board tr,
body.hh-mobile .hh-main-board td {
  display: block !important;
  width: 100% !important;
}

body.hh-mobile .hh-main-board td {
  padding: 0 !important;
  border: 0 !important;
}

body.hh-mobile .hh-main-board ul,
body.hh-mobile .hh-main-board ol {
  margin: 0 !important;
  padding-left: 16px !important;
}

body.hh-mobile .hh-main-board li {
  margin-bottom: 8px !important;
  line-height: 1.45 !important;
}

/* 검색결과 */
body.hh-mobile .hh-srch-section {
  padding: 0 12px 20px !important;
}

body.hh-mobile .hh-srch-list {
  width: 100% !important;
  max-width: 100% !important;
}

body.hh-mobile .hh-srch-list table,
body.hh-mobile .hh-srch-list tbody {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.hh-mobile .hh-srch-list tr {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

body.hh-mobile .hh-srch-list td {
  vertical-align: top !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  word-break: break-word !important;
}

body.hh-mobile .hh-srch-list td:first-child {
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list td:not(:first-child) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.hh-mobile .hh-srch-list img {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

body.hh-mobile .hh-srch-list a {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

body.hh-mobile .hh-srch-list font,
body.hh-mobile .hh-srch-list span {
  font-size: 12px !important;
  color: #777 !important;
}

body.hh-mobile .hh-srch-list br {
  display: block !important;
  margin: 4px 0 !important;
  line-height: 1.4 !important;
}

/* 푸터 */
body.hh-mobile .footer,
body.hh-mobile #footer,
body.hh-mobile .copyright {
  padding: 16px 12px 30px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #6b7280 !important;
  text-align: left !important;
}

body.hh-mobile center {
  display: block !important;
  width: 100% !important;
}

body.hh-mobile a {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* =========================
   MAIN STEP2 POLISH
========================= */

/* 1) 상단 검색창 미세 보정 */
body.hh-mobile .hh-mobile-top {
  padding: 10px 12px !important;
}

body.hh-mobile .hh-mobile-top .ci {
  flex: 0 0 72px !important;
}

body.hh-mobile .hh-mobile-top .ci img {
  max-width: 72px !important;
}

body.hh-mobile .hh-mobile-top .m-search-row {
  gap: 6px !important;
}

body.hh-mobile .hh-mobile-top .m-search input[type="text"],
body.hh-mobile .hh-mobile-top .m-search .text01 {
  height: 36px !important;
  font-size: 14px !important;
  line-height: 36px !important;
  border-radius: 6px !important;
}

body.hh-mobile .hh-mobile-top .m-search-btn {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 36px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  line-height: 36px !important;
}

/* 2) 로그인바 정리 */
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box {
  padding: 10px !important;
}

body.hh-mobile .login_area .form {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto auto !important;
  gap: 6px !important;
  align-items: center !important;
}

body.hh-mobile .login_area .input_box_id,
body.hh-mobile .login_area .input_box_pw {
  min-width: 0 !important;
}

body.hh-mobile .login_area .input_box_id input,
body.hh-mobile .login_area .input_box_pw input {
  height: 34px !important;
  font-size: 13px !important;
}

body.hh-mobile .login_area .btn_login input,
body.hh-mobile .login_area .btn_Nlogin img,
body.hh-mobile .login_area .btn_Nlogin a {
  height: 34px !important;
}

body.hh-mobile .login_area .save,
body.hh-mobile .login_area .idsave,
body.hh-mobile .login_area .chk {
  grid-column: 1 / -1 !important;
  font-size: 12px !important;
  margin-bottom: 2px !important;
}

/* 3) 신규자료 카드 정리 */
body.hh-mobile .Pdata,
body.hh-mobile .Bdata,
body.hh-mobile .Newpaper,
body.hh-mobile .Newbook,
body.hh-mobile .Notice {
  padding: 10px !important;
  margin-bottom: 8px !important;
  border-radius: 10px !important;
}

body.hh-mobile .Pdata a,
body.hh-mobile .Bdata a,
body.hh-mobile .Newpaper a,
body.hh-mobile .Newbook a {
  line-height: 1.4 !important;
}

body.hh-mobile .Pdata .title,
body.hh-mobile .Bdata .title,
body.hh-mobile .Newpaper .title,
body.hh-mobile .Newbook .title,
body.hh-mobile .Pdata strong,
body.hh-mobile .Bdata strong {
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

body.hh-mobile .Pdata span,
body.hh-mobile .Bdata span,
body.hh-mobile .Newpaper span,
body.hh-mobile .Newbook span {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* 태그/키워드 */
body.hh-mobile .Pdata font,
body.hh-mobile .Bdata font,
body.hh-mobile .Newpaper font,
body.hh-mobile .Newbook font {
  font-size: 11px !important;
}

body.hh-mobile .Pdata .tag,
body.hh-mobile .Bdata .tag,
body.hh-mobile .Newpaper .tag,
body.hh-mobile .Newbook .tag,
body.hh-mobile .Pdata a[href*="qt="],
body.hh-mobile .Bdata a[href*="qt="] {
  display: inline-block !important;
  margin: 2px 3px 0 0 !important;
}

/* 4) 주제 탭 정리 */
body.hh-mobile .hh-main-section {
  padding: 12px 10px !important;
  margin-bottom: 14px !important;
}

body.hh-mobile .hh-main-section h2,
body.hh-mobile .hh-main-section h3,
body.hh-mobile .hh-main-section .title,
body.hh-mobile .hh-main-section .subject {
  font-size: 17px !important;
  margin-bottom: 10px !important;
}

body.hh-mobile .hh-main-new ul,
body.hh-mobile .hh-main-new .tab,
body.hh-mobile .hh-main-new .cate,
body.hh-mobile .hh-main-new .category {
  gap: 6px !important;
  margin-bottom: 10px !important;
}

body.hh-mobile .hh-main-new li,
body.hh-mobile .hh-main-new a {
  font-size: 13px !important;
}

/* 5) 중간 배너/하단 여백 */
body.hh-mobile .middle_banner,
body.hh-mobile .sub_banner,
body.hh-mobile .banner_middle,
body.hh-mobile .hh-main-hero {
  margin: 0 0 12px 0 !important;
  border-radius: 10px !important;
}

body.hh-mobile .footer,
body.hh-mobile #footer,
body.hh-mobile .copyright {
  padding-top: 14px !important;
}

/* 6) 전체 스크롤바/오버플로우 미세 보정 */
body.hh-mobile .Mcon_area,
body.hh-mobile .contents,
body.hh-mobile .content,
body.hh-mobile #content,
body.hh-mobile .container {
  overflow-x: hidden !important;
}

/* =========================
   MAIN NEW ITEMS 1-COLUMN CARD FINAL
========================= */

/* 주제별 신규자료 전체 */
body.hh-mobile .hh-main-new,
body.hh-mobile .hh-main-section.hh-main-new {
  padding: 12px 10px 14px !important;
}

/* 탭 라인 */
body.hh-mobile .hh-main-new ul,
body.hh-mobile .hh-main-new .tab,
body.hh-mobile .hh-main-new .cate,
body.hh-mobile .hh-main-new .category {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 6px !important;
  padding: 0 0 8px 0 !important;
  margin: 0 0 12px 0 !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

body.hh-mobile .hh-main-new ul::-webkit-scrollbar,
body.hh-mobile .hh-main-new .tab::-webkit-scrollbar,
body.hh-mobile .hh-main-new .cate::-webkit-scrollbar,
body.hh-mobile .hh-main-new .category::-webkit-scrollbar {
  display: none !important;
}

/* 탭 버튼 */
body.hh-mobile .hh-main-new li,
body.hh-mobile .hh-main-new li a,
body.hh-mobile .hh-main-new .tab a,
body.hh-mobile .hh-main-new .cate a,
body.hh-mobile .hh-main-new .category a {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: auto !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid #d7dbe3 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* 선택 탭 강조 */
body.hh-mobile .hh-main-new li.on a,
body.hh-mobile .hh-main-new li.active a,
body.hh-mobile .hh-main-new a.on,
body.hh-mobile .hh-main-new a.active,
body.hh-mobile .hh-main-new strong a {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

/* 카드 리스트 전체를 무조건 1열 */
body.hh-mobile .hh-main-new .Pdata,
body.hh-mobile .hh-main-new .Bdata,
body.hh-mobile .hh-main-new .Newpaper,
body.hh-mobile .hh-main-new .Newbook,
body.hh-mobile .hh-main-new .Notice,
body.hh-mobile .hh-main-new [data-hh-mobile-card] {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 10px 0 !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
}

/* 카드 안쪽 레이아웃 */
body.hh-mobile .hh-main-new .Pdata *,
body.hh-mobile .hh-main-new .Bdata *,
body.hh-mobile .hh-main-new .Newpaper *,
body.hh-mobile .hh-main-new .Newbook *,
body.hh-mobile .hh-main-new .Notice * {
  max-width: 100% !important;
  word-break: break-word !important;
}

/* 카드 안 이미지 제거형/텍스트형 안정화 */
body.hh-mobile .hh-main-new .Pdata img,
body.hh-mobile .hh-main-new .Bdata img,
body.hh-mobile .hh-main-new .Newpaper img,
body.hh-mobile .hh-main-new .Newbook img,
body.hh-mobile .hh-main-new .Notice img {
  display: none !important;
}

/* 상단 카테고리/경로 */
body.hh-mobile .hh-main-new .Pdata > a:first-child,
body.hh-mobile .hh-main-new .Bdata > a:first-child,
body.hh-mobile .hh-main-new .Newpaper > a:first-child,
body.hh-mobile .hh-main-new .Newbook > a:first-child,
body.hh-mobile .hh-main-new .Notice > a:first-child {
  display: inline-block !important;
  margin: 0 0 6px 0 !important;
  color: #2563eb !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* 제목 */
body.hh-mobile .hh-main-new .Pdata strong,
body.hh-mobile .hh-main-new .Bdata strong,
body.hh-mobile .hh-main-new .Newpaper strong,
body.hh-mobile .hh-main-new .Newbook strong,
body.hh-mobile .hh-main-new .Notice strong,
body.hh-mobile .hh-main-new .Pdata .title,
body.hh-mobile .hh-main-new .Bdata .title,
body.hh-mobile .hh-main-new .Newpaper .title,
body.hh-mobile .hh-main-new .Newbook .title,
body.hh-mobile .hh-main-new .Notice .title {
  display: block !important;
  margin: 0 0 6px 0 !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

/* 설명 */
body.hh-mobile .hh-main-new .Pdata p,
body.hh-mobile .hh-main-new .Bdata p,
body.hh-mobile .hh-main-new .Newpaper p,
body.hh-mobile .hh-main-new .Newbook p,
body.hh-mobile .hh-main-new .Notice p,
body.hh-mobile .hh-main-new .Pdata span,
body.hh-mobile .hh-main-new .Bdata span,
body.hh-mobile .hh-main-new .Newpaper span,
body.hh-mobile .hh-main-new .Newbook span,
body.hh-mobile .hh-main-new .Notice span {
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* 태그 링크를 pill 형태로 */
body.hh-mobile .hh-main-new .Pdata a[href*="qt="],
body.hh-mobile .hh-main-new .Bdata a[href*="qt="],
body.hh-mobile .hh-main-new .Newpaper a[href*="qt="],
body.hh-mobile .hh-main-new .Newbook a[href*="qt="],
body.hh-mobile .hh-main-new .Notice a[href*="qt="] {
  display: inline-block !important;
  margin: 3px 4px 0 0 !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* 카드 내부 줄바꿈 정리 */
body.hh-mobile .hh-main-new .Pdata br,
body.hh-mobile .hh-main-new .Bdata br,
body.hh-mobile .hh-main-new .Newpaper br,
body.hh-mobile .hh-main-new .Newbook br,
body.hh-mobile .hh-main-new .Notice br {
  line-height: 1.2 !important;
}

/* 빈칸/잔여 float 제거 */
body.hh-mobile .hh-main-new table,
body.hh-mobile .hh-main-new tbody,
body.hh-mobile .hh-main-new tr,
body.hh-mobile .hh-main-new td {
  width: 100% !important;
  max-width: 100% !important;
}

body.hh-mobile .hh-main-new td {
  float: none !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 카드 사이 여백 */
body.hh-mobile .hh-main-new .Pdata + .Pdata,
body.hh-mobile .hh-main-new .Bdata + .Bdata,
body.hh-mobile .hh-main-new .Newpaper + .Newpaper,
body.hh-mobile .hh-main-new .Newbook + .Newbook,
body.hh-mobile .hh-main-new .Notice + .Notice {
  margin-top: 10px !important;
}

/* =========================
   LOGIN AREA MOBILE FINAL 2-ROW
========================= */

/* 로그인 전체 박스 */
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* 내부 폭 정리 */
body.hh-mobile .login_area .con,
body.hh-mobile .login_area .form,
body.hh-mobile .login_area form,
body.hh-mobile .login form {
  width: 100% !important;
  max-width: 100% !important;
}

/* 기존 float 제거 */
body.hh-mobile .login_area dt,
body.hh-mobile .login_area dd,
body.hh-mobile .login_area dl,
body.hh-mobile .login_area li,
body.hh-mobile .login_area .input_box_id,
body.hh-mobile .login_area .input_box_pw,
body.hh-mobile .login_area .btn_login,
body.hh-mobile .login_area .btn_Nlogin,
body.hh-mobile .login_area .join,
body.hh-mobile .login_area .save,
body.hh-mobile .login_area .idsave,
body.hh-mobile .login_area .chk {
  float: none !important;
  position: static !important;
}

/* 가입 링크/회원가입 */
body.hh-mobile .login_area .join,
body.hh-mobile .login_area .member_join,
body.hh-mobile .login_area .join_btn,
body.hh-mobile .login_area a[href*="member"],
body.hh-mobile .login_area a[href*="join"] {
  display: inline-block !important;
  margin: 0 0 8px 0 !important;
  font-size: 12px !important;
  color: #2563eb !important;
  text-decoration: none !important;
}

/* 체크영역 1줄 */
body.hh-mobile .login_area .save,
body.hh-mobile .login_area .idsave,
body.hh-mobile .login_area .chk {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

body.hh-mobile .login_area .save input[type="checkbox"],
body.hh-mobile .login_area .idsave input[type="checkbox"],
body.hh-mobile .login_area .chk input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

/* 입력/버튼 2줄이 아니라 "모바일 1행" 배치 */
body.hh-mobile .login_area .form {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto auto !important;
  gap: 6px !important;
  align-items: center !important;
}

body.hh-mobile .login_area .input_box_id,
body.hh-mobile .login_area .input_box_pw {
  min-width: 0 !important;
  width: 100% !important;
}

body.hh-mobile .login_area .input_box_id input,
body.hh-mobile .login_area .input_box_pw input,
body.hh-mobile .login input[type="text"],
body.hh-mobile .login input[type="password"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px !important;
  line-height: 36px !important;
}

/* 로그인 버튼 */
body.hh-mobile .login_area .btn_login,
body.hh-mobile .login_area .btn_login input,
body.hh-mobile .login_area input[type="submit"],
body.hh-mobile .login_area .login_btn {
  width: auto !important;
  min-width: 52px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111a87 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 36px !important;
  text-align: center !important;
}

/* 네이버 로그인 */
body.hh-mobile .login_area .btn_Nlogin,
body.hh-mobile .login_area .btn_Nlogin a,
body.hh-mobile .login_area .btn_Nlogin img {
  display: inline-block !important;
  width: auto !important;
  height: 36px !important;
  min-width: 72px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

/* 설명/보조문구 숨김 또는 축소 */
body.hh-mobile .login_area small,
body.hh-mobile .login_area .desc,
body.hh-mobile .login_area .help {
  font-size: 11px !important;
  color: #9ca3af !important;
}

/* 폭이 좁은 모바일에서는 2행으로 자동 전환 */
@media (max-width: 420px) {
  body.hh-mobile .login_area .form {
    grid-template-columns: 1fr 1fr !important;
  }

  body.hh-mobile .login_area .btn_login,
  body.hh-mobile .login_area .btn_login input,
  body.hh-mobile .login_area .btn_Nlogin,
  body.hh-mobile .login_area .btn_Nlogin a,
  body.hh-mobile .login_area .btn_Nlogin img {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================
   TOP MENU + HERO FINAL
========================= */

/* 1) 상단 파란 메뉴 바 */
body.hh-mobile .Mnavi_bg {
  margin: 0 0 10px 0 !important;
  background: #111a87 !important;
  border-radius: 0 !important;
}

body.hh-mobile .Mnavi,
body.hh-mobile .Mnavi_bg {
  min-height: 40px !important;
}

body.hh-mobile .Mnavi_rull {
  align-items: center !important;
  min-height: 40px !important;
  padding: 0 8px !important;
}

body.hh-mobile .Mnavi_rull li {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

body.hh-mobile .Mnavi_rull li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* 현재/hover 상태 미세 강조 */
body.hh-mobile .Mnavi_rull li.on a,
body.hh-mobile .Mnavi_rull li.active a,
body.hh-mobile .Mnavi_rull li a:hover {
  opacity: 1 !important;
}

/* 2) 메인 비주얼 바깥 여백 */
body.hh-mobile .hh-main-hero,
body.hh-mobile .main_visual,
body.hh-mobile .visual,
body.hh-mobile .banner {
  margin: 0 0 12px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #dbe4f0 !important;
}

/* 3) 메인 배너 높이 통일 */
body.hh-mobile .hh-main-hero img,
body.hh-mobile .main_visual img,
body.hh-mobile .visual img,
body.hh-mobile .banner img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* 4) 배너 안 텍스트 오버레이 정리 */
body.hh-mobile .hh-main-hero .txt,
body.hh-mobile .hh-main-hero .text,
body.hh-mobile .hh-main-hero .subject,
body.hh-mobile .hh-main-hero .title,
body.hh-mobile .main_visual .txt,
body.hh-mobile .main_visual .text,
body.hh-mobile .visual .txt,
body.hh-mobile .visual .text,
body.hh-mobile .banner .txt,
body.hh-mobile .banner .text {
  left: 20px !important;
  right: 20px !important;
  bottom: 24px !important;
  width: auto !important;
  max-width: none !important;
}

/* 5) 배너 큰 제목 */
body.hh-mobile .hh-main-hero h1,
body.hh-mobile .hh-main-hero h2,
body.hh-mobile .hh-main-hero h3,
body.hh-mobile .main_visual h1,
body.hh-mobile .main_visual h2,
body.hh-mobile .main_visual h3,
body.hh-mobile .visual h1,
body.hh-mobile .visual h2,
body.hh-mobile .visual h3,
body.hh-mobile .banner h1,
body.hh-mobile .banner h2,
body.hh-mobile .banner h3,
body.hh-mobile .hh-main-hero .title,
body.hh-mobile .main_visual .title,
body.hh-mobile .visual .title,
body.hh-mobile .banner .title {
  margin: 0 0 8px 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.4px !important;
  color: #fff !important;
}

/* 6) 배너 서브 문구 */
body.hh-mobile .hh-main-hero p,
body.hh-mobile .hh-main-hero .desc,
body.hh-mobile .hh-main-hero .sub,
body.hh-mobile .main_visual p,
body.hh-mobile .main_visual .desc,
body.hh-mobile .visual p,
body.hh-mobile .visual .desc,
body.hh-mobile .banner p,
body.hh-mobile .banner .desc {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.92) !important;
}

/* 7) 모바일 작은 폭에서 배너 높이 조금 축소 */
@media (max-width: 420px) {
  body.hh-mobile .hh-main-hero img,
  body.hh-mobile .main_visual img,
  body.hh-mobile .visual img,
  body.hh-mobile .banner img {
    height: 210px !important;
  }

  body.hh-mobile .hh-main-hero h1,
  body.hh-mobile .hh-main-hero h2,
  body.hh-mobile .hh-main-hero h3,
  body.hh-mobile .main_visual h1,
  body.hh-mobile .main_visual h2,
  body.hh-mobile .main_visual h3,
  body.hh-mobile .visual h1,
  body.hh-mobile .visual h2,
  body.hh-mobile .visual h3,
  body.hh-mobile .banner h1,
  body.hh-mobile .banner h2,
  body.hh-mobile .banner h3,
  body.hh-mobile .hh-main-hero .title,
  body.hh-mobile .main_visual .title,
  body.hh-mobile .visual .title,
  body.hh-mobile .banner .title {
    font-size: 19px !important;
  }
}


/* =========================
   BOTTOM BOARD + FOOTER FINAL
========================= */

/* 1) 하단 공지/FAQ 전체 */
body.hh-mobile .hh-main-board,
body.hh-mobile .Notice,
body.hh-mobile .notice,
body.hh-mobile .faq,
body.hh-mobile .FAQ {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}

/* 2) 공지/FAQ 제목 */
body.hh-mobile .hh-main-board h2,
body.hh-mobile .hh-main-board h3,
body.hh-mobile .hh-main-board .title,
body.hh-mobile .hh-main-board .subject,
body.hh-mobile .Notice .title,
body.hh-mobile .notice .title,
body.hh-mobile .faq .title,
body.hh-mobile .FAQ .title {
  display: block !important;
  margin: 0 0 10px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #111827 !important;
}

/* 3) 테이블 구조 1열화 */
body.hh-mobile .hh-main-board table,
body.hh-mobile .hh-main-board tbody,
body.hh-mobile .hh-main-board tr,
body.hh-mobile .hh-main-board td,
body.hh-mobile .Notice table,
body.hh-mobile .Notice tbody,
body.hh-mobile .Notice tr,
body.hh-mobile .Notice td {
  display: block !important;
  width: 100% !important;
}

body.hh-mobile .hh-main-board td,
body.hh-mobile .Notice td {
  padding: 0 !important;
  border: 0 !important;
}

/* 4) 목록형 정리 */
body.hh-mobile .hh-main-board ul,
body.hh-mobile .hh-main-board ol,
body.hh-mobile .Notice ul,
body.hh-mobile .Notice ol,
body.hh-mobile .faq ul,
body.hh-mobile .FAQ ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.hh-mobile .hh-main-board li,
body.hh-mobile .Notice li,
body.hh-mobile .faq li,
body.hh-mobile .FAQ li {
  display: block !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  line-height: 1.45 !important;
}

body.hh-mobile .hh-main-board li:last-child,
body.hh-mobile .Notice li:last-child,
body.hh-mobile .faq li:last-child,
body.hh-mobile .FAQ li:last-child {
  border-bottom: 0 !important;
}

/* 5) 공지/FAQ 링크 */
body.hh-mobile .hh-main-board a,
body.hh-mobile .Notice a,
body.hh-mobile .faq a,
body.hh-mobile .FAQ a {
  color: #374151 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* 6) 날짜/보조 텍스트 */
body.hh-mobile .hh-main-board .date,
body.hh-mobile .hh-main-board .day,
body.hh-mobile .hh-main-board span,
body.hh-mobile .Notice .date,
body.hh-mobile .Notice .day,
body.hh-mobile .Notice span,
body.hh-mobile .faq span,
body.hh-mobile .FAQ span {
  color: #9ca3af !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* 7) 하단 중간 배너 */
body.hh-mobile .middle_banner,
body.hh-mobile .sub_banner,
body.hh-mobile .banner_middle {
  margin: 14px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.hh-mobile .middle_banner img,
body.hh-mobile .sub_banner img,
body.hh-mobile .banner_middle img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 8) 푸터 전체 */
body.hh-mobile .footer,
body.hh-mobile #footer,
body.hh-mobile .copyright,
body.hh-mobile .foot,
body.hh-mobile .foot_wrap {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 12px 28px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

/* 9) 푸터 링크 */
body.hh-mobile .footer a,
body.hh-mobile #footer a,
body.hh-mobile .copyright a,
body.hh-mobile .foot a {
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* 10) 푸터 메뉴 줄 */
body.hh-mobile .footer ul,
body.hh-mobile #footer ul,
body.hh-mobile .foot ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.hh-mobile .footer li,
body.hh-mobile #footer li,
body.hh-mobile .foot li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 11) 사업자정보/주소 텍스트 */
body.hh-mobile .footer p,
body.hh-mobile #footer p,
body.hh-mobile .copyright p,
body.hh-mobile .foot p,
body.hh-mobile .footer address,
body.hh-mobile #footer address,
body.hh-mobile .foot address {
  margin: 0 0 6px 0 !important;
  font-style: normal !important;
  word-break: keep-all !important;
}

/* 12) 하단 로고/마크 */
body.hh-mobile .footer img,
body.hh-mobile #footer img,
body.hh-mobile .foot img {
  max-width: 90px !important;
  height: auto !important;
  margin-top: 6px !important;
  opacity: .9 !important;
}



/* =========================
   GLOBAL SPACING + CARD FINAL TUNE
========================= */

/* 공통 디자인 토큰 */
body.hh-mobile {
  --hh-gap-xs: 6px;
  --hh-gap-sm: 10px;
  --hh-gap-md: 12px;
  --hh-gap-lg: 14px;
  --hh-gap-xl: 18px;

  --hh-card-radius: 12px;
  --hh-card-border: 1px solid #e5e7eb;
  --hh-card-shadow: 0 1px 3px rgba(0,0,0,.05);
  --hh-card-shadow-hover: 0 2px 8px rgba(0,0,0,.06);
}

/* 페이지 전체 세로 리듬 */
body.hh-mobile .hh-mobile-top,
body.hh-mobile .Mnavi_bg,
body.hh-mobile .hh-main-hero,
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box,
body.hh-mobile .hh-main-section,
body.hh-mobile .hh-main-board,
body.hh-mobile .middle_banner,
body.hh-mobile .sub_banner,
body.hh-mobile .banner_middle,
body.hh-mobile .footer,
body.hh-mobile #footer,
body.hh-mobile .copyright,
body.hh-mobile .foot,
body.hh-mobile .foot_wrap {
  margin-bottom: var(--hh-gap-lg) !important;
}

/* 공통 카드군 */
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box,
body.hh-mobile .hh-main-section,
body.hh-mobile .hh-main-board,
body.hh-mobile .Notice,
body.hh-mobile .notice,
body.hh-mobile .faq,
body.hh-mobile .FAQ,
body.hh-mobile .Pdata,
body.hh-mobile .Bdata,
body.hh-mobile .Newpaper,
body.hh-mobile .Newbook,
body.hh-mobile [data-hh-mobile-card],
body.hh-mobile .hh-srch-list tr {
  border: var(--hh-card-border) !important;
  border-radius: var(--hh-card-radius) !important;
  box-shadow: var(--hh-card-shadow) !important;
  background: #fff !important;
}

/* 카드 hover/tap 시 그림자 과하지 않게 */
body.hh-mobile .Pdata:hover,
body.hh-mobile .Bdata:hover,
body.hh-mobile .Newpaper:hover,
body.hh-mobile .Newbook:hover,
body.hh-mobile [data-hh-mobile-card]:hover,
body.hh-mobile .hh-srch-list tr:hover {
  box-shadow: var(--hh-card-shadow-hover) !important;
}

/* 카드 내부 padding 통일 */
body.hh-mobile .login_area,
body.hh-mobile .login,
body.hh-mobile .login_box,
body.hh-mobile .hh-main-section,
body.hh-mobile .hh-main-board,
body.hh-mobile .Notice,
body.hh-mobile .notice,
body.hh-mobile .faq,
body.hh-mobile .FAQ,
body.hh-mobile .Pdata,
body.hh-mobile .Bdata,
body.hh-mobile .Newpaper,
body.hh-mobile .Newbook,
body.hh-mobile [data-hh-mobile-card] {
  padding: var(--hh-gap-md) !important;
}

/* 작은 카드들은 살짝 촘촘하게 */
body.hh-mobile .hh-srch-list tr {
  padding: var(--hh-gap-sm) !important;
}

/* 제목 여백 통일 */
body.hh-mobile .hh-main-section h2,
body.hh-mobile .hh-main-section h3,
body.hh-mobile .hh-main-section .title,
body.hh-mobile .hh-main-section .subject,
body.hh-mobile .hh-main-board h2,
body.hh-mobile .hh-main-board h3,
body.hh-mobile .hh-main-board .title,
body.hh-mobile .hh-main-board .subject,
body.hh-mobile .Pdata .title,
body.hh-mobile .Bdata .title,
body.hh-mobile .Newpaper .title,
body.hh-mobile .Newbook .title,
body.hh-mobile .Notice .title {
  margin-bottom: var(--hh-gap-sm) !important;
}

/* 카드 간 세로 여백 통일 */
body.hh-mobile .Pdata + .Pdata,
body.hh-mobile .Bdata + .Bdata,
body.hh-mobile .Newpaper + .Newpaper,
body.hh-mobile .Newbook + .Newbook,
body.hh-mobile .Notice + .Notice,
body.hh-mobile [data-hh-mobile-card] + [data-hh-mobile-card] {
  margin-top: var(--hh-gap-sm) !important;
}

/* 리스트/문단 기본 간격 정리 */
body.hh-mobile p,
body.hh-mobile ul,
body.hh-mobile ol,
body.hh-mobile dl,
body.hh-mobile table {
  margin-top: 0 !important;
  margin-bottom: var(--hh-gap-sm) !important;
}

body.hh-mobile li:last-child,
body.hh-mobile p:last-child,
body.hh-mobile ul:last-child,
body.hh-mobile ol:last-child,
body.hh-mobile dl:last-child,
body.hh-mobile table:last-child {
  margin-bottom: 0 !important;
}

/* 섹션 끝 공백 과다 방지 */
body.hh-mobile .hh-main-section > *:last-child,
body.hh-mobile .hh-main-board > *:last-child,
body.hh-mobile .login_area > *:last-child,
body.hh-mobile .login > *:last-child,
body.hh-mobile .login_box > *:last-child,
body.hh-mobile .Pdata > *:last-child,
body.hh-mobile .Bdata > *:last-child,
body.hh-mobile .Newpaper > *:last-child,
body.hh-mobile .Newbook > *:last-child {
  margin-bottom: 0 !important;
}

/* 페이지 하단 마감 */
body.hh-mobile .footer,
body.hh-mobile #footer,
body.hh-mobile .copyright,
body.hh-mobile .foot,
body.hh-mobile .foot_wrap {
  margin-bottom: 0 !important;
  padding-bottom: 28px !important;
}

/* 모바일 작은 폭 미세 조정 */
@media (max-width: 420px) {
  body.hh-mobile {
    --hh-gap-sm: 8px;
    --hh-gap-md: 10px;
    --hh-gap-lg: 12px;
    --hh-gap-xl: 16px;
    --hh-card-radius: 10px;
  }
}

/* =========================
   SIDE MENU FINAL OVERRIDE
   - 상단: 로그인/고객센터 2열, 충전/장바구니/마이 3열
   - 카테고리 탭 3열
   - 세부항목은 텍스트 길이에 맞춰 N개 자동 줄바꿈
   - 기존 .m-side-menu a / .m-side-body a / .m-side-item 충돌 차단
========================= */

.m-side-menu .m-side-top{
    display:block !important;
    margin:0 0 10px 0 !important;
    padding:0 !important;
}

.m-side-menu .m-side-mini-row{
    display:grid !important;
    gap:8px !important;
    margin:0 0 8px 0 !important;
    padding:0 !important;
}

.m-side-menu .m-side-mini-row:nth-child(1){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.m-side-menu .m-side-mini-row:nth-child(2){
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.m-side-menu .m-side-mini-row a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    margin:0 !important;
    padding:7px 4px !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:-0.3px !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

.m-side-menu .m-side-mini-row a:hover,
.m-side-menu .m-side-mini-row a:focus{
    background:#eff6ff !important;
    border-color:#93c5fd !important;
    color:#1d4ed8 !important;
}

.m-side-menu .m-side-cat-title-box{
    display:flex !important;
    align-items:center !important;
    min-height:40px !important;
    margin:10px 0 8px 0 !important;
    padding:0 14px !important;
    border:1px solid #e5e7eb !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827 !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.m-side-menu .m-side-cat-dynamic{
    display:block !important;
    width:100% !important;
    margin:0 0 12px 0 !important;
    padding:10px !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:14px !important;
    box-shadow:none !important;
}

.m-side-menu .m-cat-tabs{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
    width:100% !important;
    margin:0 0 10px 0 !important;
    padding:0 !important;
}

.m-side-menu .m-cat-tab{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 4px !important;
    border:1px solid #d9dee7 !important;
    border-radius:6px !important;
    background:#fafafa !important;
    color:#333 !important;
    font-size:10.5px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:-0.5px !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-shadow:none !important;
}

.m-side-menu .m-cat-tab.active{
    border-color:#2f8cff !important;
    background:#eff6ff !important;
    color:#1d4ed8 !important;
}

.m-side-menu .m-cat-panel{
    display:none !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:5px !important;
    width:100% !important;
    margin:0 !important;
    padding:10px 0 0 0 !important;
    border-top:1px solid #eef0f4 !important;
}

.m-side-menu .m-cat-panel.active{
    display:flex !important;
}

.m-side-menu .m-cat-panel a{
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:24px !important;
    margin:0 !important;
    padding:3px 7px !important;
    border:1px solid #e0e4ea !important;
    border-radius:5px !important;
    background:#fafafa !important;
    color:#333 !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    letter-spacing:-0.3px !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

.m-side-menu .m-cat-panel a:hover,
.m-side-menu .m-cat-panel a:focus{
    background:#eff6ff !important;
    border-color:#93c5fd !important;
    color:#1d4ed8 !important;
}

/* 구형 블록형 카테고리 HTML이 남아 있을 때도 안전하게 작게 표시 */
.m-side-menu .m-side-cat{
    margin:0 0 10px 0 !important;
    padding:0 !important;
    background:#fff !important;
    border:0 !important;
}

.m-side-menu .m-cat-block{
    padding:18px 0 14px !important;
    border-top:1px solid #eef0f4 !important;
    text-align:center !important;
}

.m-side-menu .m-cat-block:first-child{
    border-top:0 !important;
}

.m-side-menu .m-cat-block strong{
    display:block !important;
    margin:0 0 12px 0 !important;
    font-size:16px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    color:#2f8cff !important;
    text-align:center !important;
}

.m-side-menu .m-cat-block p{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    justify-content:flex-start !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.3 !important;
    text-align:left !important;
}

.m-side-menu .m-cat-block a{
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    min-height:24px !important;
    margin:0 !important;
    padding:3px 7px !important;
    border:1px solid #e0e4ea !important;
    border-radius:5px !important;
    background:#fafafa !important;
    color:#333 !important;
    font-size:10.5px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

.m-side-menu .m-cat-block a:hover,
.m-side-menu .m-cat-block a:focus{
    background:#eff6ff !important;
    border-color:#93c5fd !important;
    color:#1d4ed8 !important;
}

@media (max-width:360px){
    .m-side-menu .m-cat-tabs{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .m-side-menu .m-cat-tab{
        font-size:10px !important;
    }

    .m-side-menu .m-cat-panel a,
    .m-side-menu .m-cat-block a{
        font-size:10px !important;
        padding:3px 6px !important;
    }
}

/* CART V4 marker */
body.hh-mobile.route-cart{background:#f3f6fb !important;padding-bottom:74px !important;overflow-x:hidden !important;}
body.hh-mobile.route-cart .wrap,body.hh-mobile.route-cart .contents,body.hh-mobile.route-cart .header,body.hh-mobile.route-cart .footer,body.hh-mobile.route-cart #footer,body.hh-mobile.route-cart .copyright,body.hh-mobile.route-cart .foot{width:100% !important;max-width:390px !important;min-width:0 !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart .wrap,body.hh-mobile.route-cart .contents{padding-left:6px !important;padding-right:6px !important;background:#f3f6fb !important;}
body.hh-mobile.route-cart .contents{padding-bottom:90px !important;}
body.hh-mobile.route-cart .header{min-height:62px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;padding:10px 8px !important;margin-bottom:18px !important;background:#fff !important;border-bottom:1px solid #e5e7eb !important;overflow:hidden !important;}
body.hh-mobile.route-cart .header > div{float:none !important;margin:0 !important;padding:0 !important;width:auto !important;max-width:none !important;}
body.hh-mobile.route-cart .header > div:nth-child(2),body.hh-mobile.route-cart .header > div:nth-child(3){display:none !important;}
body.hh-mobile.route-cart .header img{width:96px !important;height:auto !important;}
body.hh-mobile.route-cart .header:after{content:"☰";font-size:24px;font-weight:800;color:#111827;line-height:1;}
body.hh-mobile.route-cart .top_link{display:none !important;}
body.hh-mobile.route-cart .ctabcart,body.hh-mobile.route-cart .ctabcharge{width:155px !important;max-width:155px !important;margin:0 0 14px 0 !important;padding:13px 10px !important;background:#1f2490 !important;color:#fff !important;border-radius:0 !important;text-align:center !important;font-size:14px !important;font-weight:800 !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart [style*="width:960px"],body.hh-mobile.route-cart [style*="width: 960px"],body.hh-mobile.route-cart [style*="width:598px"],body.hh-mobile.route-cart [style*="width: 598px"],body.hh-mobile.route-cart [style*="width:271"],body.hh-mobile.route-cart [style*="margin-left: -190px"]{width:100% !important;max-width:100% !important;min-width:0 !important;margin-left:0 !important;left:auto !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart [style*="position: relative"]{position:static !important;left:auto !important;margin-left:0 !important;}
body.hh-mobile.route-cart form,body.hh-mobile.route-cart form div,body.hh-mobile.route-cart ul,body.hh-mobile.route-cart li,body.hh-mobile.route-cart .contents > div{max-width:100% !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart .titlebar{display:none !important;}
body.hh-mobile.route-cart .rows{float:none !important;display:block !important;width:100% !important;max-width:100% !important;margin:8px 0 !important;padding:8px 10px !important;border:1px solid #e5e7eb !important;border-radius:8px !important;background:#fff !important;text-align:center !important;font-size:11px !important;line-height:1.45 !important;color:#475467 !important;overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart [style*="background-color:#d8f3ff"],body.hh-mobile.route-cart [style*="background-color: #d8f3ff"]{width:100% !important;max-width:100% !important;margin:6px 0 !important;font-size:11px !important;line-height:1.5 !important;text-align:center !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart table{width:100% !important;max-width:100% !important;border-collapse:collapse !important;table-layout:auto !important;}
body.hh-mobile.route-cart tbody,body.hh-mobile.route-cart tr,body.hh-mobile.route-cart td{display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart td{padding:10px 8px !important;font-size:12px !important;line-height:1.5 !important;overflow:hidden !important;white-space:normal !important;}
body.hh-mobile.route-cart td[bgcolor="#d8f3ff"],body.hh-mobile.route-cart td[bgcolor="#D8F3FF"]{width:84px !important;max-width:84px !important;background:#d8f3ff !important;text-align:center !important;font-weight:700 !important;}
body.hh-mobile.route-cart input[type="radio"]{margin:0 3px 0 8px !important;}
body.hh-mobile.route-cart td,body.hh-mobile.route-cart td *,body.hh-mobile.route-cart label,body.hh-mobile.route-cart input,body.hh-mobile.route-cart span{font-size:12px !important;}
body.hh-mobile.route-cart .csbutton,body.hh-mobile.route-cart [onclick*="loginNaver"],body.hh-mobile.route-cart div[style*="background-color: #ff0000"],body.hh-mobile.route-cart div[style*="background-color:#ff0000"]{float:none !important;display:block !important;width:100% !important;max-width:390px !important;height:auto !important;min-height:50px !important;margin:12px auto !important;padding:14px !important;border-radius:8px !important;background:#1f2490 !important;color:#fff !important;font-size:16px !important;font-weight:800 !important;line-height:1.4 !important;text-align:center !important;box-shadow:0 4px 10px rgba(31,36,144,.18) !important;box-sizing:border-box !important;}
body.hh-mobile.route-cart .footer,body.hh-mobile.route-cart #footer,body.hh-mobile.route-cart .copyright,body.hh-mobile.route-cart .foot{max-width:390px !important;margin:18px auto 0 !important;padding:12px 6px 80px !important;text-align:center !important;font-size:10px !important;line-height:1.5 !important;overflow:hidden !important;}
body.hh-mobile.route-cart .footer img,body.hh-mobile.route-cart #footer img,body.hh-mobile.route-cart .foot img{max-width:64px !important;height:auto !important;}
body.hh-mobile.route-cart .m-bottom-nav{display:block !important;position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:99999 !important;background:#fff !important;border-top:1px solid #e5e7eb !important;}
body.hh-mobile.route-cart .m-bottom-nav .inner{max-width:390px !important;margin:0 auto !important;display:grid !important;grid-template-columns:repeat(5,1fr) !important;}
body.hh-mobile.route-cart .m-bottom-link{min-height:58px !important;font-size:10px !important;}
@media (max-width:420px){body.hh-mobile.route-cart .wrap,body.hh-mobile.route-cart .contents,body.hh-mobile.route-cart .header,body.hh-mobile.route-cart .footer,body.hh-mobile.route-cart #footer,body.hh-mobile.route-cart .copyright,body.hh-mobile.route-cart .foot{max-width:100% !important;}}


/* CART footer hide */
body.hh-mobile.route-cart .footer,
body.hh-mobile.route-cart #footer,
body.hh-mobile.route-cart .copyright,
body.hh-mobile.route-cart .foot,
body.hh-mobile.route-cart .foot_wrap,
body.hh-mobile.route-cart img[src*="happy"],
body.hh-mobile.route-cart img[src*="happylife"],
body.hh-mobile.route-cart img[src*="comodo"],
body.hh-mobile.route-cart img[src*="logo_copy"]{
  display:none !important;
}

/* CART footer hide */
body.hh-mobile.route-cart .footer,
body.hh-mobile.route-cart #footer,
body.hh-mobile.route-cart .copyright,
body.hh-mobile.route-cart .foot,
body.hh-mobile.route-cart .foot_wrap,
body.hh-mobile.route-cart img[src*="happy"],
body.hh-mobile.route-cart img[src*="happylife"],
body.hh-mobile.route-cart img[src*="comodo"],
body.hh-mobile.route-cart img[src*="logo_copy"]{
  display:none !important;
}

/* cart bottom nav */
body.hh-mobile.route-cart{
  padding-bottom:70px !important;
}

body.hh-mobile.route-cart .m-bottom-nav{
  display:block !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:99999 !important;
  background:#fff !important;
  border-top:1px solid #e5e7eb !important;
}

body.hh-mobile.route-cart .m-bottom-nav .inner{
  max-width:390px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
}

body.hh-mobile.route-cart .m-bottom-link{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:58px !important;
  font-size:10px !important;
  font-weight:800 !important;
  color:#475467 !important;
  text-decoration:none !important;
}

body.hh-mobile.route-cart .m-bottom-link strong{
  font-size:17px !important;
  line-height:1 !important;
}

/* CART footer company info force hide */
body.hh-mobile.route-cart .contents > hr,
body.hh-mobile.route-cart .contents > center,
body.hh-mobile.route-cart .contents > div:last-child,
body.hh-mobile.route-cart img[src*="happy"],
body.hh-mobile.route-cart img[src*="HAPPY"],

body.hh-mobile.route-cart img[src*="mark"],
body.hh-mobile.route-cart img[src*="copy"]{
  display:none !important;
}

/* CART footer full force hide */
body.hh-mobile.route-cart .contents > hr,
body.hh-mobile.route-cart .contents > center,
body.hh-mobile.route-cart .contents > table:last-of-type,
body.hh-mobile.route-cart .contents > div[style*="border-top"],
body.hh-mobile.route-cart .contents > div[style*="Copyright"],
body.hh-mobile.route-cart .contents > div[style*="서비스이용약관"],
body.hh-mobile.route-cart .contents > div[style*="사업자"],
body.hh-mobile.route-cart .contents > div[style*="E-mail"],
body.hh-mobile.route-cart .contents img[src*="s_logo"],
body.hh-mobile.route-cart .contents img[src*="happylife"],
body.hh-mobile.route-cart .contents img[src*="happy_life"],
body.hh-mobile.route-cart .contents img[src*="copy"],
body.hh-mobile.route-cart .contents img[src*="mark"],


/* footer 잔여 빈공간 축소 */
body.hh-mobile.route-cart .contents{
  padding-bottom:80px !important;
}

/* CART width align with main page */
body.hh-mobile.route-cart .wrap,
body.hh-mobile.route-cart .contents,
body.hh-mobile.route-cart .header,
body.hh-mobile.route-cart .m-bottom-nav .inner{
  max-width:860px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.hh-mobile.route-cart .contents{
  padding-left:16px !important;
  padding-right:16px !important;
}

body.hh-mobile.route-cart .m-bottom-nav .inner{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
}

body.hh-mobile.route-cart .m-bottom-link{
  min-height:62px !important;
  font-size:11px !important;
}

/* =========================
   HEADER LOGO FIX (CART)
========================= */

body.hh-mobile.route-cart .header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  max-width:390px !important;
  margin:0 auto !important;
  padding:12px 10px !important;
  background:#fff !important;
}

body.hh-mobile.route-cart .header img{
  display:block !important;
  width:110px !important;
  height:auto !important;
}

body.hh-mobile.route-cart .header a{
  display:flex !important;
  align-items:center !important;
}

/* 로고 숨겨버린 기존 CSS 무력화 */
body.hh-mobile.route-cart .header *{
  opacity:1 !important;
  visibility:visible !important;
}

body.hh-mobile.route-cart .header:after{
  content:"☰";
  font-size:22px;
  font-weight:800;
  color:#111;
}

/* COMMON TOP/BOTTOM FOR ALL MOBILE WRAPPER PAGES */
body.hh-mobile{
  padding-bottom:74px !important;
}

body.hh-mobile .m-common-topbar{
  width:100% !important;
  max-width:860px !important;
  margin:0 auto 16px !important;
  padding:13px 16px !important;
  min-height:62px !important;
  background:#fff !important;
  border-bottom:1px solid #e5e7eb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
}

body.hh-mobile .m-common-logo{
  display:flex !important;
  align-items:center !important;
}

body.hh-mobile .m-common-logo img{
  display:block !important;
  width:110px !important;
  height:auto !important;
}

body.hh-mobile .m-common-menu{
  border:0 !important;
  background:transparent !important;
  font-size:25px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#111827 !important;
  cursor:pointer !important;
}

body.hh-mobile .m-bottom-nav{
  display:block !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:99999 !important;
  background:#fff !important;
  border-top:1px solid #e5e7eb !important;
}

body.hh-mobile .m-bottom-nav .inner{
  max-width:860px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
}

body.hh-mobile .m-bottom-link{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  min-height:62px !important;
  color:#475467 !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

body.hh-mobile .m-bottom-link strong{
  font-size:18px !important;
  line-height:1 !important;
}

body.hh-mobile .m-bottom-link.is-active{
  color:#1237a6 !important;
}

/* 기존 cart header 중복 제거 */
body.hh-mobile.route-cart .header:not(.m-common-topbar){
  display:none !important;
}

/* Global Header 강제 표시 */
body.hh-mobile .m-common-topbar{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:9999 !important;
}




/* =========================================================
   Mobile Common UI Fix
   - Bottom Nav active
   - Header menu
   - Card UI
========================================================= */

/* Bottom Nav active */
body.hh-mobile .m-bottom-nav a {
  color:#777;
  font-weight:400;
}

body.hh-mobile .m-bottom-nav a.is-active {
  color:#111;
  font-weight:700;
}

body.hh-mobile .m-bottom-nav a.is-active span,
body.hh-mobile .m-bottom-nav a.is-active div {
  color:#111;
  font-weight:700;
}

/* Header */
body.hh-mobile .m-common-topbar {
  height:52px;
  padding:0 14px;
  background:#fff;
  border-bottom:1px solid #e5e5e5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
}

body.hh-mobile .m-common-logo img {
  height:28px;
  width:auto;
  display:block;
}

body.hh-mobile .m-common-menu {
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  font-size:0;
  position:relative;
}

body.hh-mobile .m-common-menu:before {
  content:"☰";
  font-size:26px;
  color:#222;
  line-height:38px;
}

/* Content Card UI */
body.hh-mobile .m-card,
body.hh-mobile .m-section,
body.hh-mobile .hh-card {
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:14px;
  margin:12px 10px;
  box-sizing:border-box;
}

body.hh-mobile .m-card-title,
body.hh-mobile .m-section-title,
body.hh-mobile .hh-card-title {
  font-size:16px;
  font-weight:700;
  color:#111;
  margin:0 0 10px 0;
}

body.hh-mobile .m-card-list,
body.hh-mobile .hh-card-list {
  margin:0;
  padding:0;
  list-style:none;
}

body.hh-mobile .m-card-list li,
body.hh-mobile .hh-card-list li {
  padding:9px 0;
  border-bottom:1px solid #f0f0f0;
  font-size:14px;
  line-height:1.45;
}

body.hh-mobile .m-card-list li:last-child,
body.hh-mobile .hh-card-list li:last-child {
  border-bottom:0;
}

body.hh-mobile .m-card a,
body.hh-mobile .m-section a,
body.hh-mobile .hh-card a {
  color:#222;
  text-decoration:none;
}


/* COMMON DRAWER MENU */
body.hh-mobile.m-drawer-open{
  overflow:hidden !important;
}

body.hh-mobile .m-common-dim{
  display:none;
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:rgba(15,23,42,.45);
  z-index:100000;
}

body.hh-mobile .m-common-dim.is-open{
  display:block;
}

body.hh-mobile .m-common-drawer{
  position:fixed;
  top:0;
  right:-84%;
  width:84%;
  max-width:360px;
  height:100%;
  background:#fff;
  z-index:100001;
  padding:18px;
  box-shadow:-12px 0 30px rgba(15,23,42,.18);
  transition:right .22s ease;
  box-sizing:border-box;
  overflow-y:auto;
}

body.hh-mobile .m-common-drawer.is-open{
  right:0;
}

body.hh-mobile .m-common-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #e5e7eb;
}

body.hh-mobile .m-common-drawer-head strong{
  font-size:18px;
  font-weight:800;
  color:#111827;
}

body.hh-mobile .m-common-drawer-head button{
  border:0;
  background:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

body.hh-mobile .m-common-drawer-list{
  display:grid;
  gap:9px;
}

body.hh-mobile .m-common-drawer-list a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

/* =========================
   COMMON DRAWER FIX
   - /mypage/cartview.html 공통 drawer 고정
========================= */

body.hh-mobile.m-drawer-open{
  overflow:hidden !important;
}

body.hh-mobile .m-drawer-dim{
  display:none !important;
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  background:rgba(15,23,42,.45) !important;
  z-index:100000 !important;
}

body.hh-mobile .m-drawer-dim.is-open{
  display:block !important;
}

body.hh-mobile .m-drawer{
  position:fixed !important;
  top:0 !important;
  right:-84% !important;
  width:84% !important;
  max-width:360px !important;
  height:100% !important;
  background:#fff !important;
  z-index:100001 !important;
  padding:18px !important;
  box-shadow:-12px 0 30px rgba(15,23,42,.18) !important;
  transition:right .22s ease !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

body.hh-mobile .m-drawer.is-open{
  right:0 !important;
}

body.hh-mobile .m-drawer-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom:18px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid #e5e7eb !important;
}

body.hh-mobile .m-drawer-title{
  font-size:18px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

body.hh-mobile .m-drawer-close{
  border:0 !important;
  background:#fff !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

body.hh-mobile .m-drawer-list{
  display:block !important;
}


/* =========================
   DRAWER SAME AS MAIN FINAL
========================= */

body.hh-mobile .m-drawer{
  text-align:left !important;
}

body.hh-mobile .m-drawer *{
  box-sizing:border-box !important;
}

body.hh-mobile .m-drawer-list{
  display:block !important;
}

body.hh-mobile .m-side-top{
  margin:0 0 10px 0 !important;
}

body.hh-mobile .m-side-mini-row{
  display:grid !important;
  gap:8px !important;
  margin:0 0 8px 0 !important;
}

body.hh-mobile .m-side-mini-row:first-child{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

body.hh-mobile .m-side-mini-row:nth-child(2){
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin-bottom:10px !important;
}

body.hh-mobile .m-side-mini-row a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:7px 4px !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111827 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  letter-spacing:-.3px !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

body.hh-mobile .m-side-cat-title-box{
  display:block !important;
  padding:13px 16px !important;
  margin:10px 0 !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  background:#fff !important;
  font-size:15px !important;
  font-weight:900 !important;
  color:#111827 !important;
  line-height:1.2 !important;
}

body.hh-mobile .m-side-cat-dynamic{
  margin:0 0 12px 0 !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
}

body.hh-mobile .m-cat-tabs{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  margin:0 0 10px 0 !important;
  padding:0 !important;
}

body.hh-mobile .m-cat-tab{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 4px !important;
  border:1px solid #d9dee7 !important;
  border-radius:6px !important;
  background:#fafafa !important;
  color:#333 !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.4px !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

body.hh-mobile .m-cat-tab.active{
  border-color:#2f8cff !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
}

body.hh-mobile .m-cat-panel{
  display:none !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:5px !important;
  width:100% !important;
  margin:0 !important;
  padding:10px 0 0 0 !important;
  border-top:1px solid #eef0f4 !important;
  text-align:left !important;
}

body.hh-mobile .m-cat-panel.active{
  display:flex !important;
}

body.hh-mobile .m-cat-panel a{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:24px !important;
  margin:0 !important;
  padding:3px 7px !important;
  border:1px solid #e0e4ea !important;
  border-radius:5px !important;
  background:#fafafa !important;
  color:#333 !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:-.3px !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

@media (max-width:360px){
  body.hh-mobile .m-cat-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.hh-mobile .m-cat-tab{
    font-size:10.5px !important;
  }

  body.hh-mobile .m-cat-panel a{
    font-size:10px !important;
    padding:3px 6px !important;
  }
}

/* ===== CHARGE HEADER CLEAN ===== */
body.hh-mobile.route-cart nav.header{
  display:none !important;
}

/* ===== OLD PAYMENT HEADER FORCE HIDE ===== */
body.hh-mobile nav.header{
  display:none !important;
}


/* ===== CHARGE AMOUNT 4x2 FINAL ===== */
body.hh-mobile .basketcontents:has(input[name="cgPrice"]){
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px 8px !important;
  width:100% !important;
  max-width:100% !important;
  min-height:78px !important;
  height:auto !important;
  padding:12px 14px !important;
  overflow:visible !important;
  line-height:1.4 !important;
}

body.hh-mobile .basketcontents:has(input[name="cgPrice"]) label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  font-size:13px !important;
}

body.hh-mobile .basketcontents:has(input[name="cgPrice"]) input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
}

/* ===== CHARGE AMOUNT 4x2 FINAL ===== */
body.hh-mobile .basketcontents:has(input[name="cgPrice"]){
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px 8px !important;
  width:100% !important;
  max-width:100% !important;
  min-height:78px !important;
  height:auto !important;
  padding:12px 14px !important;
  overflow:visible !important;
  line-height:1.4 !important;
}

body.hh-mobile .basketcontents:has(input[name="cgPrice"]) label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:3px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  font-size:13px !important;
}

body.hh-mobile .basketcontents:has(input[name="cgPrice"]) input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
}

/* ===== CHARGE AMOUNT JS GRID FINAL ===== */
body.hh-mobile .basketcontents.hh-amount-fixed{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:82px !important;
  padding:12px 14px !important;
  overflow:visible !important;
}

body.hh-mobile .hh-charge-amount-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:10px 8px !important;
  width:100% !important;
}

body.hh-mobile .hh-charge-amount-item{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  font-size:13px !important;
  color:#334155 !important;
}

body.hh-mobile .hh-charge-amount-item input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  padding:0 !important;
}

body.hh-mobile .hh-charge-amount-item{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}

body.hh-mobile .hh-charge-amount-item label{
  margin:0 !important;
  padding:0 !important;
}

/* ===== CHARGE AMOUNT GRID LABEL FIX ===== */
body.hh-mobile .basketcontents.hh-amount-fixed{
  display:block !important;
  min-height:90px !important;
  padding:12px 14px !important;
  overflow:visible !important;
}

body.hh-mobile .hh-charge-amount-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(72px, 1fr)) !important;
  gap:12px 14px !important;
  width:100% !important;
}

body.hh-mobile .hh-charge-amount-item{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  min-width:72px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  line-height:1.4 !important;
}

body.hh-mobile .hh-charge-amount-item input[type="radio"]{
  flex:0 0 13px !important;
  width:13px !important;
  height:13px !important;
  margin:0 !important;
}

body.hh-mobile .hh-charge-amount-item label{
  display:inline-block !important;
  min-width:auto !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

/* CHARGE button color final */
body.hh-mobile .csbutton,
body.hh-mobile div[style*="background-color:#ff0000"],
body.hh-mobile div[style*="background-color: #ff0000"]{
  background:#1f2490 !important;
}

/* ===== CHARGE FONT SIZE UNIFY ===== */
body.hh-mobile.route-charge td,
body.hh-mobile.route-charge td *,
body.hh-mobile .basketcontents,
body.hh-mobile .basketcontents *{
  font-size:14px !important;
  line-height:1.5 !important;
}

/* 좌측 라벨 영역 */
body.hh-mobile.route-charge td[bgcolor],
body.hh-mobile.route-charge td[style*="background"]{
  font-size:14px !important;
  font-weight:600 !important;
}

/* 우측 값 영역 */
body.hh-mobile.route-charge .basketcontents,
body.hh-mobile.route-charge .basketcontents *{
  font-size:14px !important;
}

/* ===== CHARGE LEFT ALIGN FIX ===== */

/* 모든 td 기본 여백 통일 */
body.hh-mobile.route-charge td{
  padding:10px 12px !important;
}

/* 좌측 라벨 영역 (충전금액/수수료/총결제금액/결제방법) */
body.hh-mobile.route-charge td[bgcolor],
body.hh-mobile.route-charge td[style*="background"]{
  width:110px !important;
  min-width:110px !important;
  text-align:left !important;
  padding-left:14px !important;
  box-sizing:border-box !important;
}

/* 우측 값 영역 */
body.hh-mobile.route-charge td:not([bgcolor]){
  padding-left:14px !important;
}

/* basketcontents 내부도 동일 기준 */
body.hh-mobile.route-charge .basketcontents{
  padding-left:14px !important;
}

/* ===== CART PAYMENT AREA SAME AS CHARGE ===== */

/* cart/charge 공통 결제 테이블 */
body.hh-mobile.route-cart table,
body.hh-mobile.route-charge table{
  width:100% !important;
  max-width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  background:#fff !important;
  overflow:visible !important;
}

/* cart/charge 공통 행 */
body.hh-mobile.route-cart tr,
body.hh-mobile.route-charge tr{
  display:grid !important;
  grid-template-columns:135px 1fr !important;
  width:100% !important;
  border-bottom:1px solid #d4eef9 !important;
}

/* 좌측 라벨 */
body.hh-mobile.route-cart td[bgcolor="#d8f3ff"],
body.hh-mobile.route-cart td[bgcolor="#D8F3FF"],
body.hh-mobile.route-charge td[bgcolor="#d8f3ff"],
body.hh-mobile.route-charge td[bgcolor="#D8F3FF"]{
  width:auto !important;
  max-width:none !important;
  padding:13px 12px !important;
  background:#d8f3ff !important;
  text-align:center !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.7 !important;
}

/* 우측 내용 */
body.hh-mobile.route-cart .basketcontents,
body.hh-mobile.route-charge .basketcontents{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  min-height:42px !important;
  padding:13px 16px !important;
  font-size:14px !important;
  line-height:1.7 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* 충전금액 4x2 */
body.hh-mobile .basketcontents.hh-amount-fixed{
  display:block !important;
  min-height:90px !important;
  padding:12px 14px !important;
  overflow:visible !important;
}

body.hh-mobile .hh-charge-amount-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(72px, 1fr)) !important;
  gap:12px 14px !important;
  width:100% !important;
}

body.hh-mobile .hh-charge-amount-item{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  white-space:nowrap !important;
  font-size:13px !important;
}

body.hh-mobile .hh-charge-amount-item input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
}

/* 결제방법 정렬 */
body.hh-mobile.route-cart .basketcontents label,
body.hh-mobile.route-charge .basketcontents label{
  font-size:14px !important;
  margin-right:24px !important;
}

/* 버튼 통일 */
body.hh-mobile.route-cart .csbutton,
body.hh-mobile.route-charge .csbutton,
body.hh-mobile.route-cart div[style*="background-color:#ff0000"],
body.hh-mobile.route-cart div[style*="background-color: #ff0000"],
body.hh-mobile.route-charge div[style*="background-color:#ff0000"],
body.hh-mobile.route-charge div[style*="background-color: #ff0000"]{
  background:#1f2490 !important;
  color:#fff !important;
  border-radius:12px !important;
  box-shadow:0 6px 16px rgba(31,36,144,.22) !important;
}

@media (max-width:420px){
  body.hh-mobile.route-cart tr,
  body.hh-mobile.route-charge tr{
    grid-template-columns:112px 1fr !important;
  }

  body.hh-mobile .hh-charge-amount-grid{
    grid-template-columns:repeat(4, minmax(58px, 1fr)) !important;
    gap:10px 8px !important;
  }
}

/* ===== CART basketcontents width/float restore ===== */
body.hh-mobile.route-cart .basketcontents{
  float:left !important;
  width:824px !important;
  max-width:none !important;
}

/* ===== CART / CHARGE basketcontents restore final ===== */
body.hh-mobile.route-cart .basketcontents,
body.hh-mobile.route-charge .basketcontents{
  float:left !important;
  width:824px !important;
  max-width:none !important;
}

/* JS로 4x2 변환된 충전금액 영역만 예외 */
body.hh-mobile.route-cart .basketcontents.hh-amount-fixed,
body.hh-mobile.route-charge .basketcontents.hh-amount-fixed{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  min-height:90px !important;
}

/* ===== CART/CHARGE PAYMENT ALIGN FINAL ===== */

/* 충전금액 간격을 charge 화면 기준으로 통일 */
body.hh-mobile.route-cart .hh-charge-amount-grid,
body.hh-mobile.route-charge .hh-charge-amount-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(64px, 1fr)) !important;
  gap:12px 18px !important;
  width:100% !important;
}

body.hh-mobile.route-cart .hh-charge-amount-item,
body.hh-mobile.route-charge .hh-charge-amount-item{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  white-space:nowrap !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

/* 결제방법 라디오/텍스트 한 줄 정렬 */
body.hh-mobile.route-cart .basketcontents:has(input[name="PayMethod"]),
body.hh-mobile.route-cart .basketcontents:has(input[name="paymethod"]),
body.hh-mobile.route-charge .basketcontents:has(input[name="PayMethod"]),
body.hh-mobile.route-charge .basketcontents:has(input[name="paymethod"]){
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  min-height:58px !important;
  padding:13px 16px !important;
  line-height:1.4 !important;
}

body.hh-mobile.route-cart .basketcontents:has(input[name="PayMethod"]) label,
body.hh-mobile.route-cart .basketcontents:has(input[name="paymethod"]) label,
body.hh-mobile.route-charge .basketcontents:has(input[name="PayMethod"]) label,
body.hh-mobile.route-charge .basketcontents:has(input[name="paymethod"]) label{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-width:auto !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  line-height:1.4 !important;
  font-size:14px !important;
}

body.hh-mobile.route-cart .basketcontents:has(input[name="PayMethod"]) input[type="radio"],
body.hh-mobile.route-cart .basketcontents:has(input[name="paymethod"]) input[type="radio"],
body.hh-mobile.route-charge .basketcontents:has(input[name="PayMethod"]) input[type="radio"],
body.hh-mobile.route-charge .basketcontents:has(input[name="paymethod"]) input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
  vertical-align:middle !important;
  flex:0 0 auto !important;
}

/* ===== PAYMETHOD INLINE FINAL ===== */
body.hh-mobile .basketcontents.hh-paymethod-fixed{
  display:block !important;
  min-height:58px !important;
  padding:13px 16px !important;
}

body.hh-mobile .hh-paymethod-row{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  width:100% !important;
}

body.hh-mobile .hh-paymethod-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

body.hh-mobile .hh-paymethod-item input[type="radio"]{
  width:13px !important;
  height:13px !important;
  margin:0 !important;
}


/* cartview.html cartForm 정리 */
body.hh-mobile form[name="cartForm"] table,
body.hh-mobile #cartForm table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 10px !important;
}

body.hh-mobile form[name="cartForm"] tr,
body.hh-mobile #cartForm tr{
  display:grid !important;
  grid-template-columns:34px 1fr 72px 34px !important;
  grid-template-areas:
    "chk title price del"
    "chk date  price del" !important;
  align-items:center !important;
  padding:10px 8px !important;
  background:#fff !important;
  border:1px solid #e3e7ef !important;
  border-radius:8px !important;
}

body.hh-mobile form[name="cartForm"] td,
body.hh-mobile #cartForm td{
  display:block !important;
  width:auto !important;
  padding:2px 4px !important;
  border:0 !important;
  background:none !important;
  font-size:12px !important;
  line-height:1.45 !important;
  text-align:left !important;
  word-break:keep-all !important;
}

body.hh-mobile form[name="cartForm"] td:nth-child(1),
body.hh-mobile #cartForm td:nth-child(1){
  grid-area:chk;
  text-align:center !important;
}

body.hh-mobile form[name="cartForm"] td:nth-child(2),
body.hh-mobile #cartForm td:nth-child(2){
  grid-area:date;
  color:#777;
  font-size:11px !important;
}

body.hh-mobile form[name="cartForm"] td:nth-child(3),
body.hh-mobile #cartForm td:nth-child(3){
  grid-area:title;
  font-size:13px !important;
  font-weight:600;
  color:#222;
}

body.hh-mobile form[name="cartForm"] td:nth-child(4),
body.hh-mobile #cartForm td:nth-child(4){
  grid-area:price;
  text-align:right !important;
  font-weight:700;
  color:#222;
  white-space:nowrap;
}

body.hh-mobile form[name="cartForm"] td:nth-child(5),
body.hh-mobile #cartForm td:nth-child(5){
  grid-area:del;
  text-align:center !important;
}

body.hh-mobile form[name="cartForm"] input[type="checkbox"],
body.hh-mobile #cartForm input[type="checkbox"]{
  width:18px;
  height:18px;
}

/* 선택 금액 박스 정리 */
body.hh-mobile .cart_select_price,
body.hh-mobile .cart_total_price,
body.hh-mobile .cart_price_box{
  margin-top:10px !important;
  padding:12px !important;
  background:#e8f8ff !important;
  border:1px solid #b7dcea !important;
  text-align:center !important;
  line-height:1.7 !important;
  font-size:13px !important;
}

.cart-row{
  display:flex;
  gap:6px;
  font-size:12px;
  margin-bottom:4px;
}

.cart-row .label{
  width:60px;
  color:#777;
  flex-shrink:0;
}

.cart-row .value{
  flex:1;
  color:#222;
  font-weight:500;
}

/* login mobile clean layout */
body.hh-mobile.route-login {
  margin: 0 !important;
  background: #eef3f9 !important;
  padding-bottom: 64px !important;
}

body.hh-mobile.route-login .m-container {
  width: 100% !important;
  max-width: 322px !important;
  margin: 0 auto !important;
  padding: 36px 0 90px !important;
}

.m-login-wrap {
  width: 100%;
  max-width: 322px;
  margin: 0 auto;
  text-align: center;
}

.m-login-title {
  text-align: left;
  font-size: 14px;
  margin-bottom: 10px;
}

.m-login-form input {
  width: 100%;
  height: 48px;
  margin-bottom: 14px;
  padding: 0 12px;
  border: 1px solid #ddd;
  background: #eaf2ff;
  box-sizing: border-box;
}

.m-login-btn {
  width: 100%;
  height: 62px;
  margin: 12px 0 30px;
  border: 0;
  background: #25259a;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.m-naver-btn {
  display: block;
  width: 100%;
  height: 62px;
  line-height: 62px;
  background: #10c800;
  color: #fff !important;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
}

.m-naver-desc {
  margin: 16px 0;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}

.m-login-line {
  height: 1px;
  background: #ddd;
  margin: 18px 0;
}

.m-login-join a {
  font-size: 14px;
}

/* bottom nav */
body.hh-mobile.route-login .m-bottom-nav {
  height: 64px !important;
}

body.hh-mobile.route-login .m-bottom-nav .inner {
  height: 64px !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

body.hh-mobile.route-login .m-bottom-link {
  flex: 1 !important;
  height: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================
   CHARGE PAY BUTTON SAME AS CART BUY BUTTON
========================= */

/* 충전 화면 결제하기 버튼 */
body.hh-mobile.route-charge .csbutton,
body.hh-mobile.route-charge div[onclick*="pay"],
body.hh-mobile.route-charge div[onclick*="Pay"],
body.hh-mobile.route-charge div[style*="background-color:#ff0000"],
body.hh-mobile.route-charge div[style*="background-color: #ff0000"] {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 390px !important;
  min-height: 58px !important;
  height: auto !important;
  margin: 18px auto 90px !important;
  padding: 16px 12px !important;

  background: #1f2490 !important;
  color: #fff !important;

  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(31,36,144,.22) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* 버튼 내부 텍스트/태그 정리 */
body.hh-mobile.route-charge .csbutton *,
body.hh-mobile.route-charge div[onclick*="pay"] *,
body.hh-mobile.route-charge div[onclick*="Pay"] * {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* 하단 네비와 겹침 방지 */
body.hh-mobile.route-charge .contents {
  padding-bottom: 110px !important;
}

/* =========================
   CHARGE PAY BUTTON WIDTH SAME AS CART BUY
========================= */

body.hh-mobile.route-charge .csbutton,
body.hh-mobile.route-charge div[onclick*="pay"],
body.hh-mobile.route-charge div[onclick*="Pay"],
body.hh-mobile.route-charge div[style*="background-color:#ff0000"],
body.hh-mobile.route-charge div[style*="background-color: #ff0000"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  margin: 14px 0 90px 0 !important;
  padding: 16px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #1f2490 !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(31,36,144,.22) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* =========================
   CHARGE BUTTON SAME SIZE AS CART BUY
========================= */

body.hh-mobile.route-charge .csbutton,
body.hh-mobile.route-charge div[onclick*="pay"],
body.hh-mobile.route-charge div[onclick*="Pay"] {
  width: 100% !important;
  max-width: 100% !important;

  height: 62px !important;          /* 핵심: 높이 고정 */
  min-height: 62px !important;
  padding: 0 !important;            /* 패딩 제거 */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #1f2490 !important;
  color: #fff !important;

  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(31,36,144,.22) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 62px !important;     /* 텍스트 수직 중앙 */
  text-align: center !important;

  margin: 14px 0 90px 0 !important;
}

/* 내부 span/font 때문에 높이 깨지는거 방지 */
body.hh-mobile.route-charge .csbutton *,
body.hh-mobile.route-charge div[onclick*="pay"] * {
  line-height: 62px !important;
  height: auto !important;
  display: inline-block !important;
}

/* =========================
   PAY BUTTON FINAL SAME SIZE
========================= */

body.hh-mobile.route-cart .csbutton,
body.hh-mobile.route-charge .csbutton,
body.hh-mobile.route-cart div[onclick*="pay"],
body.hh-mobile.route-charge div[onclick*="pay"],
body.hh-mobile.route-cart div[onclick*="Pay"],
body.hh-mobile.route-charge div[onclick*="Pay"],
body.hh-mobile.route-cart div[style*="background-color"],
body.hh-mobile.route-charge div[style*="background-color"] {
  width: 100% !important;
  max-width: 100% !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 14px 0 90px 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #1f2490 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(31,36,144,.22) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 54px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 내부 태그 높이 깨짐 방지 */
body.hh-mobile.route-cart .csbutton *,
body.hh-mobile.route-charge .csbutton *,
body.hh-mobile.route-cart div[onclick*="pay"] *,
body.hh-mobile.route-charge div[onclick*="pay"] *,
body.hh-mobile.route-cart div[onclick*="Pay"] *,
body.hh-mobile.route-charge div[onclick*="Pay"] * {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 54px !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

/* =========================
   CHARGE AMOUNT VERTICAL ALIGN
========================= */

body.hh-mobile.route-cart .basketcontents.hh-amount-fixed,
body.hh-mobile.route-charge .basketcontents.hh-amount-fixed {
  display: flex !important;
  align-items: center !important;
  min-height: 78px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.hh-mobile.route-cart .basketcontents.hh-amount-fixed .hh-charge-amount-grid,
body.hh-mobile.route-charge .basketcontents.hh-amount-fixed .hh-charge-amount-grid {
  align-items: center !important;
  margin: 0 !important;
}

body.hh-mobile.route-cart .hh-charge-amount-item,
body.hh-mobile.route-charge .hh-charge-amount-item {
  align-items: center !important;
  line-height: 1.4 !important;
}

/* =========================
   CARTBOX TEXT FIX
========================= */

body.hh-mobile.route-cart .cartbox,
body.hh-mobile.route-charge .cartbox {
  height: auto !important;
  min-height: 54px !important;

  padding: 12px 10px !important;
  line-height: 1.7 !important;

  white-space: normal !important;
  overflow: visible !important;
  word-break: keep-all !important;

  display: block !important;
  box-sizing: border-box !important;
}

/* 내부 텍스트 줄바꿈 + 정렬 */
body.hh-mobile.route-cart .cartbox *,
body.hh-mobile.route-charge .cartbox * {
  line-height: 1.7 !important;
  vertical-align: middle !important;
}

/* =========================
   장바구니 끝
========================= */

/* =========================
   MYPAGE DEDICATED MOBILE
========================= */

body.hh-mobile.route-mypage {
  background:#eef3f9 !important;
  padding-bottom:74px !important;
  overflow-x:hidden !important;
}

body.hh-mobile.route-mypage .m-container.hh-my-page {
  width:100% !important;
  max-width:700px !important;
  margin:0 auto !important;
  padding:0 10px 90px !important;
  background:#fff !important;
  box-sizing:border-box !important;
}

.hh-my-title {
  margin:0 0 12px !important;
  padding:10px 0 !important;
  font-size:17px !important;
  font-weight:900 !important;
  color:#120044 !important;
  border-bottom:1px solid #9ca3af !important;
}

.hh-my-summary {
  display:grid !important;
  grid-template-columns:145px 1fr !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.hh-my-member {
  border:1px solid #2f6fa3 !important;
  background:#effcff !important;
  text-align:center !important;
  font-size:13px !important;
}

.hh-my-member strong {
  display:block !important;
  padding:10px 6px !important;
  border-bottom:1px solid #2f6fa3 !important;
  color:#555 !important;
}

.hh-my-member div {
  padding:8px 6px !important;
  border-bottom:1px solid #b7d4e7 !important;
  color:#555 !important;
}

.hh-my-member div:last-child {
  border-bottom:0 !important;
}

.hh-my-member b {
  color:#555 !important;
}

.hh-my-toplinks {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:14px !important;
  align-content:start !important;
}

.hh-my-toplinks a {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  background:#1f2490 !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.hh-my-statgrid {
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:20px !important;
  margin:0 0 14px !important;
}

.hh-my-statgrid a {
  display:block !important;
  border:1px solid #2f6fa3 !important;
  background:#effcff !important;
  color:#555 !important;
  text-align:center !important;
  text-decoration:none !important;
  font-size:13px !important;
}

.hh-my-statgrid span {
  display:block !important;
  padding:9px 4px !important;
  border-bottom:1px solid #2f6fa3 !important;
}

.hh-my-statgrid strong {
  display:block !important;
  padding:8px 4px !important;
  color:#0070c9 !important;
  font-weight:900 !important;
}

.hh-my-box {
  margin:0 0 22px !important;
  padding:0 10px 16px !important;
  border:1px solid #2f6fa3 !important;
  background:#f0ffff !important;
}

.hh-my-box h3 {
  margin:0 0 12px !important;
  padding:6px 0 !important;
  font-size:14px !important;
  font-weight:900 !important;
  border-bottom:1px solid #9ca3af !important;
}

.hh-my-box p {
  margin:4px 0 !important;
  font-size:13px !important;
  line-height:1.5 !important;
  color:#444 !important;
}

.hh-my-guide {
  margin:0 !important;
}

.hh-my-guide h3 {
  margin:0 0 10px !important;
  padding:0 0 10px !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:#120044 !important;
  border-bottom:1px solid #b7b7b7 !important;
}

.hh-guide-q {
  margin:14px 0 8px !important;
  color:#0070c9 !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.hh-guide-a {
  margin:0 0 14px !important;
  padding:14px 16px !important;
  background:#fff0f0 !important;
  color:#444 !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

body.hh-mobile.route-mypage .m-bottom-nav .inner {
  max-width:700px !important;
}

body.hh-mobile.route-mypage .m-bottom-link.is-active {
  color:#1237a6 !important;
  background:#fff !important;
}

@media (max-width:560px) {
  .hh-my-summary {
    grid-template-columns:1fr !important;
  }

  .hh-my-toplinks {
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .hh-my-statgrid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
}

/* MYPAGE HEADER MENU TEXT HIDE */
body.hh-mobile.route-mypage .m-common-menu {
  font-size:0 !important;
}

body.hh-mobile.route-mypage .m-common-menu:before {
  content:"☰";
  font-size:26px !important;
  color:#111 !important;
}