:root { --cream:#F5F0E6; --navy:#2C3A58; --mid:#5A6A8C; --line:#E4DCCC; --card:#FBF8F1; --footer:#2A2D3E; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--cream); color:var(--navy); font-family:"Pretendard GOV Variable","Pretendard GOV",-apple-system,sans-serif; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
.narrow { max-width:720px; }
header { position:sticky; top:0; z-index:2; background:var(--cream); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:24px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; }
nav { display:flex; gap:20px; }
nav a { color:var(--mid); }
.langs { margin-left:auto; display:flex; gap:4px; }
.langs a { padding:4px 8px; border-radius:6px; font-size:13px; font-weight:600; color:var(--mid); }
.langs a[aria-current] { background:var(--navy); color:#fff; }
.icon { flex:none; }
.hero { position:relative; text-align:center; padding:72px 16px 88px; overflow:hidden; }
.hero > * { position:relative; }
.rings { position:absolute !important; left:50%; top:40px; width:820px; height:820px; transform:translateX(-50%); border:1px solid var(--line); border-radius:50%; }
.rings::after { content:""; position:absolute; inset:92px; border:1px solid var(--line); border-radius:50%; }
h1 { font-size:clamp(34px,6vw,64px); line-height:1.2; margin:28px 0 20px; font-weight:800; word-break:keep-all; }
.hero p { max-width:560px; margin:0 auto 28px; font-size:clamp(17px,2vw,20px); color:var(--mid); word-break:keep-all; }
.badge { display:inline-block; }
.badge img { display:block; height:48px; width:auto; }
section.wrap { padding-top:72px; padding-bottom:24px; }
small { display:block; color:var(--mid); font-weight:600; }
h2 { font-size:clamp(26px,4vw,38px); margin:6px 0 28px; line-height:1.3; word-break:keep-all; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
article { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; }
h3 { margin:0 0 8px; font-size:18px; }
article p { margin:0; color:var(--mid); word-break:keep-all; }
.shot { display:block; width:100%; max-width:720px; height:auto; margin:0 auto; filter:drop-shadow(0 24px 40px rgba(44,58,88,.25)); }
.compare { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.compare table { width:100%; min-width:560px; border-collapse:collapse; }
.compare th, .compare td { padding:14px 20px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.compare tr:last-child > * { border-bottom:0; }
.compare tbody th { font-weight:600; }
.compare td { color:var(--mid); }
.buy { display:block; padding:12px 18px; border:0; border-radius:8px; background:var(--navy); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.download { display:block; margin-top:8px; font-size:14px; text-decoration:underline; }
.soon { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; font-weight:600; }
details { border-bottom:1px solid var(--line); padding:16px 0; }
summary { cursor:pointer; font-weight:600; }
details p { margin:10px 0 0; color:var(--mid); }
.closing { text-align:center; padding:88px 16px; }
footer { background:var(--footer); color:#E8E8EE; padding:36px 0; font-size:14px; }
footer .links { display:flex; justify-content:flex-end; gap:24px; }
footer .links a { text-decoration:underline; text-underline-offset:4px; font-weight:600; }
footer hr { border:0; border-top:1px solid #5A5D70; margin:20px 0; }
footer p { margin:8px 0; word-break:keep-all; }
.legal { min-height:60vh; padding-top:56px; padding-bottom:56px; }
.legal h2 { font-size:20px; margin:32px 0 10px; }
.legal-table { overflow-x:auto; }
.legal table { width:100%; border-collapse:collapse; font-size:14px; }
.legal th, .legal td { padding:8px 10px; border:1px solid var(--line); text-align:left; }
.legal h1 { font-size:36px; margin-top:0; }
@media (max-width:640px) {
  nav { display:none; }
  footer .links { justify-content:flex-start; }
}
/* keep-all forbids breaks inside Japanese runs, which have no spaces. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] p { word-break:normal; }