/* 파일질라 한글 가이드 — tools/design/export_site_assets.py 가 만든 파일. 직접 고치지 말 것 */
.shot { display:grid; grid-template-columns:auto minmax(180px, 1fr); gap:8px 24px; align-items:center; margin:16px 0 28px; }
.shot__zoom { padding:0; border:1px solid var(--line); border-radius:6px; background:none; cursor:zoom-in; line-height:0; max-width:100%; }
.shot__zoom img { display:block; max-width:100%; height:auto; border-radius:6px; }
.shot__legend { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.shot__legend li { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; line-height:1.4; }
.shot__n { flex:none; width:24px; height:24px; border-radius:50%; color:#fff; font-size:13px; font-weight:700;
           display:inline-flex; align-items:center; justify-content:center; }
.is-red .shot__n { background:var(--red); } .is-blue .shot__n { background:var(--blue); }
.is-green .shot__n { background:var(--green); } .is-gray .shot__n { background:var(--gray); }
.is-red { color:var(--red); }
.shot__side { display:grid; gap:12px; align-content:center; }
.shot__note { margin:0; font-size:14px; color:#616161; line-height:1.6; }
.shot__hint { display:none; }
.shot--wide { grid-template-columns:minmax(0, 1fr); gap:12px; }
.shot--wide .shot__legend { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width:720px) {
  .shot { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .shot__zoom { justify-self:center; }
  .shot__hint { display:block; margin:-4px 0 0; font-size:13px; color:#9e9e9e; text-align:center; }
}
dialog.zoom { border:0; padding:0; max-width:96vw; max-height:96vh; background:transparent; overflow:auto; }
dialog.zoom::backdrop { background:rgba(0,0,0,.85); }
dialog.zoom img { display:block; width:var(--zw); max-width:none; height:auto; }
.zoom__close { position:fixed; top:10px; right:10px; width:44px; height:44px; border:0; border-radius:50%;
               background:rgba(0,0,0,.6); color:#fff; font-size:24px; line-height:44px; cursor:pointer; }
@media (min-width:721px) { dialog.zoom img { max-width:96vw; max-height:92vh; width:auto; } }
@media (max-width:720px) { dialog.zoom { width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0; } }
.doc .doc .article { font-size:17px; line-height:1.75; }
.doc .article h1 { font-size:28px; line-height:1.35; margin:8px 0 20px; }
.doc .article h2 { font-size:22px; margin:48px 0 12px; padding-top:12px; border-top:2px solid #eee; }
.doc .article h3 { font-size:18px; margin:28px 0 8px; }
.doc .article p, .doc .article li { word-break:keep-all; }
.doc .article code { background:#f2f2f4; padding:1px 5px; border-radius:4px; font-size:.92em; }
.doc .article table { border-collapse:collapse; width:100%; margin:16px 0; font-size:15px; display:block; overflow-x:auto; }
.doc .article th, .doc .article td { border:1px solid #e3e3e3; padding:8px 10px; text-align:left; vertical-align:top; }
.doc .article th { background:#fafafa; }
.doc .article blockquote { margin:20px 0; padding:14px 18px; background:#f1f8e9; border-left:4px solid #7cb342; border-radius:0 8px 8px 0; }
.doc .article blockquote p { margin:6px 0; }
.doc .article hr { border:0; border-top:1px solid #eee; margin:32px 0; }
.todo { background:#fff3c4; color:#6d5200; padding:1px 4px; border-radius:3px; font-size:.9em; }
.link-todo { background:#eceff1; color:#546e7a; padding:1px 4px; border-radius:3px; font-size:.9em; }
.pair { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; margin:14px 0 4px; align-items:end; }
.pair figure { margin:0; text-align:center; }
.pair img { max-width:100%; height:auto; border:1px solid #e0e0e0; border-radius:6px; }
.pair figcaption { font-weight:700; font-size:15px; margin-top:6px; }
.pair .is-en figcaption { color:#757575; } .pair .is-ko figcaption { color:#2E7D32; }
.code { position:relative; margin:12px 0 16px; }
.code pre { margin:0; padding:14px 16px; padding-right:70px; background:#263238; color:#eceff1; border-radius:8px;
            overflow-x:auto; font:14px/1.6 Consolas,"D2Coding",monospace; }
.code__copy { position:absolute; top:8px; right:8px; border:0; border-radius:6px; padding:6px 10px; background:#546e7a;
              color:#fff; font-size:13px; cursor:pointer; }
.code pre code { background:none; padding:0; color:inherit; font-size:inherit; border-radius:0; }
.doc .article li code, .doc .article p code { overflow-wrap:anywhere; }
.preview-bar { background:#263238; color:#fff; font-size:13px; padding:8px 16px; text-align:center; }
@media (max-width:720px) { .doc .doc .article { font-size:16px; } .doc .article h1 { font-size:23px; } .pair { grid-template-columns:minmax(0, 1fr); } }
:root { color-scheme:light;
  --bg:#FFFFFF; --bg-soft:#F6F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC; --ink:#0E1116; --ink-2:#3A4250; --muted:#6B7483;
  --line:#E8EAEE; --line-2:#D8DCE3; --brand:#3366FF; --brand-ink:#2352E0; --brand-soft:#EEF3FF; --brand-line:#D6E1FF;
  --mint:#0CA678; --mint-soft:#E6F8F0; --amber:#E8890B; --amber-ink:#B86A00; --amber-soft:#FFF6E6; --amber-line:#FBE3B8;
  --red:#E03131; --red-soft:#FFF0F0; --glow1:rgba(51,102,255,.16); --glow2:rgba(18,184,134,.13);
  --win:#FFFFFF; --win-bar:#F4F5F7; --win-line:#E6E8EC; --code-bg:#0F131A; --code-ink:#E6EAF0;
  --sh-1:0 1px 2px rgba(16,24,40,.05); --sh-2:0 1px 2px rgba(16,24,40,.04),0 12px 32px -14px rgba(16,24,40,.16);
  --sh-3:0 2px 6px rgba(16,24,40,.05),0 32px 64px -24px rgba(30,50,110,.28);
  --mono:Consolas,"SF Mono",Menlo,"Pretendard Variable",Pretendard,monospace;
  --accent:var(--brand); --ask-bg:var(--brand-soft); --chip-bg:var(--bg-soft); --blue:#1C7ED6; --green:#2B8A3E; --gray:#6B7483; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark;
  --bg:#0B0D11; --bg-soft:#12151B; --surface:#14181F; --surface-2:#171C24; --ink:#F2F4F7; --ink-2:#C5CCD6; --muted:#8B93A1;
  --line:#232833; --line-2:#2E3542; --brand:#5B8CFF; --brand-ink:#8EB0FF; --brand-soft:rgba(91,140,255,.12); --brand-line:rgba(91,140,255,.32);
  --mint:#38D9A9; --mint-soft:rgba(56,217,169,.12); --amber:#FFA94D; --amber-ink:#FFC078; --amber-soft:rgba(255,169,77,.09); --amber-line:rgba(255,169,77,.28);
  --red:#FF8787; --red-soft:rgba(255,135,135,.12); --glow1:rgba(91,140,255,.22); --glow2:rgba(56,217,169,.12);
  --win:#141920; --win-bar:#1A2029; --win-line:#262D39; --code-bg:#07090C;
  --sh-1:none; --sh-2:0 16px 40px -18px rgba(0,0,0,.7); --sh-3:0 40px 80px -30px rgba(0,0,0,.8); } }
:root[data-theme="dark"] { color-scheme:dark;
  --bg:#0B0D11; --bg-soft:#12151B; --surface:#14181F; --surface-2:#171C24; --ink:#F2F4F7; --ink-2:#C5CCD6; --muted:#8B93A1;
  --line:#232833; --line-2:#2E3542; --brand:#5B8CFF; --brand-ink:#8EB0FF; --brand-soft:rgba(91,140,255,.12); --brand-line:rgba(91,140,255,.32);
  --mint:#38D9A9; --mint-soft:rgba(56,217,169,.12); --amber:#FFA94D; --amber-ink:#FFC078; --amber-soft:rgba(255,169,77,.09); --amber-line:rgba(255,169,77,.28);
  --red:#FF8787; --red-soft:rgba(255,135,135,.12); --glow1:rgba(91,140,255,.22); --glow2:rgba(56,217,169,.12);
  --win:#141920; --win-bar:#1A2029; --win-line:#262D39; --code-bg:#07090C;
  --sh-1:none; --sh-2:0 16px 40px -18px rgba(0,0,0,.7); --sh-3:0 40px 80px -30px rgba(0,0,0,.8); }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif;
       font-size:16px; line-height:1.65; word-break:keep-all; -webkit-font-smoothing:antialiased; }
a { color:var(--brand-ink); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.i { flex:none; }
.notice { font-size:12.5px; color:var(--muted); background:var(--bg-soft); }
.notice .wrap { padding-top:6px; padding-bottom:6px; }
header.site { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:saturate(1.6) blur(14px);
              -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; gap:28px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; font-size:17px; letter-spacing:-.4px; white-space:nowrap; }
.brand:hover { text-decoration:none; } .mark { width:30px; height:30px; flex:none; }
nav.main { display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
nav.main a { color:var(--ink-2); padding:8px 12px; border-radius:10px; font-weight:600; font-size:15px; white-space:nowrap; }
nav.main a:hover { background:var(--bg-soft); color:var(--ink); text-decoration:none; }
nav.main a.on { color:var(--brand-ink); background:var(--brand-soft); }
nav.main a.server::after { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--amber); margin-left:6px; vertical-align:2px; }
.hsearch { display:flex; align-items:center; gap:8px; height:38px; padding:0 10px 0 12px; border:1px solid var(--line); border-radius:10px;
           background:var(--surface); color:var(--muted); font:inherit; font-size:14px; cursor:pointer; min-width:190px; }
.hsearch kbd { margin-left:auto; font:600 11.5px/1 "Pretendard Variable",sans-serif; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 6px; background:var(--bg-soft); }
.hbtn { width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink-2);
        display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.hdl { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:10px; background:var(--ink); color:var(--bg);
       font-weight:700; font-size:14px; white-space:nowrap; } .hdl:hover { text-decoration:none; opacity:.9; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 20px; border-radius:12px;
       font-weight:700; font-size:15.5px; border:1px solid transparent; white-space:nowrap; transition:transform .12s, box-shadow .12s, background .12s; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn.pri { background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(51,102,255,.6); }
.btn.pri:hover { background:var(--brand-ink); }
.btn.sec { background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn.amber { background:var(--amber); color:#fff; box-shadow:0 6px 16px -6px rgba(232,137,11,.55); }
.hero { position:relative; padding:64px 0 40px; }
.hero::before { content:""; position:absolute; inset:-40px 0 auto; height:520px; pointer-events:none; z-index:-1;
  background:radial-gradient(420px 300px at 78% 38%,var(--glow1),transparent 70%),radial-gradient(360px 260px at 58% 72%,var(--glow2),transparent 70%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:56px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:999px; background:var(--surface);
           border:1px solid var(--line); box-shadow:var(--sh-1); font-size:13.5px; font-weight:600; color:var(--ink-2); }
.eyebrow b { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:var(--mint-soft); color:var(--mint); font-size:12px; }
.eyebrow b::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.hero h1 { font-size:56px; line-height:1.14; letter-spacing:-.045em; font-weight:800; margin:20px 0 18px; }
.grad { background:linear-gradient(92deg,var(--brand) 10%,#12B886 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:18.5px; color:var(--ink-2); margin:0 0 28px; max-width:34em; }
.search { position:relative; display:flex; align-items:center; gap:10px; height:60px; padding:0 8px 0 18px; background:var(--surface);
          border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-2); color:var(--muted); max-width:560px; }
.search:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft),var(--sh-2); }
.search input { flex:1; width:0; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16.5px; color:var(--ink); }
.search button { height:44px; padding:0 18px; border:0; border-radius:11px; background:var(--brand); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center; }
.chips > span { font-size:13px; color:var(--muted); margin-right:2px; }
.chip { font-size:13.5px; padding:6px 12px; border-radius:999px; background:var(--bg-soft); color:var(--ink-2); border:1px solid transparent; font-weight:500; }
.chip:hover { border-color:var(--line-2); background:var(--surface); text-decoration:none; }
.chip.mono { font-family:var(--mono); font-size:12.5px; }
.trust { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:28px; font-size:14px; color:var(--muted); }
.trust span { display:inline-flex; align-items:center; gap:6px; } .trust .i { color:var(--mint); }
.hv { position:relative; padding:18px 8px 30px 0; }
.win { position:relative; background:var(--win); border:1px solid var(--win-line); border-radius:18px; box-shadow:var(--sh-3); overflow:hidden; font-size:13px; }
.win-bar { display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:var(--win-bar); border-bottom:1px solid var(--win-line); color:var(--muted); font-weight:600; font-size:12.5px; }
.win-bar i { width:10px; height:10px; border-radius:50%; background:var(--line-2); } .win-bar span { margin-left:8px; }
.win-conn { display:grid; grid-template-columns:1.5fr 1fr .5fr auto; gap:8px; padding:12px 14px; border-bottom:1px solid var(--win-line); align-items:end; }
.win-conn .f { display:flex; flex-direction:column; gap:3px; } .win-conn small { font-size:11px; color:var(--muted); font-weight:600; }
.win-conn .f b { font-weight:500; height:30px; line-height:28px; padding:0 9px; border:1px solid var(--win-line); border-radius:8px; background:var(--surface-2);
                 font-family:var(--mono); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.win-conn .go { height:30px; line-height:30px; padding:0 12px; border-radius:8px; background:var(--brand); color:#fff; font-weight:700; font-size:12.5px; }
.win-log { padding:8px 14px; border-bottom:1px solid var(--win-line); font-size:12px; color:var(--ink-2); background:var(--surface-2); }
.win-log b { color:var(--mint); font-weight:700; }
.panes { position:relative; display:grid; grid-template-columns:1fr 1fr; }
.pane + .pane { border-left:1px solid var(--win-line); }
.ph { display:flex; align-items:center; gap:7px; padding:9px 14px; font-weight:700; font-size:12.5px; border-bottom:1px solid var(--win-line); }
.ph small { color:var(--muted); font-weight:500; font-size:12px; }
.ph .i { color:var(--brand); } .pane.srv .ph .i { color:var(--mint); }
.row { display:flex; align-items:center; gap:8px; padding:6.5px 14px; color:var(--ink-2); }
.row .i { color:var(--muted); } .row.dir .i { color:#F2A93B; } .row em { margin-left:auto; font-style:normal; color:var(--muted); font-size:11.5px; }
.row.sel { background:var(--brand-soft); color:var(--brand-ink); font-weight:600; } .row.new { color:var(--mint); font-weight:600; }
.row.new em { color:var(--mint); }
.swap { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
        display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 5px var(--win),0 8px 18px -6px rgba(51,102,255,.7); }
.xfer { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--win-line); background:var(--surface-2); font-size:12px; color:var(--ink-2); }
.xfer .bar { flex:1; height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.xfer .bar b { display:block; height:100%; width:72%; border-radius:6px; background:linear-gradient(90deg,var(--brand),#12B886); animation:fill 3.6s ease-in-out infinite; }
@keyframes fill { 0% { width:12%; } 70%,100% { width:100%; } }
@media (prefers-reduced-motion:reduce) { .xfer .bar b { animation:none; } }
.toast { position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--line);
         border-radius:14px; box-shadow:var(--sh-2); font-size:13px; font-weight:600; white-space:nowrap; }
.toast .dot { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.toast small { display:block; font-weight:500; color:var(--muted); font-size:12px; }
.toast.t1 { right:-18px; top:-8px; } .toast.t1 .dot { background:var(--mint-soft); color:var(--mint); }
.toast.t2 { left:-40px; bottom:4px; } .toast.t2 .dot { background:var(--red-soft); color:var(--red); }
.toast.t2 code { font-family:var(--mono); font-size:12px; color:var(--red); }
section.blk { padding:72px 0 0; }
.sh { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.sh .k { font-size:13.5px; font-weight:700; color:var(--brand-ink); margin:0 0 8px; letter-spacing:.2px; }
.sh h2 { font-size:34px; line-height:1.25; letter-spacing:-.035em; font-weight:800; margin:0; }
.sh p { margin:8px 0 0; color:var(--muted); font-size:16.5px; }
.sh .more { font-weight:600; font-size:15px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.goals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.goal { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px;
        color:var(--ink); box-shadow:var(--sh-1); transition:transform .15s, box-shadow .15s, border-color .15s; }
.goal:hover { text-decoration:none; transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.goal .ic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.goal h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.03em; font-weight:800; }
.goal p { margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.55; }
.goal ul { list-style:none; margin:auto 0 0; padding:14px 0 0; border-top:1px dashed var(--line-2); display:grid; gap:6px; font-size:14px; color:var(--ink-2); }
.goal li::before { content:"→"; color:var(--muted); margin-right:6px; }
.c-blue .ic { background:var(--brand-soft); color:var(--brand); } .c-red .ic { background:var(--red-soft); color:var(--red); }
.c-mint .ic { background:var(--mint-soft); color:var(--mint); } .c-amber .ic { background:var(--amber-soft); color:var(--amber); }
.dl { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; }
.dcard { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:var(--sh-1); }
.dcard.main { background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%); border-color:var(--brand-line); }
.dcard .tag { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--mint); background:var(--mint-soft); padding:4px 10px; border-radius:999px; }
.dcard .tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.dcard h3 { font-size:28px; letter-spacing:-.035em; margin:14px 0 4px; font-weight:800; }
.dcard h3 span { color:var(--muted); font-weight:600; font-size:16px; letter-spacing:0; margin-left:8px; }
.dcard .os { color:var(--ink-2); font-size:15px; margin:0 0 22px; }
.btns { display:flex; gap:10px; flex-wrap:wrap; }
.verified { display:flex; align-items:center; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); }
.verified .i { color:var(--mint); }
.warn { margin:8px 0 0; font-size:14px; color:var(--muted); }
.dcard.srv .tag { color:var(--amber-ink); background:var(--amber-soft); }
.dcard.srv ul { margin:0 0 22px; padding:0; list-style:none; display:grid; gap:8px; font-size:15px; color:var(--ink-2); }
.dcard.srv li { display:flex; gap:8px; } .dcard.srv li .i { color:var(--amber); margin-top:3px; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:s; }
.step { position:relative; display:block; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 18px 18px 66px; color:var(--ink); min-height:76px; }
.step:hover { text-decoration:none; border-color:var(--brand-line); background:var(--brand-soft); }
.step .n { position:absolute; left:16px; top:16px; width:36px; height:36px; border-radius:11px; background:var(--bg-soft); color:var(--ink-2);
           font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.step b { display:block; font-weight:700; font-size:15px; line-height:1.4; letter-spacing:-.02em; }
.step small { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.step.done .n { background:var(--brand); color:#fff; }
.errs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.err { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; background:var(--surface); border:1px solid var(--line);
       border-radius:16px; padding:16px 18px; color:var(--ink); transition:border-color .12s, box-shadow .12s; }
.err:hover { text-decoration:none; border-color:var(--line-2); box-shadow:var(--sh-2); }
.err code { justify-self:start; font-family:inherit; font-weight:700; font-size:15px; color:var(--red); background:var(--red-soft); padding:3px 9px; border-radius:8px; }
.err code.en { font-family:var(--mono); font-size:13.5px; }
.err p { grid-column:1; margin:4px 0 0; color:var(--muted); font-size:14px; }
.err .go { grid-row:1 / 3; grid-column:2; color:var(--muted); }
.errs-foot { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.srvpanel { background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:28px; padding:44px; }
.srvpanel .sh .k { color:var(--amber-ink); }
.srvgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.srvgrid .step { border-color:var(--amber-line); } .srvgrid .step:hover { background:var(--surface); border-color:var(--amber); }
.srvgrid .step .n { background:var(--amber); color:#fff; }
.hosts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.hosts a { display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; color:var(--ink); font-weight:700; font-size:15px; background:var(--surface); }
.hosts a:hover { text-decoration:none; border-color:var(--brand-line); background:var(--brand-soft); }
.hosts a span { width:30px; height:30px; flex:none; border-radius:9px; background:var(--bg-soft); color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.news { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.nc { display:block; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; color:var(--ink); }
.nc:hover { text-decoration:none; box-shadow:var(--sh-2); }
.nc small { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.nc small b { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); }
.nc.srv small b { background:var(--amber-soft); color:var(--amber-ink); }
.nc h3 { font-size:17.5px; line-height:1.45; letter-spacing:-.025em; margin:10px 0 6px; } .nc p { margin:0; color:var(--muted); font-size:14.5px; }
footer.site { margin-top:96px; background:var(--bg-soft); border-top:1px solid var(--line); color:var(--ink-2); font-size:14.5px; }
.fgrid { display:grid; grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); gap:32px; padding:48px 0 28px; }
.fgrid b { display:block; color:var(--ink); font-size:14px; margin-bottom:12px; } .fgrid a { display:block; color:var(--ink-2); padding:3px 0; }
.fgrid p { color:var(--muted); font-size:14px; margin:12px 0 0; max-width:30em; }
.fbot { border-top:1px solid var(--line); padding:18px 0 32px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; }
.crumb { font-size:14px; color:var(--muted); padding:28px 0 0; } .crumb a { color:var(--muted); }
.doc { display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:56px; align-items:start; }
.doc .article { max-width:780px; margin:0; padding:0; background:transparent; font-size:17px; color:var(--ink-2); }
.doc .article h1.doc-h1 { font-size:38px !important; line-height:1.28; letter-spacing:-.04em; color:var(--ink); margin:14px 0 18px !important; font-weight:800; }
.doc .article h2 { font-size:25px !important; letter-spacing:-.03em; color:var(--ink); border-top:0 !important; padding-top:0 !important; margin:56px 0 14px !important; }
.doc .article h3 { color:var(--ink); letter-spacing:-.02em; }
.doc .article b, .doc .article strong { color:var(--ink); }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; }
.meta span { font-size:13.5px; color:var(--ink-2); background:var(--bg-soft); padding:5px 11px; border-radius:999px; }
.meta b { color:var(--muted); font-weight:600; margin-right:4px; }
.doc .article blockquote { background:var(--brand-soft) !important; border:1px solid var(--brand-line) !important; border-radius:16px !important; padding:18px 20px !important; }
.doc .article table { font-size:15px; } .doc .article th { background:var(--bg-soft) !important; } .doc .article th, .doc .article td { border-color:var(--line) !important; }
.doc .article code { background:var(--bg-soft) !important; color:var(--ink); }
.doc .article .code pre { background:var(--code-bg) !important; color:var(--code-ink) !important; border-radius:14px !important; }
.shot__zoom { border-radius:12px !important; padding:6px !important; background:var(--surface) !important; } .shot__zoom img { border-radius:0 !important; } .shot__zoom { border-color:var(--line) !important; box-shadow:var(--sh-2); }
.shot__legend li { color:var(--ink); } .shot__note { color:var(--muted) !important; }
.pair img { border-color:var(--line) !important; border-radius:12px !important; }
.toc { position:sticky; top:88px; font-size:14px; }
.toc b { display:block; font-size:12.5px; color:var(--muted); margin-bottom:10px; letter-spacing:.3px; }
.toc a { display:block; color:var(--muted); padding:5px 0 5px 14px; border-left:2px solid var(--line); line-height:1.4; }
.toc a:hover { color:var(--ink); text-decoration:none; } .toc a.on { color:var(--brand-ink); border-left-color:var(--brand); font-weight:600; }
.toc .tcard { margin-top:24px; padding:16px; border-radius:16px; background:var(--bg-soft); }
.toc .tcard small { display:block; color:var(--muted); font-size:12.5px; } .toc .tcard .bar { height:6px; border-radius:6px; background:var(--line); margin:10px 0 6px; overflow:hidden; }
.toc .tcard .bar i { display:block; height:100%; width:25%; background:var(--brand); border-radius:6px; }
.tracknav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:56px 0 0; }
.tracknav a { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; color:var(--ink); font-weight:700; }
.tracknav a:hover { text-decoration:none; border-color:var(--brand-line); background:var(--brand-soft); }
.tracknav a small { display:block; color:var(--muted); font-size:13px; font-weight:500; } .tracknav a.next { text-align:right; }
.ask { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--bg-soft); border-radius:20px; padding:22px 24px; margin-top:28px; }
.ask p { margin:0; }
.demo { display:inline-block; font-size:12.5px; font-weight:700; color:var(--amber-ink); background:var(--amber-soft); padding:4px 10px; border-radius:999px; }
.errcard { background:var(--code-bg); border-radius:18px; padding:20px 22px; margin:0 0 20px; box-shadow:var(--sh-2); }
.errcard .row { display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; align-items:baseline; margin:6px 0; padding:0; color:inherit; }
.errcard .lang { font-size:12px; font-weight:700; color:#8B93A1; }
.errcard code { font-family:var(--mono); background:none !important; padding:0; font-size:15px; font-weight:600; color:#FF8787 !important; overflow-wrap:anywhere; }
.verdict { display:flex; gap:12px; align-items:flex-start; background:var(--mint-soft); border-radius:16px; padding:16px 18px; margin:0 0 8px; color:var(--ink); }
.verdict .i { color:var(--mint); margin-top:3px; }
.checks { list-style:none; padding:0 !important; margin:0 0 8px; display:grid; gap:8px; }
.checks li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; color:var(--ink); }
.checks .n { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--brand-soft); color:var(--brand-ink); }
.pill { font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.hi { background:var(--red-soft); color:var(--red); } .pill.mid { background:var(--amber-soft); color:var(--amber-ink); } .pill.lo { background:var(--bg-soft); color:var(--muted); }
.log { background:var(--code-bg); color:var(--code-ink); border-radius:16px; padding:16px 18px; font-family:var(--mono); font-size:13.5px; line-height:1.8; overflow-x:auto; }
.log .l { display:grid; grid-template-columns:52px minmax(0,1fr); white-space:pre-wrap; }
.log .k { color:#8B93A1; } .log .resp { color:#63E6BE; } .log .bad { color:#FF8787; font-weight:700; } .log .mask { opacity:.6; font-style:italic; }
.related { display:flex; flex-wrap:wrap; gap:8px; } .related .chip { background:var(--bg-soft) !important; }
.nf { text-align:center; padding:88px 0 24px; position:relative; }
.nf::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(380px 240px at 40% 30%,var(--glow1),transparent 70%),radial-gradient(320px 220px at 62% 40%,var(--glow2),transparent 70%); }
.nf .big.grad { color:transparent; } .nf .big { font-size:148px; line-height:1; font-weight:900; letter-spacing:-.06em; margin:0; }
.nf h1 { font-size:34px; letter-spacing:-.035em; margin:18px 0 10px; } .nf p { color:var(--muted); font-size:17px; margin:0 auto 28px; max-width:34em; }
.nf .search { margin:0 auto; text-align:left; }
.nf-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:880px; margin:40px auto 0; text-align:left; }
.nf-links a { display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; color:var(--ink); font-weight:700; }
.nf-links a:hover { text-decoration:none; box-shadow:var(--sh-2); }
.nf-links a .ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.nf-links small { display:block; color:var(--muted); font-weight:500; font-size:13.5px; }
@media (max-width:1080px) {
  .hsearch { min-width:0; } .hsearch span, .hsearch kbd { display:none; }
  .goals { grid-template-columns:repeat(2,minmax(0,1fr)); } .steps { grid-template-columns:repeat(3,minmax(0,1fr)); } .hosts { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:980px) {
  .hero { padding-top:40px; } .hero-grid { grid-template-columns:minmax(0,1fr); gap:40px; } .hero h1 { font-size:44px; }
  .hv { max-width:560px; margin:0 auto; width:100%; } .toast.t2 { left:-10px; }
  .dl, .news, .errs { grid-template-columns:minmax(0,1fr); } .doc { grid-template-columns:minmax(0,1fr); } .toc { display:none; }
  .srvgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } .fgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .wrap { padding:0 16px; } header.site .wrap { gap:10px; } nav.main, .hdl { display:none; } .hsearch { margin-left:auto; width:38px; padding:0; justify-content:center; }
  .hero { padding:28px 0 8px; } .hero::before { left:-16px; right:-16px; background:radial-gradient(240px 200px at 80% 30%,var(--glow1),transparent 70%),radial-gradient(220px 180px at 30% 85%,var(--glow2),transparent 70%); } .hero h1 { font-size:34px; margin:16px 0 14px; } .lead { font-size:16.5px; margin-bottom:22px; }
  .search { height:54px; } .search button { height:40px; padding:0 14px; } .trust { margin-top:20px; }
  .win-conn { grid-template-columns:1fr 1fr auto; } .win-conn .f:nth-child(3) { display:none; } .row:nth-child(n+6) { display:none; }
  .toast.t2 { display:none; } .toast.t1 { right:0; top:auto; bottom:-12px; } .pane:first-child .row em { display:none; }
  section.blk { padding-top:56px; } .sh { display:block; margin-bottom:20px; } .sh h2 { font-size:26px; } .sh .more { margin-top:10px; }
  .goals { grid-template-columns:minmax(0,1fr); gap:10px; }
  .goal { display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 14px; padding:16px; border-radius:16px; }
  .goal .ic { width:44px; height:44px; margin:0; grid-row:1 / 3; } .goal h3 { font-size:17px; margin:1px 0 2px; } .goal p { margin:0; font-size:14px; } .goal ul { display:none; }
  .dcard { padding:22px; border-radius:20px; } .dcard h3 { font-size:23px; } .btns .btn { flex:1 1 100%; }
  .steps { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; grid-template-rows:repeat(2,auto); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
  .steps .step { scroll-snap-align:start; }
  .srvpanel { padding:24px 18px; border-radius:22px; } .srvgrid { grid-template-columns:minmax(0,1fr); }
  .hosts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .doc .article h1.doc-h1 { font-size:28px !important; } .doc .article h2 { font-size:21px !important; } .tracknav { grid-template-columns:1fr; }
  .errcard .row { grid-template-columns:1fr; gap:0; }
  .nf { padding-top:48px; } .nf .big { font-size:96px; } .nf h1 { font-size:26px; } .nf-links { grid-template-columns:minmax(0,1fr); }
  .fgrid { grid-template-columns:1fr 1fr; gap:24px; } .fgrid > div:first-child { grid-column:1 / -1; }
}
body { overflow-wrap:break-word; }
.fgrid a.brand { display:inline-flex; align-items:center; gap:10px; padding:0; }
.wrap h2.sub { font-size:22px; letter-spacing:-.03em; color:var(--ink); } .sublead { color:var(--muted); margin-top:6px; }
@media (max-width:600px) { .btns .btn { white-space:normal; height:auto; min-height:48px; padding-top:10px; padding-bottom:10px; text-align:center; line-height:1.35; } }
.skip { position:absolute; left:-9999px; top:0; z-index:99; background:var(--brand); color:#fff; padding:10px 14px; border-radius:0 0 10px 0; }
.skip:focus { left:0; }
.staging { background:#FFF4D6; color:#7A4B00; font-size:13px; text-align:center; padding:6px 12px; }
.phead { padding:44px 0 8px; }
.phead .k { font-size:13.5px; font-weight:700; color:var(--brand-ink); margin:0 0 8px; }
.phead h1 { font-size:42px; line-height:1.2; letter-spacing:-.04em; font-weight:800; margin:0 0 10px; }
.phead p { color:var(--muted); font-size:17px; margin:0; max-width:40em; }
.phead.srv .k { color:var(--amber-ink); }
.list { display:grid; gap:12px; margin-top:28px; }
.item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; background:var(--surface); border:1px solid var(--line);
        border-radius:16px; padding:18px 20px; color:var(--ink); }
.item:hover { text-decoration:none; border-color:var(--line-2); box-shadow:var(--sh-2); }
.item b { font-size:17px; letter-spacing:-.02em; } .item p { grid-column:1; margin:2px 0 0; color:var(--muted); font-size:14.5px; }
.item .go { grid-row:1 / 3; grid-column:2; color:var(--muted); }
.empty { padding:40px 0; color:var(--muted); }
.search-page .search { max-width:none; margin-top:20px; }
.hit mark { background:var(--brand-soft); color:var(--brand-ink); border-radius:4px; padding:0 2px; }
.pager { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.pager a, .pager span { min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:var(--ink); }
.pager span { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.dl-page .dl { margin-top:28px; } .dl-other { margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.dl-other a { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; color:var(--ink); font-weight:700; }
.dl-other small { display:block; color:var(--muted); font-weight:500; font-size:13px; }
.sha { font-family:var(--mono); font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin-top:8px; }
.prose { max-width:780px; font-size:17px; color:var(--ink-2); } .prose h2 { color:var(--ink); font-size:24px; letter-spacing:-.03em; margin:40px 0 10px; }
.updated { font-size:13.5px; color:var(--muted); margin-top:40px; }
@media (max-width:640px) { .phead { padding-top:28px; } .phead h1 { font-size:30px; } .dl-other { grid-template-columns:minmax(0,1fr); } }
@media print { header.site, footer.site, .toc, .tracknav, .ask, .notice { display:none; } }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.cards.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; color:var(--ink);
        transition:border-color .15s, box-shadow .15s, transform .15s; }
.card:hover { text-decoration:none; border-color:var(--brand-line); box-shadow:var(--sh-2); transform:translateY(-2px); }
.thumb { position:relative; display:block; aspect-ratio:16/9; background:var(--brand-soft); overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.card:hover .thumb img { transform:scale(1.03); }
.thumb .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--brand); }
.thumb .ph svg { width:44px; height:44px; opacity:.85; }
.thumb.t-guide, .thumb.t-connect { background:var(--mint-soft); } .t-guide .ph, .t-connect .ph { color:var(--mint); }
.thumb.t-error { background:var(--red-soft); } .t-error .ph { color:var(--red); }
.thumb.t-server { background:var(--amber-soft); } .t-server .ph { color:var(--amber); }
.card .cb { position:relative; display:block; padding:14px 16px 16px; flex:1; }
.card .cb .n { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 7px; border-radius:8px;
               background:var(--bg-soft); color:var(--ink-2); font-size:12.5px; font-weight:800; margin-bottom:8px; }
.card .cb b { display:block; font-size:15.5px; line-height:1.45; letter-spacing:-.02em; font-weight:700; }
.card .cb small { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.card .cb p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card .cb code { display:block; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--red); background:none; padding:0; line-height:1.4; }
.card .cb code:not(.en) { font-family:inherit; }
.art-hero { margin:22px 0 30px; border-radius:20px; overflow:hidden; background:var(--brand-soft); aspect-ratio:16/9; }
.art-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.recap { margin:48px 0 8px; padding:26px 26px 28px; border-radius:22px; background:linear-gradient(180deg,var(--brand-soft),var(--surface) 85%); border:1px solid var(--brand-line); }
.recap-head { margin-bottom:18px; }
.recap-head .k { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--brand-ink); }
.doc .article .recap-head h2 { margin:6px 0 0 !important; padding:0 !important; border:0 !important; font-size:26px !important; letter-spacing:-.03em; }
.recap-body { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:center; }
.recap-body.no-art { grid-template-columns:minmax(0,1fr); }
.recap-art { width:220px; height:220px; border-radius:18px; object-fit:cover; background:var(--brand-soft); }
.recap-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; counter-reset:none; }
.recap-list.n3 { grid-template-columns:minmax(0,1fr); gap:10px; }
.recap-list.n3 li { min-height:0; padding:14px 18px 14px 62px; }
.recap-list.n3 .rn { top:50%; transform:translateY(-50%); }
.recap-list.n3 p { margin:3px 0 0 !important; }
.recap-list li { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 16px 16px 60px; margin:0 !important; min-height:84px; }
.recap-list li::before { content:none !important; }
.recap-list .rn { position:absolute; left:14px; top:14px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
                  font-weight:800; font-size:15px; color:#fff; background:var(--brand); }
.recap-list .r1 .rn { background:var(--mint); } .recap-list .r2 .rn { background:var(--amber); } .recap-list .r3 .rn { background:var(--ink-2); }
.recap-list b { display:block; font-size:16px; letter-spacing:-.02em; color:var(--ink); line-height:1.4; }
.recap-list p { margin:4px 0 0 !important; font-size:14.5px; color:var(--muted); line-height:1.55; }
@media (max-width:1200px) { header.site .wrap { gap:16px; } nav.main a { padding:8px 9px; font-size:14.5px; } }
.ask .btns { display:flex; gap:10px; flex-wrap:wrap; }
.rankbadge { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; width:fit-content; max-width:100%; margin:0 0 12px; padding:6px 14px 6px 6px; border-radius:16px;
  background:linear-gradient(90deg,#FFF6E0,#FFFBF1); border:1px solid #F3D48B; color:#6B4A00; font-size:14px; font-weight:700; letter-spacing:-.01em; }
.rankbadge .rk { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:var(--amber); color:#fff; font-size:13px; font-weight:800; }
.rankbadge small { font-size:12px; font-weight:600; color:#9A7520; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .rankbadge { background:rgba(232,137,11,.14); border-color:rgba(232,137,11,.4); color:#F7D38A; } :root:not([data-theme="light"]) .rankbadge small { color:#D9B46A; } }
:root[data-theme="dark"] .rankbadge { background:rgba(232,137,11,.14); border-color:rgba(232,137,11,.4); color:#F7D38A; } :root[data-theme="dark"] .rankbadge small { color:#D9B46A; }
.dlc { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,14,24,.45); backdrop-filter:blur(3px); }
.dlc-box { width:100%; max-width:460px; background:var(--surface); border-radius:20px; padding:24px 24px 18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.45); }
.dlc-box h3 { margin:0; font-size:20px; letter-spacing:-.02em; }
.dlc-sub { margin:4px 0 16px; color:var(--muted); font-size:14.5px; }
.dlc-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.dlc-steps li { display:flex; gap:12px; align-items:flex-start; opacity:.45; transition:opacity .2s; }
.dlc-steps li.on, .dlc-steps li.ok, .dlc-steps li.bad { opacity:1; }
.dlc-steps li > i { flex:0 0 24px; height:24px; border-radius:50%; border:2px solid var(--line); margin-top:1px; position:relative; }
.dlc-steps li.on > i { border-color:var(--brand); border-top-color:transparent; animation:dlcspin .8s linear infinite; }
.dlc-steps li.ok > i { border-color:var(--mint); background:var(--mint); }
.dlc-steps li.ok > i::after { content:""; position:absolute; left:6px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.dlc-steps li.bad > i { border-color:var(--red); background:var(--red); }
.dlc-steps li > div { flex:1; min-width:0; }
.dlc-steps b { display:block; font-size:15px; }
.dlc-steps span { display:block; color:var(--muted); font-size:13.5px; margin-top:2px; overflow-wrap:anywhere; }
.dlc-steps code { font-size:12.5px; }
.dlc-bar { height:6px; border-radius:3px; background:var(--bg-soft); margin-top:8px; overflow:hidden; }
.dlc-bar em { display:block; height:100%; width:0; background:var(--brand); transition:width .15s; }
.dlc-msg { min-height:22px; margin:16px 0 0; font-size:14.5px; }
.dlc-msg.ok { color:var(--mint); font-weight:700; } .dlc-msg.bad { color:var(--red); font-weight:700; }
.dlc-act { display:flex; justify-content:flex-end; margin-top:12px; } .dlc-act .btn { height:40px; padding:0 18px; font-size:14.5px; }
@keyframes dlcspin { to { transform:rotate(360deg); } }
.practice-cta { display:flex; align-items:center; gap:16px; margin:28px 0 0; padding:18px 20px; border-radius:18px; text-decoration:none !important;
  background:linear-gradient(135deg, var(--brand-soft), var(--mint-soft)); border:1px solid var(--brand-line); color:var(--ink) !important; }
.practice-cta:hover { box-shadow:0 12px 28px -16px rgba(51,102,255,.55); transform:translateY(-1px); }
.practice-cta .pi { flex:0 0 48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; }
.practice-cta .pt { flex:1; min-width:0; display:block; }
.practice-cta small { display:block; font-size:13px; font-weight:700; color:var(--brand); }
.practice-cta b { display:block; font-size:17px; letter-spacing:-.02em; margin-top:2px; }
.practice-cta em { display:block; font-style:normal; font-size:14px; color:var(--muted); margin-top:3px; line-height:1.5; }
.practice-cta .go { flex:0 0 auto; font-size:14px; font-weight:700; color:var(--brand); white-space:nowrap; }
@media (max-width:520px) { .practice-cta { flex-wrap:wrap; } .practice-cta .go { width:100%; padding-left:64px; } }
@media (max-width:1100px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) { .cards, .cards.c3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .recap-body { grid-template-columns:minmax(0,1fr); }
  .recap-art { width:100%; height:auto; aspect-ratio:1/1; max-width:260px; margin:0 auto; } .recap-list.n3 { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { .cards, .cards.c3 { grid-template-columns:minmax(0,1fr); gap:10px; } .recap-list { grid-template-columns:minmax(0,1fr); } .recap { padding:20px 16px; }
  .card { flex-direction:row; align-items:center; border-radius:14px; }
  .card { padding-left:8px; }
  .card .thumb { flex:0 0 120px; aspect-ratio:16/9; border-radius:9px; }
  .card .thumb .ph svg { width:28px; height:28px; }
  .card .cb { padding:10px 12px; }
  .card .cb b { font-size:14.5px; }
  .card .cb p { font-size:13px; -webkit-line-clamp:2; margin-top:3px; }
  .recap-art { max-width:200px; } }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) :is(.art-hero img, .thumb img, .recap-art) { filter:brightness(.88); } }
:root[data-theme="dark"] :is(.art-hero img, .thumb img, .recap-art) { filter:brightness(.88); }