/* 단위사전 (kunitdb.com) 사이트 정체성: 대표색 청록, 보조 먹색. 공통 구성요소는 /assets/ui.css.
   장식은 직접 그린 저울·자 도형(사람·캐릭터 없음)이며 색은 토큰을 따른다. */
:root {
  --brand: #0d6b6b;
  --brand-ink: #ffffff;
  --brand-soft: #e2f2f1;
  --accent: #3c4a50;
  --m-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 0v12M5 0v5M9 0v5M13 0v5M17 0v5M21 0v8M25 0v5M29 0v5M33 0v5M37 0v5'/%3E%3C/svg%3E");
  --m-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 130' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 14v100M46 118h68M30 36h100'/%3E%3Ccircle cx='80' cy='14' r='5'/%3E%3Cpath d='M30 36l-20 46a20 20 0 0 0 40 0z'/%3E%3Cpath d='M130 36l-20 46a20 20 0 0 0 40 0z'/%3E%3Cpath d='M12 84h36M112 84h36'/%3E%3C/svg%3E");
  --m-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='56' height='16' rx='3'/%3E%3Cpath d='M10 2v7M20 2v5M30 2v9M40 2v5M50 2v7'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #6fd0cb;
    --brand-ink: #0b2624;
    --brand-soft: #183231;
    --accent: #b8c4c8;
  }
}
:root[data-theme="dark"] {
  --brand: #6fd0cb;
  --brand-ink: #0b2624;
  --brand-soft: #183231;
  --accent: #b8c4c8;
}

/* 워드마크: 청록 + 먹색 세로 획 */
.brand { display: inline-flex; align-items: baseline; gap: 6px; }
.brand::before { content: ""; width: 4px; height: 18px; background: var(--accent); border-radius: 2px; align-self: center; }

/* 헤더 아래 눈금 띠 */
.top { border-bottom: 0; }
.top::after {
  content: ""; display: block; height: 10px; background: var(--accent); opacity: 0.45;
  -webkit-mask: var(--m-ruler) left top / 40px 10px repeat-x; mask: var(--m-ruler) left top / 40px 10px repeat-x;
}

/* 홈 히어로: 제목 위 작은 자, 도구 뒤 큰 저울(아주 옅게) */
.deco-scale {
  display: block; width: 56px; height: 18px; background: var(--accent);
  -webkit-mask: var(--m-mini) left center / contain no-repeat; mask: var(--m-mini) left center / contain no-repeat;
}
.home-hero { isolation: isolate; }
.home-hero::before {
  content: ""; position: absolute; right: -6px; top: -2px; width: 110px; height: 90px; pointer-events: none; z-index: -1;
  background: var(--brand); opacity: 0.11;
  -webkit-mask: var(--m-scale) center / contain no-repeat; mask: var(--m-scale) center / contain no-repeat;
}
@media (min-width: 900px) { .home-hero::before { width: 190px; height: 154px; right: 57%; top: 70px; } }

/* 홈 도구 */
.hero-tool .tool { margin-top: 0; border-top: 3px solid var(--brand); }
.hero-tool h2 { font-size: 16px; margin: 0 0 var(--s2); }
.hero-tool .hero-num { color: var(--brand); }
.tool .result-hero { background: var(--brand-soft); }