/* ==============================
   티모집사 통합 테마 시스템
   theme.css — CSS 변수 기반 다크/라이트 테마
   ============================== */

/* Self-hosted fonts: keep tool pages usable without a font CDN. */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/special-chars/vendor/fonts/pretendard/1.3.9/PretendardVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/special-chars/vendor/fonts/inter/5.2.8/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/special-chars/vendor/fonts/inter/5.2.8/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== 라이트 테마 (기본) ===== */
html[data-theme="light"] {
  --bg-body: #f8fafc;
  --bg-app: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f1f5f9;
  --bg-header: linear-gradient(135deg, #4f46e5, #6d28d9);
  --bg-hover: #f1f5f9;

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #475569;
  --text-on-accent: #ffffff;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-text: #4f46e5;
  --accent-light: #eef2ff;
  --accent-bg: rgba(99, 102, 241, 0.08);
  --focus-ring: #4338ca;

  --border: #e2e8f0;
  --border-hover: #c7d2fe;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-accent: 0 4px 16px rgba(99, 102, 241, 0.2);

  /* 도구 페이지용 */
  --bg-bar: #f1f5f9;
  --bg-btn: #e2e8f0;
  --bg-btn-hover: #cbd5e1;
  --bg-stat: #f8fafc;
  --bg-guide: #f1f5f9;
  --bg-guide-hover: #e2e8f0;
  --text-guide: #475569;
  --border-guide: #e2e8f0;
  --text-info: #475569;
  --text-code: #4f46e5;
  --bg-tab: #e2e8f0;
  --bg-tab-hover: #cbd5e1;
  --bg-tab-active: #4f46e5;
  --text-tab: #475569;
  --text-tab-active: #ffffff;
  --bg-emoji-tab: #e8f5e9;
  --bg-emoji-tab-hover: #c8e6c9;
  --bg-emoji-tab-active: #e67e22;
  --bg-char-btn: #f1f5f9;
  --bg-char-btn-hover: #4f46e5;
  --border-char: #e2e8f0;
  --bg-emoji-cell: #f0fdf4;
  --border-emoji: #d1fae5;
  --bg-emoji-hover: #e67e22;
  --border-emoji-hover: #f39c12;
  --toast-bg: #4f46e5;
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #4f46e5;
  --progress-bg: #e2e8f0;
  --btn-clear-bg: #e2e8f0;
  --btn-clear-text: #475569;
  --btn-clear-hover: #cbd5e1;
  --btn-copy-bg: #4f46e5;
  --btn-copy-text: #ffffff;
  --btn-copy-hover: #4f46e5;

  /* 성공/긍정 상태 */
  --bg-success: #ecfdf5;
  --bg-success-hover: #d1fae5;
  --border-success: #a7f3d0;

  /* 의미적 텍스트 색상 */
  --text-success: #166534;
  --text-amount: #4f46e5;
  --text-highlight: #854d0e;
  --text-section: #4f46e5;
  --text-label: #475569;
  --text-placeholder: #475569;
  --bg-item-hover: #f1f5f9;
  --bg-item-final: #eef2ff;
  --border-final: #c7d2fe;

  /* 계산기용 */
  --calc-btn-bg: #f1f5f9;
  --calc-btn-hover: #e2e8f0;
  --calc-btn-active: #cbd5e1;
  --calc-op-bg: #e2e8f0;
  --calc-op-text: #475569;
  --calc-op-hover: #cbd5e1;
  --calc-fn-bg: #f8fafc;
  --calc-fn-text: #64748b;
  --calc-fn-hover: #f1f5f9;
  --calc-eq-bg: #4f46e5;
  --calc-eq-hover: #4f46e5;
  --calc-eq-active: #4338ca;
  --calc-display-bg: #f8fafc;
  --calc-expr-text: #475569;
  --calc-result-text: #1e293b;

  /* 상태 색상: 작은 본문 텍스트와 흰색 버튼 글자를 모두 AA로 유지 */
  --status-blue-text: #075985;
  --status-green-text: #166534;
  --status-orange-text: #9a3412;
  --status-pink-text: #9d174d;
  --status-red-text: #b91c1c;
  --status-green-bg: #166534;
  --status-orange-bg: #9a3412;
  --status-red-bg: #b91c1c;
}

/* ===== 다크 테마 ===== */
html[data-theme="dark"] {
  --bg-body: #1a1a2e;
  --bg-app: #16213e;
  --bg-card: #16213e;
  --bg-input: #222250;
  --bg-header: linear-gradient(135deg, #0f3460, #533483);
  --bg-hover: #222250;

  --text-primary: #e0e0e0;
  --text-secondary: #b0b0d0;
  --text-muted: #b0b0d0;
  --text-on-accent: #ffffff;

  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-text: #c4b5fd;
  --accent-light: #2a2a5a;
  --accent-bg: rgba(167, 139, 250, 0.15);
  --focus-ring: #facc15;

  --border: #333366;
  --border-hover: #a78bfa;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 4px 16px rgba(167, 139, 250, 0.3);

  /* 도구 페이지용 */
  --bg-bar: #1a1a3e;
  --bg-btn: #2a2a5a;
  --bg-btn-hover: #3a3a6a;
  --bg-stat: #222250;
  --bg-guide: #1e1e44;
  --bg-guide-hover: #2a2a5a;
  --text-guide: #b0b0e0;
  --border-guide: #333366;
  --text-info: #b0b0d0;
  --text-code: #c4b5fd;
  --bg-tab: #2a2a5a;
  --bg-tab-hover: #3a3a7a;
  --bg-tab-active: #7c3aed;
  --text-tab: #aaaaaa;
  --text-tab-active: #ffffff;
  --bg-emoji-tab: #2a3a2a;
  --bg-emoji-tab-hover: #3a5a3a;
  --bg-emoji-tab-active: #e67e22;
  --bg-char-btn: #222250;
  --bg-char-btn-hover: #7c3aed;
  --border-char: #333366;
  --bg-emoji-cell: #1e2e1e;
  --border-emoji: #2a3a2a;
  --bg-emoji-hover: #e67e22;
  --border-emoji-hover: #f39c12;
  --toast-bg: #7c3aed;
  --scrollbar-track: #1a1a3e;
  --scrollbar-thumb: #7c3aed;
  --progress-bg: #2a2a5a;
  --btn-clear-bg: #2a2a5a;
  --btn-clear-text: #cccccc;
  --btn-clear-hover: #3a3a6a;
  --btn-copy-bg: #7c3aed;
  --btn-copy-text: #ffffff;
  --btn-copy-hover: #8b5cf6;

  /* 성공/긍정 상태 */
  --bg-success: #1a2a1a;
  --bg-success-hover: #2a4a2a;
  --border-success: #2a4a2a;

  /* 의미적 텍스트 색상 */
  --text-success: #86efac;
  --text-amount: #c4b5fd;
  --text-highlight: #facc15;
  --text-section: #c4b5fd;
  --text-label: #aaaacc;
  --text-placeholder: #b0b0d0;
  --bg-item-hover: #1e2250;
  --bg-item-final: #1e1e50;
  --border-final: #7c3aed;

  /* 계산기용 */
  --calc-btn-bg: #222250;
  --calc-btn-hover: #2a2a6a;
  --calc-btn-active: #3a3a7a;
  --calc-op-bg: #2a2a5a;
  --calc-op-text: #b0b0e0;
  --calc-op-hover: #3a3a6a;
  --calc-fn-bg: #1e1e3a;
  --calc-fn-text: #8888bb;
  --calc-fn-hover: #2a2a4a;
  --calc-eq-bg: #7c3aed;
  --calc-eq-hover: #8b5cf6;
  --calc-eq-active: #a78bfa;
  --calc-display-bg: #1a1a3e;
  --calc-expr-text: #b0b0d0;
  --calc-result-text: #ffffff;

  --status-blue-text: #7dd3fc;
  --status-green-text: #86efac;
  --status-orange-text: #fdba74;
  --status-pink-text: #f9a8d4;
  --status-red-text: #fca5a5;
  --status-green-bg: #166534;
  --status-orange-bg: #9a3412;
  --status-red-bg: #b91c1c;
}

/* 클래스가 없는 본문 링크도 브라우저 기본 파랑 대신 테마 대비를 따른다. */
html[data-theme] a:not([class]) {
  color: var(--accent-text);
}

/* 키보드 사용자가 현재 조작 위치를 항상 확인할 수 있게 한다. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring, #4338ca) !important;
  outline-offset: 3px !important;
}

/* ===== 테마 토글 버튼 ===== */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  user-select: none;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

/* 메인 포털용 테마 토글 (히어로/헤더 밖에 있을 때) */
.theme-toggle-portal {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 1000;
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, top 0.3s;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  user-select: none;
}
.theme-toggle-portal:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
  box-shadow: var(--shadow-accent);
}
.theme-toggle-portal.blog-toggle-portal {
  right: 64px;
}

/* 개별 도구에서 헤더 폭을 차지하지 않는 공통 테마 전환 버튼 */
.theme-toggle-tool {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1000;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-md);
  font: 18px/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.theme-toggle-tool:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

/* 전환 애니메이션 */
html[data-theme] body,
html[data-theme] body * {
  transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* 성능을 위해 일부 요소는 전환 제외 */
html[data-theme] .char-btn,
html[data-theme] .char-grid button,
html[data-theme] .calc-btn {
  transition: background-color 0.12s, transform 0.12s, box-shadow 0.12s;
}

/* 운영체제의 동작 감소 설정은 개별 도구의 인라인 애니메이션에도 우선한다. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme],
  html[data-theme] body,
  html[data-theme] body *,
  html[data-theme] body *::before,
  html[data-theme] body *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}