:root {
    --primary-color: #3498db;
    --secondary-color: #00f2ff; /* 사이버 블루 */
    --bg-color: #000;
    --text-color: #fff;
    --accent-color: #e74c3c;
    --navy-color: #2c3e50;
    --orange-neon: #ff9f43;
    --blue-neon: #007AFF;
    --font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    --tech-dark: rgba(10, 15, 30, 0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background-color: #000; color: var(--text-color); overflow-x: hidden; }

/* 인트로 화면 */
#intro-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 1s ease-out; }
#typing-text { color: #fff; font-size: 3.5rem; font-weight: 800; letter-spacing: 8px; border-right: 4px solid #fff; white-space: nowrap; overflow: hidden; animation: blink-caret 0.75s step-end infinite; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #fff; } }

#main-content { min-height: 100vh; display: flex; flex-direction: column; background-image: url('/images/herosection.jpg'); background-size: cover; background-position: center; background-attachment: fixed; }
.hidden { display: none !important; }

/* 헤더 */
header { width: 100%; padding: 25px 0; z-index: 1000; position: relative; }
.header-inner { max-width: 100%; width: 100%; padding: 0 60px; display: flex; justify-content: space-between; align-items: center; }
.logo-img { max-height: 100px; width: auto; filter: drop-shadow(0 2px 10px rgba(255,255,255,0.2)); cursor: pointer; }
.auth-buttons { display: flex; align-items: center; gap: 25px; }

.btn-membership { padding: 10px 22px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid var(--secondary-color); border-radius: 10px; color: var(--secondary-color); font-weight: 800; cursor: pointer; font-size: 0.9rem; white-space: nowrap; transition: 0.3s; }
.btn-membership:hover { background: var(--secondary-color); color: #000; }

/* [추가] 구독 등급 붉은색 강조 스타일 */
.tier-red { color: #ff4d4d !important; font-weight: 900; }

.btn-logout, .btn-login { padding: 10px 24px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; color: #fff; font-weight: 700; cursor: pointer; font-size: 0.95rem; white-space: nowrap; }

/* 메인 레이아웃 */
.main-layout-container { display: flex; justify-content: space-between; align-items: center; padding: 40px 60px; flex: 1; width: 100%; max-width: 100%; margin: 0; }
.left-brand-section { flex: 1; text-align: left; }

.hero-text h2 { font-size: 4.5rem; font-weight: 800; margin-bottom: 25px; text-shadow: 0 0 15px rgba(255, 159, 67, 0.7); }
.hero-text p { font-size: 1.8rem; font-weight: 600; line-height: 1.6; color: #fff; text-shadow: 0 0 5px rgba(0, 122, 255, 0.8), 0 0 10px rgba(0, 122, 255, 0.5), 0 0 20px rgba(0, 122, 255, 0.3); }

.right-function-section { flex: 0.8; display: flex; flex-direction: column; align-items: flex-end; gap: 45px; }
.function-control-btns { display: flex; align-items: center; gap: 20px; margin-bottom: 5px; }
.btn-admin-main { padding: 12px 20px; background: var(--accent-color); color: #fff; border: none; border-radius: 10px; font-weight: 800; cursor: pointer; font-size: 1rem; box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); transition: 0.3s; }

/* AI 스타일 기능 카드 */
.ai-card {
    width: 100%; max-width: 480px; height: 160px;
    background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 25px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; transition: 0.3s ease; position: relative;
}

.ai-badge { position: absolute; top: 15px; left: 20px; padding: 6px 16px; border-radius: 20px; font-size: 0.95rem; font-weight: 800; color: rgba(255, 255, 255, 0.6); border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); transition: 0.3s; letter-spacing: 0.5px; }
.orange-glow:hover .ai-badge { background: var(--orange-neon); color: #000; border-color: var(--orange-neon); font-weight: 900; box-shadow: 0 0 15px var(--orange-neon); }
.blue-glow:hover .ai-badge { background: var(--blue-neon); color: #fff; border-color: var(--blue-neon); font-weight: 900; box-shadow: 0 0 15px var(--blue-neon); }

.ai-icon { font-size: 45px; margin-bottom: 8px; transition: 0.3s; }
.ai-title { font-size: 1.5rem; font-weight: 900; color: #fff; transition: 0.3s; }

.orange-glow:hover { border-color: var(--orange-neon); box-shadow: 0 0 20px rgba(255, 159, 67, 0.2); }
.orange-glow:hover .ai-title { color: var(--orange-neon); }
.orange-glow:hover .ai-icon { filter: drop-shadow(0 0 10px var(--orange-neon)); }

.blue-glow:hover { border-color: var(--blue-neon); box-shadow: 0 0 20px rgba(0, 122, 255, 0.2); }
.blue-glow:hover .ai-title { color: var(--blue-neon); }
.blue-glow:hover .ai-icon { filter: drop-shadow(0 0 10px var(--blue-neon)); }

/* 모달 및 결과창 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 20000; }
.modal-content-large { width: 95%; max-width: 1100px; max-height: 85vh; background: #fff; color: #333; border-radius: 30px; padding: 50px; overflow-y: auto; box-shadow: 0 0 100px rgba(0,0,0,0.5); position: relative; }

footer { padding: 40px; text-align: center; opacity: 0.6; font-size: 0.85rem; width: 100%; }

/* 📱 모바일 반응형 최적화 */
@media (max-width: 1024px) {
    #main-content { background-attachment: scroll; background-size: cover; }
    #typing-text { font-size: 1.8rem; letter-spacing: 3px; border-right-width: 2px; }
    header { padding: 15px 0; }
    .header-inner { padding: 0 20px; }
    .logo-img { max-height: 45px; }
    .auth-buttons { flex-direction: column; gap: 8px; align-items: flex-end; }
    .btn-membership { padding: 6px 12px; font-size: 0.75rem; width: auto; }
    .btn-logout, .btn-login { padding: 6px 12px; font-size: 0.75rem; width: auto; }

    .main-layout-container { flex-direction: column; padding: 40px 20px; text-align: center; gap: 60px; }
    .left-brand-section { width: 100%; display: flex; justify-content: center; }
    .hero-text { text-align: center; width: 100%; }
    .hero-text h2 { font-size: 2.5rem; margin-bottom: 20px; }
    .hero-text p { font-size: 1.2rem; line-height: 1.5; text-shadow: 0 0 8px rgba(0, 122, 255, 0.9), 0 0 15px rgba(0, 122, 255, 0.6); }

    .right-function-section { width: 100%; align-items: center; }
    .ai-card { max-width: 100%; height: 140px; }
    .ai-icon { font-size: 35px; }
    .ai-title { font-size: 1.3rem; }
}