/* ============================================================================= 
   NextE&M 뉴스 카드 공통 스타일
   작성일: 2025.01.02
   설명: 모든 뉴스 카드에 적용되는 공통 CSS
============================================================================= */

/* body 기본 설정 */
body {
    margin: 0;
    padding: 10px;  /* 카드 그림자 공간 확보 */
    overflow: hidden;
    box-sizing: border-box;  /* 패딩이 전체 크기에 포함되도록 */
    background: transparent;  /* 투명 배경으로 뒤가 보이도록 */
}

/* 호버 시 나타나는 요약 텍스트 스타일 */
.promo-card .promo-content .promo-summary {
    font-size: 1.2rem;     /* 1rem → 1.2rem으로 확대 */
    line-height: 1.5;    /* 1.4 → 1.5로 여유 있게 */
    max-height: 250px;   /* 200px → 250px로 확대 */
    overflow-y: auto;
    padding: 1rem;       /* 내부 패딩 추가 */
    padding-right: 1.2rem; /* 스크롤바 공간 확보 */
    margin-top: 0.8rem;    /* 타이틀과 서머리 사이 간격 축소 (2rem → 0.8rem) */
    
    /* 요약 텍스트도 가독성 향상 */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 1px 4px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3);
    
    /* 스크롤바 스타일링 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

/* 호버 시 flex 레이아웃 조정 */
.promo-card:hover .promo-content > div:nth-child(2) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.promo-card:hover .promo-date {
    flex: 0 0 auto;
}

.promo-card:hover .promo-button {
    flex: 0 0 auto;
}

/* summary가 부모 내에서 확장 */
.promo-card:hover .promo-summary {
    flex: 1 1 auto;
    height: auto;
    min-height: 100px;
}

/* 데이터 속성 기반 호버 동작 */

/* keep-title: 타이틀은 유지, 서브타이틀만 숨김 */
.promo-card[data-hover="keep-title"]:hover .promo-headline {
    display: block;
    margin-top: 1.5rem;  /* 호버 시 날짜와 타이틀 사이 간격 추가 */
}
.promo-card[data-hover="keep-title"]:hover .promo-subtitle {
    display: none;
}
.promo-card[data-hover="keep-title"]:hover .promo-summary {
    display: block;
}

/* 레거시 동작: data-hover 속성이 없는 기존 카드용 */
.promo-card:not([data-hover]):hover .promo-headline,
.promo-card:not([data-hover]):hover .promo-subtitle {
    display: none;
}
.promo-card:not([data-hover]):hover .promo-summary {
    display: block;
}

/* Webkit 브라우저용 스크롤바 */
.promo-summary::-webkit-scrollbar {
    width: 3px;  /* 6px → 3px로 축소 */
}

.promo-summary::-webkit-scrollbar-track {
    background: transparent;
}

.promo-summary::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

.promo-summary::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

/* 제목과 부제목 크기 조정 */
.promo-card .promo-headline {
    font-size: 1.3rem;
    /* 제목은 더 강한 그림자로 강조 */
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.5);
    /* 글자 굵기로 추가 가독성 */
    font-weight: 600;
    letter-spacing: -0.02em;
}

.promo-card .promo-subtitle {
    font-size: 0.95rem;
    /* 부제목은 약간 더 부드러운 그림자 */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}

/* 날짜 텍스트 */
.promo-card .promo-date {
    font-size: 0.85rem;
    /* 날짜는 더 미묘한 그림자 */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.4);
    opacity: 0.9;
}

/* 버튼 크기 조정 */
.promo-card .promo-button {
    font-size: 1rem;
    padding: 0.7rem 1.4rem;
    /* 버튼 텍스트는 더 부드러운 그림자 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* 버튼 자체에 글래스모피즘 효과 */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.promo-card .promo-button:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 카드 높이를 iframe에 맞춤 */
.promo-card {
    height: 100%;
    min-height: 350px;
    max-height: 600px;
    /* 글래스모피즘을 위해 position: relative 추가 */
    position: relative;
}

/* padding 조정으로 더 나은 가독성 확보 */
.promo-card .promo-content {
    padding: 2rem 2.5rem;  /* 좌우 패딩을 2.5rem으로 증가 */
    /* 글래스모피즘 텍스트 가독성 향상 - 다층 그림자 */
    text-shadow: 
        /* 가까운 강한 그림자 (선명도) */
        0 1px 2px rgba(0, 0, 0, 0.8),
        /* 중간 거리 부드러운 그림자 (깊이) */
        0 2px 4px rgba(0, 0, 0, 0.6),
        /* 먼 거리 흐릿한 그림자 (주변 대비) */
        0 4px 12px rgba(0, 0, 0, 0.4),
        /* 글로우 효과 (밝은 배경에서의 가독성) */
        0 0 20px rgba(0, 0, 0, 0.3);
    
    /* 텍스트 렌더링 최적화 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .promo-card .promo-content .promo-summary {
        max-height: 150px;
        font-size: 0.8rem;  /* 원래 크기 유지 */
    }
    
    .promo-card .promo-content {
        padding: 1.5rem 2rem;  /* 모바일에서도 좌우 패딩 유지 */
    }
    
    /* 모바일에서는 텍스트 그림자 약간 축소 */
    .promo-card .promo-content {
        text-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 3px 8px rgba(0, 0, 0, 0.3);
    }
}

/* =============================================================================
   글래스모피즘 효과
============================================================================= */

/* 카드 글래스모피즘 기본 효과 */
.promo-card {
    /* 배경 이미지 투명도 - 텍스트 가독성과 배경 역할의 균형 */
    opacity: 0.75;
    
    /* 글래스모피즘 백드롭 필터 - 더 흐릿하고 어둡게 */
    backdrop-filter: blur(20px) saturate(100%) brightness(0.85);
    -webkit-backdrop-filter: blur(20px) saturate(100%) brightness(0.85);
    
    /* 그림자 제거 - 어두운 배경에서는 불필요 */
    /* box-shadow: none; */
    
    /* 부드러운 전환 효과 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 오버플로 처리 */
    position: relative;
    overflow: hidden;
}

/* 각도별 투명도 테두리 효과 - 빛 굴절 느낌 */
.promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 5px; /* 테두리 굵기 - 두꺼운 유리 효과 */
    background: conic-gradient(
        from 180deg at 50% 50%,
        rgba(255,255,255,0.45) 0deg,      /* 상단: 밝은 반사 */
        rgba(255,255,255,0.25) 90deg,     /* 우측: 중간 밝기 */
        rgba(255,255,255,0.15) 180deg,    /* 하단: 어두운 부분 */
        rgba(255,255,255,0.3) 270deg,     /* 좌측: 약간 밝게 */
        rgba(255,255,255,0.45) 360deg     /* 다시 상단 */
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/* 글래스모피즘 광택 효과 */
.promo-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 대각선 광택 효과 (글래스모피즘 특징) */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 10%,
            rgba(255, 255, 255, 0.02) 30%,
            transparent 50%
        );
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: soft-light;
}

/* 오버레이 - 글래스모피즘에 맞는 그라디언트 */
.promo-overlay {
    /* 훨씬 더 진한 그라디언트로 배경을 어둡게 */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.40) 30%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.50) 70%,
        rgba(0, 0, 0, 0.55) 100%
    ) !important;
    /* 블렌드 모드로 자연스러운 효과 */
    mix-blend-mode: multiply;
}

/* 호버 시 글래스모피즘 강화 - scale 효과는 각 카드 HTML에서 처리 */
.promo-card:hover {
    /* 호버 시 추가 효과 */
    transform: translateY(-4px);
    opacity: 0.7;  /* 호버 시 약간 더 불투명하게 */
    
    /* 호버 시 강화된 글래스모피즘 */
    backdrop-filter: blur(16px) saturate(160%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.05) !important;
    
    /* 호버 시 글로우 효과만 유지 */
    /* box-shadow 제거 - 어두운 배경에서는 테두리 효과로 충분 */
}

/* ::before 호버 효과도 제거 */