/* ponybuyspreadsheet.net — waybill ledger. Built 2026-08-03. */
:root{
  --brand:#0070F0; --brand-dk:#0052B4; --ink:#0C1524; --mute:#4A5A70;
  --paper:#F5F8FC; --card:#FFFFFF; --rule:#D9E2EF; --rule-soft:#E8EEF6;
  --w2c:#7A3E9D; --warn:#B4380C;
  --r:4px; --r-lg:8px;
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:32px; --sp5:48px; --sp6:72px;
  --disp:"Wix Madefor Display","Segoe UI",system-ui,sans-serif;
  --text:"Wix Madefor Text","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--text);
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.brand-sub,.lg-num,.sec-num,.chain-num{font-family:var(--disp)}
h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:0 0 var(--sp2)}
h2{font-size:clamp(23px,2.6vw,30px);line-height:1.2;letter-spacing:-.012em;font-weight:700;margin:0 0 var(--sp2)}
h3{font-size:19px;line-height:1.3;font-weight:700;margin:0 0 var(--sp1)}
p{margin:0 0 var(--sp2);max-width:68ch}
a{color:var(--brand-dk);text-underline-offset:3px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:12px 18px;z-index:60}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--sp3)}

/* head */
.site-head{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.head-in{display:flex;align-items:center;gap:var(--sp3);min-height:64px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{width:130px;height:auto}
.brand-sub{font-size:12px;font-weight:600;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.sitenav{margin-left:auto}
.sitenav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.sitenav a{
  display:flex;align-items:center;min-height:44px;padding:0 9px;
  font:600 14px/1.2 var(--text);color:var(--mute);text-decoration:none;border-radius:var(--r);
  white-space:nowrap;transition:color .2s ease,background-color .2s ease;
}
.sitenav a:hover{color:var(--ink);background:var(--rule-soft)}
.sitenav a[aria-current="page"]{color:var(--brand-dk);box-shadow:inset 0 -2px 0 var(--brand)}
.navbtn{display:none}

/* 整卡链接（硬门 2③：图必须在 <a> 里面）。保留原来 .cat-go 的视觉。 */
.cat-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.cat-link:hover h3{color:var(--brand-dk)}
.cat-link .cat-go{margin-top:auto}

/* 没有商品图的那三张（Shoes / Apparel / Accessories 这类父级货架，没有哪一件
   商品能代表它）用本站自绘的品类图形。把它放进同尺寸的方形面板里，
   12 张卡的视觉重量才一致 —— 否则有图的那几张大一截，整墙是花的。 */
.catcard .cat-art{display:flex;align-items:center;justify-content:center;
  width:100%;height:auto;aspect-ratio:1/1;margin:0 0 12px;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--rule-soft)}
.catcard .cat-art svg{width:40%;height:auto}

/* 品类卡的真实商品图（硬门 2③/30）。方图裁切，和自绘图形那版同样的卡片节奏。 */
.cat-photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--rule);background:var(--rule-soft);margin-bottom:12px}

/* hero 搜索条（硬门 1）。label 必须 flex:1 0 100%，否则会被拉到输入框旁边
   把按钮挤到第二行 —— 站群实测过两次。 */
.findbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--sp3);
  padding:14px;border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:var(--r);background:var(--card)}
.findbar label{flex:1 0 100%;font:600 12px/1.2 var(--disp);letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute)}
.findbar input[type=search]{flex:1 1 300px;min-width:0;min-height:50px;padding:0 14px;
  font:400 17px/1.4 var(--text);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r)}
.findbar input[type=search]::placeholder{color:#64748B}
.findbar button{min-height:50px;min-width:128px;padding:0 20px;cursor:pointer;border:0;
  border-radius:var(--r);background:var(--brand-dk);color:#fff;
  font:700 16px/1 var(--disp)}
.findbar button:hover{background:var(--brand)}
.findhint{margin-top:10px;font-size:15px;line-height:1.55;color:var(--mute);max-width:62ch}

/* hero CTA */
.herocta{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp2);margin-top:var(--sp4)}
.hc-link{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--card);text-decoration:none;min-height:44px;
  transition:border-color .2s ease,background-color .2s ease}
.hc-link:hover{border-color:var(--brand);background:#FBFDFF}
.hc-link b{font:700 16px/1.3 var(--disp);color:var(--ink)}
.hc-link span{font-size:14px;line-height:1.45;color:var(--mute)}
.hc-primary{border-left:3px solid var(--brand)}
.hc-out{border-left:3px solid var(--w2c)}
.hc-out b::after{content:" ↗";color:var(--w2c);font-weight:600}

/* page head */
main{padding:var(--sp5) 0 var(--sp6)}
.crumbs ol{display:flex;gap:8px;list-style:none;margin:0 0 var(--sp3);padding:0;font-size:14px;color:var(--mute);flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--rule)}
.pagehead{max-width:78ch;margin-bottom:var(--sp4)}
.eyebrow{font:600 12px/1.4 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.lede{font-size:20px;line-height:1.55;color:var(--mute);margin:0}

/* chain */
.chain{list-style:none;margin:0;padding:0;display:flex;gap:0;border:1px solid var(--rule);
  border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.chain-stop{flex:1 1 0;min-width:0;padding:14px 12px;border-right:1px solid var(--rule-soft);
  display:flex;flex-direction:column;gap:5px;background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px);
  background-size:100% 22px}
.chain-stop:last-child{border-right:0}
.chain-stop.is-here{background-color:#EFF6FF;box-shadow:inset 0 -3px 0 var(--brand)}
.chain-num{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.06em}
.chain-stop.is-here .chain-num{color:var(--brand-dk)}
.chain-label{font:600 14px/1.25 var(--text);color:var(--ink)}
.chain-mark{display:block;height:22px}
.chain-wrap{margin:0}
.chain-note{margin:var(--sp2) 0 0;color:var(--mute);font-size:15px}
.here{margin:var(--sp4) 0 var(--sp5);padding-top:var(--sp3);border-top:1px solid var(--rule)}
.here-lab{font:600 12px/1.4 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.chain-compact .chain-stop{padding:10px 10px}
.chain-compact .chain-label{font-size:12.5px}
.chain-compact .chain-mark{height:20px}

/* sections */
.sec{display:grid;grid-template-columns:56px 1fr;gap:var(--sp3);padding:var(--sp5) 0;border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0;padding-top:0}
.sec-rule{position:relative}
.sec-num{font:700 13px/1 var(--disp);color:var(--brand);letter-spacing:.05em;position:sticky;top:84px;display:block}
.sec-body{min-width:0}

/* A ledger */
.ledger{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card)}
.lg-row{display:grid;grid-template-columns:44px 1fr 28px;gap:var(--sp2);padding:18px var(--sp3) 18px var(--sp2);
  border-top:1px solid var(--rule-soft);border-left:3px solid transparent;transition:border-color .2s ease}
.lg-row:first-child{border-top:0}
.lg-row:hover{border-left-color:var(--brand);background:#FBFDFF}
.lg-num{font:700 15px/1.5 var(--disp);color:var(--brand);padding-left:var(--sp1)}
.lg-head{font-weight:600;margin:0 0 6px}
.lg-main p:last-child{margin-bottom:0}
.lg-main p+p{color:var(--mute);font-size:15.5px}
.lg-tag{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--rule);border-radius:20px;
  font:600 11px/1.6 var(--text);color:var(--mute);letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.lg-ico{align-self:start;padding-top:2px}

/* B split */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp4);align-items:start}
.split.is-flipped{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split-text p:last-child{margin-bottom:0}
.split-fig{margin:0}
.split-fig img{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  width:auto;max-width:100%}
/* 硬门 3/4：7fr/5fr 的图栏只有 ~400px，而这些截图原生 900px（比值 0.44，字读不出），
   并排时图 250px 对文 575px 又撞对齐门。改成「文字在上、整幅图在下」：
   正文收到 760px、图封 820px，两边宽度差 7%，截图也回到 820px 能读。 */
.split.stack{display:block}
.split.stack .split-text{max-width:760px}
.split.stack .split-fig{max-width:820px;margin-top:var(--sp3)}
.split-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--mute)}
.tick{margin:var(--sp2) 0 0;padding:0;list-style:none}
.tick li{position:relative;padding-left:24px;margin-bottom:10px;max-width:66ch}
.tick li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--brand)}

/* D table */
.tbl-hint{display:none;margin:0 0 8px;font-size:13.5px;color:var(--mute)}
.tbl-hint::before{content:"";display:inline-block;width:14px;height:8px;margin-right:8px;
  border-top:1.5px solid var(--brand);border-right:1.5px solid var(--brand);
  transform:rotate(45deg) translateY(2px)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
  background-image:linear-gradient(90deg,var(--card) 30%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(255,255,255,0),var(--card) 70%),
    linear-gradient(90deg,rgba(12,21,36,.10),rgba(12,21,36,0)),
    linear-gradient(90deg,rgba(12,21,36,0),rgba(12,21,36,.10));
  background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
th,td{text-align:left;padding:12px var(--sp2);border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{font:600 13px/1.4 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
  background:#FAFCFF;border-bottom:1px solid var(--rule)}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* E formula */
.formula{border:1px solid var(--rule);border-left:3px solid var(--brand);border-radius:var(--r);
  background:var(--card);padding:var(--sp3)}
.fx-head{font:600 13px/1.4 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 var(--sp2)}
.fx-list{list-style:none;margin:0 0 var(--sp2);padding:0;counter-reset:fx}
.fx-list li{counter-increment:fx;padding:12px 0;border-top:1px solid var(--rule-soft);display:flex;
  flex-direction:column;gap:3px}
.fx-list li:first-child{border-top:0;padding-top:0}
.fx-list li::before{content:"+";color:var(--brand);font-weight:700;font-family:var(--disp);font-size:13px}
.fx-list li:first-child::before{content:"="}
.fx-term{font-weight:600}
.fx-note{color:var(--mute);font-size:15px}
.fx-src{font-size:13.5px;line-height:1.55;color:var(--mute);margin:var(--sp2) 0 0;max-width:70ch}

/* F timeline */
.timeline{list-style:none;margin:0;padding:0}
.tl-item{display:grid;grid-template-columns:44px 1fr;gap:var(--sp2);padding-bottom:var(--sp3);position:relative}
.tl-item::before{content:"";position:absolute;left:21px;top:34px;bottom:0;width:1px;background:var(--rule)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::before{display:none}
.tl-dot{width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center}
.tl-when{font:600 13px/1.4 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--brand-dk);margin:0 0 4px}
.tl-what{margin:0;color:var(--ink)}
.tl-body{padding-top:6px}

/* payment axis */
.payaxis{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);padding:var(--sp3)}
.pay-track{display:flex;align-items:center;gap:0;margin-bottom:var(--sp3)}
.pay-node{width:14px;height:14px;border:3px solid var(--brand);border-radius:50%;background:var(--card);flex:0 0 auto}
.pay-line{flex:1 1 auto;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 8px,transparent 8px 14px)}
.pay-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp3)}
.pay-legend li{display:flex;flex-direction:column;gap:6px}
.pay-legend b{font-family:var(--disp);font-size:17px}
.pay-legend span:last-child{color:var(--mute);font-size:15.5px}
.pay-tag{align-self:flex-start;padding:3px 10px;background:#EFF6FF;color:var(--brand-dk);border-radius:20px;
  font:700 11px/1.7 var(--text);letter-spacing:.07em;text-transform:uppercase}

/* G tool */
.tool{border:1px solid var(--rule);border-top:3px solid var(--brand);border-radius:var(--r-lg);
  background:var(--card);padding:var(--sp4) var(--sp3)}
.tool-title{margin:0 0 10px}
.tool-lede{color:var(--mute);font-size:16px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp2) var(--sp3);
  margin:var(--sp3) 0}
.tool-field{display:flex;flex-direction:column;gap:5px}
.tool-field label{font:600 14px/1.4 var(--text)}
.tool-field input{min-height:46px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r);
  font:500 16px/1.4 var(--text);color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums}
.tool-field input:focus{background:var(--card)}
.tool-unit{font-size:13px;color:var(--mute)}
.tool-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.tool-cell{background:var(--card);padding:var(--sp2) var(--sp3);display:flex;flex-direction:column;gap:4px}
.tool-cell-hl{background:#EFF6FF}
.tool-k{font:600 12px/1.4 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.tool-v{font:800 24px/1.2 var(--disp);color:var(--ink)}
.tool-cell-hl .tool-v{color:var(--brand-dk)}
.tool-foot{margin:var(--sp2) 0 0;font-size:15.5px;color:var(--mute)}

/* H outbound */
.outgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp3)}
.outcard{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);padding:var(--sp3);
  display:flex;flex-direction:column}
.out-top{margin-bottom:var(--sp2)}
.dest{display:inline-block;padding:4px 10px;border-radius:20px;font:700 11px/1.6 var(--text);
  letter-spacing:.06em;text-transform:uppercase;color:#fff}
.dest-agent{background:var(--brand-dk)}
.dest-w2c{background:var(--w2c)}
.outcard p{color:var(--mute);font-size:15.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;
  background:var(--brand);color:#fff;border-radius:var(--r);font:600 15px/1 var(--text);
  text-decoration:none;margin-top:auto;transition:background-color .2s ease}
.btn:hover{background:var(--brand-dk);color:#fff}
.out-note{margin:12px 0 0;font-size:13px;color:var(--mute)}

/* category cards — 本站主体：商品发现入口 */
.cat-lead{color:var(--mute);font-size:16.5px;margin:0 0 var(--sp3);max-width:68ch}
.catgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp2)}
.catcard{border:1px solid var(--rule);border-top:3px solid var(--brand);border-radius:var(--r);
  background:var(--card);padding:var(--sp3) var(--sp2) var(--sp2);display:flex;flex-direction:column;
  transition:border-color .2s ease,background-color .2s ease}
.catcard:hover{background:#FBFDFF;border-color:var(--rule)}
.cat-art{display:block;margin:0 0 var(--sp2);height:56px}
.catcard h3{margin-bottom:3px;font-size:18px}
.cat-word{font:500 13.5px/1.4 var(--text);color:var(--brand-dk);margin:0 0 10px;letter-spacing:.01em}
.cat-p{font-size:15px;color:var(--mute);margin-bottom:12px}
.cat-tip{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 12px;padding:10px 12px;
  background:var(--paper);border-left:2px solid var(--brand);border-radius:0 var(--r) var(--r) 0}
.cat-tip b{display:block;font:600 11px/1.6 var(--text);letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute)}
.cat-go{margin-top:auto;display:inline-flex;align-items:center;min-height:44px;
  font:600 14.5px/1.3 var(--text);text-decoration:none;color:var(--brand-dk)}
.cat-go::after{content:" ↗";margin-left:6px}
.cat-go:hover{text-decoration:underline}
.catgrid-full{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp3)}
.cat-more{margin:var(--sp3) 0 0}
.cat-more a{font:600 15.5px/1.4 var(--text)}

/* FAQ */
.faq{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);margin-bottom:10px}
.faq summary{cursor:pointer;padding:15px var(--sp3);font:600 16.5px/1.45 var(--text);min-height:44px;
  display:flex;align-items:center;list-style:none;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:10px;height:10px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);transform:rotate(45deg);flex:0 0 auto;transition:transform .2s ease}
.faq[open] summary::before{transform:rotate(-135deg)}
.faq-a{padding:0 var(--sp3) var(--sp2) 46px}
.faq-a p{font-size:16px;color:var(--mute)}
.faq-a p:last-child{margin-bottom:0}

/* next up */
.nextup{margin-top:var(--sp5);padding-top:var(--sp3);border-top:1px solid var(--rule)}
.nextup-lab{font:600 12px/1.4 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.nextup-link{display:flex;flex-direction:column;gap:4px;padding:var(--sp3);border:1px solid var(--rule);
  border-left:3px solid var(--brand);border-radius:var(--r);background:var(--card);text-decoration:none;
  transition:background-color .2s ease}
.nextup-link:hover{background:#FBFDFF}
.nextup-link b{font:700 19px/1.3 var(--disp);color:var(--ink)}
.nextup-link span{color:var(--mute);font-size:15.5px}

/* foot */
/* 硬门 60：375 下页脚那两列与折叠菜单里的链接行高只有 20 多像素，
   64 条 WARN 全出在这里。给足 44px 触点。 */
.foot-links a,.brand-sub{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
@media(max-width:860px){.sitenav a{min-height:44px}}
/* 硬门 60 余下两处：站标链接在 375 下副标题被隐藏、只剩 31px 高的 logo；
   「See all seventeen categories」那条是裸文字链。 */
.brand{min-height:44px}
.cat-more a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-foot{background:var(--card);border-top:1px solid var(--rule);margin-top:var(--sp6);padding:var(--sp5) 0 var(--sp3)}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp4)}
.foot-what{font-size:14.5px;line-height:1.6;color:var(--mute);max-width:56ch}
.foot-col img{margin-bottom:var(--sp2)}
.foot-h{font:600 12px/1.4 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 var(--sp2)}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:2px}
.foot-links a{display:flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;color:var(--ink)}
.foot-links a:hover{color:var(--brand-dk);text-decoration:underline}
.foot-btm{border-top:1px solid var(--rule);margin-top:var(--sp4);padding-top:var(--sp3)}
.foot-btm p{font-size:13.5px;color:var(--mute);margin-bottom:8px;max-width:none}

/* responsive */
@media (max-width:1080px){
  .sitenav a{padding:0 7px;font-size:13.5px}
  .brand-sub{display:none}
}
@media (max-width:1024px){
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catgrid-full{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .navbtn{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 14px;
    border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);
    font:600 15px/1 var(--text);cursor:pointer}
  .navbtn-bars{width:16px;height:10px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .sitenav{display:none;margin-left:0;flex-basis:100%;order:3;padding-bottom:var(--sp2)}
  .sitenav.is-open{display:block}
  .sitenav ul{flex-direction:column;gap:0}
  .sitenav a{min-height:48px;padding:0 12px;font-size:16px;border-bottom:1px solid var(--rule-soft);border-radius:0}
  .head-in{flex-wrap:wrap}
  .split,.split.is-flipped{grid-template-columns:1fr;gap:var(--sp3)}
  .split.is-flipped .split-fig{order:2}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-col:first-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .tbl-hint{display:block}
  .fx-src,.out-note,.tool-unit,.split-fig figcaption,.foot-btm p{font-size:14px}
  .chain{flex-wrap:wrap}
  .chain-stop{flex:1 1 33.333%;border-bottom:1px solid var(--rule-soft)}
  .chain-stop:nth-child(3n){border-right:0}
  .sec{grid-template-columns:1fr;gap:var(--sp2);padding:var(--sp4) 0}
  .sec-rule{display:flex;align-items:center;gap:10px}
  .sec-num{position:static}
  .sec-rule::after{content:"";flex:1;height:1px;background:var(--rule)}
  .lg-row{grid-template-columns:34px 1fr;padding:16px var(--sp2)}
  .lg-ico{display:none}
  .faq-a{padding-left:var(--sp3)}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .chain-stop{flex:1 1 50%}
  .chain-stop:nth-child(3n){border-right:1px solid var(--rule-soft)}
  .chain-stop:nth-child(2n){border-right:0}
  .lede{font-size:18px}
  .foot-in{grid-template-columns:1fr}
  .catgrid,.catgrid-full{grid-template-columns:1fr}
  .tool{padding:var(--sp3) var(--sp2)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}