/* 로잉 (law-ing.cloud): 숯색 바탕에 주황 진행 표시. 크고 굵은 제목, 많이 둥근 카드, 단계 번호를 주황 원으로.
   site.css 뒤에 덧씌운다. html:root 는 build 의 테마 색 지정보다 우선한다. */
html:root {
  --baize: #1f2329;
  --baize-deep: #15181c;
  --baize-text: #f5f3f0;
  --baize-muted: #b3b8bf;
  --ink: #1b1d21;
  --muted: #5c6168;
  --line: #e6e1da;
  --sage: #f7f3ee;
  --link: #b9400f;
  --seal: #c2410c;
  --hot: #f97316;
  --r: 18px;
}

/* 머리글: 숯색, 아래 주황 진행선 */
.top { background: var(--baize); box-shadow: inset 0 -3px 0 var(--hot); }
.call { border-radius: 999px; }
.top .call-apply { background: var(--seal); color: #fff; }
.top .call-apply:hover { background: #a3360a; color: #fff; }

/* 많이 둥근 모서리 */
.sheet, .hook, .tool, .note, .mid-cta, .gist, .cta, .promo img, .case-cta, .way { border-radius: var(--r); }
.btn, .kakao, .opts label, .tool input, .tool select { border-radius: 999px; }
.btn { background: var(--seal); }
.btn:hover { background: #a3360a; }

/* 첫 화면: 숯색 위 큰 굵은 글씨, 주황 링크 */
.hero { background: radial-gradient(120% 90% at 85% 0%, #2b3038 0%, #1f2329 55%, #181b20 100%); }
.hero h1 { font-weight: 800; letter-spacing: -.03em; }
.hero-links a { color: #ffb27a; font-weight: 600; }
.sheet { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.band.sage { background: var(--sage); }
.band h2.title { font-weight: 800; letter-spacing: -.025em; }
.band h2.title::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--hot), #fdba74); }
.way { padding: 24px; background: var(--sage); }
.picks a::after { color: var(--hot); }

/* 본문: 소제목 앞 주황 점, 요지는 따뜻한 상자, 단계는 주황 원 */
.page-head h1 { font-weight: 800; letter-spacing: -.025em; }
.article h2 { font-weight: 800; letter-spacing: -.02em; }
.article h2::before { content: ''; display: inline-block; width: 10px; height: 10px; margin: 0 10px 3px 0; border-radius: 50%; background: var(--hot); vertical-align: middle; }
.gist { display: block; background: var(--sage); }
.gist-tag { display: inline-block; writing-mode: horizontal-tb; letter-spacing: 0; margin: 16px 0 0 20px; padding: 4px 12px; border-radius: 999px; background: var(--seal); color: #fff; font-size: 13px; }
.gist p { padding-top: 10px; }
.steps li::before { background: var(--hot); color: #fff; border-color: var(--hot); border-radius: 50%; font-weight: 800; }
.steps li:not(:last-child)::after { background: #fdba74; width: 2px; }
.note { background: #fff7ed; }

/* 상담 블록 */
.cta { background: var(--baize); box-shadow: inset 0 4px 0 var(--hot); }
.cta .btn { background: var(--hot); color: #1b1d21; }
.cta .btn:hover { background: #fb923c; color: #1b1d21; }
.case-cta { background: #fff7ed; border-left: 0; box-shadow: inset 0 0 0 1.5px #fed7aa; }

/* 키워드 랜딩 */
.lp-hero { background: #16181c; }
.lp-hero .kw, .lp-live b { color: #fdba74; }
.lp-live { border-color: rgba(253, 186, 116, .45); background: rgba(253, 186, 116, .08); }
.lp-promo { background: #16181c; }
.lp-trust { background: #16181c; border-top-color: rgba(253, 186, 116, .2); }
.lp-trust-b { border-color: rgba(253, 186, 116, .55); background: radial-gradient(ellipse at top, rgba(249, 115, 22, .14), rgba(249, 115, 22, .02) 70%); }
.lp-trust h3 { color: #fdba74; }

/* 바닥글 */
.foot { background: #15181c; border-top: 3px solid var(--hot); }
.lp-hero h1 em { color: #fdba74; }
.lp-hero .lp-btn { border-radius: 999px; }