/* ==============================================================================
 * [InfraLink] B2B IT 인프라 & 엔지니어링 마켓 - 최고급 미니멀 럭셔리 디자인 시스템
 * 파일명: premium-ui.css
 * 설계 철학: Silicon Valley Clean Tech (Linear / Stripe / Apple B2B) 스타일
 * 특징:
 *   1. 맑고 깨끗한 뉴트럴 캔버스와 눈이 편안한 여백 (과도한 블루 틴트 완전 제거)
 *   2. 깊이 있는 딥 흑연(Deep Slate #0F172A) 타이포그래피와 정밀한 계층 구조
 *   3. 얇고 섬세한 헤어라인 보더(#E2E8F0)와 빛의 굴절을 고려한 멀티레이어 소프트 섀도우
 *   4. 반투명 글래스모피즘(GNB, 신뢰 배지) 및 직관적인 세그먼트 컨트롤
 * ============================================================================== */

/* ------------------------------------------------------------------------------
 * 1. 글로벌 디자인 토큰 (13000 컨셉 다크 / 라이트 듀얼 테마 완벽 지원)
 * ------------------------------------------------------------------------------ */
:root, [data-theme="dark"] {
  /* [다크 모드 기본: InfraLink Premium Deep Navy & Electric Turquoise] */
  --bg-canvas: #0b102b;
  --surface: #101744;
  --surface-muted: #171f69;
  --surface-accent: rgba(60, 194, 210, 0.15);
  
  --ink: #e2e8f0;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;
  --muted: #94a3b8;
  --muted-light: #64748b;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-subtle: rgba(255, 255, 255, 0.05);

  --primary: #3cc2d2;
  --primary-hover: #5eead4;
  --primary-subtle: rgba(60, 194, 210, 0.14);
  --navy: #171f69;
  --navy-2: #1e293b;
  --cyan: #3cc2d2;
  --infralink-navy: #171f69;
  --infralink-turquoise: #3cc2d2;
  --success: #10b981;
  --danger: #f43f5e;
  --warning: #fbbf24;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 14px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 20px -3px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 20px 30px -5px rgba(0, 0, 0, 0.6);

  /* [엔터프라이즈 모던 라운드 (Sweet Spot: 6px ~ 8px / 10px)] */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-full: 6px;
}

[data-theme="light"] {
  /* [라이트 모드: Crisp Light Tech - 딥 네이비 타이포 & 터콰이즈 액센트] */
  --bg-canvas: #f5f8fc;
  --surface: #ffffff;
  --surface-muted: #e9eef7;
  --surface-accent: rgba(60, 194, 210, 0.1);
  
  --ink: #1e293b;
  --ink-2: #334155;
  --ink-3: #475569;
  --muted: #475569;
  --muted-light: #64748b;

  --line: #d8e2ee;
  --line-strong: #bacbdc;
  --line-subtle: #edf2f7;

  --primary: #1e293b;
  --primary-hover: #0f172a;
  --primary-subtle: rgba(30, 41, 59, 0.12);
  --navy: #1e293b;
  --navy-2: #334155;
  --cyan: #007a8c;
  --infralink-navy: #1e293b;
  --infralink-turquoise: #007a8c;
  --success: #059669;
  --danger: #e11d48;
  --warning: #d97706;

  --shadow-xs: 0 1px 2px 0 rgba(11, 16, 43, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(11, 16, 43, 0.06), 0 1px 2px -1px rgba(11, 16, 43, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(11, 16, 43, 0.06), 0 2px 4px -2px rgba(11, 16, 43, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(11, 16, 43, 0.07), 0 4px 6px -4px rgba(11, 16, 43, 0.04);
  --shadow-hover: 0 20px 25px -5px rgba(11, 16, 43, 0.09), 0 8px 10px -6px rgba(11, 16, 43, 0.04);

  /* [엔터프라이즈 모던 라운드 (Sweet Spot: 6px ~ 8px / 10px)] */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-full: 6px;
}

/* ------------------------------------------------------------------------------
 * 2. 기본 글로벌 리셋 및 폰트 세팅
 * ------------------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--ink) !important;
  background-color: var(--bg-canvas) !important;
  background-image: var(--bg-image) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p {
  margin-top: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------------------
 * 3. 상단 글로벌 알림 티커 (Announcement Bar)
 * ------------------------------------------------------------------------------ */
.global-notice-bar {
  min-height: 36px !important;
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.notice-inner {
  width: min(1200px, calc(100% - 40px)) !important;
  min-height: 36px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.notice-tag {
  padding: 2px 8px !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: var(--radius-full) !important;
  background: rgba(37, 99, 235, 0.15) !important;
  color: #93c5fd !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.notice-text {
  flex: 1;
  color: #e2e8f0 !important;
  font-weight: 500 !important;
}

.notice-link {
  color: #ffffff !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.notice-link:hover {
  opacity: 1;
  text-decoration: underline !important;
}

/* ------------------------------------------------------------------------------
 * 4. 메인 헤더 & 네비게이션 (InfraLink Premium Glassmorphic GNB)
 * ------------------------------------------------------------------------------ */
.market-header, .site-header, .header-nav-bar, .header-tier-1 {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--header-bg, rgba(11, 16, 43, 0.94)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="light"] .market-header,
[data-theme="light"] .site-header,
[data-theme="light"] .header-nav-bar,
[data-theme="light"] .header-tier-1 {
  background: rgba(245, 248, 252, 0.94) !important;
}

body > .global-notice-bar ~ main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.market-nav {
  width: min(1200px, calc(100% - 40px)) !important;
  min-height: 68px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

/* 로고 영역 */
.market-brand, .logo-wrapper, .logo {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.market-brand > span, .logo-icon {
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #4c1d95, #1e1b4b) !important;
  border: 1.5px solid #7c3aed !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.market-brand > span svg, .logo-icon svg {
  stroke: #ffffff !important;
}

.market-brand b {
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.market-brand small {
  display: block;
  font-size: 10px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* 헤더 미니 검색창 */
.market-search {
  width: min(340px, 28vw) !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface-muted) !important;
  transition: all 0.2s ease !important;
}

.market-search:focus-within {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.market-search span {
  color: var(--muted) !important;
  font-size: 14px !important;
}

.market-search input {
  min-width: 0 !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 13px !important;
}
.market-search input::placeholder {
  color: var(--muted-light) !important;
}

/* 네비게이션 링크 */
.market-nav nav, .nav-menu {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.market-nav nav a, .nav-link, .top-util-link {
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.market-nav nav a:hover, .nav-link:hover {
  color: var(--primary) !important;
  background: transparent !important;
}

.market-nav nav a.active, .nav-link.active {
  color: #38bdf8 !important;
  background: transparent !important;
  background-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  border: none !important;
}

[data-theme="light"] .market-nav nav a.active,
[data-theme="light"] .nav-link.active {
  color: #2563eb !important;
  background: transparent !important;
  background-color: transparent !important;
}

.market-nav nav a.nav-member-start {
  position: relative !important;
  margin-left: 8px !important;
  padding-left: 18px !important;
}

.market-nav nav a.nav-member-start::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 1px !important;
  height: 18px !important;
  background: var(--line) !important;
}

.market-nav nav a.nav-account {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.market-nav nav a.nav-logout {
  color: var(--muted) !important;
  font-size: 12px !important;
}
.market-nav nav a.nav-logout:hover {
  color: var(--danger) !important;
}

.nav-login-btn {
  padding: 8px 16px !important;
  background: var(--ink) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.nav-login-btn:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* 상단 헤더 우측 CTA 컨테이너: 검은 상자 제거 및 자연스러운 투명 버튼 그룹 유지 */
.nav-bar-cta {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: var(--radius-full) !important;
  background: var(--danger) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-left: 4px !important;
}

/* ------------------------------------------------------------------------------
 * 5. 히어로 섹션 (Aurora Tech Hero - Clean Luxury Dark Mode)
 * ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------
 * 5. 히어로 섹션 (화사하고 산뜻한 라이트 테크 배너 - 밝고 깨끗한 톤)
 * ------------------------------------------------------------------------------ */
.market-hero {
  position: relative !important;
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 24px auto 0 !important;
  padding: 64px 48px 52px !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #e0e7ff !important;
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 50%, #ffffff 100%) !important;
  box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.07) !important;
  color: var(--ink) !important;
}

.market-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(37, 99, 235, 0.05) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.market-hero > div {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.eyebrow, .banner-tag, .auth-pill, .ai-live-tag, .pillar-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.market-hero .eyebrow {
  padding: 6px 14px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: #2563eb !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.market-hero h1 {
  max-width: 860px !important;
  margin: 20px 0 16px !important;
  color: var(--ink) !important;
  font-size: clamp(32px, 3.5vw, 48px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}

.market-hero h1 em {
  color: #2563eb !important;
  font-style: normal !important;
}

.market-hero p {
  max-width: 680px !important;
  margin: 0 auto 28px !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* 중앙 대형 검색창 (화이트 & 블루 포커스) */
.hero-market-search {
  width: min(720px, 100%) !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 6px 6px 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
  margin: 0 auto !important;
  transition: all 0.2s ease !important;
}

.hero-market-search:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 10px 25px -5px rgba(15, 23, 42, 0.08) !important;
}

.hero-market-search input {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 0 12px 0 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.hero-market-search input::placeholder {
  color: #94a3b8 !important;
}

.hero-market-search button, .primary-action, .btn-primary, button.primary, .banner-primary-btn {
  min-height: 46px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.hero-market-search button:hover, .primary-action:hover, .btn-primary:hover, .banner-primary-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
}

/* 히어로 1클릭 추천 검색 키워드 칩 */
.hero-quick-keywords {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 12px !important;
}

.hero-quick-keywords span {
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.hero-quick-keywords button {
  padding: 5px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

.hero-quick-keywords button:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
  transform: translateY(-1px);
}

/* 3대 신뢰 가치 지표 */
.hero-trust-badges {
  margin: 32px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
}

.trust-item {
  min-width: 200px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  text-align: left !important;
}

.trust-item i {
  color: #2563eb !important;
  font-style: normal !important;
  font-size: 20px !important;
}

.trust-item strong {
  display: block !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.trust-item span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* ------------------------------------------------------------------------------
 * 6. 실시간 신뢰 지표 바 (Stats Counter Bar)
 * ------------------------------------------------------------------------------ */
.showcase-stats {
  width: min(1080px, calc(100% - 64px)) !important;
  max-width: 1080px !important;
  margin: -24px auto 48px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stats-container {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 0 !important;
  padding: 16px 20px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-md) !important;
}

.stat-pill {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 4px 16px !important;
  text-align: center !important;
}

.stat-pill b {
  display: block !important;
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}

.stat-pill span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.stat-divider {
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 28px !important;
  background: var(--line) !important;
}

/* ------------------------------------------------------------------------------
 * 7. 서비스 탐색 컨텐츠 & 카테고리 (Services Directory)
 * ------------------------------------------------------------------------------ */
.market-content, .container-inner, .app-shell, .container, .main-content, 
.document-shell, .dispute-shell, .settlement-shell, .order-shell, .request-shell, 
.engineer-shell, .checkout-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.market-content {
  padding: 0 0 64px !important;
}

.section-header-block, .section-center-head {
  margin-bottom: 24px !important;
}

.section-header-block h2, .section-center-head h2, .page-intro h1, 
.dash-title, .mega-hero h1, .ai-hero h1 {
  margin: 8px 0 8px !important;
  color: var(--ink) !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.25 !important;
}

.section-header-block p, .section-center-head p, .page-intro p {
  color: var(--muted) !important;
  font-size: 14px !important;
}

/* 모던 세그먼트 카테고리 필터 탭 (Pill Tabs) */
.category-row, .request-tabs, .manage-tabs, .admin-tabs, .ai-mode-tabs-wrapper {
  display: flex !important;
  gap: 8px !important;
  padding: 6px !important;
  overflow-x: auto !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
  scrollbar-width: none;
}

.category-row::-webkit-scrollbar {
  display: none;
}

.category-row button, .request-tabs button, .request-tabs a, 
.manage-tabs a, .admin-tabs button, .ai-mode-tab {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.category-row button:hover, .request-tabs button:hover, .admin-tabs button:hover {
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
}

.category-row button.active, .request-tabs button.active, 
.request-tabs a.active, .manage-tabs a.active, .admin-tabs button.active {
  background: var(--ink) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* 기술 지원 스코프 요약 바 */
.simple-scope {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 16px 0 28px !important;
}

.simple-scope > div {
  padding: 14px 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
}

.simple-scope b {
  display: block !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.simple-scope span {
  display: block !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* 리스트 헤더 및 정렬 */
.list-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.list-head h2 {
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.list-head p {
  color: var(--muted) !important;
  font-size: 12px !important;
  margin: 2px 0 0 !important;
}

.list-head select, #sort {
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  outline: 0 !important;
  cursor: pointer !important;
}

/* ------------------------------------------------------------------------------
 * 8. 하이엔드 서비스 카드 그리드 (Service Cards Grid)
 * ------------------------------------------------------------------------------ */
#grid.service-grid, .service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#grid.service-grid > article.service-card, .service-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#grid.service-grid > article.service-card:hover, .service-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* 카드 썸네일 영역 */
#grid .service-card .service-thumb, .service-thumb {
  position: relative !important;
  height: 124px !important;
  min-height: 124px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-bottom: 1px solid var(--line-subtle) !important;
  overflow: hidden !important;
}

/* 카테고리별 세련된 파스텔 테크 그라디언트 */
.service-thumb-hardware { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; }
.service-thumb-software { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important; }
.service-thumb-network-security { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }
/* ------------------------------------------------------------------------------
 * 8. 하이엔드 서비스 카드 그리드 (Service Cards Grid) - 리디자인
 * ------------------------------------------------------------------------------ */
#grid.service-grid, .service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

#grid.service-grid > article.service-card, .service-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md, 4px) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03) !important;
  cursor: pointer !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
}

#grid.service-grid > article.service-card:hover, .service-card:hover {
  transform: translateY(-5px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 30px -8px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.04) !important;
}

/* ------------------------------------------------------------------------------
 * 8. 컴팩트 미니멀 서비스 카드 (억지 이미지 배너 없는 슬림 & 클린 스타일)
 * ------------------------------------------------------------------------------ */
#grid.service-grid, .service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#grid.service-card, .service-card, .compact-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 20px 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md, 4px) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02) !important;
  cursor: pointer !important;
  min-height: 0 !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#grid.service-card:hover, .service-card:hover, .compact-card:hover {
  transform: translateY(-4px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.03) !important;
}

/* 상단 헤더 라인 (아이콘 + 카테고리 태그 + 찜 버튼) */
.card-head-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.card-badge-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 컴팩트 테크 아이콘 */
.service-mini-icon {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border-radius: 10px !important;
  font-size: 19px !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  flex-shrink: 0 !important;
}

.service-mini-icon.cat-hardware { background: #f0f9ff !important; border-color: #e0f2fe !important; }
.service-mini-icon.cat-network-security { background: #f0fdf4 !important; border-color: #dcfce7 !important; }
.service-mini-icon.cat-cloud { background: #f0fdfa !important; border-color: #ccfbf1 !important; }
.service-mini-icon.cat-software { background: #f5f3ff !important; border-color: #ede9fe !important; }
.service-mini-icon.cat-data-ai { background: #fdf4ff !important; border-color: #fae8ff !important; }
.service-mini-icon.cat-maintenance { background: #fffbeb !important; border-color: #fef3c7 !important; }

/* 카테고리 라벨 태그 */
.card-badge-group .cat-pill {
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: var(--surface-muted) !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* 찜하기(하트) 버튼 */
.card-head-line .heart, .heart {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: #94a3b8 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.card-head-line .heart:hover, .heart:hover {
  color: #e11d48 !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

.card-head-line .heart.on {
  color: #e11d48 !important;
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

/* 카드 본문 정보 (여백 군더더기 없이 슬림함) */
.service-card .service-info, .service-info {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  background: transparent !important;
}

/* 서비스 타이틀 */
.service-card h3.title, .service-info h3.title {
  min-height: 42px !important;
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.15s ease !important;
}

.service-card:hover h3.title {
  color: var(--primary) !important;
}

/* 간결 요약 설명 */
.card-summary {
  margin: 0 0 12px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 판매자 라인 */
.seller-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

.seller-line .avatar, .partner-avatar {
  display: grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.seller-line .name {
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.seller-line .location-tag {
  margin-left: auto !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.verified-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* 스펙 태그 칩 */
.spec-row {
  min-height: 22px !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}

.spec-tag, .partner-tag, .ptype-badge, .badge-req {
  padding: 3px 7px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--surface-muted) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

.spec-tag.highlight {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #dbeafe !important;
  font-weight: 700 !important;
}

/* 카드 하단 평점 및 가격 */
.card-footer {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}

.rating-box {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.rating-box b {
  color: #f59e0b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.rating-box small {
  color: #94a3b8 !important;
  font-size: 11px !important;
}

.price-box {
  text-align: right !important;
}

.price-box strong {
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.price-box small {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-left: 2px !important;
}



/* ------------------------------------------------------------------------------
 * 9. 하단 지원 섹션들 (Why InfraLink, How it works, CTA Banner, FAQ)
 * ------------------------------------------------------------------------------ */
.why-infralink-section, .workflow-steps-section, .faq-section {
  padding: 72px 0 !important;
  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

.workflow-steps-section {
  background: var(--bg-canvas) !important;
}

.section-center-head {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

.feature-grid-4, .step-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.feature-card, .workflow-card, .faq-item {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.feature-card:hover, .workflow-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.feature-card, .workflow-card {
  padding: 24px !important;
}

.feature-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 18px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-accent) !important;
  font-size: 20px !important;
}

.feature-card h3, .workflow-card h3, .faq-item h3 {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

.feature-card p, .workflow-card p, .faq-item p {
  margin-bottom: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.step-num {
  display: inline-flex !important;
  margin-bottom: 18px !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* 대규모 프로젝트 배너 (CTA Callout - 밝고 산뜻한 라이트 프리미엄 톤) */
.custom-project-banner {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 64px auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #bfdbfe !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #eff6ff 100%) !important;
  box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.08) !important;
}

.banner-inner {
  display: grid !important;
  grid-template-columns: 1.5fr 0.8fr !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 22px 28px !important;
}

.banner-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #2563eb !important;
  background: var(--surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

.banner-content h2 {
  margin: 14px 0 12px !important;
  color: var(--ink) !important;
  font-size: clamp(24px, 2.5vw, 30px) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}

.banner-content p {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.banner-actions {
  margin-top: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.banner-primary-btn, .banner-secondary-btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 22px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.banner-primary-btn {
  background: var(--infralink-turquoise, #3cc2d2) !important;
  color: #0b102b !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(60, 194, 210, 0.35) !important;
}
.banner-primary-btn:hover {
  background: #32b0c0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(60, 194, 210, 0.45) !important;
}

.banner-secondary-btn {
  border: 1px solid #cbd5e1 !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
.banner-secondary-btn:hover {
  background: var(--surface-muted) !important;
  border-color: #94a3b8 !important;
}

.graphic-card {
  padding: 24px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06) !important;
}

.stat-line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
}
.stat-line:last-child {
  border: 0 !important;
}
.stat-line b {
  color: #2563eb !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* FAQ 아코디언/카드 */
.faq-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.faq-item {
  padding: 24px !important;
}

/* ------------------------------------------------------------------------------
 * 10. 서브 페이지 및 공통 폼/버튼/테이블 컴포넌트
 * ------------------------------------------------------------------------------ */
.app-shell, .main-content, .document-shell, .dispute-shell, .settlement-shell, .checkout-shell {
  padding-top: 36px !important;
  padding-bottom: 72px !important;
}

.page-intro, .admin-hero, .mega-hero, .ai-hero {
  margin-bottom: 24px !important;
  padding: 28px 32px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
}

.panel, .auth-panel, .document-paper, .criteria-panel, .prompt-panel, 
.milestone-box, .total-savings-banner {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* 목록 컨테이너는 바깥쪽 박스 테두리를 갖지 않고 내부 카드들이 독립 배치되도록 설정 */
.dispute-list, .settlement-list, .manage-list, .member-list {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}


.panel, .auth-panel, .criteria-panel, .prompt-panel {
  padding: 16px 20px !important;
}

/* 버튼 컴포넌트 */
.secondary-action, .btn-secondary, button.secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.secondary-action:hover, .btn-secondary:hover, button.secondary:hover {
  background: var(--surface-muted) !important;
  border-color: var(--muted-light) !important;
}

.empty-state {
  padding: 56px 24px !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-muted) !important;
  color: var(--muted) !important;
  text-align: center !important;
}
.empty-state b, .empty-state strong {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--ink) !important;
  font-size: 15px !important;
}

/* 입력 필드 (Form Elements) */
.form-field {
  display: block;
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.form-field input, .form-field textarea, .form-field select, .field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-field input:focus, .form-field textarea:focus, .form-field select:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* 의뢰 작성 페이지 래퍼 */
.request-create-shell {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 72px;
}

.request-create-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.request-guide-card {
  position: sticky;
  top: 92px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-xs);
}

.request-create-form {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-xs);
}

.form-section {
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------------------
 * 11. 하단 푸터 (Clean Slate Footer)
 * ------------------------------------------------------------------------------ */
.site-footer, .market-footer, footer {
  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  padding: 48px 0 40px !important;
}

.market-footer > div, footer > div {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.market-footer nav, footer nav {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.market-footer nav a, footer nav a {
  color: var(--muted) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.market-footer nav a:hover, footer nav a:hover {
  color: var(--ink) !important;
}

/* ------------------------------------------------------------------------------
 * 12. 반응형 미디어 쿼리 (Responsive Styles)
 * ------------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .market-search { display: none !important; }
  #grid.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feature-grid-4, .step-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .simple-scope { grid-template-columns: 1fr !important; }
  .banner-inner { grid-template-columns: 1fr !important; gap: 30px !important; }
  .faq-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .global-notice-bar { min-height: 32px !important; }
  .notice-inner { width: calc(100% - 24px) !important; }
  .notice-link { display: none !important; }
  
  .market-nav { width: calc(100% - 24px) !important; min-height: 60px !important; gap: 10px !important; }
  .market-brand b { font-size: 16px !important; }
  
  .market-hero {
    width: calc(100% - 24px) !important;
    padding: 36px 20px 28px !important;
    border-radius: var(--radius) !important;
  }
  .market-hero h1 { font-size: 28px !important; }
  
  .hero-market-search {
    flex-direction: column !important;
    padding: 10px !important;
    gap: 8px !important;
  }
  .hero-market-search input {
    width: 100% !important;
    padding: 6px !important;
  }
  .hero-market-search button {
    width: 100% !important;
  }
  
  .stats-container {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .stat-divider {
    width: 100% !important;
    height: 1px !important;
  }
  
  #grid.service-grid { grid-template-columns: 1fr !important; }
  .feature-grid-4, .step-card-grid { grid-template-columns: 1fr !important; }
  .request-create-layout { grid-template-columns: 1fr !important; }
}

/* ==============================================================================
 * 13. [서브페이지 공통] 마이페이지는 mypage.css 전용 모듈에서 전담 관리합니다.
 * ============================================================================== */

/* ==============================================================================
 * 14. [서브페이지] AI 견적 요청 작성 시스템 (request-create.html)
 * ============================================================================== */
.ai-request-shell {
  width: min(1160px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}
.back-link:hover {
  color: #2563eb !important;
}

.ai-request-intro {
  margin-bottom: 24px !important;
}
.ai-request-intro h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 8px 0 6px !important;
}
.ai-request-intro p {
  color: var(--muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* AI 프롬프트 입력 카드 */
.ai-prompt-card {
  background: var(--surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 32px !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08) !important;
  margin-bottom: 28px !important;
}

.ai-prompt-card label {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}

.ai-prompt-box {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.ai-prompt-box textarea {
  flex: 1 !important;
  padding: 14px 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  resize: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.ai-prompt-box textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.ai-prompt-box button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 1px solid #7c3aed !important;
  border-radius: var(--radius, 10px) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.ai-prompt-box button:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
  border-color: #6d28d9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5) !important;
}
.ai-prompt-box button span {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.95 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.ai-prompt-box button b {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.ai-prompt-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

.ai-prompt-bottom small {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.prompt-examples {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.prompt-examples button {
  padding: 6px 14px !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface-muted, #1e293b) !important;
  color: var(--muted, #94a3b8) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.prompt-examples button:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}
[data-theme="light"] .prompt-examples button {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
[data-theme="light"] .prompt-examples button:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}

/* AI 분석 중 로딩 */
.ai-working {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 24px !important;
  background: var(--surface-muted, rgba(30, 41, 59, 0.7)) !important;
  border: 1px dashed rgba(56, 189, 248, 0.4) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 24px !important;
}
.ai-working b {
  color: var(--ink, #f8fafc) !important;
}
.ai-working small {
  color: var(--muted, #94a3b8) !important;
}
[data-theme="light"] .ai-working {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
[data-theme="light"] .ai-working b {
  color: #1e3a8a !important;
}
[data-theme="light"] .ai-working small {
  color: #3b82f6 !important;
}

/* AI 드래프트 2열 레이아웃 */
.ai-draft-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 28px !important;
  align-items: start !important;
}

.ai-draft-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.draft-section {
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius) !important;
  padding: 24px 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .draft-section {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.draft-section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.draft-section-head > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.draft-section-head span {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-theme="light"] .draft-section-head span {
  background: #dbeafe !important;
  color: #2563eb !important;
}

.draft-section-head h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink, #f8fafc) !important;
  margin: 0 !important;
}
[data-theme="light"] .draft-section-head h3 {
  color: #0f172a !important;
}

.draft-section-head button {
  background: transparent !important;
  border: 0 !important;
  color: #38bdf8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
[data-theme="light"] .draft-section-head button {
  color: #2563eb !important;
}

.draft-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* 우측 요약 및 최종 제출 카드 */
.ai-submit-card {
  position: sticky !important;
  top: 90px !important;
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="light"] .ai-submit-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08) !important;
}

.ai-ready-badge {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}
[data-theme="light"] .ai-ready-badge {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.ai-submit-card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink, #f8fafc) !important;
  margin: 0 0 16px !important;
}
[data-theme="light"] .ai-submit-card h3 {
  color: #0f172a !important;
}

.ai-submit-card dl {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
}
[data-theme="light"] .ai-submit-card dl {
  border-top-color: #e2e8f0 !important;
  border-bottom-color: #e2e8f0 !important;
}

.ai-submit-card dl > div {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
}
.ai-submit-card dt {
  color: var(--muted, #94a3b8) !important;
}
[data-theme="light"] .ai-submit-card dt {
  color: #64748b !important;
}
.ai-submit-card dd {
  font-weight: 700 !important;
  color: var(--ink, #f8fafc) !important;
  margin: 0 !important;
}
[data-theme="light"] .ai-submit-card dd {
  color: #0f172a !important;
}

.ai-partner-preview {
  background: var(--surface-muted) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 20px !important;
}
.ai-partner-preview b {
  display: block !important;
  font-size: 12px !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.ai-partner-preview > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ai-partner-preview span {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: #e2e8f0 !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.ai-partner-preview small {
  color: var(--muted) !important;
  font-size: 11px !important;
}

#request-submit {
  width: 100% !important;
  min-height: 48px !important;
  font-size: 15px !important;
}

#reset-draft {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 10px !important;
}
#reset-draft:hover {
  color: var(--ink) !important;
}

/* ==============================================================================
 * 15. [서브페이지] 견적 요청 목록 및 상세 (requests.html & request-detail.html)
 * ============================================================================== */
.request-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.request-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 40px 48px !important;
  margin-bottom: 28px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #bfdbfe !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.08) !important;
}

.request-hero h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 8px 0 6px !important;
}
.request-hero p {
  color: var(--muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.request-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

.request-tabs button {
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.request-tabs button:hover {
  background: var(--surface-muted) !important;
  border-color: #94a3b8 !important;
}
.request-tabs button.active {
  background: var(--infralink-turquoise, #3cc2d2) !important;
  border-color: var(--infralink-turquoise, #3cc2d2) !important;
  color: #0b102b !important;
  box-shadow: 0 4px 12px rgba(60, 194, 210, 0.3) !important;
}

.request-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}

.request-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.request-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-2px) !important;
}

/* ==============================================================================
 * 16. [서브페이지] 로그인 및 회원가입 화면 (account.html & join.html)
 * ============================================================================== */
.auth-shell {
  width: min(1080px, calc(100% - 40px)) !important;
  margin: 40px auto 80px !important;
}

.account-layout-v2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: stretch !important;
}

.auth-branding-panel {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #eff6ff 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-lg) !important;
  padding: 48px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.auth-branding-panel h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
  margin: 16px 0 12px !important;
}
.auth-branding-panel p {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 0 32px !important;
}

.auth-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.feat-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: var(--surface) !important;
  border: 1px solid rgba(191, 219, 254, 0.6) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.05) !important;
}
.feat-item i {
  font-style: normal !important;
  font-size: 18px !important;
}
.feat-item strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--ink) !important;
}
.feat-item span {
  font-size: 12px !important;
  color: var(--muted) !important;
}

.auth-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 44px 40px !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08) !important;
}

.auth-head h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 8px 0 6px !important;
}
.auth-head p {
  color: var(--muted) !important;
  font-size: 13px !important;
  margin: 0 0 24px !important;
}

/* 시연 계정 1클릭 박스 */
.demo-login-box {
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 20px !important;
}

.demo-login-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}
.demo-login-head b {
  font-size: 12px !important;
  color: var(--ink) !important;
}
.demo-login-head p {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin: 0 !important;
}
.demo-login-head span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #2563eb !important;
}

.demo-account-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

.demo-account-grid button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 8px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}
.demo-account-grid button:hover {
  border-color: #2563eb !important;
  background: #f0f7ff !important;
}
.demo-account-grid button.selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}
.demo-account-grid button b {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: var(--ink) !important;
}
.demo-account-grid button small {
  font-size: 10px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* ==============================================================================
 * 17. [서브페이지] 내활동 & 주문 및 결제 (orders.html & checkout.html)
 * ============================================================================== */
.orders-shell, .checkout-shell {
  width: min(1160px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.orders-title {
  margin-bottom: 24px !important;
}
.orders-title h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 6px 0 !important;
}

/* 주문관리 탭은 request-tabs 공통 세그먼트 스타일을 그대로 상속받습니다. */


.order-summary {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.order-summary > div {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.order-summary b {
  display: block !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
}
.order-summary span {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}

.order-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.order-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px 28px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.order-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.order-card-head span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}
.order-card-head .status {
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.order-card-body {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.order-card-body h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 4px 0 !important;
}
.order-card-body strong {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.order-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}
.order-actions a, .order-actions button {
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #cbd5e1 !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
}
.order-actions .checkout-link {
  background: var(--infralink-turquoise, #3cc2d2) !important;
  color: #0b102b !important;
  border-color: var(--infralink-turquoise, #3cc2d2) !important;
}

/* 안전결제 화면 */
.checkout-order {
  background: var(--surface-muted) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--line) !important;
}
.checkout-total {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}
.checkout-total > div {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}
.checkout-total > div:last-child {
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid #bfdbfe !important;
  font-size: 16px !important;
}
.checkout-total strong {
  color: #2563eb !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

/* ==============================================================================
 * 18. [서브페이지] 엔지니어 풀 및 가이드 (engineers.html & guide.html)
 * ============================================================================== */
.engineer-audit-banner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

.audit-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 18px 20px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
.audit-item b {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  margin-bottom: 4px !important;
}
.audit-item span {
  font-size: 12px !important;
  color: var(--muted) !important;
}

.engineer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.engineer-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.engineer-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-2px) !important;
}

.engineer-avatar {
  font-size: 32px !important;
  margin-bottom: 12px !important;
}

.engineer-card h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 6px !important;
}

.engineer-card p {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}

.engineer-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
}
.engineer-tags span {
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: var(--surface-muted) !important;
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.engineer-card a {
  display: inline-flex !important;
  align-items: center !important;
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}
.engineer-card a:hover {
  text-decoration: underline !important;
}

/* ==============================================================================
 * 19. [서브페이지] 프로젝트 의뢰 (project-request.html)
 * ============================================================================== */
.project-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.project-request-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.project-guide-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.guide-box, .guarantee-box {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.guide-box h3, .guarantee-box h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}

.tip-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.tip-list b {
  display: block !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}
.tip-list span {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
}

.guarantee-item {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.guarantee-item:last-child {
  margin-bottom: 0 !important;
}
.guarantee-item i {
  font-style: normal !important;
  font-size: 18px !important;
}
.guarantee-item b {
  display: block !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.guarantee-item span {
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* ==============================================================================
 * 20. [서브페이지] 알림 목록 (notifications.html)
 * ============================================================================== */
.notification-shell {
  width: min(860px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.notification-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.notification-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.notification-item:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 6px 18px -4px rgba(37, 99, 235, 0.1) !important;
}
.notification-item.unread {
  background: #f0f7ff !important;
  border-color: #bfdbfe !important;
}
.notification-item h4 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}
.notification-item p {
  color: var(--muted) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* ==============================================================================
 * 21. [운영 관리] 정산 운영 스타일 시스템 (admin-settlements.html)
 * ============================================================================== */
.settlement-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

/* 관리자 헤더 히어로 카드 - InfraLink Premium 딥 네이비 배너 */
.admin-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding: 32px 36px !important;
  margin-bottom: 24px !important;
  border-radius: var(--radius-xl, 18px) !important;
  border: 1px solid rgba(60, 194, 210, 0.35) !important;
  background: linear-gradient(135deg, #101844 0%, #0b102b 100%) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

.admin-hero h1 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 6px 0 8px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.admin-hero p {
  color: #cbd5e1 !important;
  font-size: 14.5px !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

.admin-hero .eyebrow {
  color: var(--infralink-turquoise, #3cc2d2) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
}

/* 정산 요약 4칸 카드 (한 줄 4열 균등 배치 & 항목별 컬러 차별화) */
.settlement-summary {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 960px) {
  .settlement-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

.settlement-summary article {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 20px 22px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: center !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.settlement-summary article:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}

.settlement-summary article span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

.settlement-summary article b {
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* 4대 KPI 항목별 글자색 & 틴트 구분 */
.settlement-summary article.kpi-total b {
  color: var(--ink, #1e293b) !important;
}
[data-theme="dark"] .settlement-summary article.kpi-total b {
  color: #f8fafc !important;
}

.settlement-summary article.kpi-ready span {
  color: #0284c7 !important;
}
.settlement-summary article.kpi-ready b {
  color: #0284c7 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-ready span {
  color: #38bdf8 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-ready b {
  color: #38bdf8 !important;
}

.settlement-summary article.kpi-paid span {
  color: #059669 !important;
}
.settlement-summary article.kpi-paid b {
  color: #059669 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-paid span {
  color: #34d399 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-paid b {
  color: #34d399 !important;
}

.settlement-summary article.kpi-held span {
  color: #d97706 !important;
}
.settlement-summary article.kpi-held b {
  color: #d97706 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-held span {
  color: #fbbf24 !important;
}
[data-theme="dark"] .settlement-summary article.kpi-held b {
  color: #fbbf24 !important;
}

/* 탭 필터 버튼군 */
.manage-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.manage-tabs button {
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.manage-tabs button:hover {
  background: var(--surface-muted) !important;
  border-color: #94a3b8 !important;
}
.manage-tabs button.active {
  background: var(--infralink-turquoise, #3cc2d2) !important;
  border-color: var(--infralink-turquoise, #3cc2d2) !important;
  color: #0b102b !important;
  box-shadow: 0 4px 12px rgba(60, 194, 210, 0.3) !important;
}

/* 정산 카드 리스트 */
.settlement-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.settlement-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl, 14px) !important;
  padding: 24px 28px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .settlement-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="dark"] .settlement-card {
  background: var(--bg-card, #101744) !important;
  border-color: var(--border-color, rgba(60, 194, 210, 0.18)) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.settlement-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.settlement-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

.settlement-status.ready {
  background: rgba(239, 246, 255, 0.9) !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

.settlement-status.held {
  background: rgba(254, 243, 199, 0.9) !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.settlement-status.paid {
  background: rgba(236, 253, 245, 0.9) !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.settlement-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.settlement-actions b {
  font-size: 13px !important;
  color: #166534 !important;
  text-align: center !important;
  padding: 8px 0 !important;
}

/* ==============================================================================
 * 22. [견적요청운영 & 상세] 견적 상세 및 1:1 조건 협의 채팅 (request-detail.html)
 * ============================================================================== */
.request-detail-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 32px 36px !important;
  margin-bottom: 24px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #bfdbfe !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 50%, #ffffff 100%) !important;
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.08) !important;
}

.request-detail-head h1 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 8px 0 6px !important;
}

.request-detail-head p {
  color: var(--muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.request-detail-head > div:last-child {
  text-align: right !important;
}
.request-detail-head small {
  display: block !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}
.request-detail-head b {
  display: block !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  color: #2563eb !important;
  margin: 2px 0 4px !important;
}

.request-type {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}
.request-type.server_part {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
.request-type.solution_support {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}

.owner-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.owner-actions button {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid #cbd5e1 !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
}
.owner-actions button:hover {
  background: var(--surface-muted) !important;
}

.request-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 24px !important;
  align-items: start !important;
  margin-bottom: 32px !important;
}
.request-detail-grid.single {
  grid-template-columns: 1fr !important;
}

.spec-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  padding: 16px !important;
  background: var(--surface-muted) !important;
  border-radius: var(--radius-sm) !important;
}
.spec-list > div {
  display: flex !important;
  gap: 10px !important;
  font-size: 13px !important;
}
.spec-list dt {
  color: var(--muted) !important;
  width: 70px !important;
  flex-shrink: 0 !important;
}
.spec-list dd {
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.request-requirements {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink-2) !important;
  white-space: pre-wrap !important;
  padding: 16px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
}

.chat-notice {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* 견적 제안 폼 */
.bid-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.bid-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-2) !important;
}
.bid-form input, .bid-form textarea {
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* 견적 제안 카드 목록 */
.bid-section {
  margin-top: 32px !important;
}
.bid-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

.bid-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 22px 26px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  transition: all 0.15s ease !important;
}
.bid-card:hover {
  border-color: #bfdbfe !important;
  box-shadow: 0 6px 18px -4px rgba(37, 99, 235, 0.1) !important;
}
.bid-card.selected {
  border-color: #2563eb !important;
  background: #f0f7ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}
.bid-card h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}
.bid-card p {
  color: var(--muted) !important;
  font-size: 13px !important;
  margin: 0 0 6px !important;
}
.bid-card small {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.bid-card > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.bid-card b {
  font-size: 20px !important;
  font-weight: 850 !important;
  color: #2563eb !important;
}

.bid-card button {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
  transition: all 0.15s ease !important;
}
.bid-card button:hover {
  background: #1d4ed8 !important;
}
.bid-card .chat-button {
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}
.bid-card .chat-button:hover {
  background: var(--surface-muted) !important;
  border-color: #94a3b8 !important;
}

/* 1:1 조건 협의 채팅 패널 */
.chat-panel {
  margin-top: 32px !important;
  background: var(--surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.1) !important;
  overflow: hidden !important;
}

.chat-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
  border-bottom: 1px solid #bfdbfe !important;
}
.chat-head h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.chat-head button {
  background: transparent !important;
  border: 0 !important;
  font-size: 20px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
}

.messages {
  padding: 24px !important;
  min-height: 200px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: var(--surface-muted) !important;
}

.message {
  max-width: 75% !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  align-self: flex-start !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
.message.mine {
  align-self: flex-end !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
}
.message b {
  display: block !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}
.message.mine b {
  color: rgba(255, 255, 255, 0.8) !important;
}
.message p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

#chat-form {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
}
#chat-form input {
  flex: 1 !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
}
#chat-form button {
  min-width: 80px !important;
  min-height: 42px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}

/* ==============================================================================
 * 23. [운영 관리] 관리자 종합 운영 및 심사·분쟁 (admin.html & admin-services.html)
 * ============================================================================== */
.admin-shell, .dispute-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.admin-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.admin-stats > div, .admin-stats article {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
.admin-stats span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}
.admin-stats b {
  display: block !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: #2563eb !important;
  margin-top: 4px !important;
}

.admin-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.admin-toolbar label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-2) !important;
}
.admin-toolbar input {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

.admin-tabs {
  display: flex !important;
  gap: 6px !important;
}
.admin-tabs button {
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.admin-tabs button.active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.member-list, .dispute-list, .manage-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.member-card, .manage-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 22px 26px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
}

/* ==============================================================================
 * 24. [관심 서비스] 찜 목록 (favorites.html)
 * ============================================================================== */
.favorite-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

/* ==============================================================================
 * 25. [서비스 문의함] 1:1 문의 및 문의 작성 (messages.html & inquiry-create.html)
 * ============================================================================== */
.message-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.message-layout {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.message-list-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 750 !important;
  color: var(--ink) !important;
}
.message-list-head button {
  background: transparent !important;
  border: 0 !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.inquiry-list {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  max-height: 540px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.inquiry-item {
  padding: 16px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.inquiry-item:hover {
  background: #f0f7ff !important;
}
.inquiry-item.selected {
  background: #eff6ff !important;
  border-left: 3px solid #2563eb !important;
}
.inquiry-item h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}
.inquiry-item p {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.message-thread {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  min-height: 480px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

/* 전문가 문의 작성 화면 */
.inquiry-create-shell, .service-create-shell {
  width: min(1080px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.inquiry-create-layout {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

.inquiry-service-card {
  background: var(--surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06) !important;
}

/* ==============================================================================
 * 26. [파트너 서비스 관리 & 등록] (partner-services.html & partner-service-create.html)
 * ============================================================================== */
.partner-service-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.request-create-shell {
  width: min(1160px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}

.request-create-layout {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}

.request-guide-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.guide-number {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}
.request-guide-card h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
}
.request-guide-card p {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}
.request-guide-card ul {
  padding: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.request-guide-card li b {
  display: block !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}
.request-guide-card li span {
  font-size: 12px !important;
  color: var(--muted) !important;
}

.request-create-form {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 32px !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.form-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.form-section-title span {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.form-section-title h2 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.form-section-title p {
  color: var(--muted) !important;
  font-size: 12px !important;
  margin: 2px 0 0 !important;
}

/* ==============================================================================
 * 27. [서비스 상세] 프리미엄 라이트 테크 상세 페이지 (service-detail.html)
 * ============================================================================== */
.detail-shell {
  width: min(1200px, calc(100% - 40px)) !important;
  margin: 24px auto 80px !important;
}

.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-bottom: 20px !important;
}
.breadcrumbs a {
  color: #2563eb !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.detail-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 36px !important;
  align-items: start !important;
}

.detail-visual {
  min-height: 140px !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1px solid #bfdbfe !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}
.detail-visual span {
  font-size: 40px !important;
}
.detail-visual small {
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface) !important;
  color: #2563eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.detail-title h1 {
  font-size: 26px !important;
  font-weight: 850 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
  margin: 12px 0 8px !important;
}
.detail-title p {
  color: var(--muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 16px !important;
}

.detail-section {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  margin-top: 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.detail-section h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}

.process-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
.process-strip > div {
  background: var(--surface-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  text-align: center !important;
}
.process-strip b {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  margin-bottom: 4px !important;
}
.process-strip span {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* 우측 주문 박스 */
.order-box {
  position: sticky !important;
  top: 90px !important;
  background: var(--surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08) !important;
}

.package-tabs {
  display: flex !important;
  background: var(--surface-muted) !important;
  border-bottom: 1px solid var(--line) !important;
}
.package-tabs button {
  flex: 1 !important;
  min-height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}
.package-tabs button.active {
  background: var(--surface) !important;
  color: #2563eb !important;
  border-bottom: 2px solid #2563eb !important;
}

.package-body {
  padding: 24px !important;
}
.package-price strong {
  display: block !important;
  font-size: 28px !important;
  font-weight: 850 !important;
  color: var(--ink) !important;
  margin: 6px 0 12px !important;
}
.package-body ul {
  padding: 0 !important;
  margin: 16px 0 24px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.package-body li {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.buy-button {
  width: 100% !important;
  min-height: 48px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
  margin-bottom: 8px !important;
}
.buy-button:hover {
  background: #1d4ed8 !important;
}

.inquiry-button {
  width: 100% !important;
  min-height: 42px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}
.inquiry-button:hover {
  background: var(--surface-muted) !important;
  border-color: #94a3b8 !important;
}

/* ==============================================================================
 * 28. [거래 후기 및 분쟁 조정] (review.html & disputes.html)
 * ============================================================================== */
.review-shell {
  width: min(800px, calc(100% - 40px)) !important;
  margin: 32px auto 80px !important;
}
.review-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04) !important;
}

.dispute-form-panel {
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--line, #e2e8f0) !important;
  border-radius: var(--radius) !important;
  padding: 28px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 28px !important;
}

/* ==============================================================================
 * 29. [마이페이지]는 mypage.css에서 전담 관리합니다.
 * ============================================================================== */

/* ==============================================================================
 * 30. [본인인증 카드 & 인증 모듈] (identity-verification.js)
 * ============================================================================== */
.identity-card {
  background: var(--surface-muted, #1e293b) !important;
  border: 1px solid var(--line-strong, rgba(59, 130, 246, 0.3)) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  margin: 16px 0 !important;
}

.identity-card input {
  background: var(--surface, #0f172a) !important;
  color: var(--ink, #f8fafc) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-sm) !important;
}

/* ==============================================================================
 * 31. [안전결제 및 에스크로 체크아웃] (checkout.html & checkout.js)
 * ============================================================================== */
.checkout-shell {
  width: min(900px, calc(100% - 48px)) !important;
  margin: 32px auto 80px !important;
}

.checkout-order {
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  margin-bottom: 24px !important;
}

.payment-method {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--surface-muted, #1e293b) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.payment-method:hover, .payment-method:has(input:checked) {
  border-color: var(--primary, #3b82f6) !important;
  background: var(--surface-accent, rgba(59, 130, 246, 0.1)) !important;
}

/* ==============================================================================
 * 32. [알림 센터 & 실시간 메시지] (notifications.html & messages.html)
 * ============================================================================== */
.notification-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  color: var(--ink, #f8fafc) !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

.notification-item:hover {
  border-color: var(--primary, #3b82f6) !important;
  transform: translateX(4px) !important;
}

.notification-item.unread {
  border-left: 4px solid var(--primary, #3b82f6) !important;
  background: var(--surface-muted, #1e293b) !important;
}

.message-layout {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 20px !important;
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  min-height: 600px !important;
}

.inquiry-item {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06)) !important;
  color: var(--ink, #f8fafc) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.inquiry-item.active, .inquiry-item:hover {
  background: var(--surface-muted, #1e293b) !important;
}

.thread-messages {
  padding: 20px !important;
  overflow-y: auto !important;
  max-height: 460px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.thread-messages article {
  max-width: 75% !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-muted, #1e293b) !important;
  color: var(--ink, #f8fafc) !important;
  font-size: 14px !important;
}

.thread-messages article.mine {
  align-self: flex-end !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
}

/* ==============================================================================
 * 33. [전 서브페이지 공통 듀얼 테마 완성 엔진] (Silicon Valley B2B Tech Standard)
 * ============================================================================== */
.app-shell, .request-shell, .orders-shell, .checkout-shell, .message-shell {
  max-width: 1240px !important;
  margin: 32px auto 80px !important;
  padding: 0 24px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 페이지 헤더 영역 타이틀 & 서브타이틀 */
.page-intro, .request-hero, .orders-title, .auth-head {
  margin-bottom: 28px !important;
}

.eyebrow {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  margin-bottom: 8px !important;
}

[data-theme="light"] .eyebrow {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

.page-intro h1, .request-hero h1, .orders-title h1, .auth-head h1 {
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
  color: var(--ink, #f8fafc) !important;
  margin: 0 0 8px 0 !important;
}

.page-intro p, .request-hero p, .orders-title p, .auth-head p {
  font-size: 1rem !important;
  color: var(--muted, #94a3b8) !important;
  margin: 0 !important;
}

/* 공통 패널 & 카드 */
.panel, .auth-panel, .request-card, .order-item, .box-card {
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink, #f8fafc) !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.panel:hover, .request-card:hover, .order-item:hover {
  border-color: var(--primary, #3b82f6) !important;
}

/* 세그먼트 버튼 탭 */
.request-tabs, .activity-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 6px !important;
  background: var(--surface-muted, #1e293b) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 14px !important;
  margin-bottom: 24px !important;
}

.request-tabs button, .activity-tabs button {
  padding: 10px 20px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: var(--muted, #94a3b8) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.request-tabs button.active, .activity-tabs button.active {
  background: var(--surface, #0f172a) !important;
  color: var(--cyan, #38bdf8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .request-tabs button.active,
[data-theme="light"] .activity-tabs button.active {
  background: #ffffff !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* 폼 인풋 & 라벨 */
.field, .form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ink, #f8fafc) !important;
}

.field input, .field select, .field textarea,
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: var(--surface-muted, #1e293b) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12)) !important;
  color: var(--ink, #f8fafc) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea,
[data-theme="light"] .form-field input, [data-theme="light"] .form-field select, [data-theme="light"] .form-field textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.field input:focus, .field select:focus, .field textarea:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* 공통 버튼 */
.primary-action {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.primary-action:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important;
}

.secondary-action {
  background: var(--surface-muted, #1e293b) !important;
  color: var(--ink, #f8fafc) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .secondary-action {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

.secondary-action:hover {
  background: var(--surface-accent, rgba(59, 130, 246, 0.15)) !important;
  border-color: var(--primary, #3b82f6) !important;
}

/* 인증(로그인/회원가입) 2열 레이아웃 */
.account-layout-v2 {
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 36px !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  .account-layout-v2 {
    grid-template-columns: 1fr !important;
  }
}

.auth-branding-panel {
  padding: 40px 32px !important;
  background: var(--surface, #0f172a) !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 20px !important;
}

.auth-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.feat-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: var(--surface-muted, #1e293b) !important;
  border-radius: 12px !important;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.06)) !important;
}

/* ==========================================================================
   InfraLink Premium 서브페이지 공통 시그니처 배너 (.subpage-hero)
   - 관리자 관제실, 견적 요청, 거래 내역, 파트너 관리 등 전체 서브페이지 통일 배너
   ========================================================================== */
.subpage-hero,
.admin-hero,
.workspace-hero,
.request-hero,
.orders-hero,
.partner-hero,
.evidence-hero,
.dispute-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding: 34px 40px !important;
  margin-bottom: 28px !important;
  border-radius: var(--radius-xl, 20px) !important;
  border: 1px solid rgba(60, 194, 210, 0.35) !important;
  background: linear-gradient(135deg, #101844 0%, #0b102b 100%) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

.subpage-hero::before,
.admin-hero::before,
.workspace-hero::before,
.request-hero::before,
.orders-hero::before,
.partner-hero::before,
.evidence-hero::before,
.dispute-hero::before {
  content: "" !important;
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  right: -50px !important;
  top: -80px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(60, 194, 210, 0.22), transparent 70%) !important;
  pointer-events: none !important;
}

.subpage-hero .eyebrow,
.admin-hero .eyebrow,
.workspace-hero .eyebrow,
.request-hero .eyebrow,
.orders-hero .eyebrow,
.partner-hero .eyebrow,
.evidence-hero .eyebrow,
.dispute-hero .eyebrow {
  color: var(--infralink-turquoise, #3cc2d2) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.subpage-hero h1,
.admin-hero h1,
.workspace-hero h1,
.request-hero h1,
.orders-hero h1,
.partner-hero h1,
.evidence-hero h1,
.dispute-hero h1 {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 4px 0 8px 0 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.subpage-hero p,
.admin-hero p,
.workspace-hero p,
.request-hero p,
.orders-hero p,
.partner-hero p,
.evidence-hero p,
.dispute-hero p {
  color: #cbd5e1 !important;
  font-size: 14.5px !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  max-width: 780px !important;
}

.subpage-hero .hero-actions,
.admin-hero .admin-hero-actions,
.workspace-hero .hero-actions,
.orders-hero .hero-actions,
.partner-hero .hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  z-index: 2 !important;
}

.subpage-hero .primary-action,
.admin-hero .primary-action,
.workspace-hero .primary-action {
  padding: 10px 22px !important;
  border-radius: 10px !important;
  background: var(--infralink-turquoise, #3cc2d2) !important;
  color: #0b102b !important;
  font-weight: 850 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(60, 194, 210, 0.35) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.subpage-hero .primary-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(60, 194, 210, 0.5) !important;
}

.subpage-hero .secondary-action,
.admin-hero .secondary-action,
.orders-hero .secondary-action,
.partner-hero .secondary-action {
  padding: 9px 18px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.subpage-hero .secondary-action:hover,
.admin-hero .secondary-action:hover,
.orders-hero .secondary-action:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--infralink-turquoise, #3cc2d2) !important;
  color: var(--infralink-turquoise, #3cc2d2) !important;
}

/* 라이트 테마: 화사하고 산뜻한 아이스 블루 & 클린 화이트 프리미엄 배너 */
[data-theme="light"] .subpage-hero,
[data-theme="light"] .admin-hero,
[data-theme="light"] .workspace-hero,
[data-theme="light"] .request-hero,
[data-theme="light"] .orders-hero,
[data-theme="light"] .partner-hero,
[data-theme="light"] .evidence-hero,
[data-theme="light"] .dispute-hero {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 60%, #f8fafc 100%) !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08), 0 8px 10px -6px rgba(37, 99, 235, 0.04) !important;
}

[data-theme="light"] .subpage-hero h1,
[data-theme="light"] .admin-hero h1,
[data-theme="light"] .workspace-hero h1,
[data-theme="light"] .request-hero h1,
[data-theme="light"] .orders-hero h1,
[data-theme="light"] .partner-hero h1,
[data-theme="light"] .evidence-hero h1,
[data-theme="light"] .dispute-hero h1 {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .subpage-hero p,
[data-theme="light"] .admin-hero p,
[data-theme="light"] .workspace-hero p,
[data-theme="light"] .request-hero p,
[data-theme="light"] .orders-hero p,
[data-theme="light"] .partner-hero p,
[data-theme="light"] .evidence-hero p,
[data-theme="light"] .dispute-hero p {
  color: #334155 !important;
}

[data-theme="light"] .subpage-hero .eyebrow,
[data-theme="light"] .admin-hero .eyebrow,
[data-theme="light"] .workspace-hero .eyebrow,
[data-theme="light"] .request-hero .eyebrow,
[data-theme="light"] .orders-hero .eyebrow,
[data-theme="light"] .partner-hero .eyebrow,
[data-theme="light"] .evidence-hero .eyebrow,
[data-theme="light"] .dispute-hero .eyebrow {
  color: #2563eb !important;
  font-weight: 850 !important;
}


[data-theme="light"] .feat-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ==========================================================================
   [CRITICAL] 테마별 반대 계열 고대비 버튼 시인성 전면 강화 시스템
   - 라이트 테마: 밝은 배경(화이트/연회색) 위에서 버튼은 반대 계열인 딥 네이비/다크(#0b102b, #101844)로 뚜렷하게 돌출
   - 다크 테마: 어두운 배경(딥네이비/블랙) 위에서 버튼은 반대 계열인 밝은 시안/터콰이즈/화이트(#3cc2d2, #38bdf8)로 선명하게 발광
   ========================================================================== */

/* --- 1. 라이트 테마: 밝고 산뜻한 시안 및 화이트 버튼 --- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .primary-action,
[data-theme="light"] button.primary,
[data-theme="light"] .buy-button,
[data-theme="light"] .hero-market-search button,
[data-theme="light"] .banner-primary-btn {
  background: #3cc2d2 !important;
  color: #0b1e36 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(60, 194, 210, 0.35) !important;
  font-weight: 850 !important;
  border-radius: 9px !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .primary-action:hover,
[data-theme="light"] button.primary:hover,
[data-theme="light"] .buy-button:hover,
[data-theme="light"] .hero-market-search button:hover {
  background: #5eead4 !important;
  color: #042f2e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(60, 194, 210, 0.5) !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .secondary-action,
[data-theme="light"] button.secondary {
  background: #ffffff !important;
  color: #0b2545 !important;
  border: 1.5px solid #3cc2d2 !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(60, 194, 210, 0.15) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .secondary-action:hover,
[data-theme="light"] button.secondary:hover {
  background: #e6f7fa !important;
  color: #0284c7 !important;
  border-color: #00bcd4 !important;
  box-shadow: 0 4px 12px rgba(60, 194, 210, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* 라이트 테마: 주문 액션 바 레이아웃 규격 (개별 버튼 색상은 시맨틱 시스템 준수) */
.order-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* 라이트 테마: 관리자 탭 및 툴바 버튼 */
[data-theme="light"] .admin-tabs button {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 750 !important;
}
[data-theme="light"] .admin-tabs button:hover {
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
}
[data-theme="light"] .admin-tabs button.active {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: #0b102b !important;
  box-shadow: 0 4px 12px rgba(11, 16, 43, 0.25) !important;
}

/* 라이트 테마: 마이페이지 탭 버튼 */
[data-theme="light"] .mypage-tabs button {
  color: #475569 !important;
  font-weight: 750 !important;
}
[data-theme="light"] .mypage-tabs button.active {
  background: #0b102b !important;
  color: #ffffff !important;
  border-color: #0b102b !important;
}

/* 라이트 테마: 관리자 및 파트너 심사 액션 버튼 */
[data-theme="light"] .review-actions button:not(:disabled),
[data-theme="light"] .settlement-actions button:not(:disabled),
[data-theme="light"] .manage-actions button:not(:disabled) {
  font-weight: 800 !important;
}



/* ==========================================================================
   에스크로 재무 관제실: 차트 상단 4대 핀테크 하이라이트 카드 프리미엄 스타일
   ========================================================================== */
.admin-finance-card {
  position: relative;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.admin-finance-card:hover {
  transform: translateY(-4px);
}

/* 상단 라벨 & 뱃지 행 */
.fin-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.fin-card-label-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fin-card-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.fin-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.fin-card-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: -0.2px;
}

/* 카드 본문 수치 */
.fin-card-body {
  display: flex;
  flex-direction: column;
}

.fin-card-value {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.fin-card-value .unit {
  font-size: 0.95rem;
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.85;
}

/* 카드 하단 보조 설명 */
.fin-card-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.sub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  display: inline-block;
}
.sub-dot.dot-cyan { background: #2dd4bf; }
.sub-dot.dot-purple { background: #a78bfa; }
.sub-dot.dot-green { background: #10b981; }

/* --------------------------------------------------------------------------
   [라이트 테마] 차트 상단 카드: 화사하고 산뜻한 화이트 & 파스텔 핀테크 카드
   -------------------------------------------------------------------------- */
[data-theme="light"] .admin-finance-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .admin-finance-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .fin-card-icon {
  background: #f1f5f9;
}

[data-theme="light"] .fin-card-label {
  color: #475569 !important;
}

[data-theme="light"] .fin-card-value {
  color: #0b102b !important;
}

[data-theme="light"] .fin-card-value.val-cyan {
  color: #0284c7 !important;
}

[data-theme="light"] .fin-card-value.val-purple {
  color: #7c3aed !important;
}

[data-theme="light"] .fin-card-value.val-green {
  color: #059669 !important;
}

[data-theme="light"] .fin-card-sub {
  color: #64748b !important;
}

[data-theme="light"] .fin-card-badge.badge-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

[data-theme="light"] .fin-card-badge.badge-cyan {
  background: #f0fdfa !important;
  color: #0d9488 !important;
  border: 1px solid #99f6e4 !important;
}

[data-theme="light"] .fin-card-badge.badge-purple {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #e9d5ff !important;
}

[data-theme="light"] .fin-card-badge.badge-green {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

/* --------------------------------------------------------------------------
   [다크 테마] 차트 상단 카드: 깊이감 있는 딥 글래스 & 은은한 네온 포인트
   -------------------------------------------------------------------------- */
[data-theme="dark"] .admin-finance-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .admin-finance-card:hover {
  border-color: rgba(60, 194, 210, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(60, 194, 210, 0.15) !important;
}

[data-theme="dark"] .fin-card-icon {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .fin-card-label {
  color: #94a3b8 !important;
}

[data-theme="dark"] .fin-card-value {
  color: #ffffff !important;
}

[data-theme="dark"] .fin-card-value.val-cyan {
  color: #3cc2d2 !important;
}

[data-theme="dark"] .fin-card-value.val-purple {
  color: #c084fc !important;
}

[data-theme="dark"] .fin-card-value.val-green {
  color: #34d399 !important;
}

[data-theme="dark"] .fin-card-sub {
  color: #94a3b8 !important;
}

[data-theme="dark"] .fin-card-badge.badge-blue {
  background: rgba(56, 189, 248, 0.14) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .fin-card-badge.badge-cyan {
  background: rgba(45, 212, 191, 0.14) !important;
  color: #2dd4bf !important;
  border: 1px solid rgba(45, 212, 191, 0.3) !important;
}

[data-theme="dark"] .fin-card-badge.badge-purple {
  background: rgba(167, 139, 250, 0.14) !important;
  color: #c084fc !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

[data-theme="dark"] .fin-card-badge.badge-green {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* 상단 ops-grid 관리자 카드 가독성 보강 */
[data-theme="light"] .ops-grid article {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .ops-grid article span {
  color: #64748b !important;
}

[data-theme="light"] .ops-grid article b {
  color: #0b102b !important;
}

[data-theme="light"] .ops-grid article small {
  color: #475569 !important;
}

/* ==========================================================================
   [FEATURE 1] 각 페이지 검색창 입력박스(Search Input Box) 프리미엄 디자인 시스템
   - 메인 히어로 검색창 (.hero-market-search, .hero-input)
   - 통합 검색바 (.unified-search-bar input)
   - 관리자 회원 검색창 (.admin-toolbar input[type="search"])
   - 전역 텍스트 인풋 & 셀렉트 박스
   ========================================================================== */

/* 1. 메인 히어로 및 서비스 목록 검색창 (.hero-market-search) */
.hero-market-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-market-search .hero-input-wrap {
  flex: 1 !important;
  position: relative !important;
}

.hero-market-search .hero-input {
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.hero-market-search .hero-select {
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.hero-market-search .hero-search-btn {
  padding: 12px 26px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. 라이트 테마: 검색창 입력박스 럭셔리 비주얼 */
[data-theme="light"] .hero-market-search {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .hero-market-search:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.16), 0 8px 28px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .hero-input {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0b102b !important;
}

[data-theme="light"] .hero-input:focus {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="light"] .hero-input::placeholder {
  color: #64748b !important;
}

[data-theme="light"] .hero-select {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0b102b !important;
}

[data-theme="light"] .hero-select:focus {
  border-color: #0284c7 !important;
  background: #ffffff !important;
}

[data-theme="light"] .hero-search-btn {
  background: #0b102b !important;
  color: #ffffff !important;
  border: 1.5px solid #0b102b !important;
  box-shadow: 0 4px 12px rgba(11, 16, 43, 0.25) !important;
}

[data-theme="light"] .hero-search-btn:hover {
  background: #171f69 !important;
  border-color: #171f69 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(11, 16, 43, 0.35) !important;
}

/* 3. 다크 테마: 검색창 입력박스 럭셔리 비주얼 */
[data-theme="dark"] .hero-market-search {
  background: rgba(16, 23, 68, 0.85) !important;
  border: 1.5px solid rgba(60, 194, 210, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .hero-market-search:focus-within {
  border-color: #3cc2d2 !important;
  box-shadow: 0 0 0 4px rgba(60, 194, 210, 0.25), 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .hero-input {
  background: rgba(11, 16, 43, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .hero-input:focus {
  border-color: #3cc2d2 !important;
  box-shadow: 0 0 0 3px rgba(60, 194, 210, 0.2) !important;
}

[data-theme="dark"] .hero-input::placeholder {
  color: #94a9c9 !important;
}

[data-theme="dark"] .hero-select {
  background: rgba(11, 16, 43, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .hero-search-btn {
  background: #3cc2d2 !important;
  color: #0b102b !important;
  border: 1.5px solid #3cc2d2 !important;
  box-shadow: 0 4px 14px rgba(60, 194, 210, 0.35) !important;
}

[data-theme="dark"] .hero-search-btn:hover {
  background: #5eead4 !important;
  border-color: #5eead4 !important;
  color: #0b102b !important;
  box-shadow: 0 6px 20px rgba(60, 194, 210, 0.55) !important;
}

/* ==========================================================================
   [FEATURE 1-B] 전 페이지 공통 캡슐형 통합 검색바 (.unified-search-bar) 디자인 시스템
   - 적용 대상: requests.html, partners.html, engineers.html, orders.html, admin-disputes.html
   - 사각 회색 테두리 완전 제거 및 미려한 캡슐형(border-radius: 9999px) 디자인
   ========================================================================== */

.unified-search-bar {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  border-radius: 9999px !important;
  padding: 5px 6px 5px 22px !important;
  gap: 12px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

/* 라이트 테마: 통합 검색바 */
[data-theme="light"] .unified-search-bar,
.unified-search-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .unified-search-bar:focus-within,
.unified-search-bar:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.16), 0 8px 24px rgba(15, 23, 42, 0.1) !important;
}

/* 다크 테마: 통합 검색바 */
[data-theme="dark"] .unified-search-bar {
  background: rgba(16, 23, 68, 0.9) !important;
  border: 1.5px solid rgba(60, 194, 210, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .unified-search-bar:focus-within {
  border-color: #3cc2d2 !important;
  box-shadow: 0 0 0 4px rgba(60, 194, 210, 0.25), 0 8px 28px rgba(0, 0, 0, 0.5) !important;
}

/* 검색 아이콘 */
.unified-search-bar .search-icon {
  font-size: 17px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  color: #64748b !important;
}

[data-theme="dark"] .unified-search-bar .search-icon {
  color: #3cc2d2 !important;
  opacity: 0.95 !important;
}

/* 검색 입력창 - 기존 글로벌 테두리 및 배경 무효화 */
.unified-search-bar input {
  flex: 1 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

.unified-search-bar input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

[data-theme="dark"] .unified-search-bar input {
  color: #f8fafc !important;
}

.unified-search-bar input::placeholder {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .unified-search-bar input::placeholder {
  color: #94a9c9 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 검색 버튼 */
.unified-search-bar .search-submit-btn {
  height: 42px !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  letter-spacing: -0.2px !important;
  cursor: pointer !important;
  border: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  /* [디자인 통일성 개선] 어두운 무채색 차콜 대신 기본/라이트 모드에서 주위와 조화로운 딥 시안/블루 적용 */
  background: linear-gradient(135deg, #0098a6 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 152, 166, 0.25) !important;
}

.unified-search-bar .search-submit-btn:hover {
  background: linear-gradient(135deg, #00838f 0%, #0369a1 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 152, 166, 0.35) !important;
}

.unified-search-bar .search-submit-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

[data-theme="dark"] .unified-search-bar .search-submit-btn {
  background: #3cc2d2 !important;
  color: #0b102b !important;
  box-shadow: 0 2px 10px rgba(60, 194, 210, 0.35) !important;
}

[data-theme="dark"] .unified-search-bar .search-submit-btn:hover {
  background: #5eead4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(60, 194, 210, 0.55) !important;
}

[data-theme="dark"] .unified-search-bar .search-submit-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* 관리자 회원 툴바 검색창 (.admin-toolbar label) 캡슐화 디자인 */
.admin-toolbar label {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

[data-theme="dark"] .admin-toolbar label {
  background: rgba(16, 23, 68, 0.85) !important;
  border-color: rgba(60, 194, 210, 0.3) !important;
}

.admin-toolbar label:focus-within {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

[data-theme="dark"] .admin-toolbar label:focus-within {
  border-color: #3cc2d2 !important;
  box-shadow: 0 0 0 3px rgba(60, 194, 210, 0.25) !important;
}

.admin-toolbar label input[type="search"] {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 34px !important;
}

.admin-toolbar label input[type="search"]:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ==========================================================================
   [FEATURE 2] 테마별 절대 고대비 버튼 시인성 무결성 시스템
   - 라이트 모드: 어두운 배경 버튼은 반드시 순백색(#ffffff) 글자, 밝은 버튼은 짙은 네이비(#0b102b) 글자
   - 다크 모드: 밝은 배경 버튼은 반드시 짙은 네이비(#0b102b) 글자, 어두운 버튼은 순백색(#ffffff) 글자
   ========================================================================== */

/* --- 1. 라이트 테마: 주 액션 버튼 ➔ 반투명 소프트 로열 블루 틴트 (1px 테두리) --- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .primary-action,
[data-theme="light"] button.primary,
[data-theme="light"] .banner-primary-btn,
[data-theme="light"] .hero-search-btn,
[data-theme="light"] .search-submit-btn,
[data-theme="light"] .admin-tabs button.active,
[data-theme="light"] .mypage-tabs button.active,
[data-theme="light"] .activity-tabs button.active,
[data-theme="light"] .request-tabs button.active {
  background: rgba(239, 246, 255, 0.88) !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  border: 1px solid #3b82f6 !important;
  border-radius: var(--radius-sm, 3px) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .btn-primary *,
[data-theme="light"] .primary-action *,
[data-theme="light"] button.primary *,
[data-theme="light"] .admin-tabs button.active *,
[data-theme="light"] .mypage-tabs button.active * {
  color: #1d4ed8 !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .primary-action:hover,
[data-theme="light"] button.primary:hover,
[data-theme="light"] .banner-primary-btn:hover,
[data-theme="light"] .hero-search-btn:hover,
[data-theme="light"] .search-submit-btn:hover {
  background: rgba(219, 234, 254, 0.95) !important;
  color: #1e40af !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* --- 2. 라이트 테마: 성공 및 안심 버튼 ➔ 반투명 소프트 에메랄드 틴트 (1px 테두리) --- */
[data-theme="light"] .btn-success,
[data-theme="light"] .btn-approve,
[data-theme="light"] .btn-resolve,
[data-theme="light"] .buy-button,
[data-theme="light"] button.success {
  background: rgba(236, 253, 245, 0.88) !important;
  color: #047857 !important;
  font-weight: 800 !important;
  border: 1px solid #10b981 !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .btn-success:hover,
[data-theme="light"] .btn-approve:hover,
[data-theme="light"] .btn-resolve:hover,
[data-theme="light"] .buy-button:hover,
[data-theme="light"] button.success:hover {
  background: rgba(209, 250, 229, 0.95) !important;
  color: #065f46 !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* --- 3. 라이트 테마: 경고 및 삭제 버튼 ➔ 반투명 소프트 로즈 레드 틴트 (1px 테두리) --- */
[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-delete,
[data-theme="light"] .btn-reject,
[data-theme="light"] .btn-cancel,
[data-theme="light"] .cancel,
[data-theme="light"] .danger-link,
[data-theme="light"] button.danger,
[data-theme="light"] button.cancel {
  background: rgba(254, 242, 242, 0.88) !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
  border: 1px solid #f87171 !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .btn-danger:hover,
[data-theme="light"] .btn-delete:hover,
[data-theme="light"] .btn-reject:hover,
[data-theme="light"] .btn-cancel:hover,
[data-theme="light"] button.danger:hover,
[data-theme="light"] button.cancel:hover,
[data-theme="light"] .danger-link:hover {
  background: rgba(254, 226, 226, 0.95) !important;
  color: #b91c1c !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* --- 4. 라이트 테마: 주의 및 보류 버튼 ➔ 반투명 앰버 옐로우 틴트 + 약간 진한 1px 테두리 --- */
[data-theme="light"] .btn-warning,
[data-theme="light"] .btn-hold,
[data-theme="light"] .btn-pause,
[data-theme="light"] .btn-review,
[data-theme="light"] .btn-arbitration,
[data-theme="light"] button.warning {
  background: rgba(255, 251, 235, 0.88) !important;
  color: #b45309 !important;
  font-weight: 800 !important;
  border: 1px solid #d97706 !important; /* 주의를 위해 테두리 약간 진하게 유지 */
  border-radius: 9px !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .btn-warning:hover,
[data-theme="light"] .btn-hold:hover,
[data-theme="light"] .btn-pause:hover,
[data-theme="light"] .btn-review:hover,
[data-theme="light"] button.warning:hover {
  background: rgba(254, 243, 199, 0.95) !important;
  color: #92400e !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.22) !important;
  transform: translateY(-1px) !important;
}

/* --- 5. 라이트 테마: 보조 버튼 (1px 슬레이트 테두리) --- */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .secondary-action,
[data-theme="light"] button.secondary,
[data-theme="light"] .admin-hero-actions button,
[data-theme="light"] .admin-tabs button:not(.active),
[data-theme="light"] .request-tabs button:not(.active) {
  background: rgba(248, 250, 252, 0.88) !important;
  color: #475569 !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .secondary-action:hover,
[data-theme="light"] button.secondary:hover,
[data-theme="light"] .admin-hero-actions button:hover,
[data-theme="light"] .admin-tabs button:not(.active):hover {
  background: rgba(241, 245, 249, 0.95) !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* --- 6. 라이트 테마: 비활성 버튼 (차분한 그레이) --- */
[data-theme="light"] button:disabled,
[data-theme="light"] button.disabled,
[data-theme="light"] a.disabled,
[data-theme="light"] [disabled] {
  background: rgba(241, 245, 249, 0.8) !important;
  color: #94a3b8 !important;
  border: 1px solid #e2e8f0 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

/* --- 7. 다크 테마: 주 액션 버튼 ➔ 반투명 소프트 블루/스카이 틴트 (1px 테두리) --- */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .primary-action,
[data-theme="dark"] button.primary,
[data-theme="dark"] .hero-search-btn,
[data-theme="dark"] .search-submit-btn,
[data-theme="dark"] .admin-tabs button.active,
[data-theme="dark"] .mypage-tabs button.active,
[data-theme="dark"] .activity-tabs button.active,
[data-theme="dark"] .request-tabs button.active,
[data-theme="dark"] .cat-chip.active,
[data-theme="dark"] .admin-gate .primary-action {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid #38bdf8 !important;
  border-radius: var(--radius-sm, 3px) !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .btn-primary *,
[data-theme="dark"] .primary-action *,
[data-theme="dark"] button.primary *,
[data-theme="dark"] .admin-tabs button.active *,
[data-theme="dark"] .mypage-tabs button.active * {
  color: #38bdf8 !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .primary-action:hover,
[data-theme="dark"] button.primary:hover,
[data-theme="dark"] .hero-search-btn:hover,
[data-theme="dark"] .search-submit-btn:hover {
  background: rgba(56, 189, 248, 0.28) !important;
  border-color: #7dd3fc !important;
  color: #e0f2fe !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* --- 8. 다크 테마: 성공 및 안심 버튼 ➔ 반투명 에메랄드 틴트 (1px 테두리) --- */
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-approve,
[data-theme="dark"] .btn-resolve,
[data-theme="dark"] .buy-button,
[data-theme="dark"] button.success {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34d399 !important;
  border: 1px solid #10b981 !important;
  border-radius: 9px !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-approve:hover,
[data-theme="dark"] .btn-resolve:hover,
[data-theme="dark"] .buy-button:hover,
[data-theme="dark"] button.success:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #34d399 !important;
  color: #ecfdf5 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* --- 9. 다크 테마: 경고 및 삭제 버튼 ➔ 반투명 로즈 레드 틴트 (1px 테두리) --- */
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-delete,
[data-theme="dark"] .btn-reject,
[data-theme="dark"] .btn-cancel,
[data-theme="dark"] .cancel,
[data-theme="dark"] .danger-link,
[data-theme="dark"] button.danger,
[data-theme="dark"] button.cancel {
  background: rgba(244, 63, 94, 0.16) !important;
  color: #fb7185 !important;
  border: 1px solid #f43f5e !important;
  border-radius: 9px !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-delete:hover,
[data-theme="dark"] .btn-reject:hover,
[data-theme="dark"] .btn-cancel:hover,
[data-theme="dark"] button.danger:hover,
[data-theme="dark"] button.cancel:hover,
[data-theme="dark"] .danger-link:hover {
  background: rgba(244, 63, 94, 0.28) !important;
  border-color: #fb7185 !important;
  color: #fff1f2 !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* --- 10. 다크 테마: 주의 및 보류 버튼 ➔ 반투명 앰버 옐로우 틴트 + 약간 진한 1px 테두리 --- */
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-hold,
[data-theme="dark"] .btn-pause,
[data-theme="dark"] .btn-review,
[data-theme="dark"] .btn-arbitration,
[data-theme="dark"] button.warning {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid #f59e0b !important; /* 주의를 위해 진한 앰버 1px 보더 */
  border-radius: 9px !important;
  font-weight: 850 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .btn-warning:hover,
[data-theme="dark"] .btn-hold:hover,
[data-theme="dark"] .btn-pause:hover,
[data-theme="dark"] .btn-review:hover,
[data-theme="dark"] button.warning:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: #fbbf24 !important;
  color: #fef3c7 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* --- 11. 다크 테마: 보조 버튼 (1px 슬레이트 테두리) --- */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .secondary-action,
[data-theme="dark"] button.secondary,
[data-theme="dark"] .admin-hero-actions button,
[data-theme="dark"] .admin-tabs button:not(.active),
[data-theme="dark"] .request-tabs button:not(.active) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .secondary-action:hover,
[data-theme="dark"] button.secondary:hover,
[data-theme="dark"] .admin-hero-actions button:hover,
[data-theme="dark"] .admin-tabs button:not(.active):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* --- 12. 다크 테마: 비활성 버튼 (차분한 그레이) --- */
[data-theme="dark"] button:disabled,
[data-theme="dark"] button.disabled,
[data-theme="dark"] a.disabled,
[data-theme="dark"] [disabled] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #64748b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
}

/* ==============================================================================
 * 5. 헤더 우측 3대 CTA 버튼 (시연투어, 엔지니어입점, 견적요청하기) 프리미엄 스타일
 * ============================================================================== */
.nav-bar-cta {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 15px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* 1. 시연 투어 버튼 */
.nav-btn-tour {
  background: rgba(60, 194, 210, 0.12) !important;
  border: 1.5px solid rgba(60, 194, 210, 0.35) !important;
  color: #3cc2d2 !important;
  font-weight: 750 !important;
}
.nav-btn-tour:hover {
  background: rgba(60, 194, 210, 0.22) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .nav-btn-tour {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .nav-btn-tour:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* 2. 엔지니어 입점 버튼 */
.nav-btn-partner {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
  font-weight: 750 !important;
}
.nav-btn-partner:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .nav-btn-partner {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .nav-btn-partner:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* 3. + 견적 요청하기 버튼 (헤더 브랜드 로열 퍼플 #7c3aed 일원화) */
.nav-btn-request {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}
.nav-btn-request:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5) !important;
}
/* [라이트 테마 헤더 CTA] 브랜드 로열 퍼플 테마 일원화 */
[data-theme="light"] .nav-btn-request {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .nav-btn-request:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%) !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 14px rgba(124, 58, 237, 0.4) !important;
}

/* ==============================================================================
 * 6. 헤더 실시간 알림 레이어 팝업 전용 스타일
 * ============================================================================== */
.nav-notification-dropdown {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: -8px !important;
  width: 380px !important;
  max-width: calc(100vw - 20px) !important;
  background: rgba(16, 23, 68, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(60, 194, 210, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

[data-theme="light"] .nav-notification-dropdown {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 44px -10px rgba(15, 23, 42, 0.16), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.nav-noti-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(60, 194, 210, 0.15) !important;
  background: rgba(11, 16, 43, 0.6) !important;
}
[data-theme="light"] .nav-noti-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.nav-noti-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text-main, #e2e8f0) !important;
  letter-spacing: -0.02em !important;
}
[data-theme="light"] .nav-noti-header-title {
  color: #1e293b !important;
}
.nav-noti-unread-tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  background: rgba(60, 194, 210, 0.16) !important;
  color: #3cc2d2 !important;
  border: 1px solid rgba(60, 194, 210, 0.3) !important;
}
[data-theme="light"] .nav-noti-unread-tag {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}
.nav-noti-mark-read-btn {
  background: transparent !important;
  border: 1px solid rgba(60, 194, 210, 0.28) !important;
  color: #3cc2d2 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.nav-noti-mark-read-btn:hover {
  background: rgba(60, 194, 210, 0.15) !important;
  border-color: #3cc2d2 !important;
}
[data-theme="light"] .nav-noti-mark-read-btn {
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  background: #ffffff !important;
}
[data-theme="light"] .nav-noti-mark-read-btn:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
}

.nav-noti-list {
  max-height: 350px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
}
.nav-noti-item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
  transition: background 0.16s ease, transform 0.12s ease !important;
  cursor: pointer !important;
}
.nav-noti-item:last-child {
  border-bottom: none !important;
}
.nav-noti-item:hover {
  background: rgba(60, 194, 210, 0.08) !important;
}
[data-theme="light"] .nav-noti-item {
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .nav-noti-item:hover {
  background: #f8fafc !important;
}
.nav-noti-item.unread {
  background: rgba(60, 194, 210, 0.05) !important;
}
[data-theme="light"] .nav-noti-item.unread {
  background: #f0fdfa !important;
}

.nav-noti-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: rgba(60, 194, 210, 0.12) !important;
  border: 1px solid rgba(60, 194, 210, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
[data-theme="light"] .nav-noti-icon-box {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.nav-noti-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.nav-noti-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 4px !important;
}
.nav-noti-item-title {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: var(--text-main, #e2e8f0) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
[data-theme="light"] .nav-noti-item-title {
  color: #1e293b !important;
}
.nav-noti-time {
  font-size: 11px !important;
  color: var(--text-muted, #94a9c9) !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}
[data-theme="light"] .nav-noti-time {
  color: #64748b !important;
}
.nav-noti-msg {
  font-size: 12px !important;
  color: var(--text-muted, #94a9c9) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
[data-theme="light"] .nav-noti-msg {
  color: #475569 !important;
}
.nav-noti-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  background: #3cc2d2 !important;
  margin-top: 6px !important;
  box-shadow: 0 0 8px rgba(60, 194, 210, 0.7) !important;
}
[data-theme="light"] .nav-noti-dot {
  background: #0284c7 !important;
  box-shadow: 0 0 6px rgba(2, 132, 199, 0.4) !important;
}

.nav-noti-footer {
  padding: 14px 20px !important;
  border-top: 1px solid rgba(60, 194, 210, 0.15) !important;
  background: rgba(11, 16, 43, 0.4) !important;
  display: flex !important;
  justify-content: center !important;
}
[data-theme="light"] .nav-noti-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
.nav-noti-view-all {
  font-size: 12.5px !important;
  color: var(--text-main, #e2e8f0) !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.nav-noti-view-all:hover {
  background: rgba(60, 194, 210, 0.12) !important;
  color: #3cc2d2 !important;
}
[data-theme="light"] .nav-noti-view-all {
  color: #334155 !important;
}
[data-theme="light"] .nav-noti-view-all:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==============================================================================
 * 35. 시연 투어 모달 고대비 버튼 및 액션 스타일 (Demo Tour Modal Styles)
 * - 라이트 모드: 소프트 다크 차콜(#1e293b) 배경에 선명한 화이트(#ffffff) 글자색을 적용하여 높은 가독성 보장
 * - 다크 모드: 시그니처 시안(#3cc2d2) 배경에 짙은 네이비(#0b102b) 글자색 적용
 * - 닫기 버튼: 테두리 및 텍스트 대비 확보
 * ============================================================================== */
.demo-tour-step-btn {
  display: block !important;
  text-align: center !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: #3cc2d2 !important;
  color: #0b102b !important;
  box-shadow: 0 2px 8px rgba(60, 194, 210, 0.25) !important;
}
.demo-tour-step-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(60, 194, 210, 0.4) !important;
  filter: brightness(1.05) !important;
}

/* [라이트 테마 데모 투어 버튼] 어두운 차콜(#1e293b) 대신 시인성 높고 우아한 브랜드 시안/블루 그라데이션 적용 */
[data-theme="light"] .demo-tour-step-btn {
  background: linear-gradient(135deg, #0098a6 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 152, 166, 0.25) !important;
}
[data-theme="light"] .demo-tour-step-btn:hover {
  background: linear-gradient(135deg, #00838f 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 152, 166, 0.35) !important;
}

/* 시연 투어 모달 닫기 버튼 */
.demo-tour-close-btn {
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 1.5px solid rgba(60, 194, 210, 0.3) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}
.demo-tour-close-btn:hover {
  border-color: #3cc2d2 !important;
  color: #3cc2d2 !important;
  background: rgba(60, 194, 210, 0.08) !important;
}

[data-theme="light"] .demo-tour-close-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}
[data-theme="light"] .demo-tour-close-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}