.pgs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pg{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.pg h3{font-size:18px;margin-bottom:12px}
.pb{display:block;cursor:pointer;margin-bottom:8px}
.pb input{position:absolute;opacity:0;pointer-events:none}
.pb span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px 10px 38px;font-size:13.5px;color:var(--muted);position:relative;transition:.15s;line-height:1.45}
.pb span::before{content:"";position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:5px;border:1.5px solid #C9C5BB;background:#fff}
.pb b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.pb:hover span{border-color:var(--c)}
.pb input:checked+span{border-color:var(--c);background:var(--bg)}
.pb input:checked+span::before{background:var(--c);border-color:var(--c);box-shadow:inset 0 0 0 3px #fff}
.pb input:focus-visible+span{outline:2px solid var(--c);outline-offset:2px}
.result{position:sticky;bottom:12px;z-index:40;margin-top:22px;background:var(--deep);color:#DCE5F2;border-radius:20px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow)}
.result b{color:#fff}
.result .btn{min-height:44px}
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{display:block;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:18px;padding:22px;transition:transform .2s,box-shadow .2s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gcard .no{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.gcard h3{font-size:21px;margin:8px 0 6px}
.gcard p{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.gcard .rt{font-size:12.5px;color:var(--muted);font-weight:600}
.guide-a{background:#fff;border:1px solid var(--line);border-radius:26px;padding:44px;margin-bottom:26px;scroll-margin-top:110px;position:relative;overflow:hidden}
.guide-a::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c)}
.guide-a .no{font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.guide-a h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 10px}
.guide-a .intro p{font-size:17px;max-width:760px}
.guide-a .sub{font-size:19px;margin:28px 0 14px}
.pts3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pt{background:var(--bg);border-radius:16px;padding:18px 20px}
.pt h4{font-size:17px;margin-bottom:6px}
.pt p{font-size:14.5px;margin:0;color:var(--text)}
.two-c{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.tips{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tips li{display:flex;gap:10px;font-size:15.5px}
.prac{font-size:15.5px;background:var(--soft);border-radius:14px;padding:14px 16px;margin:0}
.plan{display:grid;gap:10px}
.plan div{border-left:3px solid var(--c);padding:2px 0 2px 14px;font-size:15px;color:var(--text)}
.plan b{display:block;color:var(--ink)}
.guide-a .foot{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
@media(max-width:920px){.pgs,.gcards{grid-template-columns:1fr 1fr}.pts3,.two-c{grid-template-columns:1fr}.two-c{gap:10px}.guide-a{padding:30px 24px}}
@media(max-width:620px){.pgs,.gcards{grid-template-columns:1fr}.result{bottom:74px}}