@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
:root{
  --primary:#2563EB;--primary-light:#DBEAFE;--primary-dark:#1E40AF;
  --g50:#F8FAFC;--g100:#F1F5F9;--g200:#E2E8F0;--g300:#CBD5E1;
  --g400:#94A3B8;--g500:#64748B;--g700:#334155;--g900:#0F172A;
  --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --bg:#F8FAFC;--card-bg:#fff;--border:var(--g200);--text:var(--g900);--text-secondary:var(--g500);
  --sb-bg:#F1F5F9;--sb-border:var(--g200);--sb-text:var(--g500);--sb-hover:var(--primary-light);--sb-active:var(--primary);--sb-active-bg:#DBEAFE;
  --header-bg:rgba(255,255,255,.85);
}
[data-theme="dark"]{
  --primary:#60A5FA;--primary-light:#1E3A5F;--primary-dark:#3B82F6;
  --g50:#0F172A;--g100:#1E293B;--g200:#334155;--g300:#475569;
  --g400:#64748B;--g500:#94A3B8;--g700:#CBD5E1;--g900:#F1F5F9;
  --shadow:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --bg:#0F172A;--card-bg:#1E293B;--border:#334155;--text:#F1F5F9;--text-secondary:#94A3B8;
  --sb-bg:#1E293B;--sb-border:#334155;--sb-text:#94A3B8;--sb-hover:#1E3A5F;--sb-active:#60A5FA;--sb-active-bg:#1E3A5F;
  --header-bg:rgba(30,41,59,.85);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Pretendard Variable',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{text-decoration:none;color:inherit}

/* ===== App Layout ===== */
.app-layout{display:flex;min-height:100vh;background:var(--bg)}

/* ---- Sidebar ---- */
.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:var(--sb-bg);border-right:1px solid var(--sb-border);z-index:200;display:flex;flex-direction:column;transition:background .25s,border-color .25s}
.sidebar-logo-wrap{padding:18px 20px 14px;border-bottom:1px solid var(--sb-border);display:flex;align-items:center;gap:10px}
.sidebar-logo{font-size:20px;font-weight:800;color:var(--primary);letter-spacing:-.5px;line-height:1}
.sidebar-logo span{color:var(--text);font-weight:400}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;color:var(--sb-text);transition:all .12s;cursor:pointer;text-decoration:none}
.sidebar-item:hover{background:var(--sb-hover);color:var(--sb-active)}
.sidebar-item.active{background:var(--sb-active-bg);color:var(--sb-active);font-weight:600}
.sidebar-item .emoji{font-size:16px;width:22px;text-align:center;flex-shrink:0;line-height:1}
.sidebar-divider{height:1px;background:var(--sb-border);margin:8px 12px;opacity:.4}
.sidebar-footer{padding:10px;border-top:1px solid var(--sb-border)}
.sidebar-footer .sidebar-toggle{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;font-size:12px;color:var(--sb-text);cursor:pointer;transition:all .12s;border:none;background:none;width:100%;font-family:inherit}
.sidebar-footer .sidebar-toggle:hover{background:var(--sb-hover);color:var(--sb-active)}
.sidebar-footer .sidebar-toggle .emoji{font-size:15px;width:22px;text-align:center;flex-shrink:0}

/* ---- Main Area ---- */
.main-area{flex:1;min-width:0;display:flex;flex-direction:column}
.main-content{flex:1;padding:28px 32px 60px;display:flex;flex-direction:column;align-items:center}

/* ---- Header ---- */
.mt-header{position:sticky;top:0;z-index:100;background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:background .25s,border-color .25s}
.mt-header-inner{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 32px}
.mt-logo{display:none;font-size:17px;font-weight:800;color:var(--primary);letter-spacing:-.5px}
.mt-logo span{color:var(--text)}
.mt-nav{display:flex;gap:4px;align-items:center}
.mt-nav a{font-size:13px;font-weight:500;color:var(--text-secondary);padding:6px 12px;border-radius:8px;transition:.2s;text-decoration:none}
.mt-nav a:hover,.mt-nav a.active{color:var(--primary);background:var(--primary-light)}
.mt-nav .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);cursor:pointer;font-size:16px;transition:.15s;margin-left:4px}
.mt-nav .theme-btn:hover{background:var(--primary-light);border-color:var(--primary)}

/* Mobile bottom bar */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--sb-bg);border-top:1px solid var(--sb-border);z-index:200;padding:6px 8px;justify-content:space-around;transition:background .25s,border-color .25s}
.mobile-bar-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border-radius:8px;font-size:9px;font-weight:600;color:var(--sb-text);cursor:pointer;transition:.15s;border:none;background:none;font-family:inherit;min-width:0}
.mobile-bar-item .emoji{font-size:18px}
.mobile-bar-item.active{color:var(--sb-active);background:var(--sb-hover)}
.mobile-bar-item.dark-toggle{font-size:16px;padding:4px 12px}

/* Ad Slot - 심사 중 완전 숨김 */
.mt-ad,.mt-ad-box,.ad-slot,.ad-slot-middle,.ad-slot-inner,.ad-placeholder,.ad-box{display:none !important}

/* Security Badge */
.security-badge{display:inline-flex;align-items:center;gap:6px;background:#ECFDF5;color:#059669;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;margin-bottom:20px;border:1px solid #A7F3D0}
[data-theme="dark"] .security-badge{background:#064E3B;color:#6EE7B7;border-color:#065F46}
.security-badge span{font-size:14px}

/* Guide Section */
.guide-section{margin-top:24px}
.guide-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:12px}
.guide-card *{color:inherit}
.guide-card h2{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--text)!important}
.guide-card p{font-size:13px;line-height:1.8;color:var(--text-secondary)!important;margin-bottom:10px}
.guide-card strong{color:var(--text)!important}
.guide-card table{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0}
.guide-card th,.guide-card td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--g200)}
.guide-card th{background:var(--g100);font-weight:600;color:var(--g700)}

/* FAQ Item */
.faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--card-bg)}
.faq-q{padding:14px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text);user-select:none}
.faq-q::after{content:"\25bc";font-size:10px;color:var(--g400);transition:transform .25s}
.faq-item.open .faq-q::after{transform:rotate(180deg)}
.faq-a{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s;font-size:13px;color:var(--text-secondary);line-height:1.8}
.faq-item.open .faq-a{max-height:600px;padding:0 16px 14px}

/* Toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--g900);color:#fff;padding:12px 24px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:.35s;z-index:999;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
[data-theme="dark"] .toast{background:#1E293B;color:var(--g900);border:1px solid var(--border)}

/* Toggle Button (다크모드 대비 : 비활성=어두운 배경+밝은 회색 글자, 활성=파란 배경+흰 글자) */
[data-theme="dark"] .toggle-btn{background:var(--g100);border-color:var(--g400);color:var(--g500)}
[data-theme="dark"] .toggle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme="dark"] .toggle-btn:hover:not(.active){border-color:var(--g500)}

/* Footer */
.mt-footer{background:var(--card-bg);border-top:1px solid var(--border);padding:32px 20px;text-align:center;margin-top:60px}
.mt-footer p{font-size:12px;color:var(--g400);line-height:1.8;max-width:760px;margin:0 auto}
.mt-footer a{color:var(--g500);text-decoration:underline}

/* Responsive */
@media(max-width:768px){
  .sidebar{display:none}
  .main-area{margin-left:0}
  .main-content{padding:20px 20px 80px}
  .mt-header-inner{padding:0 20px}
  .mt-logo{display:flex}
  .mobile-bar{display:flex}
  .mt-footer{margin-bottom:60px}
}
@media(max-width:640px){
  .mt-header-inner{height:50px}
  .mt-logo{font-size:16px}
  .mt-nav a{font-size:12px;padding:4px 8px}
  .main-content{padding:16px 16px 80px}
  .mt-header-inner{padding:0 16px}
}
@media(max-width:480px){
  .mt-header-inner{height:46px}
  .mt-logo{font-size:15px}
  .mt-nav a{font-size:11px;padding:3px 6px;min-height:44px;display:inline-flex;align-items:center}
  .security-badge{font-size:11px;padding:5px 10px}
  .guide-card{padding:16px}
  .guide-card h2{font-size:14px}
  .guide-card p{font-size:12px}
  .faq-q{padding:12px 14px;font-size:12px;min-height:44px}
  .faq-a{font-size:12px}
  .toast{font-size:12px;padding:10px 18px;bottom:76px}

  /* Touch target 44px for interactive elements */
  button,.action-btn,.calc-btn,.result-btn,.lang-btn,.tool-btn,.convert-btn,.copy-btn,.all-btn,
  .quick-tag,.format-btn,.toggle-btn,.mt-faq-q,.file-remove,.thumb-remove,.download-btn,
  .preview-change-btn,.file-download,.copy-result-btn,.table-toggle{min-height:44px}
}
@media(min-width:769px){
  .mt-nav .theme-btn{display:none}
}

/* ===== Preview Page (index-preview.html) - 신규 pv-* 클래스 ===== */
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:var(--card-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.pv-logo{font-size:22px;font-weight:800;color:var(--primary);letter-spacing:-.5px}
.pv-logo span{color:var(--text);font-weight:400}
.pv-search{flex:1;max-width:420px;border:1.5px solid var(--border);border-radius:12px;padding:10px 16px;font-size:14px;font-family:inherit;outline:none;background:var(--bg);color:var(--text);transition:.2s}
.pv-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.pv-hero{text-align:center;padding:44px 20px 28px}
.pv-hero-title{font-size:28px;font-weight:800;letter-spacing:-1px;margin-bottom:16px;color:var(--text)}
.pv-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pv-badge{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px}
.pv-main{max-width:1080px;margin:0 auto;padding:12px 28px 40px}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pv-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:20px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:12px}
.pv-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pv-card-top{display:flex;align-items:center;justify-content:space-between}
.pv-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.pv-card-count{font-size:11px;color:var(--g400);font-weight:600}
.pv-card-name{font-size:16px;font-weight:700;color:var(--text)}
.pv-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.pv-card-tag{font-size:11px;color:var(--g500);background:var(--g100);padding:3px 10px;border-radius:10px}
.pv-card-active{border-color:var(--primary);box-shadow:var(--shadow-md)}
.pv-popular{max-width:1080px;margin:0 auto 60px;padding:0 28px}
.pv-popular-title{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text)}
.pv-popular-tags{display:flex;gap:8px;flex-wrap:wrap}
.pv-popular-tag{font-size:13px;color:var(--primary);background:var(--primary-light);border:1px solid var(--border);padding:7px 14px;border-radius:20px;cursor:pointer;transition:.15s}
.pv-popular-tag:hover{border-color:var(--primary);color:var(--primary-dark)}
@media(max-width:640px){
  .pv-main,.pv-popular{padding-left:16px;padding-right:16px}
  .pv-top{padding:14px 16px}
  .pv-hero-title{font-size:22px}
}

/* ===== Top Bar (sidebar 대체) : 다크 네이비 테마 ===== */
.tool-topbar{position:sticky;top:0;z-index:300;background:#0F172A;border-bottom:1px solid #1E293B}
.tool-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 20px;max-width:760px;margin:0 auto}
.tool-logo{font-size:20px;font-weight:800;color:#38BDF8;letter-spacing:-.5px;text-decoration:none}
.tool-logo span{color:#67E8F9;font-weight:400}
.tool-theme-btn{width:36px;height:36px;border:1px solid #334155;border-radius:9px;background:#1E293B;color:#94A3B8;cursor:pointer;font-size:16px;transition:.15s;display:inline-flex;align-items:center;justify-content:center}
.tool-theme-btn:hover{border-color:#38BDF8;color:#67E8F9}
.tool-theme-btn .theme-icon{font-size:18px}

/* ===== Breadcrumb ===== */
.tool-crumb{padding:10px 20px;background:#0F172A;border-bottom:1px solid #1E293B;margin-top:0}
.tool-crumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0 auto;padding:0 20px;max-width:760px;font-size:13px}
.tool-crumb-item{color:#CBD5E1}
.tool-crumb-item a{color:#67E8F9;text-decoration:none}
.tool-crumb-item a:hover{color:#38BDF8;text-decoration:underline}
.tool-crumb-sep{color:#475569;font-size:12px}
@media(max-width:768px){
  .tool-topbar-inner{padding:12px 16px}
  .tool-crumb{padding:8px 16px;font-size:12px}
}

/* ===== Tool Standard Layout (TYPE1 계산형 공용) : 다크모드 대비 ===== */
.tool-layout{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start}
.tool-input-panel{min-width:0;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.tool-input-panel .card-title{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text)}
.tool-result-panel{position:sticky;top:20px;min-width:0;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-md)}
.tool-result-hero{background:var(--primary);border-radius:var(--radius);padding:26px 24px;color:#fff;text-align:center;margin-bottom:16px}
.tool-result-hero .tool-hero-label{font-size:13px;opacity:.85;margin-bottom:6px;color:#fff}
.tool-result-hero .tool-hero-value{font-size:40px;font-weight:800;letter-spacing:-1px;color:#fff}
.tool-result-hero .tool-hero-sub{font-size:13px;opacity:.8;margin-top:6px;color:#fff}
.tool-result-detail{margin-top:4px}
.tool-result-detail .tool-detail-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}
.tool-result-detail .tool-detail-row:last-child{border-bottom:none}
.tool-result-detail .tool-detail-row .tool-detail-label{color:var(--text-secondary)}
.tool-result-detail .tool-detail-row .tool-detail-value{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.tool-result-detail .tool-detail-row.total{border-top:2px solid var(--border);padding-top:14px;font-size:15px}
.tool-result-detail .tool-detail-row.total .tool-detail-label{color:var(--text);font-weight:700}
@media(max-width:768px){
  .tool-layout{grid-template-columns:1fr}
  .tool-result-panel{position:static}
}
/* ========================================
   도구 페이지 공통 디자인 시스템 v2.0
   모든 도구 페이지가 이 클래스를 사용
   ======================================== */

/* 본문 wrapper */
.tool-page{max-width:760px;margin:0 auto;padding:24px 20px 80px}

/* 페이지 타이틀 */
.tool-title{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;color:var(--text)}
.tool-sub{font-size:14px;color:var(--text-secondary);margin-bottom:28px;line-height:1.6}

/* 카드 */
.tool-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}
.tool-card-title{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text)}

/* 입력 그룹 */
.tool-input-group{margin-bottom:16px}
.tool-label{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;display:block}
.tool-input-row{display:flex;gap:8px;align-items:center}
.tool-field{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;outline:none;transition:.2s;text-align:right;background:var(--card-bg);color:var(--text)}
.tool-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.tool-unit{font-size:14px;color:var(--text-secondary);font-weight:600;white-space:nowrap}

/* 토글 버튼 */
.tool-toggle-row{display:flex;gap:8px;margin-bottom:16px}
.tool-toggle-btn{flex:1;padding:11px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;transition:.2s;background:var(--card-bg);font-family:inherit;color:var(--text-secondary)}
.tool-toggle-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.tool-toggle-btn:hover:not(.active){border-color:var(--g300);background:var(--g50)}

/* 계산 버튼 */
.tool-btn{width:100%;padding:15px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:.2s;margin-top:8px;min-height:52px}
.tool-btn:hover{background:var(--primary-dark)}
.tool-btn:active{transform:scale(.98)}

/* 결과 영역 */
.tool-result{display:none}
.tool-result-big{text-align:center;padding:20px 0}
.tool-result-number{font-size:36px;font-weight:800;color:var(--primary);line-height:1.2}
.tool-result-label{font-size:14px;color:var(--text-secondary);margin-top:6px}
.tool-detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.tool-detail-row:last-child{border-bottom:none}
.tool-detail-row .label{color:var(--text-secondary)}
.tool-detail-row .value{font-weight:700;color:var(--text)}
.tool-disclaimer{font-size:11px;color:var(--text-secondary);text-align:center;margin-top:16px;line-height:1.6}

/* 모바일 대응 */
@media(max-width:768px){
  .tool-page{padding:16px 16px 80px}
  .tool-title{font-size:22px}
  .tool-card{padding:18px;border-radius:12px}
  .tool-btn{min-height:48px;font-size:15px}
  .tool-field{font-size:16px}
}
@media(max-width:480px){
  .tool-title{font-size:20px}
  .tool-result-number{font-size:28px}
  .tool-toggle-btn{font-size:12px;padding:9px}
}
/* ============================================================
   다크모드 강제 대응 (data-theme="dark" 기준)  2026-08
   ------------------------------------------------------------
   각 도구 페이지가 인라인 <style>로 하드코딩한 라이트 배경/라이트
   글자(예: .text-area{background:#fff;color:var(--g900)},
   .convert-btn{background:#fff;color:var(--g700)},
   body{background:#f5f7fa;color:#1a1a2e} 등)는 다크 토글 시
   흰배경+흰글씨/연회색 글씨로 읽기 어려워진다.
   common.css는 인라인보다 먼저 로드되므로, [data-theme="dark"]
   스코프(더 높은 특정도) + !important로 덮어 카드/입력/버튼/라벨이
   기존 변수 기준 라이트↔다크로 정상 전환되게 한다.
   헤더(.tool-topbar/.tool-crumb/.tool-logo/.tool-theme-btn)는
   다크 네이비 고정이므로 건드리지 않는다.
   ============================================================ */
[data-theme="dark"] body{background:var(--bg)!important;color:var(--text)!important}

/* 카드 / 패널 : 흰 배경 하드코딩 → 다크 카드 */
[data-theme="dark"] .card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .tool-input-panel,
[data-theme="dark"] .tool-result-panel,
[data-theme="dark"] .guide-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .mt-card,
[data-theme="dark"] .mt-guide,
[data-theme="dark"] .mt-faq-item,
[data-theme="dark"] .mt-file-item,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .preview-card,
[data-theme="dark"] .mt-upload{background:var(--card-bg)!important;border-color:var(--border)!important}
[data-theme="dark"] .guide-card table{color:var(--text)!important}
[data-theme="dark"] .guide-card th{background:var(--g100)!important;border-color:var(--border)!important;color:var(--text)!important}
[data-theme="dark"] .guide-card td{border-color:var(--border)!important;color:var(--text-secondary)!important}

/* 입력창(텍스트 계열) : 흰/연회색 배경 하드코딩 → 다크 입력 */
[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea{background:var(--card-bg)!important;color:var(--text)!important;border-color:var(--border)!important}

/* 라이트(아웃라인) 버튼 : 배경 다크 + 글자 밝게 */
[data-theme="dark"] .copy-btn,
[data-theme="dark"] .convert-btn,
[data-theme="dark"] .mt-btn-reset,
[data-theme="dark"] .mt-btn-outline{background:var(--card-bg)!important;color:var(--text)!important;border-color:var(--border)!important}

/* 라벨 / 타이틀 : 하드코딩 고정색 → 다크 기준 텍스트 */
[data-theme="dark"] .mt-label,
[data-theme="dark"] .tool-label,
[data-theme="dark"] .card-title,
[data-theme="dark"] .tool-card-title,
[data-theme="dark"] .mt-card-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .tool-title{color:var(--text)!important}
[data-theme="dark"] .mt-label-sub,
[data-theme="dark"] .page-sub,
[data-theme="dark"] .tool-sub{color:var(--text-secondary)!important}

/* mt- (탭/업로드/결과/경고) 계열 : 고정 라이트 틴트 → 다크 틴트 */
[data-theme="dark"] .mt-tabs{background:var(--g100)!important;border-color:var(--border)!important}
[data-theme="dark"] .mt-tab{color:var(--text-secondary)!important}
[data-theme="dark"] .mt-tab.active{background:var(--card-bg)!important;color:var(--primary)!important}
[data-theme="dark"] .mt-warn,
[data-theme="dark"] .mt-exif-detail{background:#3b2f06!important;border-color:#92600a!important;color:#fde68a!important}
[data-theme="dark"] .mt-result-summary{background:#1e3a5f!important;color:var(--text)!important}
[data-theme="dark"] .mt-result-summary .done-text{color:#93c5fd!important}
[data-theme="dark"] .mt-result-summary .done-sub,
[data-theme="dark"] .mt-file-size,
[data-theme="dark"] .mt-upload-sub{color:var(--text-secondary)!important}
[data-theme="dark"] .mt-upload-text{color:var(--text)!important}
[data-theme="dark"] .mt-upload-text{color:var(--text)!important}

/* ============================================================
   다크모드 전수 대응 - 라이트 배경 잔여 요소 (2026-08)
   ------------------------------------------------------------
   1) 개별 페이지가 하드코딩한 흰 배경의 "브러시성 세컨더리 버튼"
      (탭/선택/복사/스왑/다운로드-아웃라인 등) → 다크 카드 배경 + 밝은 글자.
      active/primary/accent 특정 상태는 의도된 강조(파랑/어둠)이므로
      :not()으로 보존한다.
   2) 라이트 배경 "안내/결과/클립/파일" 박스 → 다크 틴트 또는 다크 카드.
   ============================================================ */
[data-theme="dark"] .tab-btn:not(.active),
[data-theme="dark"] .lang-btn:not(.active),
[data-theme="dark"] .reset-btn,
[data-theme="dark"] .swap-btn,
[data-theme="dark"] .now-btn,
[data-theme="dark"] .spec-btn:not(.active),
[data-theme="dark"] .preset-btn:not(.active),
[data-theme="dark"] .nick-copy,
[data-theme="dark"] .pw-btn:not(.primary),
[data-theme="dark"] .multi-item .copy,
[data-theme="dark"] .quick-btn,
[data-theme="dark"] .tool-edit-btn:not(.accent),
[data-theme="dark"] .tool-effect-btn,
[data-theme="dark"] .pos-btn:not(.active),
[data-theme="dark"] .btn-download-all,
[data-theme="dark"] .file-download{background:var(--card-bg)!important;color:var(--text)!important;border-color:var(--border)!important}

/* OCR 결과 다운로드(.primary-btn, 다크navy) : 다크에서 밝게 반전돼 흰배경+흰글씨가 되는 것 방지 */
[data-theme="dark"] .result-btn:not(.primary-btn){background:var(--card-bg)!important;color:var(--text)!important;border-color:var(--border)!important}
[data-theme="dark"] .result-btn.primary-btn{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}

/* 라이트 배경 박스(클립/파일/팁/경고/생일) : 다크 틴트 또는 다크 카드 */
[data-theme="dark"] .tool-clip,
[data-theme="dark"] .file-item{background:var(--card-bg)!important;border-color:var(--border)!important}
[data-theme="dark"] .tip-card,
[data-theme="dark"] .birthday-box{background:#1e3a5f!important;border-color:#334155!important}
[data-theme="dark"] .tip-card .tip-text,
[data-theme="dark"] .birthday-box .label{color:var(--text-secondary)!important}
[data-theme="dark"] .warn{background:#3b2f06!important;border-color:#92600a!important;color:#fde68a!important}