/* public/nomusa-tone.css — ★노무사 안내 페이지 3종 공통 톤 (대표 10-12)
   【왜】 「너무 오래전에 만들어서 오늘 만든 거랑 비교됨 · 노무사 페이지 3개 모두 · 아이콘이랑 그림 영역은 유지하면서 새로 구성」
     nomusa-guide.html(로무앤톡 소개) · nomusa-solution.html(솔루션) · nomusa-ad.html(로무앤톡 AD)
     각 페이지 <style> 뒤에 이 파일을 읽는다 — 같은 규칙을 덮어써서 ★세 페이지가 한 톤이 된다(한 곳만 고치면 된다).
   【톤】 LAWA 활용 매뉴얼·가입 혜택 배너와 같다: 밝은 푸른 바탕(#F5F9FF) · 퍼플 표시(#6B4FD8) · 회색 글자(#757C8D) · 파랑 강조(#3858C4)
     ★아이콘(이모지)·화면 예시·그림 영역은 그대로 두고, 담는 상자(파스텔 타일)·색·카드만 바꾼다.
     ★노랑 버튼(광고하기·회원가입)은 로무앤톡 브랜드라 둔다. 노랑·주황 ★바탕 상자와 강조 글자만 걷는다.
   【주의】 이 파일 안에 블록 주석 시작 기호를 쓰지 않는다. */
:root{--ink:#111827;--sub:#4B5563;--mut:#757C8D;--panel:#F7F9FC;--line:#E6EAF2;--r:16px;--navy:#3858C4}
body{color:var(--ink)}

/* 순차 오픈 안내 띠 */
.notice{background:#F5F9FF;border-bottom:1px solid #E1E8F5;color:#4B5563;text-align:center;font-size:14px;font-weight:700;padding:10px 16px;line-height:1.5}

/* 첫 화면 */
.hero{background:linear-gradient(180deg,#F5F9FF 0%,#FFFFFF 100%)}
.hero h1 b{color:#3858C4}
.kicker{color:#6B4FD8;background:#F1EDFF;padding:5px 12px;border-radius:999px;font-size:12.5px;letter-spacing:0}

/* 아이콘 — 이모지는 그대로, 담는 자리만 파스텔 타일로(매뉴얼 썸네일과 같은 그라데이션) */
.vcard .ic,.way .ic{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;
  background:linear-gradient(135deg,#E6EDFF,#C9D7FF);box-shadow:0 8px 18px rgba(31,42,68,.08)}
.vcard:nth-child(4n+2) .ic,.way:nth-child(4n+2) .ic{background:linear-gradient(135deg,#ECE8FF,#D5CCFF)}
.vcard:nth-child(4n+3) .ic,.way:nth-child(4n+3) .ic{background:linear-gradient(135deg,#E2F5EC,#BFE8D4)}
.vcard:nth-child(4n+4) .ic,.way:nth-child(4n+4) .ic{background:linear-gradient(135deg,#FFF1DC,#FFDCA8)}
/* 카드 순서대로 파랑 → 보라 → 초록 → 주황 파스텔이 돈다 */

/* 카드 — 모서리·테두리·그림자 하나로 */
.vcard,.way,.adcard,.ucard{border-radius:var(--r);border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,24,39,.04);transition:transform .15s,box-shadow .15s}
.vcard:hover,.way:hover,.adcard:hover,.ucard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,42,68,.08)}
.way p,.vcard p,.adcard p,.ucard p{color:var(--mut)}

/* 원칙·혜택 상자 — 노랑 바탕 → 밝은 푸른 바탕 */
.compliance{background:#F5F9FF !important;border:1px solid #E1E8F5 !important}
.compliance .ic{width:44px;height:44px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 10px rgba(31,42,68,.06)}
.compliance p{color:var(--sub)}
.hl{color:#6B4FD8}

/* 그림 영역 바탕(노랑 → 연보라) · 단계 번호 · 강점 */
.feat__art{background:linear-gradient(135deg,#ECE8FF,#D5CCFF)}
.step__n{background:#EEF3FF;color:#3858C4}
.adv__i{background:#fff}
.adv__i--hi{border:1px solid var(--line);background:#fff}
.adv__i--hi b{color:var(--ink)}

/* 화면 예시 안의 작은 표시 — 노랑 → 파랑·보라 */
.doctab.on{background:#EEF3FF;color:#1F2A44;border-color:#C9D7FF}
.talk__cat{background:#F1EDFF;color:#6B4FD8}
.pay__note{background:#F5F9FF;color:#3858C4}

/* 마무리 박스 */
.cta{background:#F5F9FF;border-color:#E1E8F5}