/* Shared layout and accessible navigation. Loaded after each page's styles. */
html { scroll-padding-top: 100px; }
body { overflow-wrap: break-word; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #1868af; outline-offset: 4px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 12000; padding: 12px 20px; background: #fff; color: #26375e; border: 2px solid #26375e; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.header-container { position: relative; gap: 16px; }
.logo { flex-shrink: 0; }
.nav-toggle { display: none; }
.nav-list a { display: block; }
.nav-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.subject-grid, .system-grid, .special-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.subject-grid { gap: 28px; }
.system-grid { margin-top: 40px; }
.special-grid { margin-top: 36px; }
.subject-grid > *, .system-grid > *, .special-grid > *, .comparison-grid > * { min-width: 0; }
.comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.curriculum-table-wrapper { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.curriculum-table tbody th { background: #f3eee6; color: #3a4b7c; }
.curriculum-table tbody th a { text-decoration: underline; text-underline-offset: 4px; }
.blog-card h3 { font-family: 'Pretendard', sans-serif; }
.feed-home-card { grid-column: 1 / -1; }
.gallery-grid img { max-width: 100%; object-fit: cover; }
@media (max-width: 1100px) {
    .header-container { gap: 8px; }
    .header .btn { order: 1; margin-left: auto; padding: 10px 12px; font-size: .8rem; white-space: nowrap; }
    .nav-toggle { order: 2; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #3a4b7c; border-radius: 6px; background: transparent; color: #3a4b7c; font-size: 1.4rem; cursor: pointer; }
    .nav { display: none; position: absolute; top: 100%; left: 16px; right: 16px; background: #fffdf9; padding: 12px; border: 1px solid #e0d4c2; border-radius: 0 0 12px 12px; box-shadow: 0 12px 24px rgba(42,59,108,.12); max-height: calc(100dvh - 100px); overflow-y: auto; }
    .nav[data-open="true"] { display: block; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-list li { border-left: 0 !important; margin-left: 0 !important; padding-left: 0 !important; }
    .nav-list a { padding: 10px 14px; min-height: 44px; border-radius: 6px; }
    .nav-list a:hover, .nav-list a:focus-visible { background: #f1f3f8; }
}
@media (max-width: 768px) {
    .subject-grid, .system-grid, .special-grid, .comparison-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
    .method-card { padding: 28px 24px; }
    .hero-container .btn, #hero-diagnosis-btn, #results-cta-btn, #cta-kakao-btn { max-width: 100%; }
    .cta-btn-group > a { max-width: 100%; }
}
@media (max-width: 480px) {
    .header-container { height: 72px; padding-right: 16px; padding-left: 16px; }
    .hero-container #hero-diagnosis-btn { padding: 16px 24px; font-size: 1rem; }
    .blog-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}