/* ---------------------------------------------------------
   1. 사이트 전체 Pretendard 통일
   --------------------------------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    background: #F4F7FB !important;
    color: #191F28;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
}

/* 텍스트/폼/레이아웃 계열 전역 폰트 */
body,
button,
input,
textarea,
select,
option,
label,
a,
p,
span,
small,
strong,
b,
em,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
ul,
ol,
li,
dl,
dt,
dd,
nav,
header,
footer,
section,
article,
aside,
main,
div,
.modal,
.dropdown-menu,
.btn,
.form-control,
.card,
.alert,
.toast,
.jq-toast-single,
.jq-toast-wrap,
#toast-container,
.sns-hybrid-user-layout-20260601,
.sns-hybrid-user-layout-20260601 * {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif !important;
}

/* placeholder까지 통일 */
input::placeholder,
textarea::placeholder {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif !important;
}

/* 아이콘 폰트는 전역 폰트 강제에서 복구 */
.fa,
.fas,
.far,
.fal,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa::before,
.fas::before,
.far::before,
.fal::before,
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-brands::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

.fas,
.fa-solid,
.fas::before,
.fa-solid::before {
    font-weight: 900 !important;
}

.far,
.fa-regular,
.far::before,
.fa-regular::before {
    font-weight: 400 !important;
}

.fab,
.fa-brands,
.fab::before,
.fa-brands::before {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.fe,
[class^="fe-"],
[class*=" fe-"],
.fe::before,
.fe:before,
[class^="fe-"]::before,
[class^="fe-"]:before,
[class*=" fe-"]::before,
[class*=" fe-"]:before {
    font-family: "feather" !important;
    speak: none !important;
    font-style: normal !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

.material-icons,
.material-icons-outlined,
.material-symbols-outlined {
    font-family: "Material Icons", "Material Symbols Outlined" !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

/* SVG 아이콘은 폰트 영향 제거 */
svg,
svg * {
    font-family: initial !important;
}


html.sns-ui-booting-20260602,
html.sns-ui-booting-20260602 body {
    background: #F4F7FB !important;
}

/* 기존 로더가 레이아웃보다 먼저 튀어나오는 문제 차단 */
body.sns-hybrid-user-layout-20260601 > #page-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* booting 상태에서는 헤더/사이드바/메인 모두 숨겼다가 한번에 표시 */
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-mobile-horizontal-header-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-shell-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 #aside,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .navbar-side,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .layout-main,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-layout-main-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-app-content-20260601 {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ready 상태에서 헤더/사이드바/메인을 같은 프레임에 표시 */
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .sns-mobile-horizontal-header-20260601,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-shell-20260601,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 #aside,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .navbar-side,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .layout-main,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-layout-main-20260601,
html.sns-ui-ready-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-app-content-20260601 {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.16s ease-out !important;
}

/* 새로고침 순간 transform 애니메이션이 엇갈리는 문제 방지 */
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-shell-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-layout-main-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .sns-hybrid-app-content-20260601,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 #aside,
html.sns-ui-booting-20260602 body.sns-hybrid-user-layout-20260601 .navbar-side {
    transition: none !important;
    animation: none !important;
}

/* ---------------------------------------------------------
   3. 기본 배경/스크롤 안정화
   --------------------------------------------------------- */
body.sns-hybrid-user-layout-20260601 {
    background: #F4F7FB !important;
    overflow-x: hidden !important;
    font-weight: 500;
}

body.sns-hybrid-user-layout-20260601 .sns-hybrid-shell-20260601,
body.sns-hybrid-user-layout-20260601 .sns-hybrid-layout-main-20260601,
body.sns-hybrid-user-layout-20260601 .sns-hybrid-app-content-20260601 {
    background: #F4F7FB !important;
}/* 숫자 흔들림 방지 */ .sidebar-balance-amount, .top-balance-amount, #live-order-counter, #live-clock-time {
    font-variant-numeric: tabular-nums !important;
}


/*
  Purpose:
  - Hide leftover old ofm-nofiles.png / NO DATA image inside empty states.
  - Render clean 2026 empty-state UI with CSS.
  - Safe fallback for legacy runtime blocks.
*/

.data-empty img[src*="ofm-nofiles.png"],
.data-empty img[src*="NO-DATA"],
.data-empty img[alt*="NO DATA"],
.data-empty img[alt*="no data"] {
  display: none !important;
}

.data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"]),
.data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"]) {
  width: min(440px, calc(100% - 32px)) !important;
  margin: 80px auto 18px !important;
  padding: 40px 28px 36px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.035) !important;
  text-align: center !important;
}

.data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"])::before,
.data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"])::before {
  content: "";
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(238, 242, 255, 1) 100%);
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
}

.data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"])::after,
.data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"])::after {
  content: "표시할 데이터가 없습니다";
  display: block;
  color: #334155;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.35;
}

/* Fallback for browsers without :has(). This keeps it clean even if pseudo title cannot be inserted. */
.data-empty .content:not(.snspicks-empty-state-2026) img[src*="ofm-nofiles.png"] {
  display: none !important;
}

.data-empty .content:not(.snspicks-empty-state-2026) {
  text-align: center;
}

.data-empty .content:not(.snspicks-empty-state-2026) + div,
.data-empty .content:not(.snspicks-empty-state-2026) + p,
.data-empty .content:not(.snspicks-empty-state-2026) ~ div,
.data-empty .content:not(.snspicks-empty-state-2026) ~ p {
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

/* Direct legacy box fallback */
.data-empty .box-image img[src*="ofm-nofiles.png"],
.data-empty .box-image img[alt*="NO DATA"] {
  display: none !important;
}

@media (max-width: 767px) {
  .data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"]),
  .data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"]) {
    margin: 56px auto 14px !important;
    padding: 34px 22px 32px !important;
    border-radius: 24px !important;
  }

  .data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"])::before,
  .data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"])::before {
    width: 60px;
    height: 60px;
    border-radius: 22px;
  }

  .data-empty .content:not(.snspicks-empty-state-2026):has(img[src*="ofm-nofiles.png"])::after,
  .data-empty .content:not(.snspicks-empty-state-2026):has(img[alt*="NO DATA"])::after {
    font-size: 15px;
  }
}


.top-info-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
}
.top-info-btn .top-info-btn-label-20260604{
    display:inline-flex!important;
    align-items:center!important;
    line-height:1!important;
}
.top-info-btn .sns-top-info-chevron-20260604{
    display:inline-block!important;
    width:12px!important;
    height:12px!important;
    margin-left:0!important;
    flex:0 0 12px!important;
    position:relative!important;
    top:0!important;
    transform:none!important;
    vertical-align:middle!important;
    background:currentColor!important;
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    font-size:0!important;
    line-height:0!important;
    border:0!important;
    overflow:hidden!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%3E%3C/svg%3E") center/12px 12px no-repeat!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%3E%3C/svg%3E") center/12px 12px no-repeat!important;
}
.top-info-btn .sns-top-info-chevron-20260604:before,
.top-info-btn .sns-top-info-chevron-20260604:after{
    content:none!important;
    display:none!important;
}


body.sns-hybrid-user-layout-20260601 .sns-hybrid-layout-main-20260601,
body.sns-hybrid-user-layout-20260601 .page-content,
body.sns-hybrid-user-layout-20260601 .content-area,
body.sns-hybrid-user-layout-20260601 .order-page-wrapper,
body.sns-hybrid-user-layout-20260601 #result_ajaxSearch,
body.sns-hybrid-user-layout-20260601 .right-sidebar-wrapper,
body.sns-hybrid-user-layout-20260601 .sns-fixed-sidebar-20260601,
body.sns-hybrid-user-layout-20260601 .vertical-sidebar,
body.sns-hybrid-user-layout-20260601 .app-sidebar {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    perspective: none !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
}

@keyframes snsPageReveal20260605 {
    from { opacity: 1; transform: none; filter: none; }
    to   { opacity: 1; transform: none; filter: none; }
}

@keyframes snsSectionReveal20260605 {
    from { opacity: 1; transform: none; filter: none; }
    to   { opacity: 1; transform: none; filter: none; }
}