/* ============================================================
   INBLOG — Complete Stylesheet (Nav + Components)
   Navigation, Header, Drawer: Section 0
   Design Tokens (:root): defined at top of this file
   ============================================================ */

/* ── Design Tokens (shared with style.css) ───────────────── */
:root {
  /* Brand */
  --clr-brand:        #6366F1;
  --clr-brand-dark:   #4F46E5;
  --clr-brand-darker: #4338CA;
  --grad-brand:       linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --grad-brand-soft:  linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);

  /* Neutral scale */
  --clr-bg:           #F8FAFC;
  --clr-surface:      #FFFFFF;
  --clr-border:       #E2E8F0;
  --clr-border-soft:  rgba(226, 232, 240, 0.7);

  /* Text */
  --clr-text:         #0F172A;
  --clr-text-muted:   #64748B;
  --clr-text-subtle:  #94A3B8;

  /* Header */
  --nav-height:       75px;
  --nav-bg:           rgba(255, 255, 255, 0.96);
  --nav-blur:         12px;
  --nav-shadow:       0 1px 0 rgba(15, 23, 42, 0.06);
  --nav-shadow-scroll:0 4px 24px rgba(15, 23, 42, 0.10);
  --nav-max-width:    1000px;
  --nav-px:           20px;

  /* Drawer */
  --drawer-width:     320px;
  --drawer-bg:        #FFFFFF;

  /* Shadows */
  --shadow-xs:  0 1px 2px  rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-md:  0 8px 28px rgba(15, 23, 42, 0.12);
  --shadow-lg:  0 20px 60px rgba(15, 23, 42, 0.18);

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full:9999px;

  /* Animation */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Short aliases (페이지별 twig 공용) ──────────────────── */
  /* 각 페이지 twig에서 var(--border), var(--bg) 등 짧은 이름으로 참조할 수 있도록  */
  /* 실제 값은 위의 clr-* 토큰을 따름 — 한 곳만 수정하면 전체 반영                */
  --border:           var(--clr-border);
  --bg:               var(--clr-bg);
  --primary:          var(--clr-brand);
  --text:             var(--clr-text);
  --muted:            var(--clr-text-muted);
  --primary-gradient: var(--grad-brand);
}


/* ============================================================
   RESET — nav context only
   ============================================================ */
.site-header *,
.mobile-drawer * {
  box-sizing: border-box;
}

/* Remove Bootstrap's default navbar styles for our header */
.site-header ul,
.mobile-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  outline: none;
}

.site-header button:focus-visible,
.site-header a:focus-visible,
.mobile-drawer button:focus-visible,
.mobile-drawer a:focus-visible {
  outline: 2px solid var(--clr-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   BODY OFFSET — push content below fixed header
   ============================================================ */
body {
  padding-top: var(--nav-height);
  font-family: var(--font-sans);
}

/* Prevent scroll when drawer is open */
body.drawer-is-open {
  overflow: hidden;
}

/* Main content — breathing room below fixed header */
main#mainContent {
  padding-top: 20px;
}


/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--nav-height);
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid var(--clr-border-soft);
  box-shadow: var(--nav-shadow);
  transition:
    box-shadow var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out);
}

/* Elevated state on scroll */
.site-header.is-scrolled {
  box-shadow: var(--nav-shadow-scroll);
  border-bottom-color: var(--clr-border);
}

/* Inner flex container */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  max-width: var(--nav-max-width);
  margin: 0 auto;
  padding: 0 var(--nav-px);
}


/* ============================================================
   LOGO
   ============================================================ */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
}


/* ============================================================
   PRIMARY NAV — Desktop
   ============================================================ */
.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center; /* 메뉴 중앙 정렬 */
  flex: 1;
  min-width: 0;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 5px 6px;
}

.primary-nav__item {
  position: relative;
}

/* Base link & button style */
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  position: relative;
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.primary-nav__link i {
  font-size: 13px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}

/* Hover */
.primary-nav__link:hover,
.primary-nav__trigger:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}

.primary-nav__link:hover i {
  opacity: 1;
}

/* Active state */
.primary-nav__link.is-active {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.08);
  font-weight: 600;
}

.primary-nav__link.is-active i {
  opacity: 1;
}

/* Active underline accent */
.primary-nav__link.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--grad-brand);
  border-radius: var(--radius-full);
}

/* Ensure button triggers inherit full padding (Bootstrap override) */
.primary-nav__trigger {
  padding: 0 18px !important;
}

/* Chevron on dropdown triggers */
.primary-nav__caret {
  font-size: 10px !important;
  opacity: 0.5;
  transition: transform var(--dur-base) var(--ease-out) !important;
}

[aria-expanded="true"] .primary-nav__caret {
  transform: rotate(180deg);
  opacity: 0.8;
}


/* ============================================================
   NAV DROPDOWN — Desktop flyout
   ============================================================ */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 1050;

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.nav-dropdown--right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Open state — toggled by JS via data-open attribute */
.nav-dropdown[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dropdown items */
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-sans);
}

.nav-dropdown__item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
  color: var(--clr-brand);
  flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}

.nav-dropdown__item:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}

.nav-dropdown__item:hover i {
  opacity: 1;
}

.nav-dropdown__item.is-active {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.08);
  font-weight: 600;
}

.nav-dropdown__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.nav-dropdown__divider {
  height: 1px;
  background: var(--clr-border);
  margin: 4px 6px;
}


/* ============================================================
   HEADER RIGHT ACTIONS
   ============================================================ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 0;
}

/* Guide link */
.header-actions__guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  color: var(--clr-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  transition:
    color var(--dur-fast) var(--ease-in-out),
    border-color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.header-actions__guide i {
  font-size: 12px;
}

.header-actions__guide:hover {
  color: var(--clr-brand);
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.04);
  text-decoration: none;
}

/* Balance pill */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30);
  transition:
    transform var(--dur-fast, 120ms) var(--ease-out, ease),
    box-shadow var(--dur-fast, 120ms) var(--ease-out, ease);
}

.balance-pill i {
  font-size: 12px;
  opacity: 0.85;
}

.balance-pill:hover {
  text-decoration: none !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.38);
}

/* Small variant (mobile) */
.balance-pill--sm {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}

/* Icon-only button (currency switcher) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.icon-btn--ghost {
  color: var(--clr-text-muted);
  background: transparent;
  border: 1px solid var(--clr-border);
}

.icon-btn--ghost:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.3);
}

/* Generic dropdown wrapper */
.header-menu-wrap {
  position: relative;
}

/* User menu trigger */
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-in-out),
    box-shadow var(--dur-fast) var(--ease-in-out);
}

.user-menu-trigger:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--grad-brand-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-brand);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-menu-trigger__caret {
  font-size: 10px;
  color: var(--clr-text-subtle);
  transition: transform var(--dur-base) var(--ease-out);
}

[aria-expanded="true"] .user-menu-trigger__caret {
  transform: rotate(180deg);
}

/* Guest header actions */
.header-guest-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.guest-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  color: var(--clr-text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.guest-nav-link:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}

/* Primary CTA button (header) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn-primary:hover {
  text-decoration: none;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.38);
}


/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.hamburger {
  display: none;   /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease-in-out);
}

.hamburger:hover {
  border-color: rgba(99, 102, 241, 0.4);
}

.hamburger__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: var(--clr-text-muted);
  transform-origin: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

/* Active (X) state */
.hamburger.is-active .hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.is-active .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-active .hamburger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.hamburger.is-active .hamburger__bar {
  background: var(--clr-brand);
}

/* Mobile-right cluster */
.mobile-header-right {
  display: none;  /* hidden on desktop */
  align-items: center;
  gap: 8px;
  margin-left: auto;
}


/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 950;
  pointer-events: none;
}

/* Visible when aria-hidden is absent */
.mobile-drawer:not([aria-hidden]) {
  pointer-events: auto;
}

/* Backdrop */
.mobile-drawer__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.mobile-drawer:not([aria-hidden]) .mobile-drawer__backdrop {
  opacity: 1;
}

/* Panel */
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(var(--drawer-width), 85vw);
  background: var(--drawer-bg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.mobile-drawer:not([aria-hidden]) .mobile-drawer__panel {
  transform: translateX(0);
}

/* Drawer header */
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--drawer-bg);
  z-index: 1;
}

.mobile-drawer__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-drawer__logo img {
  height: 30px;
  width: auto;
  display: block;
}

.mobile-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  font-size: 15px;
  cursor: pointer;
  background: var(--clr-surface);
  transition:
    color var(--dur-fast) var(--ease-in-out),
    border-color var(--dur-fast) var(--ease-in-out);
}

.mobile-drawer__close:hover {
  color: var(--clr-brand);
  border-color: rgba(99, 102, 241, 0.4);
}


/* ============================================================
   DRAWER BALANCE CARD
   ============================================================ */
.drawer-balance {
  margin: 16px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-balance__label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-balance__label i {
  font-size: 11px;
}

.drawer-balance__amount {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.drawer-balance__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--dur-fast) var(--ease-in-out);
}

.drawer-balance__cta:hover {
  background: rgba(255, 255, 255, 0.32);
  text-decoration: none;
  color: #fff;
}

.drawer-balance__cta i {
  font-size: 11px;
}


/* ============================================================
   MOBILE NAV LINKS
   ============================================================ */
.mobile-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
}

.mobile-nav__list {
  padding: 4px 12px;
}

.mobile-nav__divider {
  height: 1px;
  background: var(--clr-border);
  margin: 8px 20px;
}

/* Base link */
.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: var(--radius-md);
  color: var(--clr-text);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.mobile-nav__link i:first-child {
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: var(--clr-text-subtle);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-in-out);
}

.mobile-nav__link:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}

.mobile-nav__link:hover i:first-child {
  color: var(--clr-brand);
}

/* Accordion variant */
.mobile-nav__link--accordion {
  justify-content: space-between;
}

.mobile-nav__link-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-nav__arrow {
  font-size: 11px;
  color: var(--clr-text-subtle);
  transition: transform var(--dur-base) var(--ease-out);
  margin-left: auto;
  flex-shrink: 0;
}

.mobile-nav__link--accordion.is-open .mobile-nav__arrow {
  transform: rotate(180deg);
}

/* Sub-menu — 들여쓰기 + 좌측 계층 표시선 */
.mobile-nav__sub {
  margin: 2px 0 6px 32px; /* 좌측 32px 들여쓰기 */
  padding: 4px 0;
  border-left: 2px solid #E2E8F0; /* 계층 구조 표시선 */
  list-style: none;
}

.mobile-nav__sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 16px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--clr-text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--dur-fast) var(--ease-in-out),
    background var(--dur-fast) var(--ease-in-out);
}

.mobile-nav__sub-link::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBD5E1;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-in-out);
}

.mobile-nav__sub-link:hover {
  color: var(--clr-brand);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}

.mobile-nav__sub-link:hover::before {
  background: var(--clr-brand);
}

/* Guide link accent */
.mobile-nav__link--guide {
  color: var(--clr-brand);
}

.mobile-nav__link--guide i:first-child {
  color: var(--clr-brand);
  opacity: 0.8;
}

.mobile-nav__external {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.5;
}

/* Account links (logout etc) */
.mobile-nav__link--account {
  color: var(--clr-text-muted);
}


/* ============================================================
   RESPONSIVE — breakpoints
   ============================================================ */

/* ── Large tablet → Desktop: full nav visible ── */
@media (min-width: 769px) {

  /* Show desktop elements */
  .primary-nav     { display: flex; }
  .header-actions  { display: flex; }

  /* Hide mobile-only elements */
  .mobile-header-right { display: none !important; }
  .hamburger           { display: none !important; }
  .mobile-drawer       { display: none !important; }
}


/* ── Tablet & Mobile: collapse nav ── */
@media (max-width: 768px) {

  /* Hide desktop-only elements */
  .primary-nav     { display: none !important; }
  .header-actions  { display: none !important; }
  .header-guest-actions { display: none !important; }

  /* Show mobile elements */
  .mobile-header-right { display: flex !important; }

  /* Guest mobile: show hamburger only */
  .hamburger--guest {
    display: inline-flex !important;
    margin-left: auto;
  }

  /* Header inner: logo + mobile-header-right only */
  .site-header__inner {
    padding: 0 16px;
    gap: 0;
  }

  /* Drawer always accessible on mobile */
  .mobile-drawer { display: block; }

  /* Hamburger visible */
  .hamburger {
    display: inline-flex;
  }
}


/* ── Small mobile: tighten spacing ── */
@media (max-width: 400px) {
  .site-header__inner { padding: 0 12px; }
  .balance-pill--sm   { padding: 5px 8px; font-size: 11px; }
  .mobile-drawer__panel { width: 92vw; }
}


/* ── Very large screens: always cap nav width at 1000px ── */
@media (min-width: 1000px) {
  .site-header__inner { max-width: 1000px; }
}


/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer__panel,
  .mobile-drawer__backdrop,
  .nav-dropdown,
  .hamburger__bar,
  .primary-nav__link,
  .primary-nav__link::after,
  .balance-pill,
  .mobile-nav__arrow {
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   PRINT — hide nav
   ============================================================ */
@media print {
  .site-header,
  .mobile-drawer {
    display: none !important;
  }

  body {
    padding-top: 0 !important;
  }
}


/* ============================================================
   Sections:
   1.  Base / Reset
   2.  Typography
   3.  Layout helpers
   4.  Buttons
   5.  Forms
   6.  Page header block
   7.  Filter bar & nav pills
   8.  Status badges
   9.  Data table (shared)
   10. Service link components
   11. Empty state
   12. Catalog (services page)
   13. Platform tabs
   14. Group chips
   15. Mobile service cards
   16. New order page
   17. Responsive overrides
   ============================================================ */


/* ── 1. Base / Reset ──────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 75px !important; /* = --nav-height, fixed header offset — Bootstrap 덮어쓰기 */
  background-color: var(--clr-bg, #F8FAFC);
  color: var(--clr-text, #0F172A);
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global link color — brand */
a {
  color: var(--clr-brand, #6366F1);
}

a:hover {
  color: var(--clr-brand-dark, #4F46E5);
}

img {
  max-width: 100%;
  height: auto;
}

/* Responsive table container */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md, 12px);
}


/* ── 2. Typography ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text, #0F172A);
  margin-top: 0;
}

.text-muted { color: var(--clr-text-muted, #64748B); }
.text-brand { color: var(--clr-brand, #6366F1); }
.fw-700  { font-weight: 700; }
.fw-800  { font-weight: 800; }


/* ── 3. Layout helpers ────────────────────────────────────── */

/* Max-width content wrappers */
.content-wrap {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 32px);
}

/* Bootstrap override: default container cap */
.container {
  max-width: 1060px;
}


/* ── 4. Buttons ───────────────────────────────────────────── */

/* Base reset on top of Bootstrap */
.btn {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-fast, 120ms),
    box-shadow var(--dur-fast, 120ms),
    transform  var(--dur-fast, 120ms);
}

/* Primary */
.btn-primary,
.btn-primary:visited {
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.20);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #5558E8, #4338CA);
  color: #fff;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.30);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.20);
}

/* Default */
.btn-default {
  background: #fff;
  border: 1px solid var(--clr-border, #E2E8F0);
  color: var(--clr-text, #0F172A);
}

.btn-default:hover {
  border-color: var(--clr-brand, #6366F1);
  color: var(--clr-brand, #6366F1);
  background: rgba(99, 102, 241, 0.04);
}

/* Info (secondary action) */
.btn-info {
  background: #EEF2FF;
  border: 1px solid #E0E7FF;
  color: var(--clr-brand-dark, #4F46E5);
  font-weight: 600;
}

.btn-info:hover,
.btn-info:focus {
  background: #E0E7FF;
  color: var(--clr-brand-darker, #4338CA);
  border-color: rgba(99, 102, 241, 0.4);
}

.btn-link {
  color: var(--clr-brand, #6366F1);
  padding: 0;
  background: none;
  border: none;
}

.btn-link:hover {
  color: var(--clr-brand-dark, #4F46E5);
}


/* ── 5. Forms ─────────────────────────────────────────────── */

.form-control {
  border-radius: 10px;
  border: 1px solid var(--clr-border, #E2E8F0);
  color: var(--clr-text, #0F172A);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 14px;
  padding: 9px 14px;
  background-color: #fff;
  transition:
    border-color var(--dur-fast, 120ms),
    box-shadow   var(--dur-fast, 120ms);
  box-shadow: none;
}

.form-control:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

.form-control::placeholder {
  color: var(--clr-text-subtle, #94A3B8);
}

/* Labels */
.control-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text, #0F172A);
  margin-bottom: 6px;
  display: block;
}

/* Panel / Well cards — Bootstrap override */
.panel,
.well {
  background: #fff;
  border: 1px solid var(--clr-border, #E2E8F0);
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--clr-border, #E2E8F0);
  border-radius: 16px 16px 0 0;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 15px;
}

.panel-body {
  padding: 20px;
}


/* ── 6. Page Header Block ─────────────────────────────────── */

.page-header-block {
  max-width: 1000px;
  margin: 0 auto 20px;
  padding-inline: 0;
}

.page-header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  background: var(--grad-brand-soft, linear-gradient(135deg, #EEF2FF, #F5F3FF));
  border-radius: 16px;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.page-header-inner .header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.15);
  font-size: 22px;
  color: var(--clr-brand, #6366F1);
  flex-shrink: 0;
}

.page-header-inner .header-text h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}

.page-header-inner .header-text p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.5;
}


/* ── 7. Filter Bar & Nav Pills ────────────────────────────── */

.page-filter-bar {
  max-width: 1000px;
  margin: 0 auto 20px;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--clr-border, #E2E8F0);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.page-filter-bar .filter-nav-pills {
  flex: 1;
  min-width: 0;
}

.page-filter-bar .search-box-wrapper {
  flex-shrink: 0;
  width: auto;
}

/* Nav pills */
.filter-nav-pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-nav-pills li { margin: 0; }

.filter-nav-pills li a {
  display: block;
  padding: 7px 14px;
  background: #fff;
  color: #4B5563;
  text-decoration: none;
  border-radius: var(--radius-full, 9999px);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #D1D5DB;
  transition:
    background var(--dur-fast, 120ms),
    border-color var(--dur-fast, 120ms),
    color var(--dur-fast, 120ms);
}

.filter-nav-pills li a:hover {
  background: #EEF2FF;
  border-color: var(--clr-brand, #6366F1);
  color: var(--clr-brand, #6366F1);
  text-decoration: none;
}

.filter-nav-pills li.active a {
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.32);
}

/* Search box */
.search-box-wrapper {
  display: flex;
  width: 220px;
}

.search-input {
  flex: 1;
  padding: 9px 14px;
  border: 1.5px solid #D1D5DB;
  border-right: none;
  border-radius: 10px 0 0 10px;
  font-size: 13px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  color: var(--clr-text, #0F172A);
  background: #fff;
  outline: none;
  transition:
    border-color var(--dur-fast, 120ms),
    box-shadow   var(--dur-fast, 120ms);
}

.search-input:focus {
  border-color: var(--clr-brand, #6366F1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.search-input::placeholder {
  color: var(--clr-text-subtle, #94A3B8);
}

.search-button {
  width: 40px;
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  color: #fff;
  border: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--dur-fast, 120ms);
}

.search-button:hover  { opacity: 0.88; }
.search-button:active { opacity: 0.75; }


/* ── 8. Status Badges ─────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: none;
  line-height: 1.2;
  min-width: 56px;
}

/* Semantic colors */
.status-badge.completed,
.status-badge.active      { background: #DCFCE7; color: #15803D; }
.status-badge.pending     { background: #FEF3C7; color: #B45309; }
.status-badge.inprogress  { background: #EEF2FF; color: #4338CA; }
.status-badge.processing  { background: #F5F3FF; color: #7C3AED; }
.status-badge.partial     { background: #FFF7ED; color: #C2410C; }
.status-badge.paused      { background: #FEF3C7; color: #92400E; }
.status-badge.expired,
.status-badge.cancelled,
.status-badge.canceled    { background: #F1F5F9; color: #64748B; }
.status-badge.error,
.status-badge.fail,
.status-badge.rejected    { background: #FEF2F2; color: #B91C1C; }
.status-badge.refunded    { background: #F0F9FF; color: #0369A1; }


/* ── 9. Data Table ────────────────────────────────────────── */

/* Container */
.pc-table-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--clr-border, #E2E8F0);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.pc-table-container .table-responsive {
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border: none;
}

/* Generic data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin: 0;
}

.data-table thead tr {
  background: #F8FAFC;
  border-bottom: 2px solid var(--clr-border, #E2E8F0);
}

.data-table th {
  padding: 18px 16px;
  text-align: center;
  font-weight: 700;
  color: #374151;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border: none;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F1F5F9;
  border-top: none;
  border-left: none;
  border-right: none;
  font-size: 13px;
  vertical-align: middle;
  text-align: center;
}

/* 서비스/링크 컬럼 — 모든 테이블에서 좌측 정렬 */
.pc-service-column {
  text-align: left !important;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
  background: #FAFBFF;
}

.data-table tbody tr:hover {
  background: #EEF2FF;
  transition: background var(--dur-fast, 120ms);
}

/* Service table specifics */
#service-table {
  font-size: 12.5px;
}

#service-table thead th {
  font-size: 11px;
  padding: 12px;
  color: #374151;
  background: #F8FAFC;
  border-bottom: 1px solid var(--clr-border, #E2E8F0);
  border-top: none;
  border-left: none;
  border-right: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

#service-table thead th.width-service-name {
  text-align: left;
}

#service-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-top: 1px solid var(--clr-border, #E2E8F0);
  border-left: none;
  border-right: none;
  text-align: center;
  white-space: nowrap;
}

#service-table tbody td.service-name {
  text-align: left;
  white-space: normal;
}

/* Category header rows - left align */
#service-table tr.category-header-row td {
  background: #F8FAFC;
  color: #101828;
  font-weight: 800;
  border-top: 1px solid var(--clr-border, #E2E8F0);
  border-bottom: 1px solid var(--clr-border, #E2E8F0);
  border-left: none;
  border-right: none;
  padding: 12px;
  text-align: left;
  white-space: normal;
}

#service-table tr.category-header-row strong {
  font-size: 12px;
}

#service-table tbody tr.service-row:hover {
  background: #F5F6FF;
}

#service-table .service-name {
  font-weight: 700;
  color: #101828;
}

#service-table .btn.btn-sm {
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
}


/* ── 10. Service Link Components ──────────────────────────── */

.service-link-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.svc-title {
  font-weight: 600;
  color: var(--clr-text, #0F172A);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-link {
  color: var(--clr-brand, #6366F1);
  text-decoration: none;
  font-size: 12px;
  word-break: break-all;
  line-height: 1.4;
}

.svc-link:hover {
  text-decoration: underline;
  color: var(--clr-brand-dark, #4F46E5);
}

.order-link {
  color: var(--clr-brand, #6366F1);
  text-decoration: none;
  font-weight: 700;
}

.order-link:hover {
  text-decoration: underline;
  color: var(--clr-brand-dark, #4F46E5);
}


/* ── 11. Empty State ──────────────────────────────────────── */

.empty-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: #9CA3AF;
  text-align: center;
}

.empty-state-box .empty-icon  { font-size: 38px; opacity: 0.35; }
.empty-state-box .empty-title { font-size: 15px; font-weight: 600; color: #4B5563; }
.empty-state-box .empty-sub   { font-size: 13px; color: #9CA3AF; margin-top: -4px; }


/* ── 12. Catalog (services page) ──────────────────────────── */

.inblog-catalog {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 24px);
}

/* Hero / search card */
.catalog-hero {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  padding: 18px;
  margin-bottom: 14px;
}

.catalog-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.catalog-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.catalog-subtitle {
  margin: 6px 0 0;
  color: var(--clr-text-muted, #64748B);
  font-size: 13px;
  font-weight: 600;
}

.catalog-controls {
  margin-top: 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 14px;
}

/* Catalog search */
.catalog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--clr-border, #E2E8F0);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.catalog-search i {
  color: var(--clr-brand, #6366F1);
  font-size: 14px;
}

.catalog-search .form-control {
  border: none;
  box-shadow: none;
  padding: 0;
  height: auto;
  font-size: 13px;
  line-height: 1.2;
  background: transparent;
}

.catalog-search .form-control:focus {
  box-shadow: none;
  outline: none;
  border-color: transparent;
}

#catalogSearchClear {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--clr-brand, #6366F1);
  text-decoration: none;
  opacity: 0.8;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

#catalogSearchClear:hover { opacity: 1; }

/* Filter section title */
.catalog-filter-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-muted, #64748B);
  margin: 12px 0 8px 2px;
  letter-spacing: 0.2px;
}

/* Section divider */
.section-divider {
  height: 1px;
  background: var(--clr-border, #E2E8F0);
  margin: 14px 0;
}


/* ── 13. Platform Tabs ────────────────────────────────────── */

.platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--clr-border, #E2E8F0);
  background: #fff;
  color: #344054;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', sans-serif);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition:
    border-color var(--dur-fast, 120ms),
    box-shadow   var(--dur-fast, 120ms),
    transform    var(--dur-fast, 120ms),
    background   var(--dur-fast, 120ms),
    color        var(--dur-fast, 120ms);
}

.platform-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09);
}

.platform-tab.active {
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30);
}

.platform-tab.active .tab-txt,
.platform-tab.active .tab-ico,
.platform-tab.active .tab-ico i {
  color: #fff;
}

.platform-tab .tab-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.platform-tab .tab-ico i { font-size: 15px; }

/* TikTok dark icon */
.platform-tab[data-platform="tiktok"] .tab-ico i { color: #111827; }
.platform-tab[data-platform="tiktok"].active .tab-ico i { color: #fff; }

/* Naver badge */
.naver-badge {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EEF2FF;
  color: var(--clr-brand-dark, #4F46E5);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -1px;
  line-height: 1;
}

.platform-tab.active .naver-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}


/* ── 14. Group Chips ──────────────────────────────────────── */

.catalog-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.group-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--clr-border, #E2E8F0);
  background: #fff;
  border-radius: var(--radius-full, 9999px);
  font-size: 12px;
  font-weight: 700;
  color: #344054;
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', sans-serif);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition:
    border-color var(--dur-fast, 120ms),
    box-shadow   var(--dur-fast, 120ms),
    transform    var(--dur-fast, 120ms),
    background   var(--dur-fast, 120ms),
    color        var(--dur-fast, 120ms);
}

.group-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09);
  border-color: rgba(99, 102, 241, 0.3);
}

.group-chip.is-active {
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30);
}


/* ── 15. Mobile Service Cards ─────────────────────────────── */

.mobile-service-cards {
  display: none;
  margin-top: 14px;
}

.ms-category {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  border: 1px solid #C7D2FE;
  border-left: 4px solid var(--clr-brand, #6366F1);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.10);
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3px;
  margin: 14px 0 8px;
  color: var(--clr-brand-dark, #4F46E5);
  text-transform: uppercase;
}

.ms-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-left: 4px solid var(--clr-brand, #6366F1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition:
    box-shadow var(--dur-fast, 120ms),
    transform var(--dur-fast, 120ms),
    border-color var(--dur-fast, 120ms);
}

.ms-card:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
  border-left-color: var(--clr-brand-dark, #4F46E5);
}

/* Card header: name + ID badge */
.ms-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ms-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--clr-text, #0F172A);
  line-height: 1.35;
  flex: 1;
}

/* Meta info as pill badges */
.ms-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.ms-meta span b {
  color: #1E293B;
  font-weight: 700;
}

/* Highlight price badge */
.ms-meta span.ms-price {
  background: #EEF2FF;
  border-color: #C7D2FE;
  color: var(--clr-brand, #6366F1);
}

.ms-meta span.ms-price b {
  color: var(--clr-brand-dark, #4F46E5);
}

/* Actions row */
.ms-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ms-actions .btn-desc {
  flex: 0 0 auto;
  background: transparent;
  border: 1.5px solid #CBD5E1;
  color: #475569;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 14px;
  transition: border-color var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
}

.ms-actions .btn-desc:hover {
  border-color: var(--clr-brand, #6366F1);
  color: var(--clr-brand, #6366F1);
}

.ms-actions .btn-order {
  flex: 1;
  background: var(--grad-brand, linear-gradient(135deg, #6366F1, #4F46E5));
  border: none;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 12px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transition: box-shadow var(--dur-fast, 120ms), transform var(--dur-fast, 120ms);
}

.ms-actions .btn-order:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
  color: #fff;
}

/* Description expanded area */
.ms-desc {
  margin-top: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 14px;
}

.ms-desc__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-brand, #6366F1);
  margin-bottom: 6px;
}

.ms-desc__body {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.6;
}


/* ── 16. New Order Page ───────────────────────────────────── */

.neworder-filter {
  margin: 14px 0 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* When inside an order card body */
.order-card__body .neworder-filter {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 14px;
  background: transparent;
}

.order-card__body .platform-tabs,
.order-card__body .catalog-groups {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--clr-border, #E2E8F0);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.order-card__body .catalog-groups { margin-top: 10px; }

.order-card__body .form-group { margin-bottom: 14px; }

.neworder-filter .title {
  font-weight: 800;
  font-size: 13px;
  color: var(--clr-text, #0F172A);
}

/* SEO hidden links */
.seo-hidden-link {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

a[href*="instagram"][href*="landing"],
a[href*="tiktok"][href*="landing"],
a[href*="youtube"][href*="landing"] {
  display: none;
}


/* ── 17. Responsive ───────────────────────────────────────── */

/* Tablet & below */
@media (max-width: 767px) {

  /* Cards: show, PC table: hide */
  .pc-table-container  { display: none; }
  #service-table       { display: none; }
  .mobile-service-cards{ display: block; }

  /* Filter bar */
  .page-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .page-filter-bar .search-box-wrapper { width: 100%; }
  .search-input  { padding: 8px 12px; font-size: 12px; }

  /* Filter pills */
  .filter-nav-pills { gap: 5px; }
  .filter-nav-pills li a { padding: 6px 12px; font-size: 12px; }

  /* Page header */
  .page-header-inner {
    padding: 16px 18px;
    gap: 14px;
  }

  .page-header-inner .header-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 19px;
  }

  .page-header-inner .header-text h1 { font-size: 17px; }
  .page-header-inner .header-text p  { font-size: 12px; }

  /* Catalog */
  .catalog-hero { padding: 14px; }
  .catalog-title { font-size: 20px; }
}

/* Small mobile */
@media (max-width: 480px) {
  .ms-actions {
    flex-direction: row;
    justify-content: space-between;
  }
  .ms-actions .btn {
    flex: 1;
    font-size: 13px;
    padding: 9px 8px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .platform-tab,
  .group-chip,
  .balance-pill,
  .ms-card {
    transition: none;
  }
}

/* Print */
@media print {
  body {
    padding-top: 0;
    background: white;
  }

  .panel, .well {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}