@charset "utf-8";

/* ==========================================================================
   Full Mobile UI Fidelity Responsive Stylesheet for PC Workspace
   Matches the exact design, metrics, and functionality of Mobile version
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Resets & Fluid Container
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* R4-17: overflow-x hidden on html AND body made body the scroll container (window.scrollY stayed 0, the top button
   and position: sticky broke). clip cuts the sideways overflow without creating a scroller. */
html {
  overflow-x: clip;
}

html,
body {
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

body.max,
html.max {
  height: 100% !important;
  overflow: hidden !important;
}

#wrap {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
  position: relative;
}

@supports not (overflow: clip) {
  #wrap { overflow-x: hidden !important; }
}

.inner {
  width: 100% !important;
  max-width: 1200px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto !important;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

.table_responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pt_btn {
  display: flex;
}

/* --------------------------------------------------------------------------
   Desktop Default Visibility (min-width: 769px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
  #header_mobile,
  .mo_header,
  .footer_mobile,
  .main_mo_wrap,
  .item_view_mo,
  .item_list_mo,
  .custom_list_mo,
  .custom_view_mo,
  #my_wrap,
  .mypage_mo_wrap {
    display: none !important;
  }
  #header02,
  .pc_header,
  .footer_pc,
  .main_pc_wrap,
  .item_view_pc,
  .item_list_pc,
  .custom_list_pc,
  .custom_view_pc,
  .mypage_pc_wrap {
    display: block !important;
  }
  .quick_link {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop Refinements (1025px - 1200px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) and (min-width: 769px) {
  #header02 .top .logo a::after {
    display: none;
  }
  #header02 .top .logo .language {
    display: none;
  }
  #header02 .bottom .left {
    gap: 20px;
  }
  .main_visual_slider .swiper-slide {
    width: 80% !important;
  }
  .special_sec .special_list li {
    width: calc(25% - 15px);
    margin-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   Tablet & Intermediate Screens (769px - 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  #header02 {
    padding-top: 135px;
  }
  #header02 .top {
    height: auto;
    padding: 10px 0;
  }
  #header02 .top .inner {
    padding: 5px 0;
    gap: 12px;
  }
  #header02 .top .logo img {
    max-width: 120px;
  }
  #header02 .top .serach_box input {
    width: 220px;
    height: 44px;
    font-size: 14px;
    padding-left: 14px;
    padding-right: 48px;
  }
  #header02 .top .serach_box .btn_search {
    width: 48px;
    height: 44px;
    background-size: 20px 20px;
  }
  #header02 .top .search_btn_wrap .select_custom_ {
    height: 40px;
    font-size: 13px;
    padding: 6px 12px;
  }
  #header02 .top .util_box {
    margin-left: 15px;
  }
  #header02 .top .util_box a.join_link {
    margin-left: 12px;
    padding: 8px 14px;
    font-size: 13px;
  }
  #header02 .bottom {
    top: 65px;
  }
  #header02 .bottom .inner {
    padding: 12px 10px;
    overflow-x: auto;
    white-space: nowrap;
  }
  #header02 .bottom .left {
    gap: 15px;
  }
  #header02 .bottom .left .service_link {
    font-size: 14px;
  }
  #header02 .bottom .right .category,
  #header02 .bottom .ranking_wrap {
    display: none;
  }

  .main_visual_slider .swiper-slide {
    width: 90% !important;
  }
  .main_visual_slider .swiper-button-prev,
  .main_visual_slider .swiper-button-next {
    width: 48px;
    height: 48px;
    background-size: 48px 48px;
  }
  .main_visual_slider .swiper-button-prev {
    left: 2%;
  }
  .main_visual_slider .swiper-button-next {
    right: 2%;
  }

  /* R4-5: the item list / search icons too (they overflowed at 768) */
  .category_sec .category_tab,
  .prd_list_wrap .category_tab {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
  }
  .category_tab .cat_btn:not(:last-of-type) {
    margin-right: 0;
  }
  .category_tab .cat_btn .ico {
    width: 65px;
    height: 65px;
  }

  .prd_sec .slider01 .slide_itemwrap .slider_item,
  .prd_sec .slider02 .slide_itemwrap .slider_item {
    width: calc(33.333% - 14px) !important;
  }
  .prd_list_wrap .itme_type01 li {
    width: calc(33.333% - 16px) !important;
    margin-right: 24px !important;
  }
  .prd_list_wrap .itme_type01 li:nth-of-type(4n) {
    margin-right: 24px !important;
  }
  .prd_list_wrap .itme_type01 li:nth-of-type(3n) {
    margin-right: 0 !important;
  }

  .special_sec .special_list {
    flex-wrap: wrap;
    gap: 15px;
  }
  .special_sec .special_list li {
    width: calc(50% - 10px) !important;
    margin-right: 0 !important;
    margin-bottom: 15px;
  }

  .view_top_info {
    flex-direction: column !important;
  }
  .view_top_info .vti_left {
    width: 100% !important;
    margin-right: 0 !important;
    max-width: 600px;
    margin: 0 auto 30px auto !important;
  }
  .view_top_info .vti_right {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .mypage_layout {
    flex-direction: column !important;
  }
  .mypage_layout .mypage_nav {
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 25px !important;
  }
  .mypage_layout .content_box {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Devices (<= 768px) - Exact Mobile Experience & Authentic Styling
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body {
    font-family: "Noto Sans KR", sans-serif;
    background-color: #fff;
  }

  #wrap {
    padding-top: 60px !important;
  }

  /* Hide Desktop Elements */
  #header02,
  .pc_header,
  .footer_pc,
  .main_pc_wrap,
  .quick_link,
  .item_view_pc,
  .item_list_pc,
  .custom_list_pc,
  .custom_view_pc,
  .mypage_pc_wrap {
    display: none !important;
  }

  /* Show Mobile Elements */
  #header_mobile,
  .mo_header,
  .footer_mobile,
  .main_mo_wrap,
  .item_view_mo,
  .item_list_mo,
  .custom_list_mo,
  .custom_view_mo,
  .mypage_mo_wrap {
    display: block !important;
  }

  /* ----------------------------------------------------------------------
       Mobile Header (#header_mobile)
       ---------------------------------------------------------------------- */
  #header_mobile {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    background: #fff !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    border-bottom: solid 1px #f6f6f6 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    height: 60px !important;
  }

  #header_mobile .inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 15px !important;
    height: 100% !important;
    position: relative !important;
  }

  #header_mobile #gnb {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
  }

  #header_mobile #gnb a {
    display: block !important;
    width: 31px !important;
    height: 31px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: url("/mobile/img/common/gnb_ico.png") no-repeat center
      center/cover !important;
  }

  #header_mobile.open #gnb a {
    background-image: url("/mobile/img/btn/gnb_close_ico.png") !important;
  }

  #header_mobile .inner .logo a {
    display: block !important;
    max-width: 111px !important;
  }

  #header_mobile .inner .logo a img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  #header_mobile .hd_r_wrap {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
  }

  #header_mobile .hd_r_wrap ul {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
  }

  #header_mobile .hd_r_wrap ul li {
    display: flex !important;
    align-items: center !important;
  }

  #header_mobile .hd_r_wrap ul li .searchmenu {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: url("/mobile/img/ico/ico_searchmenu.png") no-repeat center
      center/cover !important;
  }

  #header_mobile .hd_r_wrap ul li .searchmenu.on {
    background-image: url("/mobile/img/ico/search_close.png") !important;
  }

  /* Mobile Search Popup */
  #header_mobile .search_pop {
    display: none;
    width: 100% !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    z-index: 9998 !important;
    padding: 8px 15px !important;
    border-bottom: 1px solid #ddd !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  }

  #header_mobile .search_pop.on {
    display: block !important;
  }

  #header_mobile .mv_search {
    margin-top: 0px;
    width: 100%;
  }

  #header_mobile .search_pop input {
    border: none !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    background: #f4f5f7 !important;
    border-radius: 999px !important;
  }

  #header_mobile .search_pop input:focus {
    outline: none !important;
  }

  #header_mobile .search_pop input::placeholder {
    font-size: 13px !important;
    color: #999 !important;
  }

  /* Mobile Sliding Drawer (.header_bot) */
  #header_mobile .header_bot {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    position: fixed !important;
    top: 60px !important;
    left: -100% !important;
    bottom: 0 !important;
    height: calc(100vh - 60px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transition: left 0.35s ease-in-out !important;
    background: #fff !important;
    z-index: 9999 !important;
  }

  #header_mobile .header_bot.open {
    left: 0 !important;
    right: 0 !important;
  }

  #header_mobile .header_lo {
    border-bottom: solid 7px #eee !important;
  }

  #header_mobile .header_lo .logout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 15px !important;
    background: #f9f9f9 !important;
  }

  #header_mobile .header_lo .logout .go_login {
    font-size: 14px !important;
    color: #454545 !important;
  }

  #header_mobile .header_lo .logout .go_login a {
    font-size: 14px !important;
    color: #116ad4 !important;
    position: relative !important;
  }

  #header_mobile .header_lo .logout .go_login a::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: #116ad4 !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 0 !important;
  }

  #header_mobile .header_lo .logout .go_join {
    width: 80px !important;
    height: 34px !important;
    line-height: 34px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: #116ad4 !important;
    border-radius: 999px !important;
    display: block !important;
  }

  /* Member Logged-In Profile Drawer */
  #header_mobile .header_lo .login .my_info {
    width: calc(100% - 30px) !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
  }

  #header_mobile .my_info .profile {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }

  #header_mobile .my_info .profile .pro_l {
    display: flex !important;
    align-items: center !important;
  }

  #header_mobile .my_info .profile .pro_ico {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: solid 1px #e6e6e6 !important;
    margin-right: 12px !important;
  }

  #header_mobile .my_info .profile .pro_ico span {
    display: block !important;
    padding-top: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  #header_mobile .my_info .profile .user_cl {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #116ad4 !important;
    margin-bottom: 4px !important;
  }

  #header_mobile .my_info .profile .user_name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #252525 !important;
  }

  #header_mobile .my_info .profile .pro_r a {
    display: block !important;
    width: 75px !important;
    height: 30px !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 28px !important;
    border-radius: 999px !important;
  }

  #header_mobile .my_info .profile .proset {
    color: #116ad4 !important;
    border: solid 1px #116ad4 !important;
  }

  #header_mobile .my_info .profile .logout_p {
    color: #6b6b6b !important;
    border: solid 1px #dbdbdb !important;
    margin-top: 8px !important;
  }

  #header_mobile .my_info .cash_status {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    background: #116ad4 !important;
    margin-bottom: 16px !important;
  }

  #header_mobile .my_info .cash_status .cash_state {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
  }

  #header_mobile .my_info .cash_status a {
    display: block !important;
    font-size: 13px !important;
    color: #fff !important;
  }

  #header_mobile .my_info .menu_list {
    border: solid 1px #dbdbdb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  #header_mobile .my_info .menu_list ul {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #header_mobile .my_info .menu_list ul li {
    width: 50% !important;
    height: 54px !important;
    padding: 0 14px 0 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: solid 1px #dbdbdb !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #header_mobile .my_info .menu_list ul li:nth-child(2n-1) {
    border-right: solid 1px #dbdbdb !important;
  }

  #header_mobile .my_info .menu_list ul li:nth-child(3),
  #header_mobile .my_info .menu_list ul li:last-child {
    border-bottom: none !important;
  }

  #header_mobile .my_info .menu_list ul li .menu_nem {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  #header_mobile .my_info .menu_list ul li:first-of-type .menu_nem {
    padding-left: 21px !important;
    background: url("/mobile/img/ico/ico_mymainmenu01.png") no-repeat left
      center/13px 16px !important;
  }

  #header_mobile .my_info .menu_list ul li:nth-of-type(2n) .menu_nem {
    padding-left: 22px !important;
    background: url("/mobile/img/ico/ico_mymainmenu02.png") no-repeat left
      center/14px 14px !important;
  }

  #header_mobile .my_info .menu_list ul li:nth-of-type(3) .menu_nem {
    padding-left: 21px !important;
    background: url("/mobile/img/ico/ico_mymainmenu03.png") no-repeat left
      center/13px 19px !important;
  }

  #header_mobile .my_info .menu_list ul li:last-of-type .menu_nem {
    padding-left: 24px !important;
    background: url("/mobile/img/ico/ico_mymainmenu04.png") no-repeat left
      center/16px 14px !important;
  }

  #header_mobile .my_info .menu_list ul li .mneu_num {
    font-size: 14px !important;
  }

  #header_mobile .my_info .menu_list ul li .mneu_num strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
  }

  /* Drawer Category Tabs */
  #header_mobile .header_bot .mnb_list {
    display: flex !important;
  }

  #header_mobile .mnb_list .tablist {
    background: #f5f5f5 !important;
    border-right: solid 1px #ececec !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #header_mobile .header_bot .mnb_list .tablist li a {
    display: block !important;
    width: 110px !important;
    line-height: 50px !important;
    padding-left: 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #252525 !important;
  }

  #header_mobile .header_bot .mnb_list .tablist li a.on {
    background: #fff !important;
    border-bottom: solid 1px #ececec !important;
    position: relative !important;
  }

  #header_mobile .header_bot .mnb_list .tablist li a.on::after {
    content: "" !important;
    display: block !important;
    width: 1px !important;
    height: 100% !important;
    background: #fff !important;
    position: absolute !important;
    right: -1px !important;
    top: 0 !important;
  }

  #header_mobile .header_bot .mnb_list .submenu_list {
    width: calc(100% - 110px) !important;
    padding: 0 20px 50px !important;
    list-style: none !important;
    margin: 0 !important;
  }

  #header_mobile .header_bot .mnb_list .submenu_list li {
    padding: 15px 0 !important;
    border-bottom: solid 1px #f4f4f4 !important;
  }

  #header_mobile .header_bot .mnb_list .submenu_list li a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #252525 !important;
    display: block !important;
  }

  /* ----------------------------------------------------------------------
       Mobile Main Section (.main_mo_wrap)
       ---------------------------------------------------------------------- */
  .main_mo_wrap {
    width: 100% !important;
    padding: 0 !important;
  }

  .main_mo_wrap .main_visual_slider {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .main_mo_wrap .main_slider_mo {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .main_mo_wrap .main_slider_mo .swiper-slide {
    width: 100% !important;
  }

  .main_mo_wrap .main_slider_mo .swiper-slide a {
    display: block !important;
    width: 100% !important;
  }

  .main_mo_wrap .main_slider_mo .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* P6: hold the slider's height before the image arrives (it pushed the page down ~280px) */
    aspect-ratio: auto 720 / 520;
  }

  .main_mo_wrap .main_slider_mo .total_slide {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0.85 !important;
    width: 85px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background-color: rgba(37, 37, 37, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    z-index: 10 !important;
  }

  .main_mo_wrap .main_slider_mo .total_slide span {
    font-size: 14px !important;
    color: #ffffff !important;
    font-weight: 300 !important;
  }

  /* Category Section */
  .main_mo_wrap .cate_sec {
    padding: 30px 0 10px !important;
  }

  .main_mo_wrap .cate_sec ul {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .main_mo_wrap .cate_sec ul li {
    width: calc(25% - 15px) !important;
    text-align: center !important;
    margin-bottom: 25px !important;
  }

  .main_mo_wrap .cate_sec ul li:not(:nth-of-type(4n)) {
    margin-right: 20px !important;
  }

  .main_mo_wrap .cate_sec ul li a {
    display: block !important;
    text-decoration: none !important;
  }

  .main_mo_wrap .cate_sec ul li .cate_icon {
    width: 63px !important;
    height: 63px !important;
    margin: 0 auto 10px !important;
    position: relative !important;
    border-radius: 20px !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main_mo_wrap .cate_sec ul li .cate_icon img {
    max-width: 63px !important;
    width: 63px;
    display: block !important;
  }

  .main_mo_wrap .cate_sec ul li:hover .cate_icon::before,
  .main_mo_wrap .cate_sec ul li.on .cate_icon::before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    border: solid 2px #1a7fa6 !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .main_mo_wrap .cate_sec ul li a p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #252525 !important;
    margin: 0 !important;
    font-weight: 500 !important;
  }

  /* Middle Banner */
  .main_mo_wrap .main_midbanwrap {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 15px 0 25px !important;
  }

  .main_mo_wrap .main_midbanwrap .ban_item a {
    display: block !important;
  }

  .main_mo_wrap .main_midbanwrap .ban_item a img {
    width: 100% !important;
    display: block !important;
    border-radius: 8px !important;
  }

  /* Product Lists (.advert_sec) */
  .main_mo_wrap .advert_sec {
    margin-bottom: 25px !important;
  }

  .main_mo_wrap .sec_tit_top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 25px !important;
    margin-bottom: 16px !important;
  }

  .main_mo_wrap .main_tit {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #252525 !important;
    margin: 0 !important;
  }

  .main_mo_wrap .main_tit strong {
    color: #1c77ca !important;
    font-size: 21px !important;
    margin-right: 3px !important;
  }

  .main_mo_wrap .sec_tit_top .more_btn {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #6b6b6b !important;
    margin-left: 10px !important;
    padding: 0 10px !important;
    border: solid 1px #dbdbdb !important;
    border-radius: 999px !important;
  }

  .main_mo_wrap .sec_tit_top .more_link {
    display: flex !important;
    margin-left: auto !important;
    width: 26px !important;
    height: 26px !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main_mo_wrap .sec_tit_top .more_link span {
    display: block !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #cccccc !important;
  }

  .main_mo_wrap .sec_tit_top .more_link span + span {
    margin-left: 3px !important;
  }

  /* Product Cards in Mobile */
  .main_mo_wrap .advert_wrap {
    margin-bottom: 30px !important;
    position: relative !important;
    width: 100% !important;
  }

  .main_mo_wrap .advert_wrap ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .main_mo_wrap .advert_wrap ul + ul {
    margin-top: 18px !important;
  }

  .main_mo_wrap .advert_wrap ul li {
    margin-bottom: 18px !important;
  }

  .main_mo_wrap .advert_wrap ul li a.item_box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-decoration: none !important;
  }

  .main_mo_wrap .advert_wrap ul li .item_imgbox {
    width: calc(43% - 11px) !important;
    margin-right: 11px !important;
    flex-shrink: 0 !important;
  }

  .main_mo_wrap .advert_wrap ul li .item_imgbox span {
    display: block !important;
    padding-top: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    border: solid 1px #dbdbdb !important;
    border-radius: 8px !important;
  }

  .main_mo_wrap .advert_wrap ul li .item_txtbox {
    width: 57% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .main_mo_wrap .item_txtbox .seller_id {
    display: flex !important;
    align-items: center !important;
  }

  .main_mo_wrap .item_txtbox .seller {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #6b6b6b !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main_mo_wrap .item_txtbox .level {
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    display: none !important;
    flex: 0 0 auto !important;
  }

  .main_mo_wrap .item_txtbox .level i {
    width: 12px !important;
    height: 12px !important;
    background: no-repeat center / 12px auto !important;
    display: block !important;
    margin-top: -1px !important;
    margin-right: 4px !important;
  }

  .main_mo_wrap .advert_wrap ul li .item_txtbox .item_tit {
    margin-top: 6px !important;
    width: 100% !important;
    line-height: 1.4em !important;
    max-height: 2.8em !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    word-break: break-all !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
  }

  .main_mo_wrap .item_txtbox .item_bot {
    display: flex !important;
  }

  .main_mo_wrap .item_txtbox .item_price {
    font-size: 12px !important;
    color: #252525 !important;
  }

  .main_mo_wrap .item_txtbox .item_price strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: "NanumSquare", sans-serif !important;
    color: #111 !important;
  }

  /* Promotion Banner Visual */
  .main_mo_wrap .promotion_banner_visual {
    margin: 25px 0 35px !important;
  }

  .main_mo_wrap .promotion_banner_visual .banner_slider_mo {
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .main_mo_wrap .promotion_content img {
    width: 100% !important;
    border-radius: 8px !important;
    display: block !important;
  }

  .main_mo_wrap .promotion_content .promotion_ttl {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    margin-top: 8px !important;
  }

  /* News Section */
  .main_mo_wrap .news_sec {
    margin: 30px 0 40px !important;
  }

  .main_mo_wrap .news_sec .main_tit {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #252525 !important;
    margin-bottom: 16px !important;
  }

  .main_mo_wrap .news_sec ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .main_mo_wrap .news_sec ul li {
    margin-bottom: 12px !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background: #fff !important;
  }

  .main_mo_wrap .news_sec ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
  }

  .main_mo_wrap .news_sec ul li .img_box {
    width: 85px !important;
    height: 65px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  .main_mo_wrap .news_sec ul li .news_txt_wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .main_mo_wrap .news_sec ul li .news_tit {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .main_mo_wrap .news_sec ul li .news_txt {
    font-size: 12px !important;
    color: #6b6b6b !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ----------------------------------------------------------------------
       Mobile Footer (.footer_mobile)
       ---------------------------------------------------------------------- */
  #footer {
    padding: 0 !important;
    background: #fff !important;
    border-top: none !important;
  }

  .footer_mobile {
    border-top: solid 2px #35353f !important;
    background: #fff !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .footer_mobile .foot_top {
    border-bottom: solid 1px #eee !important;
    padding: 18px 15px 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .footer_mobile .foot_top ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer_mobile .foot_top ul li {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: nowrap !important;
  }

  .footer_mobile .foot_top ul li span {
    display: block !important;
    margin: 0 14px 10px 0 !important;
  }

  .footer_mobile .foot_top ul li span a {
    display: block !important;
    font-size: 13px !important;
    color: #6b6b6b !important;
  }

  .footer_mobile .foot_top ul li a.contact_tr {
    color: #252525 !important;
    font-weight: 500 !important;
  }

  .footer_mobile .foot_top ul li span:last-of-type {
    margin-right: 0 !important;
  }

  .footer_mobile .foot_bot {
    padding: 22px 15px 40px !important;
  }

  .footer_mobile .foot_bot .foot_logo a {
    display: inline-block !important;
    margin-bottom: 16px !important;
    max-width: 140px !important;
  }

  .footer_mobile .foot_bot .foot_logo img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .footer_mobile .foot_bot .foot_info address {
    font-size: 12px !important;
    line-height: 1.75 !important;
    color: #6b6b6b !important;
    font-style: normal !important;
  }

  .footer_mobile .foot_bot .foot_info address .ft_bk {
    color: #454545 !important;
  }

  .footer_mobile .foot_bot .foot_info .copy {
    margin-top: 12px !important;
    font-size: 12px !important;
    color: #6b6b6b !important;
  }

  .footer_mobile .foot_bot .cs_info {
    margin: 30px 0 20px 0 !important;
  }

  .footer_mobile .foot_bot .cs_info .cs_tit {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #454545 !important;
    margin-bottom: 10px !important;
  }

  .footer_mobile .foot_bot .cs_info .cs_call a {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #35353f !important;
    margin-bottom: 14px !important;
  }

  .footer_mobile .foot_bot .cs_info .cs_time {
    font-size: 12px !important;
    color: #454545 !important;
    margin-bottom: 18px !important;
  }

  .footer_mobile .foot_bot .cs_info .cs_time > div:first-of-type {
    margin-bottom: 6px !important;
  }

  .footer_mobile .foot_bot .cs_info .contact_info {
    width: 100% !important;
    max-width: 360px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
  }

  .footer_mobile .foot_bot .cs_info .contact_info li {
    display: inline-block !important;
    width: calc(50% - 5px) !important;
    border: solid 1px #dbdbdb !important;
    border-radius: 4px !important;
    background: #fff !important;
  }

  .footer_mobile .foot_bot .cs_info .contact_info li:first-of-type {
    margin-right: 10px !important;
  }

  .footer_mobile .foot_bot .cs_info .contact_info li a {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #454545 !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }

  .footer_mobile .foot_bot .notice_txt {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #6b6b6b !important;
    padding-top: 16px !important;
    border-top: solid 1px #eee !important;
    word-break: keep-all !important;
  }

  /* ----------------------------------------------------------------------
       Subpages General Layout on Mobile (max-width: 768px)
       ---------------------------------------------------------------------- */
  .sub {
    padding-top: 15px !important;
    padding-bottom: 40px !important;
  }

  .sub_layout {
    flex-direction: column !important;
    width: 100% !important;
    padding-bottom: 30px !important;
  }

  .sub_layout .snb_box {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }

  .sub_layout .snb_box .snb_ttl {
    font-size: 18px !important;
    padding: 8px 0 !important;
  }

  .sub_layout .snb_box .snb_list01 {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-top: none !important;
    border-bottom: 1px solid #eee !important;
  }

  .sub_layout .snb_box .snb_list01 > li > a {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    background: #f4f5f7 !important;
    border: 1px solid #e0e0e0 !important;
  }

  .sub_layout .snb_box .snb_list01 > li > a.on {
    background: #116ad4 !important;
    color: #fff !important;
    border-color: #116ad4 !important;
  }

  .sub_layout .content_box {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* Category Swiper on Mobile */
  .prd1depth {
    padding: 0 40px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 15px 0 20px !important;
  }

  .prd1depth .category-swiper-container {
    overflow: hidden !important;
  }

  .prd1depth .cat_btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .prd1depth .cat_btn .cate_icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  .prd1depth .cat_btn span.txt {
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #252525 !important;
  }

  .category-swiper-button-prev,
  .category-swiper-button-next {
    position: absolute !important;
    top: 18px !important;
    width: 18px !important;
    height: 24px !important;
    cursor: pointer !important;
    z-index: 10 !important;
  }

  .category-swiper-button-prev {
    left: 10px !important;
  }
  .category-swiper-button-next {
    right: 10px !important;
  }

  .prd2depth {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 8px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #fff !important;
  }

  .prd2depth ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .prd2depth ul li a {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    color: #555 !important;
  }

  .prd2depth ul li a.on {
    background: transparent !important;
    color: #116ad4 !important;
    font-weight: 600 !important;
  }

  /* Mobile Product Detail View (.item_view_mo) */
  .item_view_mo {
    padding-top: 0 !important;
    padding-bottom: 80px !important;
  }

  .item_view_mo .itemview_sec {
    position: relative !important;
    background: #fff !important;
  }

  .item_view_mo .viewpage_num {
    display: inline-block !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.62) !important;
    z-index: 10 !important;
  }

  .item_view_mo .viewtem_wrap {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .item_view_mo .viewtem_wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .item_view_mo .viewtem_infowrap {
    padding: 20px 0 10px !important;
  }

  .item_view_mo .viewtem_tit {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #252525 !important;
    margin-bottom: 12px !important;
  }

  .item_view_mo .viewtem_txt {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #6b6b6b !important;
    margin-bottom: 18px !important;
  }

  .item_view_mo .viewtem_price {
    font-size: 18px !important;
    color: #252525 !important;
  }

  .item_view_mo .viewtem_price strong {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111 !important;
  }

  .item_view_mo .viewtem_tab {
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 99 !important;
  }

  .item_view_mo .viewtem_tab ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .item_view_mo .viewtem_tab ul li button {
    width: 100% !important;
    height: 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b6b6b !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
  }

  /* Fixed Bottom Action Bar on Product View */
  .item_cartbtnlist {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    transform: unset;
  }

  .item_cartbtn ul {
    display: flex !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .item_cartbtn ul li {
    flex: 1 !important;
  }

  .item_cartbtn ul li button {
    width: 100% !important;
    height: 48px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
  }

  .item_cartbtn .quest_btn {
    background: #f4f5f7 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
  }

  .item_cartbtn .sell_btn {
    background: #116ad4 !important;
    color: #fff !important;
  }

  /* Option Selection Drawer Popup */
  .item_cartpopup {
    display: none;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
    padding: 20px 15px 15px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .item_cartpopup .cart_btnwrap {
    text-align: center !important;
    margin-bottom: 15px !important;
  }

  .item_cartpopup .cart_down {
    width: 40px !important;
    height: 6px !important;
    border-radius: 4px !important;
    background: #ccc !important;
    border: none !important;
    cursor: pointer !important;
  }

  .item_cartpopup select {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }

  .item_cartpopup .cart_totalinfo {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 !important;
    border-top: 1px solid #eee !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .item_cartpopup .cart_price {
    font-size: 20px !important;
    color: #116ad4 !important;
  }

  /* Forms, Tables, and Buttons Global Mobile Fit */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 14px !important;
    /* border-radius: 8px !important; */
  }

  .btn_wrap,
  .mbtn_wrap {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .btn_wrap button,
  .btn_wrap a,
  .mbtn_wrap button,
  .mbtn_wrap a {
    flex: 1 !important;
    height: 46px !important;
    line-height: 46px !important;
    text-align: center !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* ----------------------------------------------------------------------
       Floating Top Button on Mobile
       ---------------------------------------------------------------------- */
  .top_btn {
    right: 15px !important;
    bottom: 25px !important;
    z-index: 999 !important;
  }
  .top_btn a {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #3e3e3e url("/mobile/img/btn/go_topbtn.png") no-repeat center
      center/cover !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  }
  .top_btn a img {
    display: none !important;
  }

  .sear_box ul li .thumb {
    width: calc(43% - 11px);
    margin-right: 11px;
  }

  .prd_item .txt {
    border: unset;
    max-width: 57%;
  }

  .prd_item {
    display: block;
    border: unset;
    border-radius: 8px;
    justify-content: flex-start !important;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile Screens (<= 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .main_mo_wrap .cate_sec ul li {
    width: calc(25% - 12px) !important;
  }
  .main_mo_wrap .cate_sec ul li:not(:nth-of-type(4n)) {
    margin-right: 16px !important;
  }
  .main_mo_wrap .cate_sec ul li .cate_icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 20px !important;
  }
  .main_mo_wrap .cate_sec ul li a p {
    font-size: 11px !important;
  }
  .main_mo_wrap .advert_wrap ul li .item_imgbox {
    width: 105px !important;
    margin-right: 10px !important;
  }
  .main_mo_wrap .advert_wrap ul li .item_txtbox {
    width: calc(100% - 115px) !important;
  }
}

#myNav,
.mypage_nav_mo,
#my_wrap,
.mypage_mo_wrap {
  display: none !important;
}

.order_body .pt_left .pt_box {
  align-items: center;
}

.unit_won {
  margin-right: 2px;
}

@media screen and (max-width: 768px) {
  .mypage_pc_wrap {
    display: none !important;
  }

  #my_wrap,
  .mypage_mo_wrap {
    display: block !important;
    width: 100% !important;
    border-top: unset !important;
  }

  .mypage_container,
  .mypage_container.sub.mypage,
  .mypage {
    padding: 0 !important;
    width: 100% !important;
  }

  .mypage_container .inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .mypage_layout {
    display: block !important;
    padding: 0 0 40px !important;
    width: 100% !important;
  }

  .mypage_layout .mypage_nav {
    display: none !important;
  }

  #myNav,
  .mypage_nav_mo {
    display: block !important;
    width: calc(100% + 30px) !important;
    max-width: calc(100% + 30px) !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #fff !important;
    padding: 0 !important;
  }

  #myNav #subnav {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    text-align: center !important;
  }

  #myNav #subnav a {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 50px !important;
    text-align: center !important;
    color: #252525 !important;
  }

  #myNav .my1depth {
    width: 100% !important;
    background: #fff !important;
  }

  #myNav .my1depth ul {
    display: flex !important;
    padding: 0 0 1px 15px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  #myNav .my1depth ul::-webkit-scrollbar {
    display: none !important;
  }

  #myNav .my1depth ul li {
    display: inline-block !important;
    flex: 0 0 auto !important;
  }

  #myNav .my1depth ul li a {
    display: inline-block !important;
    margin: 0 11px !important;
    font-size: 14px !important;
    line-height: 41px !important;
    color: #6b6b6b !important; /* #999 was 2.8:1 */
    position: relative !important;
    font-weight: 500 !important;
  }

  #myNav .my1depth ul li:first-child a {
    margin-left: 0 !important;
  }

  #myNav .my1depth ul li a.on {
    color: #0d6bc4 !important; /* #167edd was 4.0:1 */
    font-weight: 700 !important;
  }

  #myNav .my1depth ul li a.on::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #167edd !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    z-index: 3 !important;
  }

  #myNav .my2depth {
    display: block !important;
    height: 50px !important;
    padding: 8px 15px !important;
    margin-top: -1px !important;
    background: #f3f4f8 !important;
    box-sizing: border-box !important;
  }

  #myNav .my2depth ul {
    display: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #myNav .my2depth ul::-webkit-scrollbar {
    display: none !important;
  }

  #myNav .my2depth ul.on {
    display: flex !important;
    align-items: center !important;
  }

  #myNav .my2depth ul li {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin-right: 10px !important;
  }

  #myNav .my2depth ul li a {
    display: inline-block !important;
    height: 34px !important;
    font-size: 13px !important;
    line-height: 34px !important;
    text-align: center !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border: 1px solid #e9ecef !important;
    color: #454545 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #myNav .my2depth ul li a.on {
    background: #0062e0 !important; /* white on #0068f0 was 4.4:1 */
    color: #fff !important;
    border-color: #0062e0 !important;
    font-weight: 700 !important;
  }

  /* Content Area below #myNav */
  .mypage_layout .content_box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-top: 0 !important;
    padding: 0 !important;
  }

  .mypage_layout .content_box .cont {
    padding: 0 !important;
  }

  .my_status_row {
    display: none !important;
  }

  .mypage_layout .mp_ttl_row {
    padding: 24px 0 16px !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .mypage_layout .mp_ttl {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #252525 !important;
  }

  .mypage_layout .content_box form,
  .mypage_layout .content_box .ps_list,
  .mypage_layout .content_box .od_list,
  .mypage_layout .content_box .table_wrap,
  .mypage_layout .content_box .profile_guide_box {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  .mypage_layout .content_box form {
    padding: 0 !important;
  }

  .mp_ttl_row .right {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .mypage_layout .table_wrap,
  .mypage_layout .profile_guide_box {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mypage_layout table {
    min-width: 100% !important;
  }

  .ps_list .ps_status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ps_list .ps_status button:last-of-type {
    margin-left: 0;
  }

  .mp_search_box .datepick_row input {
    border-radius: 0 !important;
  }

  .mypage_mo_wrap .my_list ul li .print_btn {
    width: 70px !important;
    min-width: 70px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .ad_order {
    flex-direction: column;
  }

  .ad_order .ad_info_box {
    width: 100%;
  }

  .ad_order .ad_form {
    width: 100%;
    margin-left: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin-top: 30px;
  }

  .ad_order .ad_form_in {
    padding: 30px 8px 24px;
    border: 1px solid #eeeeee;
  }

  .ad_order .ad_form .cash_input {
    flex-wrap: wrap;
    gap: 5px;
  }

  .radio_list input + label {
    padding-left: 0;
    padding-top: 0;
  }

  .ad_order .ad_form .now_cash {
    margin-left: 0;
  }

  .list_table table tr th {
    text-wrap: nowrap;
  }

  .mp_cont {
    padding: 40px 10px;
    border: solid 1px #dcdcdc;
  }

  .my_date select {
    width: 49.5%;
    height: 40px;
  }

  #my_wrap .my_date .search_box {
    margin-top: 10px;
  }

  #my_wrap .my_date .sarh02 .search_box {
    margin-top: 0px;
  }

  .mypage_coupon .coupon_status {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    border: 1px solid #d6d6d6;
    padding: 28px 18px;
    flex-direction: column;
    gap: 10px;
  }

  .mypage_mo_wrap .mylwd_wrap {
    padding: 15px 0 !important;
    border-bottom: solid 7px #eee !important;
  }

  .mypage_mo_wrap .mylwd_wrap .cal_list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mypage_mo_wrap .mylwd_wrap .cal_list li {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    background: #f0f7fe !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  #my_wrap .mylwd_wrap .cal_list li + li {
    margin-top: 0px;
    margin-left: 0;
  }

  .od_list .od_row {
    padding-top: 10px;
  }

  .mypage_mo_wrap .mylwd_wrap .cal_list li span:first-child {
    font-size: 12px !important;
    color: #666 !important;
  }

  .mypage_mo_wrap .mylwd_wrap .cal_list li span:last-child {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #116ad4 !important;
  }

  .mypage_mo_wrap .od_list.cal_list .od_row {
    padding: 15px 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_mo_wrap .od_list.cal_list .data_row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
  }

  .mypage_mo_wrap .od_list.cal_list .data_row .title {
    font-size: 13px !important;
    color: #6b6b6b !important;
    width: 30% !important;
  }

  .mypage_mo_wrap .od_list.cal_list .data_row .info {
    font-size: 13px !important;
    color: #252525 !important;
    text-align: right !important;
    width: 70% !important;
  }

  .mypage_mo_wrap .my_date.calc_mid .sabtn_wrap {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  .mypage_mo_wrap .my_date.calc_mid .sabtn_wrap .contact_btn {
    flex: 1 !important;
    height: 32px !important;
    font-size: 12px !important;
    border: 1px solid #dbdbdb !important;
    background: #fff !important;
    border-radius: 4px !important;
    color: #555 !important;
    cursor: pointer !important;
  }

  .mypage_mo_wrap .my_date.calc_mid .sabtn_wrap .contact_btn.active {
    border-color: #116ad4 !important;
    background: #116ad4 !important;
    color: #fff !important;
  }

  .mypage_mo_wrap .adm_wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #eee !important;
  }

  .mypage_mo_wrap .adm_wrap select {
    flex: 1 !important;
    height: 36px !important;
    border: 1px solid #dbdbdb !important;
    font-size: 13px !important;
    padding: 0 8px !important;
  }

  .mypage_mo_wrap .adm_wrap .ex_ipbtn {
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid #c62828 !important;
    background: #fff !important;
    color: #c62828 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  .order_wrap,
  .sub.order.form,
  #container.sub.order_wrap,
  #container.sub.order.form {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
  }

  .order_wrap .inner,
  .od_wrap.oding .inner {
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .order_wrap .order_top,
  .od_wrap.oding .od_top {
    border: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 15px !important;
  }

  .order_wrap .order_top {
    display: none !important;
  }

  .order_wrap .order_ttl,
  .od_wrap.oding .od_tit {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #252525 !important;
    margin-bottom: 12px !important;
  }

  .order_wrap .order_top ol.order_step,
  .od_wrap.oding .od_top ul {
    display: flex !important;
    border-bottom: 2px solid #333 !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    list-style: none !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .order_wrap .order_top ol.order_step li,
  .od_wrap.oding .od_top ul li {
    flex: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    color: #6b6b6b !important;
    background: transparent !important;
    border: none !important;
  }

  .order_wrap .order_top ol.order_step li.on,
  .od_wrap.oding .od_top ul li.on {
    color: #116ad4 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #116ad4 !important;
    margin-bottom: -2px !important;
  }

  /* Step Banners (STEP 01, STEP 02, STEP 03) */
  .order_wrap .order_step,
  .od_wrap.oding .order_step,
  .order .order_step {
    width: 100% !important;
    height: 44px !important;
    margin: 20px 0 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    border: solid 1px #dbdbdb !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .order_wrap .order_step .step,
  .od_wrap.oding .order_step .step,
  .order .order_step .step {
    width: 102px !important;
    height: 100% !important;
    line-height: 44px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding-right: 10px !important;
    background: #116ad4 url("/mobile/img/sub/od_arrowbg.png") no-repeat right
      center !important;
    background-size: cover !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .order_wrap .order_step h3,
  .od_wrap.oding .order_step h3,
  .order .order_step h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    color: #252525 !important;
    margin: 0 !important;
  }

  /* STEP 01: Product Info List & Table Conversion to Mobile Card */
  .order_wrap #od_tb {
    width: 100% !important;
    border-top: solid 2px #aaa !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 20px !important;
  }

  .order_wrap #od_tb thead {
    display: none !important;
  }

  .order_wrap #od_tb tbody,
  .order_wrap #od_tb tr,
  .order_wrap #od_tb td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .order_wrap #od_tb tr {
    padding: 14px 0 !important;
    border-bottom: 1px solid #dbdbdb !important;
  }

  .order_wrap #od_tb tr:last-child {
    border-bottom: none !important;
  }

  .order_wrap #od_tb td.item_info {
    padding: 0 !important;
  }

  .order_wrap #od_tb td:not(.item_info) {
    display: none !important;
  }

  .order_wrap .order_info_item,
  .od_wrap.oding .od_ibox .od_box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .order_wrap .order_info_item .img_box,
  .od_wrap.oding .od_ibox .od_box .od_img {
    width: 85px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
  }

  .order_wrap .order_info_item .img_box a.img_thumb,
  .od_wrap.oding .od_ibox .od_box .od_img a.img_thumb {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .order_wrap .order_info_item .img_box .img_thumb span,
  .od_wrap.oding .od_ibox .od_box .od_img .img_thumb span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .order_wrap .order_info_item .txt_box,
  .od_wrap.oding .od_ibox .od_box .od_info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .order_wrap .order_info_item .txt_box .subject,
  .od_wrap.oding .od_ibox .od_box .subject {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .order_wrap .order_info_item .txt_box .option,
  .od_wrap.oding .od_ibox .od_box .option {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #555 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .order_wrap .order_info_item .txt_box .option li {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .order_wrap .order_info_item .txt_box .option .label {
    font-weight: 500 !important;
    color: #454545 !important;
  }

  .order_wrap .order_info_item .txt_box .option .data,
  .od_wrap.oding .od_ibox .od_box .option .data {
    color: #6b6b6b !important;
  }

  /* STEP 02: Delivery Address (sa_tab & sa_list / od_dv) */
  .order_wrap .sa_tab,
  .od_wrap.oding .deliv .sa_tab {
    display: flex !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .order_wrap .sa_tab li,
  .od_wrap.oding .deliv .sa_tab li {
    flex: 1 !important;
    border: solid 1px #aaa !important;
    margin-left: -1px !important;
    position: relative !important;
  }

  .order_wrap .sa_tab li:first-child {
    margin-left: 0 !important;
  }

  .order_wrap .sa_tab li button,
  .od_wrap.oding .deliv .sa_tab li button {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 38px !important;
    height: 38px !important;
    color: #252525 !important;
    background: #fff !important;
    border: none !important;
    cursor: pointer !important;
  }

  .order_wrap .sa_tab li.active,
  .od_wrap.oding .deliv .sa_tab li.active {
    border: solid 1px #116ad4 !important;
    z-index: 1 !important;
  }

  .order_wrap .sa_tab li.active button,
  .od_wrap.oding .deliv .sa_tab li.active button {
    color: #116ad4 !important;
    font-weight: 700 !important;
  }

  .order_wrap .sa_list {
    /* R4-2: the table itself stays display:table, so its rows (flex) were laid out inside the 160px <col> */
    display: block !important;
    width: 100% !important;
    border-top: solid 2px #aaa !important;
    margin-bottom: 20px !important;
  }

  .order_wrap .sa_list colgroup {
    display: none !important;
  }

  .order_wrap .sa_list tbody,
  .order_wrap .sa_list tr,
  .order_wrap .sa_list th,
  .order_wrap .sa_list td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .order_wrap .sa_list tr {
    display: flex !important;
    padding: 10px 0 !important;
    border-bottom: solid 1px #eee !important;
    align-items: center !important;
  }

  .order_wrap .sa_list tr:last-child {
    border-bottom: none !important;
  }

  .order_wrap .sa_list th {
    width: 28% !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    margin: 0 !important;
  }

  .order_wrap .sa_list td {
    width: 72% !important;
  }

  .order_wrap .sa_list td input[type="text"],
  .order_wrap .sa_list td select {
    width: 100% !important;
    height: 36px !important;
    border: solid 1px #dbdbdb !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  .order_wrap .sa_list td textarea {
    width: 100% !important;
    height: 90px !important;
    resize: none !important;
    padding: 10px !important;
    border: solid 1px #dbdbdb !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  .order_wrap .sa_list .add1 {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .order_wrap .sa_list .btn_add {
    width: 75px !important;
    line-height: 34px !important;
    height: 36px !important;
    text-align: center !important;
    border: solid 1px #666 !important;
    background: #fff !important;
    color: #252525 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  .order_wrap .sa_list .add1 input {
    flex: 1 !important;
  }

  .order_wrap .sa_list .add2 {
    margin-bottom: 8px !important;
  }

  .order_wrap .sa_list .ph {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    /* R4-2: the PC rule made it 60% wide */
    width: 100% !important;
  }

  .order_wrap .sa_list .ph select,
  .order_wrap .sa_list .ph input {
    min-width: 0 !important;
  }

  /* R4-2: the PC address block puts 기본주소 / 상세주소 side by side at 50%; one under the other here */
  .order_wrap .sa_list td .add_box {
    display: block !important;
    width: 100% !important;
  }

  .order_wrap .sa_list td .add2,
  .order_wrap .sa_list td .add3 {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .order_wrap .sa_list td input#zipcode {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .order_wrap .sa_list .ph select,
  .order_wrap .sa_list .ph input {
    flex: 1 !important;
    height: 36px !important;
    border: solid 1px #dbdbdb !important;
  }

  .order_wrap .sa_list .ph span {
    margin: 0 2px !important;
    color: #6b6b6b !important;
  }

  /* STEP 02 / 03: Payment & Coupon & Points */
  .order_wrap .point_row {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .order_wrap .point_row .pt_left,
  .order_wrap .point_row .pt_left .order_cont {
    width: 100% !important;
    display: block !important;
  }

  .order_wrap .pt_row,
  .od_wrap.oding .cu_box .pt_row {
    padding: 16px 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  .order_wrap .pt_row {
    flex-direction: column;
  }

  .order_wrap .pt_row:last-child {
    border-bottom: none !important;
  }

  .order_wrap .pt_row > .label,
  .od_wrap.oding .cu_box .label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #252525 !important;
    margin-bottom: 8px !important;
    display: block !important;
  }

  .order_wrap .pt_row .cont {
    display: block !important;
    width: 100% !important;
  }

  /* Coupon row */
  .order_wrap .pt_row input#view_coupon {
    width: calc(100% - 220px) !important;
    height: 38px !important;
    border: solid 1px #dbdbdb !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  .coupon_popup {
    top: 20%;
    width: 100%;
  }

  .order_wrap .pt_row .unit_won {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #252525 !important;
    margin: 0 6px !important;
    vertical-align: middle !important;
  }

  .order_wrap .pt_row button[onclick*="cuPopOpen"],
  .order_wrap .pt_row button[onclick*="openPop"] {
    height: 38px !important;
    padding: 0 12px !important;
    border: solid 1px #252525 !important;
    background: #fff !important;
    color: #252525 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* Point row */
  .order_wrap .pt_box,
  .od_wrap.oding .cu_box .pt_box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex-direction: row !important;
  }

  .order_wrap .pt_box .point_input,
  .od_wrap.oding .cu_box .pt_box .point_input {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }

  .order_wrap .pt_box input#use_point,
  .od_wrap.oding .cu_box .pt_box input {
    width: 100% !important;
    height: 38px !important;
    border: solid 1px #dbdbdb !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .order_wrap .pt_box .pt_btn,
  .od_wrap.oding .cu_box .pt_box .pt_btn {
    display: flex !important;
    gap: 6px !important;
  }

  .order_wrap .pt_box .pt_btn button,
  .od_wrap.oding .cu_box .pt_box .pt_btn button {
    height: 38px !important;
    padding: 0 10px !important;
    border: solid 1px #252525 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #252525 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }

  .order_wrap .balance,
  .od_wrap.oding .cu_box .balance {
    color: #d32f2f !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
  }

  .order_body .pt_left .pt_box .pt_btn {
    margin-top: 0 !important;
  }

  /* Payment Methods (Radio Buttons) */
  .order_wrap .payment_list,
  .od_wrap.oding .payment_list {
    display: flex !important;
    justify-content: space-around !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .order_wrap .payment_list li,
  .od_wrap.oding .payment_list li {
    flex: 1 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  .order_wrap .payment_list li input[type="radio"],
  .od_wrap.oding .payment_list input[type="radio"] {
    display: block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1px solid #d5d5d5 !important;
    background: #fff !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 auto 8px auto !important;
    outline: none !important;
  }

  .order_wrap .payment_list li input[type="radio"]:checked,
  .od_wrap.oding .payment_list input[type="radio"]:checked {
    border-color: #116ad4 !important;
    background-color: #116ad4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  .order_wrap .payment_list li label,
  .od_wrap.oding .payment_list input + label {
    display: block !important;
    font-size: 13px !important;
    color: #555 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    padding-top: 0 !important;
    background: none !important;
    cursor: pointer !important;
  }

  .order_wrap .payment_list li input[type="radio"]:checked + label,
  .od_wrap.oding .payment_list input:checked + label {
    color: #116ad4 !important;
    font-weight: 700 !important;
  }

  /* Final Payment Summary (.pt_right / .pay_wrap) */
  .order_wrap .pt_right,
  .od_wrap.oding .pay_wrap {
    width: 100% !important;
    margin-top: 25px !important;
    padding: 18px 15px !important;
    background: #f7f8fb !important;
    border-top: solid 2px #aaa !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    margin-left: 0;
  }

  .order_wrap .pt_right .pay_tit,
  .od_wrap.oding .payment .pay_tit {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 25px !important;
    color: #252525 !important;
    margin-bottom: 15px !important;
    padding-left: 0 !important;
    border-bottom: none !important;
    background: none !important;
  }

  .order_wrap .pt_right .in_row,
  .od_wrap.oding .payment .in_row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: #555 !important;
  }

  .order_wrap .pt_right .pay_done,
  .od_wrap.oding .payment .pay_done {
    margin-top: 12px !important;
    border-top: solid 1px #eee !important;
    padding: 14px 0 0 0 !important;
    background: transparent !important;
  }

  .order_wrap .pt_right .pay_done .in_row .label,
  .od_wrap.oding .payment .pay_done .in_row .label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #252525 !important;
  }

  .order_wrap .pt_right .pay_done .in_row .cont strong,
  .od_wrap.oding .payment .pay_done .in_row .cont strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #116ad4 !important;
  }

  /* Bottom Action Buttons (.order_btn_row / .flot_btn) */
  .order_wrap .order_btn_row,
  .order_content .flot_btn,
  .flot_btn {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 20px 0 40px 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .order_wrap .order_btn_row .btn_paynone,
  .order_wrap .order_btn_row .btn_payment,
  .flot_btn .obtn {
    flex: 1 !important;
    height: 48px !important;
    line-height: 46px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .order_wrap .order_btn_row .btn_paynone,
  .flot_btn .obtn.btn02 {
    border: 1px solid #3b71dd !important;
    background: #fff !important;
    color: #3b71dd !important;
  }

  .order_wrap .order_btn_row .btn_payment,
  .flot_btn .obtn.btn03,
  .flot_btn .obtn.btn_payment {
    border: none !important;
    background: #3b71dd !important;
    color: #fff !important;
  }

  .profile_form .write_table table td .no_certi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .profile_form .write_table table td input[type="checkbox"] {
    max-width: 30px;
    height: 20px;
  }
}

/* my_sale_add (상품등록/수정): PC layout is a 180px th column + nested option tables — stack it on mobile */
@media screen and (max-width: 768px) {
  .my_sale_add .sale_add_form_in {
    padding: 20px 15px;
  }

  .my_sale_add .sale_add_form .sale_add_box + .sale_add_box {
    margin-top: 32px;
  }

  .my_sale_add .sale_add_form .sale_add_ttl_row {
    flex-wrap: wrap;
    gap: 6px 0;
  }

  .my_sale_add .sale_add_form .sale_add_ttl_row .subject {
    font-size: 18px;
  }

  .my_sale_add .sale_add_form .sale_add_ttl_row p {
    order: 1;
    width: 100%;
    margin-left: 0;
    line-height: 1.5;
    word-break: keep-all;
  }

  /* form rows: label on top, field below (only the outer table, not option/delivery tables) */
  .my_sale_add .sale_add_form .write_table > table > colgroup {
    display: none;
  }

  .my_sale_add .sale_add_form .write_table > table,
  .my_sale_add .sale_add_form .write_table > table > tbody,
  .my_sale_add .sale_add_form .write_table > table > tbody > tr,
  .my_sale_add .sale_add_form .write_table > table > tbody > tr > th,
  .my_sale_add .sale_add_form .write_table > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .my_sale_add .sale_add_form .write_table > table > tbody > tr + tr {
    border-top: 1px solid #ddd;
  }

  .my_sale_add .sale_add_form .write_table > table > tbody > tr > th {
    height: auto;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .my_sale_add .sale_add_form .write_table > table > tbody > tr > td {
    padding: 12px;
    border-left: 0;
  }

  .my_sale_add .sale_add_form .write_table table td select {
    max-width: none;
  }

  .my_sale_add .sale_add_form .category_row select {
    flex: 1 1 0;
    min-width: 0;
  }

  .my_sale_add .sale_add_form .write_table table td .price_unit_box input {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .my_sale_add .sale_add_form .write_table table td .price_unit_box .unit {
    margin-left: 8px;
  }

  /* 구매수량 제한: keep "최소 [ ] 개 ~ 최대 [ ] 개" on one line */
  .my_sale_add .sale_add_form .write_table table td input[name="min_buy"],
  .my_sale_add .sale_add_form .write_table table td input[name="max_buy"] {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
  }

  /* 배송정보 sub table */
  .my_sale_add .sale_add_form .delivery_fee_box table th {
    width: 110px;
    height: auto;
    padding: 10px 8px;
    word-break: keep-all;
  }

  .my_sale_add .sale_add_form .delivery_fee_box table td {
    padding: 8px 10px;
  }

  .my_sale_add .sale_add_form .delivery_fee_box .radio_row .item_radio:not(:last-of-type) {
    margin-right: 12px;
  }

  /* 필수/추가상품 option tables: 5 columns do not fit — each option row becomes a card
     (상품제목 full width, 가격 | 재고, 판매 | 삭제); column titles come from td[data-label] */
  .my_sale_add .sale_add_form .option_add_top {
    flex-wrap: wrap;
    gap: 8px 0;
  }

  .my_sale_add .sale_add_form .option_add_top .guide_txt {
    width: 100%;
    margin-right: 0;
  }

  .my_sale_add .sale_add_form .option_add_box table,
  .my_sale_add .sale_add_form .option_add_box table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .my_sale_add .sale_add_form .option_add_box table colgroup,
  .my_sale_add .sale_add_form .option_add_box table thead {
    display: none;
  }

  .my_sale_add .sale_add_form .option_add_box table tbody:empty {
    display: none;
  }

  .my_sale_add .sale_add_form .option_add_box table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 10px;
    padding: 12px;
  }

  .my_sale_add .sale_add_form .option_add_box table tr:last-child {
    border-bottom: 0;
  }

  .my_sale_add .sale_add_form .option_add_box table td,
  .my_sale_add .sale_add_form .option_add_box table td + td {
    display: block;
    min-width: 0;
    padding: 0;
    border-left: 0;
  }

  .my_sale_add .sale_add_form .option_add_box table td:first-child {
    grid-column: 1 / -1;
  }

  .my_sale_add .sale_add_form .option_add_box table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #6b6b6b;
  }

  .my_sale_add .sale_add_form .option_add_box table td input[type="text"] {
    display: block;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 판매 checkbox and 삭제 button sit on the last line, left / right */
  .my_sale_add .sale_add_form .option_add_box table td[data-label="판매"] {
    display: flex;
    align-items: center;
    text-align: left !important;
  }

  .my_sale_add .sale_add_form .option_add_box table td[data-label="판매"]::before {
    margin: 0 8px 0 0;
  }

  .my_sale_add .sale_add_form .option_add_box table td[data-label="판매"] input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .my_sale_add .sale_add_form .option_add_box table td[data-label="삭제"] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .my_sale_add .sale_add_form .option_add_box table td[data-label="삭제"]::before {
    display: none;
  }

  .my_sale_add .sale_add_form .option_add_box .option_del_btn {
    margin: 0;
  }

  /* 상세정보 / 배송·교환·반품 attachments */
  .my_sale_add .sale_add_form .file_row {
    flex-wrap: wrap;
    gap: 8px 0;
    padding: 12px 0;
  }

  .my_sale_add .sale_add_form .file_row input[type="file"] + label {
    margin-right: 12px;
  }

  .my_sale_add .sale_add_form .file_row .file_name {
    flex: 1 1 0;
    min-width: 0;
  }

  .my_sale_add .sale_add_form .file_row .file_size {
    margin-left: 12px;
  }

  .my_sale_add .sale_add_form .file_row .existing_file {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .my_sale_add .sale_add_form .file_row .existing_file a {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .my_sale_add .sale_add_form .add_btn_row button {
    flex: 1 1 0;
    max-width: 120px;
  }
}

/* R4-1 장바구니 ≤768: each cart row is a card (checkbox + item, then price / quantity / total with labels, delete) */
@media screen and (max-width: 768px) {
  .cart_wrap .order_body { padding-top: 16px; }
  .cart_wrap .cart_seller { font-size: 16px; padding: 12px 0; }
  .cart_wrap .cart_tb, .cart_wrap .cart_tb tbody { display: block; width: 100%; }
  .cart_wrap .cart_tb colgroup, .cart_wrap .cart_tb thead { display: none; }
  .cart_wrap .cart_tb tr { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; row-gap: 10px; padding: 14px 0; border-bottom: 1px solid #dbdbdb; }
  .cart_wrap .cart_tb td { display: block; padding: 0; border: 0; text-align: left; font-size: 14px; }
  .cart_wrap .cart_tb td.chk { grid-column: 1; grid-row: 1; padding-top: 2px; }
  .cart_wrap .cart_tb td.item_info { grid-column: 2; grid-row: 1; padding-right: 56px; }
  .cart_wrap .cart_tb .order_info_item .img_box { width: 72px; height: 72px; margin-right: 12px; }
  .cart_wrap .cart_tb .txt_box .subject { font-size: 15px; margin-bottom: 4px; }
  .cart_wrap .cart_tb .txt_box .option { font-size: 13px; }
  .cart_wrap .cart_tb .txt_box .option li { align-items: flex-start !important; }
  .cart_wrap .cart_tb .txt_box .option .label { flex: none; white-space: nowrap; }
  .cart_wrap .cart_tb td.price, .cart_wrap .cart_tb td.qty, .cart_wrap .cart_tb td.sum { grid-column: 2; display: flex; align-items: center; justify-content: space-between; }
  .cart_wrap .cart_tb td[data-label]::before { content: attr(data-label); color: #6b6b6b; font-size: 13px; }
  .cart_wrap .cart_tb td.qty input { width: 72px; height: 36px; }
  .cart_wrap .cart_tb td.del { position: absolute; top: 12px; right: 0; }
  .cart_wrap .cart_tb td.del .cart_btn { min-height: 32px; padding: 0 10px; font-size: 13px; }
  .cart_wrap .cart_sum { flex-direction: column; align-items: stretch; padding: 14px 15px; }
  .cart_wrap .cart_sum p { font-size: 14px; line-height: 1.5; }
  .cart_wrap .cart_sum .cart_btn { width: 100%; min-height: 44px; }
  .cart_wrap .cart_free { display: block; margin: 4px 0 0; }
  .cart_wrap .cart_order .cart_btn_lg { width: 100%; min-width: 0; }
  .cart_wrap .cart_empty { padding: 60px 0; }
}

/* R4-2 배송지 추가/수정 popup (shipping_popup) responsive */
.shipping_popup[style*="display: none"],
.shipping_popup.pop_wrap[style*="display: none"] {
  display: none !important;
}

.shipping_popup.pop_wrap {
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
}

.shipping_popup.pop_wrap .pop_box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 580px !important;
  max-height: calc(100vh - 40px) !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
}

.shipping_popup.pop_wrap .pop_box .top {
  min-height: 54px !important;
  height: auto !important;
  background: #252525 !important;
  position: relative !important;
  width: 100% !important;
  padding: 14px 50px 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

.shipping_popup.pop_wrap .pop_box .top .pop_ttl {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin: 0 !important;
  display: block !important;
  letter-spacing: -0.3px !important;
}

.shipping_popup.pop_wrap .pop_box .top .close_btn {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
  background: url(/img/ico/close02.png) center center no-repeat !important;
  background-size: 16px 16px !important;
  border: none !important;
}

.shipping_popup.pop_wrap .pop_box .bottom {
  padding: 24px 22px 28px 22px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  max-height: calc(100vh - 120px) !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
  .shipping_popup[style*="display: none"],
  .shipping_popup.pop_wrap[style*="display: none"] {
    display: none !important;
  }

  .shipping_popup.pop_wrap:not([style*="display: none"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  .shipping_popup .pop_box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    max-height: calc(100vh - 32px) !important;
    padding: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
  }

  .shipping_popup .pop_box .top {
    min-height: 52px !important;
    height: auto !important;
    background: #252525 !important;
    position: relative !important;
    width: 100% !important;
    padding: 14px 48px 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
  }

  .shipping_popup .pop_box .top .pop_ttl {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin: 0 !important;
    display: block !important;
  }

  .shipping_popup .pop_box .top .close_btn {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    background: url(/img/ico/close02.png) center center no-repeat !important;
    background-size: 16px 16px !important;
    border: none !important;
  }

  .shipping_popup .pop_box .bottom {
    padding: 18px 16px 22px 16px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    max-height: calc(100vh - 100px) !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .shipping_popup .write_table table,
  .shipping_popup .write_table tbody,
  .shipping_popup .write_table tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .shipping_popup .write_table table {
    border: none !important;
    margin: 0 !important;
  }

  .shipping_popup .write_table colgroup {
    display: none !important;
  }

  .shipping_popup .write_table table th,
  .shipping_popup .write_table table td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    background: none !important;
    box-sizing: border-box !important;
  }

  .shipping_popup .write_table table tr {
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee !important;
  }

  .shipping_popup .write_table table th {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #252525 !important;
  }

  .shipping_popup .write_table td input[type="text"],
  .shipping_popup .write_table td select {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    background: #fff !important;
  }

  .shipping_popup .write_table .phone_row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .shipping_popup .write_table .phone_row select {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: center !important;
    padding: 0 4px !important;
  }

  .shipping_popup .write_table .phone_row input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: center !important;
  }

  .shipping_popup .write_table .phone_row span {
    width: 14px !important;
    flex: 0 0 14px !important;
    text-align: center !important;
    color: #6b6b6b !important;
    font-size: 14px !important;
  }

  .shipping_popup .write_table .addr_row > input {
    margin-top: 8px !important;
    width: 100% !important;
  }

  .shipping_popup .write_table .addr_row .button_row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
  }

  .shipping_popup .write_table .addr_row .button_row button {
    flex: 0 0 90px !important;
    width: 90px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
  }

  .shipping_popup .write_table .addr_row .button_row input {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 42px !important;
    text-align: center !important;
  }

  .shipping_popup .write_btn_row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 24px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
  }

  .shipping_popup .write_btn_row button {
    flex: 1 !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  .shipping_popup .write_btn_row button.shipping_popup_close {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
  }

  .shipping_popup .write_btn_row button.shipping_popup_sub,
  .shipping_popup .write_btn_row button.submit_btn {
    background: #116ad4 !important;
    color: #fff !important;
    border: none !important;
  }
}

@media screen and (max-width: 320px) {
  .shipping_popup .pop_box .bottom {
    padding: 14px 10px 18px 10px !important;
  }

  .shipping_popup .pop_box .top {
    padding: 12px 42px 12px 14px !important;
  }

  .shipping_popup .pop_box .top .pop_ttl {
    font-size: 15px !important;
  }

  .shipping_popup .write_table .addr_row .button_row button {
    flex: 0 0 75px !important;
    width: 75px !important;
    font-size: 12px !important;
  }

  .shipping_popup .write_btn_row button {
    height: 42px !important;
    font-size: 14px !important;
  }
}

/* R4-3 item detail ≤768: a dim layer behind the option sheet, and the sheet's buttons stay at its bottom */
@media screen and (max-width: 768px) {
  .item_cartdim { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.4); }
  .item_cartpopup .item_cartbtn { position: sticky; bottom: -15px; margin: 0 -15px -15px; padding: 10px 15px 15px; background: #fff; }
}

/* R4-5 item list / search ≤768: the category icons scroll sideways (80px each did not wrap: ~895px at 390) */
@media screen and (max-width: 768px) {
  .prd_list_wrap .category_tab { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .prd_list_wrap .category_tab .cat_btn { flex: 0 0 64px; }
  .prd_list_wrap .category_tab .cat_btn:not(:last-of-type) { margin-right: 12px; }
  .prd_list_wrap .category_tab .cat_btn .ico { width: 56px; height: 56px; }
  .prd_list_wrap .category_tab .cat_btn .txt { margin-top: 8px; font-size: 12px; }
  /* the result title was squeezed next to the sort options: title on its own line */
  .prd_list_wrap .search_result_box .list_ttl_row { flex-wrap: wrap; gap: 10px; }
  .prd_list_wrap .search_result_box .list_ttl_row .search_ttl { flex: 1 0 100%; font-size: 16px; }
}

/* R4-7 / R4-8 login, login_find / login_pw, member_new, member_form ≤768: 15px side gutter, buttons fit the screen,
   one border per find tab, the e-mail row of the join form stacks */
@media screen and (max-width: 768px) {
  /* the fixed mobile header is 60px high; 107px is the PC header's */
  #container.hs01:not(.spe):not(.login) { margin-top: 60px; }
  .mem_container .mem_ttl { margin-bottom: 36px; font-size: 24px; }
  .mem_container .mem_box { padding: 0 15px; box-sizing: border-box; }
  .mem_container .form_box .submit_btn { width: 100%; max-width: 420px; height: 52px; font-size: 18px; }
  .join .form_box .submit_btn { margin-top: 40px; }
  .login .sns_login_box { width: auto; }
  .find .find_tab { margin-bottom: 25px; }
  .find .find_tab li { width: auto; height: auto; border: 0; flex: 1; }
  .find .find_tab li a { font-size: 14px; height: 42px; line-height: 40px; }
  .join_type .join_type_btn { height: 56px; line-height: 54px; background-position: 20px center; }
  .join_type .join_type_btn span, .join_type .etc_link a { font-size: 16px; }
  .join_type .etc_link a { height: 56px; line-height: 54px; }
  .join .mem_box .join_ttl { font-size: 20px; }
  .join .input_box.top_box { flex-direction: column; gap: 10px; }
  .mem_container .form_box .email_box { width: 100%; flex-wrap: wrap; row-gap: 10px; }
  .mem_container .form_box .email_box input, .mem_container .form_box .email_box select { flex: 1; min-width: 0; }
  .mem_container .form_box .email_box select { margin-right: 0; }
  .mem_container .form_box .email_box #user_email2_d { flex: 1 0 100%; }
  .join .input_box.top_box .button_box button { width: 100%; margin-left: 0; }
  .mem_container .form_box .button_box .phone_box { flex: 1; min-width: 0; }
  .mem_container .form_box .button_box button { width: auto; min-width: 110px; padding: 0 12px; font-size: 15px; }
  .join .agree_list li { padding: 16px 12px; }
  .join .agree_wrap .item_check input+label { font-size: 16px; }
}
/* PC: the login button lines up with the inputs (it was 420px under 460px inputs) */
.login .form_box .submit_btn { width: 100%; }
/* white on Naver green was 1.9:1 — a darker green keeps the brand colour and reaches 4.5:1 */
.join_type .join_type_btn.naver { background-color: #00843d; }

/* R4-9 my_purchase_view / my_sale_view ≤768: the top block stacks (thumb + info, then the buttons in a row) */
@media screen and (max-width: 768px) {
  .mp_cont .mp_contop { flex-direction: column; align-items: stretch; gap: 15px; }
  .mp_cont .mp_contop > div:first-child { min-width: 0; }
  .mp_contop .mp_thumb { width: 90px; height: 58px; margin-right: 12px; }
  .mp_contop .mp_info { flex: 1; min-width: 0; }
  .mp_contop .mp_info .mp_desc { font-size: 15px; word-break: break-all; }
  .mp_contop .mp_info .mp_opt { width: auto; }
  .mp_cont .mp_contop .flex_btn { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }
  .mp_contop .go_contact { flex: 1 1 0; width: auto; height: 42px; line-height: 42px; margin-left: 0; }
  .mp_cont .mp_contop > .go_contact { flex: none; width: 100%; }
}

/* R4-10 my_coupon ≤768: the 5-column table (fixed 402px + 26 % columns left the name ~0px) becomes one card per coupon */
@media screen and (max-width: 768px) {
  .mypage_coupon .list_table colgroup, .mypage_coupon .list_table thead { display: none; }
  .mypage_coupon .list_table table, .mypage_coupon .list_table tbody, .mypage_coupon .list_table tr, .mypage_coupon .list_table td { display: block; width: auto; }
  .mypage_coupon .list_table table { border-top: 0; }
  .mypage_coupon .list_table tbody tr { padding: 12px 14px; border: 1px solid #e5e5e5; border-radius: 8px; }
  .mypage_coupon .list_table tbody tr + tr { margin-top: 10px; }
  .mypage_coupon .list_table tbody td { display: flex; justify-content: space-between; gap: 12px; height: auto; padding: 4px 0; border: 0; text-align: right; font-size: 13px; line-height: 1.5; }
  .mypage_coupon .list_table tbody td[data-label]::before { content: attr(data-label); flex: none; color: #767676; text-align: left; }
  .mypage_coupon .list_table tbody td.subject { display: block; padding-bottom: 8px; text-align: left; font-size: 15px; font-weight: 600; }
  .mypage_coupon .list_table tbody td.subject:empty { display: none; }
  .mypage_coupon .list_table tbody td[colspan] { display: block; text-align: center; }
  .mypage_coupon .coupon_status .coupon_add .label { flex: none; white-space: nowrap; }
  .mypage_coupon .coupon_status .coupon_add { align-self: stretch; }
  .mypage_coupon .coupon_status .coupon_add form { flex: 1; min-width: 0; }
  .mypage_coupon .coupon_status .coupon_add input { flex: 1; min-width: 0; width: auto; }
  .mypage_coupon .coupon_status .coupon_add button { flex: none; width: 64px; }
}

/* R4-11 배송지관리 ≤768: fixed columns (582px) left the address one word per line — one card per address */
@media screen and (max-width: 768px) {
  .my_ship .list_table colgroup, .my_ship .list_table thead { display: none; }
  .my_ship .list_table table, .my_ship .list_table tbody { display: block; border-top: 0; }
  .my_ship .list_table tbody tr { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; padding: 12px 14px; border: 1px solid #e5e5e5; border-radius: 8px; }
  .my_ship .list_table tbody tr + tr { margin-top: 10px; }
  .my_ship .list_table tbody td { grid-column: 2; display: block; height: auto; padding: 3px 0; border: 0; text-align: left; font-size: 13px; line-height: 1.5; word-break: break-all; }
  .my_ship .list_table tbody td.pick { grid-column: 1; grid-row: 1 / span 5; padding-top: 2px; }
  .my_ship .list_table tbody td.ship_name { font-size: 15px; font-weight: 600; }
  .my_ship .list_table tbody td.ship_name span { margin-left: 4px; font-size: 12px; font-weight: 500; color: #116ad4; }
  .my_ship .list_table tbody td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 60px; margin-right: 8px; color: #767676; }
  .my_ship .ship_btn_row { display: flex; flex-wrap: wrap; gap: 8px; }
  .my_ship .ship_btn_row button { flex: 1 1 calc(50% - 4px); width: auto; height: 40px; line-height: 38px; margin: 0; font-size: 13px; }
}

/* R4-12 ≤768: order rows (.ps_list) wrap under the product, and every mypage search bar (.mp_search_box) wraps
   inside the screen (my_purch_review's form was ~511px wide at 390) */
@media screen and (max-width: 768px) {
  .ps_list > li { flex-wrap: wrap; }
  .ps_list .prd_info, .ps_list .prd_info.review_info { width: 100%; max-width: none; }
  .ps_list .prd_method, .ps_list .prd_util { width: 50%; max-width: none; margin-top: 12px; margin-left: 0; flex: 0 0 50%; }
  .ps_list .prd_info .prd_thumb { flex: none; width: 96px; height: 62px; margin-right: 12px; }
  .reve_row .review_tab { width: 100%; margin: 0; }
  .reve_row .review_tab li { flex: 1; width: auto; }
  .reve_row .review_tab li a { font-size: 14px; line-height: 42px; white-space: nowrap; }
  .ps_list .prd_info > div:not(.prd_thumb) { min-width: 0; }
  .mp_ttl_row .right { width: 100%; min-width: 0; }
  .mp_ttl_row .right .mp_search_box, .mp_ttl_row .mp_search_box { width: 100%; }
  .mp_search_box form { flex-wrap: wrap; gap: 6px; }
  .mypage_layout .content_box .mp_search_box form { padding: 0 !important; }
  .mp_search_box .datepick_row { width: 100%; margin-right: 0; }
  .mp_search_box .datepick_row .datepick_box { flex: 1; min-width: 0; }
  .mp_search_box .datepick_row input { width: 100%; height: 36px; }
  .mp_search_box input, .mp_search_box select, .mp_search_box .search_btn { height: 36px; }
  .mp_search_box form > input, .mp_search_box form > div:not(.datepick_row) { flex: 1; min-width: 0; width: auto; }
  .mp_search_box select { flex: none; margin-right: 0; }
  .mp_search_box .search_btn { flex: none; margin-left: 0; }
}

/* R4-14 header ≤1024: the select arrow keeps clear of the text; ≤768: 36px+ tap targets, the menu button uses the
   PC teal icon (it was a different blue one) */
@media screen and (max-width: 1024px) {
  #header02 .top .search_btn_wrap .select_custom_ { padding-right: 36px; background-position: right 12px center; }
}
@media screen and (max-width: 768px) {
  #header_mobile #gnb a { width: 36px !important; height: 36px !important; border-radius: 12px !important; background: #209e80 url("/img/btn/all_menu_btn_s.png") no-repeat center center/cover !important; }
  #header_mobile.open #gnb a { background-image: url("/img/btn/all_menu_btn_close.png") !important; }
  #header_mobile .hd_r_wrap ul { gap: 4px !important; }
  #header_mobile .hd_r_wrap ul li .searchmenu { width: 36px !important; height: 36px !important; background-size: 20px 20px !important; }
}

/* R4-15 footer: the escrow notice had no rule (both footers) */
#footer .foot_info .escrow_notice { margin-top: 16px; font-size: 14px; line-height: 1.6; color: #767676; white-space: pre-line; }
/* ≤768: the PC 15px address rule (#footer … span) reached the mobile block; grey text #999 → #767676 (4.5:1 on white);
   footer links get 6px of padding to tap */
@media screen and (max-width: 768px) {
  #footer .footer_mobile .foot_info address > div, #footer .footer_mobile .foot_info address > div span { font-size: 12px; line-height: 1.75; color: #767676; }
  #footer .footer_mobile .foot_info address .ft_bk { color: #454545; }
  #footer .footer_mobile .foot_info address a { display: inline-block; padding: 6px 0; margin: -6px 0; color: #454545; }
  .footer_mobile .foot_bot .foot_info address, .footer_mobile .foot_bot .foot_info .copy, .footer_mobile .foot_bot .notice_txt { color: #767676 !important; }
  #footer .footer_mobile .foot_info .escrow_notice { margin-top: 12px; font-size: 12px; }
}

/* R4-16 ≤768: no content text under 12px, tap targets at least 32px high (padding, the icons keep their size) */
@media screen and (max-width: 768px) {
  .main_mo_wrap .cate_sec ul li a p, .main_mo_wrap .item_txtbox .seller { font-size: 12px !important; }
  .main_mo_wrap .sec_tit_top .more_link { width: 32px !important; height: 32px !important; }
  .item_view_mo .viewpage_num { font-size: 12px !important; }
  .used_seller_link { display: inline-block; padding: 6px 0; line-height: 20px; }
  .used_detail_follow .shop_follow_btn { min-height: 32px; }
  .used_report_link { min-height: 32px; padding: 0 4px; }
  .login .mem_link li a { padding: 8px 10px; font-size: 14px; }
  .login .save_id .item_check input+label { padding: 6px 0; }
  .snb_box .snb_list01 > li > a.arrow_none { min-height: 34px; box-sizing: border-box; }
  .list_ttl_row .item_detail_tab button { padding-top: 8px; padding-bottom: 8px; }
  .list_ttl_row { flex-wrap: wrap; row-gap: 8px; }
  .list_ttl_row .item_detail_tab { flex-wrap: wrap; row-gap: 4px; flex-shrink: 1; min-width: 0; max-width: 100%; }
  .pager li { width: 34px !important; height: 34px !important; }
  .pager li a { font-size: 12px !important; line-height: 32px !important; }
  #my_wrap .my_date .search_box .my_search { width: 36px; height: 36px; right: 2px; background-size: 20px 19px; }
  #my_wrap .my_list li .state_ico, #my_wrap .my_list li .date { font-size: 12px; }
  /* the 20px circle stays; a transparent border makes the tap box 32px */
  .profile_form .profile_img_box .del_btn { top: -16px; right: -16px; width: 32px; height: 32px; border: 6px solid transparent; background-clip: padding-box; box-sizing: border-box; }
  .sear_top.sear_topsec form#search_mo select { height: 34px; }
  .sear_top.sear_topsec form#search_mo button { min-height: 34px; }
  .sear_top.sear_topsec .sort_btn { padding-top: 7px; padding-bottom: 7px; }
  .footer_mobile .foot_top ul li span a { padding: 8px 0; }
  .footer_mobile .foot_top ul li span { margin-bottom: 0 !important; }
  .mem_container .item_radio input+label, .mem_container .item_check input+label { padding-top: 4px; padding-bottom: 4px; }
  /* C8 (5-role scan): custom_list badges and date, its sort button; 찜 / 공유 on a 중고 item page */
  /* "body" outranks the page's own inline <style> (item/custom_list, 11px at every width) */
  body .custom_wrap .cuslist_wrap ul li .cus_info .cus_state>div, body .custom_wrap .cuslist_wrap ul li .cus_info .date { font-size: 12px; }
  .custom_wrap .cuslist_top .sort_btn { padding-top: 7px; padding-bottom: 7px; }
  .btn_list > .zzim_btn, .btn_list > .share_btn { min-height: 32px; }
  /* main ad sections (logged in): 광고신청 */
  .sec_tit_top > a.more_btn { min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
  /* mypage: ad history, cash charge, ad application, proposals */
  /* same or higher specificity than mobile/css/mypage.css (#my_wrap …), which loads before this file */
  #my_wrap .ad_list ul li .pay_ico, #my_wrap ul li .ad_infobox > .print_btn { font-size: 12px; }
  #my_wrap ul li .ad_infobox > .print_btn { min-height: 32px; }
  .mypage .cg_wrap .agree_box>a { display: inline-block; padding: 10px 0; font-size: 12px; }
  .paya_box .agree_box > label, .charge_box .radio_wrap > label { padding-top: 4px; padding-bottom: 4px; }
  .ad_order .ad_form .ad_count button { width: 32px; height: 32px; }
  .od_wrap .prop_list li .date { font-size: 12px; }
  .od_info > a.prop_cnt { padding-top: 8px; padding-bottom: 8px; margin-top: 4px; }
  /* the icons keep their size; a transparent border makes the tap box 32px */
  .al_list .search_top button { box-sizing: content-box; border: 7px solid transparent; margin-right: -7px; background-clip: padding-box; background-origin: padding-box; }
  /* its border and padding are inline (ChatView): only the height grows */
  .subject > .user_block_btn { min-height: 32px; }
  .used_image_slot .used_image_del_btn { box-sizing: content-box; border: 6px solid transparent; margin: -6px -6px 0 0; background-clip: padding-box; }
  /* mypage board / 1:1 forms, contact manager list */
  .write_table td > button, .write_table td > select, .write_table .file_box > label { min-height: 32px; }
  .ps_list td.tac > a { display: inline-block; padding: 9px 0; }
  .ps_list td.tac .btn { min-height: 32px; }
  /* goods / custom quote / 중고 forms */
  .item_radio.size20 > label { padding-top: 6px; padding-bottom: 6px; }
  .option_add_top .add_btn, .sale_add_ttl_row .add_btn, .file_row > label, .file_row > .editor_del_btn { min-height: 32px; }
  .img_add_box .del_btn { min-width: 32px; min-height: 32px; }
  .used_form_label > small { font-size: 12px; }
  .used_form_field label { display: inline-flex; align-items: center; min-height: 32px; }
  /* my_used list, seller_apply terms */
  .my_used_title { display: inline-block; padding: 7px 0; }
  .my_used_edit { display: inline-flex; align-items: center; min-height: 32px; box-sizing: border-box; }
  .seller_apply_agree a { display: inline-block; padding: 8px 0; }
}

/* R4-17 (sideways overflow found by the full scan) ≤768:
   custom_write — the 180px label column + 4 fixed selects ran 9px past the screen: label above the field */
@media screen and (max-width: 768px) {
  .custom_write_wrap { padding: 30px 0 60px; }
  .custom_write_box .write_table table colgroup { display: none; }
  .custom_write_box .write_table table, .custom_write_box .write_table table tbody, .custom_write_box .write_table table tr, .custom_write_box .write_table table th, .custom_write_box .write_table table td { display: block; width: 100%; box-sizing: border-box; }
  .custom_write_box .write_table table th { padding: 12px 0 6px; border: 0; background: none; text-align: left; }
  .custom_write_box .write_table table td { padding: 0 0 12px; }
  .custom_write_box .write_table table td input[type="text"], .custom_write_box .write_table table td select { max-width: 100%; }
  .custom_write_box .unit_box input { flex: 1; min-width: 0; width: auto; }
  .custom_write_box .category_select { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .custom_write_box .category_select select { width: 100%; margin: 0; }
  .custom_write_box .datepick_box { width: 100%; }
  /* contact_manager: the 5-column list scrolls inside its own box instead of pushing the page */
  .ps_list .listBottom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ps_list .listBottom table.listTable { min-width: 520px; }
}

/* small phones: board lists keep room for the title column (번호 75px + 작성일 170px left it 0 wide at 280px),
   and a page title never breaks inside its word next to the search box */
@media (max-width: 480px) {
  .list_table col:first-child { width: 44px !important; }
  .list_table col:last-child { width: 86px !important; }
  .mp_ttl_row { flex-wrap: wrap; row-gap: 10px; }
  .mp_ttl_row .mp_ttl { flex: none; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Quotation Manager (/mypage/quotation_manager) Mobile & <= 320px Refinements
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .quotation_container .quotatio_mo .inner {
    padding: 0 !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop,
  #send_mail_pop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
  }
  #send_mail_pop[style*="display: none"],
  .popup_wraps.send_mail_pop[style*="display: none"] {
    display: none !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .pop_box,
  #send_mail_pop .pop_box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: calc(100% - 24px) !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    z-index: 10 !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    padding-bottom: 20px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .padding {
    padding-inline: 16px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .pop_head {
    height: 50px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .pop_ttl {
    font-size: 16px !important;
    line-height: 50px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .pop_box .pop_input {
    margin-top: 65px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .form_input {
    margin-top: 14px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .form_input label {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .form_input input {
    height: 40px !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }
  .popup_wraps.popup_wrap_cus_1.send_mail_pop .pop_footer {
    margin-top: 20px !important;
    gap: 8px !important;
  }
  .popup_wraps.popup_wrap_cus_1 .pop_box .pop_footer button {
    height: 42px !important;
    font-size: 14px !important;
    margin-left: 0 !important;
  }

  .popup_invoice .popup_wrap.popup_wrap_cus_2 {
    width: calc(100% - 16px) !important;
    height: calc(100% - 30px) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
  .popup_invoice .popup_wrap.popup_wrap_cus_2 .top {
    height: auto !important;
    padding: 8px !important;
  }
  .top-left-header button:first-child,
  .top-left-header button {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
}

@media screen and (max-width: 360px) {
  .quotatio_mo .quatation_list .list_content .item .subject .title {
    max-width: 120px !important;
    font-size: 12px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject .num,
  .quotatio_mo .quatation_list .list_content .item .subject .date {
    font-size: 11px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .btns {
    gap: 4px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .btns .btn {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 2px !important;
  }
}

@media screen and (max-width: 320px) {
  .mypage_container.quotation_container .inner {
    padding: 0 8px !important;
  }
  #my_wrap h2.mytit {
    font-size: 16px !important;
    padding: 16px 0 12px 10px !important;
  }
  .quotatio_mo .quatation_list .ttl_list {
    font-size: 15px !important;
  }
  .quotatio_mo .quatation_list .total {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .quotatio_mo .quatation_list .list_content .item {
    padding: 12px 0 !important;
  }
  .quotatio_mo .quatation_list .list_content .item .name {
    font-size: 13px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject {
    font-size: 11px !important;
    gap: 2px 6px !important;
    margin-bottom: 8px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject .num {
    font-size: 11px !important;
    padding-right: 6px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject .title {
    max-width: 110px !important;
    font-size: 11px !important;
    padding-right: 6px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject .title::after {
    display: none !important;
  }
  .quotatio_mo .quatation_list .list_content .item .subject .date {
    width: 100% !important;
    font-size: 11px !important;
    color: #6b6b6b !important;
    margin-top: 1px !important;
  }
  .quotatio_mo .quatation_list .list_content .item .btns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .quotatio_mo .quatation_list .list_content .item .btns .btn {
    width: 100% !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
  }
  #container .pager {
    gap: 3px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
  }
  #container .pager li {
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
  }
  #container .pager li a {
    line-height: 23px !important;
    font-size: 11px !important;
  }
  #container .pager li.prev {
    margin-right: 3px !important;
  }
  #container .pager li.next {
    margin-left: 3px !important;
  }

  /* my_calculate <= 320px */
  .mypage_mo_wrap .my_bttop {
    padding: 16px 10px 14px !important;
  }
  .mypage_mo_wrap .my_bttop h2.mytit {
    font-size: 16px !important;
  }
  .mypage_mo_wrap .my_bttop button {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  .mypage_mo_wrap .my_date {
    padding: 12px 0 !important;
  }
  .mypage_mo_wrap .my_date.calc_mid .sabtn_wrap .contact_btn {
    font-size: 11px !important;
    padding: 0 1px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
  .mypage_mo_wrap .my_date .date_box input[type="text"] {
    font-size: 12px !important;
    height: 36px !important;
  }
  .mypage_mo_wrap .my_date.calc_mid .sarh02 select {
    font-size: 13px !important;
    height: 36px !important;
  }
  .mypage_mo_wrap .my_date.calc_mid .sarh02 .search_btn {
    width: 60px !important;
    height: 36px !important;
    font-size: 13px !important;
  }
  .mypage_mo_wrap .mylwd_wrap {
    padding: 12px 10px !important;
  }
  .mypage_mo_wrap .mylwd_wrap .cal_list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .mypage_mo_wrap .mylwd_wrap .cal_list li {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }
  .mypage_mo_wrap .mylwd_wrap .cal_list li span:first-child {
    font-size: 11px !important;
  }
  .mypage_mo_wrap .mylwd_wrap .cal_list li span:last-child {
    font-size: 13px !important;
  }
  .mypage_mo_wrap .od_wrap {
    padding: 0 10px !important;
  }
  .mypage_mo_wrap .od_list_top h3 {
    font-size: 15px !important;
    padding: 15px 0 10px !important;
  }
  .mypage_mo_wrap .od_list.cal_list .od_row {
    padding: 10px 0 !important;
  }
  .mypage_mo_wrap .od_list.cal_list .data_row .title {
    font-size: 11px !important;
    width: 35% !important;
  }
  .mypage_mo_wrap .od_list.cal_list .data_row .info {
    font-size: 12px !important;
    width: 65% !important;
  }
  .cal_pop .p_table .p_row {
    display: flex !important;
    flex-direction: column !important;
  }
  .cal_pop .p_table .p_row .label {
    width: 100% !important;
    height: 26px !important;
    line-height: 26px !important;
    padding-left: 8px !important;
    font-size: 11px !important;
    background: #f7f7f7 !important;
  }
  .cal_pop .p_table .p_row .inpu_tb {
    width: 100% !important;
    padding: 6px 8px 8px !important;
  }
}

/* my_calculate general mobile & popup styles */
.inquiry_pop.cal_pop {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}

.inquiry_pop.cal_pop .pp_box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 500px !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  background: #fff !important;
}

#my_wrap .my_date.calc_mid .sarh02 {
  display: flex !important;
  gap: 8px !important;
}

#my_wrap .my_date.calc_mid .sarh02 select {
  flex: 1 !important;
  width: auto !important;
  height: 40px !important;
}

#my_wrap .my_date.calc_mid .sarh02 .search_btn {
  width: 70px !important;
  height: 40px !important;
  background-color: #3b3a3a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.mypage_mo_wrap .state_badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  text-align: center !important;
}

.mypage_mo_wrap .state_badge.cobalt {
  background: #eaf1fb !important;
  color: #116ad4 !important;
}

.mypage_mo_wrap .state_badge.orange {
  background: #fff4e6 !important;
  color: #b45309 !important;
}

.mypage_mo_wrap .state_badge.gray {
  background: #f0f0f0 !important;
  color: #6b6b6b !important;
}

@media screen and (max-width: 480px) {
  .inquiry_pop.cal_pop .pp_box .top h3 {
    font-size: 16px !important;
    line-height: 50px !important;
  }
  .inquiry_pop.cal_pop .pp_box .pop_bot {
    padding: 15px 12px !important;
  }
  .cal_pop .p_table .p_row .label {
    width: 85px !important;
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
  }
  .cal_pop .p_table .p_row .inpu_tb {
    width: calc(100% - 85px) !important;
    padding: 8px 8px !important;
  }
  .cal_pop .p_table .p_row .inpu_tb input {
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 6px !important;
  }
  .cal_pop .p_table .p_row .inpu_tb .phone_Wrap span,
  .cal_pop .p_table .p_row .inpu_tb .email_wrap span {
    margin: 0 3px !important;
    font-size: 11px !important;
  }
  .cal_pop .btn_2wrap {
    display: flex !important;
    gap: 8px !important;
    margin-top: 15px !important;
  }
  .cal_pop .btn_2wrap button {
    flex: 1 !important;
    width: auto !important;
    margin: 0 !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

.mypage_mo_wrap .od_list .od_row.empty_row,
.mypage_mo_wrap .od_list.cal_list .od_row.empty_row,
.mypage_mo_wrap .empty_row {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  padding: 40px 15px !important;
  color: #6b6b6b !important;
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  border-bottom: 1px solid #eee !important;
}

/* mypage_ask board responsive (strictly scoped to ask) */
.mypage_ask .list_table table {
  width: 100% !important;
  table-layout: fixed !important;
}

.mypage_ask .list_table table td.subject {
  text-align: left !important;
  padding: 8px 15px !important;
}

.mypage_ask .list_table table td.subject a {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mypage_ask .list_table table td.date {
  font-size: 13px !important;
  color: #6b6b6b !important;
  white-space: nowrap !important;
}

.mypage_ask .list_table table td.state {
  white-space: nowrap !important;
}

.mypage_ask .list_table table td.state .state_badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  text-align: center !important;
  min-width: 54px !important;
  box-sizing: border-box !important;
}

.mypage_ask .list_table table td.state .state_badge.cobalt {
  background: #eaf1fb !important;
  color: #116ad4 !important;
}

.mypage_ask .list_table table td.state .state_badge.blue {
  background: #e1f5fe !important;
  color: #01579b !important;
}

.mypage_ask .list_table table td.state .state_badge.orange {
  background: #fff4e6 !important;
  color: #b45309 !important;
}

.mypage_mo_wrap[data-mymenu="ask"] .contact_list ul li {
  padding: 16px 15px !important;
  border-bottom: 1px solid #eee !important;
}

.mypage_mo_wrap[data-mymenu="ask"] .contact_list .fnq_ico {
  display: inline-block !important;
  border: 1px solid #b45309 !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #b45309 !important;
  background: #fff8f0 !important;
}

.mypage_mo_wrap[data-mymenu="ask"] .contact_list .fnq_ico.done {
  border-color: #116ad4 !important;
  color: #116ad4 !important;
  background: #eaf1fb !important;
}

@media screen and (max-width: 480px) {
  .mypage_mo_wrap[data-mymenu="ask"] .my_bttop h2.mytit {
    font-size: 17px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .my_bttop .btn03 {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .contact_list ul li {
    padding: 14px 12px !important;
  }
  .mypage_contact .write_table table colgroup col:first-child {
    width: 90px !important;
  }
  .mypage_contact .write_table table th {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  .mypage_contact .write_table table td {
    padding: 8px 8px !important;
  }
}

@media screen and (max-width: 320px) {
  .mypage_mo_wrap[data-mymenu="ask"] .my_bttop {
    padding: 14px 10px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .my_bttop h2.mytit {
    font-size: 15px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .my_bttop .btn03 {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .contact_list ul li {
    padding: 12px 10px !important;
  }
  .mypage_mo_wrap[data-mymenu="ask"] .contact_list .subject a {
    font-size: 13px !important;
  }
  .mypage_contact .write_table table colgroup col:first-child {
    width: 80px !important;
  }
  .mypage_contact .write_table table th {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  .mypage_contact .write_table table td {
    padding: 6px 6px !important;
  }
  .mypage_contact .write_table .write_btn_row button {
    max-width: 120px !important;
    height: 38px !important;
    font-size: 14px !important;
  }
}

/* mypage_user_info responsive (strictly scoped to mypage_user_info_wrap) */
.pop_wrap.user_del_popup {
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
}

.pop_wrap.user_del_popup .pop_box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  background: #fff !important;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mypage_user_info_wrap .content_box .cont {
    padding: 20px 24px 60px 24px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_info_wrap .write_table table td {
    padding: 15px 20px !important;
  }
}

@media screen and (max-width: 768px) {
  .mypage_user_info_wrap .content_box .cont {
    padding: 10px 10px 50px 10px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_info_wrap .mp_ttl_row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 18px 4px 14px 4px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_user_info_wrap .mp_ttl_row .link_lgbox {
    display: flex !important;
    gap: 8px !important;
  }

  .mypage_user_info_wrap .write_table {
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_info_wrap .write_table table colgroup {
    display: none !important;
  }

  .mypage_user_info_wrap .write_table table,
  .mypage_user_info_wrap .write_table table tbody,
  .mypage_user_info_wrap .write_table table tr,
  .mypage_user_info_wrap .write_table table th,
  .mypage_user_info_wrap .write_table table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mypage_user_info_wrap .write_table table {
    border-top: 2px solid #252525 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .mypage_user_info_wrap .write_table table tr {
    padding: 16px 4px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_user_info_wrap .write_table table th {
    height: auto !important;
    padding: 0 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .mypage_user_info_wrap .write_table table td {
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #333 !important;
  }

  .mypage_user_info_wrap .write_table table td input {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
  }

  .mypage_user_info_wrap .write_table table td .nick_row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mypage_user_info_wrap .write_table table td .nick_row input {
    flex: 1 !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .write_table table td .nick_row button {
    width: 90px !important;
    height: 42px !important;
    flex: 0 0 90px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    border: none !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 13px !important;
    cursor: pointer !important;
  }

  .mypage_user_info_wrap .address .addr_btn {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .address .addr_btn input.zipcode {
    flex: 1 !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .address .addr_btn button {
    width: 90px !important;
    height: 42px !important;
    flex: 0 0 90px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    border: none !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 13px !important;
    cursor: pointer !important;
  }

  .mypage_user_info_wrap .address > input {
    margin-top: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .write_table .cefi_wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .mypage_user_info_wrap .write_table .cefi_wrap .user_phone {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .write_table .cefi_wrap .user_phone input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 42px !important;
    text-align: center !important;
  }

  .mypage_user_info_wrap .write_table .cefi_wrap .user_phone span {
    width: 18px !important;
    text-align: center !important;
    flex: 0 0 auto !important;
    color: #6b6b6b !important;
  }

  .mypage_user_info_wrap .write_table .cefi_wrap button.sms_chg_chk_btn {
    width: 100% !important;
    height: 42px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    border: 1px solid #116ad4 !important;
    background: #eaf1fb !important;
    color: #116ad4 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
  }

  .mypage_user_info_wrap .sms_chg_chk .cefi_wrap {
    flex-direction: row !important;
  }

  .mypage_user_info_wrap .sms_chg_chk .cefi_wrap input {
    flex: 1 !important;
    max-width: none !important;
  }

  .mypage_user_info_wrap .sms_chg_chk .cefi_wrap button {
    width: 90px !important;
    height: 42px !important;
    flex: 0 0 90px !important;
    margin-left: 0 !important;
    border-radius: 4px !important;
    background: #116ad4 !important;
    color: #fff !important;
    border: none !important;
  }

  .mypage_user_info_wrap .write_table table td .caution {
    font-size: 12px !important;
    color: #6b6b6b !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
  }

  .mypage_user_info_wrap .write_btn_row {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 32px !important;
    margin-bottom: 40px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_info_wrap .write_btn_row button {
    flex: 1 !important;
    max-width: none !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  .user_del_popup .out_check_row .item_check {
    width: 50% !important;
  }
}

@media screen and (max-width: 480px) {
  .mypage_user_info_wrap .content_box .cont {
    padding: 8px 4px 40px 4px !important;
  }

  .mypage_user_info_wrap .write_table table tr {
    padding: 14px 2px !important;
  }

  .mypage_user_info_wrap .write_btn_row {
    margin-top: 26px !important;
    margin-bottom: 30px !important;
    padding: 0 2px !important;
  }

  .user_del_popup .out_check_row .item_check {
    width: 100% !important;
  }
}

@media screen and (max-width: 320px) {
  .mypage_user_info_wrap .content_box .cont {
    padding: 6px 0 35px 0 !important;
  }

  .mypage_user_info_wrap .mp_ttl_row h3.mp_ttl {
    font-size: 18px !important;
  }

  .mypage_user_info_wrap .write_table table td .nick_row button,
  .mypage_user_info_wrap .address .addr_btn button {
    width: 75px !important;
    flex: 0 0 75px !important;
    font-size: 12px !important;
    padding: 0 4px !important;
  }

  .mypage_user_info_wrap .write_btn_row button {
    height: 42px !important;
    font-size: 14px !important;
  }
}

/* mypage_user_account responsive (strictly scoped to mypage_user_account_wrap) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mypage_user_account_wrap .content_box .cont {
    padding: 20px 24px 60px 24px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_account_wrap .write_table table td {
    padding: 15px 20px !important;
  }
}

@media screen and (max-width: 768px) {
  .mypage_user_account_wrap .content_box .cont {
    padding: 10px 10px 50px 10px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_account_wrap .mp_ttl_row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 18px 4px 14px 4px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Spacing between the first account info block and the second account change block */
  .mypage_user_account_wrap .mp_ttl_row:nth-of-type(2) {
    margin-top: 28px !important;
  }

  .mypage_user_account_wrap .write_table {
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_account_wrap .write_table table colgroup {
    display: none !important;
  }

  .mypage_user_account_wrap .write_table table,
  .mypage_user_account_wrap .write_table table tbody,
  .mypage_user_account_wrap .write_table table tr,
  .mypage_user_account_wrap .write_table table th,
  .mypage_user_account_wrap .write_table table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mypage_user_account_wrap .write_table table {
    border-top: 2px solid #252525 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .mypage_user_account_wrap .write_table table tr {
    padding: 16px 4px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_user_account_wrap .write_table table th {
    height: auto !important;
    padding: 0 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .mypage_user_account_wrap .write_table table td {
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #333 !important;
  }

  /* Account info display row */
  .mypage_user_account_wrap .refound_info table th {
    height: auto !important;
    font-size: 14px !important;
  }

  .mypage_user_account_wrap .refound_info table td {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #222 !important;
    line-height: 1.5 !important;
    word-break: break-all !important;
  }

  /* Inputs and selects */
  .mypage_user_account_wrap .write_table table td input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
  }

  .mypage_user_account_wrap .write_table table td select {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 4px !important;
    background-color: #fff !important;
  }

  /* Submit button row */
  .mypage_user_account_wrap .write_btn_row {
    display: flex !important;
    width: 100% !important;
    margin-top: 32px !important;
    margin-bottom: 40px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_account_wrap .write_btn_row button,
  .mypage_user_account_wrap .write_btn_row button.refound_ok {
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: none !important;
    background: #116ad4 !important;
    color: #fff !important;
  }
}

@media screen and (max-width: 480px) {
  .mypage_user_account_wrap .content_box .cont {
    padding: 8px 4px 40px 4px !important;
  }

  .mypage_user_account_wrap .write_table table tr {
    padding: 14px 2px !important;
  }

  .mypage_user_account_wrap .write_btn_row {
    margin-top: 26px !important;
    margin-bottom: 30px !important;
    padding: 0 2px !important;
  }
}

@media screen and (max-width: 320px) {
  .mypage_user_account_wrap .content_box .cont {
    padding: 6px 0 35px 0 !important;
  }

  .mypage_user_account_wrap .mp_ttl_row h3.mp_ttl {
    font-size: 18px !important;
  }

  .mypage_user_account_wrap .write_btn_row button,
  .mypage_user_account_wrap .write_btn_row button.refound_ok {
    height: 42px !important;
    font-size: 14px !important;
  }
}

/* mypage_user_penalty responsive (strictly scoped to mypage_user_penalty_wrap) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mypage_user_penalty_wrap .content_box .cont {
    padding: 20px 24px 60px 24px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_penalty_wrap .write_table table td {
    padding: 15px 20px !important;
  }
}

@media screen and (max-width: 768px) {
  .mypage_user_penalty_wrap .content_box .cont {
    padding: 10px 10px 50px 10px !important;
    box-sizing: border-box !important;
  }

  .mypage_user_penalty_wrap .mp_ttl_row {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 18px 4px 14px 4px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_user_penalty_wrap .write_table {
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }

  /* Outer table to stacked block layout */
  .mypage_user_penalty_wrap .penalty_main_table > colgroup {
    display: none !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table,
  .mypage_user_penalty_wrap .penalty_main_table > tbody,
  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr,
  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr > th,
  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table {
    border-top: 2px solid #252525 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr {
    padding: 16px 4px !important;
    border-bottom: 1px solid #eee !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr > th {
    height: auto !important;
    padding: 0 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252525 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr > td {
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.5 !important;
  }

  /* Inner penalty records table */
  .mypage_user_penalty_wrap .penalty_sub_table {
    display: table !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
    margin: 6px 0 !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table colgroup {
    display: table-column-group !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table colgroup col:nth-child(1) {
    width: 55px !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table colgroup col:nth-child(2) {
    width: auto !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table colgroup col:nth-child(3) {
    width: 85px !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table tbody {
    display: table-row-group !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table tr {
    display: table-row !important;
    padding: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table th {
    display: table-cell !important;
    height: auto !important;
    background: #f9fafb !important;
    padding: 9px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    text-align: center !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table td {
    display: table-cell !important;
    height: auto !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table td.tal {
    text-align: left !important;
    word-break: break-all !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table td[colspan="3"] {
    padding: 24px 10px !important;
    color: #6b6b6b !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  /* Penalty guidelines list */
  .mypage_user_penalty_wrap .penaly_info {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 14px 12px 28px !important;
    margin: 6px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  .mypage_user_penalty_wrap .penaly_info li {
    font-size: 13px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .mypage_user_penalty_wrap .content_box .cont {
    padding: 8px 4px 40px 4px !important;
  }

  .mypage_user_penalty_wrap .penalty_main_table > tbody > tr {
    padding: 14px 2px !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table th {
    padding: 8px 4px !important;
    font-size: 12px !important;
  }

  .mypage_user_penalty_wrap .penalty_sub_table td {
    padding: 8px 4px !important;
    font-size: 12px !important;
  }

  .mypage_user_penalty_wrap .penaly_info {
    padding: 10px 12px 10px 24px !important;
  }

  .mypage_user_penalty_wrap .penaly_info li {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 320px) {
  .mypage_user_penalty_wrap .content_box .cont {
    padding: 6px 0 35px 0 !important;
  }

  .mypage_user_penalty_wrap .mp_ttl_row h3.mp_ttl {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   Chat & Talent Message Responsive (/mypage/my_contact_list & my_custom_list)
   Scoped strictly within .contact_cont and .al_wrap to prevent side effects
   ========================================================================== */

/* Desktop PC layout (>= 769px) */
@media screen and (min-width: 769px) {
  /* Hide all mobile-only widgets on desktop */
  .chat_mo_topbar,
  .comp_info_mo_header,
  .chat_mo_backdrop {
    display: none !important;
  }

  /* .al_wrap flex container */
  .contact_cont .al_wrap {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    border: 1px solid #dbdbdb !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Left column: Room List (26%, max 310px) */
  .contact_cont .al_wrap .al_list {
    display: flex !important;
    flex-direction: column !important;
    width: 26% !important;
    max-width: 310px !important;
    min-width: 240px !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    border-right: 1px solid #dbdbdb !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_list .search_top {
    flex: 0 0 auto !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_list .al_box {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* Middle column: Chat Message Box */
  .contact_cont .al_wrap .al_msgbox {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    border-right: 1px solid #dbdbdb !important;
  }

  .contact_cont .al_wrap .al_msgbox .user_msg {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .chat_bot {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    border-top: 1px solid #dbdbdb !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox .send_box {
    flex: 1 1 auto !important;
    width: auto !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox textarea {
    width: 100% !important;
    height: 60px !important;
    min-height: 48px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox .send_btn {
    flex: 0 0 80px !important;
    width: 80px !important;
    height: auto !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* Right column: Partner Info (20%, max 245px) */
  .contact_cont .al_wrap .comp_info {
    display: block !important;
    position: static !important;
    width: 20% !important;
    max-width: 245px !important;
    min-width: 200px !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
}

/* Mobile & Tablet view (<= 768px) */
@media screen and (max-width: 768px) {
  .contact_cont {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 56px) !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .contact_cont .inner {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }

  .contact_cont fieldset {
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .contact_cont .cont_ttl,
  .contact_cont legend {
    display: none !important;
  }

  .al_wrap {
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* View toggling: Room List vs Chat Room */
  .al_wrap.view_list .al_list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-right: none !important;
  }

  .al_wrap.view_list .al_msgbox,
  .al_wrap.view_list .comp_info {
    display: none !important;
  }

  .al_wrap.view_chat .al_list {
    display: none !important;
  }

  .al_wrap.view_chat .al_msgbox {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    border-right: none !important;
    min-height: 0 !important;
    position: relative !important;
  }

  /* Search bar in Room List */
  .al_list .search_top {
    padding: 12px 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    flex: 0 0 auto !important;
  }

  .al_list .search_top input {
    height: 38px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    padding: 0 38px 0 16px !important;
    background: #fff !important;
  }

  .al_list .search_top button {
    right: 24px !important;
  }

  /* Room rows */
  .al_list .al_box {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
  }

  .al_list .al_row {
    padding: 12px 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
  }

  .al_list .al_row .al_prof {
    width: 50px !important;
    height: 50px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
  }

  .al_list .al_row .al_info {
    width: calc(100% - 62px) !important;
  }

  .al_list .al_row .al_info .user_name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 3px !important;
  }

  .al_list .al_row .al_info .user_mail {
    font-size: 13px !important;
    color: #4b5563 !important;
  }

  .al_list .al_row .date {
    font-size: 12px !important;
    color: #5f6775 !important;
    margin-top: 2px !important;
  }

  /* Mobile Top Bar inside Chat View */
  .chat_mo_topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 48px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex: 0 0 48px !important;
    z-index: 10 !important;
  }

  .chat_mo_topbar .btn_back_list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #116ad4 !important;
    background: none !important;
    border: none !important;
    padding: 6px 4px !important;
    cursor: pointer !important;
  }

  .chat_mo_topbar .mo_partner_name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    max-width: 55% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  .chat_mo_topbar .btn_open_info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    cursor: pointer !important;
  }

  /* Message Stream Area */
  .al_msgbox .user_msg {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
  }

  .al_msgbox .user_msg p {
    padding: 14px 12px 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #5f6775 !important;
  }

  .al_msgbox .chat_box {
    padding: 10px 12px 20px !important;
  }

  .al_msgbox .chat_box .chat:not(:last-child) {
    margin-bottom: 12px !important;
  }

  /* Chat Bubbles */
  .al_msgbox .chat_box .chat .chat_txt {
    max-width: 82% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .al_msgbox .chat_box .chat .chat_time {
    font-size: 11px !important;
  }

  .al_msgbox .chat_box .chat .chat_txt .chatimg {
    width: 68px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }

  .al_msgbox .chat_box .chat .chat_txt .chat_disc {
    width: calc(100% - 76px) !important;
  }

  .al_msgbox .chat_box .chat .chat_txt .chat_disc .suject {
    font-size: 13px !important;
    line-height: 1.3em !important;
  }

  .al_msgbox .chat_box .chat .chat_txt .chat_disc .price {
    font-size: 15px !important;
    margin-top: 2px !important;
  }

  /* Bottom Input Bar (.chat_bot) on Mobile */
  .contact_cont .al_wrap .al_msgbox .chat_bot,
  .al_msgbox .chat_bot {
    position: relative !important;
    flex: 0 0 auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  .contact_cont .al_wrap .al_msgbox .chat_bot form,
  .al_msgbox .chat_bot form {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox,
  .al_msgbox .wirtebox {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox .send_box,
  .al_msgbox .wirtebox .send_box {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #dbdbdb !important;
    border-radius: 12px !important;
    background: #f8f9fa !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox textarea,
  .al_msgbox .wirtebox textarea {
    width: 100% !important;
    height: 52px !important;
    min-height: 48px !important;
    max-height: 90px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border: none !important;
    border-bottom: 1px solid #e9ecef !important;
    background: transparent !important;
    resize: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .al_msgbox .wirtebox textarea::placeholder {
    font-size: 13px !important;
    color: #9ca3af !important;
  }

  .al_msgbox .wirtebox .file_box {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .al_msgbox .wirtebox .file_box input[type="file"] + label {
    font-size: 12px !important;
    cursor: pointer !important;
  }

  .contact_cont .al_wrap .al_msgbox .wirtebox .send_btn,
  .al_msgbox .wirtebox .send_btn {
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
    align-self: stretch !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: #116ad4 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    text-align: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Partner Info Drawer */
  .al_wrap .comp_info {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 330px !important;
    height: 100% !important;
    background: #ffffff !important;
    z-index: 10001 !important;
    transition: right 0.25s ease-in-out !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15) !important;
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 40px !important;
  }

  .al_wrap .comp_info.mo_open {
    right: 0 !important;
  }

  .comp_info_mo_header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
  }

  .comp_info_mo_header .mo_close_btn {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 6px !important;
  }

  .comp_info .comp_top {
    padding-top: 24px !important;
  }

  .comp_info .comp_top .prof {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 10px !important;
  }

  .comp_info .comp_top .subject {
    font-size: 15px !important;
    margin: 0 auto 24px !important;
    max-width: 80% !important;
  }

  .comp_info .item_box {
    margin-top: 24px !important;
    padding: 0 16px !important;
  }

  .comp_info .com_disc {
    padding: 0 16px !important;
  }

  .comp_info button {
    width: calc(100% - 32px) !important;
    margin: 14px auto 0 !important;
  }

  /* Backdrop for Mobile Info Drawer */
  .chat_mo_backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
  }

  /* Chat Popups Mobile Optimization (결제요청, 신고하기, 주문배송선택) */
  .msgpop .popup_box {
    width: 92% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  .msgpop .pop_top {
    padding: 10px 14px !important;
  }

  .msgpop .pop_top h3 {
    font-size: 16px !important;
    padding-left: 0 !important;
  }

  .pay_pop .pop_bot,
  .deliv_pop .pop_bot,
  .del_popup .pop_bot {
    padding: 16px 14px !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
  }

  .pay_pop .pay_box .pay_infobox .input_wrap input {
    width: 86% !important;
  }

  .msgpop .pabtn_wrap button {
    width: 46% !important;
    max-width: 140px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* Extra small mobile screens (<= 320px) */
@media screen and (max-width: 320px) {
  .chat_mo_topbar {
    padding: 0 8px !important;
  }

  .chat_mo_topbar .mo_partner_name {
    font-size: 13px !important;
    max-width: 50% !important;
  }

  .chat_mo_topbar .btn_back_list {
    font-size: 13px !important;
  }

  .chat_mo_topbar .btn_open_info {
    font-size: 12px !important;
    padding: 3px 7px !important;
  }

  .al_msgbox .chat_box {
    padding: 8px 6px !important;
  }

  .al_msgbox .chat_box .chat .chat_txt {
    max-width: 88% !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .al_msgbox .wirtebox {
    padding: 8px 6px !important;
    gap: 6px !important;
  }

  .al_msgbox .wirtebox .send_box {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .al_msgbox .wirtebox textarea {
    height: 48px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  .al_msgbox .wirtebox .file_box {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
  }

  .al_msgbox .wirtebox .send_btn {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-height: 74px !important;
    font-size: 13px !important;
  }

  .msgpop .popup_box {
    width: 96% !important;
  }
}

/* KE_HOACH_QA_ACCEPT_2610 Q4: every control a finger can hit is at least 32 x 32 on phones; padding (with an equal
   negative margin where the row must not grow) or a wider box, the drawn look stays */
@media screen and (max-width: 768px) {
  /* drawer: the sub-category links keep their 46px rows, the padding moves from the li into the link */
  #header_mobile .header_bot .mnb_list .submenu_list li { padding: 7px 0 !important; }
  #header_mobile .header_bot .mnb_list .submenu_list li a { padding: 8px 0 !important; min-height: 32px; box-sizing: border-box; }
  #header_mobile .my_info .profile .pro_r a { height: 32px !important; line-height: 30px !important; box-sizing: border-box; }
  #header_mobile .my_info .profile .logout_p { margin-top: 6px !important; }
  #header_mobile .my_info .cash_status a { padding: 8px 0 8px 8px !important; margin: -8px 0 !important; min-height: 32px; box-sizing: border-box; }
  #header_mobile .go_login a { display: inline-block; padding: 6px 2px; margin: -6px 0; min-height: 32px; box-sizing: border-box; }
  .footer_mobile .foot_top ul li span a { display: inline-block; min-height: 32px; box-sizing: border-box; }
  .footer_mobile .foot_bot .cs_info .cs_call a { line-height: 32px !important; margin-bottom: 11px !important; }
  .footer_mobile .foot_bot .foot_logo a { display: inline-block; min-height: 32px; }
  #myNav .mymenu_list li a { min-width: 32px; text-align: center; box-sizing: border-box; }
  .pager li a { min-width: 32px; box-sizing: border-box; }
  .viewtem_tab ul li button { min-height: 32px; }
  #container input.alliance_view-tit, #container input.alliance_file_name { min-height: 32px; box-sizing: border-box; }
  .login .mem_link li a, .seller_apply_agree a, .od_info > a.prop_cnt { display: inline-block; min-height: 32px; box-sizing: border-box; }
  .radio_list li label { display: flex; align-items: center; min-height: 32px; box-sizing: border-box; }
  .seller_apply_agree { min-height: 32px; box-sizing: border-box; }
  .ad_notice_box li a, .write_table td.user_type > a, #my_wrap .my_bttop a.btn03 { display: inline-flex; align-items: center; min-height: 32px; box-sizing: border-box; }
  .note-editor .note-btn.dropdown-toggle { min-width: 32px; }
  #order_cnt { min-height: 32px; box-sizing: border-box; }
  /* 27/10 loop: list titles (ad history, 1:1 / product asks, proposals), cart item name, quotation cells */
  #my_wrap .my_list li .subject a, #my_wrap .prop_list li .subject a { padding: 8px 0; margin: -8px 0; min-height: 32px; box-sizing: border-box; }
  td.item_info .order_info_item p.subject > a { display: inline-block; padding: 5px 0; margin: -5px 0; min-height: 32px; box-sizing: border-box; }
  .quatation_list .list_content li.item a { display: inline-block; padding: 6px 0; margin: -6px 0; min-height: 32px; min-width: 32px; box-sizing: border-box; }
  #my_wrap .od_list .od_state input { min-height: 32px; box-sizing: border-box; }
}

/* 27/10 loop: summernote-lite draws its toolbar and buttons at 3px while its frame is 4px; one radius for the editor
   (the joined-group rules of summernote are more specific and keep the inner corners square) */
.note-editor .note-toolbar { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.note-editor .note-btn { border-radius: 4px; }