.board{max-width:1120px;margin:0 auto;padding:32px clamp(14px,3vw,28px) 120px}.board.narrow{max-width:980px}.mock-canvas{background:#eceef1;background-image:radial-gradient(var(--g300) 1px, transparent 1px);background-size:24px 24px;min-height:100vh}.doc-head{background:var(--g900);color:#fff;border-radius:22px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:14px;padding:clamp(22px,4vw,30px);display:flex}.doc-head .ttl{align-items:center;gap:13px;display:flex}.doc-head .mark{background:var(--red);border-radius:12px;place-items:center;width:40px;height:40px;font-size:21px;font-weight:800;display:grid}.doc-head h1{letter-spacing:-.04em;font-size:clamp(20px,4vw,25px);font-weight:800}.doc-head .ttl p{color:var(--g400);margin-top:3px;font-size:13px;font-weight:500}.doc-meta{flex-wrap:wrap;gap:22px;display:flex}.doc-meta div{color:var(--g400);font-size:12px}.doc-meta b{color:#fff;margin-top:3px;font-size:13.5px;font-weight:700;display:block}.group{align-items:center;gap:12px;margin:46px 0 18px;display:flex}.group .gx{font-family:var(--mono);color:var(--red);background:var(--red-bg);border-radius:7px;padding:5px 11px;font-size:12px;font-weight:700}.group h2{letter-spacing:-.03em;font-size:17px;font-weight:800}.group .ln{background:var(--g300);flex:1;height:1px}.scap{flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:10px;display:flex}.scap .nm{color:var(--g800);font-size:14px;font-weight:800}.scap .tag{color:var(--g600);border:1px solid var(--g300);background:#fff;border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700}.scap a.tag:hover{border-color:var(--red);color:var(--red)}.swrap{margin-bottom:32px}.notes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px;display:grid}.note{border:1px solid var(--g200);background:#fff;border-radius:11px;padding:13px 15px}.note h5{color:var(--red);align-items:center;gap:6px;margin-bottom:6px;font-size:11px;font-weight:800;display:flex}.note h5:before{content:"";background:var(--red);border-radius:50%;width:5px;height:5px}.note p{color:var(--g700);font-size:12.5px;line-height:1.55}.win{border:1px solid var(--g200);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px #191f281a}.win-bar{background:var(--g50);border-bottom:1px solid var(--g100);align-items:center;gap:8px;height:44px;padding:0 14px;display:flex}.win-bar .d{gap:6px;display:flex}.win-bar .d i{background:var(--g300);border-radius:50%;width:11px;height:11px}.win-url{border:1px solid var(--g200);height:27px;color:var(--g500);white-space:nowrap;background:#fff;border-radius:8px;flex:1;align-items:center;gap:7px;margin-left:8px;padding:0 11px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.win-url svg{color:var(--g400);flex-shrink:0}.appgrid{flex-wrap:wrap;justify-content:center;gap:34px 30px;display:flex}.pu{width:416px;max-width:100%}.pcap{flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:12px;padding-left:4px;display:flex}.pcap .step{font-family:var(--mono);color:#fff;background:var(--red);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700}.pcap .nm{color:var(--g800);font-size:13.5px;font-weight:800}.pcap .sz{font-family:var(--mono);color:var(--g500);font-size:10.5px}.pcap .tag{color:var(--g600);border:1px solid var(--g300);background:#fff;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:700}.device{background:#0b0e13;border-radius:50px;width:416px;max-width:100%;padding:13px;box-shadow:0 20px 44px #191f2838}.screen{aspect-ratio:390/844;background:#fff;border-radius:37px;flex-direction:column;width:100%;display:flex;position:relative;overflow:hidden}.notch{z-index:9;background:#0b0e13;border-radius:0 0 17px 17px;width:128px;height:27px;position:absolute;top:0;left:50%;transform:translate(-50%)}.sbar{height:47px;color:var(--g900);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 26px 0 30px;font-size:15px;font-weight:700;display:flex}.sbar .ic{align-items:center;gap:6px;display:flex}.body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.phd{border-bottom:1px solid var(--g100);padding:6px 22px 16px}.phd .pg{color:var(--g600);justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:700;display:flex}.phd .pg b{color:var(--red)}.ppb{background:var(--g100);border-radius:99px;height:6px;margin-bottom:14px;overflow:hidden}.ppb i{background:var(--red);border-radius:99px;height:100%;display:block}.phd .t{letter-spacing:-.03em;font-size:21px;font-weight:800}.phd .s{color:var(--g500);margin-top:3px;font-size:13px}.phd.bar{align-items:center;gap:11px;padding-top:12px;display:flex}.pcontent{flex:1;min-height:0;padding:18px 22px;overflow:hidden}.pl{color:var(--g700);margin-bottom:8px;font-size:13px;font-weight:700}.pi{border:1px solid var(--g200);min-height:50px;color:var(--g400);border-radius:13px;align-items:center;gap:9px;margin-bottom:16px;padding:0 15px;font-size:15px;display:flex}.pi.fill{color:var(--g900);border-color:var(--g300);font-weight:600}.pi svg{color:var(--red);flex-shrink:0}.pi.foc{border-color:var(--red);box-shadow:0 0 0 4px var(--red-bg);color:var(--g900);font-weight:600}.pty{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.pty b{background:var(--g100);color:var(--g600);border-radius:12px;padding:11px 15px;font-size:14px;font-weight:700}.pty b.on{background:var(--red-bg);color:var(--red-strong);box-shadow:inset 0 0 0 1px var(--red-line)}.parea{border:1px solid var(--g200);border-radius:13px;margin-bottom:16px;padding:13px 15px}.parea p{color:var(--g700);font-size:14.5px;line-height:1.55}.parea .cc{text-align:right;color:var(--g400);margin-top:8px;font-size:11px;font-weight:600}.psr{gap:8px;margin-bottom:10px;display:flex}.psr .si{border:1px solid var(--g200);height:48px;color:var(--g400);border-radius:12px;flex:1;align-items:center;padding:0 14px;font-size:13.5px;display:flex}.psr .sx{border:1px solid var(--g200);width:48px;height:48px;color:var(--g400);border-radius:12px;place-items:center;display:grid}.padd{color:var(--red);align-items:center;gap:6px;margin-bottom:16px;font-size:13.5px;font-weight:700;display:flex}.pup{border:1.5px dashed var(--g300);text-align:center;border-radius:14px;margin-bottom:14px;padding:24px}.pup .ic{background:var(--red-bg);width:48px;height:48px;color:var(--red);border-radius:14px;place-items:center;margin:0 auto 11px;display:grid}.pup p{color:var(--g600);font-size:13.5px;font-weight:600}.pup .sub{color:var(--g400);margin-top:4px;font-size:11.5px;font-weight:500}.pth{gap:9px;margin-bottom:9px;display:flex}.pth .t2{background:var(--g100);height:78px;color:var(--g400);border-radius:13px;flex:1;place-items:center;display:grid;position:relative}.pth .t2 .ex{color:#fff;background:var(--g900);opacity:.82;border-radius:5px;padding:1px 6px;font-size:9px;font-weight:800;position:absolute;bottom:6px;left:6px}.popt{color:var(--g500);margin-bottom:15px;font-size:12px;font-weight:600}.pck{border:1px solid var(--g200);background:var(--g50);border-radius:13px;align-items:flex-start;gap:11px;margin-bottom:16px;padding:14px;display:flex}.pck .b{background:var(--red);color:#fff;border-radius:8px;flex-shrink:0;place-items:center;width:24px;height:24px;display:grid}.pck p{color:var(--g700);font-size:13px;line-height:1.5}.pbtn{background:var(--red);color:#fff;letter-spacing:-.02em;cursor:pointer;width:100%;height:54px;font-size:16px;font-weight:700;font-family:var(--font);border:none;border-radius:14px;place-items:center;display:grid}.pbtn:hover{background:var(--red-strong)}.pbtn.ghost{color:var(--g700);box-shadow:inset 0 0 0 1px var(--g200);background:#fff}.pbtn.ghost:hover{background:var(--g50)}.pbtn.dis{background:var(--g300);cursor:not-allowed}.pfoot{flex-shrink:0;padding:14px 22px 22px}.onb{text-align:center;flex-direction:column;flex:1;align-items:center;padding:60px 30px 0;display:flex}.onb .logo{background:var(--red);color:#fff;border-radius:20px;place-items:center;width:64px;height:64px;margin-bottom:24px;font-size:32px;font-weight:800;display:grid}.onb h2{letter-spacing:-.04em;margin-bottom:12px;font-size:25px;font-weight:800;line-height:1.3}.onb p{color:var(--g600);max-width:280px;font-size:14.5px;line-height:1.6}.perm{flex-direction:column;gap:11px;width:100%;margin-top:28px;display:flex}.prow2{border:1px solid var(--g200);border-radius:14px;align-items:center;gap:13px;padding:15px;display:flex}.prow2 .pic{background:var(--red-bg);width:42px;height:42px;color:var(--red);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.prow2 .tx{text-align:left;flex:1}.prow2 .tx b{font-size:14.5px;font-weight:800;display:block}.prow2 .tx span{color:var(--g500);font-size:12px}.prow2 .sw{background:var(--red);cursor:pointer;border-radius:99px;flex-shrink:0;width:46px;height:28px;position:relative}.prow2 .sw:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:all .18s;position:absolute;top:3px;right:3px}.prow2 .sw.off{background:var(--g300)}.prow2 .sw.off:after{left:3px;right:auto}.psuc{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:30px 28px;display:flex}.psuc .sc{background:var(--red-bg);width:78px;height:78px;color:var(--red);border-radius:50%;place-items:center;margin-bottom:22px;display:grid}.psuc h4{letter-spacing:-.03em;margin-bottom:11px;font-size:23px;font-weight:800}.psuc p{color:var(--g600);max-width:280px;margin-bottom:16px;font-size:14px;line-height:1.6}.psuc .ref{font-family:var(--mono);color:var(--red-strong);background:var(--red-bg);border-radius:99px;padding:7px 16px;font-size:13px;font-weight:700}.psuc .pp{text-align:left;color:var(--g500);background:var(--g50);border:1px solid var(--g200);border-radius:13px;width:100%;margin-top:22px;padding:15px 16px;font-size:12.5px;line-height:1.9}.mfil{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.mfil b{background:var(--g100);color:var(--g600);cursor:pointer;border-radius:99px;padding:8px 13px;font-size:12.5px;font-weight:700}.mfil b.on{background:var(--g900);color:#fff}.mrec{border-bottom:1px solid var(--g100);padding:14px 0}.mrec .mt{align-items:center;gap:9px;margin-bottom:6px;display:flex}.mrec .mn{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.35}.mrec .mm{color:var(--g500);align-items:center;gap:6px;font-size:12px;font-weight:500;display:flex}.ptab{border-top:1px solid var(--g100);flex-shrink:0;justify-content:space-around;align-items:center;padding:11px 18px 16px;display:flex}.ptab .tb{color:var(--g400);flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;display:flex}.ptab .tb.on{color:var(--red)}.md-meta{flex-wrap:wrap;gap:8px;margin:12px 0 16px;display:flex}.md-meta span{color:var(--g600);background:var(--g100);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600}.preview-nav{z-index:30;-webkit-backdrop-filter:saturate(180%)blur(12px);backdrop-filter:saturate(180%)blur(12px);border-bottom:1px solid var(--g200);background:#ffffffd9;margin-bottom:18px;position:sticky;top:0}.preview-nav .inner{flex-wrap:wrap;align-items:center;gap:8px;max-width:1120px;margin:0 auto;padding:12px clamp(14px,3vw,28px);display:flex}.preview-nav a{color:var(--g600);background:var(--g100);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700}.preview-nav a:hover{background:var(--g200);color:var(--g900)}