<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI MEDIA COMMAND CENTER</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--bg-color: #020617;
--card-bg: #1e293b;
--primary: #38bdf8;
--accent: #fbbf24;
--text-main: #f1f5f9;
--text-sub: #94a3b8;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body {
background-color: var(--bg-color);
color: var(--text-main);
min-height: 100vh;
overflow-x: hidden;
}
/* 옵션 A: 실시간 뉴스 티커 */
.news-ticker {
background: rgba(56, 189, 248, 0.1);
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
height: 40px;
display: flex;
align-items: center;
overflow: hidden;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(10px);
}
.ticker-wrap {
display: inline-block;
white-space: nowrap;
animation: ticker 30s linear infinite;
}
.ticker-item {
display: inline-block;
padding: 0 50px;
color: var(--primary);
font-size: 0.85rem;
font-weight: 500;
}
@keyframes ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
header {
text-align: center;
padding: 60px 20px 40px;
}
header h1 {
font-size: clamp(1.8rem, 5vw, 2.8rem);
background: linear-gradient(135deg, #fff 0%, #38bdf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
}
/* 옵션 C: 반응형 그리드 시스템 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
/* 맥북 M4 등 큰 화면: 3열 */
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
/* Z 폴드 7 펼쳤을 때 (태블릿급): 2열 */
@media (max-width: 1024px) {
.container { grid-template-columns: repeat(2, 1fr); }
}
/* 일반 폰 및 Z 폴드 접었을 때: 1열 */
@media (max-width: 640px) {
.container { grid-template-columns: 1fr; }
header { padding: 40px 20px; }
}
.card {
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 35px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.card:hover {
transform: scale(1.03);
border-color: var(--primary);
box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}
.card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }
.card h2 { font-size: 1.4rem; margin-bottom: 10px; color: #fff; }
.card p { color: var(--text-sub); font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; }
.btn {
background: rgba(56, 189, 248, 0.1);
color: var(--primary);
padding: 12px;
border-radius: 12px;
text-align: center;
font-weight: 600;
transition: 0.3s;
}
.card:hover .btn { background: var(--primary); color: #000; }
.badge {
position: absolute;
top: 20px;
right: 20px;
background: rgba(56, 189, 248, 0.1);
color: var(--primary);
padding: 4px 10px;
border-radius: 8px;
font-size: 0.7rem;
font-weight: bold;
}
footer { text-align: center; padding: 60px 20px; color: var(--text-sub); font-size: 0.8rem; opacity: 0.5; }
</style>
</head>
<body>
<div class="news-ticker">
<div class="ticker-wrap">
<span class="ticker-item"><i class="fa-solid fa-circle-info"></i> [Daily K] AI 분석 결과 신규 리포트가 업데이트되었습니다.</span>
<span class="ticker-item"><i class="fa-solid fa-circle-info"></i> [시니어 뉴스룸] 현재 12개의 보도자료가 대기 중입니다.</span>
<span class="ticker-item"><i class="fa-solid fa-circle-info"></i> [시스템] AI 에이전트가 정상 가동 중입니다. (Status: Optimal)</span>
</div>
</div>
<header>
<h1>AI MEDIA HUB</h1>
<p style="color:var(--text-sub)">Enet News & Daily K 전략 본부</p>
</header>
<div class="container">
<a href="https://ai-dailyk.pages.dev/" target="_blank" class="card">
<span class="badge">ACTIVE</span>
<i class="fa-solid fa-gauge-high"></i>
<h2>Daily K</h2>
<p>실시간 뉴스 대시보드 및<br>의사결정 데이터 분석</p>
<div class="btn">대시보드 열기</div>
</a>
<a href="https://senior-newsroom-41224361607.asia-northeast3.run.app/" target="_blank" class="card">
<span class="badge">ACTIVE</span>
<i class="fa-solid fa-microchip"></i>
<h2>시니어 뉴스룸</h2>
<p>AI 기사 작성 및<br>콘텐츠 관리 시스템</p>
<div class="btn">뉴스룸 접속</div>
</a>
<div class="card" style="opacity: 0.5;">
<span class="badge" style="color:var(--accent)">READY</span>
<i class="fa-solid fa-folder-tree"></i>
<h2>보도자료 아카이브</h2>
<p>수집된 보도자료 원문 및<br>히스토리 통합 관리</p>
<div class="btn">업데이트 대기</div>
</div>
</div>
<footer>
© 2026 ENET MEDIA GROUP. ALL SYSTEMS OPERATIONAL.
</footer>
</body>
</html>