/* ===========================================================
HandsMate Blog — 공통 스타일
사용법: 에 아래 두 줄, 에 data-page 지정
글 페이지는 으로 카테고리 색 지정
=========================================================== */
:root{
--ink:#15171C; --body:#3E4553; --muted:#60677A;
--line:#E8EAEF; --soft:#F7F8FA; --cta:#2E6BF0; --cta-hover:#2257CC;
/* 카테고리 6색: 진한 색(글자/포인트) / 옅은 색(배경) / 히어로 배경 */
--c1:#12A05F; --c1b:#DCF5E8; --c1h:#A8E8C4; /* 개발방식 No.01–05 */
--c2:#D33F95; --c2b:#FCEDF5; --c2h:#F9DCEC; /* MVP 기획 No.06–10 */
--c3:#9A7A00; --c3b:#FAF6DC; --c3h:#FAF1A8; /* 견적·업체선정 No.11–15 */
--c4:#7442C6; --c4b:#F0E9FC; --c4h:#DDC9F6; /* 계약·권리 No.16–20 */
--c5:#1B7FC4; --c5b:#DDEFFA; --c5h:#ADD8F5; /* 개발·검수 No.21–25 */
--c6:#0E9A94; --c6b:#D8F3F1; --c6h:#9FE3DE; /* 인수·운영 No.26–30 */
--c1d:#0A5F39; --c2d:#7D2159; --c3d:#5C4900; --c4d:#452476; --c5d:#0F4C77; --c6d:#075C58;
--cat:var(--c1); --catb:var(--c1b); --cath:var(--c1h); --catd:var(--c1d);
}
[data-cat="1"]{--cat:var(--c1);--catb:var(--c1b);--cath:var(--c1h);--catd:var(--c1d)}
[data-cat="2"]{--cat:var(--c2);--catb:var(--c2b);--cath:var(--c2h);--catd:var(--c2d)}
[data-cat="3"]{--cat:var(--c3);--catb:var(--c3b);--cath:var(--c3h);--catd:var(--c3d)}
[data-cat="4"]{--cat:var(--c4);--catb:var(--c4b);--cath:var(--c4h);--catd:var(--c4d)}
[data-cat="5"]{--cat:var(--c5);--catb:var(--c5b);--cath:var(--c5h);--catd:var(--c5d)}
[data-cat="6"]{--cat:var(--c6);--catb:var(--c6b);--cath:var(--c6h);--catd:var(--c6d)}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:Pretendard,"Noto Sans KR",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap,.page{width:min(1180px,calc(100% - 32px));margin:0 auto 28px}
.panel{padding:56px 4px;background:#fff}
[data-page="article"] section:not(.hero),[data-page="tool"] section:not(.hero){padding:56px 4px;background:#fff}
h2{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 26px;line-height:1.7;font-size:16px}
/* ---------- 공통 헤더 / 푸터 ---------- */
.hm-site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px}
.hm-site-header__inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hm-site-brand span{margin-left:10px;padding-left:11px;border-left:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)!important;letter-spacing:0}
.hm-site-brand{display:inline-flex;align-items:center;font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink)!important}
.hm-site-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;font-size:14px}
.hm-site-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:8px;font-weight:600;color:var(--muted)!important}
.hm-site-nav a:hover{background:var(--soft)}
.hm-site-nav a[data-active="true"]{color:var(--ink)!important;font-weight:800}
.hm-site-footer{background:var(--c1b);border-radius:8px;margin-top:12px}
.hm-site-footer__inner{padding:18px 26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hm-site-footer__brand{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink);flex:none}
.hm-site-footer__copy{color:#2B3138;font-size:15.5px;font-weight:500;line-height:1.6;letter-spacing:-.01em}
/* ---------- 히어로 ---------- */
.hero{position:relative;overflow:hidden;border-radius:12px;background:var(--cath);margin-top:8px}
.hero svg.deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero svg.deco-sm{display:none}
.hero>*{position:relative;z-index:1}
.hero h1{font-weight:800;letter-spacing:-.035em;line-height:1.25}
[data-page="index"] .hero{background:#A8E8C4;padding:118px 32px 68px;text-align:center}
[data-page="index"] .hero h1{font-size:46px;margin:0 0 18px}
[data-page="index"] .hero p{max-width:660px;margin:0 auto;color:#1D3B2B;line-height:1.8;font-size:17px}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.stats span{background:#fff;border-radius:999px;padding:10px 19px;font-size:14.5px;color:var(--muted)}
.stats b{color:var(--ink);font-weight:800}
[data-page="list"] .hero{background:var(--cath);padding:96px 32px 52px;text-align:center}
[data-page="list"] .hero h1{font-size:38px;margin:0 0 12px}
[data-page="list"][data-cat] .hero h1{font-size:46px}
[data-page="list"][data-cat] .hero p{font-size:18px;max-width:1060px;text-wrap:balance;word-break:keep-all}
[data-page="list"][data-cat] .label{font-size:13px;padding:7px 14px;margin-bottom:18px}
[data-page="list"] .hero p{max-width:700px;margin:0 auto;color:#2B3138;line-height:1.8;font-size:17px}
[data-page="article"] .hero{padding:112px 40px 46px}
[data-page="article"] .hero svg.deco,[data-page="tool"] .hero svg.deco{height:auto;bottom:auto}
/* 실무 자료 히어로는 옅은 톤 */
[data-hero="soft"] .hero{background:var(--catb)}
[data-hero="soft"] .hero .lead,[data-hero="soft"] .hero-grid>div>p{color:var(--body)}
[data-hero="soft"] .breadcrumb{color:var(--muted)}
/* 여섯 점 중 이 글의 카테고리만 채움 */
.deco .dot{fill:#ffffff;opacity:.6}
[data-cat="1"] .deco .d1,[data-cat="2"] .deco .d2,[data-cat="3"] .deco .d3,[data-cat="4"] .deco .d4,[data-cat="5"] .deco .d5,[data-cat="6"] .deco .d6{opacity:1}
[data-cat="1"] .deco .d1{fill:var(--c1)}
[data-cat="2"] .deco .d2{fill:var(--c2)}
[data-cat="3"] .deco .d3{fill:#E8C400}
[data-cat="4"] .deco .d4{fill:var(--c4)}
[data-cat="5"] .deco .d5{fill:var(--c5)}
[data-cat="6"] .deco .d6{fill:var(--c6)}
[data-page="article"] .hero h1{font-size:46px;margin:16px 0 18px;max-width:820px}
.breadcrumb{font-size:13.5px;color:#3B424B;margin-bottom:20px;font-weight:600}
.lead{font-size:17.5px;line-height:1.9;color:#2B3138;max-width:800px;margin:0;word-break:keep-all;overflow-wrap:break-word}
.lead strong{font-weight:800;color:var(--ink)}
.meta{margin-top:20px;font-size:12.5px;color:#4C545E}
.badge{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:800;color:var(--cat)}
.answer{margin-top:28px;border-radius:10px;padding:26px 28px;background:#fff}
.answer small{display:block;color:var(--cat);font-weight:800;font-size:12.5px;margin-bottom:10px}
.answer strong{font-size:19px;line-height:1.7;font-weight:600;letter-spacing:-.01em;color:var(--catd)}
/* ---------- 목록 페이지 요소 ---------- */
[data-page="list"] .label{background:var(--catb);color:var(--cat)}
.label{display:inline-block;background:var(--c4b);color:var(--c4);font-weight:800;font-size:12px;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.start{border-radius:10px;padding:30px 32px;background:var(--c5b);display:flex;justify-content:space-between;gap:24px;align-items:center}
.start strong{font-size:23px;font-weight:800;letter-spacing:-.02em}
/* 「처음 읽는 개발 가이드」 앞 깃발 아이콘 */
.start-head{display:flex;align-items:center;gap:20px}
.start-icon{flex:none;width:56px;height:auto}
.start-icon .f1{fill:var(--cta)}
.start-icon .f3{fill:var(--cta);fill:color-mix(in srgb,var(--cta) 42%,#fff)}
.start-icon .f4{fill:#F15C45}
.start-icon .f5{fill:none;stroke:var(--body);stroke-width:3}
/* 좁은 화면에서는 본문이 여러 줄로 늘어나므로 아이콘을 제목 높이에 맞춤 */
@media(max-width:620px){.start-head{align-items:flex-start;gap:14px}.start-icon{width:44px;margin-top:3px}}
.start p{margin:8px 0 0;color:#2A4A61;line-height:1.65;font-size:16px}
.btn{white-space:nowrap;border:0;background:var(--cta);color:#fff;font-weight:700;font-size:15px;padding:14px 24px;border-radius:8px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--cta-hover)}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid6 .cat{border-radius:10px;padding:26px 24px;background:var(--soft);transition:transform .15s}
.grid6 .cat:hover{transform:translateY(-3px)}
.grid6 .cat small{font-weight:800;font-size:12px}
.grid6 .cat strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px}
.grid6 .cat p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0}
.grid6 .cat:nth-child(1){background:var(--c1b)} .grid6 .cat:nth-child(1) small{color:var(--c1)}
.grid6 .cat:nth-child(2){background:var(--c2b)} .grid6 .cat:nth-child(2) small{color:var(--c2)}
.grid6 .cat:nth-child(3){background:var(--c3b)} .grid6 .cat:nth-child(3) small{color:var(--c3)}
.grid6 .cat:nth-child(4){background:var(--c4b)} .grid6 .cat:nth-child(4) small{color:var(--c4)}
.grid6 .cat:nth-child(5){background:var(--c5b)} .grid6 .cat:nth-child(5) small{color:var(--c5)}
.grid6 .cat:nth-child(6){background:var(--c6b)} .grid6 .cat:nth-child(6) small{color:var(--c6)}
/* 제목이 h1 전문(최대 34자)으로 길어져 2열에서 3줄까지 내려간다.
한글은 어절 단위로 끊어야 읽히므로 keep-all을 전역에 둔다(.grouped는 기존과 동일) */
.guide-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;word-break:keep-all}
.guide{border:1px solid var(--line);border-radius:6px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start;transition:border-color .15s,background .15s}
.guide:hover{background:var(--soft)}
.guide small{flex:none;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;margin-top:1px;background:var(--catb);color:var(--cat)}
.guide strong{display:block;line-height:1.5;font-size:16.5px;font-weight:600;letter-spacing:-.015em}
/* 30개 전체 목록에서는 5개 단위로 카테고리 색 자동 배정 */
.guide-list.auto-cat .guide:nth-child(-n+5) small{background:var(--c1b);color:var(--c1)}
.guide-list.auto-cat .guide:nth-child(-n+5):hover{border-color:var(--c1)}
.guide-list.auto-cat .guide:nth-child(n+6):nth-child(-n+10) small{background:var(--c2b);color:var(--c2)}
.guide-list.auto-cat .guide:nth-child(n+6):nth-child(-n+10):hover{border-color:var(--c2)}
.guide-list.auto-cat .guide:nth-child(n+11):nth-child(-n+15) small{background:var(--c3b);color:var(--c3)}
.guide-list.auto-cat .guide:nth-child(n+11):nth-child(-n+15):hover{border-color:var(--c3)}
.guide-list.auto-cat .guide:nth-child(n+16):nth-child(-n+20) small{background:var(--c4b);color:var(--c4)}
.guide-list.auto-cat .guide:nth-child(n+16):nth-child(-n+20):hover{border-color:var(--c4)}
.guide-list.auto-cat .guide:nth-child(n+21):nth-child(-n+25) small{background:var(--c5b);color:var(--c5)}
.guide-list.auto-cat .guide:nth-child(n+21):nth-child(-n+25):hover{border-color:var(--c5)}
.guide-list.auto-cat .guide:nth-child(n+26) small{background:var(--c6b);color:var(--c6)}
.guide-list.auto-cat .guide:nth-child(n+26):hover{border-color:var(--c6)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filters button{border:1px solid var(--line);background:#fff;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:8px;cursor:pointer}
.filters button:hover{background:var(--soft)}
.filters button[aria-pressed="true"]{border-color:transparent;color:#fff;background:var(--ink)}
.filters button[data-g="1"][aria-pressed="true"]{background:var(--c1)}
.filters button[data-g="2"][aria-pressed="true"]{background:var(--c2)}
.filters button[data-g="3"][aria-pressed="true"]{background:var(--c3)}
.filters button[data-g="4"][aria-pressed="true"]{background:var(--c4)}
.filters button[data-g="5"][aria-pressed="true"]{background:var(--c5)}
.filters button[data-g="6"][aria-pressed="true"]{background:var(--c6)}
.guide.hide{display:none}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool{border:1px solid #D5D9E2;border-radius:8px;padding:22px;background:#fff;transition:transform .15s,border-color .15s}
.tool:hover{transform:translateY(-3px);border-color:#B4BAC8}
.tool small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--muted);background:var(--soft);padding:5px 11px;border-radius:999px}
.tool[data-type="check"] small{color:var(--c6);background:var(--c6b)}
.tool[data-type="guide"] small{color:var(--c4);background:var(--c4b)}
.tool[data-type="compare"] small{color:var(--c3);background:var(--c3b)}
.tool[data-type="check"]:hover{border-color:var(--c6)}
.tool[data-type="guide"]:hover{border-color:var(--c4)}
.tool[data-type="compare"]:hover{border-color:var(--c3)}
.tool strong{display:block;margin:12px 0 7px;font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.45}
.tool p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
/* ---------- 글 본문 ---------- */
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px}
.layout>*{min-width:0}
.toc{position:sticky;top:96px;align-self:start;border-radius:10px;padding:24px 22px;background:var(--soft)}
.toc strong{display:block;margin-bottom:14px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.toc a{display:block;padding:9px 0;font-size:14.5px;line-height:1.45;color:var(--muted);font-weight:600}
.toc a:hover{color:var(--cat)}
[data-page="article"] .article h2{font-size:28px;line-height:1.35;display:flex;gap:12px;align-items:flex-start;margin:0 0 18px}
[data-page="article"] .article h2::before{content:"";flex:none;margin-top:11px;width:0;height:0;border-left:12px solid var(--cat);border-bottom:12px solid transparent}
[data-page="article"] .article>p,[data-page="article"] .block>p{color:var(--body);line-height:1.9;margin:0 0 18px;font-size:16px}
.block{margin-bottom:54px}
.question{background:var(--catb);border-radius:8px;padding:20px 24px;font-weight:700;line-height:1.75;margin:22px 0;font-size:15.5px}
.compare,.matrix{overflow:auto;border-radius:8px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:680px;font-size:14px}
th,td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.65}
th{padding-top:10px;padding-bottom:10px;background:var(--soft);font-weight:800;white-space:nowrap}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700}
.criteria{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card,.contract,.group{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fff;transition:transform .15s,border-color .15s}
.card:hover,.contract:hover,.group:hover{transform:translateY(-3px);border-color:var(--cat)}
.card small,.contract small,.group small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:12px}
.card strong,.contract strong,.group strong{display:block;margin-bottom:8px;font-size:16px;font-weight:700;letter-spacing:-.015em}
.card p,.contract p,.group p{font-size:14.5px;margin:0;color:var(--muted);line-height:1.7}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.case{border-radius:10px;padding:24px;background:var(--soft)}
.case h3{margin:0 0 10px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.case p{font-size:15px;margin:0;line-height:1.75}
.checklist{border-radius:10px;padding:10px 24px;background:var(--soft)}
.check{padding:15px 0;border-bottom:1px solid #E4E7ED;font-size:15.5px;line-height:1.65;display:flex;gap:12px}
.check:last-child{border:0}
.check::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--cat);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.conclusion{border-radius:10px;padding:32px;background:var(--catb)}
.conclusion .badge{background:#fff;margin-bottom:10px}
.conclusion h2{margin:16px 0 10px;font-size:26px}
.conclusion h2::before{display:none}
.conclusion>p{margin:0!important;color:#2B3340}
.section-head{margin-bottom:18px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.related a{border:1px solid #D5D9E2;border-radius:8px;padding:22px 24px;background:#fff;transition:transform .15s,border-color .15s}
.related a:hover{transform:translateY(-3px)}
.related small{display:block;color:var(--cat);font-weight:800;font-size:12.5px;margin-bottom:10px}
.related a:hover{border-color:var(--cat)}
.related a::before{content:"";display:block;width:26px;height:4px;border-radius:99px;background:var(--cat);margin-bottom:14px}
.related strong{font-size:16px;line-height:1.55;font-weight:700;letter-spacing:-.015em}
.next{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.next a{border:0;border-radius:8px;padding:14px 22px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:9px}
.next a:first-child{background:var(--catb);color:var(--cat)}
.next a:first-child::before{content:"←";font-size:16px;line-height:1}
.next a:first-child:hover{background:var(--cat);color:#fff}
.next a:last-child{background:var(--cta);color:#fff}
.next a:last-child::after{content:"→";font-size:16px;line-height:1}
.next a:last-child:hover{background:var(--cta-hover);color:#fff}
/* ---------- 글 하단 실무 자료 ---------- */
.hm-related-tools{margin:8px 0;border-radius:10px;padding:32px;background:var(--catb)}
.hm-related-tools h2{font-size:22px!important;font-weight:800!important;margin:0 0 8px!important;letter-spacing:-.025em}
.hm-related-tools>p{font-size:14.5px!important;color:var(--muted)!important;margin:0 0 18px!important;line-height:1.7}
.hm-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm-tool{display:block;border-radius:8px;padding:22px;background:#fff;color:var(--ink);transition:transform .15s}
.hm-tool:hover{transform:translateY(-3px)}
.hm-tool small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.hm-tool strong{display:block;font-size:16px;line-height:1.5;font-weight:700;letter-spacing:-.015em}
/* ---------- 반응형 ---------- */
@media(max-width:850px){
.grid6,.tools{grid-template-columns:1fr 1fr}
.guide-list{grid-template-columns:1fr}
.layout{grid-template-columns:1fr;gap:28px}
.toc{position:static}
.criteria,.cases,.related{grid-template-columns:1fr}
}
@media(max-width:760px){
.hm-site-header{margin:0 -10px;padding:0 10px}
.hm-site-header__inner{min-height:60px;gap:10px}
.hm-site-brand{font-size:17px}
.hm-site-nav{flex-wrap:nowrap;overflow-x:auto;gap:2px;font-size:13.5px;-ms-overflow-style:none;scrollbar-width:none;justify-content:flex-start;min-width:0}
.hm-site-nav::-webkit-scrollbar{display:none}
.hm-site-nav a{padding:8px 9px;white-space:nowrap}
}
@media(max-width:480px){
.hm-site-brand{font-size:16px}
.hm-site-brand span{display:none}
/* 작은 화면에서 메뉴 3개가 한 줄에 들어가도록 여백·글자 축소 */
.hm-site-header__inner{gap:8px}
.hm-site-nav{gap:0;font-size:13px}
.hm-site-nav a{padding:8px 6px}
.hm-site-footer__inner{padding:16px 18px;gap:6px}
}
@media(max-width:620px){
.wrap,.page{width:calc(100% - 20px)}
.panel,[data-page="article"] section:not(.hero),[data-page="tool"] section:not(.hero){padding:42px 2px}
.hero{border-radius:10px}
[data-page="index"] .hero{padding:96px 20px 48px}
.hero svg.deco{display:none}
.hero svg.deco-sm{display:block}
[data-page="index"] .hero h1{font-size:28px}
[data-page="list"] .hero{padding:86px 20px 40px}
[data-page="list"] .hero h1{font-size:29px}
[data-page="list"][data-cat] .hero h1{font-size:33px}
[data-page="list"][data-cat] .hero p{font-size:16px}
[data-page="article"] .hero{padding:104px 22px 34px}
[data-page="article"] .hero h1{font-size:31px}
h2{font-size:25px}
.article h2{font-size:23px}
.grid6,.tools,.hm-tool-grid{grid-template-columns:1fr}
.start{align-items:flex-start;flex-direction:column;padding:26px 22px}
.next{flex-direction:column}
.next a{text-align:center}
.hm-related-tools{padding:26px 22px}
}
/* =========================================================
페이지 전용 — 처음 읽는 개발 가이드 (data-page="tool")
========================================================= */
[data-page="tool"] .hero{padding:104px 36px 46px;text-align:left}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:36px;align-items:center}
[data-page="tool"] .hero h1{font-size:42px;margin:14px 0 16px}
.hero-grid>div>p{margin:0;max-width:680px;color:#2B3138;font-size:17px;line-height:1.8}
.hero-card{background:#fff;border-radius:10px;padding:28px 30px}
.hero-card strong{display:block;margin-bottom:14px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.hero-card div{color:var(--body);font-size:14.5px;line-height:2.1}
.wire-label{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--catb);font-size:12.5px;font-weight:800;color:var(--cat)}
.hero .wire-label,.decision .wire-label{background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.section-head h2{margin:0}
.section-head h2{margin:12px 0 0}
.section-head>p{margin:0;color:var(--muted);font-size:14px}
.intro{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.intro-card{border:1px solid #D5D9E2;border-radius:8px;padding:22px;background:#fff}
a.intro-card{display:block}
a.intro-card:focus-visible{outline:2px solid var(--cat);outline-offset:2px}
.intro-no{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:12px}
.intro-card h3{margin:0 0 9px;font-size:19px;font-weight:800;letter-spacing:-.025em}
.intro-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.roadmap{display:flex;flex-direction:column;gap:10px}
.roadmap .step{border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;grid-template-columns:76px 190px minmax(0,1fr) 148px;gap:20px;align-items:center;padding:20px 22px;transition:border-color .15s}
.step-no{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:#fff;background:var(--cat)}
.step-title small{display:block;font-size:11.5px;font-weight:700;margin-bottom:2px;color:var(--cat)}
.step-title strong{font-size:18px;font-weight:800;letter-spacing:-.02em}
.roadmap .step-copy{color:var(--ink)}
.step-copy{color:var(--body);font-size:15px;line-height:1.7}
.step-head .step-link{background:#fff;color:var(--cat)}
.step-link{border-radius:8px;padding:11px 14px;text-align:center;font-size:13.5px;font-weight:700;background:var(--soft);color:var(--muted)}
.roadmap .step:hover .step-link{background:var(--ink);color:#fff}
.roadmap .step:nth-child(1) .step-no{background:var(--c1)} .roadmap .step:nth-child(1) .step-title small{color:var(--c1)} .roadmap .step:nth-child(1):hover{border-color:var(--c1)}
.roadmap .step:nth-child(2) .step-no{background:var(--c2)} .roadmap .step:nth-child(2) .step-title small{color:var(--c2)} .roadmap .step:nth-child(2):hover{border-color:var(--c2)}
.roadmap .step:nth-child(3) .step-no{background:var(--c3)} .roadmap .step:nth-child(3) .step-title small{color:var(--c3)} .roadmap .step:nth-child(3):hover{border-color:var(--c3)}
.roadmap .step:nth-child(4) .step-no{background:var(--c4)} .roadmap .step:nth-child(4) .step-title small{color:var(--c4)} .roadmap .step:nth-child(4):hover{border-color:var(--c4)}
.roadmap .step:nth-child(5) .step-no{background:var(--c5)} .roadmap .step:nth-child(5) .step-title small{color:var(--c5)} .roadmap .step:nth-child(5):hover{border-color:var(--c5)}
.roadmap .step:nth-child(6) .step-no{background:var(--c6)} .roadmap .step:nth-child(6) .step-title small{color:var(--c6)} .roadmap .step:nth-child(6):hover{border-color:var(--c6)}
.recommended{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.recommended .article{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:transform .15s,border-color .15s}
.recommended .article:hover{transform:translateY(-3px)}
.thumb{min-height:48px;font-size:0}
.article-body{padding:18px 20px}
.recommended .cat{font-size:11.5px;font-weight:800;margin-bottom:8px}
.recommended .article h3{margin:0 0 9px;font-size:16.5px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.recommended .article p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.recommended .article:nth-child(1) .thumb{background:var(--c1h)} .recommended .article:nth-child(1) .cat{color:var(--c1)} .recommended .article:nth-child(1):hover{border-color:var(--c1)}
.recommended .article:nth-child(2) .thumb{background:var(--c2h)} .recommended .article:nth-child(2) .cat{color:var(--c2)} .recommended .article:nth-child(2):hover{border-color:var(--c2)}
.recommended .article:nth-child(3) .thumb{background:var(--c3h)} .recommended .article:nth-child(3) .cat{color:var(--c3)} .recommended .article:nth-child(3):hover{border-color:var(--c3)}
.decision{border-radius:10px;padding:32px;background:var(--catb)}
.decision h2{margin:14px 0 8px;font-size:25px}
.decision p{margin:0 0 20px;color:#2B3340;line-height:1.75;max-width:720px}
.decision-links{display:flex;flex-wrap:wrap;gap:10px}
.decision-links .btn{background:#fff;color:var(--ink);padding:13px 20px;font-size:14px}
.decision-links .btn:hover{background:#F1F4F2}
.decision-links .btn.primary{background:var(--cta);color:#fff}
.decision-links .btn.primary:hover{background:var(--cta-hover)}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:24px}
.intro{grid-template-columns:1fr}
.roadmap .step{grid-template-columns:70px minmax(0,1fr);gap:14px}
.step-copy,.step-link{grid-column:2}
.recommended{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
[data-page="tool"] .hero{padding:72px 22px 32px}
[data-page="tool"] .hero h1{font-size:30px}
.recommended{grid-template-columns:1fr}
.decision{padding:26px 22px}
.section-head{flex-direction:column;align-items:flex-start;gap:8px}
}
/* ---------- 글 본문 추가 컴포넌트 ---------- */
.cards,.grid,.contracts,.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.card h3{margin:0 0 9px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.9}
.card ul li{margin-bottom:2px}
.criterion{border:1px solid var(--line);border-radius:8px;padding:20px 22px;background:#fff;transition:border-color .15s}
.criterion:hover{border-color:var(--cat)}
.criterion small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.criterion strong{display:block;margin-bottom:7px;font-size:16px;font-weight:700;letter-spacing:-.015em}
.criterion p{font-size:14.5px;margin:0;color:var(--muted);line-height:1.7}
.scenarios{display:flex;flex-direction:column;gap:10px}
.scenario{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;border:1px solid var(--line);border-radius:8px;padding:20px 22px;align-items:center;transition:border-color .15s}
.scenario:hover{border-color:var(--cat)}
.scenario strong{display:block;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.015em;margin-bottom:6px}
.scenario small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.scenario h3{margin:0 0 7px;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.45}
.scenario p{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.result{border-radius:999px;padding:9px 12px;text-align:center;font-size:13px;font-weight:800;background:var(--catb);color:var(--cat)}
@media(max-width:900px){.cards{grid-template-columns:1fr}.scenario{grid-template-columns:1fr;gap:10px}.result{width:max-content}}
/* =========================================================
실무 자료 전용 컴포넌트
========================================================= */
.notice{border-radius:10px;padding:26px 28px;background:var(--catb)}
.notice h3{margin:0 0 9px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.notice p{margin:0;color:#2B3340;line-height:1.8;font-size:15px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices .choice{border:1px solid var(--line);border-radius:10px;padding:24px 26px;background:#fff;transition:border-color .15s}
.choices .choice:hover{border-color:var(--cat)}
.choices .choice small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:12px}
.choices .choice h3{margin:0 0 9px;font-size:20px;font-weight:800;letter-spacing:-.025em}
.choices .choice p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.7}
.choices .choice ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.95}
.steps{display:flex;flex-direction:column;gap:12px}
.steps .step{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.step-head{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 22px;background:var(--soft)}
.steps .step-no{width:38px;height:38px;font-size:13.5px}
.status,.cadence,.state,.risk{justify-self:end;min-width:120px;border-radius:999px;text-align:center;padding:8px 12px;font-size:12.5px;font-weight:800;background:#fff;color:var(--cat)}
.items{padding:6px 22px 14px}
.item{display:grid;grid-template-columns:26px minmax(0,1fr) 240px;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item strong{display:block;font-size:15px;font-weight:700;margin-bottom:5px;line-height:1.5}
.item p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.item .box{width:20px;height:20px;border:2px solid var(--cat);border-radius:5px;background:#fff;margin-top:2px}
.evidence,.contract-example{border-left:3px solid var(--catb);padding-left:14px;color:var(--muted);font-size:13px;line-height:1.6;border-radius:0}
.mistakes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.mistake{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fff}
.mistake small{display:inline-block;font-size:11.5px;font-weight:800;color:#A32D2D;background:#FCEBEB;padding:5px 11px;border-radius:999px;margin-bottom:11px}
.mistake strong{display:block;font-size:16.5px;font-weight:700;margin-bottom:8px;line-height:1.45;letter-spacing:-.015em}
.mistake p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evidence-item{border-radius:6px;padding:16px 18px;background:var(--soft);font-size:14px;font-weight:600;line-height:1.5}
/* 인수인계 항목 (그룹 + 인수 기준) */
.handover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.handover-group{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:#fff}
.handover-group small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:6px}
.handover-group ul{list-style:none;margin:0;padding:0}
.handover-group li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line)}
.handover-group li:last-child{border-bottom:0;padding-bottom:0}
.handover-group li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:50%;background:var(--catb)}
.handover-group li::after{content:"";position:absolute;left:7px;top:18px;width:5px;height:9px;border-right:2px solid var(--cat);border-bottom:2px solid var(--cat);transform:rotate(45deg)}
.handover-group li strong{display:block;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.handover-group li span{display:block;margin-top:2px;color:var(--muted);font-size:13.5px;line-height:1.6}
@media(max-width:900px){.handover{grid-template-columns:1fr}}
.flow,.cycle,.impact{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.flow-step{border-radius:8px;padding:18px 16px;background:var(--catb);min-height:118px}
.flow-step small{display:block;font-size:12px;font-weight:800;color:var(--cat);margin-bottom:8px}
.flow-step strong{display:block;font-size:15px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.flow-step p{margin:0;color:#3E5049;font-size:12.5px;line-height:1.55}
.final{border-radius:10px;padding:32px;background:var(--catb)}
.final .wire-label{background:#fff}
.final h2{margin:14px 0 10px;font-size:26px;line-height:1.4}
.final p{margin:0 0 20px;color:#2B3340;line-height:1.8}
.buttons{display:flex;gap:10px;flex-wrap:wrap}
.cards+.buttons,.quotegrid+.buttons,.evidence-grid+.buttons,.flow+.buttons{margin-top:22px}
.buttons .btn{background:#fff;color:var(--ink);padding:13px 20px;font-size:14px}
.buttons .btn:hover{background:#F1F4F2}
.buttons .btn.primary{background:var(--cta);color:#fff}
.buttons .btn.primary:hover{background:var(--cta-hover)}
@media(max-width:900px){
.choices{grid-template-columns:1fr}
.evidence-grid{grid-template-columns:1fr 1fr}
.flow{grid-template-columns:1fr 1fr}
.step-head{grid-template-columns:46px minmax(0,1fr)}
.status,.cadence,.state,.risk{grid-column:2;width:max-content;text-align:left}
.item{grid-template-columns:26px minmax(0,1fr)}
.evidence{grid-column:2}
}
@media(max-width:620px){.evidence-grid,.flow{grid-template-columns:1fr}.final{padding:26px 22px}.notice{padding:22px}}
.roles,.layers,.levels,.signals,.assets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.role,.layer,.level,.signal,.asset{border:1px solid var(--line);border-radius:8px;padding:20px 22px;background:#fff;transition:border-color .15s}
.role:hover,.layer:hover,.level:hover,.signal:hover,.asset:hover{border-color:var(--cat)}
.role small,.layer small,.level small,.signal small,.asset small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.role strong,.layer h3,.layer strong,.level h3,.level strong,.signal strong,.asset strong{display:block;margin-bottom:7px;font-size:16px;font-weight:700;letter-spacing:-.015em}
.role p,.layer p,.level p,.signal p,.asset p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
/* 위험 신호 카드 안 제목·목록 (h3·ul 구조용) */
.signal h3{margin:0 0 9px;font-size:17px;font-weight:800;line-height:1.45;letter-spacing:-.02em}
.signal ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;line-height:1.9}
.signal ul li{margin-bottom:2px}
.options{display:flex;flex-direction:column;gap:10px}
.option{border:1px solid var(--line);border-radius:8px;padding:18px 20px;transition:border-color .15s}
.option:hover{border-color:var(--cat)}
.option strong{display:block;font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.015em}
.option p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7}
.conditions,.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.condition,.side{border-radius:10px;padding:24px 26px;background:var(--soft)}
.condition small,.side small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:#fff;padding:5px 11px;border-radius:999px;margin-bottom:12px}
.condition h3,.side h3{margin:0 0 11px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.45}
.condition ul,.side ul{margin:0;padding-left:18px;color:var(--body);font-size:14px;line-height:1.95}
@media(max-width:900px){.roles{grid-template-columns:1fr 1fr}.conditions{grid-template-columns:1fr}}
/* 흐름 카드 (.flow 안의 .step) */
.flow .step,.cycle .step,.impact>div{border-radius:8px;padding:18px 16px;background:var(--catb);min-height:118px}
.flow .step small,.cycle .step small,.impact>div small{display:block;font-size:12px;font-weight:800;color:var(--cat);margin-bottom:8px}
.flow .step strong,.cycle .step strong,.impact>div strong{display:block;font-size:15px;font-weight:800;margin-bottom:6px;letter-spacing:-.02em}
.flow .step p,.cycle .step p,.impact>div p{margin:0;color:#3E5049;font-size:12.5px;line-height:1.55}
/* 결론 알약 (.scenario 안의 .choice) */
.scenario .choice,.result{border-radius:999px;padding:9px 12px;text-align:center;font-size:13px;font-weight:800;background:var(--catb);color:var(--cat);display:block}
/* 히어로 안의 짧은 주의 문구 */
.hero .notice{margin-top:16px;border-left:4px solid #ffffff;padding:4px 0 4px 14px;color:var(--body);font-size:13.5px;line-height:1.7;background:none;border-radius:0}
@media(max-width:900px){.scenario{grid-template-columns:1fr;gap:12px}.scenario .choice,.result{width:max-content}}
.score{border-radius:10px;padding:6px 24px;background:var(--soft)}
.score-row{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.score-row:last-child{border-bottom:0}
.score-row p{margin:0;flex:1;font-size:15px;font-weight:600;line-height:1.6}
.score-row strong{flex:none;width:150px;font-size:15px;font-weight:800;letter-spacing:-.015em}
.score-row>span{flex:none;font-size:13px;font-weight:800;color:var(--cat);min-width:38px;text-align:right}
.scale{margin-left:auto}
.bar{flex:1;height:10px;border-radius:99px;background:#fff;overflow:hidden}
.fill{height:100%;background:var(--cat);border-radius:99px}
.scale{flex:none;font-size:12.5px;font-weight:800;color:var(--cat);background:#fff;padding:8px 14px;border-radius:999px;white-space:nowrap}
.complete{border-radius:10px;padding:26px 28px;background:var(--catb)}
.complete strong{display:block;font-size:18px;font-weight:800;margin-bottom:9px;letter-spacing:-.02em}
.complete p{margin:0;color:#2B3340;line-height:1.8;font-size:15px}
@media(max-width:620px){.score-row{flex-wrap:wrap;gap:10px}.score-row strong{width:100%}.bar{flex:1 1 60%}}
.layer h3,.layer strong,.level h3,.level strong{margin:0 0 7px;font-size:16px}
.layers.rank .layer:nth-child(1) small{background:var(--cat);color:#fff}
.layers.rank .layer:nth-child(3) small{background:var(--soft);color:var(--muted)}
.example{border-radius:10px;padding:24px;background:var(--soft)}
.example-grid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px;align-items:center}
.example-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.example .example-box{border:0}
.example-box small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.example-box strong{display:block;font-size:15.5px;font-weight:800;margin-bottom:8px;letter-spacing:-.015em}
.example-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.arrow{font-size:0;justify-self:center;width:0;height:0;border-left:16px solid var(--cat);border-top:11px solid transparent;border-bottom:11px solid transparent}
@media(max-width:620px){.example-grid{grid-template-columns:1fr}.arrow{justify-self:start;transform:rotate(90deg);margin:6px 0 6px 14px}}
/* 세 그룹 카드: 첫 번째만 강조 */
.cards.rank .card:nth-child(1) small{background:var(--cat);color:#fff}
.cards.rank .card:nth-child(3) small{background:var(--soft);color:var(--muted)}
.funnel{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:14px;align-items:center}
.funnel .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.funnel .box strong{display:block;font-size:15.5px;font-weight:800;margin-bottom:12px;letter-spacing:-.015em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12.5px;font-weight:600;background:var(--soft);color:var(--muted);padding:6px 11px;border-radius:999px}
.funnel .box:last-child .tag{background:var(--catb);color:var(--cat);font-weight:800}
@media(max-width:620px){.funnel{grid-template-columns:1fr}}
/* 한 줄 흐름 (예: 전문가 목록 → 상세 확인 → 상담 신청) */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chain span{background:#fff;border-radius:999px;padding:10px 17px;font-size:14.5px;font-weight:700}
.chain b{font-size:0;width:0;height:0;border-left:10px solid var(--cat);border-top:7px solid transparent;border-bottom:7px solid transparent}
/* 견적 비교 박스 */
.quotegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.quote{background:#fff;border-radius:8px;padding:22px 24px}
.quote span{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px}
.quote small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px}
.quote strong{display:block;font-size:25px;font-weight:800;letter-spacing:-.03em;margin:12px 0 10px}
.quote p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
/* 주의 항목 (총액 밖 비용 등) */
.warn{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.warn>div{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fff}
.warn>div small{display:inline-block;font-size:11.5px;font-weight:800;color:#A32D2D;background:#FCEBEB;padding:5px 11px;border-radius:999px;margin-bottom:11px}
.warn>div strong{display:block;font-size:16.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.015em}
.warn>div p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
/* 항목 · 설명 줄 목록 */
.rows,.account,.progress{border-radius:10px;padding:4px 24px;background:var(--soft)}
.quote-row,.case-row,.account-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.quote-row:last-child,.case-row:last-child,.account-row:last-child{border-bottom:0}
.quote-row strong,.case-row strong,.account-row strong,.progress-row strong{font-size:15px;font-weight:800;letter-spacing:-.015em}
.quote-row span,.case-row span,.account-row span,.progress-row span{color:var(--muted);font-size:14.5px;line-height:1.7}
@media(max-width:620px){.quote-row,.case-row,.account-row{grid-template-columns:1fr;gap:6px}}
/* 질문 · 답변 블록 */
.qa{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:10px}
.qhead{padding:20px 22px;background:var(--catb)}
.qhead small{display:block;font-size:11.5px;font-weight:800;color:var(--cat);margin-bottom:8px}
.qhead strong{display:block;font-size:16.5px;font-weight:700;line-height:1.6;letter-spacing:-.015em}
.answers{display:grid;grid-template-columns:1fr 1fr}
.ans{padding:18px 22px}
.ans+.ans{border-left:1px solid var(--line)}
.ans small{display:inline-block;font-size:11.5px;font-weight:800;margin-bottom:9px;padding:5px 11px;border-radius:999px}
.ans:first-child small{color:var(--cat);background:var(--catb)}
.ans:last-child small{color:#A32D2D;background:#FCEBEB}
.ans p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
@media(max-width:620px){.answers{grid-template-columns:1fr}.ans+.ans{border-left:0;border-top:1px solid var(--line)}}
/* 주의 톤 카드 묶음 */
.cards.caution .card small,.signals.caution .signal small{color:#A32D2D;background:#FCEBEB}
.cards.caution .card:hover,.signals.caution .signal:hover{border-color:#E24B4A}
/* 두 개념 대비 */
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.twocol .box{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:#fff}
.twocol .box small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px;margin-bottom:11px}
.twocol .box strong{display:block;font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em}
.twocol .box p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.75}
.progress-row{display:grid;grid-template-columns:170px 58px minmax(0,1fr);gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.progress-row:last-child{border-bottom:0}
.progress-row b{font-size:12px;font-weight:800;color:var(--cat);background:#fff;border-radius:999px;padding:6px 0;text-align:center}
@media(max-width:620px){.progress-row{grid-template-columns:auto 1fr;gap:8px 12px}.progress-row span{grid-column:1/-1}}
/* 이슈 목록 줄 */
.issue-row{display:grid;grid-template-columns:82px minmax(0,1fr) 96px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.issue-row:last-child{border-bottom:0}
.owner{text-align:right;color:var(--muted);font-size:12.5px;font-weight:700}
@media(max-width:620px){.issue-row{grid-template-columns:82px minmax(0,1fr)}.owner{grid-column:2;text-align:left}}
/* 표 안의 강·약 표시 */
td.good{color:#12A05F;font-weight:700}
td.cell-warn{color:#A32D2D;font-weight:700}
/* 입력 양식 (견적 요청서 템플릿) */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--muted);font-size:14px;padding:13px 14px;line-height:1.6}
.textarea{min-height:92px}
.select{display:flex;align-items:center;justify-content:space-between;gap:10px}
.select::after{content:"";width:0;height:0;border-top:7px solid var(--muted);border-left:5px solid transparent;border-right:5px solid transparent}
.hint{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.6}
@media(max-width:620px){.fields{grid-template-columns:1fr;padding:18px}}
/* 칩 목록 (로드맵 열, 우선순위 묶음) */
.matrix-list{display:flex;flex-direction:column;gap:8px}
.matrix-item{border-radius:6px;padding:11px 13px;background:var(--soft);font-size:13.5px;line-height:1.5}
.roadmap-head{margin-bottom:13px}
.roadmap-head small{display:inline-block;font-size:11.5px;font-weight:800;color:var(--cat);background:var(--catb);padding:5px 11px;border-radius:999px}
.roadmap-head strong{display:block;margin-top:9px;font-size:16px;font-weight:800;letter-spacing:-.02em}
/* 인터뷰 질문 목록 */
.q{padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.7;color:var(--muted)}
.q:last-child{border-bottom:0}
.q strong{display:block;margin-bottom:5px;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
/* 체크리스트 항목 (실무 자료) */
.item-text{font-size:15px;font-weight:600;line-height:1.6}
.importance{font-size:12.5px;font-weight:800;color:var(--cat);text-align:right}
.big{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:2px 0 12px}
.range{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:16px;font-size:13px;color:var(--muted)}
.range strong{color:var(--cat);font-weight:800}
@media(max-width:620px){.importance{grid-column:2;text-align:left}}
/* =========================================================
검색 페이지
========================================================= */
.search-form{display:flex;gap:10px;max-width:620px;margin:22px auto 0}
.search-form input{flex:1;min-width:0;border:0;border-radius:8px;padding:16px 18px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.search-form input::placeholder{color:var(--muted)}
.search-form input:focus{outline:1px solid var(--cta);outline-offset:0}
.suggest{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.suggest button{border:0;background:#fff;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;color:var(--ink);font-family:inherit;cursor:pointer}
.suggest button:hover{background:var(--ink);color:#fff}
.suggest.alt{margin-top:18px}
.suggest.alt button{background:#fff;border:1px solid var(--line)}
.result-head{display:flex;align-items:baseline;gap:10px;font-size:17px;margin:0 0 18px}
.result-head strong{font-weight:800}
.result-head span{color:var(--muted);font-size:14px}
.results{display:flex;flex-direction:column;gap:10px}
.result-item{position:relative;display:block;border:1px solid var(--line);border-radius:8px;padding:18px 20px;transition:border-color .15s,background .15s}
.result-item:hover{background:var(--soft)}
.result-item small{display:inline-block;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;margin-bottom:10px;color:var(--cat);background:var(--catb)}
.result-item strong{display:block;font-size:16.5px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.result-item p{margin:7px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.result-cat{position:absolute;top:18px;right:20px;font-size:12.5px;font-weight:700;color:var(--muted)}
.result-item[data-type="tool"] small{color:var(--muted);background:var(--soft)}
.result-item:hover{border-color:var(--cat)}
.no-result{border-radius:8px;background:var(--soft);padding:32px;text-align:center}
.no-result strong{display:block;font-size:18px;font-weight:800;margin-bottom:8px}
.no-result p{margin:0;color:var(--muted);font-size:15px}
@media(max-width:620px){
.search-form{flex-direction:column}
.result-cat{position:static;display:block;margin-top:8px}
}
/* hm-cta:start */
.hm-cta{margin:32px 0 24px;padding:28px 32px;border:1px solid var(--line,#E8E8EF);border-radius:12px;background:var(--soft,#F7F8FA);word-break:keep-all;overflow-wrap:break-word}
.hm-cta__eyebrow{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--cta,#2E6BF0)}
.hm-cta__title{margin:0 0 8px;font-size:20px;line-height:1.4;color:var(--ink,#15171C)}
.hm-cta__desc{margin:0 0 20px;font-size:16px;font-weight:500;line-height:1.7;color:#2B3138}
.hm-cta__actions{display:flex;flex-wrap:wrap;gap:10px}
.hm-cta__btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:8px;border:1px solid var(--line,#E8E8EF);background:#fff;color:var(--ink,#15171C);font-weight:700;font-size:14px;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.hm-cta__btn:hover{border-color:var(--cta,#2E6BF0);color:var(--cta,#2E6BF0)}
.hm-cta__btn--primary{background:var(--cta,#2E6BF0);border-color:var(--cta,#2E6BF0);color:#fff}
.hm-cta__btn--primary:hover{background:var(--cta-hover,#2257CC);border-color:var(--cta-hover,#2257CC);color:#fff}
@media (max-width:620px){.hm-cta{margin:24px 0 16px;padding:22px 20px}.hm-cta__title{font-size:18px}.hm-cta__btn{flex:1 1 100%}}
/* hm-cta:end */
/* ---------- 핵심 가이드 그룹명 (index) ---------- */
.guide-group{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:30px 0 4px;padding:0 0 10px;border-bottom:2px solid var(--cath);border-bottom-color:color-mix(in srgb,var(--cat) 40%,#fff);word-break:keep-all}
.guide-group:first-child{margin-top:0}
.guide-group h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--cat)}
.guide-group h3 span{margin-right:8px;font-size:inherit;font-weight:800;color:var(--cat)}
.guide-group p{margin:0;flex:1 1 280px;font-size:15px;line-height:1.6;color:var(--catd)}
.guide-list.grouped{word-break:keep-all}
.guide-list.grouped .guide:hover{border-color:var(--cat)}
@media(max-width:620px){.guide-group{margin-top:24px;gap:6px 10px}.guide-group h3{font-size:18px}}
/* ---------- 메인 히어로 라벨 (index) ---------- */
[data-page="index"] .hero{padding-top:140px}
[data-page="index"] .hero .wire-label{margin-bottom:18px;font-size:14px;padding:8px 20px}
[data-page="index"] .hero p{max-width:760px;word-break:keep-all}
@media(max-width:620px){[data-page="index"] .hero p br{display:none}}
/* ==========================================================
실무자료(resources) 페이지 카드 스타일
- 기본: 카테고리색(--cat) 테두리 (기존 호버 테두리와 동일)
- 호버: 히어로 색상 배경 + 그림자
- 안내용 카드이므로 위로 뜨는 효과(translateY) 제거
- 히어로 색상: 기본 --cath, data-hero="soft" 페이지는 --catb
========================================================== */
[data-content-type="resources"]{--hero-bg:var(--cath)}
[data-content-type="resources"][data-hero="soft"]{--hero-bg:var(--catb)}
[data-content-type="resources"] :is(.card,.contract,.group,.choice,.mistake,.signal,.handover-group,.quote,.example-box){
transition:background-color .15s,box-shadow .15s,border-color .15s;
}
[data-content-type="resources"] :is(.card,.contract,.group,.choice,.mistake,.signal,.handover-group,.quote,.example-box):hover{transform:none}
/* 본문 영역 카드 (히어로 안의 카드는 배경이 겹치므로 제외) */
[data-content-type="resources"] section:not(.hero) :is(.card,.contract,.group,.choice,.mistake,.signal,.handover-group,.quote,.example-box){
border-color:var(--cat);
}
[data-content-type="resources"] section:not(.hero) .quote{border:1px solid var(--cat)}
[data-content-type="resources"] section:not(.hero) :is(.card,.contract,.group,.choice,.mistake,.signal,.handover-group,.quote,.example-box):hover{
background:var(--hero-bg); /* color-mix 미지원 브라우저용 */
background:color-mix(in srgb, var(--hero-bg) 50%, #fff);
border-color:var(--cat);
box-shadow:0 6px 18px rgba(21,23,28,.08);
}
/* 주의(caution) 카드·위험 신호(.signal)·실수 사례(.mistake) 라벨도 카테고리 색으로 통일 */
[data-content-type="resources"] section:not(.hero) :is(.cards.caution .card,.signals.caution .signal,.mistake) small{color:var(--cat);background:var(--catb)}
/* 목록 타일(.evidence-item): 테두리 없이 연한 히어로색 배경 + 체크 표시 */
[data-content-type="resources"] section:not(.hero) .evidence-item{
position:relative;padding-left:48px;
background:var(--hero-bg); /* color-mix 미지원 브라우저용 */
background:color-mix(in srgb, var(--hero-bg) 50%, #fff);
transition:background-color .15s;
}
[data-content-type="resources"] section:not(.hero) .evidence-item:hover{background:var(--hero-bg)}
[data-content-type="resources"] section:not(.hero) .evidence-item::before{content:"";position:absolute;left:18px;top:16px;width:20px;height:20px;border-radius:50%;background:#fff}
[data-content-type="resources"] section:not(.hero) .evidence-item::after{content:"";position:absolute;left:25px;top:20px;width:5px;height:9px;border-right:2px solid var(--cat);border-bottom:2px solid var(--cat);transform:rotate(45deg)}
/* 체크리스트·요청서 보드(.steps .step): 테두리와 머리글에 카테고리 색 */
[data-content-type="resources"] section:not(.hero) .steps .step{border-color:var(--cat)}
[data-content-type="resources"] section:not(.hero) .steps .step .step-head{background:var(--catb)}
/* 비교표(.compare/.matrix): 테두리와 헤더에 카테고리 색 (실무자료·가이드 공통) */
section:not(.hero) :is(.compare,.matrix){border-color:var(--cat)}
section:not(.hero) :is(.compare,.matrix) th{background:var(--catb)}
/* 가이드 글 카드(.role·.layer·.level·.asset·.option·.criterion·.card·.contract·.group·.intro-card·.funnel .box·.warn>div·.scenario): 실무자료와 같은 기준 */
section:not(.hero) :is(.roles .role,.layer,.level,.asset,.option,.criterion,.card,.contract,.group,.intro-card,.funnel .box,.warn>div,.scenario){
border-color:var(--cat);
transition:background-color .15s,box-shadow .15s;
}
section:not(.hero) :is(.roles .role,.layer,.level,.asset,.option,.criterion,.card,.contract,.group,.intro-card,.funnel .box,.warn>div,.scenario):hover{
transform:none;
background:var(--catb); /* color-mix 미지원 브라우저용 */
background:color-mix(in srgb, var(--catb) 50%, #fff);
box-shadow:0 6px 18px rgba(21,23,28,.08);
}
/* 관련 글 카드(.related a): 기본 카테고리색 테두리 + 호버 시 연한 배경 */
section:not(.hero) .related a{border-color:var(--cat);transition:transform .15s,background-color .15s,box-shadow .15s}
section:not(.hero) .related a:hover{background:var(--catb);background:color-mix(in srgb, var(--catb) 50%, #fff);box-shadow:0 6px 18px rgba(21,23,28,.08)}
@media (prefers-reduced-motion:reduce){
[data-content-type="resources"] :is(.card,.contract,.group,.choice,.mistake,.signal,.handover-group,.evidence-item){transition:none}
section:not(.hero) :is(.roles .role,.layer,.level,.asset,.option,.criterion,.card,.contract,.group,.intro-card,.funnel .box,.warn>div,.scenario,.related a){transition:none}
}
/* =========================================================
전체 글 목록 — 단계별 가이드 (blog-all.html)
.panel.guide-intro = "MVP 개발 가이드" 제목 블록
.panel.step = 1~6단계 섹션 (그 안의 .tool은 1행 1편 목록형)
========================================================= */
/* 단계 소제목 (h2 + .sub) */
.panel.step > h2{font-size:1.2em;line-height:1.35;letter-spacing:-.01em;margin-top:34px;margin-bottom:.3em}
/* 단계 설명문: 한 줄이 길어지면 눈이 되돌아오기 어렵다. 한글은 1자≈1em이므로 em으로 줄 길이를 직접 제한 */
.panel.step > p.sub{margin-top:0;margin-bottom:.9em;max-width:44em}
/* 강조 구간만 이어 읽어도 단계의 요지가 잡히게 한다.
섹션의 data-cat 덕분에 글자색은 그 단계 테마색의 진한 변형(--catd)을 그대로 받는다.
원색(--cat)은 흰 배경에서 대비가 3:1 안팎이라 본문 강조에는 --catd를 쓴다. (.answer strong과 같은 방식) */
.panel.step > p.sub strong{font-weight:700;color:var(--catd);
/* 16px -> 17px. line-height는 1.6으로 낮춰 줄 높이를 27.2px(=16*1.7)로 맞춘다.
그대로 두면 강조가 들어간 줄만 행간이 벌어져 단락이 울퉁불퉁해진다 */
font-size:1.0625em;line-height:1.6}
/* 단계 사이 여백은 위 h2의 margin-top 하나로만 결정되도록, 패널 자체의 상하 여백을 제거 */
.panel.guide-intro{margin-top:0;margin-bottom:0;padding-bottom:0}
.panel.step{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}
/* 가이드·실무 자료 목록: 카드형 -> 1행 1편 목록형 */
.panel.step .tools,
.panel.res .tools{display:block}
.panel.step .tool,
.panel.res .tool{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;
align-items:start;margin:0;padding:16px 6px;background:none;border:0;border-radius:0;box-shadow:none;
border-bottom:1px solid var(--line);transform:none;transition:background-color .15s ease}
.panel.step .tool:last-child,
.panel.res .tool:last-child{border-bottom:0}
.panel.step .tool:hover,
.panel.res .tool:hover{background:var(--soft);transform:none;box-shadow:none}
/* 배지: 레이아웃은 공통, 색은 각 섹션 규칙을 따른다 */
.panel.step .tool small,
.panel.res .tool small{grid-area:1/1;justify-self:start;text-align:center;margin:0}
/* 가이드 번호 배지 = 단계별 테마색. [data-cat="n"] 규칙이 .tool 위에서 --cat/--catb를 이미 정의하므로
하드코딩 없이 토큰을 그대로 받는다 */
.panel.step .tool small{min-width:58px;background:var(--catb);color:var(--cat)}
.panel.step .tool strong,
.panel.res .tool strong{grid-area:1/2;margin:0;line-height:1.45}
.panel.step .tool p,
.panel.res .tool p{grid-area:2/2;margin:0;max-width:80ch;line-height:1.65}
/* 목록 설명문 강조 — 단계 소개문(.sub strong)과 같은 --catd 색을 사용 */
.panel .tool p strong{display:inline;margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:700;color:var(--catd)}
@media (max-width:620px){
.panel.step .tool,
.panel.res .tool{grid-template-columns:1fr;row-gap:7px}
.panel.step .tool small,.panel.step .tool strong,.panel.step .tool p,
.panel.res .tool small,.panel.res .tool strong,.panel.res .tool p{grid-area:auto}
}
/* 실무 자료 배지는 종류명이라 열이 더 넓어야 하고, 색은 기존 data-type 규칙을 그대로 쓴다 */
.panel.res .tool small{min-width:104px}
/* ==========================================================
index 히어로 v2 — 손글씨 메모 · 체크리스트 말풍선
구조: .hero > .hero-aside--left / 중앙 콘텐츠 / .hero-aside--right
1080px 이하에서 좌측 메모는 숨기고, 체크리스트는 가로 배치로 전환
========================================================== */
[data-page="index"] .hero{
background:var(--cath);
padding:96px 32px 64px;
}
/* 가랜드는 상단 고정, 코너 삼각형은 CSS — 히어로 높이가 변해도 잘리지 않음 */
[data-page="index"] .hero svg.deco{inset:0 0 auto 0;height:auto}
[data-page="index"] .hero::before,[data-page="index"] .hero::after{
content:"";position:absolute;bottom:0;width:0;height:0;border-top:150px solid transparent;
}
[data-page="index"] .hero::before{left:0;border-left:150px solid #F7B4DE}
[data-page="index"] .hero::after{right:0;border-right:155px solid #F0DE3C}
[data-page="index"] .hero>.wire-label,
[data-page="index"] .hero>.hero-eyebrow,
[data-page="index"] .hero>h1,
[data-page="index"] .hero>p,
[data-page="index"] .hero>.stats{max-width:820px;margin-left:auto;margin-right:auto}
[data-page="index"] .hero .wire-label{
display:inline-flex;align-items:center;gap:9px;
margin-bottom:20px;padding:9px 22px;font-size:14.5px;color:var(--cat);
}
[data-page="index"] .hero .wire-label svg{width:17px;height:auto;flex:none}
.hero-eyebrow{
position:relative;display:table;margin:0 auto 14px;font-size:20px;font-weight:800;
letter-spacing:-.03em;color:var(--ink);line-height:1.4;word-break:keep-all;
}
.hero-eyebrow b{font-weight:800;color:var(--cta)}
[data-page="index"] .hero h1{font-size:45px;margin:0 auto 20px;word-break:keep-all}
[data-page="index"] .hero h1 em{font-style:normal;color:var(--cta)}
[data-page="index"] .hero p{font-size:17px;line-height:1.8;color:#1D3B2B}
[data-page="index"] .hero>p:not(.hero-eyebrow){max-width:800px}
[data-page="index"] .stats{margin-top:30px;max-width:820px;margin-left:auto;margin-right:auto}
[data-page="index"] .stats span{
display:inline-flex;align-items:center;gap:0;padding:11px 20px;
font-size:15px;color:var(--muted);white-space:nowrap;
}
[data-page="index"] .stats span svg{width:17px;height:auto;flex:none;margin-right:9px;color:var(--cta)}
[data-page="index"] .stats span>span{display:inline}
[data-page="index"] .stats b{color:var(--ink)}
/* ---- 좌/우 장식 영역 ---- */
.hero-aside{position:absolute;z-index:2;pointer-events:none}
.hero-aside--left{left:18px;top:168px;width:236px}
.hero-aside--right{right:10px;top:50%;width:198px;transform:translateY(-50%)}
/* .scribble / .hero-eyebrow 는 라서 [data-page="index"] .hero p 보다
우선순위를 높여야 폰트·색이 덮이지 않음 */
[data-page="index"] .hero .scribble{
margin:0;font-style:italic;font-size:15.5px;line-height:1.55;
color:var(--body);letter-spacing:-.01em;white-space:nowrap;max-width:none;
}
[data-page="index"] .hero .hero-eyebrow{
font-size:20px;line-height:1.4;color:var(--ink);
}
.hero-aside--left .scribble{transform:rotate(-9deg)}
.hero-aside--left .scribble--b{
margin:-46px 0 0 84px;transform:rotate(5deg);
}
.hero-bulb{display:block;width:62px;height:auto;margin:10px 0 0 74px;color:var(--body)}
.hero-steps{
position:relative;list-style:none;margin:0;padding:22px 24px;
background:rgba(255,255,255,.9);border-radius:22px;
}
.hero-steps::after{
content:"";position:absolute;left:30%;top:100%;
border:9px solid transparent;border-top:15px solid rgba(255,255,255,.9);
border-bottom:0;
}
.hero-steps li{
position:relative;padding-left:30px;font-size:14.5px;line-height:1.5;
color:var(--body);font-weight:600;white-space:nowrap;
}
.hero-steps li+li{margin-top:14px}
.hero-steps li::before{
content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px;
background:var(--cta) no-repeat center/12px 12px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l3 3 5-6'/%3E%3C/svg%3E");
}
/* 손글씨는 체크리스트 말풍선 바로 아래 (.hero-aside--right 안에 위치) */
[data-page="index"] .hero .scribble--c{
margin:22px auto 0;width:max-content;text-align:center;transform:rotate(7deg);
}
.spark{position:absolute;pointer-events:none}
.spark--blue{right:-50px;top:-14px;width:40px;height:auto;color:var(--cta)}
.spark--yellow{left:-54px;top:118px;width:52px;height:auto;color:#F0DE3C}
@media(max-width:1212px){
.hero-aside--left{left:6px;top:176px;width:214px}
/* 히어로가 가장 낮아지는 구간 — 손글씨가 노란 삼각형에 닿지 않도록 조금 올림 */
.hero-aside--right{right:14px;top:46%;width:190px}
[data-page="index"] .hero h1{font-size:40px}
[data-page="index"] .hero .scribble{font-size:14.5px}
}
@media(max-width:1080px){
/* 장식은 접고, 체크리스트는 본문 아래 가로 배치 */
[data-page="index"] .hero{padding:88px 24px 68px}
[data-page="index"] .hero::before{border-left-width:112px;border-top-width:112px}
[data-page="index"] .hero::after{border-right-width:116px;border-top-width:116px}
.hero-aside--left,.spark,.scribble--c{display:none}
.hero-aside--right{position:static;top:auto;transform:none;width:auto;margin:30px auto 0;max-width:720px;pointer-events:auto}
.hero-steps{
display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;
padding:18px 22px;border-radius:16px;
}
.hero-steps::after{display:none}
.hero-steps li+li{margin-top:0}
.hero-steps li{font-size:14.5px;padding-left:28px}
.hero-steps li::before{width:18px;height:18px;top:1px}
}
@media(max-width:760px){
[data-page="index"] .hero h1{font-size:36px}
[data-page="index"] .hero .hero-eyebrow{font-size:17px}
}
@media(max-width:620px){
[data-page="index"] .hero{padding:80px 18px 48px}
[data-page="index"] .hero::before{border-left-width:84px;border-top-width:84px}
[data-page="index"] .hero::after{border-right-width:88px;border-top-width:88px}
[data-page="index"] .hero h1{font-size:28px;line-height:1.35}
[data-page="index"] .hero .hero-eyebrow{font-size:15.5px;margin-bottom:12px}
[data-page="index"] .hero .wire-label{font-size:12.5px;padding:8px 16px;gap:7px}
[data-page="index"] .hero .wire-label svg{width:15px}
[data-page="index"] .hero p{font-size:15.5px}
[data-page="index"] .stats span{font-size:13.5px;padding:9px 16px;gap:7px}
.hero-steps{gap:10px 16px;padding:16px}
.hero-steps li{font-size:13.5px;padding-left:25px}
}