/* public/lawa-guide/guide.css — LAWA 활용 매뉴얼 공용 스타일 (대표 10-12)
   【v2 — 대표 10-12 「이글의 핵심 … 영역배경 넣은 거 똑같아서 별로 · 미리 보기 화면도 너무 비슷」】
     블로그 글 구성: 분류(.crumb) · 제목 · 넓은 머리 그림(.banner) · 본문(.body, H2 사이 구분선 — 목차는 10-12 삭제)
     · 예시 질문(.ask 번호 목록 + 복사) · 화면 그림(.shot + 캡션) · 마무리(.end) · 함께 보면 좋은 글(.more 카드)
     목록(index): 분류 탭(.tabs) · 대표 글(.feat) · 글 목록(.row — 오른쪽 작은 썸네일)
   【원칙】 색 배경 상자로 영역을 나누지 않는다 — 구분선·여백·글자 굵기로 나눈다.
   【주의】 그림은 CSS·인라인 SVG 로만 그린다(외부 이미지·다른 서비스 그림을 쓰지 않는다). */
:root{--ink:#111827;--ink2:#374151;--dim:#6b7280;--line:#e5e7eb;--blue:#3858C4;--bg:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.top img{height:26px}
.top b{color:var(--blue);font-weight:900;letter-spacing:.5px}
.top nav{margin-left:auto;display:flex;gap:16px;font-size:14px}
.top nav a{color:var(--ink2);text-decoration:none;font-weight:600;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav a.join{background:#FFE500;color:#111;padding:6px 12px;border-radius:8px;font-weight:800}   /* ★노무사 회원가입(10-12) — 로무앤톡 노랑 */
.top nav a.join:hover{background:#F5DA00}

/* 글 페이지 */
.wrap{max-width:760px;margin:0 auto;padding:36px 20px 80px}
.crumb{font-size:13.5px;color:var(--dim);margin:0 0 10px;font-weight:600}
.crumb a{color:var(--blue);text-decoration:none}
h1{font-size:30px;line-height:1.35;letter-spacing:-.5px;margin:0 0 12px}
h1+.banner{margin-top:24px}   /* 날짜·작성 줄을 뺀 자리(대표 10-12) — 제목과 머리 그림 사이 */
.banner{display:flex;align-items:center;justify-content:space-between;gap:20px;aspect-ratio:2.4/1;border-radius:12px;padding:0 9%;margin:0 0 26px}
.banner .bt small{display:block;font-size:13px;opacity:.7;font-weight:600;margin-bottom:6px}
.banner .bt strong{font-size:30px;font-weight:800;letter-spacing:-.5px}
.banner svg{flex-shrink:0}
/* ★파스텔 그라데이션 + 같은 계열 진한 글자·아이콘(대표 10-12 「너무 원색 — 파스텔톤이나 그라데이션」) */
.t-blue{background:linear-gradient(135deg,#E6EDFF,#C9D7FF);color:#3858C4}
.t-indigo{background:linear-gradient(135deg,#ECE8FF,#D5CCFF);color:#4B3FA6}
.t-navy{background:linear-gradient(135deg,#E6EAF2,#C9D2E4);color:#1F2A44}
.t-green{background:linear-gradient(135deg,#E2F5EC,#BFE8D4);color:#137A55}
.t-teal{background:linear-gradient(135deg,#DFF4F2,#BCE6E1);color:#0F6E69}
.t-amber{background:linear-gradient(135deg,#FFF1DC,#FFDCA8);color:#9A5A06}
.t-plum{background:linear-gradient(135deg,#F6E6F1,#EBC9E0);color:#7A3166}
.t-slate{background:linear-gradient(135deg,#EDF0F4,#D5DBE3);color:#475569}
.t-rose{background:linear-gradient(135deg,#FDE6EC,#F8C6D3);color:#B23A5B}
.t-sky{background:linear-gradient(135deg,#E3F3FD,#C2E4FA);color:#0B6A9E}
.t-orange{background:linear-gradient(135deg,#FFEEE2,#FFD6BC);color:#B84A12}
.t-gold{background:linear-gradient(135deg,#FFF7DC,#FFE8A6);color:#8A6100}
.t-lime{background:linear-gradient(135deg,#EEF7DE,#D6EDB0);color:#4D7A12}
.sub{font-size:17px;color:var(--ink2);margin:0 0 22px}
.body{font-size:16.5px;color:var(--ink2)}
.body .lead{font-size:17px;color:var(--ink);margin:0 0 16px}
.body h2{font-size:23px;color:var(--ink);margin:8px 0 12px;letter-spacing:-.3px;scroll-margin-top:70px}
.body h3{font-size:18px;color:var(--ink);margin:26px 0 8px}
.body hr.sec{border:0;border-top:1px solid var(--line);margin:40px 0 32px}
.body ul,.body ol{padding-left:22px}
.body li{margin:4px 0}
.body .note{font-size:15px;color:var(--dim)}
.body .note::before{content:"※ "}
/* 표 — ★v1 모양으로 되돌림(대표 10-12 「이전 버전이 더 명확하고 시인성이 좋았음 원복」): 회색 머리줄 · 얇은 줄 */
table{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0 20px}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:#F7F8FA;font-weight:700;color:var(--ink)}
td:first-child,th:first-child{white-space:nowrap;width:1%}

/* 예시 질문 — 회색 카드 + 복사(guide.js) · ★대표 10-12 「예시 영역은 카드영역으로 둬야 구분」(v1 모양으로 되돌림) */
.ask{list-style:none;padding:0 !important;margin:12px 0 22px}
.ask li{display:flex;align-items:center;gap:10px;background:#F3F4F6;border-radius:10px;padding:12px 14px;margin:8px 0;font-size:15px;color:var(--ink)}
.ask li span{flex:1}
.ask button{flex:0 0 auto;border:0;background:none;color:#9ca3af;cursor:pointer;font:inherit;font-size:13px;white-space:nowrap}
.ask button:hover{color:var(--ink2)}
.ask button.ok{color:var(--blue)}

/* 화면 그림 — 흰 바탕 테두리 + 캡션 */
.shot{margin:18px 0 24px}
.shot .ui{border:1px solid #d6dae3;border-radius:10px;padding:16px 16px 12px;background:#F7F8FA;box-shadow:0 1px 2px rgba(17,24,39,.04)}   /* ★아주 연한 회색 — 본문과 구분(대표 10-12) */
.shot .ph{color:var(--ink);font-size:14.5px;min-height:42px}
.shot .file{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 10px;font-size:12.5px;margin-bottom:8px;color:var(--ink2)}
.shot .file::before{content:"첨부 · ";color:var(--dim)}
.shot .bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12.5px}
.shot .sp{flex:1}
.shot .chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink2);white-space:nowrap;background:#fff}
.shot .chip.on{border-color:var(--blue);color:var(--blue);font-weight:800}
.shot .send{width:26px;height:26px;border-radius:7px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.shot figcaption{font-size:13px;color:var(--dim);text-align:center;margin-top:8px}

/* 마무리 */
.end{margin-top:0;padding-top:0}   /* 구분선은 본문 H2 앞 hr.sec 하나만 — 두 줄 겹침 방지 */
.end h2{font-size:21px;margin:0 0 8px;color:var(--ink)}
.end p{margin:0 0 16px}
.btn{display:inline-block;background:var(--ink);color:#fff !important;text-decoration:none;font-weight:800;padding:11px 22px;border-radius:8px;font-size:15px}
.btn:hover{background:var(--blue)}

/* 함께 보면 좋은 글 — 카드 */
.more{margin-top:56px}
.more h2{font-size:20px;margin:0 0 14px}
.more .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.more .row{flex-direction:column-reverse;border:0;padding:0;gap:10px}
.more .row .thumb{width:100%;height:auto;aspect-ratio:16/9}
.more .row .rx span{display:none}
.disc{margin-top:48px;font-size:12.5px;color:#9ca3af}

/* 목록(index) */
.hub{max-width:960px}
.hub h1{font-size:32px;margin-top:8px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:8px 0 26px}
.tabs button{border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--dim);padding:10px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center;text-decoration:none;color:inherit;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:6px}
.feat .banner{margin:0;padding:0 8%}
.feat .banner .bt strong{font-size:24px}
.feat .banner svg{width:84px;height:84px}
.fx i,.rx i{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:6px}
.fx b{display:block;font-size:22px;line-height:1.4;color:var(--ink);margin-bottom:8px}
.fx span,.rx span{display:block;font-size:15px;color:var(--dim);line-height:1.65}
.fx em,.rx em{display:block;font-style:normal;font-size:13px;color:#9ca3af;margin-top:10px}
.row{display:flex;gap:22px;align-items:center;text-decoration:none;color:inherit;padding:22px 0;border-bottom:1px solid var(--line)}
.rx{flex:1;min-width:0}
.rx b{display:block;font-size:18px;line-height:1.45;color:var(--ink);margin-bottom:6px}
.row:hover b,.feat:hover b{color:var(--blue)}
.thumb{flex:0 0 auto;width:168px;height:108px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.row[hidden],.feat[hidden]{display:none}

@media(max-width:720px){
  td:first-child,th:first-child{white-space:normal;width:auto}   /* 좁은 화면은 첫 칸도 줄바꿈 — 가로 넘침 방지 */
  h1{font-size:24px}
  .banner{aspect-ratio:2/1;padding:0 7%}
  .banner .bt strong{font-size:22px}
  .banner svg{width:64px;height:64px}
  .body{font-size:16px}
  .feat{grid-template-columns:1fr}
  .thumb{width:96px;height:72px}
  .thumb svg{width:28px;height:28px}
  .rx b{font-size:16px}
  .rx span{display:none}
  .more .cards{grid-template-columns:1fr}
  .more .row{flex-direction:row;gap:14px}
  .more .row .thumb{width:96px;aspect-ratio:auto}
  .top nav{gap:10px;font-size:13px}
  .top nav a:nth-child(2){display:none}
  .tabs{flex-wrap:nowrap;overflow-x:auto}
  .tabs button{white-space:nowrap}
}

/* ★썸네일·머리 그림 꾸밈(대표 10-12 「아이콘을 키우던지 · 컬러만 보이니까 없어 보여」)
   흰 타일 위 큰 아이콘 + 옅은 흰 원 두 개(오른쪽 위·왼쪽 아래) */
.banner,.thumb{position:relative;overflow:hidden}
.banner::before,.banner::after,.thumb::before,.thumb::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none}
.banner::before,.thumb::before{width:46%;aspect-ratio:1;right:-12%;top:-30%}
.banner::after,.thumb::after{width:30%;aspect-ratio:1;left:-8%;bottom:-22%;background:rgba(255,255,255,.3)}
.banner .bt,.tile{position:relative;z-index:1}
.tile{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border-radius:22%;box-shadow:0 10px 24px rgba(31,42,68,.12)}
.banner .tile{width:128px;height:128px;border-radius:30px}
.thumb .tile{width:64px;height:64px;border-radius:16px}
.feat .banner .tile{width:104px;height:104px;border-radius:26px}
.feat .banner .tile svg{width:54px;height:54px}
.more .row .thumb .tile{width:72px;height:72px}
@media(max-width:720px){
  .banner .tile{width:84px;height:84px;border-radius:20px}
  .banner .tile svg{width:44px;height:44px}
  .thumb .tile{width:48px;height:48px;border-radius:12px}
  .thumb .tile svg{width:26px;height:26px}
}