/* ════════════════════════════════════════════════════════════
   Tools Hub 공통 디자인 토큰 — typewriter 미니멀 (선·타이포 중심)
   _auto_layout.php 가 각 도구 CSS '이후'에 로드 → 색/모서리/그림자 통일.
   도구별 레이아웃(그리드/폼 배치 등)은 각 style_*.css 유지.
════════════════════════════════════════════════════════════ */

/* ── 디자인 토큰 (도구들이 쓰는 변수명 총망라 → var() 사용 도구는 자동 통일) ── */
/* ★ .mb-wrap 스코프로 한정 — :root(전역)면 테마 헤더(회원 아이콘 등)까지 색이 오염됨 */
.mb-wrap{
  --bg:#ffffff; --card:#ffffff; --surface:#ffffff; --panel:#ffffff; --panel-bg:#ffffff;
  --ink:#111827; --text:#111827; --fg:#111827; --heading:#111827; --title:#111827;
  --muted:#6b7280; --sub:#6b7280; --subtle:#6b7280; --light:#9ca3af; --faint:#9ca3af;
  --line:#e5e7eb; --border:#e5e7eb; --divider:#e5e7eb; --stroke:#e5e7eb;
  --accent:#2563eb; --primary:#2563eb; --brand:#2563eb; --link:#2563eb; --blue:#2563eb;
  --chip:#f3f4f6; --chipText:#374151; --chip-text:#374151; --tag:#f3f4f6; --tag-bg:#f3f4f6;
  --btn:#111827; --btnText:#ffffff; --btn-text:#ffffff;
  --radius:4px; --radius2:3px; --radius-sm:2px; --radius-lg:6px; --round:4px;
  --shadow:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
}

/* ── 폰트: 테마(comvillain)의 'Paperlogy'를 상속 — 별도 폰트를 강제하지 않음 ──
   (이전엔 body에 Pretendard를 강제해 테마 폰트와 달라 보였음. 규칙 제거 → 테마 폰트 통일) */

/* ── 공통 '사용 안내' 섹션 (LOGIC.md 표준 — 모든 도구 동일) ── */
.guide-section{ margin-top:28px; background:#fafafa; border:1px solid #e5e7eb; border-radius:4px; padding:22px; box-shadow:none; }
.guide-section h2{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 10px; color:#111827; }
.guide-section h2:not(:first-child){ margin-top:18px; }
.guide-steps, .guide-features, .guide-usecase{ margin:0; padding-left:18px; color:#6b7280; font-size:13px; line-height:1.8; }
.guide-steps strong, .guide-features strong{ color:#111827; }
.guide-privacy{ margin-top:16px; background:#f0f6ff; border:1px solid #dbe5f5; border-radius:3px; padding:12px 14px; font-size:12px; color:#1e40af; line-height:1.55; }

/* ── 배경 흰색 통일 + templates 박스 스타일 + 호버 그림자 금지 ── */
html, body{ background:#fff !important; }   /* 좌우 여백(mb-wrap 바깥)까지 흰색 */
.mb-wrap{ background:#fff; color:#111827; }

/* 박스류 = templates 카드 스타일 (흰 배경 + 1.5px 테두리 + 살짝 둥근모서리) */
.mb-wrap .card, .mb-wrap .panel, .mb-wrap .box, .mb-wrap .tool-card, .mb-wrap .result,
.mb-wrap .output, .mb-wrap fieldset, .mb-wrap .pcest-card, .mb-wrap .guide-section,
.mb-wrap .tool-box, .mb-wrap .group, .mb-wrap .pane{
  background:#fff !important; border:1.5px solid #e2e8f0 !important; border-radius:12px !important;
}
/* 입력·버튼은 살짝만 둥글게 */
.mb-wrap button, .mb-wrap .btn, .mb-wrap input, .mb-wrap select, .mb-wrap textarea{ border-radius:8px !important; }

/* 그림자·호버 이동 효과 전면 금지 (마우스 오버 쉐도우 X) */
.mb-wrap *{ box-shadow:none !important; }
.mb-wrap *:hover{ box-shadow:none !important; transform:none !important; }

/* ── 도구 자체 상단 제목(h1) 숨김 ── */
/* 신규 도구 공통 패턴: <div class="xx-head"><h1 class="xx-title">제목</h1><p class="xx-sub">설명</p></div>
   상단 자동 제목(mb-board-title)과 중복되므로 자체 h1만 숨기고, 설명(sub)은 그대로 표시.
   → 모든 도구 상단이 "제목(자동) + 설명" 한 세트로 통일됨. 미래 도구도 패턴만 따르면 자동 적용. */
.mb-wrap h1[class$="-title"]{ display:none !important; }
.mb-wrap [class$="-head"]{ margin-top:0 !important; }

/* ── 상단 자동 제목(mb-board-title) 크기 통일 — 인덱스·모든 도구 동일하게 ── */
.mb-wrap .mb-board-title{ font-size:26px !important; font-weight:800 !important; letter-spacing:-.02em; }