@charset "utf-8";

/* 리뉴얼 메인 히어로와 자율점검 상태 카드 */

.hero {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 42%, rgba(174, 214, 255, 0.5), transparent 27%),
        linear-gradient(115deg, #f9fcff 0%, #f4f9ff 52%, #eaf4ff 100%);
}

.hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 52%);
    pointer-events: none;
}

.hero__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) 426px;
    gap: 54px;
    align-items: center;
    min-height: 430px;
    padding-top: 32px;
    padding-bottom: 32px;
}

.hero__copy h1 {
    margin-top: 18px;
    color: var(--renewal-navy);
    font-size: clamp(30px, 3.05vw, 32px);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.065em;
}

.hero__copy h1 strong {
    color: var(--renewal-blue);
    font-weight: 700;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    color: #17345f;
    border: 1px solid #b7d2f5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 700;
}

.status-pill__dot,
.state-badge > span {
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--renewal-green);
}

.status-pill--upcoming .status-pill__dot,
.state-badge--upcoming > span {
    background: #2879e5;
}

.status-pill--ended .status-pill__dot,
.state-badge--ended > span {
    background: #8190a5;
}

.hero__description {
    margin-top: 18px;
    color: var(--renewal-gray-700);
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: -0.02em;
}

.hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 27px;
}

.hero__note {
    margin-top: 15px;
    color: var(--renewal-gray-500);
    font-size: 13px;
}

.hero__art {
    position: absolute;
    top: 0;
    right: max(-80px, calc((100vw - 1440px) / 2 - 80px));
    width: 640px;
    height: 100%;
    opacity: 0.62;
    pointer-events: none;
}

.hero__vault {
    position: absolute;
    right: 20px;
    bottom: -60px;
    width: 390px;
    height: 390px;
    border: 30px solid rgba(91, 148, 218, 0.13);
    border-radius: 80px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(142, 190, 242, 0.3));
    box-shadow: inset -32px -20px 50px rgba(58, 113, 180, 0.2), 20px 18px 45px rgba(53, 102, 164, 0.16);
    transform: rotate(-4deg);
}

.hero__vault::before {
    position: absolute;
    top: 58px;
    left: 52px;
    width: 185px;
    height: 185px;
    content: "";
    border: 20px solid rgba(91, 148, 218, 0.18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0.48);
}

.hero__vault::after {
    position: absolute;
    top: 132px;
    left: 130px;
    width: 30px;
    height: 42px;
    content: "";
    border-radius: 16px 16px 8px 8px;
    background: rgba(73, 127, 194, 0.2);
}

.hero__ring {
    position: absolute;
    border: 2px solid rgba(71, 140, 223, 0.14);
    border-radius: 50%;
}

.hero__ring--one {
    top: 34px;
    right: 90px;
    width: 430px;
    height: 430px;
}

.hero__ring--two {
    top: 96px;
    right: 150px;
    width: 310px;
    height: 310px;
}

.check-card {
    padding: 24px 26px 26px;
    --renewal-card-border: 1px solid rgba(213, 224, 238, 0.95);
    --renewal-card-radius: 20px;
    --renewal-card-background: rgba(255, 255, 255, 0.96);
    --renewal-card-shadow: 0 12px 28px rgba(31, 72, 127, 0.14);
    backdrop-filter: blur(8px);
}

.check-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.check-card__header h2 {
    color: var(--renewal-navy);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.state-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 13px;
    color: #067d6c;
    border: 1px solid #a9e0d5;
    border-radius: 999px;
    background: var(--renewal-green-soft);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.state-badge > span {
    width: 8px;
    height: 8px;
    margin-right: 7px;
}

.state-badge--upcoming {
    color: #1261d8;
    border-color: #b8d4f8;
    background: #edf5ff;
}

.state-badge--ended {
    color: #536176;
    border-color: #ccd5e0;
    background: #f1f4f7;
}

.state-badge--before {
    color: #1261d8;
    border-color: #b8d4f8;
    background: #edf5ff;
}

.state-badge--before > span {
    background: #2879e5;
}

.check-card__summary {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 115px;
    margin-top: 18px;
    padding: 18px 24px;
    border: 1px solid #c9dcf5;
    border-radius: 14px;
    background: var(--renewal-blue-soft);
}

.shield-icon {
    display: block;
    flex: 0 0 54px;
    width: 54px;
    height: 66px;
    color: var(--renewal-blue);
}

.shield-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.shield-icon__body {
    fill: currentColor;
}

.shield-icon__check {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4.5;
}

.hero--ended .shield-icon {
    color: #8290a3;
}

.status-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 58px;
    width: 58px;
    height: 66px;
}

.status-icon--clipboard {
    width: 52px;
    height: 61px;
    margin-right: 4px;
    border-radius: 10px;
    background: var(--renewal-blue);
}

.status-icon--clipboard::before {
    position: absolute;
    top: -7px;
    left: 13px;
    width: 27px;
    height: 13px;
    content: "";
    border: 4px solid var(--renewal-blue);
    border-radius: 8px;
    background: #fff;
}

.status-icon--clipboard::after {
    position: absolute;
    top: 23px;
    left: 13px;
    width: 26px;
    height: 3px;
    content: "";
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 9px 0 #fff, 0 18px 0 #fff;
}

.status-icon--complete {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--renewal-green);
}

.status-icon--complete svg {
    display: block;
    width: 100%;
    height: 100%;
}

.status-icon--complete path {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.check-card__summary--complete {
    border-color: #bfe7dc;
    background: var(--renewal-green-soft);
}

.check-card__summary--progress {
    display: block;
    padding: 16px 20px 13px;
}

.progress-summary__label {
    color: var(--renewal-gray-600);
    font-size: 11px;
}

.progress-summary__value {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 2px;
}

.progress-summary__value strong {
    color: var(--renewal-blue);
    font-family: "Roboto", sans-serif;
    font-size: 31px;
    line-height: 1.2;
}

.progress-summary__value span {
    color: var(--renewal-navy);
    font-size: 13px;
    font-weight: 700;
}

.progress-summary__track {
    height: 8px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #cfdff4;
}

.progress-summary__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--renewal-blue);
}

.progress-summary__remaining {
    margin-top: 4px;
    color: var(--renewal-gray-600);
    font-size: 11px;
    text-align: right;
}

.check-card__eyebrow {
    color: var(--renewal-gray-600);
    font-size: 12px;
}

.check-card__dday {
    margin-top: 2px;
    color: var(--renewal-navy);
    font-size: 14px;
    font-weight: 700;
}

.check-card__dday strong {
    margin-right: 8px;
    color: var(--renewal-blue);
    font-family: "Roboto", sans-serif;
    font-size: 31px;
    line-height: 1.15;
}

.check-card__state-copy {
    color: var(--renewal-navy);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}

.check-card__hint {
    margin-top: 4px;
    color: var(--renewal-gray-600);
    font-size: 13px;
}

.check-card__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.check-card__details--single {
    grid-template-columns: 1fr;
}

.check-card--progress .check-card__details,
.check-card--complete .check-card__details,
.check-card__details.check-card__details--combined {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid #d7e0eb;
    border-radius: 11px;
    background: #fff;
}

.check-card--progress .check-card__details--status-only,
.check-card__details.check-card__details--status-only {
    grid-template-columns: 1fr;
}

.check-card__details--status-only > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.check-card__details--status-only dd {
    margin-top: 0;
    text-align: right;
}

.check-card__details > div {
    min-width: 0;
    padding: 12px 15px;
    border: 1px solid #d7e0eb;
    border-radius: 11px;
    background: #fff;
}

.check-card--progress .check-card__details > div,
.check-card--complete .check-card__details > div,
.check-card__details--combined > div {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.check-card__details dt {
    color: var(--renewal-gray-600);
    font-size: 13px;
}

.check-card__details dd {
    margin-top: 3px;
    overflow: hidden;
    color: var(--renewal-navy);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check-card__detail--right {
    text-align: right;
}

.check-card__value--blue {
    color: var(--renewal-blue) !important;
}

.check-card__value--success {
    color: var(--renewal-green) !important;
}

.period-label--mobile {
    display: none;
}

.check-card__action,
.check-card__incentive {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 52px;
    margin-top: 14px;
    color: #fff !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #1c70e6, #0c55c6);
    font-size: 14px;
    font-weight: 700;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.check-card__action {
    width: 100%;
    border: 0;
    cursor: pointer;
}

.check-card--complete .check-card__action {
    position: relative;
    gap: 0;
}

.check-card--complete .check-card__action .button__arrow {
    position: absolute;
    right: 26px;
}

.check-card__action:hover,
.check-card__incentive:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

@media (max-width: 1080px) {
    .hero__layout {
                grid-template-columns: minmax(0, 1.35fr) 390px;
                gap: 30px;
    }
    
    .hero__copy h1 {
                font-size: 30px;
    }
}

@media (max-width: 900px) {
    .hero {
                min-height: auto;
                background:
                    radial-gradient(circle at 82% 49%, rgba(174, 214, 255, 0.55), transparent 34%),
                    linear-gradient(155deg, #f8fbff 0%, #eef6ff 72%, #e4f0ff 100%);
    }
    
    .hero::before {
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 65%);
    }
    
    .hero__layout {
                display: block;
                min-height: auto;
                padding-top: 24px;
                padding-bottom: 26px;
    }
    
    .hero__copy h1 {
                margin-top: 10px;
                font-size: clamp(22px, 7.5vw, 20px);
                line-height: 1.35;
                letter-spacing: -0.06em;
    }
    
    .status-pill {
                width: 100%;
                min-height: 34px;
                padding: 6px 14px;
                font-size: 13px;
    }
    
    .status-pill__dot {
                width: 9px;
                height: 9px;
    }
    
    .hero__description {
                margin-top: 12px;
                font-size: 13px;
                line-height: 1.75;
    }
    
    .hero__description br {
                display: none;
    }
    
    .hero__actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 9px;
                margin-top: 14px;
    }
    
    .hero--upcoming .hero__actions,
    .hero--ended .hero__actions {
                grid-template-columns: 1fr;
    }
    
    .hero__note {
                margin-top: 10px;
                font-size: 12px;
    }
    
    .hero__art {
                top: 255px;
                right: -145px;
                width: 460px;
                height: 470px;
                opacity: 0.34;
    }
    
    .hero__vault {
                right: 10px;
                bottom: -60px;
                width: 340px;
                height: 340px;
    }
    
    .check-card {
                margin-top: 18px;
                padding: 19px 19px 22px;
                border-radius: 19px;
    }
    
    .check-card__header h2 {
                font-size: 19px;
    }
    
    .state-badge {
                min-height: 31px;
    }
    
    .check-card__summary {
                gap: 14px;
                min-height: 96px;
                margin-top: 14px;
                padding: 14px 16px;
    }
    
    .shield-icon {
                flex-basis: 54px;
    }
    
    .check-card__dday strong {
                display: inline-block;
                font-size: 28px;
    }
    
    .check-card__details {
                gap: 10px;
                margin-top: 11px;
    }
    
    .check-card__details > div {
                padding: 11px 12px;
    }
    
    .check-card__details dd {
                font-size: 12px;
    }
    
    .period-label--desktop {
                display: none;
    }
    
    .period-label--mobile {
                display: inline;
    }
    
    .check-card__incentive {
                min-height: 48px;
                margin-top: 12px;
                padding: 0 12px;
                font-size: 13px;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .hero__copy h1 {
                font-size: 30px;
    }
    
    .hero__description {
                font-size: 15px;
    }
    
    .hero__actions {
                max-width: 480px;
    }
    
    .check-card {
                max-width: 590px;
    }
}

@media (max-width: 360px) {
    .hero__copy h1 {
                font-size: 20px;
    }
    
    .check-card__incentive {
                font-size: 12px;
    }
    
    .check-card__details {
                grid-template-columns: 1fr;
    }
}

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