﻿:root{--accent:#f59e0b;--accent-light:#fef3c7;--accent-dark:#b45309;--accent-text:#78350f;--text:#1e293b;--text-mid:#475569;--text-light:#64748b;--bg:#ffffff;--bg-page:#f8fafc;--bg-alt:#f1f5f9;--border:#e2e8f0;--border-light:#f1f5f9;--radius:12px;--radius-sm:8px;--shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shadow-md:0 4px 16px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);--shadow-lg:0 8px 30px rgba(0,0,0,.08);--focus-ring:0 0 0 3px rgba(245,158,11,.45);--transition:.2s ease;--toc-width:260px;--content-max:760px}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:24px}
    body{background:var(--bg-page);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:clamp(15px,1vw+12px,17px);line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
    .skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 24px;background:var(--text);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;transition:top var(--transition)}.skip-link:focus{top:16px}
    .progress-bar{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-dark));z-index:1000;transition:width 60ms linear;border-radius:0 2px 2px 0}

    .kl-layout{display:grid;grid-template-columns:var(--toc-width) 1fr;gap:0;max-width:calc(var(--toc-width)+var(--content-max)+80px);margin:0 auto}

    .toc{position:sticky;top:12px;align-self:start;height:calc(100dvh - 24px);padding:24px 16px 24px 20px;border-right:1px solid var(--border);background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--border) transparent}
    .toc::-webkit-scrollbar{width:4px}.toc::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
    .toc-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
    .toc-group{margin-bottom:12px}.toc-group-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);padding:4px 0 4px 10px;margin-bottom:2px}
    .toc-link{display:block;padding:4px 10px;font-size:.82rem;line-height:1.5;color:var(--text-mid);text-decoration:none;border-radius:var(--radius-sm);border-left:2px solid transparent;transition:all var(--transition)}
    .toc-link:hover{color:var(--text);background:var(--bg-alt)}.toc-link.active{color:var(--accent-dark);background:var(--accent-light);border-left-color:var(--accent);font-weight:600}
    .toc-link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
    .toc-toggle{display:none;position:fixed;bottom:80px;right:20px;z-index:200;width:48px;height:48px;border-radius:50%;border:none;background:var(--text);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);transition:transform var(--transition),background var(--transition);align-items:center;justify-content:center}
    .toc-toggle:hover{background:var(--text-mid)}.toc-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}.toc-toggle svg{width:20px;height:20px;fill:currentColor}
    .toc-close{display:none;position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1.2rem;cursor:pointer;align-items:center;justify-content:center;line-height:1}.toc-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}
    .toc-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:299}.toc-backdrop.visible{display:block}

    .kl-main{max-width:var(--content-max);padding:40px clamp(16px,4vw,48px) 64px}
    .kl-hero{text-align:center;margin-bottom:40px;padding-bottom:32px;border-bottom:2px solid var(--accent)}
    .kl-hero h1{font-size:clamp(1.5rem,2.5vw+.5rem,2rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.25;margin-bottom:8px}
    .kl-hero .company{font-size:1rem;font-weight:600;color:var(--accent-dark);margin-bottom:4px}
    .kl-hero .subtitle{font-size:.85rem;color:var(--text-light)}

    .group-divider{display:flex;align-items:center;gap:12px;margin:36px 0 20px;padding:0 4px}
    .group-divider::before,.group-divider::after{content:'';flex:1;height:1px;background:var(--border)}
    .group-divider-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);white-space:nowrap}

    .kl-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;transition:box-shadow var(--transition);scroll-margin-top:20px}
    .kl-card:hover{box-shadow:var(--shadow-sm)}.kl-card:target{box-shadow:0 0 0 2px var(--accent)}
    .kl-card--highlight{border-left:3px solid var(--accent)}.kl-card--highlight .kl-card-header{background:linear-gradient(135deg,var(--accent-light) 0%,var(--bg) 70%)}
    .kl-card-header{display:flex;align-items:center;gap:12px;padding:18px 24px 14px;border-bottom:1px solid var(--border-light);background:var(--bg)}
    .badge{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 10px;border-radius:var(--radius-sm);background:var(--accent-light);color:var(--accent-text);font-size:.78rem;font-weight:800;flex-shrink:0;border:1px solid rgba(245,158,11,.25)}
    .badge--icon{font-size:1.1rem;padding:0 8px}
    .kl-card-header h2{font-size:clamp(1rem,1.5vw+.4rem,1.15rem);font-weight:700;color:var(--text);margin:0;line-height:1.35}
    .anchor-link{display:inline-block;margin-left:6px;font-size:.8em;color:var(--text-light);text-decoration:none;opacity:0;transition:opacity var(--transition);vertical-align:middle}
    .kl-card:hover .anchor-link,.anchor-link:focus{opacity:1}
    .kl-card-body{padding:20px 24px 24px}.kl-card-body p{margin-bottom:16px;color:var(--text-mid)}

    .info-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-light)}.info-row:last-of-type{border-bottom:none}
    .info-label{flex:0 0 140px;font-weight:700;font-size:.88rem;color:var(--text)}.info-value{flex:1;font-size:.9rem;color:var(--text-mid);line-height:1.6}
    .info-value a{color:var(--accent-dark);text-decoration:none}.info-value a:hover{text-decoration:underline}

    .step-list{list-style:none;counter-reset:step;margin:16px 0}
    .step-list li{counter-increment:step;display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-light)}
    .step-list li:last-child{border-bottom:none}
    .step-list li::before{content:counter(step);display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:50%;background:var(--accent-light);color:var(--accent-text);font-weight:800;font-size:.85rem;flex-shrink:0;border:1px solid rgba(245,158,11,.25)}

    .hint-box{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;background:var(--accent-light);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-sm);margin-top:20px;font-size:.88rem;color:var(--accent-text);line-height:1.6}
    .hint-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px}
    .hint-box--warning{background:#fef2f2;border-color:#fecaca;color:#991b1b}

    .feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:16px 0}
    .feature-item{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--bg-alt);border-radius:var(--radius-sm);border:1px solid var(--border-light)}
    .feature-icon{font-size:1.3rem;flex-shrink:0;margin-top:2px}
    .feature-text{font-size:.88rem;color:var(--text)}.feature-text strong{display:block;margin-bottom:2px}.feature-text span{color:var(--text-mid);font-size:.82rem}

    .kl-footer{text-align:center;padding:32px 24px;margin-top:40px;border-top:1px solid var(--border);font-size:.82rem;color:var(--text-light);line-height:1.7}
    .kl-footer .company-name{font-weight:700;color:var(--text);margin-bottom:4px}.kl-footer a{color:var(--accent-dark);text-decoration:none}.kl-footer a:hover{text-decoration:underline}

    .back-to-top{position:fixed;bottom:24px;right:20px;z-index:100;width:44px;height:44px;border-radius:50%;border:none;background:var(--text);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--transition),visibility var(--transition),transform var(--transition),background var(--transition);display:flex;align-items:center;justify-content:center}
    .back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--text-mid)}.back-to-top:focus-visible{outline:none;box-shadow:var(--focus-ring)}.back-to-top svg{width:18px;height:18px;fill:currentColor}

    a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
    @media print{.toc,.toc-toggle,.toc-backdrop,.back-to-top,.progress-bar,.skip-link{display:none!important}.kl-layout{display:block}.kl-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}body{font-size:11pt}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
    @media(max-width:1080px){.kl-layout{grid-template-columns:1fr}.toc{position:fixed;top:0;left:0;width:280px;height:100dvh;z-index:300;transform:translateX(-100%);transition:transform .3s ease;border-right:1px solid var(--border);box-shadow:var(--shadow-lg);padding-top:52px}.toc.open{transform:translateX(0)}.toc-close{display:flex}.toc-toggle{display:flex}}
    @media(max-width:640px){.kl-main{padding:24px 16px 48px}.kl-card-header{padding:14px 16px 12px}.kl-card-body{padding:16px}.kl-hero h1{font-size:1.35rem}.info-row{flex-direction:column;gap:4px}.info-label{flex:none}.feature-grid{grid-template-columns:1fr}}
    @media(max-width:380px){.kl-hero h1{font-size:1.2rem}.hint-box{flex-direction:column;gap:8px}}