:root { --background:#fff; --foreground:#17262d; --primary:#0755c9; --muted:#eff4f9; --muted-foreground:#53626e; --border:#d7e1e8; --footer-height:5rem; --font-text:'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif; }
:lang(ja) { --font-text:'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif; }
:lang(en) { --font-text:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; }
:lang(zh-Hans) { --font-text:'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',sans-serif; }
:lang(zh-Hant) { --font-text:'PingFang TC','Microsoft JhengHei','Noto Sans CJK TC','Noto Sans TC',sans-serif; }
:lang(ko) { --font-text:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR','Noto Sans KR',sans-serif; word-break:keep-all; }
* { box-sizing:border-box; border-color:var(--border); }
html { scroll-padding-top:100px; scroll-padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom)); }
body { margin:0; padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom)); background:var(--background); color:var(--foreground); font:1rem/1.8 var(--font-text); }
a { color:inherit; text-decoration:none; }
a { -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.skip-link { position:fixed; z-index:100; left:16px; top:0; transform:translateY(-120%); padding:10px 20px; background:#fff; color:var(--primary); }
.skip-link:focus { transform:none; }
.site-header { min-height:82px; padding:16px max(24px,calc((100vw - 1240px)/2)); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; background:#18232d; color:#f5f7fb; border-bottom:1px solid #344454; }
.site-header a:focus-visible { outline-color:#b9d7ff; }
.wordmark { display:flex; align-items:center; gap:20px; min-width:0; font:900 1.65rem/1.2 Arial,sans-serif; letter-spacing:-.055em; }
.site-logo { display:block; width:min(16rem,44vw); max-width:100%; height:auto; }
.rules-title { font:800 2rem/1.35 var(--font-text); letter-spacing:.08em; }
.header-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; max-width:100%; }
.steam-link,.youtube-link { display:inline-flex; align-items:center; justify-content:center; flex:0 1 auto; max-width:100%; min-height:52px; padding:12px 22px; border:2px solid #8abbff; border-radius:8px; background:var(--primary); color:#fff; font-size:1.125rem; font-weight:800; line-height:1.45; text-align:center; overflow-wrap:anywhere; box-shadow:0 3px 0 #043d93; }
.steam-link:hover { background:#0647a8; text-decoration:underline; text-underline-offset:4px; }
.youtube-link { background:#8b1e24; border-color:#ef9a9a; box-shadow:0 3px 0 #581218; }
.youtube-link:hover { background:#70171c; text-decoration:underline; text-underline-offset:4px; }
.guide { max-width:1288px; padding:0 24px 80px; margin:auto; }
.page-heading { padding:38px 0 28px; }
.page-description { margin:4px 0 0; min-height:1.8em; font-size:1.125rem; line-height:1.8; }
.page-description:not(:empty) { font-size:2.25rem; }
h1 { margin:0; font-size:clamp(3.3rem,6vw,4.5rem); overflow-wrap:anywhere; min-width:0; font-weight:750; letter-spacing:.035em; }
.chapter { padding:28px 0 38px; border-top:1px solid var(--border); }
.chapter h2 { display:flex; align-items:baseline; gap:16px; font-size:clamp(2.5rem,4.4vw,3.3rem); line-height:1.5; margin:0 0 24px; font-weight:700; }
.chapter-number { color:var(--primary); font:inherit; flex:0 0 auto; letter-spacing:.04em; }
.chapter h2 > span:last-child { min-width:0; overflow-wrap:anywhere; }
.lesson-block { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; align-items:start; margin-top:28px; }
.media-frame { margin:0; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#f8fafc; }
.media-frame img,.media-frame video { display:block; width:100%; height:auto; object-fit:contain; background:#fff; }
.media-frame video[role="button"] { cursor:pointer; }
.media-frame video:focus-visible { outline:3px solid var(--primary); outline-offset:-4px; }
.policy-link { margin:32px 0 0; text-align:center; font-size:.875rem; color:var(--muted-foreground); }
.policy-link a { text-decoration:underline; text-underline-offset:3px; }
.lesson-text { min-width:0; font-size:1.0625rem; line-height:1.95; overflow-wrap:anywhere; }
.lesson-text p { margin:0 0 .95em; white-space:pre-wrap; }
.lesson-text strong { color:var(--primary); font-weight:700; }
.chapter h2 strong { font-weight:inherit; }
.level-nav { background:var(--muted); border-bottom:1px solid var(--border); }
.level-nav>div { max-width:1288px; margin:auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.level-nav a { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:12px; padding:17px 10px 14px; border-bottom:3px solid transparent; font-weight:650; }
.level-nav a[aria-current] { color:var(--primary); background:var(--background); border-color:var(--primary); }
.level-nav a:hover { color:var(--primary); }
.contents { margin-bottom:32px; padding:18px 24px; background:var(--muted); border-radius:8px; }
.contents ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; row-gap:5px; margin:0; padding:0; list-style:none; }
.contents a { display:flex; align-items:baseline; gap:12px; padding:4px 0; font-size:.9375rem; }
.contents a span { font:500 .8125rem/1.5 Arial,sans-serif; color:var(--muted-foreground); }
.contents a svg { flex-shrink:0; margin-left:auto; color:var(--primary); }
.contents a:hover { color:var(--primary); text-decoration:underline; text-underline-offset:4px; }
.media-error { font-size:.875rem; color:#aa2626; margin:8px 16px 16px; }
.chapter-pagination { display:flex; justify-content:space-between; gap:24px; border-top:2px solid var(--border); padding-top:28px; }
.chapter-pagination a { display:flex; align-items:center; gap:14px; font-size:1.0625rem; font-weight:650; }
.chapter-pagination a:hover { color:var(--primary); }
.next-page { text-align:right; }
.site-footer { position:fixed; z-index:50; inset:auto 0 0; height:calc(var(--footer-height) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--border); background:var(--muted); }
.language-links { width:100%; max-width:740px; height:100%; margin:auto; padding:12px 16px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.language-links a { display:flex; align-items:center; justify-content:center; min-width:0; min-height:44px; padding:4px; border:1px solid var(--border); border-radius:6px; background:var(--background); color:var(--primary); font:600 .875rem/1.4 var(--font-text); text-align:center; overflow-wrap:anywhere; }
.language-links a[aria-current] { background:var(--primary); color:#fff; border-color:var(--primary); }
.language-links a:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1020px) { .lesson-block { gap:24px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
@media(max-width:760px) { .site-header { min-height:70px; padding:14px 20px; } .wordmark { flex-direction:column; align-items:flex-start; gap:4px; font-size:1.4rem; } .rules-title { font-size:1.625rem; } .steam-link { width:100%; } .guide { padding:0 20px 48px; } .page-heading { padding:26px 0; } .lesson-block { grid-template-columns:1fr; gap:20px; } .chapter { padding:24px 0 28px; } .chapter h2 { gap:12px; margin-bottom:20px; } .level-nav>div { padding:0 10px; } .level-nav a { font-size:.875rem; padding:12px 4px 10px; column-gap:5px; } .contents { padding:14px 16px; } .contents ol { grid-template-columns:1fr; row-gap:3px; } }
@media(max-width:760px) { h1 { font-size:clamp(2.25rem,9vw,3.3rem); } .chapter h2 { font-size:clamp(1.75rem,6.5vw,2.5rem); } }
@media(max-width:760px) { .header-links,.youtube-link { width:100%; } .header-links a { padding-inline:16px; font-size:1rem; } }
@media(max-width:360px) { .level-nav a { font-size:.8125rem; } .language-links { padding:12px 8px; gap:4px; } .language-links a { padding-inline:1px; font-size:.8125rem; } }
[hidden] { display:none!important; }