/* ============================================================
   Codewave — Light Theme
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --primary-dark: #3730a3;
    --accent-color: #d97706;
    --text-color: #1e293b;
    --text-light: #475569;
    --text-lighter: #94a3b8;
    --bg-color: #f8fafc;
    --bg-light: #ffffff;
    --bg-dark: #f1f5f9;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --error-color: #dc2626;
    --success-color: #16a34a;
    --warning-color: #d97706;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);
    --radius: 14px;
    --radius-sm: 10px;
    --max-width: 1160px;
    --sidebar-width: 232px;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-color);
    background-color: var(--bg-color);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
}

/* ============================================================
   App shell + Sidebar
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.01em;
    padding: 6px 10px 20px;
}

.sidebar-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-light);
    transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
    background: var(--bg-dark);
    color: var(--text-color);
}

.sidebar-link.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 700;
}

.sidebar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    flex-shrink: 0;
}

.sidebar-link.active .sidebar-dot {
    opacity: 1;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sidebar-auth {
    display: block;
    text-align: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sidebar-auth.primary {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
}

.sidebar-auth.primary:hover {
    background: var(--primary-hover);
}

.sidebar-auth.secondary {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-color);
}

.sidebar-auth.secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.app-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    line-height: 1.4;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
    background: var(--bg-light);
    color: var(--text-light);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-light);
}

.btn-danger {
    background: #fff1f2;
    color: var(--error-color);
    border-color: #fecdd3;
}

.btn-danger:hover {
    background: var(--error-color);
    color: #fff;
    border-color: var(--error-color);
}

.btn-small {
    padding: 7px 14px;
    font-size: 13px;
}

/* ============================================================
   Sections
   ============================================================ */

.section {
    padding: 64px 0;
}

.section-soft {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 16px;
}

.section-head {
    margin-bottom: 36px;
}

.section-head-copy {
    color: var(--text-light);
    font-size: 15px;
}

.home-section-intro {
    max-width: 720px;
    margin-bottom: 40px;
}

.home-section-intro p {
    color: var(--text-light);
    font-size: 16px;
}

/* ============================================================
   Hero (home)
   ============================================================ */

.hero {
    padding: 40px 0 8px;
}

.hero-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 380px;
    display: flex;
    align-items: stretch;
}

.hero-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.5) 48%, rgba(15, 23, 42, 0.12) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: 56px;
    max-width: 560px;
    color: #fff;
}

.hero-kicker {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}

.hero-content h1 {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    line-height: 1.15;
}

.hero-content p {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 28px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-buttons .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.hero-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hero-mobile-title,
.hero-mobile-summary {
    display: none;
}

/* ============================================================
   Feature cards
   ============================================================ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 28px 26px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #c7d2fe;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.feature-icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
}

.feature-card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-color);
}

.feature-card p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.7;
}

/* ============================================================
   Cards (activities)
   ============================================================ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #c7d2fe;
}

.card-clickable {
    cursor: pointer;
}

.card-image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.card-image-placeholder {
    width: 100%;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    color: var(--text-lighter);
    font-size: 28px;
}

.card-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.45;
}

.card-action-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.empty-state {
    text-align: center;
    padding: 72px 24px;
    color: var(--text-lighter);
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
}

.empty-state p {
    font-size: 15px;
    margin-bottom: 6px;
}

/* ============================================================
   About / Members hero
   ============================================================ */

.about-hero {
    padding: 88px 0 72px;
    text-align: center;
    background:
        radial-gradient(560px 220px at 50% 0%, rgba(79, 70, 229, 0.08), transparent),
        var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.about-hero h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-color);
    margin-bottom: 14px;
}

.about-hero p {
    font-size: 16px;
    color: var(--text-light);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
}

.about-section {
    padding: 56px 0;
}

.about-section + .about-section {
    border-top: 1px solid var(--border-color);
}

.about-content {
    max-width: 840px;
    margin: 0 auto;
}

.about-content h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
}

.about-content h2 svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.about-content > p {
    font-size: 15.5px;
    color: var(--text-light);
    line-height: 1.85;
    margin-bottom: 14px;
}

.about-content strong {
    color: var(--text-color);
}

.info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 26px 28px;
}

.info-card p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.9;
}

/* ============================================================
   Member cards
   ============================================================ */

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

.member-grid-staff {
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    justify-content: center;
}

.member-card-link {
    display: block;
}

.member-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 30px 22px 26px;
    text-align: center;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.member-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #c7d2fe;
}

.member-card-staff {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--card-bg) 45%);
}

.member-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    overflow: hidden;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-avatar-large {
    width: 84px;
    height: 84px;
    font-size: 32px;
}

.member-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.member-role {
    font-size: 13px;
    color: var(--text-lighter);
    margin-bottom: 12px;
}

.member-bio-snippet {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 14px;
}

.member-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.member-badge.president {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.member-badge.member {
    background: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid #c7d2fe;
}

/* ============================================================
   Board
   ============================================================ */

.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.board-header h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.board-shell {
    max-width: 880px;
}

.board-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.board-hero h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 6px 0 8px;
}

.board-hero p {
    color: var(--text-light);
    font-size: 15px;
}

.editor-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.post-list-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.post-list-head {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-light);
}

.post-list {
    display: flex;
    flex-direction: column;
}

.post-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    transition: background 0.15s;
}

.post-item + .post-item {
    border-top: 1px solid var(--border-color);
}

.post-item:hover {
    background: var(--bg-dark);
}

.post-number {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-info {
    min-width: 0;
}

.post-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-meta {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--text-lighter);
}

/* ============================================================
   Post detail
   ============================================================ */

.post-detail-shell {
    padding: 56px 28px;
}

.post-detail {
    max-width: 800px;
    margin: 0 auto;
}

.post-header-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 30px 34px;
    margin-bottom: 20px;
}

.post-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.post-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}

.post-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.post-header-card h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.4;
    margin-bottom: 14px;
}

.post-author-info {
    display: flex;
    align-items: center;
}

.post-author-block {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13.5px;
}

.post-author {
    font-weight: 700;
    color: var(--text-light);
}

.post-date {
    color: var(--text-lighter);
}

.post-content-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 34px;
    margin-bottom: 24px;
}

.detail-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================================
   Markdown body
   ============================================================ */

.markdown-body,
.activity-content {
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--text-light);
    word-break: break-word;
}

.markdown-body h1, .activity-content h1,
.markdown-body h2, .activity-content h2,
.markdown-body h3, .activity-content h3,
.markdown-body h4, .activity-content h4 {
    color: var(--text-color);
    font-weight: 700;
    margin: 28px 0 12px;
    line-height: 1.4;
}

.markdown-body h1, .activity-content h1 { font-size: 24px; }
.markdown-body h2, .activity-content h2 { font-size: 20px; }
.markdown-body h3, .activity-content h3 { font-size: 17px; }
.markdown-body h4, .activity-content h4 { font-size: 16px; }

.markdown-body h1:first-child, .activity-content h1:first-child,
.markdown-body h2:first-child, .activity-content h2:first-child,
.markdown-body h3:first-child, .activity-content h3:first-child {
    margin-top: 0;
}

.markdown-body p, .activity-content p {
    margin-bottom: 14px;
}

.markdown-body strong, .activity-content strong {
    color: var(--text-color);
}

.markdown-body a, .activity-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-body ul, .activity-content ul,
.markdown-body ol, .activity-content ol {
    padding-left: 24px;
    margin-bottom: 14px;
}

.markdown-body ul, .activity-content ul { list-style: disc; }
.markdown-body ol, .activity-content ol { list-style: decimal; }

.markdown-body li, .activity-content li {
    margin-bottom: 6px;
}

.markdown-body code, .activity-content code {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 5px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--primary-dark);
}

.markdown-body pre, .activity-content pre {
    background: #0f172a;
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.markdown-body pre code, .activity-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: #e2e8f0;
}

.markdown-body blockquote, .activity-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding: 4px 0 4px 18px;
    color: var(--text-lighter);
    margin: 16px 0;
}

/* ============================================================
   Activity detail
   ============================================================ */

.activity-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 56px 28px;
}

.activity-header {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.activity-header h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin-bottom: 12px;
}

.activity-meta {
    font-size: 13.5px;
    color: var(--text-lighter);
}

.activity-image {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 32px;
    box-shadow: var(--shadow-md);
}

.activity-detail .detail-actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   Forms
   ============================================================ */

.form-section {
    max-width: 560px;
    margin: 0 auto;
    padding: 56px 28px;
}

.form-section h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    font-family: inherit;
    font-size: 15px;
    color: var(--text-color);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-lighter);
}

.form-group textarea {
    resize: vertical;
    line-height: 1.7;
}

.form-group small {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--text-lighter);
}

.form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-dark);
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
}

.inline-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 28px;
}

/* Upload dropzone */
.upload-dropzone {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1.5px dashed #c7d2fe;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.upload-dropzone:hover {
    border-color: var(--primary-color);
}

.upload-dropzone svg {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.upload-dropzone span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-light);
    font-weight: 400;
}

.upload-dropzone strong {
    font-size: 14px;
    color: var(--text-color);
}

.upload-input {
    display: none;
}

.file-meta {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-lighter);
}

/* ============================================================
   Editor pages
   ============================================================ */

.editor-shell {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 28px;
}

.editor-header {
    margin-bottom: 28px;
}

.editor-header h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 6px 0 8px;
}

.editor-header p {
    color: var(--text-light);
    font-size: 15px;
}

.editor-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.editor-actions {
    justify-content: flex-end;
}

.editor-delete {
    margin-top: 24px;
    padding: 24px 28px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: var(--radius);
}

.editor-delete h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--error-color);
    margin-bottom: 6px;
}

.editor-delete p {
    font-size: 13.5px;
    color: var(--text-light);
    margin-bottom: 14px;
}

/* ============================================================
   Admin
   ============================================================ */

.admin-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 56px 28px;
}

.admin-table-header h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.admin-table-header h2 {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-table-desc {
    color: var(--text-light);
    font-size: 14.5px;
}

.admin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
}

.admin-table {
    width: 100%;
    margin-top: 14px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.admin-table th {
    text-align: left;
    padding: 14px 18px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-light);
    white-space: nowrap;
}

.admin-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--bg-dark);
}

.admin-inline-link {
    color: var(--text-color);
}

.admin-inline-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.admin-empty {
    margin-top: 16px;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-lighter);
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    font-size: 14.5px;
}

/* ============================================================
   Toasts
   ============================================================ */

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 48px));
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.25s ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast-hide {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.3s;
}

.toast-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
}

.toast-success .toast-icon { color: var(--success-color); }
.toast-error .toast-icon { color: var(--error-color); }
.toast-info .toast-icon { color: var(--primary-color); }

.toast-message {
    font-size: 14px;
    color: var(--text-color);
    flex: 1;
}

.toast-close {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-lighter);
    cursor: pointer;
    padding: 0;
}

.toast-close:hover {
    color: var(--text-color);
}

.toast-close svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Auth pages (master login)
   ============================================================ */

.auth-body {
    background: var(--bg-color);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.auth-waves {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    pointer-events: none;
    z-index: 0;
}

.auth-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
}

.auth-wave path { fill: rgba(79, 70, 229, 0.06); }
.auth-wave-2 path { fill: rgba(79, 70, 229, 0.04); }
.auth-wave-3 path { fill: rgba(148, 163, 184, 0.12); }

.auth-back-btn {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-light);
    transition: color 0.15s, border-color 0.15s;
}

.auth-back-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.auth-back-btn svg {
    width: 16px;
    height: 16px;
}

.auth-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: var(--shadow-lg);
}

.auth-card .form-section {
    max-width: none;
    padding: 0;
    margin: 0;
}

.auth-card h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    padding: 44px 0 24px;
    margin-top: 48px;
}

.footer-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 40px;
    align-items: start;
    padding-bottom: 28px;
}

.footer-logo .logo-image {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.footer-info p {
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.8;
}

.footer-info p:first-child {
    font-weight: 700;
    color: var(--text-color);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    font-size: 13.5px;
    color: var(--text-light);
    transition: color 0.15s;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    font-size: 12.5px;
    color: var(--text-lighter);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        z-index: 1000;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
    }

    .sidebar-brand {
        padding: 0 8px 0 0;
        font-size: 16px;
        flex-shrink: 0;
    }

    .sidebar-logo {
        width: 28px;
        height: 28px;
    }

    .sidebar-nav {
        flex-direction: row;
        gap: 2px;
        flex: 1;
    }

    .sidebar-link {
        padding: 8px 12px;
        font-size: 14px;
        white-space: nowrap;
    }

    .sidebar-dot {
        display: none;
    }

    .sidebar-footer {
        flex-direction: row;
        border-top: none;
        padding-top: 0;
        flex-shrink: 0;
    }

    .sidebar-auth {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 720px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 44px 0;
    }

    .section-title {
        font-size: 23px;
    }

    .hero {
        padding: 20px 0 4px;
    }

    .hero-banner {
        min-height: 0;
    }

    .hero-banner::after {
        display: none;
    }

    .hero-banner-image {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .hero-content {
        display: none;
    }

    .hero-mobile-title {
        display: block;
        position: absolute;
        top: 16px;
        left: 20px;
        z-index: 1;
    }

    .hero-mobile-title h1 {
        font-size: 26px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 2px 10px rgba(15, 23, 42, 0.5);
        letter-spacing: 0.02em;
    }

    .hero-mobile-summary {
        display: block;
        margin-top: 16px;
    }

    .hero-mobile-summary p {
        font-size: 14.5px;
        color: var(--text-light);
        line-height: 1.75;
    }

    .about-hero {
        padding: 56px 0 48px;
    }

    .about-hero h1 {
        font-size: 30px;
    }

    .about-section {
        padding: 40px 0;
    }

    .about-content h2 {
        font-size: 20px;
    }

    .post-detail-shell,
    .activity-detail,
    .editor-shell,
    .form-section,
    .admin-section {
        padding: 36px 20px;
    }

    .post-header-card,
    .post-content-card,
    .editor-card {
        padding: 22px;
    }

    .activity-header h1 {
        font-size: 24px;
    }

    .inline-inputs {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Admin table → stacked cards */
    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tr {
        border-bottom: 1px solid var(--border-color);
        padding: 14px 16px;
    }

    .admin-table tr:last-child {
        border-bottom: none;
    }

    .admin-table td {
        padding: 4px 0;
        border-bottom: none;
    }

    .admin-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-lighter);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }

    .toast-container {
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
    }
}

/* One-page public experience */
:root { --primary-color:#3978ff; --primary-hover:#2161e9; --primary-light:#eaf1ff; --primary-dark:#1847bd; --accent-color:#3978ff; --text-color:#0b1225; --text-light:#46526b; --text-lighter:#8290aa; --bg-color:#f6f9ff; --bg-light:#fff; --bg-dark:#edf3ff; --card-bg:#fff; --border-color:#dbe5f5; --max-width:1200px; }
html { scroll-behavior:smooth; scroll-padding-top:84px; } body { background:#f6f9ff; color:#0b1225; font-family:'Noto Sans KR',sans-serif; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(246,249,255,.82); backdrop-filter:blur(18px); border-bottom:1px solid rgba(219,229,245,.82); }.site-header-inner,.site-footer-inner,.landing-wrap { width:min(1200px,calc(100% - 64px)); margin:0 auto; }.site-header-inner { height:76px; display:flex; align-items:center; justify-content:space-between; }.wordmark { display:inline-flex; align-items:center; gap:10px; font:700 22px/1 'Space Grotesk',sans-serif; letter-spacing:-.055em; color:#0b1225; }.wordmark-mark { display:inline-flex; align-items:end; gap:2px; width:22px; height:19px; }.wordmark-mark i { display:block; width:5px; border-radius:10px; background:#3978ff; transform:skewX(-18deg); }.wordmark-mark i:nth-child(1){height:8px;opacity:.55}.wordmark-mark i:nth-child(2){height:14px}.wordmark-mark i:nth-child(3){height:19px;opacity:.75}.site-nav{display:flex;align-items:center;gap:30px}.site-nav a{font-size:14px;font-weight:600;color:#56627a;transition:color .2s}.site-nav a:hover{color:#3978ff}
.landing-hero{position:relative;overflow:hidden;background:#0b1225;color:#fff;min-height:650px;isolation:isolate}.hero-layout{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;position:relative;z-index:1}.hero-glow{position:absolute;border-radius:50%;pointer-events:none}.hero-glow-one{width:620px;height:620px;right:-200px;top:-220px;background:radial-gradient(circle,rgba(47,119,255,.48) 0%,rgba(47,119,255,.09) 42%,transparent 69%)}.hero-glow-two{width:460px;height:460px;left:34%;bottom:-360px;background:rgba(40,90,255,.32);filter:blur(90px)}.hero-copy{padding:76px 0}.hero-index,.section-number{margin:0 0 27px;color:#73a1ff;font:600 12px/1 'Space Grotesk',sans-serif;letter-spacing:.16em}.hero-copy h1{margin:0;max-width:650px;font-size:clamp(46px,5.2vw,78px);font-weight:800;letter-spacing:-.078em;line-height:1.13}.hero-copy h1 em{color:#70a2ff;font-style:normal}.hero-description{max-width:480px;margin:28px 0 34px;color:#b4c1d9;font-size:16px;line-height:1.9;word-break:keep-all}.hero-cta{display:inline-flex;align-items:center;gap:32px;padding:14px 0;color:#fff;border-bottom:1px solid #6c9cff;font-size:14px;font-weight:700}.hero-cta span{font-size:18px;color:#70a2ff;transition:transform .2s}.hero-cta:hover span{transform:translateY(4px)}
.hero-visual{position:relative;min-height:404px;display:grid;place-items:center}.code-window{position:relative;z-index:2;width:min(100%,450px);overflow:hidden;background:rgba(10,18,39,.82);border:1px solid rgba(137,171,255,.3);border-radius:12px;box-shadow:-24px 28px 80px rgba(0,0,0,.34);transform:rotate(-4deg)}.window-top{height:42px;display:flex;align-items:center;gap:6px;padding:0 15px;background:rgba(121,154,233,.1);border-bottom:1px solid rgba(137,171,255,.16)}.window-top span{width:7px;height:7px;border-radius:50%;background:#739eff}.window-top span:nth-child(2){opacity:.65}.window-top span:nth-child(3){opacity:.35}.window-top b{margin-left:8px;color:#afc4ef;font:500 11px/1 'Space Grotesk',sans-serif}.code-window pre{padding:29px 26px 33px;margin:0;overflow:hidden;color:#dce7ff;font:500 15px/1.85 'Space Grotesk',monospace}.code-window i{display:inline-block;width:30px;color:#64749d;font-style:normal}.code-window strong{color:#8db6ff;font-weight:500}.code-window em{color:#78e2d1;font-style:normal}.orbital{position:absolute;width:450px;height:450px;border:1px solid rgba(112,162,255,.2);border-radius:48% 52% 46% 54%;transform:rotate(30deg)}.orbital-one{animation:float-orbit 9s ease-in-out infinite}.orbital-two{width:350px;height:350px;border-color:rgba(112,162,255,.12);transform:rotate(-33deg);animation:float-orbit 11s ease-in-out infinite reverse}.visual-caption{position:absolute;bottom:16px;right:0;color:#6383bf;font:600 10px/1 'Space Grotesk',sans-serif;letter-spacing:.15em}@keyframes float-orbit{50%{transform:rotate(45deg) scale(1.05)}}
.about-band{padding:144px 0 136px;background:#fff}.about-layout{display:grid;grid-template-columns:90px 1.24fr .96fr;gap:36px}.about-layout .section-number,.section-heading .section-number,.members-heading .section-number{color:#3978ff}.about-layout h2,.section-heading h2,.members-heading h2{margin:0;color:#0b1225;font-size:clamp(31px,3.4vw,49px);font-weight:800;letter-spacing:-.07em;line-height:1.28;word-break:keep-all}.about-copy{padding-top:9px;color:#55617a;font-size:15px;line-height:1.9;word-break:keep-all}.about-copy p{margin:0 0 20px}
.focus-section{padding:132px 0;background:#eaf1ff}.section-heading{display:flex;align-items:flex-start;gap:40px;margin-bottom:58px}.section-heading .section-number{padding-top:7px}.focus-list{border-top:1px solid #bacce8}.focus-item{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:36px;min-height:152px;border-bottom:1px solid #bacce8;transition:padding .25s,background .25s}.focus-item:hover{padding-inline:20px;background:rgba(255,255,255,.42)}.focus-item>span{color:#3978ff;font:600 13px/1 'Space Grotesk',sans-serif}.focus-item div{display:grid;grid-template-columns:180px 1fr;align-items:baseline;gap:28px}.focus-item h3{margin:0;font-size:24px;letter-spacing:-.045em}.focus-item p{margin:0;color:#596782;font-size:14px;line-height:1.75}.focus-item svg{width:38px;height:38px;fill:none;stroke:#3978ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.members-section{padding:140px 0 154px;background:#0b1225;color:#fff}.members-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:64px}.members-heading h2{color:#fff}.members-heading>p{max-width:310px;margin:0 0 6px;color:#aebbd3;font-size:14px;line-height:1.85;word-break:keep-all}.member-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.member-tile{min-width:0}.member-photo{aspect-ratio:1/1.05;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#203761,#101d36);border:1px solid rgba(160,190,255,.17)}.member-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95) brightness(1.08);transition:filter .3s,transform .3s}.member-tile:hover .member-photo img{filter:grayscale(.2) contrast(1);transform:scale(1.04)}.member-photo span{color:#96b9ff;font:700 72px/1 'Space Grotesk',sans-serif}.member-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:17px}.member-meta h3{margin:0;font-size:18px;letter-spacing:-.04em}.member-meta p{margin:0;color:#8291af;font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.03em}.members-empty{padding:68px 0;color:#90a0bd;border-top:1px solid rgba(160,190,255,.2);border-bottom:1px solid rgba(160,190,255,.2);text-align:center}
.site-footer{background:#0b1225;border-top:1px solid rgba(160,190,255,.16)}.site-footer-inner{min-height:82px;display:flex;justify-content:space-between;align-items:center;gap:22px}.wordmark-footer{color:#fff;font-size:17px}.site-footer p,.admin-link{margin:0;color:#8191b0;font-size:12px}.admin-link:hover{color:#fff}.toast-container{top:90px;right:24px}.toast{background:#0d1830;border-color:rgba(159,188,255,.25)}.toast-message{color:#eef4ff}.toast-close{font-size:19px;color:#a9bbd9}body:has(.admin-section),body:has(.editor-shell){background:#f6f9ff}.admin-section,.editor-shell{min-height:calc(100vh - 158px)}.admin-section{padding-top:70px;padding-bottom:70px}
@media(max-width:760px){.site-header-inner,.site-footer-inner,.landing-wrap{width:min(100% - 40px,600px)}.site-header-inner{height:68px}.site-nav{gap:16px}.site-nav a{font-size:13px}.hero-layout{min-height:670px;grid-template-columns:1fr;gap:0}.hero-copy{padding:80px 0 16px}.hero-description{font-size:14px;margin-top:22px}.hero-visual{min-height:267px;transform:scale(.86);transform-origin:center top}.code-window{width:400px}.visual-caption{right:3%}.about-band,.focus-section,.members-section{padding:88px 0}.about-layout{grid-template-columns:1fr;gap:20px}.section-number{margin-bottom:12px}.about-copy{padding-top:3px}.section-heading{display:block;margin-bottom:36px}.focus-item{grid-template-columns:40px 1fr;gap:14px;padding:25px 0;min-height:0}.focus-item:hover{padding-inline:0;background:transparent}.focus-item div{display:block}.focus-item h3{margin-bottom:8px;font-size:21px}.focus-item svg{display:none}.members-heading{display:block;margin-bottom:36px}.members-heading>p{margin-top:21px}.member-rail{grid-template-columns:repeat(2,1fr);gap:28px 12px}.member-meta{display:block}.member-meta p{margin-top:7px}.site-footer-inner{min-height:100px;flex-wrap:wrap;justify-content:flex-start;align-content:center;gap:12px 22px}.site-footer p{order:3;flex-basis:100%}.admin-link{margin-left:auto}}@media(max-width:390px){.site-header-inner,.site-footer-inner,.landing-wrap{width:min(100% - 32px,600px)}.wordmark{font-size:20px}.site-nav{gap:12px}.site-nav a{font-size:12px}.hero-copy h1{font-size:45px}.hero-visual{transform:scale(.76)}.member-rail{grid-template-columns:1fr}}

/* Pixel wave: deliberately stepped, like a quiet retro game horizon. */
.pixel-waves { position:absolute; z-index:0; right:0; bottom:0; left:0; height:178px; overflow:hidden; pointer-events:none; }
.pixel-wave { position:absolute; bottom:-1px; left:-5%; width:110%; height:100%; shape-rendering:crispEdges; will-change:transform; }
.pixel-wave path { vector-effect:non-scaling-stroke; }
.pixel-wave-back { bottom:28px; width:132%; fill:#183a83; opacity:.56; animation:pixel-drift-back 18s steps(18,end) infinite alternate; }
.pixel-wave-mid { bottom:10px; width:126%; fill:#2158c7; opacity:.57; animation:pixel-drift-mid 13s steps(14,end) infinite alternate-reverse; }
.pixel-wave-front { width:138%; fill:#3978ff; opacity:.42; animation:pixel-drift-front 10s steps(12,end) infinite alternate; }
.landing-hero::after { content:''; position:absolute; z-index:0; right:0; bottom:0; left:0; height:190px; background:linear-gradient(to top,rgba(7,15,33,.2),transparent); pointer-events:none; }
@keyframes pixel-drift-back { to { transform:translateX(-12%); } }
@keyframes pixel-drift-mid { to { transform:translateX(-10%); } }
@keyframes pixel-drift-front { to { transform:translateX(-8%); } }
@media (max-width:760px) { .pixel-waves { height:118px; }.pixel-wave-back { bottom:17px; }.pixel-wave-mid { bottom:6px; } }
@media (prefers-reduced-motion:reduce) { .pixel-wave { animation:none; } }

/* Landing hero refresh: real Codewave imagery and scroll-led storytelling. */
.wordmark-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
}

.wordmark-footer .wordmark-logo {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
}

body:has(.landing-hero) .site-header {
    position: fixed;
    right: 0;
    left: 0;
    background: rgba(8, 16, 32, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

body:has(.landing-hero) .site-header .wordmark,
body:has(.landing-hero) .site-header .site-nav a {
    color: #fff;
    transition: color .35s ease;
}

body:has(.landing-hero) .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(219, 229, 245, 0.92);
    box-shadow: 0 10px 30px rgba(11, 18, 37, 0.07);
}

body:has(.landing-hero) .site-header.is-scrolled .wordmark {
    color: #0b1225;
}

body:has(.landing-hero) .site-header.is-scrolled .site-nav a {
    color: #56627a;
}

body:has(.landing-hero) .site-header.is-scrolled .site-nav a:hover {
    color: #3978ff;
}

/* 마지막 섹션에서도 배너가 완전히 지나간 뒤 흰 헤더 전환을 볼 수 있는 여백. */
body:has(.landing-hero) .site-footer {
    min-height: 180px;
}

.landing-hero {
    --hero-progress: 0;
    --hero-title-progress: 0;
    --hero-detail-progress: 0;
    position: relative;
    height: 210svh;
    min-height: 0;
    overflow: visible;
    background: #0b1225;
    color: #fff;
}

.hero-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
    isolation: isolate;
}

.hero-pixel-intro {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.intro-wave {
    position: absolute;
    bottom: -2px;
    left: -30%;
    width: 160%;
    height: min(49vh, 420px);
    opacity: 0;
    shape-rendering: crispEdges;
    will-change: transform, opacity;
    animation: pixel-intro-sweep 1.9s cubic-bezier(.22, .76, .2, 1) both;
}

.intro-wave-back {
    bottom: 68px;
    fill: #1c4fbc;
    animation-delay: .04s;
}

.intro-wave-mid {
    bottom: 34px;
    fill: #2870ed;
    animation-delay: .12s;
}

.intro-wave-front {
    fill: #75a5ff;
    animation-delay: .2s;
}

@keyframes pixel-intro-sweep {
    0% { opacity: 0; transform: translateX(-42%); }
    11% { opacity: .96; transform: translateX(-28%); }
    58% { opacity: .94; transform: translateX(27%); }
    100% { opacity: 0; transform: translateX(74%); }
}

.hero-background,
.hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-background {
    z-index: -2;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    transform: scale(calc(1.035 + (var(--hero-progress) * .035)));
    filter: saturate(calc(1 - (var(--hero-progress) * .12)));
    will-change: transform, filter;
}

.hero-shade {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 11, 24, .42) 0%, rgba(5, 11, 24, .06) 34%, rgba(5, 11, 24, .18) 70%, rgba(5, 11, 24, .62) 100%),
        rgba(5, 11, 24, calc(.08 + (var(--hero-progress) * .42)));
}

.hero-brand {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 32px;
    color: #fff;
    font: 700 clamp(70px, 12vw, 176px)/.9 'Space Grotesk', sans-serif;
    letter-spacing: -.075em;
    text-align: center;
    text-shadow: 0 8px 45px rgba(0, 0, 0, .34);
    opacity: clamp(0, calc(1 - (var(--hero-progress) * 3.4)), 1);
    transform: translateY(calc(var(--hero-progress) * -74px));
    will-change: opacity, transform;
}

.hero-message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(900px, calc(100% - 64px));
    text-align: center;
    opacity: var(--hero-title-progress);
    transform: translate(-50%, calc(-50% + ((1 - var(--hero-title-progress)) * 54vh)));
    will-change: opacity, transform;
}

.hero-message h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.078em;
    text-shadow: 0 8px 42px rgba(0, 0, 0, .36);
    word-break: keep-all;
}

.hero-message h1 em {
    color: #79a8ff;
    font-style: normal;
}

.hero-message-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 26px;
    opacity: var(--hero-detail-progress);
    transform: translateY(calc((1 - var(--hero-detail-progress)) * 36px));
    will-change: opacity, transform;
}

.hero-message-detail p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .34);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 0;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 700;
}

.hero-cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.hero-cta:hover svg {
    transform: translateY(3px);
}

.hero-scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .78);
    opacity: clamp(0, calc(1 - (var(--hero-progress) * 5)), 1);
    transform: translateX(-50%);
}

.hero-scroll-cue span {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, .72);
    transform-origin: top;
    animation: scroll-cue 1.8s ease-in-out infinite;
}

.hero-scroll-cue small {
    font: 600 9px/1 'Space Grotesk', sans-serif;
    letter-spacing: .2em;
}

@keyframes scroll-cue {
    0%, 100% { transform: scaleY(.35); opacity: .4; }
    50% { transform: scaleY(1); opacity: 1; }
}

.member-photo {
    aspect-ratio: 1;
    border-radius: 18px;
    background:
        radial-gradient(circle at 72% 22%, rgba(96, 148, 255, .25), transparent 30%),
        linear-gradient(145deg, #203761, #101d36);
    border-color: rgba(160, 190, 255, .24);
}

.member-photo:has(img) {
    background: #fff;
}

.member-photo img {
    filter: none;
    transition: transform .35s ease;
}

.member-photo span {
    color: #a9c4ff;
    font-size: clamp(40px, 4.5vw, 58px);
    text-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.member-tile:hover .member-photo img {
    filter: none;
    transform: scale(1.025);
}

@media (max-width: 760px) {
    .wordmark-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .landing-hero {
        height: 195svh;
    }

    .hero-stage {
        min-height: 540px;
    }

    .hero-background {
        object-position: 51% center;
    }

    .intro-wave {
        height: min(42vh, 330px);
    }

    .hero-brand {
        padding-inline: 20px;
        font-size: clamp(58px, 21vw, 94px);
    }

    .hero-message {
        width: min(100% - 40px, 620px);
    }

    .hero-message h1 {
        font-size: clamp(43px, 13vw, 66px);
        line-height: 1.08;
    }

    .hero-message-detail {
        margin-top: 21px;
    }

    .hero-message-detail p {
        max-width: 420px;
        font-size: 14px;
    }

    .hero-scroll-cue {
        bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero {
        height: 100svh;
    }

    .hero-brand,
    .hero-scroll-cue {
        display: none;
    }

    .hero-message {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .hero-message-detail {
        opacity: 1;
        transform: none;
    }

    .hero-background {
        transform: scale(1.035);
        filter: none;
    }

    .hero-scroll-cue span {
        animation: none;
    }

    .hero-pixel-intro {
        display: none;
    }
}