:root {
    --navy: #0a1831;
    --navy-2: #11264a;
    --blue: #2367f2;
    --blue-dark: #174dc0;
    --mint: #35d6b4;
    --ink: #172034;
    --muted: #64708a;
    --line: #dfe5ee;
    --soft: #f4f7fb;
    --white: #ffffff;
    --danger: #c63737;
    --success: #157a5a;
    --shadow: 0 22px 60px rgba(7, 24, 55, .15);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    color: var(--ink);
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    background: var(--soft);
    line-height: 1.55;
}

button, input { font: inherit; }

.visitor-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(53, 214, 180, .18), transparent 25rem),
        linear-gradient(145deg, var(--navy) 0 26rem, var(--soft) 26rem 100%);
}

.page-shell {
    width: min(100% - 32px, 720px);
    margin: 0 auto;
    padding: 46px 0 72px;
}

.brand-block { color: var(--white); margin: 0 4px 28px; }

.brand-mark {
    color: var(--white);
    font-weight: 900;
    letter-spacing: .09em;
    font-size: 1.45rem;
}

.brand-mark.dark { color: var(--navy); margin-bottom: 40px; }
.brand-mark.small { font-size: 1.05rem; }
.brand-subtitle { margin-top: 2px; font-size: .72rem; letter-spacing: .23em; opacity: .65; }

.card {
    background: var(--white);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.form-card { padding: clamp(28px, 6vw, 54px); }

.card-heading { margin-bottom: 38px; }
.card-heading h1, .success-card h1, .login-panel h1, .admin-title-row h1 {
    margin: 7px 0 8px;
    color: var(--navy);
    line-height: 1.25;
}
.card-heading h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
.card-heading p, .success-card p, .login-panel > p, .admin-title-row p { margin: 0; color: var(--muted); }

.eyebrow {
    color: var(--blue);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .17em;
}

.field-group { margin-bottom: 24px; }
.field-group label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 750; }
.field-group label span { color: var(--blue); }
.field-group input {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field-group input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(35, 103, 242, .11);
}
.field-group input::placeholder { color: #9ba5b7; }

.field-error { margin: 7px 0 0; color: var(--danger); font-size: .82rem; }
.field-help { margin: 7px 0 0; color: var(--muted); font-size: .8rem; }

.consent-box {
    margin: 34px 0 26px;
    padding: clamp(20px, 5vw, 28px);
    background: #f7f9fd;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.consent-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent-heading h2 { margin: 0; color: var(--navy); font-size: 1.05rem; }
.required-badge {
    padding: 3px 9px;
    color: var(--blue-dark);
    background: #e6edff;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 800;
}

.policy-list { margin: 20px 0 0; }
.policy-list > div { padding: 14px 0; border-top: 1px solid var(--line); }
.policy-list dt { margin-bottom: 4px; color: var(--navy); font-size: .79rem; font-weight: 800; }
.policy-list dd { margin: 0; color: #48546b; font-size: .86rem; }
.legal-note {
    margin: 8px 0 20px;
    padding: 13px 14px;
    color: #556177;
    background: var(--white);
    border-radius: 9px;
    font-size: .77rem;
}

.checkbox-row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: .9rem; font-weight: 700; }
.checkbox-row input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--blue); flex: 0 0 auto; }

.primary-button {
    width: 100%;
    min-height: 55px;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(35, 103, 242, .24);
    font-weight: 800;
    cursor: pointer;
}
.primary-button:hover { filter: brightness(.96); }
.primary-button:focus-visible, .text-button:focus-visible, a:focus-visible {
    outline: 3px solid rgba(53, 214, 180, .85);
    outline-offset: 3px;
}
.form-footnote { margin: 12px 0 0; color: #8791a4; text-align: center; font-size: .76rem; }

.success-shell { padding-top: 12vh; }
.success-card { padding: clamp(36px, 8vw, 70px); text-align: center; }
.success-icon {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 25px;
    color: var(--white);
    background: linear-gradient(135deg, var(--mint), #18a77f);
    border-radius: 50%;
    place-items: center;
    font-size: 2rem;
    font-weight: 900;
}

.admin-login-page {
    min-height: 100vh;
    background: linear-gradient(125deg, var(--navy) 0 48%, #e9eef6 48% 100%);
}
.login-shell { display: grid; min-height: 100vh; padding: 28px; place-items: center; }
.login-panel {
    width: min(100%, 460px);
    padding: clamp(32px, 7vw, 54px);
    background: var(--white);
    border-radius: 22px;
    box-shadow: var(--shadow);
}
.login-panel h1 { font-size: 1.75rem; }
.login-panel > p { margin-bottom: 30px; }
.alert { margin: 0 0 22px; padding: 12px 14px; border-radius: 9px; font-size: .86rem; }
.error-alert { color: #9e2f2f; background: #fff0f0; }
.success-alert { color: var(--success); background: #eaf8f3; }

.admin-page { min-height: 100vh; background: #eff3f8; }
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 0 max(24px, calc((100vw - 1240px) / 2));
    color: var(--white);
    background: var(--navy);
}
.admin-header > div { display: flex; align-items: center; gap: 18px; }
.admin-header span { color: #aab6cc; font-size: .82rem; }
.text-button { color: #d9e2f2; background: none; border: 0; cursor: pointer; }
.admin-main { width: min(100% - 40px, 1240px); margin: 0 auto; padding: 48px 0 64px; }
.admin-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.admin-title-row h1 { font-size: 2rem; }
.count-card { min-width: 130px; padding: 15px 18px; text-align: right; background: var(--white); border-radius: 12px; }
.count-card span { display: block; color: var(--muted); font-size: .72rem; }
.count-card strong { color: var(--blue); font-size: 1.55rem; }
.table-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 35px rgba(18, 35, 66, .07); }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 980px; border-collapse: collapse; }
th, td { padding: 15px 16px; text-align: left; border-bottom: 1px solid #e8ecf2; font-size: .84rem; }
th { color: #5f6b80; background: #f8f9fc; font-size: .75rem; letter-spacing: .02em; }
tbody tr:hover { background: #f9fbff; }
.nowrap { white-space: nowrap; }
.policy-version { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .74rem; }
.empty-state { padding: 70px 16px; color: var(--muted); text-align: center; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
.pagination a { color: var(--blue); font-weight: 700; text-decoration: none; }
.pagination span { color: var(--muted); font-size: .85rem; }
.admin-notice { margin: 16px 4px 0; color: #778298; font-size: .78rem; }

@media (max-width: 700px) {
    .visitor-page { background: linear-gradient(160deg, var(--navy) 0 18rem, var(--soft) 18rem 100%); }
    .page-shell { width: min(100% - 20px, 720px); padding-top: 28px; }
    .card { border-radius: 18px; }
    .form-card { padding: 25px 20px 32px; }
    .admin-title-row { align-items: stretch; flex-direction: column; }
    .count-card { text-align: left; }
    .admin-header { padding: 0 18px; }
    .admin-header span { display: none; }
    .admin-main { width: min(100% - 22px, 1240px); padding-top: 30px; }
}