.cyjjr-intro-page,
.cyjjr-intro-page * {
    box-sizing: border-box;
}

.cyjjr-intro-page {
    --intro-ink: #172033;
    --intro-muted: #667186;
    --intro-line: #ebe6df;
    --intro-soft: #faf8f5;
    --intro-surface: #ffffff;
    --intro-accent: #d96c5f;
    --intro-green: #197246;
    width: min(1120px, calc(100vw - 44px));
    margin: 0 auto;
    padding: 56px 0 96px;
    color: var(--intro-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif;
    word-break: keep-all;
}

.cyjjr-intro-tabs {
    position: sticky;
    top: 138px;
    z-index: 10020;
    display: flex;
    gap: 8px;
    margin: 0 0 52px;
    padding: 8px;
    border: 1px solid var(--intro-line);
    border-radius: 999px;
    background: rgba(255, 253, 250, 0.96);
    box-shadow: 0 12px 28px rgba(23, 32, 51, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.admin-bar .cyjjr-intro-tabs {
    top: 170px;
}

.cyjjr-intro-tabs a {
    display: inline-flex;
    min-height: 42px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--intro-muted);
    font-size: 15px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.cyjjr-intro-tabs a:hover,
.cyjjr-intro-tabs a:focus-visible {
    background: var(--intro-accent);
    color: #ffffff;
    outline: 0;
}

.cyjjr-intro-hero {
    max-width: 900px;
    margin: 0 0 34px;
}

.cyjjr-intro-kicker {
    margin: 0 0 12px;
    color: var(--intro-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.cyjjr-intro-hero h1,
.cyjjr-intro-head h2,
.cyjjr-intro-panel h2 {
    margin: 0;
    color: var(--intro-ink);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0;
}

.cyjjr-intro-hero h1 {
    font-size: clamp(34px, 5vw, 56px);
}

.cyjjr-intro-hero h2 {
    margin: 22px 0 14px;
    color: var(--intro-ink);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    line-height: 1.35;
}

.cyjjr-intro-hero p,
.cyjjr-intro-head p,
.cyjjr-intro-panel p,
.cyjjr-intro-card p {
    color: var(--intro-muted);
    font-size: 16px;
    line-height: 1.78;
}

.cyjjr-intro-section {
    margin: 52px 0 0;
}

.cyjjr-intro-head {
    max-width: 820px;
    margin: 0 0 24px;
}

.cyjjr-intro-head h2,
.cyjjr-intro-panel h2 {
    font-size: clamp(26px, 3.3vw, 40px);
}

.cyjjr-intro-grid {
    display: grid;
    gap: 18px;
}

.cyjjr-intro-grid--values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cyjjr-intro-grid--contribution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cyjjr-intro-card,
.cyjjr-intro-panel {
    border: 1px solid var(--intro-line);
    border-radius: 10px;
    background: var(--intro-surface);
    box-shadow: 0 8px 20px rgba(28, 34, 48, 0.04);
}

.cyjjr-intro-card {
    min-height: 178px;
    padding: 26px;
}

.cyjjr-intro-card h3 {
    margin: 0 0 12px;
    color: var(--intro-ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
}

.cyjjr-intro-card p {
    margin: 0;
}

.cyjjr-intro-card span {
    display: block;
    margin: 0 0 10px;
    color: var(--intro-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.cyjjr-intro-panel {
    margin: 42px 0 0;
    padding: clamp(28px, 4vw, 46px);
    background:
        linear-gradient(135deg, rgba(255, 244, 240, 0.95), rgba(250, 248, 245, 0.98)),
        var(--intro-soft);
}

.cyjjr-intro-panel--closing {
    background:
        linear-gradient(135deg, rgba(235, 249, 241, 0.92), rgba(255, 253, 250, 0.98)),
        var(--intro-soft);
}

.cyjjr-intro-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--intro-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(217, 108, 95, 0.22);
}

.cyjjr-intro-button:hover,
.cyjjr-intro-button:focus-visible {
    background: #c65c51;
    color: #ffffff;
    outline: 0;
}

@media (max-width: 900px) {
    .cyjjr-intro-page {
        width: min(100%, calc(100vw - 34px));
        padding-top: 36px;
    }

    .cyjjr-intro-tabs {
        top: 96px;
        overflow-x: auto;
        border-radius: 20px;
    }

    body.admin-bar .cyjjr-intro-tabs {
        top: 128px;
    }

    .cyjjr-intro-tabs a {
        flex: 0 0 auto;
        min-width: 150px;
    }

    .cyjjr-intro-grid--values,
    .cyjjr-intro-grid--contribution {
        grid-template-columns: 1fr;
    }

    .cyjjr-intro-card {
        min-height: 0;
        padding: 22px;
    }
}

@media (max-width: 560px) {
    .cyjjr-intro-page {
        width: min(100%, calc(100vw - 28px));
        padding-bottom: 72px;
    }

    .cyjjr-intro-hero h1 {
        font-size: 34px;
    }

    .cyjjr-intro-hero h2 {
        font-size: 22px;
    }

    .cyjjr-intro-panel {
        padding: 24px;
    }
}