/**
 * Theme Name: PERSONA v1.1 (Monotone Build)
 * PerfectPanel-safe monotone overrides + Kakao/FAQ cleanup.
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --font-stack: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;

  /* strict monotone tokens */
  --bg: #0f1115;
  --panel: #171a20;
  --panel-2: #1d2128;
  --panel-3: #242932;
  --text: #e7e9ed;
  --muted: rgba(231, 233, 237, 0.68);
  --border: rgba(255, 255, 255, 0.12);

  --accent: #d8dbe1;
  --accent-hover: #f1f3f6;
  --accent-contrast: #101217;
  --white: #ffffff;

  /* neutralize legacy blue tokens used by panel/theme */
  --main-color: #d8dbe1 !important;
  --sub-color: #c9ced6 !important;
  --button-color: #d8dbe1 !important;
  --button-color2: #f1f3f6 !important;
  --primary-gradient: linear-gradient(180deg, #d8dbe1 0%, #bfc5cf 100%) !important;
}

/* Base reset */
html,
body,
.auth_body,
.guest {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-stack);
  letter-spacing: -0.02em;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

/* Global card / panel tone */
.card,
.panel,
.well,
.bg-white,
.bg-light,
.ser-well,
.services-div,
.table-responsive,
.result-box,
.profile-wrap,
.user-dashboard-rightbar .card,
.order-form-div,
.service-description .modal-content {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Typography */
p,
span,
label,
li,
td,
th,
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--text) !important;
  font-family: var(--font-stack);
}

.text-muted,
.small,
.ftr-txt,
.copyright,
.bottom-ftr-nav li a {
  color: var(--muted) !important;
}

/* Header / nav */
header,
.navbar,
.main-navbar {
  background: #141820 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  z-index: 9999;
}

.main-navbar.navbar-light .navbar-nav .nav-link:hover,
.main-navbar.navbar-light .navbar-nav .nav-link.active {
  color: var(--white) !important;
}

.main-navbar.navbar-light .navbar-nav .nav-item .nav-link::after {
  border-color: #f1f3f6 !important;
}

/* Inputs */
input,
select,
textarea,
.form-control,
#history-search .form-control,
#search {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
#history-search .form-control:focus {
  border-color: rgba(255, 255, 255, 0.34) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* Buttons: strict monotone */
.btn,
.btn.btn-primary,
.btn.btn-primary2,
.btn-success,
.buy-btn,
.blog-btn,
.related-blog-btn,
.order-form-div .paymentButton,
.order-form-div .submit-button,
.order-form-div button[type="submit"],
.nav-link.addfunds-menu,
.service_filter_btn,
.nav.nav-pills .nav-item .nav-link {
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  font-weight: 700;
  box-shadow: none !important;
}

.btn:hover,
.buy-btn:hover,
.blog-btn:hover,
.related-blog-btn:hover,
.order-form-div .paymentButton:hover,
.order-form-div .submit-button:hover,
.order-form-div button[type="submit"]:hover,
.service_filter_btn:hover,
.nav.nav-pills .nav-item .nav-link:hover,
.nav.nav-pills .nav-item .nav-link.active,
.service_filter_btn.active,
.service_filter_btn.selected {
  background: var(--accent-hover) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: var(--accent-contrast) !important;
}

.btn-outline-primary,
.btn.btn-outline-light,
a.btn.btn-outline-light {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Badge / pills / step chips */
.badge,
.badge-status,
.badge-online,
.badge-normal,
.badge-success-status,
.order-steps,
.order-step-number,
.step-number,
.process-number,
.order-steps li span.step,
.capsule,
.category-pill,
.platform-pill,
.service-pill {
  background: var(--panel-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Table */
.table {
  border-collapse: separate;
  border-spacing: 0 8px;
  background: transparent !important;
}

.table th {
  background: var(--panel-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.table td,
#service-table tbody tr td {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Modal */
.modal .modal-content {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}

.modal .modal-header {
  border-bottom: 1px solid var(--border) !important;
}

.modal .btn-close {
  filter: invert(1) opacity(0.85);
}

/* FAQ: compact and clean */
.faq-card .faq-item {
  border: 0 !important;
  margin-bottom: 10px;
}

.faq-card summary {
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--text) !important;
  padding: 12px 14px !important;
}

.faq-card summary:hover {
  background: var(--panel-3) !important;
}

.faq-card .answer {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--muted) !important;
  padding: 12px 14px !important;
}

/* Signup spacing cleanup */
#signup,
#signin {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  min-height: auto !important;
}

#signup .p-4.rounded.shadow.border,
#signin .p-4.rounded.shadow.border {
  margin: 0 auto !important;
  padding: 24px !important;
}

/* Email confirmation wrapper cleanup */
.confirm-email-wrap {
  border: 0 !important;
  background: transparent !important;
}

/* Kakao floating: single button only, stable on desktop/mobile */
a.kakao_float {
  display: none !important;
}

button.kakaotalk {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 1200 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

button.kakaotalk img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
}

@media (max-width: 767.98px) {
  button.kakaotalk {
    right: 12px !important;
    bottom: 12px !important;
  }

  .mobile-nav {
    bottom: 0 !important;
  }
}

/* Mobile offcanvas readability */
@media (max-width: 991.98px) {
  .main-navbar .offcanvas-collapse,
  .main-navbar .offcanvas-collapse.show,
  .offcanvas,
  .offcanvas.show {
    background: var(--panel-2) !important;
    opacity: 1 !important;
  }

  .main-navbar .offcanvas-collapse .nav-link,
  .offcanvas .nav-link,
  .offcanvas a {
    color: var(--text) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  .main-navbar .offcanvas-collapse .addfunds-menu {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    background: var(--panel-3) !important;
    color: var(--text) !important;
  }

  .main-navbar .offcanvas-collapse .balance,
  .main-navbar .offcanvas-collapse .balance * {
    color: var(--white) !important;
  }
}

/* =========================================================
   v1.2 hotfix: top bar, balance readability, nav position,
   and excessive top spacing cleanup
   ========================================================= */

/* 1) 상단바 네이비끼 제거 + 완전 모노톤 */
header,
.navbar,
.main-navbar,
.auth_body .main-navbar {
  background: #1a1c21 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* 상단 메뉴 텍스트 대비 강화 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.addfunds-menu,
.main-navbar.navbar-light .navbar-collapse .btn,
.main-navbar .navbar-brand,
.main-navbar .navbar-brand * {
  color: #f1f3f6 !important;
}

/* 2) 우측 보유금액 캡슐 가독성 개선 */
.main-navbar .addfunds-menu,
.main-navbar .addfunds-menu *,
.main-navbar a[href*="addfunds"],
.main-navbar a[href*="addfunds"] * {
  background: #2a2e36 !important;
  color: #f5f7fa !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* 3) 주문내역/잔액충전/가이드 메뉴 하단 고정형 */
.mobile-nav,
ul.mobile-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 8px 6px !important;
  margin: 0 !important;
  list-style: none !important;
  background: #1a1c21 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  z-index: 1100 !important;
}

.mobile-nav li,
.mobile-nav li a {
  list-style: none !important;
  color: #e7e9ed !important;
}

/* 데스크탑에서는 숨기고 모바일에서만 노출 */
@media (min-width: 768px) {
  .mobile-nav,
  ul.mobile-nav {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .mobile-nav,
  ul.mobile-nav {
    display: flex !important;
  }

  /* 하단 네비와 카카오 버튼 겹침 방지 */
  button.kakaotalk {
    bottom: 72px !important;
  }

  body,
  .auth_body,
  .guest {
    padding-bottom: 64px !important;
  }
}

/* 4) 상단바와 주문하기 사이 과한 여백 축소 */
.auth_body .content__area,
.auth_body .main__content__area,
.auth_main,
.user-dashboard-rightbar,
.user-dashboard-rightbar.mt-5,
.user-dashboard-rightbar.mt-5.pt-5,
.search__box,
.search__box.mt-5,
.search__box.mt-5.pt-5,
.default__card__wraper,
.default__card__wraper.py-5,
.default__card__wraper.py-5.mt-5,
.inner-top-banner,
#top-sec {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 주문 카드가 너무 아래로 밀릴 때 안전 보정 */
.order-form-div,
.order-form-area,
.ser-well.services-div {
  margin-top: 8px !important;
}

/* =========================================================
   v1.3 hotfix: restore breathing space, remove navy remnants,
   clean balance chip, and logo-only Kakao button
   ========================================================= */

/* A) 상단 여백을 '0'에서 적정값으로 복구 (너무 붙는 문제 완화) */
.auth_body .content__area,
.auth_body .main__content__area,
.auth_main,
.user-dashboard-rightbar,
.user-dashboard-rightbar.mt-5,
.user-dashboard-rightbar.mt-5.pt-5,
.search__box,
.search__box.mt-5,
.search__box.mt-5.pt-5,
.default__card__wraper,
.default__card__wraper.py-5,
.default__card__wraper.py-5.mt-5,
.inner-top-banner,
#top-sec {
  margin-top: 14px !important;
  padding-top: 10px !important;
}

/* B) 상단 탭/활성 탭/잔액충전 탭의 네이비 톤 제거 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.active,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link:focus,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  background: transparent !important;
  color: #f2f4f7 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.active {
  background: #2b3038 !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 10px !important;
}

/* C) 보유금액 칩 내부 잔블럭/이중배경 제거 + 가독성 강화 */
.main-navbar .addfunds-menu,
.main-navbar a[href*="addfunds"] {
  background: #313640 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.main-navbar .addfunds-menu::before,
.main-navbar .addfunds-menu::after,
.main-navbar a[href*="addfunds"]::before,
.main-navbar a[href*="addfunds"]::after,
.main-navbar .addfunds-menu span,
.main-navbar .addfunds-menu small,
.main-navbar .addfunds-menu strong,
.main-navbar a[href*="addfunds"] span,
.main-navbar a[href*="addfunds"] small,
.main-navbar a[href*="addfunds"] strong {
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* D) 잔액충전 페이지 카드/박스 네이비 그라데이션 제거 */
.fund-content,
.fund-content-box,
.fund-content-wrap,
.addfunds-wrap,
.addfunds-card,
.recharge-wrap,
.recharge-card,
.payment-wrap,
.payment-card,
.card,
.well,
.ser-well,
.order-form-div {
  background-image: none !important;
}

/* E) 카카오: 흰 네모 박스 제거하고 로고만 보이도록 클리핑 */
button.kakaotalk {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

button.kakaotalk img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: circle(47% at 50% 50%);
  -webkit-clip-path: circle(47% at 50% 50%);
  box-shadow: none !important;
}

/* =========================================================
   v1.4 hotfix: add breathing space + remove boxed nav/chips
   ========================================================= */

/* 1) 본문 상단 여백 조금 더 확보 */
.auth_body .content__area,
.auth_body .main__content__area,
.auth_main,
.user-dashboard-rightbar,
.user-dashboard-rightbar.mt-5,
.user-dashboard-rightbar.mt-5.pt-5,
.search__box,
.search__box.mt-5,
.search__box.mt-5.pt-5,
.default__card__wraper,
.default__card__wraper.py-5,
.default__card__wraper.py-5.mt-5,
.inner-top-banner,
#top-sec {
  margin-top: 22px !important;
  padding-top: 14px !important;
}

/* 2) 상단 메뉴(특히 잔액충전 active) 박스 테두리 제거 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.active,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link:focus,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.main-navbar.navbar-light .navbar-nav .nav-item .nav-link.active {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 기존 active 테두리/박스 효과 잔재 제거 */
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link::before,
.main-navbar.navbar-light .navbar-nav .nav-item .nav-link::after {
  box-shadow: none !important;
}

/* 3) 보유금액 + 우측 화살표 칩의 실선 박스 제거 */
.main-navbar .addfunds-menu,
.main-navbar a[href*="addfunds"],
.main-navbar .addfunds-menu *,
.main-navbar a[href*="addfunds"] * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 보유금액 텍스트는 가독성만 유지 */
.main-navbar .addfunds-menu,
.main-navbar a[href*="addfunds"] {
  color: #f3f5f8 !important;
  font-weight: 700 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* 화살표 아이콘/뱃지류도 배경 제거 */
.main-navbar .addfunds-menu i,
.main-navbar .addfunds-menu svg,
.main-navbar a[href*="addfunds"] i,
.main-navbar a[href*="addfunds"] svg,
.main-navbar .addfunds-menu .badge,
.main-navbar a[href*="addfunds"] .badge {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f3f5f8 !important;
  fill: #f3f5f8 !important;
}

/* 4) 잔액충전 화면 네이비 잔재 제거 (패널 강제 모노톤) */
.fund-content,
.fund-content-box,
.fund-content-wrap,
.addfunds-wrap,
.addfunds-card,
.recharge-wrap,
.recharge-card,
.payment-wrap,
.payment-card,
.balance-card,
.balance-wrap {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* =========================================================
   v1.5 hotfix: global top spacing recovery for crowded pages
   ========================================================= */

/* 헤더 바로 아래가 붙는 현상 완화: 본문 시작 여백 복구 */
.auth_body,
.auth_main,
.page-content,
.main-content,
.content-wrapper,
.user-dashboard-rightbar {
  padding-top: 12px !important;
}

/* 첫 블록(검색, 상태바, 주문카드)의 상단 간격 확실히 확보 */
.auth_body .content__area > .container,
.auth_body .main__content__area > .container,
.user-dashboard-rightbar > .row:first-child,
.user-dashboard-rightbar .search__box:first-child,
.user-dashboard-rightbar .ser-well.services-div:first-child,
.user-dashboard-rightbar .order-form-div:first-child {
  margin-top: 18px !important;
}

/* 공통 카드 묶음이 헤더에 붙는 케이스 방어 */
.default__card__wraper,
.default__card__wraper.py-5,
.default__card__wraper.py-5.mt-5,
.search__box,
.search__box.mt-5,
.search__box.mt-5.pt-5,
#top-sec,
.inner-top-banner {
  margin-top: 28px !important;
  padding-top: 0 !important;
}

/* 모바일은 여백을 조금만 유지 */
@media (max-width: 991.98px) {
  .auth_body,
  .auth_main,
  .page-content,
  .main-content,
  .content-wrapper,
  .user-dashboard-rightbar {
    padding-top: 8px !important;
  }

  .default__card__wraper,
  .search__box,
  #top-sec,
  .inner-top-banner {
    margin-top: 16px !important;
  }
}

/* =========================================================
   v1.6 hotfix: login-only layout cleanup (remove artwork)
   ========================================================= */

/* 로그인 페이지: 상단 여백 추가해서 숨통 확보 */
#signin,
.signin,
.login-page,
.auth #signin {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  margin-top: 0 !important;
}

/* 로그인 카드 래퍼 여백 확보 */
#signin .container,
#signin .row,
#signin .col-sm-6,
#signin .col-md-6,
#signin .p-4.rounded.shadow.border,
#signin .login-box,
#signin .auth-box {
  margin-top: 12px !important;
}

/* 로그인 왼쪽 이미지/일러스트 영역 제거 (폼만 유지) */
#signin .login-image,
#signin .login-illustration,
#signin .signin-image,
#signin .auth-visual,
#signin .left-img,
#signin .left-image,
#signin .banner_left,
#signin .col-md-6:first-child img,
#signin .col-lg-6:first-child img,
#signin .col-sm-6:first-child img,
body:has(#signin) .login-image,
body:has(#signin) .login-illustration,
body:has(#signin) .signin-image {
  display: none !important;
  visibility: hidden !important;
  max-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 로그인 폼 영역 1열 고정 */
#signin .col-md-6,
#signin .col-lg-6,
#signin .col-sm-6,
#signin .login-form,
#signin .login-right {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 로그인 박스 크기/가독성 정리 */
#signin .p-4.rounded.shadow.border,
#signin .login-box,
#signin .auth-box,
#signin .card {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 26px !important;
}

/* 헤더와 로그인 폼 사이 추가 간격 (데스크탑) */
@media (min-width: 992px) {
  #signin,
  .signin,
  .login-page {
    padding-top: 64px !important;
  }
}

/* =========================================================
   v1.7 hotfix: spacing normalization + login/signup/footer fixes
   ========================================================= */

/* 1) 첫 페이지/주문/대량주문 상단 여백을 좌우 카드 레벨로 맞춤 */
.auth_body .user-dashboard-rightbar,
.auth_body .order-form-div,
.auth_body .ser-well.services-div,
.auth_body .massorder,
.auth_body .mass-order,
.auth_body .new-order,
.auth_body .default__card__wraper,
.auth_body .default__card__wraper.py-5,
.auth_body .default__card__wraper.py-5.mt-5,
.auth_body .search__box,
.auth_body .search__box.mt-5,
.auth_body .search__box.mt-5.pt-5,
.auth_body .row.search-row {
  margin-top: 30px !important;
}

/* top status bar(우측 상태바)도 동일 레벨로 살짝 내림 */
.auth_body .checktime,
.auth_body .service-status,
.auth_body .status-bar {
  margin-top: 30px !important;
}

/* 모바일은 과하지 않게 */
@media (max-width: 991.98px) {
  .auth_body .user-dashboard-rightbar,
  .auth_body .order-form-div,
  .auth_body .ser-well.services-div,
  .auth_body .massorder,
  .auth_body .mass-order,
  .auth_body .new-order,
  .auth_body .default__card__wraper,
  .auth_body .search__box,
  .auth_body .row.search-row,
  .auth_body .checktime,
  .auth_body .service-status,
  .auth_body .status-bar {
    margin-top: 18px !important;
  }
}

/* 2) 회원가입 페이지 상단 숨막힘 완화 */
#signup,
.signup,
.signup-page {
  padding-top: 60px !important;
  padding-bottom: 48px !important;
}

#signup .p-4.rounded.shadow.border,
#signup .signup-innerbox,
#signup .signup-frm {
  margin-top: 16px !important;
}

/* 3) footer 불릿 정렬/간격 싱크 맞춤 */
footer ul,
footer .ftr-menu,
footer .ftr-menu2,
footer .company-info,
footer .company-info ul {
  list-style-position: outside !important;
  padding-left: 1.2em !important;
  margin-left: 0 !important;
}

footer li,
footer .company-info li {
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}

footer li::marker,
footer .company-info li::marker {
  color: rgba(231, 233, 237, 0.9) !important;
  font-size: 0.9em;
}

/* 비어있는 li(점만 보이는 라인) 제거 */
footer li:empty,
footer .company-info li:empty {
  display: none !important;
}

/* 4) 로그인: 이미지 완전 제거 + 폼 비대함 축소 */
#signin .col-md-6:first-child,
#signin .col-lg-6:first-child,
#signin .col-sm-6:first-child,
#signin .signin-left,
#signin .login-left,
#signin .auth-left,
#signin .banner_left,
#signin .col-left,
body:has(#signin) .col-md-6:first-child,
body:has(#signin) .col-lg-6:first-child,
body:has(#signin) .col-sm-6:first-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 로그인 폼을 너무 크게 만들지 않게 재조정 */
#signin .p-4.rounded.shadow.border,
#signin .login-box,
#signin .auth-box,
#signin .card,
#signin .signin-right,
#signin .login-right,
#signin .auth-right {
  max-width: 440px !important;
  width: min(440px, calc(100% - 24px)) !important;
  margin: 14px auto 0 !important;
  padding: 20px !important;
  border-radius: 14px !important;
}

/* 로그인 헤더와 폼 제목 사이 여백 추가 */
#signin .title,
#signin .login-title,
#signin h2,
#signin h3 {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   v1.8 hotfix: login widget floating cleanup on landing page
   ========================================================= */

/* 랜딩/게스트 로그인 박스: 위쪽 여백 확보 */
.guest #signin,
.guest .signin,
.guest .login-page,
.guest .login-wrap,
.guest .login-section {
  padding-top: 56px !important;
  margin-top: 12px !important;
}

/* 로그인 위젯(랜딩)에서 이미지 패널 제거 */
.guest .login-image,
.guest .login-illustration,
.guest .signin-image,
.guest .auth-visual,
.guest .left-image,
.guest .banner_left,
.guest .login-card .col-md-6:first-child,
.guest .login-card .col-lg-6:first-child,
.guest .login-box .col-md-6:first-child,
.guest .login-box .col-lg-6:first-child,
.guest .auth-box .col-md-6:first-child,
.guest .auth-box .col-lg-6:first-child,
.guest #signin .col-md-6:first-child,
.guest #signin .col-lg-6:first-child,
.guest #signin .col-sm-6:first-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 로그인 폼만 1열로 정렬 + 크기 축소 */
.guest #signin .col-md-6,
.guest #signin .col-lg-6,
.guest #signin .col-sm-6,
.guest .login-form,
.guest .login-right,
.guest .auth-right {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.guest #signin .p-4.rounded.shadow.border,
.guest .login-box,
.guest .auth-box,
.guest .login-card,
.guest .signin-right,
.guest .login-right,
.guest .auth-right {
  max-width: 400px !important;
  width: min(400px, calc(100% - 24px)) !important;
  margin: 18px auto 0 !important;
  padding: 18px !important;
  border-radius: 14px !important;
}

/* 로그인 버튼 과대 사이즈 축소 */
.guest #signin .btn,
.guest .login-box .btn,
.guest .auth-box .btn,
.guest .login-card .btn,
.guest #signin button[type="submit"] {
  height: 48px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
}

/* 모바일에서는 조금 더 컴팩트 */
@media (max-width: 767.98px) {
  .guest #signin,
  .guest .signin,
  .guest .login-page,
  .guest .login-wrap,
  .guest .login-section {
    padding-top: 36px !important;
    margin-top: 8px !important;
  }

  .guest #signin .p-4.rounded.shadow.border,
  .guest .login-box,
  .guest .auth-box,
  .guest .login-card {
    max-width: 360px !important;
    width: min(360px, calc(100% - 20px)) !important;
    padding: 16px !important;
  }
}

/* =========================================================
   v1.9 hotfix (style.css): force hide landing login artwork
   ========================================================= */

/* 랜딩 로그인: 첫 번째 비주얼 컬럼 강제 제거 */
.guest .login-wrap .row > [class*="col-"]:first-child,
.guest .login-card .row > [class*="col-"]:first-child,
.guest .auth-box .row > [class*="col-"]:first-child,
.guest #signin .row > [class*="col-"]:first-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 폼 컬럼은 단일 폭으로 */
.guest .login-wrap .row > [class*="col-"]:last-child,
.guest .login-card .row > [class*="col-"]:last-child,
.guest .auth-box .row > [class*="col-"]:last-child,
.guest #signin .row > [class*="col-"]:last-child {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 로그인 폼 카드 크기 추가 축소 + 플로팅 여백 */
.guest .login-wrap,
.guest .login-card,
.guest #signin {
  margin-top: 18px !important;
  padding-top: 52px !important;
}

.guest .login-wrap .p-4,
.guest .login-card .p-4,
.guest #signin .p-4.rounded.shadow.border,
.guest #signin .login-box,
.guest #signin .auth-box {
  max-width: 380px !important;
  width: min(380px, calc(100% - 24px)) !important;
  margin: 16px auto 0 !important;
  padding: 16px !important;
}

.guest #signin button[type="submit"],
.guest .login-wrap button[type="submit"],
.guest .login-card button[type="submit"] {
  height: 44px !important;
  font-size: 14px !important;
}

/* =========================================================
   v2.0 unified source-of-truth: style.css only
   ========================================================= */

/* 단일 파일 운영: 로그인 위젯 이미지/비주얼 패널 완전 제거 (랜딩/게스트) */
.guest .login-wrap img,
.guest .login-card img,
.guest .auth-box img,
.guest #signin img,
.guest .signin img,
.guest .login-page img {
  display: none !important;
}

/* 2열 로그인 레이아웃을 강제로 1열 폼 전용으로 */
.guest .login-wrap .row,
.guest .login-card .row,
.guest .auth-box .row,
.guest #signin .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

.guest .login-wrap .row > [class*="col-"]:first-child,
.guest .login-card .row > [class*="col-"]:first-child,
.guest .auth-box .row > [class*="col-"]:first-child,
.guest #signin .row > [class*="col-"]:first-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-image: none !important;
}

.guest .login-wrap .row > [class*="col-"]:last-child,
.guest .login-card .row > [class*="col-"]:last-child,
.guest .auth-box .row > [class*="col-"]:last-child,
.guest #signin .row > [class*="col-"]:last-child,
.guest .login-form,
.guest .login-right,
.guest .auth-right {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 로그인 섹션이 헤더 아래에 숨지 않도록 여백 부여 */
.guest #signin,
.guest .signin,
.guest .login-page,
.guest .login-wrap,
.guest .login-section {
  margin-top: 16px !important;
  padding-top: 64px !important;
  padding-bottom: 32px !important;
}

/* 로그인 카드/버튼 사이즈를 더 작고 컴팩트하게 */
.guest #signin .p-4.rounded.shadow.border,
.guest .login-wrap .p-4,
.guest .login-card .p-4,
.guest .login-box,
.guest .auth-box,
.guest .signin-right,
.guest .login-right,
.guest .auth-right {
  max-width: 360px !important;
  width: min(360px, calc(100% - 24px)) !important;
  margin: 18px auto 0 !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.guest #signin button[type="submit"],
.guest .login-wrap button[type="submit"],
.guest .login-card button[type="submit"],
.guest #signin .btn {
  height: 42px !important;
  min-height: 42px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}

@media (max-width: 767.98px) {
  .guest #signin,
  .guest .signin,
  .guest .login-page,
  .guest .login-wrap,
  .guest .login-section {
    padding-top: 42px !important;
    margin-top: 8px !important;
  }

  .guest #signin .p-4.rounded.shadow.border,
  .guest .login-wrap .p-4,
  .guest .login-card .p-4,
  .guest .login-box,
  .guest .auth-box {
    max-width: 330px !important;
    width: min(330px, calc(100% - 18px)) !important;
    padding: 12px !important;
  }
}

/* =========================================================
   v2.1 emergency login override: remove left visual for real
   ========================================================= */

/* 로그인 위젯 컨테이너 공통 */
.home-signIn,
.home-signin,
.signin-wrap,
.login-wrap,
.login-widget,
#signin,
.signin {
  padding-top: 26px !important;
}

/* 2컬럼 로그인 블록에서 왼쪽 컬럼(이미지/배경) 자체 제거 */
.home-signIn .row > div:first-child,
.home-signin .row > div:first-child,
.signin-wrap .row > div:first-child,
.login-wrap .row > div:first-child,
.login-widget .row > div:first-child,
#signin .row > div:first-child,
.signin .row > div:first-child {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* 왼쪽 컬럼 내부 이미지/캔버스/SVG도 강제 제거 */
.home-signIn .row > div:first-child img,
.home-signIn .row > div:first-child svg,
.home-signIn .row > div:first-child canvas,
.home-signin .row > div:first-child img,
.signin-wrap .row > div:first-child img,
.login-wrap .row > div:first-child img,
.login-widget .row > div:first-child img,
#signin .row > div:first-child img,
.signin .row > div:first-child img {
  display: none !important;
}

/* 오른쪽 로그인 폼 컬럼은 전체 폭 사용 */
.home-signIn .row > div:last-child,
.home-signin .row > div:last-child,
.signin-wrap .row > div:last-child,
.login-wrap .row > div:last-child,
.login-widget .row > div:last-child,
#signin .row > div:last-child,
.signin .row > div:last-child {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 로그인 카드 크기 축소 (비대함 제거) */
.home-signIn .card,
.home-signIn .login-box,
.home-signIn .auth-box,
.home-signIn .p-4.rounded.shadow.border,
.home-signin .card,
.signin-wrap .card,
.login-wrap .card,
.login-widget .card,
#signin .card,
#signin .login-box,
#signin .auth-box,
#signin .p-4.rounded.shadow.border,
.signin .card {
  max-width: 360px !important;
  width: min(360px, calc(100% - 20px)) !important;
  margin: 14px auto !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

/* 버튼 과대 사이즈 줄이기 */
.home-signIn button[type="submit"],
.home-signIn .btn,
.home-signin button[type="submit"],
.signin-wrap button[type="submit"],
.login-wrap button[type="submit"],
.login-widget button[type="submit"],
#signin button[type="submit"],
#signin .btn,
.signin button[type="submit"] {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* 제목과 입력칸 사이 여백 확보 */
.home-signIn h2,
.home-signIn h3,
#signin h2,
#signin h3,
.signin h2,
.signin h3 {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   v2.2 hotfix: restore top breathing space on refunds/mass order
   ========================================================= */

/* 헤더 고정 상태에서 본문 첫 줄이 씹히지 않도록 기본 오프셋 복구 */
.auth_body .main__page__area .main__content__area,
.auth_body .content__area,
.auth_body .auth_main {
  padding-top: 16px !important;
}

/* Refund / 대량주문 페이지에서 실제 콘텐츠 시작 줄 여백 확보 */
.auth_body .user-dashboard-rightbar,
.auth_body .user-dashboard-rightbar.mt-5,
.auth_body .user-dashboard-rightbar.mt-5.pt-5,
.auth_body .default__card__wraper,
.auth_body .default__card__wraper.py-5,
.auth_body .default__card__wraper.py-5.mt-5,
.auth_body .search__box,
.auth_body .search__box.mt-5,
.auth_body .search__box.mt-5.pt-5,
.auth_body .massorder,
.auth_body .mass-order,
.auth_body .refund,
.auth_body .refunds,
.auth_body .refund-area,
.auth_body .refund-page {
  margin-top: 26px !important;
  padding-top: 0 !important;
}

/* 첫 카드/테이블 자체에도 최소 간격 보장 */
.auth_body .user-dashboard-rightbar > .row:first-child,
.auth_body .user-dashboard-rightbar .ser-well.services-div:first-child,
.auth_body .user-dashboard-rightbar .order-form-div:first-child,
.auth_body .user-dashboard-rightbar .table-responsive:first-child {
  margin-top: 12px !important;
}

@media (max-width: 991.98px) {
  .auth_body .main__page__area .main__content__area,
  .auth_body .content__area,
  .auth_body .auth_main {
    padding-top: 10px !important;
  }

  .auth_body .user-dashboard-rightbar,
  .auth_body .user-dashboard-rightbar.mt-5,
  .auth_body .user-dashboard-rightbar.mt-5.pt-5,
  .auth_body .default__card__wraper,
  .auth_body .search__box,
  .auth_body .massorder,
  .auth_body .mass-order,
  .auth_body .refund,
  .auth_body .refunds,
  .auth_body .refund-area,
  .auth_body .refund-page {
    margin-top: 18px !important;
  }

  .auth_body .user-dashboard-rightbar > .row:first-child,
  .auth_body .user-dashboard-rightbar .ser-well.services-div:first-child,
  .auth_body .user-dashboard-rightbar .order-form-div:first-child,
  .auth_body .user-dashboard-rightbar .table-responsive:first-child {
    margin-top: 8px !important;
  }
}

/* =========================================================
   v2.3 hotfix: mobile navbar must stay inside hamburger offcanvas
   ========================================================= */
@media (max-width: 991.98px) {
  /* 기본 상태에서는 메뉴 패널을 화면 밖으로 숨김 */
  .main-navbar .offcanvas-collapse {
    position: fixed !important;
    top: 64px !important;
    left: 100% !important;
    width: 100% !important;
    height: calc(100dvh - 64px) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    z-index: 1040 !important;
    transition: left 0.25s ease, opacity 0.2s ease !important;
  }

  /* 토글로 열린 경우에만 노출 */
  .main-navbar .offcanvas-collapse.show,
  .main-navbar .offcanvas-collapse.open,
  .main-navbar .offcanvas-collapse[aria-expanded="true"] {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* collapse 기본 클래스가 강제로 보이는 현상 방지 */
  .main-navbar .navbar-collapse:not(.show):not(.open) {
    display: block !important;
    left: 100% !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .main-navbar .navbar-collapse.show,
  .main-navbar .navbar-collapse.open {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   v2.4 hotfix: mobile capsule cleanup + offcanvas readability
   ========================================================= */
@media (max-width: 991.98px) {
  /* 1) 햄버거 메뉴 열릴 때 갑자기 과도하게 어두워지는 느낌 완화 */
  .main-navbar .offcanvas-collapse,
  .main-navbar .offcanvas-collapse.show,
  .main-navbar .offcanvas-collapse.open,
  .main-navbar .navbar-collapse,
  .main-navbar .navbar-collapse.show,
  .main-navbar .navbar-collapse.open {
    background: #151a22 !important;
  }

  /* 메뉴 텍스트가 왼쪽 끝에 붙지 않도록 내부 패딩/정렬 보정 */
  .main-navbar .offcanvas-collapse .navbar-nav,
  .main-navbar .navbar-collapse .navbar-nav {
    padding: 14px 16px 20px !important;
    margin: 0 !important;
  }

  .main-navbar .offcanvas-collapse .nav-item,
  .main-navbar .navbar-collapse .nav-item {
    width: 100% !important;
    margin: 0 0 4px 0 !important;
  }

  .main-navbar .offcanvas-collapse .nav-link,
  .main-navbar .navbar-collapse .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
    color: #eceff4 !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  .main-navbar .offcanvas-collapse .nav-link:hover,
  .main-navbar .offcanvas-collapse .nav-link.active,
  .main-navbar .navbar-collapse .nav-link:hover,
  .main-navbar .navbar-collapse .nav-link.active {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  /* 보유금액 메뉴도 같은 정렬/톤으로 통일 */
  .main-navbar .offcanvas-collapse .addfunds-menu,
  .main-navbar .navbar-collapse .addfunds-menu,
  .main-navbar .offcanvas-collapse a[href*="addfunds"],
  .main-navbar .navbar-collapse a[href*="addfunds"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
}

@media (max-width: 767.98px) {
  /* 2) 주문하기 상단 SNS 캡슐(네이버/인스타 등) 정리 */
  .service-filter-group,
  .order-form-div .service-filter-group,
  .auth_body .service-filter-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .service_filter_btn,
  .order-form-div .service_filter_btn,
  .auth_body .service_filter_btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .service_filter_btn img,
  .service_filter_btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    flex: 0 0 18px !important;
  }
}

/* =========================================================
   v2.5 hotfix: mobile hamburger link contrast + clickable centered layout
   ========================================================= */
@media (max-width: 991.98px) {
  /* 메뉴 패널이 클릭 가능한 레이어 위로 올라오도록 */
  .main-navbar .offcanvas-collapse,
  .main-navbar .offcanvas-collapse.show,
  .main-navbar .offcanvas-collapse.open,
  .main-navbar .navbar-collapse,
  .main-navbar .navbar-collapse.show,
  .main-navbar .navbar-collapse.open {
    z-index: 2000 !important;
    pointer-events: auto !important;
  }

  /* 메뉴 목록 중앙 정렬 + 컨테이너 폭 제한으로 균형감 확보 */
  .main-navbar .offcanvas-collapse .navbar-nav,
  .main-navbar .navbar-collapse .navbar-nav {
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 18px 14px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .main-navbar .offcanvas-collapse .nav-link,
  .main-navbar .navbar-collapse .nav-link,
  .main-navbar .offcanvas-collapse .dropdown-item,
  .main-navbar .navbar-collapse .dropdown-item {
    color: #f7f9fc !important;
    opacity: 1 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    padding: 13px 12px !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .main-navbar .offcanvas-collapse .nav-link:hover,
  .main-navbar .offcanvas-collapse .nav-link:focus,
  .main-navbar .offcanvas-collapse .nav-link.active,
  .main-navbar .navbar-collapse .nav-link:hover,
  .main-navbar .navbar-collapse .nav-link:focus,
  .main-navbar .navbar-collapse .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  /* 잔액 메뉴도 같은 중앙 스타일로 통일 */
  .main-navbar .offcanvas-collapse .addfunds-menu,
  .main-navbar .navbar-collapse .addfunds-menu,
  .main-navbar .offcanvas-collapse a[href*="addfunds"],
  .main-navbar .navbar-collapse a[href*="addfunds"] {
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* 혹시 부모에 걸린 dim 효과 차단 */
  .main-navbar .offcanvas-collapse *,
  .main-navbar .navbar-collapse * {
    filter: none !important;
  }
}

/* =========================================================
   v2.6 hotfix: prevent mobile top content clipping under fixed header
   ========================================================= */
@media (max-width: 991.98px) {
  :root {
    --mobile-header-offset: calc(118px + env(safe-area-inset-top, 0px));
  }

  /* 고정 헤더 아래 첫 컨텐츠가 잘리지 않도록 시작 오프셋 보정 */
  body.guest #top-sec,
  body.guest .inner-top-banner,
  body.guest .banner_all,
  body.guest .page-content,
  body.guest .content-wrapper,
  body.guest main {
    margin-top: 0 !important;
    padding-top: var(--mobile-header-offset) !important;
  }

  /* 로그인/회원가입도 동일하게 헤더 아래에서 시작 */
  body.guest #signin,
  body.guest #signup,
  body.guest .login-page,
  body.guest .signup-page {
    padding-top: calc(var(--mobile-header-offset) + 8px) !important;
  }

  /* auth 영역도 첫 블록 잘림 방지 최소 오프셋 */
  body.auth_body .auth_main,
  body.auth_body .content-wrapper,
  body.auth_body .page-content,
  body.auth_body .user-dashboard-rightbar {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }
}

/* =========================================================
   v2.7 hotfix: normalize service capsule alignment and sizing
   ========================================================= */
/* 주문하기 서비스 캡슐(네이버/인스타/유튜브 등) 줄맞춤 정리 */
.service-filter-group,
.order-form-div .service-filter-group,
.auth_body .service-filter-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.service_filter_btn,
.order-form-div .service_filter_btn,
.auth_body .service_filter_btn,
#recommend-btn.service_filter_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.service_filter_btn img,
.service_filter_btn svg,
.order-form-div .service_filter_btn img,
.order-form-div .service_filter_btn svg {
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  flex: 0 0 17px !important;
  display: block !important;
}

/* 선택/호버 상태 높이 흔들림 방지 */
.service_filter_btn:hover,
.service_filter_btn.active,
.service_filter_btn.selected,
#recommend-btn.active {
  transform: none !important;
}

/* 중간 폭 기기에서 과도한 줄바꿈 방지 */
@media (max-width: 991.98px) and (min-width: 768px) {
  .service_filter_btn,
  .order-form-div .service_filter_btn,
  .auth_body .service_filter_btn {
    min-width: 122px !important;
  }
}

/* 모바일에서는 기존 2열 그리드 유지 + 동일 높이 */
@media (max-width: 767.98px) {
  .service-filter-group,
  .order-form-div .service-filter-group,
  .auth_body .service-filter-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .service_filter_btn,
  .order-form-div .service_filter_btn,
  .auth_body .service_filter_btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 12px !important;
  }
}

/* =========================================================
   v2.8 hotfix: keep service capsules same size (not larger)
   ========================================================= */
/* 데스크탑/태블릿: 캡슐 폭을 동일 고정값으로 통일 */
@media (min-width: 768px) {
  .service_filter_btn,
  .order-form-div .service_filter_btn,
  .auth_body .service_filter_btn,
  #recommend-btn.service_filter_btn {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 42px !important;
    padding: 0 10px !important;
  }
}

/* 모바일: 이전처럼 2열 동일 크기 유지 (키우지 않음) */
@media (max-width: 767.98px) {
  .service_filter_btn,
  .order-form-div .service_filter_btn,
  .auth_body .service_filter_btn,
  #recommend-btn.service_filter_btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    padding: 0 10px !important;
  }
}

/* =========================================================
   v2.9 hotfix: prioritize capsule order (YouTube > Instagram > Naver)
   ========================================================= */
/* 현재 버튼 DOM 순서가 네이버(1) 인스타(2) ... 유튜브(4)인 구조에서
   시각 순서만 유튜브 -> 인스타 -> 네이버로 우선 재배치 */
.service-filter-group,
.order-form-div .service-filter-group,
.auth_body .service-filter-group {
  display: flex !important;
}

.service-filter-group .service_filter_btn:nth-child(4),
.order-form-div .service-filter-group .service_filter_btn:nth-child(4),
.auth_body .service-filter-group .service_filter_btn:nth-child(4) {
  order: 1 !important; /* 유튜브 */
}

.service-filter-group .service_filter_btn:nth-child(2),
.order-form-div .service-filter-group .service_filter_btn:nth-child(2),
.auth_body .service-filter-group .service_filter_btn:nth-child(2) {
  order: 2 !important; /* 인스타그램 */
}

.service-filter-group .service_filter_btn:nth-child(1),
.order-form-div .service-filter-group .service_filter_btn:nth-child(1),
.auth_body .service-filter-group .service_filter_btn:nth-child(1) {
  order: 3 !important; /* 네이버 */
}

/* 나머지 버튼은 기존 상대 순서를 유지 */
.service-filter-group .service_filter_btn:nth-child(n + 5),
.order-form-div .service-filter-group .service_filter_btn:nth-child(n + 5),
.auth_body .service-filter-group .service_filter_btn:nth-child(n + 5) {
  order: 4 !important;
}

/* v2.9 patch: 페이스북(3번)도 우선 3개 뒤로 배치 */
.service-filter-group .service_filter_btn:nth-child(3),
.order-form-div .service-filter-group .service_filter_btn:nth-child(3),
.auth_body .service-filter-group .service_filter_btn:nth-child(3) {
  order: 4 !important;
}