:root {
    /* 앱 전체에서 자주 조정하는 색상·타이포·컨트롤 토큰 */
    --app-canvas: #f5f7fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f7f9fc;
    --app-text: #172033;
    --app-text-strong: #172033;
    --app-muted: #667189;
    --app-border: #dde3ec;
    /* 버튼·검색·입력·선택 컨트롤의 기본 테두리는 이 값에서 함께 조정한다. */
    --app-control-border: #dde3ec;
    --app-control-hover-border: #7baabd;
    --app-primary: #2563eb;
    --app-primary-strong: #1d4ed8;
    --app-primary-soft: #eaf1ff;
    --app-danger: #b42335;
    --app-danger-border: #d9a8ad;
    --app-danger-soft: #fff1f2;
    --app-success: #17705a;
    --app-success-soft: #eefbf4;
    --app-warning: #72510b;
    --app-warning-soft: #fff8df;
    --app-page-background: linear-gradient(145deg, #e7f7fb 0%, #f7fbff 48%, #e9f0ff 100%);
    --font-size-page-title: clamp(2rem, 6vw, 3.2rem);
    --font-size-section-title: 1.05rem;
    --font-size-body: 1rem;
    --font-size-label: 0.9rem;
    --font-size-help: 0.86rem;
    --font-size-caption: 0.82rem;
    --font-size-button: 1rem;
    --control-target-size: 44px;
    --control-compact-size: 40px;
    --radius-control: 10px;
    --radius-panel: 14px;
    --space-section: 24px;
    --button-inline-padding: 18px;
    --focus-ring-color: #102a43;
    --site-header-height: 72px;
    --mobile-navigation-height: 68px;
    --mobile-navigation-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--app-text);
    background: var(--app-canvas);
}

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    /* 스크롤은 유지하고 더블 탭·핀치 확대를 제한한다. */
    touch-action: pan-x pan-y;
}

body {
    min-height: 100vh;
    margin: 0;
    font-size: var(--font-size-body);
    background: var(--app-page-background);
}

button,
input,
select,
textarea {
    font: inherit;
}

.page-shell {
    min-height: calc(100vh - var(--site-header-height));
    min-height: calc(100svh - var(--site-header-height));
    display: grid;
    place-items: center;
    padding: 24px;
}

.card {
    min-width: 0;
    width: min(100%, 680px);
    padding: clamp(28px, 6vw, 56px);
    border: 1px solid rgba(26, 94, 130, 0.14);
    border-radius: calc(var(--radius-panel) + 10px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 70px rgba(33, 91, 122, 0.13);
    overflow-wrap: anywhere;
}

.auth-card {
    width: min(100%, 440px);
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: var(--site-header-height);
    border-bottom: 1px solid rgba(26, 94, 130, 0.12);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 18px rgba(33, 91, 122, 0.06);
    backdrop-filter: blur(14px);
}

.site-header-inner {
    width: min(100%, 1200px);
    min-height: var(--site-header-height);
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-logo {
    display: inline-flex;
    width: 132px;
    height: 56px;
    min-height: var(--control-target-size);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
}

.site-logo-image {
    display: block;
    width: 100%;
    /* 가로형 로고를 너비에 맞추고, 위아래의 흰 여백은 부모 영역에서 정리한다. */
    height: auto;
}

.app-navigation {
    min-width: 0;
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.app-navigation > a {
    min-height: var(--control-target-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 750;
    white-space: nowrap;
    color: var(--app-muted);
    text-decoration: none;
}

.app-navigation > a:hover,
.app-navigation > a.is-active {
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.app-navigation-icon {
    width: 22px;
    height: 22px;
    display: none;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-navigation-label {
    display: inline;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.site-logo + .site-header-actions {
    margin-left: auto;
}

.site-header-actions form {
    margin: 0;
}

.header-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    padding: 7px 12px;
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    color: var(--app-muted);
    background: var(--app-surface);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 750;
}

.header-settings:hover,
.header-settings[aria-current="page"] {
    border-color: var(--app-control-hover-border);
    color: var(--app-primary-strong);
    background: var(--app-surface-soft);
}

.header-settings svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.language-switcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

.language-switcher-options {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    background: var(--app-surface);
}

.language-switcher-options form {
    margin: 0;
}

.language-option {
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    padding: 6px 9px;
    border: 0;
    color: var(--app-primary-strong);
    background: transparent;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
}

.language-option.is-active {
    color: var(--app-surface);
    background: var(--app-primary);
}

.language-option:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: -3px;
}

.language-option:disabled {
    cursor: wait;
    opacity: 0.65;
}

.language-switcher-status {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    width: max-content;
    max-width: min(280px, 80vw);
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    color: var(--app-muted);
    background: var(--app-surface);
    box-shadow: 0 8px 24px rgba(33, 91, 122, 0.12);
    text-align: right;
    font-size: 0.85rem;
}

h1 {
    margin: 12px 0;
    color: var(--app-text-strong);
    font-size: var(--font-size-page-title);
    line-height: 1.12;
}

.status-code {
    margin: 0;
    color: var(--app-primary);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.lead,
.muted {
    color: var(--app-muted);
    line-height: 1.65;
}

.stack {
    min-width: 0;
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.stack > * {
    min-width: 0;
}

label {
    margin-top: 8px;
    font-weight: 700;
}

input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
select {
    min-height: var(--control-target-size);
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    color: var(--app-text);
    background: var(--app-surface);
}

input[type="date"],
input[type="time"] {
    display: block;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    min-inline-size: 0;
    text-align: left;
}

/* iOS WebKit calculates padded native date/time controls wider than width: 100%. */
@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="time"] {
        width: -webkit-fill-available;
        inline-size: -webkit-fill-available;
    }
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--app-primary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.form-card {
    width: min(100%, 760px);
}

.form-section {
    min-width: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 20px;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-panel);
}

.form-section legend {
    padding: 0 8px;
    color: var(--app-text-strong);
    font-size: var(--font-size-section-title);
    font-weight: 800;
}

[data-parent-mode-panel][hidden],
[data-target-scope-panel][hidden] {
    display: none;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.choice-card {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    background: var(--app-surface);
    cursor: pointer;
}

.choice-card input {
    width: auto;
    margin: 0;
}

.choice-card:has(input:focus-visible) {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.optional {
    color: var(--app-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.alert p,
.field-error p {
    margin: 0;
}

.field-help,
.field-error,
.field-success,
.password-match-status {
    margin: 2px 0 0;
    font-size: var(--font-size-help);
    line-height: 1.45;
}

.field-help {
    color: var(--app-muted);
}

.field-error {
    color: var(--app-danger);
}

.field-success {
    color: var(--app-success);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 28px;
}

.actions form {
    margin: 0;
}

.auth-alternative {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--app-border);
    text-align: center;
}

.auth-alternative p {
    margin: 0 0 10px;
}

.auth-alternative .button.full {
    margin-top: 0;
}

.button {
    display: inline-flex;
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    align-items: center;
    justify-content: center;
    padding: 10px var(--button-inline-padding);
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    font-size: var(--font-size-button);
    font-weight: 700;
    text-decoration: none;
}

.button.primary {
    color: var(--app-surface);
    background: var(--app-primary);
}

.button.secondary {
    color: var(--app-primary-strong);
    background: var(--app-surface);
}

.button.danger {
    color: var(--app-danger);
    border-color: var(--app-danger-border);
    background: var(--app-danger-soft);
}

.button:disabled,
.button[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.65;
}

.button.full {
    width: 100%;
    margin-top: 16px;
}

.site-logo:focus-visible,
.button:focus-visible,
.app-navigation a:focus-visible,
.header-settings:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 3px;
}

.alert {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: var(--radius-control);
    line-height: 1.5;
}

.alert.error {
    color: var(--app-danger);
    background: var(--app-danger-soft);
}

.alert.success {
    color: var(--app-success);
    background: var(--app-success-soft);
}

.alert.warning {
    color: var(--app-warning);
    background: var(--app-warning-soft);
}

.secret-label {
    font-weight: 800;
}

.secret-code {
    overflow-wrap: anywhere;
    padding: 14px;
    border-radius: 8px;
    color: var(--app-text-strong);
    background: var(--app-primary-soft);
    font-size: 1.05rem;
    user-select: all;
}

.dashboard-card {
    width: min(100%, 900px);
}

.child-selector {
    /* 자녀 이름은 일반 본문 크기를 변경해도 유지한다. */
    --child-selector-name-size: 0.95rem;
    margin-top: 28px;
}

.child-selector-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    list-style: none;
}

.child-selector-list li {
    min-width: 0;
    flex: 0 0 auto;
}

.child-selector-current,
.child-selector-link {
    display: block;
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    max-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--app-control-border);
    border-radius: 999px;
    font-size: var(--child-selector-name-size);
    font-weight: 700;
}

.child-selector-current {
    width: fit-content;
    max-width: min(100%, 240px);
    overflow-wrap: anywhere;
}

.child-selector-link {
    overflow: hidden;
    color: var(--app-primary-strong);
    background: var(--app-surface);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.child-selector-link:hover {
    border-color: var(--app-primary);
}

.child-selector-link:focus-visible {
    border-color: var(--app-primary);
    outline: 3px solid var(--focus-ring-color);
    outline-offset: -3px;
}

.child-selector-current,
.child-selector-link.is-active {
    border-color: var(--app-primary);
    color: var(--app-surface);
    background: var(--app-primary);
}

@media (max-width: 767px) {
    :root {
        --site-header-height: 60px;
    }

    .site-header {
        backdrop-filter: none;
    }

    .site-header-inner {
        gap: 8px;
        padding: 0 12px;
    }

    .site-logo {
        width: 112px;
        height: 48px;
    }

    .site-header-actions {
        gap: 6px;
        margin-left: auto;
    }

    .header-settings {
        padding: 6px 9px;
        font-size: 0.78rem;
    }

    .app-navigation {
        position: fixed;
        z-index: 60;
        right: 16px;
        bottom: var(--mobile-navigation-bottom);
        left: 16px;
        min-height: var(--mobile-navigation-height);
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 6px;
        border: 1px solid var(--app-border);
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 28px rgba(23, 32, 51, 0.12), 0 2px 6px rgba(23, 32, 51, 0.04);
        backdrop-filter: blur(14px);
    }

    .app-navigation > a {
        min-width: 0;
        min-height: 54px;
        flex-direction: column;
        gap: 2px;
        padding: 4px 3px 3px;
        border-radius: 20px;
        text-align: center;
        white-space: normal;
    }

    .app-navigation-icon {
        display: block;
    }

    .app-navigation-label {
        display: block;
        overflow: hidden;
        max-width: 100%;
        color: inherit;
        font-size: 0.66rem;
        font-weight: 680;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-navigation > a:hover,
    .app-navigation > a.is-active {
        color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    .app-navigation > a.is-active .app-navigation-icon {
        stroke-width: 2.25;
        transform: translateY(-1px);
    }

    body:has(.app-navigation) .page-shell {
        padding-bottom: calc(32px + var(--mobile-navigation-height) + var(--mobile-navigation-bottom));
    }

    .page-shell {
        place-items: start center;
        padding: 20px 14px;
    }

    .card {
        border-radius: 18px;
    }

    .actions,
    .actions .button,
    .actions form {
        width: 100%;
    }

    .choice-grid {
        grid-template-columns: 1fr;
    }

    .form-section {
        padding: 16px 12px;
    }

    .form-card {
        padding-inline: 20px;
    }

}

@media (max-width: 390px) {
    .page-shell {
        min-width: 0;
        place-items: start center;
        padding: 12px;
    }

    .card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .form-card {
        padding-inline: 12px;
    }

    .form-section {
        padding: 16px;
        padding-inline: 10px;
    }

}

/* 관리자와 학부모 화면이 공유하는 기본 UI. 역할별 메뉴 배치는 별도로 둔다. */
.admin-app-page,
.parent-app-page {
    /* 공통 기본값과 실제로 다른 값만 재정의한다. */
    --font-size-page-title: clamp(1.65rem, 3vw, 2rem);
    --font-size-body: 0.95rem;
    --font-size-label: 0.88rem;
    --font-size-caption: 0.79rem;
    --control-compact-size: 38px;
    --radius-panel: 12px;
    --focus-ring-color: #1748a8;
    --site-header-height: 64px;
}

:is(.admin-app-page, .parent-app-page) .site-header {
    min-height: var(--site-header-height);
    border-bottom-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: none;
    backdrop-filter: none;
}

:is(.admin-app-page, .parent-app-page) h1 {
    margin: 0;
    color: var(--app-text);
    font-size: var(--font-size-page-title);
    font-weight: 700;
    letter-spacing: -0.035em;
}

:is(.admin-app-page, .parent-app-page) .button {
    gap: 8px;
    border-radius: var(--radius-control);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

:is(.admin-app-page, .parent-app-page) .button.primary {
    color: var(--app-surface);
    background: var(--app-primary);
}

:is(.admin-app-page, .parent-app-page) .button.primary:hover {
    background: var(--app-primary-strong);
}

:is(.admin-app-page, .parent-app-page) .button.secondary {
    color: var(--app-primary-strong);
    background: var(--app-surface);
}

:is(.admin-app-page, .parent-app-page) .button.secondary:hover {
    border-color: var(--app-border);
    background: var(--app-primary-soft);
}

:is(.admin-app-page, .parent-app-page) .button.danger {
    border-color: var(--app-danger-border);
    color: var(--app-danger);
    background: var(--app-surface);
}

:is(.admin-app-page, .parent-app-page) .button.danger:hover {
    border-color: var(--app-danger);
    background: var(--app-danger-soft);
}

:is(.admin-app-page, .parent-app-page) .button.compact-button {
    min-height: var(--control-compact-size);
    padding: 7px 12px;
    font-size: var(--font-size-label);
}

/* 페이지 제목과 주요 동작은 화면별 크기 예외 없이 이 규칙을 공유한다. */
:is(.admin-app-page, .parent-app-page) :is(.admin-page-heading, .app-page-heading) {
    min-height: var(--control-target-size);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

:is(.admin-app-page, .parent-app-page) :is(.admin-page-heading, .app-page-heading) > .button {
    flex: 0 0 auto;
    max-width: 100%;
}

:is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions),
:is(.admin-app-page, .parent-app-page) :is(.admin-form-actions, .app-form-actions) {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--app-border);
}

:is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions) {
    margin-top: var(--space-section);
}

:is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions) > form {
    display: flex;
    margin: 0;
}

:is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions) .button,
:is(.admin-app-page, .parent-app-page) :is(.admin-form-actions, .app-form-actions) .button {
    min-width: 104px;
}

.parent-app-page {
    color: var(--app-text);
    background: var(--app-canvas);
}

.parent-app-page .page-shell {
    min-width: 0;
    display: block;
    padding: 24px 30px 42px;
}

.parent-app-page .app-page-heading {
    min-height: 0;
}

:is(.admin-app-page, .parent-app-page) .app-page-content {
    min-width: 0;
    width: min(100%, 1060px);
    margin: 0 auto;
    overflow-wrap: anywhere;
}

/* 패널의 기본 표면을 공유하고, 모바일 여백은 각 화면에서 유지한다. */
.app-panel,
.admin-dashboard-card,
.swim-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-panel);
    background: var(--app-surface);
}

.parent-app-page h2 {
    font-size: var(--font-size-section-title);
}

.parent-app-page .child-selector {
    margin: 8px 0 16px;
}

.parent-app-page .child-selector-list {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
}

.parent-app-page .form-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.parent-app-page select {
    min-width: 0;
    padding: 9px 10px;
}

.parent-app-page :is(a, button, input, select) {
    scroll-margin-top: calc(var(--site-header-height) + 16px);
}

@media (max-width: 767px) {
    :is(.admin-app-page, .parent-app-page) {
        --font-size-page-title: 1.45rem;
        --control-compact-size: var(--control-target-size);
        --site-header-height: 60px;
    }

    :is(.admin-app-page, .parent-app-page) :is(.admin-page-heading, .app-page-heading) {
        align-items: center;
        flex-direction: row;
        gap: 12px;
    }

    :is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions),
    :is(.admin-app-page, .parent-app-page) :is(.admin-form-actions, .app-form-actions) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions) .button,
    :is(.admin-app-page, .parent-app-page) :is(.admin-form-actions, .app-form-actions) .button {
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* 목록·돌아가기 링크는 관리 동작 다음 줄의 같은 위치에 둔다. */
    :is(.admin-app-page, .parent-app-page) :is(.admin-page-actions, .app-page-actions) > a:last-child,
    :is(.admin-app-page, .parent-app-page) :is(.admin-form-actions, .app-form-actions) > :only-child {
        grid-column: 1 / -1;
    }

    .parent-app-page .page-shell {
        padding: 16px 12px calc(28px + var(--mobile-navigation-height) + var(--mobile-navigation-bottom));
    }

    body.parent-app-page:has(.app-navigation) .page-shell {
        padding-bottom: calc(28px + var(--mobile-navigation-height) + var(--mobile-navigation-bottom));
    }

    .app-panel {
        padding: 18px 16px;
    }

    .parent-app-page :is(input, select) {
        font-size: 16px;
    }

    .parent-app-page :is(a, button, input, select) {
        scroll-margin-bottom: calc(var(--mobile-navigation-height) + var(--mobile-navigation-bottom) + 24px);
    }
}