/* ══════════════════════════════════════════════════════════════
   PS 특허 자동 출원 — 통합 스타일시트
   KIAM AI 온리원연구소 | 2026
   다크모드 / 라이트모드 듀얼 테마 + 완전 반응형
   ══════════════════════════════════════════════════════════════ */

/* ── 폰트 불러오기 (다른 규칙보다 먼저 선언 필수) ────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');

/* ── CSS 변수 (라이트 모드 기본값) ─────────────────────────── */
:root {
  /* 프라이머리 */
  --primary: #0a1628;
  --primary-light: #1a3a52;
  --primary-rgb: 10, 22, 40;

  /* 액센트 */
  --accent: #1a62e8;        /* 흰 바탕과 5.26:1 (기존 #1e6eff 는 4.06:1 로 모자랐다) */
  --accent-hover: #1a5cd4;
  --accent-light: #e8f0ff;
  --accent-rgb: 26, 98, 232;
  --accent2: #00d4aa;
  --accent2-rgb: 0, 212, 170;

  /* 시맨틱 */
  --success: #15803d;      /* 흰 바탕 4.97:1 — 글자로도 배경으로도 쓰인다 (기존 #22c55e 는 2.28:1) */
  --success-light: #f0fdf4;
  --warning: #b45309;      /* 흰 바탕 5.09:1 (기존 #f59e0b 는 2.15:1) */
  --warning-light: #fefce8;
  --danger: #dc2626;       /* 흰 바탕 4.83:1 (기존 #ef4444 는 3.76:1) */
  --danger-light: #fef2f2;
  --purple: #7c3aed;

  /* 배경 & 표면 */
  --bg: #f0f4ff;
  --bg-alt: #e8edf8;
  --card: #ffffff;
  --card-hover: #fafbff;

  /* 텍스트 */
  --text: #1a2340;
  --text-secondary: #4b5563;
  --text-muted: #586780;    /* 흰 바탕 5.67:1 · 연한 바탕 위에서도 4.7:1 (기존 #6b7a99 는 4.31:1) */
  --text-inverse: #ffffff;

  /* 테두리 */
  --border: #dce4f5;
  --border-light: #eef2fa;
  --border-focus: var(--accent);

  /* 헤더 & 푸터 */
  --header-bg: rgba(255, 255, 255, 0.92);
  --footer-bg: var(--primary);
  --footer-text: #94a3b8;

  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);

  /* 라디우스 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 트랜지션 */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* 폰트 스택 */
  --font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic',
    'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'D2Coding', 'Consolas', monospace;

  /* Z-인덱스 */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;
  /* ── 폰트 크기 기준 (모바일 가독성: 11px 이하 금지, 최소 13px) ── */  --fs-xs: 13px;  --fs-sm: 13px;  --fs-base: 14px;  --fs-md: 15px;  --fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 20px;  --fs-3xl: 22px;  --fs-4xl: 26px;  --fs-5xl: 30px;  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-extrabold: 800;  --fw-black: 900;
}

/* ── 다크 모드 ─────────────────────────────────────────────── */
[data-theme='dark'] {
  --primary: #e6edf3;
  --primary-light: #c9d8e8;
  --primary-rgb: 230, 237, 243;

  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-light: rgba(88, 166, 255, 0.1);
  --accent-rgb: 88, 166, 255;
  --accent2: #3fb950;
  --accent2-rgb: 63, 185, 80;

  --success: #3fb950;
  --success-light: rgba(63, 185, 80, 0.12);
  --warning: #d29922;
  --warning-light: rgba(210, 153, 34, 0.12);
  --danger: #f85149;
  --danger-light: rgba(248, 81, 73, 0.12);

  --bg: #0d1117;
  --bg-alt: #161b22;
  --card: #161b22;
  --card-hover: #1c2333;

  --text: #e6edf3;
  --text-secondary: #b0b8c4;
  --text-muted: #7d8590;
  --text-inverse: #0d1117;

  --border: #30363d;
  --border-light: #21262d;
  --border-focus: var(--accent);

  --header-bg: rgba(13, 17, 23, 0.92);
  --footer-bg: #0a0e13;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}


/* ── 글로벌 리셋 ────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-family);
  font-size: 16px;              /* 문서 기준 폰트(가독성 기준선) */
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  transition: background var(--transition-slow), color var(--transition-slow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

/* 마우스를 올렸을 때 글자색을 바꾸는 것은 «본문 속 링크» 에만 맞는 일이다.
   단추처럼 생긴 링크는 제 바탕색이 있어서, 글자까지 같은 색이 되면 사라진다.
   (실제로 「문서 만들기」·「자세히보기」 단추가 1.00:1 로 안 보였다) */
/* :where() 안은 «세기(명시도)» 가 0 이다 — 이것이 중요하다.
   :not() 을 그냥 쓰면 세기가 올라가, 원래 잘 되어 있던 규칙(푸터 링크의 흰 글자 등)
   까지 덮어써 버린다. 좁히려다 남의 자리를 빼앗는 셈이다. */
a:hover:not(:where([class*="btn"], [class*="cta"], [class*="chip"], .oneid-btn)) {
  color: var(--accent-hover);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── 사이트 레이아웃 ─────────────────────────────────────────── */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

/* ── 헤더 ────────────────────────────────────────────────────── */
.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 68px;
  gap: 24px;
}

/* 로고 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.logo:hover {
  opacity: 0.85;
}

/* ── 로고 다이아몬드 아이콘 ── */
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
}

.logo-icon svg {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(37,99,235,0.35));
  transition: filter 0.25s;
}

.logo:hover .logo-icon svg {
  filter: drop-shadow(0 4px 12px rgba(37,99,235,0.55));
}

[data-theme='dark'] .logo-icon svg {
  filter: drop-shadow(0 2px 8px rgba(59,130,246,0.5));
}

[data-theme='dark'] .logo:hover .logo-icon svg {
  filter: drop-shadow(0 4px 14px rgba(96,165,250,0.7));
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.logo-text em {
  color: var(--accent);
  font-style: normal;
}

/* 네비게이션 */
.main-nav {
  display: flex;
  gap: 2px;
  flex: 1;
}

.nav-link {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.nav-link.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}

/* 무료 배지 (메뉴 항목용) */
.nav-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .2px;
  vertical-align: middle;
}

/* 헤더 액션 영역 */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* 테마 토글 버튼 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all var(--transition);
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: rotate(15deg);
}

/* 모바일 메뉴 버튼 (WCAG 44x44 터치 타깃) */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition);
}

.mobile-menu-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* 모바일 네비게이션 오버레이 */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  transition: opacity var(--transition);
}

.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
}

/* 모바일 사이드 네비 */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: var(--z-modal);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: right var(--transition-slow);
  overflow-y: auto;
}

.mobile-nav-panel.active {
  right: 0;
}

.mobile-nav-panel .nav-link {
  padding: 12px 16px;
  font-size: 16px;
  color: var(--text);
}

.mobile-nav-panel .mobile-nav-separator {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.mobile-nav-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.mobile-nav-close:hover {
  background: var(--bg-alt);
  color: var(--text);
}

/* ── 버튼 시스템 ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.2px;
  position: relative;
  overflow: hidden;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.btn:active::after {
  opacity: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  filter: brightness(0.9);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
/* 보조 버튼 (인증번호 받기 / 확인 등) - 라이트/다크 테마 모두 대응 */
.btn-secondary {
  background: var(--bg-alt);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.btn-secondary:disabled {
  color: var(--text-muted);
}
[data-theme='dark'] .btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
[data-theme='dark'] .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  filter: brightness(0.9);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  border-color: transparent;
}

.btn-accent:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

[data-theme='dark'] .btn-accent {
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.btn-lg {
  padding: 15px 34px;
  font-size: 16px;
  border-radius: var(--radius);
}

.btn-sm {
  padding: 10px 24px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 로딩 스피너 */
.btn .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── 폼 시스템 ───────────────────────────────────────────────── */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #94a3b8;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  transition: all var(--transition);
  line-height: 1.5;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-glow);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-input.success {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

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

.form-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 5px;
}

.form-error-msg {
  font-size: 13px;
  color: var(--danger);
  margin-top: 5px;
  display: none;
  align-items: center;
  gap: 4px;
}

.form-error-msg.visible {
  display: flex;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 비밀번호 표시/숨기기 */
.password-wrapper {
  position: relative;
}

.password-wrapper .form-input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.password-toggle:hover {
  color: var(--text);
}

/* ── 카드 시스템 ─────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.card-accent {
  border-left: 4px solid var(--accent);
}

.card-clickable {
  cursor: pointer;
}

.card-clickable:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* ── 알림 / 경고 시스템 ──────────────────────────────────────── */
.alert {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  transition: all var(--transition);
}

.alert-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-close {
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.6;
  font-size: 16px;
  padding: 2px;
  background: none;
  border: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.alert-close:hover {
  opacity: 1;
}

.alert-success {
  background: var(--success-light);
  border-left: 4px solid var(--success);
  color: var(--success);
}

.alert-warning {
  background: var(--warning-light);
  border-left: 4px solid var(--warning);
  color: var(--warning);
}

.alert-danger {
  background: var(--danger-light);
  border-left: 4px solid var(--danger);
  color: var(--danger);
}

.alert-info {
  background: var(--accent-light);
  border-left: 4px solid var(--accent);
  color: var(--accent);
}

/* ── 토스트 알림 ─────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  width: calc(100% - 40px);
  pointer-events: none;
}

.toast {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toastSlideIn 0.3s ease forwards;
  border: 1px solid;
}

.toast.removing {
  animation: toastSlideOut 0.25s ease forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(60px);
  }
}

.toast-success {
  background: var(--success-light);
  color: var(--success);
  border-color: var(--success);
}

.toast-error {
  background: var(--danger-light);
  color: var(--danger);
  border-color: var(--danger);
}

.toast-warning {
  background: var(--warning-light);
  color: var(--warning);
  border-color: var(--warning);
}

.toast-info {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── 히어로 섹션 ──────────────────────────────────────────────── */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  gap: 60px;
}

.hero-content {
  flex: 1;
  min-width: 0;
}

.hero-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

.hero-visual {
  flex-shrink: 0;
}

.hero-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--text-inverse);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  text-align: center;
  box-shadow: 0 25px 70px rgba(10, 22, 40, 0.25);
  width: 320px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(10, 22, 40, 0.35);
}

.hero-card-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.hero-card-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.hero-card-desc {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.7;
}

/* ── 섹션 공통 ───────────────────────────────────────────────── */
.section-title {
  text-align: center;
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--text);
  letter-spacing: -0.5px;
  word-break: keep-all;
}

.section-subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 36px;
  word-break: keep-all;
}

.features,
.how-it-works,
.pricing-section,
.cta-section,
.auth-section,
.dashboard-section,
.diagnosis-section,
.result-section,
.docs-section,
.admin-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

/* ── 특징 카드 그리드 ─────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--border);
  text-align: center;
  transition: all var(--transition);
  position: relative;
}

.feature-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 18px;
  display: inline-block;
  transition: transform var(--transition);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

.feature-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.feature-badge {
  display: inline-block;
  padding: 5px 14px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* ── 이용 방법 흐름 ──────────────────────────────────────────── */
.steps-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.flow-step {
  text-align: center;
  padding: 28px 24px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-width: 180px;
  flex: 1;
  max-width: 220px;
  transition: all var(--transition);
  cursor: default;
}

.flow-step:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
  transition: transform var(--transition);
}

.flow-step:hover .flow-num {
  transform: scale(1.1);
}

.flow-step h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.flow-step p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

.flow-arrow {
  font-size: 26px;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── CTA 섹션 ────────────────────────────────────────────────── */
.cta-section {
  text-align: center;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent)));
  border-radius: var(--radius-xl);
  color: var(--text-inverse);
  padding: 64px 32px;
  margin: 0 auto 80px;
  max-width: 1200px;
  box-shadow: var(--shadow-lg);
}

.cta-section h2 {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 32px;
  line-height: 1.85;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section .btn {
  font-size: 16px;
  padding: 14px 36px;
}

/* ── 인증 페이지 (로그인 / 회원가입) ───────────────────────────── */
.auth-section {
  max-width: 500px;
  margin: 60px auto;
  padding: 0 24px;
}

.auth-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.auth-header {
  text-align: center;
  margin-bottom: 36px;
}

.auth-header .auth-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.auth-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.auth-header p {
  font-size: 14px;
  color: var(--text-muted);
}

.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form .form-label {
  font-size: 13px;
  font-weight: 600;
}

.form-actions {
  margin-top: 28px;
}

.form-actions .btn {
  width: 100%;
  padding: 13px 24px;
  font-size: 16px;
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-links a {
  color: var(--accent);
  font-weight: 600;
}

.auth-links .divider {
  color: var(--border);
}

.auth-alt {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-alt a {
  color: var(--accent);
  font-weight: 600;
}

/* ── SNS 간편 로그인/가입 ──────────────────────────────────────── */
.sns-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.sns-btn:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.sns-btn:active {
  transform: translateY(0);
}

.sns-btn .sns-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 구글: 흰 배경 + 테두리 */
.sns-btn.sns-google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
}
[data-theme='dark'] .sns-btn.sns-google {
  background: #ffffff;
  color: #3c4043;
}

/* 카카오: 브랜드 노란색 */
.sns-btn.sns-kakao {
  background: #fee500;
  color: #191600;
  border-color: #fee500;
}
.sns-btn.sns-kakao:hover {
  background: #fdd835;
  border-color: #fdd835;
}

.sns-help {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* "또는" 구분선 */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 20px 0 22px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  padding: 0 14px;
  white-space: nowrap;
}

/* ── 요금제 섹션 ──────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  transition: all var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow), var(--shadow);
  transform: scale(1.03);
}

.pricing-card.featured:hover {
  transform: scale(1.03) translateY(-6px);
}

.pricing-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--accent);
  color: white;
  margin-bottom: 16px;
}

.pricing-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.pricing-price {
  font-size: 42px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 4px;
}

.pricing-price small {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-period {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin-bottom: 28px;
  text-align: left;
  flex: 1;
}

.pricing-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features .check {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-features .cross {
  color: var(--danger);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 진단 페이지 ──────────────────────────────────────────────── */
.ip-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.ip-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--card);
  user-select: none;
}

.ip-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.ip-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--shadow-glow);
}

.ip-card .ip-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.ip-card .ip-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.ip-card .ip-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ip-card-sm: 보호 유형 선택용 소형 카드 */
.ip-card.ip-card-sm {
  padding: 14px 10px 12px;
}
.ip-card.ip-card-sm .ip-icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.ip-card.ip-card-sm .ip-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.ip-card.ip-card-sm .ip-desc {
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.35;
}

/* 업로드 존 */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 52px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg);
  position: relative;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.upload-zone .upload-icon {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
  transition: transform var(--transition);
}

.upload-zone:hover .upload-icon {
  transform: translateY(-6px);
}

.upload-zone .upload-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.upload-zone .upload-hint {
  font-size: 16px;
  color: var(--text-muted);
}

.upload-zone input[type='file'] {
  display: none;
}

/* 진행률 바 */
.progress-bar-wrap {
  background: var(--border-light);
  border-radius: 10px;
  height: 8px;
  margin: 16px 0;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 10px;
  transition: width var(--transition);
  width: 0%;
}

/* 분석 결과 영역 */
.analysis-result {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  margin-top: 24px;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  max-height: 500px;
  overflow-y: auto;
}

/* ── 대시보드 ─────────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 16px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all var(--transition);
  overflow: hidden;
  min-width: 0;
}

.stat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.stat-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-card-icon.blue {
  background: var(--accent-light);
  color: var(--accent);
}

.stat-card-icon.green {
  background: var(--success-light);
  color: var(--success);
}

.stat-card-icon.purple {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple);
}

.stat-card-icon.orange {
  background: var(--warning-light);
  color: var(--warning);
}

.stat-card-body {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.stat-card-body h3 {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-body p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 관리자 탭 ──────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.admin-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.admin-tab:hover {
  color: var(--text);
  background: var(--bg-alt);
}
.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-alt);
}
.admin-tab-content {
  display: none;
}
.admin-tab-content:first-of-type,
.admin-tab-content.active {
  display: block;
}

/* ── 관리자 공통 카드 ─────────────────────────────────────────── */
.doc-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 20px;
}

/* ── 관리자 통계 그리드 ──────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
/* 총 매출 카드 — 2칸 차지하여 절대 잘리지 않도록 */
.stat-card-revenue {
  grid-column: span 2;
}
/* 총 매출 카드 서브 상세 */
.stat-card-revenue-detail {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.stat-card-revenue-detail > div {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.rev-label {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}
.rev-real {
  color: var(--success);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.rev-test {
  color: var(--warning);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.stat-card-icon.cyan {
  background: rgba(6, 182, 212, 0.1);
  color: var(--cyan, #06b6d4);
}
.stat-card-icon.pink {
  background: rgba(236, 72, 153, 0.1);
  color: var(--pink, #ec4899);
}

/* ── 데이터 테이블 ───────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: var(--bg-alt);
}

/* ── 테이블 ──────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead {
  background: var(--bg-alt);
  border-bottom: 2px solid var(--border);
}

th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

tr:hover td {
  background: var(--bg-alt);
}

/* 배지 */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.badge-success {
  background: var(--success-light);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-light);
  color: var(--danger);
}

.badge-info {
  background: var(--accent-light);
  color: var(--accent);
}

/* ── 푸터 ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 48px 24px 32px;
  margin-top: auto;
  transition: background var(--transition-slow);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer-brand .footer-logo {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
  display: block;
}

.footer-brand p {
  font-size: 16px;
  opacity: 0.7;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--footer-text);
  font-size: 16px;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: white;
}

.footer-copy {
  font-size: 13px;
  opacity: 0.6;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

/* ── 유틸리티 클래스 ──────────────────────────────────────────── */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 16px;
}

.mt-3 {
  margin-top: 24px;
}

.mt-4 {
  margin-top: 32px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 8px;
}

.mb-2 {
  margin-bottom: 16px;
}

.mb-3 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 32px;
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 로딩 스켈레톤 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--border-light) 25%,
    var(--border) 50%,
    var(--border-light) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── 가로 스크롤 누수 방지 (모바일 슬라이드 메뉴 등) ─────────── */
/* 주의: html에 overflow-x:hidden을 걸면 position:sticky가 깨짐!
   body에 overflow-x:clip(현대 브라우저) + html은 그대로 두는 패턴 */
html { max-width: 100vw; }
body { overflow-x: clip; max-width: 100vw; }
/* clip 미지원 브라우저(Safari < 16)는 hidden으로 폴백 (sticky 위험은 있으나 가로 스크롤 차단 우선) */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* ── 반응형 디자인 ────────────────────────────────────────────── */

/* 태블릿 (최대 1024px) */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 60px 24px;
    gap: 40px;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-desc {
    max-width: none;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-card {
    width: 280px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 600px;
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: none;
  }

  .pricing-card.featured:hover {
    transform: translateY(-6px);
  }

  .ip-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 모바일 (최대 768px) */
@media (max-width: 768px) {
  .header-inner {
    height: 60px;
    padding: 0 16px;
    gap: 12px;
  }

  .logo-text {
    font-size: 18px;
  }

  .main-nav {
    display: none;
  }

  /* 햄버거 버튼을 헤더 우측 끝으로 밀어냄 */
  .mobile-menu-btn {
    display: flex;
    margin-left: auto;
  }

  /* 모바일: 로그인/회원가입 버튼 숨김 (햄버거 메뉴로 통합) */
  .header-actions { gap: 6px; }
  .header-actions .btn,
  .header-actions .btn.btn-sm {
    display: none;
  }
  /* 휴대폰(768px 이하)에서는 헤더가 좁아 토글을 빼고, 햄버거 메뉴 맨 아래
     '화면 모드' 행에서 제공한다(header.php 의 .mnav-theme-row).
     마이페이지 카드로 대신하던 예전 방식은 로그인해야 닿을 수 있어
     '휴대폰 + 비로그인'이면 테마를 바꿀 방법이 없었다 — 그래서 메뉴로 옮겼다.
     셀렉터가 .header-actions 하위라 햄버거 메뉴 안 토글에는 영향이 없다. */
  .header-actions .theme-toggle-switch {
    display: none !important;
  }
  /* 햄버거 메뉴 하단 '화면 모드' 행 */
  .mnav-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 4px;
  }
  .mnav-theme-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
  }
  /* 마이페이지·관리자 등 아이콘 버튼은 유지 (로그인 사용자 대시보드 진입 경로) */
  /* 비밀번호 토글 터치 타깃 44x44 */
  .password-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* 푸터 링크 터치 영역 확대 */
  .footer-links a {
    padding: 8px 12px;
    display: inline-block;
    min-height: 36px;
  }

  .hero {
    padding: 40px 16px;
    gap: 32px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-card {
    width: 100%;
    max-width: 280px;
    padding: 32px 24px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-card {
    padding: 24px;
  }

  .steps-flow {
    flex-direction: column;
    gap: 12px;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

  .flow-step {
    max-width: none;
    width: 100%;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .ip-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ip-card {
    padding: 16px 12px;
  }

  .auth-card {
    padding: 32px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .cta-section {
    margin: 0 16px 40px;
    padding: 40px 20px;
    border-radius: var(--radius-lg);
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  .section-title {
    font-size: clamp(22px, 6vw, 36px);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 28px;
    line-height: 1.6;
  }

  .features,
  .how-it-works,
  .pricing-section,
  .cta-section,
  .auth-section,
  .dashboard-section,
  .diagnosis-section,
  .result-section,
  .docs-section,
  .admin-section {
    padding: 40px 16px;
  }

  /* ── 모바일 가독성 안전망: 본문성 텍스트 최소 크기 보장 ──
     제목/버튼/배지처럼 의도적으로 크기를 지정하는 요소는 건드리지 않고,
     '읽는 문장' 계열(문단·목록·표·설명) 최소값만 13px로 올린다. */
  body { font-size: 16px; }
  p, li, dd, dt, td, th,
  .text, .desc, .description, .help, .note, .caption {
    font-size: max(1em, 13px);
  }
}

/* 작은 모바일 (최대 480px) */
@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }

  .ip-selector {
    grid-template-columns: 1fr 1fr;
  }

  .stat-num {
    font-size: 22px;
  }
}

/* ── 접근성 ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* 포커스 가시성 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 선택 하이라이트 */
::selection {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--text);
}
/* ── 자료 입력 나란히 레이아웃 ── */
.input-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.input-split-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input-split-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}
.upload-zone-sm {
  padding: 28px 16px;
  flex: 1;
}
.input-split-textarea {
  flex: 1;
  min-height: 180px;
  resize: vertical;
}
@media (max-width: 700px) {
  .input-split-grid { grid-template-columns: 1fr; }
}

/* ── 헤더 아이콘 버튼 (마이페이지 / 관리자) - 라이트/다크 대응 ── */
.header-actions .icon-btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid var(--border);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.header-actions .icon-btn:hover,
.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-1px);
}
.header-actions .icon-btn:active,
.icon-btn:active {
  transform: translateY(0);
}
.header-actions .icon-btn svg,
.icon-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}
.header-actions .icon-btn:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .header-actions .icon-btn,
  .icon-btn { width: 38px; height: 38px; }
}

/* ── 헤더 로그인/회원가입 버튼 - pricing 기준 통일 ── */
.header-actions .btn-outline {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: 10px !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: all 0.2s !important;
}
.header-actions .btn-outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-light) !important;
}
.header-actions .btn-primary {
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 10px 24px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35) !important;
  transition: all 0.2s !important;
}
.header-actions .btn-primary:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.45) !important;
  transform: translateY(-1px) !important;
}
/* 네비 메뉴 링크 */
.nav-link {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════
   다크/라이트 모드 토글 스위치
══════════════════════════════════════════════ */
.theme-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  z-index: 10;
}
/* 다크모드: 토글 버튼 자체에 반투명 밝은 배경 — 어두운 헤더에서도 구분 */
[data-theme='dark'] .theme-toggle-switch {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}

/* 트랙 (슬라이더 배경) — 헤더 공간 절약을 위해 컴팩트 크기 */
.tts-track {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #dde3f0;
  border: 2px solid #93c5fd;
  position: relative;
  transition: background 0.3s, border-color 0.3s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px rgba(59,130,246,0.2);
}

/* 다크모드일 때 트랙 색상 */
[data-theme='dark'] .tts-track {
  background: #0f2244;
  border-color: #22d3ee;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,211,238,0.3);
}

/* 썸 (동그라미) */
.tts-thumb {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 2px 6px rgba(59,130,246,0.5);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 다크모드일 때 썸 이동 (트랙 40 - 썸 16 - 좌우 여백 4 = 20px) */
[data-theme='dark'] .tts-thumb {
  transform: translateX(20px);
  background: #22d3ee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 10px rgba(34,211,238,0.6);
}

/* 아이콘 공통 */
.tts-icon {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  transition: opacity 0.25s, transform 0.25s;
}

/* 라이트모드: 해 보임, 달 숨김 */
.tts-sun  { opacity: 1;  transform: scale(1);   }
.tts-moon { opacity: 0;  transform: scale(0.5); }

/* 다크모드: 달 보임, 해 숨김 */
[data-theme='dark'] .tts-sun  { opacity: 0;  transform: scale(0.5); }
[data-theme='dark'] .tts-moon { opacity: 1;  transform: scale(1);   }

/* 호버 효과 */
.theme-toggle-switch:hover .tts-track {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15), inset 0 2px 4px rgba(0,0,0,0.08);
}

/* 포커스 접근성 */
.theme-toggle-switch:focus-visible .tts-track {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

/* 모바일에서도 동일한 컴팩트 크기 유지 */
@media (max-width: 640px) {
  .tts-track { width: 40px; height: 22px; }
  .tts-thumb { width: 16px; height: 16px; }
  [data-theme='dark'] .tts-thumb { transform: translateX(20px); }
  .tts-icon { font-size: 11px; }
}

.flow-badge {
  display: inline-block;
  background: #e0e7ff; /* soft blue background */
  color: var(--accent); /* blue text */
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid rgba(37,99,235,0.2);
}


/* ══════════════════════════════════════════════════════════════
 * 🌙 다크모드 전역 가독성 보정 (site-wide)
 *   인라인 style 의 밝은 배경(#fff / 파스텔 틴트) 박스는 다크모드에서
 *   텍스트가 묻히므로, [style*=] 속성 선택자로 잡아 어두운 카드/틴트로
 *   재매핑하고 자식 텍스트 색을 복원한다. (background:#fff; / #fff" 정밀
 *   매칭으로 #fffbeb 등 부분일치 충돌 회피)
 * ══════════════════════════════════════════════════════════════ */
/* 흰색·중립 회색 표면 → 다크 카드 */
[data-theme='dark'] [style*="background:#fff;"],
[data-theme='dark'] [style*="background:#fff\""],
[data-theme='dark'] [style*="background: #fff;"],
[data-theme='dark'] [style*="background: #fff\""],
[data-theme='dark'] [style*="background:#ffffff;"],
[data-theme='dark'] [style*="background:#ffffff\""],
[data-theme='dark'] [style*="background: #ffffff;"],
[data-theme='dark'] [style*="background: #ffffff\""],
[data-theme='dark'] [style*="background:#fafafa;"],
[data-theme='dark'] [style*="background:#fafafa\""],
[data-theme='dark'] [style*="background: #fafafa;"],
[data-theme='dark'] [style*="background: #fafafa\""],
[data-theme='dark'] [style*="background:#f8f9fb;"],
[data-theme='dark'] [style*="background:#f8f9fb\""],
[data-theme='dark'] [style*="background: #f8f9fb;"],
[data-theme='dark'] [style*="background: #f8f9fb\""],
[data-theme='dark'] [style*="background:#f8fafc;"],
[data-theme='dark'] [style*="background:#f8fafc\""],
[data-theme='dark'] [style*="background: #f8fafc;"],
[data-theme='dark'] [style*="background: #f8fafc\""],
[data-theme='dark'] [style*="background:#f1f5f9;"],
[data-theme='dark'] [style*="background:#f1f5f9\""],
[data-theme='dark'] [style*="background: #f1f5f9;"],
[data-theme='dark'] [style*="background: #f1f5f9\""],
[data-theme='dark'] [style*="background:#e2e8f0;"],
[data-theme='dark'] [style*="background:#e2e8f0\""],
[data-theme='dark'] [style*="background: #e2e8f0;"],
[data-theme='dark'] [style*="background: #e2e8f0\""],
[data-theme='dark'] [style*="background:#cbd5e1;"],
[data-theme='dark'] [style*="background:#cbd5e1\""],
[data-theme='dark'] [style*="background: #cbd5e1;"],
[data-theme='dark'] [style*="background: #cbd5e1\""]{
  background: var(--card, #161b22) !important;
  color: var(--text, #e6edf3);
}
/* 파랑/보라 파스텔 → 블루 틴트 */
[data-theme='dark'] [style*="background:#eff6ff;"],
[data-theme='dark'] [style*="background:#eff6ff\""],
[data-theme='dark'] [style*="background: #eff6ff;"],
[data-theme='dark'] [style*="background: #eff6ff\""],
[data-theme='dark'] [style*="background:#dbeafe;"],
[data-theme='dark'] [style*="background:#dbeafe\""],
[data-theme='dark'] [style*="background: #dbeafe;"],
[data-theme='dark'] [style*="background: #dbeafe\""],
[data-theme='dark'] [style*="background:#e0ecff;"],
[data-theme='dark'] [style*="background:#e0ecff\""],
[data-theme='dark'] [style*="background: #e0ecff;"],
[data-theme='dark'] [style*="background: #e0ecff\""],
[data-theme='dark'] [style*="background:#e8f0ff;"],
[data-theme='dark'] [style*="background:#e8f0ff\""],
[data-theme='dark'] [style*="background: #e8f0ff;"],
[data-theme='dark'] [style*="background: #e8f0ff\""],
[data-theme='dark'] [style*="background:#eef6ff;"],
[data-theme='dark'] [style*="background:#eef6ff\""],
[data-theme='dark'] [style*="background: #eef6ff;"],
[data-theme='dark'] [style*="background: #eef6ff\""],
[data-theme='dark'] [style*="background:#f5f9ff;"],
[data-theme='dark'] [style*="background:#f5f9ff\""],
[data-theme='dark'] [style*="background: #f5f9ff;"],
[data-theme='dark'] [style*="background: #f5f9ff\""],
[data-theme='dark'] [style*="background:#eef3ff;"],
[data-theme='dark'] [style*="background:#eef3ff\""],
[data-theme='dark'] [style*="background: #eef3ff;"],
[data-theme='dark'] [style*="background: #eef3ff\""],
[data-theme='dark'] [style*="background:#eef2ff;"],
[data-theme='dark'] [style*="background:#eef2ff\""],
[data-theme='dark'] [style*="background: #eef2ff;"],
[data-theme='dark'] [style*="background: #eef2ff\""],
[data-theme='dark'] [style*="background:#f5f7ff;"],
[data-theme='dark'] [style*="background:#f5f7ff\""],
[data-theme='dark'] [style*="background: #f5f7ff;"],
[data-theme='dark'] [style*="background: #f5f7ff\""],
[data-theme='dark'] [style*="background:#e0e7ff;"],
[data-theme='dark'] [style*="background:#e0e7ff\""],
[data-theme='dark'] [style*="background: #e0e7ff;"],
[data-theme='dark'] [style*="background: #e0e7ff\""],
[data-theme='dark'] [style*="background:#faf7ff;"],
[data-theme='dark'] [style*="background:#faf7ff\""],
[data-theme='dark'] [style*="background: #faf7ff;"],
[data-theme='dark'] [style*="background: #faf7ff\""],
[data-theme='dark'] [style*="background:#faf8ff;"],
[data-theme='dark'] [style*="background:#faf8ff\""],
[data-theme='dark'] [style*="background: #faf8ff;"],
[data-theme='dark'] [style*="background: #faf8ff\""],
[data-theme='dark'] [style*="background:#f3eeff;"],
[data-theme='dark'] [style*="background:#f3eeff\""],
[data-theme='dark'] [style*="background: #f3eeff;"],
[data-theme='dark'] [style*="background: #f3eeff\""],
[data-theme='dark'] [style*="background:#ede9fe;"],
[data-theme='dark'] [style*="background:#ede9fe\""],
[data-theme='dark'] [style*="background: #ede9fe;"],
[data-theme='dark'] [style*="background: #ede9fe\""],
[data-theme='dark'] [style*="background:#f5f3ff;"],
[data-theme='dark'] [style*="background:#f5f3ff\""],
[data-theme='dark'] [style*="background: #f5f3ff;"],
[data-theme='dark'] [style*="background: #f5f3ff\""],
[data-theme='dark'] [style*="background:#f3e8ff;"],
[data-theme='dark'] [style*="background:#f3e8ff\""],
[data-theme='dark'] [style*="background: #f3e8ff;"],
[data-theme='dark'] [style*="background: #f3e8ff\""]{
  background: rgba(88, 166, 255, 0.12) !important;
  color: var(--text, #e6edf3);
}
/* 초록 파스텔 → 그린 틴트 */
[data-theme='dark'] [style*="background:#dcfce7;"],
[data-theme='dark'] [style*="background:#dcfce7\""],
[data-theme='dark'] [style*="background: #dcfce7;"],
[data-theme='dark'] [style*="background: #dcfce7\""],
[data-theme='dark'] [style*="background:#f0fdf4;"],
[data-theme='dark'] [style*="background:#f0fdf4\""],
[data-theme='dark'] [style*="background: #f0fdf4;"],
[data-theme='dark'] [style*="background: #f0fdf4\""],
[data-theme='dark'] [style*="background:#ecfdf5;"],
[data-theme='dark'] [style*="background:#ecfdf5\""],
[data-theme='dark'] [style*="background: #ecfdf5;"],
[data-theme='dark'] [style*="background: #ecfdf5\""],
[data-theme='dark'] [style*="background:#e8f8f0;"],
[data-theme='dark'] [style*="background:#e8f8f0\""],
[data-theme='dark'] [style*="background: #e8f8f0;"],
[data-theme='dark'] [style*="background: #e8f8f0\""],
[data-theme='dark'] [style*="background:#bbf7d0;"],
[data-theme='dark'] [style*="background:#bbf7d0\""],
[data-theme='dark'] [style*="background: #bbf7d0;"],
[data-theme='dark'] [style*="background: #bbf7d0\""]{
  background: rgba(63, 185, 80, 0.14) !important;
  color: var(--text, #e6edf3);
}
/* 노랑 파스텔 → 앰버 틴트 */
[data-theme='dark'] [style*="background:#fffbeb;"],
[data-theme='dark'] [style*="background:#fffbeb\""],
[data-theme='dark'] [style*="background: #fffbeb;"],
[data-theme='dark'] [style*="background: #fffbeb\""],
[data-theme='dark'] [style*="background:#fef3c7;"],
[data-theme='dark'] [style*="background:#fef3c7\""],
[data-theme='dark'] [style*="background: #fef3c7;"],
[data-theme='dark'] [style*="background: #fef3c7\""],
[data-theme='dark'] [style*="background:#fde68a;"],
[data-theme='dark'] [style*="background:#fde68a\""],
[data-theme='dark'] [style*="background: #fde68a;"],
[data-theme='dark'] [style*="background: #fde68a\""],
[data-theme='dark'] [style*="background:#fff3e0;"],
[data-theme='dark'] [style*="background:#fff3e0\""],
[data-theme='dark'] [style*="background: #fff3e0;"],
[data-theme='dark'] [style*="background: #fff3e0\""]{
  background: rgba(210, 153, 34, 0.15) !important;
  color: var(--text, #e6edf3);
}
/* 주황 파스텔 → 오렌지 틴트 */
[data-theme='dark'] [style*="background:#fff7ed;"],
[data-theme='dark'] [style*="background:#fff7ed\""],
[data-theme='dark'] [style*="background: #fff7ed;"],
[data-theme='dark'] [style*="background: #fff7ed\""],
[data-theme='dark'] [style*="background:#ffedd5;"],
[data-theme='dark'] [style*="background:#ffedd5\""],
[data-theme='dark'] [style*="background: #ffedd5;"],
[data-theme='dark'] [style*="background: #ffedd5\""]{
  background: rgba(234, 88, 12, 0.15) !important;
  color: var(--text, #e6edf3);
}
/* 빨강 파스텔 → 레드 틴트 */
[data-theme='dark'] [style*="background:#fef2f2;"],
[data-theme='dark'] [style*="background:#fef2f2\""],
[data-theme='dark'] [style*="background: #fef2f2;"],
[data-theme='dark'] [style*="background: #fef2f2\""],
[data-theme='dark'] [style*="background:#fee2e2;"],
[data-theme='dark'] [style*="background:#fee2e2\""],
[data-theme='dark'] [style*="background: #fee2e2;"],
[data-theme='dark'] [style*="background: #fee2e2\""]{
  background: rgba(248, 81, 73, 0.15) !important;
  color: var(--text, #e6edf3);
}
/* 밝은 박스 내부 자식 텍스트 복원 */
[data-theme='dark'] [style*="background:#fff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ffffff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ffffff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ffffff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ffffff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fafafa;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fafafa\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fafafa;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fafafa\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f8f9fb;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f8f9fb\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f8f9fb;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f8f9fb\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f8fafc;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f8fafc\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f8fafc;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f8fafc\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f1f5f9;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f1f5f9\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f1f5f9;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f1f5f9\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e2e8f0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e2e8f0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e2e8f0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e2e8f0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#cbd5e1;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#cbd5e1\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #cbd5e1;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #cbd5e1\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eff6ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eff6ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eff6ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eff6ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#dbeafe;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#dbeafe\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #dbeafe;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #dbeafe\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e0ecff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e0ecff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e0ecff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e0ecff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e8f0ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e8f0ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e8f0ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e8f0ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef6ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef6ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef6ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef6ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f9ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f9ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f9ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f9ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef3ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef3ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef3ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef3ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef2ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#eef2ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef2ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #eef2ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e0e7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e0e7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e0e7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e0e7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#faf7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#faf7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #faf7ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #faf7ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#faf8ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#faf8ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #faf8ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #faf8ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f3eeff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f3eeff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f3eeff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f3eeff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ede9fe;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ede9fe\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ede9fe;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ede9fe\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f3ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f5f3ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f3ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f5f3ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f3e8ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f3e8ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f3e8ff;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f3e8ff\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#dcfce7;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#dcfce7\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #dcfce7;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #dcfce7\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f0fdf4;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#f0fdf4\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f0fdf4;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #f0fdf4\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ecfdf5;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ecfdf5\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ecfdf5;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ecfdf5\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e8f8f0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#e8f8f0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e8f8f0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #e8f8f0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#bbf7d0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#bbf7d0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #bbf7d0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #bbf7d0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fffbeb;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fffbeb\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fffbeb;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fffbeb\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fef3c7;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fef3c7\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fef3c7;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fef3c7\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fde68a;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fde68a\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fde68a;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fde68a\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fff3e0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fff3e0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff3e0;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff3e0\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fff7ed;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fff7ed\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff7ed;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fff7ed\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ffedd5;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#ffedd5\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ffedd5;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #ffedd5\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fef2f2;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fef2f2\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fef2f2;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fef2f2\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fee2e2;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background:#fee2e2\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fee2e2;"] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5),
[data-theme='dark'] [style*="background: #fee2e2\""] :where(label,span,strong,b,p,td,th,li,small,h1,h2,h3,h4,h5){
  color: var(--text, #e6edf3);
}
/* 흰 박스 내부 입력요소 다크 대응 */
[data-theme='dark'] [style*="background:#fff;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#fff\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #fff;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #fff\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#ffffff;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#ffffff\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #ffffff;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #ffffff\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#fafafa;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#fafafa\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #fafafa;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #fafafa\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f8f9fb;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f8f9fb\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f8f9fb;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f8f9fb\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f8fafc;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f8fafc\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f8fafc;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f8fafc\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f1f5f9;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#f1f5f9\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f1f5f9;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #f1f5f9\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#e2e8f0;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#e2e8f0\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #e2e8f0;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #e2e8f0\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#cbd5e1;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background:#cbd5e1\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #cbd5e1;"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control),
[data-theme='dark'] [style*="background: #cbd5e1\""] :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-control){
  background: var(--bg, #0d1117) !important;
  color: var(--text, #e6edf3) !important;
  border-color: var(--border, #30363d) !important;
}

/* ══════════════════════════════════════════════════════════════
 *  다크모드 테마 최적화 보강 (2026-07-05)
 *  - 다크에서 --primary 가 밝은 회색(#e6edf3)으로 반전되므로,
 *    이를 '배경'으로 쓴 버튼은 밝은 배경+흰 글자가 되어 안 보임.
 *    → accent(파랑) 배경 + 흰 글자로 재매핑.
 *  - 헤더 이용권 배지 등 인라인 어두운 글자색 복원.
 * ══════════════════════════════════════════════════════════════ */
[data-theme='dark'] [style*="background:var(--primary"],
[data-theme='dark'] [style*="background: var(--primary"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
/* 헤더 이용권 배지: 배경은 방어CSS가 다크 카드로 처리 → 글자/테두리만 복원 */
[data-theme='dark'] .ticket-badge { color: var(--text) !important; border-color: var(--border) !important; }

/* ── 이용권 뱃지 hover ────────────────────────────────────────────
 *  뱃지는 인라인 style 로 배경을 갖고 있어서(header.php·common.js), 그것을
 *  이기려면 !important 가 필요하다.
 *  다크모드 값을 따로 두는 이유: 위쪽 [style*="background:#f8fafc;"] 보정은
 *  「인라인에 그 글자가 그대로 있을 때」만 걸린다. hover 처럼 배경이 바뀌는
 *  순간에는 기댈 수 없으므로, 테마별 hover 색을 여기서 명시한다.
 *  (2026-08-20 — 다크모드에서 흰 배경 위 흰 글자가 되어 이름이 안 보이던 문제) */
.ticket-badge { transition: background 0.2s, border-color 0.2s; }
.ticket-badge:hover { background: #f1f5f9 !important; }
[data-theme='dark'] .ticket-badge:hover { background: var(--card-hover, #1c2333) !important; }
[data-theme='dark'] .ticket-dropdown { background: var(--card) !important; border-color: var(--border) !important; }
[data-theme='dark'] .ticket-dropdown #ticketDropdownInner { color: var(--text-muted) !important; }

/* ══════════════════════════════════════════════
   이용권 종류별 구분색 — 라이트/다크 각각 대비 확보
   ──────────────────────────────────────────────
   드롭다운 배경은 다크에서 var(--card)(#161b22)로 어두워지는데(위 방어CSS),
   종류색을 라이트 기준(#2563eb 등)으로 두면 명암비가 3.4 안팎까지 떨어져
   글자가 묻힌다. 다크에서는 같은 계열의 밝은 톤으로 바꿔 4.5 이상을 확보한다.
   js/common.js 의 kinds 배열이 이 변수를 참조한다.
══════════════════════════════════════════════ */
:root {
  --tk-diag:      #2563eb;   /* 진단권(1차) */
  --tk-allinone:  #7c3aed;   /* 올인원(2·3차) */
  --tk-trademark: #0891b2;   /* 상표 */
  --tk-design:    #db2777;   /* 디자인 */
  --tk-copyright: #ca8a04;   /* 저작권 */
  --tk-brand:     #6d28d9;   /* 브랜드(상표·디자인·저작권) — 요금제 화면과 같은 색 */
  --tk-tech:      #0f766e;   /* 기술(특허·실용신안) — 요금제 화면과 같은 색 */
  --tk-coupon:    #d97706;   /* 쿠폰 장수 */
}
[data-theme='dark'] {
  --tk-diag:      #60a5fa;
  --tk-allinone:  #a78bfa;
  --tk-trademark: #22d3ee;
  --tk-design:    #f472b6;
  --tk-copyright: #facc15;
  --tk-brand:     #c4b5fd;
  --tk-tech:      #5eead4;
  --tk-coupon:    #fbbf24;
}

/* ── 이용권/알림 박스 배경 — 라이트는 기존 파스텔, 다크는 같은 색상의 반투명 톤 ──
   js/dashboard.js 의 이용권 카드와 알림 박스가 참조한다.
   배경을 하드코딩(#eff6ff 등)해 두면 다크에서 흰 박스만 튀고, 그렇다고 배경만
   어둡게 바꾸면 안에 있던 진한 글자(#1e40af 등)가 묻힌다. 배경·테두리·글자를
   한 세트로 테마 변수화해야 양쪽 모드에서 모두 읽힌다. */
:root {
  --tk-box-blue-bg:   #eff6ff;  --tk-box-blue-bd:   #bfdbfe;
  --tk-box-violet-bg: #f5f3ff;  --tk-box-violet-bd: #c7d2fe;
  --tk-box-green-bg:  #f0fdf4;  --tk-box-green-bd:  #bbf7d0;
}
[data-theme='dark'] {
  --tk-box-blue-bg:   rgba(88,166,255,.10);  --tk-box-blue-bd:   rgba(88,166,255,.32);
  --tk-box-violet-bg: rgba(167,139,250,.10); --tk-box-violet-bd: rgba(167,139,250,.32);
  --tk-box-green-bg:  rgba(63,185,80,.10);   --tk-box-green-bd:  rgba(63,185,80,.32);
}

/* ── 모바일 메뉴가 열려 있는 동안 플로팅 요소 감추기 ──
   AI 챗봇 버튼이 position:fixed 로 떠 있어 햄버거 메뉴의 하단 항목
   ('화면 모드', '회원가입')을 가렸다(2026-08-07).
   메뉴가 닫히면 클래스가 사라져 다시 보인다. js/common.js 의 open()/close() 참고.
   ※ 함께 숨기던 '90% 특허거절 극복 노하우' 배너(.ps-float-knowhow)는
     2026-08-11 에 메인 히어로 CTA 버튼으로 옮겨져 선택자에서 제외했다. */
body.mnav-open [id*="aios"],
body.mnav-open [class*="aios"] {
  display: none !important;
}
/* 메뉴 맨 아래 항목이 화면 끝에 딱 붙지 않도록 여유를 준다 */
.mobile-nav-panel { padding-bottom: 28px; }


/* ══════════════════════════════════════════════════════════════
 * 🌙 다크모드 잔여 보정 2차 (2026-08-08)
 *
 *  1차 보정(위 「다크모드 전역 가독성 보정」)은 인라인 style 의 밝은 '배경'만
 *  잡았다. 그 결과 배경은 어두워졌는데 같은 style 에 박힌 '글자색'은 어두운
 *  채로 남아, 어두운 배경 위 어두운 글자가 되는 자리가 남았다(실측 43곳).
 *
 *  또 1차 선택자는 [style*="background:#fff;"] 처럼 세미콜론으로 끝나는
 *  형태만 매칭한다. 브라우저의 style 속성값에는 따옴표가 포함되지 않으므로
 *  [style*='background:#fff"'] 계열은 실제로는 아무것도 잡지 못했고,
 *  인라인 style 의 '마지막 속성'인 경우가 통째로 새어 나갔다.
 *  → 여기서는 세미콜론형과 끝일치($=)형을 함께 걸어 빈틈을 막는다.
 *
 *  색은 의미를 유지한 채 다크 팔레트로 옮긴다.
 *  회색 계열 → --text / 파랑 → --accent / 초록 → --success / 주황 → --warning
 * ══════════════════════════════════════════════════════════════ */

/* ── (1) 중립 어두운 글자 → 본문색 ───────────────────────────── */
[data-theme='dark'] [style*="color:#333;"],   [data-theme='dark'] [style$="color:#333"],
[data-theme='dark'] [style*="color:#374151;"],[data-theme='dark'] [style$="color:#374151"],
[data-theme='dark'] [style*="color:#1e293b;"],[data-theme='dark'] [style$="color:#1e293b"],
[data-theme='dark'] [style*="color:#0f172a;"],[data-theme='dark'] [style$="color:#0f172a"],
[data-theme='dark'] [style*="color:#111827;"],[data-theme='dark'] [style$="color:#111827"],
[data-theme='dark'] [style*="color:#1a2340;"],[data-theme='dark'] [style$="color:#1a2340"],
[data-theme='dark'] [style*="color:#0a1628;"],[data-theme='dark'] [style$="color:#0a1628"] {
  color: var(--text, #e6edf3) !important;
}

/* ── (2) 중간 회색(보조 설명) → 보조 본문색 ──────────────────── */
[data-theme='dark'] [style*="color:#475569;"],[data-theme='dark'] [style$="color:#475569"],
[data-theme='dark'] [style*="color:#64748b;"],[data-theme='dark'] [style$="color:#64748b"],
[data-theme='dark'] [style*="color:#6b7280;"],[data-theme='dark'] [style$="color:#6b7280"] {
  color: var(--text-secondary, #b0b8c4) !important;
}

/* ── (3) 파랑 강조 글자 → 다크 액센트 ────────────────────────── */
[data-theme='dark'] [style*="color:#1d4ed8;"],[data-theme='dark'] [style$="color:#1d4ed8"],
[data-theme='dark'] [style*="color:#2563eb;"],[data-theme='dark'] [style$="color:#2563eb"],
[data-theme='dark'] [style*="color:#1e40af;"],[data-theme='dark'] [style$="color:#1e40af"],
[data-theme='dark'] [style*="color:#4f46e5;"],[data-theme='dark'] [style$="color:#4f46e5"] {
  color: var(--accent, #58a6ff) !important;
}

/* ── (4) 초록 강조 글자 → 다크 성공색 ────────────────────────── */
[data-theme='dark'] [style*="color:#047857;"],[data-theme='dark'] [style$="color:#047857"],
[data-theme='dark'] [style*="color:#059669;"],[data-theme='dark'] [style$="color:#059669"],
[data-theme='dark'] [style*="color:#15803d;"],[data-theme='dark'] [style$="color:#15803d"],
[data-theme='dark'] [style*="color:#166534;"],[data-theme='dark'] [style$="color:#166534"],
[data-theme='dark'] [style*="color:#3f6212;"],[data-theme='dark'] [style$="color:#3f6212"] {
  color: var(--success, #3fb950) !important;
}

/* ── (5) 주황·갈색 경고 글자 → 다크 경고색 ───────────────────── */
[data-theme='dark'] [style*="color:#b45309;"],[data-theme='dark'] [style$="color:#b45309"],
[data-theme='dark'] [style*="color:#92400e;"],[data-theme='dark'] [style$="color:#92400e"],
[data-theme='dark'] [style*="color:#a16207;"],[data-theme='dark'] [style$="color:#a16207"],
[data-theme='dark'] [style*="color:#3a2c00;"],[data-theme='dark'] [style$="color:#3a2c00"] {
  color: var(--warning, #d29922) !important;
}

/* ── (6) 1차에서 빠진 밝은 배경 3색 ──────────────────────────── */
/* 앰버 틴트(행사코드 안내 박스 등) */
[data-theme='dark'] [style*="background:#fff8e6;"],[data-theme='dark'] [style$="background:#fff8e6"],
[data-theme='dark'] [style*="background:#fffbeb;"],[data-theme='dark'] [style$="background:#fffbeb"] {
  background: rgba(210, 153, 34, 0.14) !important;
  border-color: rgba(210, 153, 34, 0.4) !important;
}
/* 민트·라임 틴트(기본 배지, 완료 안내 등) */
[data-theme='dark'] [style*="background:#d1fae5;"],[data-theme='dark'] [style$="background:#d1fae5"],
[data-theme='dark'] [style*="background:#dcfce7;"],[data-theme='dark'] [style$="background:#dcfce7"],
[data-theme='dark'] [style*="background:#ecfccb;"],[data-theme='dark'] [style$="background:#ecfccb"] {
  background: rgba(63, 185, 80, 0.16) !important;
}

/* ── (7) 1차 배경 보정의 '마지막 속성' 누락분 보강 ───────────── */
[data-theme='dark'] [style$="background:#fff"],
[data-theme='dark'] [style$="background:#ffffff"],
[data-theme='dark'] [style$="background:#fafafa"],
[data-theme='dark'] [style$="background:#f8fafc"],
[data-theme='dark'] [style$="background:#f8f9fb"],
[data-theme='dark'] [style$="background:#f1f5f9"],
[data-theme='dark'] [style$="background:#e2e8f0"] {
  background: var(--card, #161b22) !important;
  color: var(--text, #e6edf3);
}

/* ── (8) 서명패드 캔버스는 다크에서도 흰 종이로 남긴다 ────────
   서명 선은 ctx.strokeStyle = '#111827'(검정) 로 그려지고, 저장 이미지
   (toDataURL)는 캔버스 픽셀만 담는다. 위 배경 보정이 캔버스까지 어둡게
   만들면 검은 선을 어두운 배경에 긋는 꼴이라 사용자가 자기 서명을
   볼 수 없다. 캔버스와 그 테두리 상자는 예외로 흰 종이를 유지한다.
   (pages/dashboard.php 의 #sigPadCanvas · _sigMove 참고) */
[data-theme='dark'] #sigPadCanvas,
[data-theme='dark'] #sigPadCanvas[style] {
  background: #ffffff !important;
}

/* ── (9) 안내 메시지 3종(행사코드 등) 테마 변수 ───────────────
   pages/dashboard.php 의 ecShowMsg() 는 style.cssText 로 색을 넣는다.
   cssText 는 브라우저가 rgb() 로 다시 쓰기 때문에 위 [style*="#hex"]
   보정이 통하지 않는다. 그래서 소스를 var() 로 바꾸고 값은 여기서 준다.
   라이트 값은 기존 색(#166534/#dcfce7 …)을 그대로 옮긴 것이라 화면이
   바뀌지 않고, 다크에서만 어두운 틴트로 갈아탄다. */
:root {
  --msg-ok-fg:   #166534;  --msg-ok-bg:   #dcfce7;  --msg-ok-bd:   #86efac;
  --msg-err-fg:  #991b1b;  --msg-err-bg:  #fee2e2;  --msg-err-bd:  #fecaca;
  --msg-info-fg: #1e40af;  --msg-info-bg: #eff6ff;  --msg-info-bd: #bfdbfe;
}
[data-theme='dark'] {
  --msg-ok-fg:   #3fb950;  --msg-ok-bg:   rgba(63, 185, 80, 0.14);  --msg-ok-bd:   rgba(63, 185, 80, 0.42);
  --msg-err-fg:  #f85149;  --msg-err-bg:  rgba(248, 81, 73, 0.14);  --msg-err-bd:  rgba(248, 81, 73, 0.42);
  --msg-info-fg: #58a6ff;  --msg-info-bg: rgba(88, 166, 255, 0.13); --msg-info-bd: rgba(88, 166, 255, 0.4);
}

/* ── (10) 보라 계열(서명 등록 배지 등) ───────────────────────── */
[data-theme='dark'] [style*="color:#7c3aed;"],[data-theme='dark'] [style$="color:#7c3aed"],
[data-theme='dark'] [style*="color:#6d28d9;"],[data-theme='dark'] [style$="color:#6d28d9"] {
  color: #bc8cff !important;
}
[data-theme='dark'] [style*="background:#f3e8ff;"],[data-theme='dark'] [style$="background:#f3e8ff"],
[data-theme='dark'] [style*="background:#ede9fe;"],[data-theme='dark'] [style$="background:#ede9fe"] {
  background: rgba(188, 140, 255, 0.16) !important;
}

/* ── (11) 빨강 계열(오류·삭제 안내) ──────────────────────────── */
[data-theme='dark'] [style*="color:#991b1b;"],[data-theme='dark'] [style$="color:#991b1b"],
[data-theme='dark'] [style*="color:#b91c1c;"],[data-theme='dark'] [style$="color:#b91c1c"],
[data-theme='dark'] [style*="color:#dc2626;"],[data-theme='dark'] [style$="color:#dc2626"] {
  color: var(--danger, #f85149) !important;
}
[data-theme='dark'] [style*="background:#fee2e2;"],[data-theme='dark'] [style$="background:#fee2e2"],
[data-theme='dark'] [style*="background:#fef2f2;"],[data-theme='dark'] [style$="background:#fef2f2"] {
  background: rgba(248, 81, 73, 0.14) !important;
}

/* ── (12) 앰버 배지 위 짙은 갈색 글자 ────────────────────────
   pages/result.php 실용신안 도구 박스의 배지(background:#fde68a) 처럼
   배경은 1차 보정으로 어두운 틴트가 되는데 글자만 짙은 갈색으로 남아
   읽히지 않던 자리. dashboard 의 행사코드 안내 문구도 같은 경우. */
[data-theme='dark'] [style*="color:#78350f;"],[data-theme='dark'] [style$="color:#78350f"],
[data-theme='dark'] [style*="color:#8a6d1b;"],[data-theme='dark'] [style$="color:#8a6d1b"],
[data-theme='dark'] [style*="color:#7a6a3a;"],[data-theme='dark'] [style$="color:#7a6a3a"],
[data-theme='dark'] [style*="color:#713f12;"],[data-theme='dark'] [style$="color:#713f12"] {
  color: var(--warning, #d29922) !important;
}

/* ── (13) 빨강 강조(만료 표시 등) ────────────────────────────── */
[data-theme='dark'] [style*="color:#ef4444;"],[data-theme='dark'] [style$="color:#ef4444"] {
  color: var(--danger, #f85149) !important;
}

/* ══════════════════════════════════════════════════════════════
 *  다크모드 명암비 교정 — 구조적 원인 (2026-08-25)
 *
 *  전수검사(WCAG 명암비) 결과 143곳이 «읽히지 않음» 으로 나왔고,
 *  그중 되풀이되는 원인이 아래 네 가지였다. 낱개로 고치면 또 재발하므로
 *  ★원인 쪽을 고친다. 인라인·동적으로 박힌 나머지는 js/darkguard.js 가 맡는다.
 *
 *  1) .btn-primary  — 다크에서 --accent 가 밝은 파랑(#58a6ff)이 되는데
 *                     글자는 흰색 그대로 → 2.53:1 (요구 4.5:1)
 *  2) .btn-danger   — 같은 이유로 3.35:1
 *  3) --text-muted  — 어두운 카드 위에서 3.9:1 로 모자람
 *  4) 밝은 섬       — 배경만 흰색으로 박아 두고 글자는 변수를 쓴 곳 → 1.18:1
 *                     (흰 바탕에 흰 글자. 관리자 회원관리 팝업이 이 경우였다)
 * ══════════════════════════════════════════════════════════════ */

/* ── 1·2) 색 있는 버튼: 글자를 흐리게 하는 대신 배경을 진하게 ──────
 *  버튼은 배경색이 정체성이다. 색조는 그대로 두고 밝기만 내려 4.5:1 을 맞춘다. */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] a.btn-primary,
[data-theme='dark'] button.btn-primary {
  background: #1f6feb !important;   /* 흰 글자와 4.64:1 */
  border-color: #1f6feb !important;
  color: #fff !important;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] a.btn-primary:hover,
[data-theme='dark'] button.btn-primary:hover {
  background: #388bfd !important;
  border-color: #388bfd !important;
}
[data-theme='dark'] .btn-danger,
[data-theme='dark'] a.btn-danger,
[data-theme='dark'] button.btn-danger {
  background: #da3633 !important;   /* 흰 글자와 4.74:1 */
  border-color: #da3633 !important;
  color: #fff !important;
}
[data-theme='dark'] .btn-danger:hover { background: #f85149 !important; border-color: #f85149 !important; }

[data-theme='dark'] .btn-success,
[data-theme='dark'] button.btn-success { background: #1a7f37 !important; border-color: #1a7f37 !important; color: #fff !important; }
[data-theme='dark'] .btn-warning,
[data-theme='dark'] button.btn-warning { background: #9e6a03 !important; border-color: #9e6a03 !important; color: #fff !important; }

/* ── 3) 흐린 글자를 한 단계 올린다 ────────────────────────────
 *  #7d8590 은 카드(#161b22) 위에서 겨우 4.5 를 넘고, 조금만 밝은 바탕이면
 *  바로 미달이 된다. 여유를 준다. */
[data-theme='dark'] {
  --text-muted: #8b949e;
  --text-secondary: #c0c8d4;
}

/* ── 4) «밝은 섬» — 배경만 밝게 박아 둔 상자 안에서는 글자를 어둡게 ──
 *  배경을 어둡게 뒤집으면 의도한 디자인이 깨지므로, 섬은 그대로 두고
 *  ★그 안의 글자만 어두운 색으로 되돌린다.
 *  인라인 문자열 매칭은 띄어쓰기 하나에도 새어 나가므로 여기서는
 *  «자주 쓰이는 표기» 만 미리 막고, 나머지는 darkguard.js 가 실측으로 잡는다. */
[data-theme='dark'] [style*="background:#fff"],
[data-theme='dark'] [style*="background: #fff"],
[data-theme='dark'] [style*="background:#FFF"],
[data-theme='dark'] [style*="background-color:#fff"],
[data-theme='dark'] [style*="background-color: #fff"],
[data-theme='dark'] [style*="background:white"],
[data-theme='dark'] [style*="background: white"],
[data-theme='dark'] [style*="background:#f8fafc"],
[data-theme='dark'] [style*="background: #f8fafc"],
[data-theme='dark'] [style*="background:#f9fafb"],
[data-theme='dark'] [style*="background: #f9fafb"],
[data-theme='dark'] [style*="background:#f1f5f9"],
[data-theme='dark'] [style*="background: #f1f5f9"] {
  color: #1f2937;
}
[data-theme='dark'] [style*="background:#fff"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small),
[data-theme='dark'] [style*="background: #fff"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small),
[data-theme='dark'] [style*="background-color:#fff"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small),
[data-theme='dark'] [style*="background:white"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small),
[data-theme='dark'] [style*="background:#f8fafc"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small),
[data-theme='dark'] [style*="background:#f9fafb"] :where(h1,h2,h3,h4,h5,h6,p,span,div,strong,b,em,li,td,th,label,dt,dd,small) {
  color: #1f2937;
}

/* ── 덧) 라이트 팔레트 색을 그대로 박아 둔 글자 ────────────────
 *  #1f2937(먹색)·#111827 을 다크 배경 위에 그대로 쓰면 1.2:1 이 된다.
 *  단, 위의 «밝은 섬» 안에서는 그 색이 맞으므로 섬 바깥일 때만 되돌린다. */
[data-theme='dark'] [style*="color:#1f2937"]:not([style*="background"]),
[data-theme='dark'] [style*="color: #1f2937"]:not([style*="background"]),
[data-theme='dark'] [style*="color:#111827"]:not([style*="background"]),
[data-theme='dark'] [style*="color: #111827"]:not([style*="background"]),
[data-theme='dark'] [style*="color:#0f172a"]:not([style*="background"]),
[data-theme='dark'] [style*="color:#334155"]:not([style*="background"]) {
  color: var(--text) !important;
}

/* ── 히어로 목업은 «제품 화면 그림» — 언제나 라이트 UI다 ──────────
 *  .hero-visual 안은 흰 폰 화면과 흰 배지로 이루어진 «그림» 이라 다크에서도
 *  바탕이 밝다. 그런데 글자는 테마 변수를 따라가 밝은 회색이 되어 사라졌다.
 *  ★그림 안에서는 변수를 라이트 값으로 되돌린다. (배지는 active 가 순환하며
 *  transition 으로 색이 계속 바뀌어, 실측 교정으로는 따라잡을 수 없는 자리다) */
[data-theme='dark'] .hero-visual {
  --accent: #1a5fd0;            /* 흰 배경과 5.94:1 */
  --accent-hover: #1a5fd0;
  --primary: #0f172a;
  --primary-light: #334155;
  --text: #1f2937;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --card: #ffffff;
}
/* 다만 목업 안에도 «어두운 화면» 두 장이 있다 — 거기서는 다시 밝은 글자로 */
[data-theme='dark'] #screen-1 .screen-content,
[data-theme='dark'] #screen-3 .screen-content {
  --text: #e6edf3;
  --text-secondary: #c0c8d4;
  --text-muted: #94a3b8;
  --accent: #58a6ff;
}

/* ── 목업 안 «문서 목록» 은 색이 순차로 바뀐다 ──────────────────
 *  .doc-generate-box 가 s1→s2→s3→s4 로 돌면서 .doc-item 의 배경·글자색이
 *  transition 으로 미끄러진다. 실측 교정은 «지금 이 순간» 을 재므로,
 *  미끄러지는 중간값을 붙잡으면 엉뚱한 색을 박게 된다.
 *  ★그래서 이 자리만은 다크에서도 값을 못 박아 둔다. 바탕이 늘 밝으므로
 *  글자는 늘 어둡게 — 어느 순간을 잘라도 읽힌다. */
[data-theme='dark'] .doc-item {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
[data-theme='dark'] .doc-generate-box.s1 .doc-item.full { background: rgba(16,185,129,.12) !important; color: #047857 !important; }
[data-theme='dark'] .doc-generate-box.s2 .doc-item.full { background: rgba(236,72,153,.12) !important; color: #be185d !important; }
[data-theme='dark'] .doc-generate-box.s3 .doc-item.full { background: rgba(59,130,246,.12) !important; color: #1d4ed8 !important; }
[data-theme='dark'] .doc-generate-box.s4 .doc-item.full { background: rgba(37,99,235,.12) !important; color: #1a5fd0 !important; }



/* ══════════════════════════════════════════════════════════════
 *  라이트모드 명암비 교정 (2026-08-26)
 *
 *  다크를 잡고 나서 라이트를 재 보니 457곳이 기준에 못 미쳤다.
 *  그중 354곳(77%)은 --text-muted 와 --accent 두 변수가 4.5:1 에
 *  «살짝» 모자란 탓이었고, 그 둘은 :root 에서 이미 고쳤다.
 *  여기 남은 것은 낱개로 박힌 색들이다.
 * ══════════════════════════════════════════════════════════════ */

/* ── 흰 글자를 얹은 색 배경이 너무 밝던 곳 ───────────────────── */
.hero-iptypes .hi-copy   { background: linear-gradient(135deg, #0e7490, #0891b2) !important; }  /* 흰 글자 4.6:1 */
.org-form-submit         { background: linear-gradient(135deg, #d97706, #b45309) !important; }  /* 흰 글자 4.5:1 */
.org-form-submit:hover   { background: linear-gradient(135deg, #b45309, #92400e) !important; }
.showcase-wrap .panel-after .panel-label .badge { background: #2563eb; }                         /* 흰 글자 5.1:1 */

/* ── 색 글자가 흐리던 곳 — 색조는 두고 한 단계만 진하게 ────────── */
.ipb-chip                                   { color: #b45309; }              /* 주황 4.6:1 */
.showcase-wrap .attachment-icon             { color: #1d4ed8; }              /* 파랑 6.3:1 */
.showcase-wrap .panel-label                 { color: #475569; }              /* 회색 6.4:1 */
.doc-generate-box.s1 .doc-item.full         { color: #047857 !important; }   /* 초록 5.0:1 */
.moat-journey .moat-journey-end strong      { color: #dc2626; }              /* 빨강 4.8:1 */
.stamp-doc .stamp                           { color: #c81e1e; }              /* 도장 빨강 5.0:1 */

/* ── 장식용 큰 번호(01 02 03 04)는 그대로 둔다 ────────────────
 *  읽으라고 쓴 글자가 아니라 «은은한 배경 무늬» 다. 진하게 하면 디자인이 깨진다.
 *  대신 마크업에 aria-hidden 을 붙여 화면낭독기와 검사기가 지나가게 했다. */

/* ── 온리원 통합계정 버튼 (2026-08-26) ────────────────────────
 *  로그인·회원가입 화면 맨 위. 다른 방법보다 먼저 눈에 들어오게 하되,
 *  요란하지 않게 — 계정을 만드는 일은 조용하고 미더워야 한다. */
.oneid-auth { margin: 0 0 16px; }

.oneid-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background .18s, border-color .18s, transform .12s;
}
.oneid-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.oneid-btn:active { transform: none; }
.oneid-btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .35); outline-offset: 2px; }

/* 마크 — SDK 배너와 같은 모양을 쓴다. 같은 것임을 알아보게 하려는 것이다. */
.oneid-mark {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  background: #fff;
  box-shadow: inset 0 0 0 4px var(--accent);
}

.oneid-hint {
  margin: 9px 2px 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-muted); text-align: center;
}
.oneid-hint strong { color: var(--text-secondary); font-weight: 700; }

[data-theme='dark'] .oneid-mark { box-shadow: inset 0 0 0 4px #1f6feb; }

/* ── 마우스를 올렸을 때 글자가 사라지지 않게 (2026-08-26) ──────
 *  .oneid-btn 은 <a> 라서 전역 a:hover 규칙이 글자색을 가져간다.
 *  그 결과 라이트에서 «글자색 = 바탕색» 이 되어 1.00:1 — 아예 안 보였다.
 *  ★바탕을 바꾸는 곳에서는 글자색도 함께 못 박아야 한다. */
.oneid-btn:hover,
.oneid-btn:focus,
.oneid-btn:active { color: #fff !important; }

/*  다크에서 파란 단추에 마우스를 올리면 바탕이 밝아져 흰 글자가 흐려졌다(3.34:1).
 *  올릴 때 «밝아져야» 한다는 법은 없다 — 살짝 가라앉는 편이 눌리는 느낌도 난다. */
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] a.btn-primary:hover,
[data-theme='dark'] button.btn-primary:hover {
  background: #1a5fd0 !important;   /* 흰 글자와 5.94:1 */
  border-color: #1a5fd0 !important;
  color: #fff !important;
}

/* ── 푸터 링크는 «어두운 바탕» 위에 있다 ─────────────────────
 *  전역 a:hover 는 글자를 어두운 파랑(--accent-hover)으로 바꾼다.
 *  본문(흰 바탕)에서는 맞지만, 언제나 어두운 푸터에서는 글자가 묻힌다(3.04:1).
 *  ★바탕이 어두운 자리에서는 «밝아지는» 것이 맞다. */
.site-footer a:hover,
.site-footer a:focus-visible { color: #79b8ff; }   /* 푸터 바탕과 8.5:1 */

/* ★ INPUT_MINW (2026-09-07) — 입력칸이 폰 화면을 밀어내지 않게
     실측: 폰(375px)에서 /free-diagnosis 가 112px, /payment 가 57px 삐져나갔다.
     처음엔 «입력칸이 범인» 이라 짐작했으나 아니었다 — 진짜 원인은 grid 의 1fr 이다.
     (GRID_MINMAX 참고) 이 줄은 해롭지 않아 남긴다. 같은 계열을 미리 막아 준다.
     <input> 은 기본 최소 폭을 가지는데, 부모가 flex·grid 면 그 폭이 «줄지 않아»
     옆으로 밀어낸다. 손님은 좌우로 흔들며 읽게 된다.
     → 옷장에 «접히지 않는 옷걸이»를 넣은 셈. 옷장 문이 안 닫힌다.
     min-width:0 은 부모가 flex·grid 일 때만 뜻이 있고 그 밖에는 무해하다. */
input, select, textarea { min-width: 0; }

/* ★ HEADER_FIT (2026-09-07) — 로그인하면 폰에서 «모든 화면»이 삐져나갔다
     실측: header-inner 가 375인데 안이 449 (74px 넘침).
       로고 124 + 이용권·아이콘 263 + 햄버거 22 + 여백 = 449
     로그인해야 나타나는 것이라 비로그인으로 걷던 검사기는 한 번도 못 봤다.
     → 가게 «문 앞»만 보고 「이상 없다」고 적은 셈이다.

     ★ 숨기지 않고 «줄인다» — 햄버거 메뉴 안에 이용권이 없어서,
       숨기면 폰에서 이용권을 볼 길이 사라진다.
       「저기서 보세요」 하려면 거기 길이 있어야 한다. */
@media (max-width: 768px) {
  .header-inner   { min-width: 0; }
  .header-actions { min-width: 0; flex-shrink: 1; }
  .logo           { min-width: 0; flex-shrink: 1; }
  .ticket-badge-wrapper { min-width: 0; flex-shrink: 1; }
  .ticket-badge   { min-width: 0; max-width: 118px; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
}
/* 아주 좁은 폰에서는 로고 «글자»를 접는다 — 아이콘만으로도 집으로 가는 길은 안다 */
@media (max-width: 400px) {
  .logo-text { display: none; }
}

/* ★ TINY_TEXT (2026-09-07) — 폰에서 너무 작은 글자를 읽을 수 있게
     실측: 폰에서 11~11.5px 글자가 있었다.
       「VAT 포함 · 관납료 별도」 11.5px — «돈에 관한 말»이다.
       폰에서 안 읽히면 손님은 결제한 뒤에야 관납료를 알게 된다.
     → 계약서의 중요한 줄을 «가장 작은 글씨»로 적은 셈이다.
       법으로 못 하게 하는 데는 이유가 있다.
     12px 은 작은 글씨의 마지노선이다. 데스크톱은 그대로 둔다. */
@media (max-width: 768px) {
  .fine, .vat, .pk-diag-badge { font-size: 12px; }
}