:root{
  --canvas:#f6f1e6;
  --ink:#242743;
  --sub:#666a78;
  --navy:#30365d;
  --sage:#92a992;
  --coral:#df8066;
  --amber:#d4a24f;
  --card:#fffaf1;
  --stroke:#d9d0c1;
  --cta:#2f6656;
  --cta-hover:#254f43;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.skip-jump{position:absolute;left:-9999px}
.skip-jump:focus{left:14px;top:14px;z-index:50;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:10px 14px}
.intro-grid{width:min(1180px,calc(100% - 32px));margin:34px auto 58px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:46px;align-items:center}
.intro-copy h1{font-size:clamp(42px,6vw,74px);line-height:1;letter-spacing:-.055em;margin:0 0 24px}
.intro-copy p{font-size:18px;margin:0 0 16px}
.intro-art{overflow:hidden;border-radius:28px;background:#ece5d9;border:1px solid rgba(36,39,67,.12);box-shadow:0 20px 50px rgba(36,39,67,.12)}
.intro-art img{width:100%;aspect-ratio:16/9;object-fit:cover}
.toplist{width:min(1180px,calc(100% - 32px));margin:0 auto 70px;background:var(--card);border:1px solid var(--stroke);border-radius:22px;padding:26px;box-shadow:0 10px 28px rgba(36,39,67,.06)}
.toplist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.toplist-head h2{margin:0;font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.035em}
.toplist-head p{margin:0;color:var(--sub);font-size:13px}
.toplist-grid{display:grid;gap:11px}
.top-row{display:grid;grid-template-columns:38px 74px minmax(140px,.8fr) minmax(230px,1.45fr) 145px;gap:14px;align-items:center;padding:13px;background:#fff;border:1px solid #ddd4c7;border-radius:15px;transition:transform .15s ease,box-shadow .15s ease}
.top-row:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(36,39,67,.08)}
.top-row:first-child{box-shadow:inset 4px 0 0 var(--coral)}
.rank-chip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ece6dc;font-size:12px;font-weight:800}
.logo-tile{width:70px;height:70px;border-radius:13px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(36,39,67,.10)}
.logo-tile img{width:82%;height:82%;object-fit:contain}
.brand-label{font-size:16px;font-weight:850;line-height:1.2}
.scoreline{display:flex;align-items:center;gap:7px;margin-top:6px}
.starline{position:relative;color:#d8d1c6;letter-spacing:1px;line-height:1}
.starline b{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:var(--amber);font-weight:inherit}
.score-num{font-size:12px;font-weight:800;color:var(--sub)}
.bonus-copy small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#766f6a;font-weight:800;margin-bottom:3px}
.bonus-copy strong{font-size:15px;line-height:1.35}
.cta{display:block;text-align:center;text-decoration:none;background:var(--cta);color:#fff;font-weight:850;padding:13px 10px;border-radius:10px}
.cta:hover{background:var(--cta-hover)}
.skel{height:102px;border-radius:15px;border:1px solid #e1d9cc;background:linear-gradient(100deg,#fbfaf6 38%,#eee7dc 50%,#fbfaf6 62%);background-size:220% 100%;animation:slide 1.2s linear infinite}
@keyframes slide{to{background-position:-220% 0}}
.content-layout{width:min(1110px,calc(100% - 32px));margin:0 auto 76px;display:grid;grid-template-columns:215px minmax(0,790px);gap:62px;justify-content:center;align-items:start}
.side-index{position:sticky;top:20px;border-left:2px solid var(--coral);padding-left:16px}
.side-index strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.side-index a{display:block;text-decoration:none;color:var(--sub);font-size:13px;line-height:1.35;padding:5px 0}
.side-index a:hover{color:var(--ink)}
.article h2,.faq-area h2{font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.04em;margin:60px 0 18px}
.article .reading-block:first-child h2{margin-top:0}
.article h3{font-size:23px;line-height:1.2;letter-spacing:-.025em;margin:36px 0 13px}
.article p{margin:0 0 18px}
.article ul,.article ol{padding-left:23px;margin:0 0 24px}
.article li{margin:7px 0;padding-left:4px}
.article blockquote{margin:28px 0;padding:17px 20px;border-left:4px solid var(--sage);background:#e9eadf;border-radius:0 12px 12px 0}
.article blockquote p{margin:0}
.article table{width:100%;border-collapse:collapse;margin:24px 0 30px;background:var(--card);font-size:14px;border:1px solid var(--stroke)}
.article th,.article td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid var(--stroke)}
.article th{background:#e8e2d8;font-weight:850}
.inline-visual{margin:34px 0 42px;border:1px solid var(--stroke);border-radius:17px;overflow:hidden;background:var(--card)}
.inline-visual img{width:100%;aspect-ratio:16/9;object-fit:cover}
.inline-visual figcaption{padding:11px 14px;font-size:12px;color:var(--sub)}
.faq-area{margin-top:68px}
.faq-box{border-top:1px solid var(--stroke)}
.faq-box:last-child{border-bottom:1px solid var(--stroke)}
.faq-box summary{list-style:none;cursor:pointer;position:relative;padding:19px 44px 19px 0;font-size:18px;font-weight:820}
.faq-box summary::-webkit-details-marker{display:none}
.faq-box summary span:before,.faq-box summary span:after{content:"";position:absolute;right:7px;top:50%;width:16px;height:2px;background:var(--ink);transition:transform .15s ease}
.faq-box summary span:after{transform:rotate(90deg)}
.faq-box[open] summary span:after{transform:rotate(0)}
.faq-content{padding:0 0 18px;color:#535868}
.footer{border-top:1px solid rgba(36,39,67,.15);padding:26px 18px 34px;text-align:center;color:#6b6f7b;font-size:13px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px;margin-top:10px}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.service-page{width:min(840px,calc(100% - 32px));margin:52px auto 76px}
.service-page h1{font-size:clamp(38px,6vw,64px);line-height:1.02;letter-spacing:-.05em;margin:0 0 26px}
.service-page h2{font-size:27px;line-height:1.2;margin:36px 0 12px}
.service-page p,.service-page li{font-size:17px}
.back-home{display:inline-block;margin-bottom:24px;text-decoration:none;font-weight:800}
.back-home:before{content:"← ";font-size:18px}
@media(max-width:900px){
.intro-grid{grid-template-columns:1fr;gap:26px}.intro-art{order:-1}
.content-layout{grid-template-columns:1fr;max-width:820px}
.side-index{position:relative;top:auto;border-left:0;border-bottom:1px solid var(--stroke);padding:0 0 15px;display:flex;gap:8px;overflow:auto}
.side-index strong{display:none}.side-index a{white-space:nowrap;border:1px solid var(--stroke);background:var(--card);padding:8px 10px;border-radius:999px}
.top-row{grid-template-columns:34px 64px 1fr 138px;grid-template-areas:"rank logo brand cta" "bonus bonus bonus bonus"}
.rank-chip{grid-area:rank}.logo-tile{grid-area:logo;width:60px;height:60px}.brand-meta{grid-area:brand}.bonus-copy{grid-area:bonus;background:#f2ece3;border-radius:10px;padding:11px;text-align:center}.cta{grid-area:cta}
}
@media(max-width:620px){
.intro-grid,.toplist,.content-layout{width:calc(100% - 22px)}.intro-copy h1{font-size:42px}.intro-copy p{font-size:16px}.toplist{padding:15px}
.toplist-head{display:block}.toplist-head p{margin-top:7px}
.top-row{grid-template-columns:54px 1fr;grid-template-areas:"logo brand" "bonus bonus" "cta cta";position:relative}.rank-chip{position:absolute;right:9px;top:9px;width:25px;height:25px;font-size:11px}.logo-tile{width:54px;height:54px}.cta{padding:14px}
.article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}