@import url("./design-guidance.css");
.kr-page{margin:0;background:var(--ka-bg,#fff);color:var(--ka-ink,#15243b);font-family:'Pretendard',sans-serif}.kr-page *{box-sizing:border-box}.kr-page a{color:inherit;text-decoration:none}.kr-page a:focus-visible,.kr-page button:focus-visible{outline:3px solid #245fc2;outline-offset:4px}.kr-layout{max-width:1320px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;padding:50px 40px 0}.kr-layout aside nav{position:sticky;top:118px;display:flex;flex-direction:column;gap:5px}.kr-nav-label{font-size:10px;letter-spacing:.13em;color:#78869b;margin:16px 12px 10px}.kr-layout aside a{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:9px;font-size:14px}.kr-layout aside a span{color:#8190a6}.kr-layout aside a:hover{background:#f3f6fa}.kr-layout aside a[aria-current]{background:#eef3fc;color:#245fc2;font-weight:650}.kr-layout main{min-width:0}.kr-breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:#7c8798;line-height:28px;white-space:nowrap;overflow:auto}.kr-heading{padding:36px 0 34px}.kr-eyebrow{font-size:10px;letter-spacing:.16em;color:#7c8798}.kr-heading h1{font-size:clamp(34px,3.7vw,48px);line-height:1.23;letter-spacing:-.045em;font-weight:650;margin:20px 0 18px}.kr-heading>p{font-size:16px;color:#768196;line-height:1.75;max-width:650px}.kr-meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:11px;margin-top:25px;color:#798599}.kr-meta>a{font-size:12px;color:#245fc2}.kr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:5px 0 55px}.kr-cards>a{border:1px solid #e3e8ef;border-radius:15px;padding:26px;transition:transform .18s,border-color .18s,box-shadow .18s}.kr-cards>a:hover{transform:translateY(-3px);border-color:#b8cae9;box-shadow:0 12px 25px #1b3c6c0a}.kr-cards small{font-size:10px;color:#8793a5;letter-spacing:.1em}.kr-cards h2{font-size:23px;margin:21px 0 12px;display:flex;justify-content:space-between}.kr-cards h2 span{color:#8da2bf;font-weight:400}.kr-cards p{color:#7c8798;font-size:13px;line-height:1.8;min-height:46px;margin:0 0 23px}.kr-card-link{font-size:12px;color:#245fc2}.kr-section{padding:36px 0;border-top:1px solid #e5eaf1;scroll-margin-top:125px}.kr-section h2{font-size:23px;letter-spacing:-.03em;margin:0 0 20px;font-weight:650}.kr-section p,.kr-section li{font-size:14px;line-height:1.95;color:#566579;overflow-wrap:anywhere}.kr-section ul{padding-left:22px}.kr-section li{margin:8px 0}.kr-code{margin:22px 0;background:#101827;border:1px solid #223047;border-radius:12px;overflow:hidden;color:#dce5f4}.kr-code>div{padding:11px 16px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.02em;color:#94a5c1;border-bottom:1px solid #ffffff0d}.kr-code button{background:#ffffff0b;border:1px solid #ffffff16;border-radius:6px;color:#c8d4e6;font:inherit;padding:6px 10px;cursor:pointer}.kr-code pre{font-size:12px;line-height:1.85;margin:0;padding:21px;max-width:100%;overflow:auto;tab-size:2}.kr-code code{font-family:'JetBrains Mono',monospace}.kr-table{overflow:auto;margin:22px 0;border:1px solid #e4e9f0;border-radius:10px}.kr-table table{width:100%;border-collapse:collapse;font-size:12px;text-align:left;line-height:1.8}.kr-table th{font-weight:550;color:#748199;background:#f6f8fb;white-space:nowrap}.kr-table td,.kr-table th{padding:13px 16px;border-bottom:1px solid #e9edf3}.kr-table tr:last-child td{border:0}.kr-table td{min-width:120px;overflow-wrap:anywhere;color:#526177}.kr-table td:first-child{font-family:'JetBrains Mono',monospace;color:#294d81;font-size:11px;min-width:150px}.kr-toc{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 32px;font-size:12px;color:#6f7f96}.kr-toc a:hover{color:#245fc2}.kr-notice{padding:22px 24px;border-radius:12px;background:#f2f6fd;font-size:13px;line-height:1.8;margin-bottom:30px}.kr-notice p{color:#687b98}.kr-notice a{color:#245fc2}.kr-copy-status{font-size:12px;color:#245fc2}.kr-layout footer{display:flex;justify-content:space-between;padding:35px 0 50px;font-size:10px;color:#8b96a7;border-top:1px solid #e5eaf1}.kr-skip{position:absolute;left:20px;top:-60px;padding:10px;background:#245fc2;color:white!important;z-index:100}.kr-skip:focus{top:5px}[data-resource-manual]{width:100%;font-family:monospace;font-size:12px;padding:14px}
html[data-theme=dark] .kr-page{background:#0c1421;color:#e0e8f5}html[data-theme=dark] .kr-layout aside a:hover,html[data-theme=dark] .kr-table th{background:#141f30}html[data-theme=dark] .kr-layout aside a[aria-current],html[data-theme=dark] .kr-notice{background:#18273d;color:#a8c7fa}html[data-theme=dark] .kr-table,html[data-theme=dark] .kr-cards>a{border-color:#253247}html[data-theme=dark] .kr-section,html[data-theme=dark] .kr-table td,html[data-theme=dark] .kr-table th,html[data-theme=dark] .kr-layout footer{border-color:#253247}html[data-theme=dark] .kr-section p,html[data-theme=dark] .kr-section li,html[data-theme=dark] .kr-table td,html[data-theme=dark] .kr-cards p{color:#a1b0c5}html[data-theme=dark] .kr-table td:first-child,html[data-theme=dark] .kr-meta>a,html[data-theme=dark] .kr-card-link{color:#9abcf2}
@media(max-width:1000px){.kr-layout{gap:35px;grid-template-columns:180px minmax(0,1fr);padding:32px 28px 0}}@media(max-width:720px){.kr-layout{display:block;padding:20px 22px 0}.kr-layout aside nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:3px;padding:0 0 20px;border-bottom:1px solid #e5eaf1}.kr-layout aside .kr-nav-label,.kr-layout aside a:nth-last-child(-n+3),.kr-layout aside a span{display:none}.kr-layout aside a{font-size:12px;padding:9px 11px}.kr-heading{padding-top:27px}.kr-cards{gap:12px}.kr-cards>a{padding:20px}.kr-cards h2{font-size:19px}.kr-heading h1{font-size:34px}.kr-section{padding:28px 0}.kr-code pre{font-size:11px;padding:16px}.kr-table td,.kr-table th{padding:11px 13px}.kr-section{scroll-margin-top:145px}}@media(max-width:430px){.kr-cards{grid-template-columns:1fr}.kr-cards p{min-height:0}.kr-heading h1{font-size:32px}}@media(prefers-reduced-motion:reduce){.kr-cards>a{transition:none}}
/* Documentation consumes the same selected palette as the library. */
:root[data-theme] .kr-page{background:var(--ka-surface);color:var(--ka-text)}
:root[data-theme] .kr-nav-label,:root[data-theme] .kr-breadcrumb,:root[data-theme] .kr-eyebrow,:root[data-theme] .kr-heading>p,:root[data-theme] .kr-meta,:root[data-theme] .kr-section p,:root[data-theme] .kr-section li,:root[data-theme] .kr-table td,:root[data-theme] .kr-cards p{color:var(--ka-subtle)}
:root[data-theme] .kr-layout aside a[aria-current]{background:var(--ka-selected);color:var(--ka-action)}
:root[data-theme] .kr-layout aside a:hover,:root[data-theme] .kr-table th{background:var(--ka-soft);color:var(--ka-text)}
:root[data-theme] .kr-cards>a,:root[data-theme] .kr-section,:root[data-theme] .kr-table,:root[data-theme] .kr-table td,:root[data-theme] .kr-table th,:root[data-theme] .kr-layout footer{border-color:var(--ka-line)}
:root[data-theme] .kr-table td:first-child,:root[data-theme] .kr-meta>a,:root[data-theme] .kr-card-link{color:var(--ka-action)}
.kr-code-actions,.kr-code-actions [role=tablist]{display:flex;align-items:center;gap:6px}
.kr-code-tabs [role=tab]{border-color:transparent;background:transparent;color:#94a5c1}
.kr-code-tabs [role=tab][aria-selected=true]{background:#263956;border-color:#4b6690;color:#fff}
.kr-code-tabs [role=tabpanel][hidden]{display:none}
@media(max-width:430px){.kr-code-tabs>div{align-items:flex-start;gap:10px;flex-wrap:wrap}}