@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root { --bg: #0d0d0d; --card: #181818; --red: #ff4d4d; --gold: #d4af37; --white: #ffffff; }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; letter-spacing: -0.8px; }
body { font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--white); overflow: hidden; }

/* 레이아웃 구조 */
.fixed-hero { position: fixed; top: 0; width: 100%; height: 26vh; z-index: 100; }
.hero-img { width: 100%; height: 100%; background-size: cover; background-position: center 30%; position: relative; }
.overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%); }
.hero-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; text-align: center; }
.hero-txt h1 { font-size: 1.5rem; font-weight: 900; word-break: keep-all; }
.hero-txt h1 span { color: var(--red); }
.label { font-size: 0.7rem; color: var(--gold); letter-spacing: 3px; margin-bottom: 6px; font-weight: 700; }

.fixed-footer { position: fixed; bottom: 0; width: 100%; height: 60px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #444; border-top: 1px solid #222; }

/* 카드 섹션 */
.viewport { height: 100vh; display: flex; align-items: center; padding-top: 20vh; padding-bottom: 60px; }
.track { display: flex; gap: 24px; padding: 0 40px; }

.card {
    flex-shrink: 0; width: 360px; height: 480px; background: var(--card); 
    border-radius: 20px; padding: 45px 40px; border: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.title { font-size: 1.35rem; margin-bottom: 30px; padding-left: 15px; border-left: 5px solid; font-weight: 700; }
.title.red { border-left-color: var(--red); }
.title.gold { border-left-color: var(--gold); color: var(--gold); }

/* 카드 1 & 2 디테일 */
.item { display: flex; gap: 15px; margin-bottom: 24px; }
.idx { color: var(--red); font-weight: 900; font-size: 1.2rem; }
.txt strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.txt p { font-size: 0.88rem; color: #888; line-height: 1.6; word-break: keep-all; }

.comp-table { border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; margin-bottom: 30px; }
.row { display: flex; justify-content: space-between; padding: 14px 20px; font-size: 0.85rem; border-bottom: 1px solid #2a2a2a; }
.row.header { background: #222; color: #666; font-weight: 700; border: none; }
.row.active { color: var(--red); font-weight: 700; background: rgba(255,77,77,0.03); }

.main-msg { color: var(--red); font-weight: 700; text-align: center; margin-bottom: 12px; font-size: 1.05rem; }
.sub-msg { font-size: 0.82rem; color: #555; text-align: center; word-break: keep-all; line-height: 1.6; }

/* 카드 3 (7A74... 반영 최종 교정) */
.conclusion-box { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.punch-line { font-size: 1.7rem; font-weight: 900; line-height: 1.9; color: #fff; word-break: keep-all; }
.box { background-color: var(--red); padding: 2px 8px; border-radius: 2px; display: inline-block; margin: 2px 0; }
.lab { margin-top: 50px; font-size: 0.85rem; color: #333; }


.viewport { justify-content: center; }

/* 반응형 */
@media all and (max-width: 1024px) {
    .viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
    .card { scroll-snap-align: center; width: 85vw; }
}