:root{
  --bg:#0B0B0F; --bg2:#101017; --card:#15151D; --card2:#1A1A24; --line:#262632; --line2:#33333F;
  --tx:#ECEEF2; --tx2:#A9AFBA; --tx3:#6E7480;
  --red:#E10600; --red2:#FF3A2E; --em:#0B6E4F; --em2:#23B381; --silver:#C0C7CF; --gold:#D4AF37;
  --mono:"D2Coding",ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono","Pretendard Variable",monospace;
  --barh:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--barh) + 12px)}
html,body{background:var(--bg);color:var(--tx)}
body{font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden;
  background-image:radial-gradient(circle at 1px 1px,#17171E 1px,transparent 1.2px);background-size:16px 16px}
a{color:inherit}
b,strong{font-weight:800}

/* bar */
.bar{position:sticky;top:0;z-index:20;height:var(--barh);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 24px;background:rgba(11,11,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand i{display:inline-block;width:10px;height:10px;background:var(--red);transform:rotate(45deg)}
.bar nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{font-size:14px;font-weight:600;color:var(--tx2);text-decoration:none;padding:6px 10px;white-space:nowrap}
.bar nav a:hover,.bar nav a.on{color:#fff}

h2.sec{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 18px;display:flex;align-items:center;gap:10px}
h2.sec::before{content:"";width:4px;height:20px;background:var(--red)}

/* home layout */
.layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-areas:"videos news" "dl news" "proc news";
  gap:0 0;align-items:start}
.videos{grid-area:videos;padding:28px 28px 8px}
.dl{grid-area:dl;padding:28px}
.proc{grid-area:proc;padding:28px 28px 56px}
.news{grid-area:news;position:sticky;top:var(--barh);height:calc(100vh - var(--barh));overflow-y:auto;
  border-left:1px solid var(--line);background:rgba(16,16,23,.94);overscroll-behavior:contain}
.newsin{padding:28px 32px 64px;max-width:none}

.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vcard{background:var(--card);border:1px solid var(--line2);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.vbox{aspect-ratio:9/16;background:#000}
.vbox video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.vcard figcaption{padding:10px 14px 12px;font-size:16px;font-weight:700;letter-spacing:-.01em;border-top:2px solid var(--em)}
.vcard figcaption b{color:var(--gold);margin-right:6px}
.vcard:nth-child(odd) figcaption{border-top-color:var(--red)}

.zipbtn{display:flex;flex-direction:column;gap:2px;padding:16px 20px;text-decoration:none;background:linear-gradient(90deg,rgba(225,6,0,.18),rgba(11,110,79,.14));
  border:1px solid rgba(212,175,55,.55);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.zipbtn:hover{border-color:var(--gold)}
.zipbtn .zt{font-size:19px;font-weight:800;color:#fff}
.zipbtn .zs{font-size:14px;color:var(--tx2);font-weight:600}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
.fgroup{background:var(--card);border:1px solid var(--line);padding:12px 14px}
.fgroup h3{font-size:13px;font-weight:800;color:var(--silver);letter-spacing:.04em;margin-bottom:6px}
.fgroup ul{list-style:none}
.fgroup li{display:flex;justify-content:space-between;gap:10px;font-size:14px;line-height:1.9;border-top:1px solid var(--line)}
.fgroup li:first-child{border-top:0}
.fgroup li a{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--tx);word-break:break-all}
.fgroup li a:hover{color:var(--em2)}
.fgroup li span{color:var(--tx3);font-size:12px;white-space:nowrap}
.kitdocs{margin-top:12px;font-size:14px;color:var(--tx2)}
.kitdocs a{color:var(--em2)}
.muted{color:var(--tx3)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pcard{display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:border-color .15s,background .15s}
.pcard:hover{border-color:var(--red);background:var(--card2)}
.pcard .pn{font-size:13px;font-weight:800;color:var(--gold)}
.pcard .pt{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em}
.pcard .pd{font-size:14px;color:var(--tx2);line-height:1.5}


@media (max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"videos" "news" "dl" "proc"}
  .news{position:static;height:auto;overflow:visible;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .vgrid{grid-template-columns:minmax(0,1fr);max-width:420px;margin:0 auto}
  .videos,.dl,.proc{padding-left:16px;padding-right:16px}
  .newsin{padding:24px 16px 40px}
  .bar{padding:0 12px}
  .brand{font-size:15px}
  .bar nav a{padding:6px 7px;font-size:13px}
}

/* article */
.article{max-width:880px;margin:0 auto;padding:28px 24px 64px;word-break:keep-all;overflow-wrap:anywhere}
.article h1{font-size:30px;line-height:1.3;font-weight:800;letter-spacing:-.02em;margin:8px 0 22px}
.article h2{font-size:23px;line-height:1.35;font-weight:800;margin:44px 0 14px;padding-top:12px;border-top:1px solid var(--line)}
.article h3{font-size:19px;font-weight:800;margin:30px 0 10px;color:#fff}
.article h4{font-size:16px;font-weight:800;margin:22px 0 8px;color:var(--silver)}
.article p{margin:0 0 14px;color:#DADDE3}
.article ul,.article ol{margin:0 0 14px 22px}
.article li{margin:3px 0}
.article li>ul,.article li>ol{margin-bottom:4px}
.article a{color:var(--em2);text-underline-offset:3px}
.article img{max-width:100%;height:auto;display:block;margin:18px 0 6px;border:1px solid var(--line2)}
.article em{color:var(--tx2);font-style:normal;font-size:14px}
.article hr{border:0;border-top:1px solid var(--line2);margin:32px 0}
.article blockquote{border-left:3px solid var(--gold);padding:4px 16px;margin:0 0 14px;color:var(--tx2);background:var(--bg2)}
.article code{font-family:var(--mono);font-size:.88em;background:#1C1C26;padding:1px 5px;border-radius:3px;color:#E8D9A8}
.article pre{background:#111118;border:1px solid var(--line2);padding:14px 16px;margin:0 0 16px;overflow-x:auto;line-height:1.55}
.article pre code{background:none;padding:0;color:#D6DAE0;font-size:13px;white-space:pre}
.article pre.mermaid{background:#0F0F15;text-align:center;white-space:pre;color:transparent}
.article pre.mermaid[data-processed]{color:inherit}
.article pre.mermaid svg{max-width:100%;height:auto}
.tbl{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line)}
.article table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.55}
.article th{background:var(--card2);text-align:left;font-weight:800;color:#fff;white-space:nowrap}
.article th,.article td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;min-width:72px}
.article td code{white-space:normal}
.article details{border:1px solid var(--line2);background:var(--card);margin:0 0 12px;padding:0 14px}
.article details[open]{padding-bottom:6px}
.article summary{cursor:pointer;padding:10px 0;font-weight:700;color:#fff;list-style-position:outside}
.article summary:hover{color:var(--gold)}
.article details.toc{background:var(--bg2);border-color:var(--line2);margin-bottom:24px}
.article details.toc ul{margin:4px 0 10px 18px;font-size:14px}
.article details.toc a{color:var(--tx2);text-decoration:none}
.article details.toc a:hover{color:#fff}

.docnav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--bg2)}
.docnav a{font-size:13px;font-weight:600;color:var(--tx2);text-decoration:none;padding:4px 10px;border:1px solid var(--line2)}
.docnav a.on{color:#fff;border-color:var(--red)}
.docnav a:hover{color:#fff}
.foot{border-top:1px solid var(--line);padding:24px;text-align:center;font-size:14px}
.foot a{color:var(--tx2)}
@media (max-width:760px){
  .article{padding:20px 16px 48px}
  .article h1{font-size:24px}
  .article h2{font-size:20px}
  .docnav{padding:10px 16px}
}
.wcard{grid-column:1/-1}
.wcard .wall{align-self:flex-start;margin-top:8px;padding:7px 14px;font-size:14px;font-weight:800;color:#fff;text-decoration:none;background:var(--red);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.wcard .wall:hover{background:var(--red2)}
.wcard .stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:10px}
.wcard .stages a{font-size:14px;color:var(--tx2);text-decoration:none;padding:6px 10px;border:1px solid var(--line2);background:var(--bg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .stages a b{color:var(--em2);margin-right:4px}
.wcard .stages a:hover{color:#fff;border-color:var(--em2)}
.fgroup details summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--tx2);padding:4px 0;border-top:1px solid var(--line)}
.fgroup details summary:hover{color:#fff}