:root { color:#17233c; background:#f5f8fc; font-family:"Segoe UI Variable","Segoe UI",ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#f5f8fc; }
a { color:#0967ce; }
header { display:flex; width:min(1180px,calc(100% - 48px)); height:78px; align-items:center; justify-content:space-between; margin:auto; }
.brand { display:flex; align-items:center; gap:10px; color:#071633; text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:9px; }
.brand span { font-size:14px; }.brand strong { font-weight:760; }
.back { border:1px solid #ccd7e5; border-radius:11px; background:#fff; padding:10px 14px; color:#31537d; font-size:11px; font-weight:700; text-decoration:none; }
main { display:block; width:min(1180px,calc(100% - 48px)); margin:25px auto 90px; }
.hero { overflow:hidden; border-radius:24px; background:radial-gradient(circle at 80% 20%,#155ab5,#081a3a 48%,#07142c); padding:62px 66px; color:#fff; box-shadow:0 22px 60px #132e5424; }
.hero>span,.number { color:#62baff; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { margin:11px 0 18px; font-size:clamp(42px,6vw,72px); line-height:1; letter-spacing:-.05em; }
.hero p { max-width:760px; margin:0; color:#b9cae2; font-size:14px; line-height:1.75; }.hero p strong { color:#fff; }
.contents { position:sticky; top:25px; display:grid; align-self:start; gap:5px; border:1px solid #d8e1ed; border-radius:15px; background:#fff; padding:17px; }
.contents strong { margin:2px 8px 8px; color:#738096; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.contents a { border-radius:8px; padding:9px 8px; color:#42536d; font-size:11px; text-decoration:none; }.contents a:hover { background:#edf5ff; color:#075fbe; }
article { width:min(900px,100%); min-width:0; margin:28px auto 0; }
article>section { scroll-margin-top:25px; border:1px solid #dbe3ed; border-radius:18px; background:#fff; padding:39px 44px; box-shadow:0 8px 30px #17385e0a; }
article>section+section { margin-top:22px; }
h2 { margin:8px 0 27px; color:#0b1a35; font-size:32px; letter-spacing:-.035em; }
h3 { margin:31px 0 9px; color:#1c2e4a; font-size:16px; }
p,li { color:#5b687c; font-size:12px; line-height:1.8; }
p { margin:9px 0; } ul { margin:10px 0; padding-left:21px; } li+li { margin-top:5px; }
code { border:1px solid #dce4ee; border-radius:5px; background:#f5f7fa; padding:2px 5px; color:#33435c; font-size:11px; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid #dce4ee; border-radius:13px; background:#dce4ee; overflow:hidden; }
.summary-grid div { min-height:115px; background:#f9fbfe; padding:18px; }.summary-grid strong { color:#233653; font-size:12px; }.summary-grid p { margin:5px 0 0; font-size:11px; line-height:1.6; }
.important { border-left:3px solid #0878f2; margin-top:20px; background:#edf6ff; padding:12px 14px; color:#315a89; }
.caps { color:#39475c; font-size:11px; font-weight:650; letter-spacing:.01em; }
.storage-table { display:grid; margin:15px 0; border:1px solid #dce4ee; border-radius:11px; overflow:hidden; }
.storage-table>div { display:grid; grid-template-columns:minmax(190px,.7fr) 1.3fr; gap:18px; padding:13px 15px; background:#fafcff; }.storage-table>div+div { border-top:1px solid #dce4ee; }.storage-table strong { color:#30425f; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; overflow-wrap:anywhere; }.storage-table span { color:#69768a; font-size:11px; line-height:1.55; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; min-height:100px; padding:25px max(24px,calc((100vw - 1180px)/2)); background:#071633; color:#8292aa; font-size:10px; } footer a { color:#a9c7ed; } footer span:last-child { text-align:right; }
@media(max-width:800px) {
  main { grid-template-columns:1fr; gap:20px; }
  .hero { padding:45px 36px; }
  .contents { position:static; }
  article>section { padding:31px 30px; }
}
@media(max-width:520px) {
  header,main { width:calc(100% - 24px); }
  header { height:66px; }.brand span { font-size:12px; }.brand img { width:32px; height:32px; }.back { padding:8px 10px; font-size:10px; }
  main { margin-top:12px; margin-bottom:55px; }
  .hero { border-radius:17px; padding:34px 23px; }.hero h1 { font-size:38px; }.hero p { font-size:12px; }
  article>section { border-radius:14px; padding:26px 20px; }
  h2 { font-size:27px; }.summary-grid { grid-template-columns:1fr; }.summary-grid div { min-height:90px; }
  .storage-table>div { grid-template-columns:1fr; gap:5px; }
  footer { grid-template-columns:1fr; gap:12px; } footer span:last-child { text-align:left; }
}