:root{--guide-navy:#0e2742;--guide-blue:#2f8fd0;--guide-blue-dark:#1f6ea8;--guide-blue-bg:#e8f2fb;--guide-green:#43a948;--guide-green-bg:#e9f5ea;--guide-red:#d24a47;--guide-red-bg:#fbeceb;--guide-ink:#1c2b3a;--guide-muted:#6b7a8a;--guide-line:#e1e6ec;--guide-radius:8px;--guide-drawer-w:600px}.guide-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:var(--guide-blue-bg);color:var(--guide-blue-dark);border:1px solid #bcdcf4;border-radius:var(--guide-radius);padding:6px 13px;font-size:14px;font-weight:600;font-family:inherit;transition:background .15s}.guide-btn:hover{background:#dbecfa}.guide-btn img,.guide-btn svg{width:15px;height:15px}.guide-qmark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--guide-blue);color:var(--guide-blue);font-size:12px;font-weight:700;cursor:help;background:#fff;flex-shrink:0;vertical-align:middle;margin-left:5px}.guide-qmark .guide-tip{position:absolute;left:50%;top:calc(100% + 9px);transform:translate(-50%);width:260px;background:var(--guide-navy);color:#eaf2f9;border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.55;font-weight:400;box-shadow:0 8px 24px #0e274247;z-index:1030;opacity:0;visibility:hidden;transition:opacity .14s,transform .14s;text-align:left;pointer-events:none}.guide-qmark:hover .guide-tip,.guide-qmark:focus-within .guide-tip{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(0)}.guide-qmark .guide-tip:before{content:"";position:absolute;left:50%;top:-5px;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:var(--guide-navy)}.guide-qmark .guide-tip b{color:#fff;font-weight:600}.guide-tip .guide-goto{display:inline-flex;align-items:center;gap:4px;margin-top:8px;color:#7ec2f3;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}.guide-tip .guide-goto:hover{text-decoration:underline}.guide-overlay{position:fixed;inset:0;background:#0e27426b;opacity:0;visibility:hidden;transition:opacity .22s;z-index:1040}.guide-overlay.open{opacity:1;visibility:visible}.guide-drawer{position:fixed;top:0;right:0;height:100%;width:var(--guide-drawer-w);max-width:96vw;background:#f4f7fa;box-shadow:-12px 0 36px #0e274233;transform:translate(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:1050;display:flex;flex-direction:column;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--guide-ink)}.guide-drawer.open{transform:translate(0)}.guide-drawer-top{background:var(--guide-navy);color:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.guide-drawer-top h2{margin:0;font-size:18px;font-weight:700}.guide-drawer-top .guide-sub{font-size:14px;color:#9fc0db;margin-top:3px}.guide-close-x{background:none;border:none;color:#cfe0ef;font-size:24px;cursor:pointer;line-height:1;padding:4px}.guide-close-x:hover{color:#fff}.guide-toc{display:flex;gap:7px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--guide-line);flex-shrink:0;background:#fafcfe}.guide-toc a{font-size:14px;color:var(--guide-blue-dark);background:var(--guide-blue-bg);border:1px solid #cce4f6;padding:4px 9px;border-radius:20px;text-decoration:none;cursor:pointer}.guide-toc a:hover{background:#d3e9f9}.guide-drawer-body{overflow-y:auto;padding:0 20px 40px;flex:1;scroll-behavior:smooth;font-size:16px;line-height:1.5}.guide-drawer .gsec{padding:20px 0;border-bottom:1px solid var(--guide-line);scroll-margin-top:8px}.guide-drawer .gsec:last-of-type{border-bottom:none}.guide-drawer .gsec h3{font-size:16px;margin:0 0 12px;color:var(--guide-navy);font-weight:700;line-height:1.3}.guide-drawer .gsec .lead{font-size:14px;color:#46586a;margin:0 0 12px}.guide-drawer b{font-weight:700}.guide-drawer .g-card{background:#fff;border:1.5px solid var(--guide-line);border-radius:12px;padding:14px 15px;box-shadow:0 2px 8px #0e27420d;margin-bottom:12px}.guide-drawer .g-card:last-child{margin-bottom:0}.guide-drawer .g-card--blue{border-color:#8fc4e8}.guide-drawer .g-card--green{border-color:#a4d6a7}.guide-drawer .g-card--red{border-color:#e6b6b4}.guide-drawer .g-cardhead{border-radius:8px;padding:8px 12px;text-align:center;font-weight:700;font-size:14px;margin-bottom:10px}.guide-drawer .g-cardhead--blue{background:var(--guide-blue-bg);color:var(--guide-blue-dark)}.guide-drawer .g-cardhead--green{background:var(--guide-green-bg);color:#2e7d32}.guide-drawer .g-cardhead--navy{background:var(--guide-navy);color:#fff}.guide-drawer .g-cardhead--bluesolid{background:var(--guide-blue);color:#fff}.guide-drawer .g-rowhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.guide-drawer .g-num{width:32px;height:32px;border-radius:50%;background:var(--guide-blue);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.guide-drawer .g-num--green{background:var(--guide-green)}.guide-drawer .g-rowhead b{font-size:16px;color:var(--guide-navy)}.guide-drawer .g-rule{height:1px;background:var(--guide-line);margin:0 0 10px}.guide-drawer .g-arrows{list-style:none;margin:0;padding:0;font-size:14px}.guide-drawer .g-arrows li{position:relative;padding:4px 0 4px 20px;line-height:1.45}.guide-drawer .g-arrows li:before{content:"→";position:absolute;left:0;color:var(--guide-blue);font-weight:700}.guide-drawer .g-arrows--green li:before{color:var(--guide-green)}.guide-drawer .g-panel{border-radius:10px;padding:11px 13px;font-size:14px;line-height:1.5;margin-top:4px}.guide-drawer .g-panel--green{background:var(--guide-green-bg)}.guide-drawer .g-panel--red{background:var(--guide-red-bg)}.guide-drawer .g-panel p{margin:0 0 8px;padding-left:20px;position:relative}.guide-drawer .g-panel p:last-child{margin-bottom:0}.guide-drawer .g-panel--green p:before{content:"✓";position:absolute;left:0;color:var(--guide-green);font-weight:700}.guide-drawer .g-panel--red p:before{content:"⚠";position:absolute;left:0}.guide-drawer .g-cardnote{text-align:center;font-size:14px;color:#46586a;margin:0 0 8px;line-height:1.45}.guide-drawer .g-muted{color:var(--guide-muted);font-size:14px;text-align:center;margin:8px 0 0}.guide-drawer .ex{font-style:italic;color:#5a6b7a}.guide-drawer .g-banner{background:var(--guide-blue-bg);border:1px solid #c4e0f4;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;color:#2b3f52;margin-bottom:12px}.guide-drawer .g-banner b{color:var(--guide-blue-dark)}.guide-drawer .g-chip{display:block;text-align:center;font-weight:700;font-size:14px;border-radius:8px;padding:10px 12px;margin:8px 0}.guide-drawer .g-chip--blue{background:var(--guide-blue);color:#fff}.guide-drawer .g-chip--green{background:var(--guide-green);color:#fff}.guide-drawer .g-chip--red{background:var(--guide-red-bg);border:1px solid #e6b6b4;color:var(--guide-red)}.guide-drawer .g-hl{display:block;background:var(--guide-green-bg);border:1px solid #bfe3c1;border-radius:8px;padding:8px 10px;text-align:center;font-weight:700;color:#2e7d32;font-size:14px;margin:4px 0 10px}.guide-drawer .g-label{font-size:12px;font-weight:700;color:var(--guide-blue-dark);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 3px}.guide-drawer .g-bullets{list-style:none;margin:0;padding:0;font-size:14px}.guide-drawer .g-bullets li{padding:3px 0 3px 14px;position:relative;color:var(--guide-blue-dark);font-weight:600}.guide-drawer .g-bullets li:before{content:"•";position:absolute;left:2px;color:var(--guide-blue)}.guide-drawer .g-checks{list-style:none;margin:0;padding:0;font-size:14px}.guide-drawer .g-checks li{padding:4px 0 4px 20px;position:relative;line-height:1.4}.guide-drawer .g-checks li.ok:before{content:"✓";position:absolute;left:0;color:var(--guide-green);font-weight:700}.guide-drawer .g-checks li.no{color:var(--guide-red);font-weight:600}.guide-drawer .g-checks li.no:before{content:"✗";position:absolute;left:0;color:var(--guide-red);font-weight:700}.guide-drawer .callout{background:var(--guide-navy);color:#dfeaf3;font-size:14px;border-radius:10px;padding:12px 15px;margin-top:14px;line-height:1.5}.guide-drawer .callout b{color:#fff}.guide-drawer .callout--green{background:var(--guide-green-bg);color:#2f5d33;border:1px solid #bfe3c1}.guide-drawer .callout--green b{color:#2e7d32}.guide-drawer .steps{list-style:none;margin:0;padding:0;counter-reset:s}.guide-drawer .steps li{position:relative;padding:11px 12px 11px 54px;border:1px solid var(--guide-line);border-radius:10px;margin-bottom:8px;background:#fff}.guide-drawer .steps li:last-child{margin-bottom:0}.guide-drawer .steps li:before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;background:var(--guide-blue);color:#fff;border-radius:50%;text-align:center;line-height:30px;font-size:14px;font-weight:700}.guide-drawer .steps li:nth-child(n+3):before{background:var(--guide-green)}.guide-drawer .steps b{display:block;font-size:13px;color:var(--guide-navy);margin-bottom:2px}.guide-drawer .steps span{font-size:14px;color:#5a6b7a}.guide-drawer .cheat{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:var(--guide-navy);border-radius:10px;overflow:hidden;color:#dfeaf3}.guide-drawer .cheat th{background:var(--guide-blue);color:#fff;text-align:left;padding:8px 9px;font-weight:600;font-size:12px}.guide-drawer .cheat td{padding:8px 9px;border-top:1px solid rgba(255,255,255,.08);vertical-align:top;line-height:1.35}.guide-drawer .cheat tr:nth-child(2n) td{background:#ffffff0b}.guide-drawer .cheat td:first-child{font-weight:600;color:#fff;padding-left:24px;position:relative}.guide-drawer .cheat tbody tr td:first-child:before{content:"";position:absolute;left:9px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--guide-blue)}.guide-drawer .cheat tbody tr:nth-child(n+5) td:first-child:before{background:var(--guide-green)}.guide-drawer .cheat td:last-child{color:#8fd39a}.guide-drawer .g-mistake{border:1px solid var(--guide-line);border-radius:10px;padding:12px;margin-bottom:10px;background:#fff}.guide-drawer .g-mistake .g-mhead{display:flex;gap:10px;align-items:flex-start}.guide-drawer .g-mistake .g-mico{width:34px;height:34px;border-radius:8px;background:var(--guide-red-bg);border:1px solid #eec3c1;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.guide-drawer .g-mistake .q{font-weight:700;font-size:14px;color:var(--guide-navy);margin-bottom:3px}.guide-drawer .g-mistake .why{font-size:14px;color:#6b7a8a;line-height:1.45}.guide-drawer .g-mistake .fix{margin-top:10px;background:var(--guide-green-bg);border:1px solid #bfe3c1;border-radius:8px;padding:9px 11px;font-size:14px;line-height:1.45}.guide-drawer .g-mistake .fix b{color:#2e7d32}.guide-drawer .g-quality{display:flex;flex-direction:column;gap:10px}.guide-drawer .g-qcard{border:1.5px solid var(--guide-line);border-radius:12px;padding:14px;text-align:center;background:#fff}.guide-drawer .g-qcard--green{border-color:#a4d6a7}.guide-drawer .g-qcard--blue{border-color:#8fc4e8}.guide-drawer .g-qico{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:8px}.guide-drawer .g-qico--green{background:var(--guide-green-bg);border:2px solid #a4d6a7}.guide-drawer .g-qico--blue{background:var(--guide-blue-bg);border:2px solid #8fc4e8}.guide-drawer .g-qcard b{display:block;font-size:14px;color:var(--guide-navy);margin-bottom:8px}.guide-drawer .g-qcard .g-rule{width:70%;margin:0 auto 10px}.guide-drawer .g-qlist{list-style:none;margin:0;padding:0;text-align:left;font-size:14px}.guide-drawer .g-qlist li{padding:4px 0 4px 15px;position:relative;color:#3a4a5a;line-height:1.4}.guide-drawer .g-qlist li:before{content:"·";position:absolute;left:4px;top:0;color:var(--guide-green);font-weight:700;font-size:18px;line-height:1.2}.guide-drawer .g-qcard--blue .g-qlist li:before{color:var(--guide-blue)}.guide-dl{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--guide-blue-dark);background:var(--guide-blue-bg);border:1px solid #c4e0f4;border-radius:var(--guide-radius);padding:8px 13px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}.guide-dl:hover{background:#d6ebfa}@media(max-width:767px){.guide-drawer{width:100%;max-width:100%}}
