/* The user guide (/ko/guide/, /ja/guide/): one reading column beside a contents list, on the reading pages' tokens. */
body{background:var(--bg);color:var(--ink)}
.guide-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.guide-back{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:700}
.guide-back:hover{text-decoration:none;border-color:var(--line-strong);background:var(--surface-2)}
.guide-top .lang-links{margin:0}
.lang-links a[aria-current=page]{color:var(--ink);border-color:var(--line-strong);background:var(--surface-2)}
.guide-print{min-height:36px;margin-left:auto;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.guide-print:hover{color:var(--ink);border-color:var(--line-strong)}
.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;max-width:1160px;margin:0 auto;padding:0 20px;align-items:start}
.guide-layout main{max-width:860px;margin:0;padding:24px 0 72px;min-width:0}
.guide-toc{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;margin-top:24px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13.5px}
.guide-toc summary{padding:4px 10px 8px;color:var(--muted);font-size:12.5px;font-weight:700;list-style:none}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.guide-toc li{margin:0;counter-increment:toc}
.guide-toc a{display:flex;gap:8px;padding:6px 10px;border-radius:9px;color:var(--muted);line-height:1.4}
.guide-toc a::before{content:counter(toc);flex:0 0 1.3em;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.guide-toc a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.guide-toc a[aria-current=true]{color:var(--accent-text);background:var(--surface-2);font-weight:700}
html:lang(ja) body{word-break:normal;line-break:strict}
main h1{margin-top:0}
main section{scroll-margin-top:72px}
main h3[id]{scroll-margin-top:72px}
main section:first-of-type h2{margin-top:1.2em}
figure{margin:14px 0 18px}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:zoom-in}
figure.phone{max-width:240px}
.guide-contents{display:none;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:4;min-height:42px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer}
.guide-zoom{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.92);overflow:auto;cursor:zoom-out}
.guide-zoom::backdrop{background:rgba(0,0,0,.92)}
.guide-zoom img{display:block;max-width:none;margin:auto}
.guide-zoom-close{position:fixed;top:12px;right:14px;min-height:40px;padding:0 16px;border:1px solid #666;border-radius:999px;background:#1b1f24;color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
figure.small{max-width:420px}
figcaption{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}
.fig-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.fig-row figure{flex:1 1 300px;min-width:0;margin:10px 0}
.fig-row figure.small{flex:0 1 340px}
.fig-row.phones figure{flex:0 1 250px}
.fig-side{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start;margin:10px 0}
.fig-side figure{margin:4px 0}
.fig-side>div>:first-child{margin-top:0}
.fig-side h3:first-child{margin-top:0}
.ui{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);font-size:.92em;font-weight:600;line-height:1.55;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
kbd{display:inline-block;min-width:1.5em;margin:0 1px;padding:0 5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:600 .86em/1.5 ui-monospace,Consolas,monospace;text-align:center}
.legend{counter-reset:mark;margin:0 0 18px;padding:0;list-style:none}
.legend li{position:relative;margin:.45em 0;padding-left:32px;counter-increment:mark}
.legend li::before{content:counter(mark);position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:#ff4d6d;color:#fff;font-size:12.5px;font-weight:800;line-height:22px;text-align:center}
.steps{counter-reset:step;margin:.6em 0 1em;padding:0;list-style:none}
.steps li{position:relative;margin:.5em 0;padding-left:30px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:.2em;width:21px;height:21px;border:1px solid var(--line-strong);border-radius:50%;color:var(--muted);font-size:12px;font-weight:700;line-height:20px;text-align:center}
.tip,.note{margin:14px 0;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent-text);border-radius:0 10px 10px 0;background:var(--surface);font-size:14px}
.note{border-left-color:var(--faint)}
.tip b:first-child,.note b:first-child{margin-right:4px}
.guide-layout table{margin:10px 0 18px}
.guide-map td:first-child{width:58%}
.faq dt{margin-top:1.1em;font-weight:700}
.faq dd{margin:.3em 0 0;color:var(--ink)}
@media(max-width:940px){
 .guide-layout{display:block;padding:0 16px}
 .guide-top{position:static}
 main section,main h3[id]{scroll-margin-top:12px}
 .guide-contents{display:block}
 .guide-toc{position:static;max-height:none;margin-top:14px}
 .guide-toc summary{padding-bottom:4px;cursor:pointer;list-style:revert}
 .guide-layout main{padding-top:18px}
}
@media(max-width:620px){
 .guide-top{padding:8px 16px}
 .fig-side{display:block}
 .fig-row figure,.fig-row figure.small{flex:1 1 100%}
 .fig-row.phones figure{flex:1 1 40%}
 th,td{padding:7px 7px}
 .ui{white-space:normal}
}
@media print{
 html{scroll-behavior:auto}
 :root{color-scheme:light}
 body{background:#fff;color:#111;font-size:11pt}
 .guide-top,.guide-toc,.guide-contents,.guide-zoom{display:none}
 .guide-layout{display:block;max-width:none;padding:0}
 .guide-layout main{max-width:none;padding:0}
 h2{break-before:page;border-top:0;padding-top:0;color:#111}
 #start h2{break-before:auto}
 h3{break-after:avoid;color:#111}
 p,li,td,th,dd,dt,figcaption,.updated{color:#111}
 figure,tr,.tip,.note,.fig-side{break-inside:avoid}
 figure img{border-color:#bbb}
 figure.small,.fig-row figure.small{max-width:300px}
 .ui,kbd,.tip,.note{background:#f4f4f4;border-color:#bbb;color:#111}
 a{color:inherit;text-decoration:none}
}