html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.language-picker { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 20px; padding: 10px 16px; margin: 0 0 24px; }
.language-picker summary, .guide-topic-picker summary { min-height: 44px; display: list-item; cursor: pointer; font-weight: 600; }
.language-picker nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 6px; margin-top: 10px; }
.language-picker nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 16px; }
.language-picker a[aria-current="page"] { border: 1px solid var(--primary); }
.language-picker nav a:hover { background: var(--surface-solid); }
.guide-content:lang(ja), .guide-content:lang(zh-CN), .guide-content:lang(ko-KR) { line-height: 1.85; word-break: normal; }
.guide-content section { border-top: 1px solid var(--line); margin-top: 32px; }
.guide-content ol { padding-left: 1.5rem; }
.guide-content li { margin-bottom: .65rem; }
.guide-content a { text-decoration: underline; text-underline-offset: .18em; }
.guide-content a.button { text-decoration: none; }
.plan-label { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; vertical-align: middle; }
.guide-toc { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 10px; }
.guide-content details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.guide-content summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px; background: var(--surface-solid); }
.skip-link:focus { top: 12px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.guide-content { min-width: 0; overflow-wrap: anywhere; }
.screen-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 24px 0; }
.screen-pair figure { margin: 0; }
.guide-screenshot { max-width: 340px; margin: 24px auto; }
.guide-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 18px; }
.guide-screenshot figcaption { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.screen-pair img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.screen-pair figcaption { font-size: .88rem; color: var(--muted); margin-top: 10px; }
@media(max-width:500px) { .screen-pair { grid-template-columns: 1fr; } }
@media(max-width:800px) { .guide-toc { display: block; position: static; max-height: none; columns: 2; margin-bottom: 20px; } .guide-toc strong { column-span: all; } .guide-toc a { break-inside: avoid; padding: 8px 0; } }
@media(max-width:420px) { .guide-toc { columns: 1; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .site-footer, .guide-toc, .skip-link { display: none; } .guide-grid { display: block; } .legal { border: none; padding: 0; box-shadow: none; } body { background: white; color: black; } .legal p, .legal li { color: black; } }