:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1a2332; --muted:#5b6b7f;
  --brand:#2f6df6; --brand-dark:#1e4fc4; --accent:#12b886;
  --line:#e4e9f0; --shadow:0 6px 24px rgba(20,40,80,.08);
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
}
.wrap{max-width:760px; margin:0 auto; padding:0 18px 64px}
a{color:var(--brand)}
img{max-width:100%; height:auto}

.site-nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  padding:14px 0; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.site-nav .brand{font-weight:800; color:var(--ink); text-decoration:none; font-size:1.05rem}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:4px; flex-wrap:wrap}
.site-nav ul a{
  display:block; padding:6px 12px; border-radius:8px; color:var(--muted);
  text-decoration:none; font-weight:600; font-size:.95rem;
}
.site-nav ul a:hover{background:#eaf0fe; color:var(--brand-dark)}
.site-nav ul a[aria-current="page"]{background:var(--brand); color:#fff}

.breadcrumb{font-size:.85rem; color:var(--muted); margin:14px 0 0}
.breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap}
.breadcrumb li+li::before{content:"›"; margin:0 8px; color:var(--muted)}
.breadcrumb a{color:var(--muted)}

h1{font-size:1.9rem; margin:.4em 0 .2em; line-height:1.2}
h2{font-size:1.3rem; margin:32px 0 10px; line-height:1.3}
h3{font-size:1.08rem; margin:22px 0 6px}
p.lead{font-size:1.08rem; color:var(--muted); margin-top:0}
.meta{font-size:.85rem; color:var(--muted)}
article ul, article ol{padding-left:1.3em}
article li{margin:4px 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin:22px 0;
}
.card > h2:first-child{margin-top:0}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0}
table{width:100%; border-collapse:collapse; font-size:.95rem; min-width:440px}
th, td{padding:8px 6px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{border-bottom:2px solid var(--line); white-space:nowrap}
caption{caption-side:bottom; text-align:left; font-size:.82rem; color:var(--muted); padding-top:6px}

.tip{
  background:#eef4ff; border-left:4px solid var(--brand); border-radius:10px;
  padding:12px 16px; margin:18px 0;
}
.cta{
  background:linear-gradient(135deg,#eef4ff,#e8fbf4); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin:28px 0; text-align:center;
}
.cta p{margin:0 0 12px}
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:700; padding:11px 20px; border-radius:10px;
}
.btn:hover{background:var(--brand-dark)}

.shop-item{
  display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line);
  border-radius:12px; margin:10px 0; background:#fbfcfe;
}
.shop-item .emoji{font-size:1.8rem}
.shop-item .txt{flex:1}
.shop-item .txt b{display:block}
.shop-item .txt span{color:var(--muted); font-size:.88rem}
.btn-aff{
  background:#ff9900; color:#111; text-decoration:none; font-weight:700;
  padding:10px 16px; border-radius:10px; white-space:nowrap; font-size:.9rem;
}
.btn-aff:hover{background:#e88a00}
.disclosure{font-size:.8rem; color:var(--muted); margin-top:6px}

.related ul{list-style:none; padding:0; margin:0}
.related li{padding:10px 0; border-bottom:1px solid var(--line)}
.related li:last-child{border-bottom:none}
.guide-list article{border-bottom:1px solid var(--line); padding:6px 0 14px}
.guide-list article:last-child{border-bottom:none}
.guide-list h2{margin:14px 0 4px; font-size:1.15rem}

footer{text-align:center; color:var(--muted); font-size:.85rem; margin-top:40px}
footer a{color:var(--muted)}

@media(max-width:520px){
  h1{font-size:1.55rem}
  .shop-item{flex-wrap:wrap}
  .site-nav ul a{padding:6px 9px}
}