/* Native scrolling inside each area; the shared controller only handles their boundary. */
html.tool-page { scroll-snap-type:none; scroll-behavior:auto; }
.tool-page-stage, .tool-reading-stage { box-sizing:border-box; display:flow-root; width:100%; min-height:100vh; min-height:100svh; }
.tool-page-stage { --tool-transition-height:144px; position:relative; padding-bottom:var(--tool-transition-height); }
.tool-page-stage--attendance { display:flex; flex-direction:column; }
.tool-reading-stage { background:#faf9f8; }
.tool-transition { position:absolute; bottom:0; left:0; width:100%; height:var(--tool-transition-height); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:8px 20px; background:#faf9f8; z-index:52; text-align:center; }
.tool-transition [data-tool-read], .tool-reading-nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:#737078; font:500 13px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard Variable","Noto Sans KR",sans-serif; text-decoration:none; }
.tool-transition [data-tool-read] { gap:10px; padding:0 16px; }
.tool-transition-hint { visibility:hidden; min-height:17px; color:#77727a; font:11px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard Variable","Noto Sans KR",sans-serif; }
.tool-transition.is-ready .tool-transition-hint { visibility:visible; }
.tool-transition.is-ready [data-tool-read], .tool-reading-nav a.is-ready { color:#a61a32; }
.tool-transition [data-tool-read]:hover, .tool-reading-nav a:hover { color:#a61a32; text-decoration:underline; text-underline-offset:4px; }
.tool-transition [data-tool-read]:focus-visible, .tool-reading-nav a:focus-visible { outline:2px solid #b51e39; outline-offset:3px; border-radius:5px; }
.tool-reading-nav { position:sticky; top:0; z-index:52; background:#faf9f8; padding:2px 24px; }
.tool-reading-nav-inner { max-width:800px; margin:0 auto; }
.tool-reading-nav a { gap:8px; }
.tool-reading-nav + .tool-guide { padding-top:26px; border-top:0; }
#tool-page-guide { scroll-margin-top:48px; }
@media(prefers-reduced-motion:reduce) { html.tool-page { scroll-behavior:auto; } }
@media print { .tool-transition, .tool-reading-nav { display:none; } .tool-page-stage, .tool-reading-stage { min-height:0; padding-bottom:0; } }

.tool-guide { box-sizing:border-box; width:100%; clear:both; margin:0; padding:56px 24px 64px; background:#faf9f8; border-top:1px solid #e8e5e5; color:#434750; text-align:left; font-family:-apple-system,BlinkMacSystemFont,"Pretendard Variable",Pretendard,"Noto Sans KR",sans-serif; }
.tool-guide *, .tool-guide *::before, .tool-guide *::after { box-sizing:border-box; }
.tool-guide-inner { width:100%; max-width:800px; margin:0 auto; }
.tool-guide h2 { margin:0 0 18px; color:#252a32; font-size:24px; font-weight:750; line-height:1.5; letter-spacing:-.04em; word-break:keep-all; overflow-wrap:anywhere; }
.tool-guide p { margin:0 0 12px; font-size:15px; line-height:1.95; letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere; }
.tool-guide .tool-guide-lead { margin-bottom:32px; color:#666b74; }
.tool-guide-section + .tool-guide-section { margin-top:32px; }
.tool-guide h3 { margin:0 0 12px; color:#ae1731; font-size:17px; font-weight:700; line-height:1.6; letter-spacing:-.03em; word-break:keep-all; }
.tool-guide a.tool-guide-link { display:inline; color:#a61a32; font-size:13px; font-weight:600; line-height:1.8; text-decoration:underline; text-decoration-color:#d8a2ab; text-underline-offset:4px; overflow-wrap:anywhere; }
.tool-guide a.tool-guide-link:hover { color:#780d20; text-decoration-color:currentColor; }
.tool-guide a.tool-guide-link:focus-visible { outline:2px solid #b51e39; outline-offset:5px; border-radius:2px; }
@media(max-width:600px) { .tool-guide { margin-top:0; padding:36px 22px 44px; } .tool-guide h2 { font-size:21px; } .tool-guide h3 { font-size:16px; } .tool-guide p { font-size:14px; line-height:1.95; } .tool-guide-section + .tool-guide-section { margin-top:28px; } }

/* Keep fixed match/month navigation behind the reading area. */
.tool-guide, .tool-guide ~ .site-footer { position:relative; z-index:51; }

/* Small service navigation stays with the tools; the page footer follows the article. */
.tool-service { position:relative; width:100%; max-width:900px; margin:0 auto 4px; }
.tool-service-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:18px; }
.tool-service-links :is(a,button) { display:inline-flex; align-items:center; justify-content:center; min-height:32px; margin:0; padding:0 2px; border:0; border-radius:0; background:none; box-shadow:none; color:#75717a; font:400 12px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard Variable","Noto Sans KR",sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; }
.tool-service-links :is(a,button):hover { color:#a61a32; text-decoration:underline; text-underline-offset:4px; }
.tool-service-links :is(a,button):focus-visible { outline:2px solid #b51e39; outline-offset:2px; border-radius:3px; }
.tool-service-status { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:max-content; max-width:100%; margin:0 0 8px; padding:8px 12px; background:#fff; box-shadow:0 2px 12px #0001; border-radius:6px; color:#62616a; font-size:12px; }
.tool-service-status:empty { display:none; }
@media(max-width:600px) { .tool-page-stage { --tool-transition-height:184px; } .tool-service { max-width:390px; } .tool-service-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 8px; } .tool-service-links :is(a,button) { min-height:36px; font-size:11px; } }

/* A separate native snap stop catches touch inertia at the tool boundary.
   Oversized stages remain freely scrollable inside; JS only handles the next swipe. */
html.tool-page.tool-native-boundary { scroll-snap-type:y mandatory; }
.tool-native-boundary .tool-page-stage { scroll-snap-align:start; }
.tool-native-boundary .tool-transition { scroll-snap-align:end; scroll-snap-stop:always; }
.tool-native-boundary .tool-reading-stage { scroll-snap-align:start; scroll-snap-stop:always; }

@media print { html.tool-page.tool-native-boundary { scroll-snap-type:none; } }

/* During tool touch or wheel scrolling the document ends at the transition. Keeping the
   body in normal flow lets the compositor stop without a late position reset.
   Opening the explanation restores the complete scroll range before moving. */
@media screen {
    html.tool-page.tool-touch-limited { overflow-y:auto; scroll-snap-type:none; scrollbar-gutter:stable; }
    html.tool-touch-limited body { box-sizing:border-box; height:var(--tool-scroll-limit); min-height:0; overflow:clip; }
}