/* homes/index.html 일반 사용자 파트 전용 스타일 */
/* ===== member-home ===== */
#main-page-header {
    background: url('/static/images/main/main_bg3.png') top center no-repeat;
    background-size: cover;
    position: relative;
    min-height: calc(100vh - 62px);
}

#main-page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,248,235,0.55) 0%, rgba(250,240,210,0.35) 50%, rgba(60,40,10,0.18) 100%);
    pointer-events: none;
    z-index: 1;
}

#main-page-header .container-fluid.full-height {
    position: relative;
    z-index: 2;
}

#main-title-img {
    /* 필요시 스타일 추가 */
}

/* 오늘의 학습 카드 */
#today-study-card {
    display: none;
    margin: 16px auto;
    max-width: 320px;
}

#today-study-card .stat-details {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}

.today-study-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F5A623 0%, #F97316 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.25);
    flex-shrink: 0;
}

.today-study-icon .material-icons {
    font-size: 24px;
    color: #fff;
}

#today-study-card .today-study-text {
    text-align: left;
}

#today-study-card .stat-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    letter-spacing: -0.3px;
}

#today-study-card .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* 브랜드 카드 묶음 */
#member-brand-cards {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#member-brand-cards .button-wrapper {
    width: 25%;
    max-width: 220px;
    min-width: 160px;
    padding: 0 10px;
    box-sizing: border-box;
}

#member-brand-cards .CD-image {
    max-width: 100%;
    height: auto;
}

#member-brand-cards .button-content img.brand-logo {
    height: 50px;
    max-width: 100%;
}

#member-brand-cards .button-content p {
    word-break: keep-all;
}

/* ============================================================
   회원 파트 인터랙션 (index.html 전용, scoped)
   시그니처: CD hover 회전 (site-kit.css .button-wrapper:hover .CD-image)
   그 외 hover 위로 떠오름/scale/패럴랙스/무한 펄스는 제거.
   진입 연출: 카드 순차 fade-in 1회만.
   ============================================================ */

/* ---- 카드 hover: CD 회전이 시그니처이므로 카드 본체는 정지 + 미세 그림자 ----
   기본 btnPush의 translateY(10px) 아래 눌림도 CD 메타포와 충돌하므로 neutralize.
   브랜드 배경색 전환(site-kit.css)은 그대로 유지. */
#member-home .btnPush,
#member-home .btnPush:hover,
#member-home .btnPush:active {
    transform: translateY(0);
    box-shadow: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#member-home .button-content {
    transition: background 0.3s ease, box-shadow 0.25s ease;
}
#member-home .button-wrapper:hover .button-content {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* ---- 진입 연출: 순차 fade-in (위치 이동 없이 opacity만, 시간차) ----
   시그니처는 CD hover 회전. 카드 본체는 올라가지 않고 제자리에서 서서히 나타남. */
#member-home .button-wrapper {
    opacity: 0;
    transition: opacity 0.6s ease;
}
#member-home .button-wrapper.is-visible {
    opacity: 1;
}
#member-home .button-wrapper:nth-child(1).is-visible { transition-delay: 0.05s; }
#member-home .button-wrapper:nth-child(2).is-visible { transition-delay: 0.18s; }
#member-home .button-wrapper:nth-child(3).is-visible { transition-delay: 0.31s; }
#member-home .button-wrapper:nth-child(4).is-visible { transition-delay: 0.44s; }

/* ---- 학습시간 카드: 중성 그림자 (액센트는 아이콘 원 포인트에만) ---- */
#today-study-card {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#today-study-card.is-visible {
    opacity: 1;
}

/* ---- 접근성: 사용자가 동작 감소를 선호하면 CD 회전도 축소 ---- */
@media (prefers-reduced-motion: reduce) {
    #member-home .button-wrapper:hover .CD-image {
        animation: none !important;
    }
    #member-home .btnPush,
    #member-home .btnPush:hover,
    #member-home .btnPush:active {
        transform: none !important;
    }
}