/* 법률데이터 (law-data.cloud): 짙은 남보라에 청록 수치 강조. 데이터 보드처럼 — 숫자를 고정폭으로, 요지·기한은 칩, 중간 둥근 카드.
   site.css 뒤에 덧씌운다. html:root 는 build 의 테마 색 지정보다 우선한다. */
html:root {
  --baize: #2e2a5a;
  --baize-deep: #1f1c40;
  --baize-text: #f2f1fb;
  --baize-muted: #b4b0d6;
  --ink: #1c1b2b;
  --muted: #5a5873;
  --line: #e1dff0;
  --sage: #f4f3fb;
  --link: #0e7490;
  --seal: #0e7490;
  --hot: #22d3ee;
  --r: 10px;
}

/* 머리글: 남보라, 아래 청록 데이터 막대 */
.top { background: var(--baize); box-shadow: inset 0 -3px 0 var(--hot); }
.call { border-radius: var(--r); }
.top .call-apply { background: var(--seal); color: #fff; }
.top .call-apply:hover { background: #155e75; color: #fff; }

.sheet, .hook, .tool, .note, .mid-cta, .gist, .cta, .promo img, .case-cta, .way, .btn, .kakao, .opts label, .tool input, .tool select { border-radius: var(--r); }
.btn { background: var(--seal); }
.btn:hover { background: #155e75; }

/* 숫자는 고정폭 숫자로 */
body { font-variant-numeric: tabular-nums; }

/* 첫 화면: 격자 무늬 위 남보라 */
.hero { background: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(160deg, #2e2a5a 0%, #1f1c40 100%); }
.hero h1 { font-weight: 800; letter-spacing: -.03em; }
.hero-links a { color: #67e8f9; font-weight: 600; }
.band.sage { background: var(--sage); }
.band h2.title { font-weight: 800; letter-spacing: -.02em; }
.band h2.title::after { content: ''; display: block; width: 48px; height: 6px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--seal) 0 60%, var(--hot) 60%); }
.way { padding: 22px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(46, 42, 90, .35); }
.picks a::after { color: var(--seal); }

/* 본문: 소제목 앞 막대, 요지는 데이터 카드, 단계는 사각 번호 */
.page-head h1 { font-weight: 800; letter-spacing: -.025em; }
.article h2 { font-weight: 800; }
.article h2::before { content: ''; display: inline-block; width: 4px; height: 1em; margin: 0 10px -2px 0; border-radius: 2px; background: linear-gradient(var(--hot), var(--seal)); }
.gist { display: block; background: var(--sage); box-shadow: inset 0 0 0 1px var(--line); }
.gist-tag { display: inline-block; writing-mode: horizontal-tb; letter-spacing: .04em; margin: 14px 0 0 18px; padding: 3px 10px; border-radius: 6px; background: var(--baize); color: #67e8f9; font-size: 12.5px; }
.gist p { padding-top: 8px; }
.tw th { background: #ecebf8; }
.steps li::before { background: var(--baize); color: #67e8f9; border-color: var(--baize); border-radius: 6px; font-weight: 800; }
.steps li:not(:last-child)::after { background: #c7c4e6; width: 2px; }
.note { background: #ecfeff; box-shadow: inset 3px 0 0 var(--seal); }

/* 상담 블록 */
.cta { background: var(--baize); box-shadow: inset 0 4px 0 var(--hot); }
.cta .btn { background: var(--hot); color: #1c1b2b; }
.cta .btn:hover { background: #67e8f9; color: #1c1b2b; }
.case-cta { background: #ecfeff; box-shadow: inset 0 0 0 1.5px #a5f3fc; }

/* 키워드 랜딩 */
.lp-hero { background: #18163a; }
.lp-hero .kw, .lp-live b { color: #67e8f9; }
.lp-promo { background: #18163a; }
.lp-trust { background: #18163a; }
.lp-hero h1 em { color: #67e8f9; }
.lp-hero .lp-btn { border-radius: var(--r); }

/* 상담 변호사 */
.lw-badge { background: #ecfeff; color: #155e75; }

/* 바닥글 */
.foot { background: var(--baize-deep); border-top: 3px solid var(--hot); }