/* Shared layout and components for templates/base_public.html.
   Page styles live in home.css and academy/academy.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ab-header-h) + 8px); }
body.ab {
    margin: 0;
    background: var(--ab-paper);
    color: var(--ab-ink);
    font-family: var(--ab-font);
    font-size: 16px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* :where() keeps the resets at element specificity so component classes win. */
:where(.ab) a { color: inherit; text-decoration: none; }
:where(.ab) :is(h1, h2, h3, h4, p, figure, dl, dd, ol, ul, blockquote) { margin: 0; }
:where(.ab) :is(ol, ul) { padding: 0; list-style: none; }
:where(.ab) img { display: block; max-width: 100%; height: auto; }
:where(.ab) :is(button, input, select, textarea) { font: inherit; color: inherit; }
.ab :focus-visible { outline: none; box-shadow: var(--ab-focus); }

.shell { width: min(1200px, 100% - 48px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 16px; border-radius: var(--ab-radius-sm); background: var(--ab-navy-950); color: #fff !important; font-weight: 700; }
.skip-link:focus { top: 8px; }
.only-m { display: none; }

.kicker { margin-bottom: 12px !important; color: var(--ab-blue-700); font-size: var(--ab-text-xs); font-weight: 800; letter-spacing: .14em; }
.kicker--dark { color: var(--ab-sky-300); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ab-blue-700) !important; font-size: 15px; font-weight: 700; white-space: nowrap; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--ab-radius-sm); background: none; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn--lg { min-height: 52px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--ab-blue-700); color: #fff !important; }
.btn--primary:hover { background: var(--ab-blue-800); }
.btn--outline { border-color: var(--ab-ink); background: #fff; color: var(--ab-ink) !important; }
.btn--outline:hover { background: var(--ab-navy-900); color: #fff !important; }
.btn--light { background: #fff; color: var(--ab-navy-950) !important; }
.btn--light:hover { background: var(--ab-blue-100); }
.btn--ghost { border-color: rgba(255, 255, 255, .4); background: transparent; color: #fff !important; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn--sky { background: var(--ab-sky-300); color: var(--ab-navy-950) !important; }
.btn--sky:hover { background: var(--ab-sky-200); }
.btn--kakao { border-color: #fee500; background: #fee500; color: #191919 !important; }
.btn--kakao:hover { background: #f5dc00; }
.btn--text { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--ab-muted); font-size: 15px; font-weight: 600; }
.btn--danger-text { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--ab-danger); font-size: 15px; font-weight: 700; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.ext { font-size: .9em; }

/* Status badges and labels */
.labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--ab-text-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--open, .badge--confirmed { background: var(--ab-ok-bg); color: var(--ab-ok); }
.badge--received { background: var(--ab-blue-50); color: var(--ab-blue-700); }
.badge--soon, .badge--waitlisted, .badge--draft { background: var(--ab-warn-bg); color: var(--ab-warn); }
.badge--closed, .badge--finished, .badge--cancelled { background: var(--ab-closed-bg); color: var(--ab-closed); }
.tag { display: inline-flex; padding: 1px 8px; border: 1px solid var(--ab-navy-900); border-radius: var(--ab-radius-sm); color: var(--ab-navy-900); font-size: var(--ab-text-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.tag--next { border-color: var(--ab-line-strong); color: var(--ab-muted); }

/* Notice bar (shown while a monthly course is recruiting) */
.notice-bar { border-bottom: 1px solid var(--ab-blue-100); background: var(--ab-blue-50); color: var(--ab-navy-900); font-size: 15px; }
.notice-bar .shell { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; }
.notice-bar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ab-ok); box-shadow: 0 0 0 4px rgba(31, 122, 77, .15); }
.notice-bar a { color: var(--ab-blue-700) !important; font-weight: 700; white-space: nowrap; }

/* Header */
.hd { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ab-line); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
.hd__in { display: flex; align-items: center; gap: 40px; height: var(--ab-header-h); }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--ab-navy-950) !important; }
.brand__sym { width: 34px; height: 34px; }
.wordmark { display: block; width: auto; height: 17px; fill: currentColor; }
.hd__nav { display: flex; gap: 32px; margin-left: 24px; }
.hd__nav a { position: relative; padding: 24px 0; color: var(--ab-body) !important; font-size: 16px; font-weight: 600; }
.hd__nav a:hover { color: var(--ab-blue-700) !important; }
.hd__nav a.is-active { color: var(--ab-ink) !important; font-weight: 700; }
.hd__nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--ab-blue-700); }
.hd__cta { margin-left: auto; }
.hd__aux { margin-left: auto; color: var(--ab-blue-700) !important; font-size: 15px; font-weight: 700; }
.hd__menu { display: none; width: 44px; height: 44px; margin-left: auto; padding: 12px 10px; border: 0; background: none; cursor: pointer; }
.hd__menu span { display: block; height: 2px; margin: 5px 0; background: var(--ab-navy-950); }
.drawer { display: none; }

/* Footer */
.ft { padding-block: 28px 32px; border-top: 1px solid var(--ab-on-dark-line); background: var(--ab-navy-950); color: var(--ab-on-dark-muted); font-size: var(--ab-text-sm); }
.ft__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 40px; align-items: start; }
.ft .wordmark { height: 15px; margin-top: 4px; color: #fff; fill: #fff; }
.ft p { line-height: 1.8; }
.ft nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.ft nav a { color: #fff !important; }
.ft nav a.quiet { color: var(--ab-on-dark-muted) !important; }
.ft nav a:hover { text-decoration: underline; }

/* Flash messages */
.messages { display: grid; gap: 8px; margin-block: 16px; }
.message { padding: 12px 16px; border-radius: var(--ab-radius-md); background: var(--ab-blue-50); color: var(--ab-navy-900); font-size: 15px; font-weight: 600; }
.message--success { background: var(--ab-ok-bg); color: var(--ab-ok); }
.message--warning { background: var(--ab-warn-bg); color: var(--ab-warn); }
.message--error { background: var(--ab-danger-bg); color: var(--ab-danger); }

@media (max-width: 640px) {
    .shell, .narrow { width: calc(100% - 40px); }
    .hide-m { display: none !important; }
    .only-m { display: initial; }
    .notice-bar { font-size: 14px; }
    .notice-bar .shell { justify-content: flex-start; gap: 10px; min-height: 44px; }
    .notice-bar a { margin-left: auto; }
    .hd__in { gap: 12px; }
    .brand__sym { width: 30px; height: 30px; }
    .wordmark { height: 15px; }
    .hd__nav, .hd__cta, .hd__aux { display: none; }
    .hd__menu { display: block; }
    .hd.is-open .drawer { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px 20px 20px; border-bottom: 1px solid var(--ab-line); background: #fff; box-shadow: var(--ab-shadow-md); }
    .drawer a { padding: 14px 0; border-bottom: 1px solid var(--ab-line); font-size: 17px; font-weight: 700; }
    .drawer .btn { margin-top: 16px; border-bottom: 0; }
    .ft__in { grid-template-columns: 1fr; gap: 12px; }
    .ft nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}