:root{--ink:#17213a;--muted:#68728b;--blue:#3157d5;--line:#dfe5f2;--bg:#f6f8ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}.hub-header{display:flex;align-items:center;gap:22px;padding:14px max(24px,calc((100vw - 1180px)/2));background:#fff;border-bottom:1px solid var(--line)}.hub-header>a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.hub-header nav{display:flex;gap:18px;margin-left:auto}.hub-header nav a{color:var(--muted);text-decoration:none;font-weight:750}.hub-header label{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:.8rem}.hub-header select{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}.hub-hero{max-width:1180px;margin:0 auto;padding:80px 28px 50px}.hub-hero>p{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:850}.hub-hero h1{font-size:clamp(3rem,7vw,6rem);line-height:1;margin:14px 0 28px;letter-spacing:-.055em}.hub-hero div{max-width:870px;color:var(--muted);font-size:1.12rem}.cluster{max-width:1180px;margin:0 auto;padding:38px 28px 58px}.cluster-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.cluster-head p{margin:0;color:var(--blue);font-weight:850}.cluster-head h2{font-size:clamp(1.8rem,4vw,3rem);margin:4px 0}.cluster-head>a{color:var(--blue);font-weight:850}.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.hub-card{display:block;padding:23px;border:1px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);text-decoration:none}.hub-card span{font-size:.75rem;color:var(--blue);font-weight:850}.hub-card p{color:var(--muted)}.method{max-width:1124px;margin:30px auto 70px;padding:38px;border-radius:28px;background:#15213d;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:34px}.method p,.method h2,.method li{color:#fff}.method ul{display:grid;gap:8px}.hub-footer{display:flex;justify-content:space-between;max-width:1180px;margin:0 auto;padding:34px 28px 50px;color:var(--muted)}@media(max-width:800px){.hub-header nav{display:none}.hub-header label{margin-left:auto}.hub-grid{grid-template-columns:1fr}.method{grid-template-columns:1fr;margin-left:20px;margin-right:20px}.cluster-head{align-items:flex-start;flex-direction:column}}


/* 2026-08-20 reader-first layout review — all 10 language hubs */
body { overflow-x:hidden; }
.hub-header { position:sticky; top:0; z-index:20; min-height:70px; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }
.hub-hero { padding:68px 28px 42px; }
.hub-hero h1 { max-width:900px; font-size:clamp(2.8rem,6vw,5.2rem); line-height:1.04; text-wrap:balance; }
.hub-hero div { max-width:860px; line-height:1.8; }
.cluster { padding-top:32px; }
.cluster-head { align-items:flex-end; }
.cluster-head h2 { line-height:1.22; text-wrap:balance; }
.hub-grid { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.hub-card { min-width:0; padding:26px; border-radius:20px; box-shadow:0 8px 24px rgba(45,59,105,.045); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.hub-card:hover { transform:translateY(-2px); border-color:#cad7f6; box-shadow:0 14px 34px rgba(45,59,105,.09); }
.hub-card h3 { margin:10px 0 12px; font-size:1.13rem; line-height:1.55; letter-spacing:-.012em; text-wrap:balance; }
.hub-card p { margin:0; font-size:.95rem; line-height:1.75; overflow-wrap:break-word; }
.method { max-width:1124px; padding:38px 42px; }
html:lang(ja) body,html:lang(ko) body,html:lang(zh-CN) body,html:lang(zh-TW) body { font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans CJK JP","Noto Sans CJK KR","Noto Sans CJK SC","Noto Sans CJK TC",sans-serif; }
html:lang(ja) .hub-card h3,html:lang(ko) .hub-card h3,html:lang(zh-CN) .hub-card h3,html:lang(zh-TW) .hub-card h3 { line-height:1.68; word-break:normal; overflow-wrap:break-word; }
@media (max-width:1020px) {
  .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .hub-header { padding-left:16px; padding-right:16px; gap:10px; }
  .hub-header label span { display:none; }
  .hub-header select { max-width:130px; }
  .hub-hero { padding:48px 20px 30px; }
  .hub-hero h1 { font-size:clamp(2.35rem,12vw,3.65rem); }
  .cluster { padding:28px 20px 44px; }
  .cluster-head { align-items:flex-start; flex-direction:column; }
  .hub-grid { grid-template-columns:1fr; }
  .hub-card { padding:22px; }
  .method { grid-template-columns:1fr; margin:18px 20px 52px; padding:28px 24px; }
  .hub-footer { padding-left:20px; padding-right:20px; }
}