:root {
    --primary: #0066ff;
    --primary-hover: #0052cc;
    --bg-dark: #071328;       /* 시안의 딥 네이비 배경 */
    --bg-panel: #111f38;      /* 다크 스코어보드 패널 배경 */
    --bg-light: #f8f9fa;      /* 라이트 그레이 배경 */
    --text-main: #333333;
    --text-muted: #8b9bb4;
    --border-dark: #223350;
    --border-light: #e2e8f0;
    --accent-red: #ff3355;    /* LIVE 강조 색상 */
    --accent-green: #00d26a;  /* 승리/상승 강조 색상 */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body { background-color: #ffffff; color: var(--text-main); display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.main-content { flex: 1; }

/* 공통 버튼 */
.btn { display: inline-block; padding: 12px 24px; border-radius: 30px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: all 0.2s; }
.btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-text { color: #fff; text-decoration: none; font-weight: 600; padding: 12px; margin-right: 15px; opacity: 0.8; transition: opacity 0.2s; }
.btn-text:hover { opacity: 1; }

/* 글로벌 헤더 & 푸터 */
.header { background: var(--bg-dark); border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 100; }
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; }
.logo a { color: #fff; font-size: 1.4rem; font-weight: 800; text-decoration: none; }
.logo span { color: var(--primary); }
.nav-links { display: flex; gap: 30px; }
.nav-item { color: rgba(255,255,255,0.7); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s; }
.nav-item:hover, .nav-item.active { color: #fff; }

.footer { background: var(--bg-dark); color: var(--text-muted); padding: 40px 0 20px; border-top: 1px solid var(--border-dark); }
.footer-container { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-dark); padding-bottom: 30px; margin-bottom: 20px; }
.footer-logo { display: block; font-size: 1.2rem; font-weight: bold; color: #fff; margin-bottom: 5px; }
.footer-logo span { color: var(--primary); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { color: #fff; }
.copyright { text-align: right; font-size: 0.85rem; }

/* 랜딩: 히어로 섹션 */
.hero-section {background: var(--bg-dark) url(bg1.png) no-repeat 100% 100%;padding: 60px 0 60px;color: #fff;}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.hero-badge { display: inline-block; padding: 6px 14px; background: rgba(0,102,255,0.15); border: 1px solid rgba(0,102,255,0.3); border-radius: 20px; font-size: 0.85rem; font-weight: 600; color: #66a3ff; margin-bottom: 25px; }
.hero-title {font-size: 2.8rem;font-weight: 800;line-height: 1.3;margin-bottom: 20px;letter-spacing: -0.02em;word-break: keep-all;}
.hero-title span { color: var(--primary); }
.hero-desc {font-size: 1.1rem;color: var(--bg-light);margin-bottom: 20px;max-width: 90%;}
.hero-features {display: grid;grid-template-columns: 1fr 1fr;gap: 5px;margin-bottom: 30px;}
.hero-feature-item {display: flex;align-items: center;gap: 12px;font-size: 0.95rem;font-weight: 500;color: var(--bg-light);}
.hero-feature-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid rgba(255,255,255,0.1); }

/* 경기 목록 컨테이너 (여백 및 세로 정렬) */
.match-row-dark {
    display: flex;
    flex-direction: column;
    gap: 5px;          /* 위아래 줄 간격 */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); 행 구분선이 필요하다면 주석 해제 */
}

/* 첫 번째 줄: 일정, 종목, 리그명 */
.match-info-header {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82em;
}

.sport-emoji {
    /* margin-right: 4px; */
}

.league-name {
    /* font-size: 0.85rem; */
    color: var(--text-muted);
}

/* 두 번째 줄: 팀명(좌측) VS 배당(우측) */
.match-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* 모바일 등 좁은 화면에서 팀명과 배당 사이 여백 */
}

/* 좌측: 팀명 및 로고 영역 */
.match-teams {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* 우측 배당 영역을 뺀 나머지 공간 차지 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-name {
    font-weight: bold;
    color: #ffffff;
    font-size: 0.9rem;
}

.score-vs {
    color: var(--accent-red);
    font-weight: bold;
    font-size: 0.9rem;
    margin: 0 5px;
}

/* 우측: 배당 버튼 영역 */
.odds-group-inline {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    flex-shrink: 0; /* 공간이 부족해도 배당 영역이 찌그러지지 않도록 보호 */
}

/* +12 기타 배당 버튼 */
.more-odds {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}


/* 다크 스코어보드 공통 (우측 데모 & 하단 데모) */
.dark-panel { background: var(--bg-panel); border: 1px solid var(--border-dark); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.dark-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;border-bottom: 1px solid var(--border-dark);}
.dark-panel-header h3 {font-size: 1rem;font-weight: 700;color: #fff;}
.panel-tabs {display: flex;gap: 8px;padding: 8px 15px;border-bottom: 1px solid var(--border-dark);}
.panel-tabs button { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.panel-tabs button.active, .panel-tabs button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.match-row-dark {/* display: grid; *//* grid-template-columns: 80px 1fr 180px; *//* align-items: center; */padding: 7px 10px;border-bottom: 1px solid var(--border-dark);}
.match-row-dark:last-child { border-bottom: none; }
.time-info .badge-live { background: var(--accent-red); color: #fff; padding: 3px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; display: inline-block; margin-bottom: 4px; }
.time-info .time { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.match-info .league { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.match-info .teams { font-size: 1rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 12px; }
.match-info .score { color: var(--accent-red); letter-spacing: 2px; }
.odds-group { display: flex; gap: 6px; justify-content: flex-end; }
.odd-btn {background: rgb(255 255 255 / 9%);/* border: 1px solid rgba(255,255,255,0.1); */padding: 1px;width:50px;text-align: center;border-radius: 5px;color: #a5d6ff;/* font-weight: 700; */font-size: 0.78rem;transition: background 0.3s;}
.odd-btn.flash { background: rgba(0,102,255,0.3); color: #fff; border-color: var(--primary); }
.badge-live {font-size:0.75em;padding: 2px 5px;border-radius: 5px;}


/* 랜딩: 5열 장점 아이콘 */
.features-icon-section { padding: 60px 0; background: #fff; }
.features-5-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.feature-circle { width: 70px; height: 70px; background: #f0f5ff; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary); }
.features-5-grid h4 { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.features-5-grid p { font-size: 0.9rem; color: #666; word-break: keep-all; }

/* 랜딩: 중앙 라이브 스코어 & 위젯 (다크 섹션) */
.mid-dark-section { background: var(--bg-dark); padding: 80px 0; border-top: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
.split-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.section-header { margin-bottom: 30px; }
.section-header .sub { color: var(--primary); font-weight: 700; margin-bottom: 10px; display: block; font-size: 0.9rem; letter-spacing: 1px; }
.section-header h2 { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.section-header p { color: var(--text-muted); font-size: 1rem; }

/* 미니 위젯 예시 */
.mini-widget { background: #0c1627; border: 1px solid var(--border-dark); border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-dark); padding-bottom: 12px; color: #fff; font-size: 0.9rem; font-weight: 600; }
.widget-score { text-align: center; color: #fff; margin-bottom: 20px; }
.widget-score h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 5px; }

/* 랜딩: 3열 상세 스펙 */
.spec-section { padding: 80px 0; background: var(--bg-light); }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.spec-card { background: #fff; border-radius: 12px; padding: 32px; border: 1px solid var(--border-light); }
.spec-card .num { color: var(--primary); font-weight: 800; font-size: 1.2rem; margin-bottom: 12px; display: block; }
.spec-card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; color: var(--text-main); }
.spec-card p {font-size: 0.85rem;color: #666;margin-bottom: 20px;}
.code-box {background: var(--bg-dark);padding: 15px;border-radius: 8px;font-family: monospace;color: #a5d6ff;font-size: 0.75rem;line-height: 1.5;overflow-x: auto;}

/* 랜딩: 요금제 (4열) */
.pricing-section { padding: 100px 0; background: #fff; }
.pricing-header { text-align: center; margin-bottom: 50px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.price-card { border: 1px solid var(--border-light); border-radius: 12px; padding: 40px 30px; background: #fff; }
.price-card.featured { border: 2px solid var(--primary); position: relative; box-shadow: 0 20px 40px rgba(0,102,255,0.08); }
.price-card.featured::before { content: '추천'; position: absolute; top: -12px; right: 30px; background: var(--primary); color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; }
.price-card h4 { font-size: 1.2rem; color: var(--text-main); margin-bottom: 10px; }
.price-card .price { font-size: 2.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 24px; }
.price-card .price span { font-size: 1rem; color: #888; font-weight: 500; }
.price-card ul { list-style: none; margin-bottom: 32px; }
.price-card ul li { font-size: 0.95rem; color: #555; margin-bottom: 14px; padding-left: 24px; position: relative; }
.price-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; }
.price-card .btn { width: 100%; border-radius: 8px; padding: 14px; }


/* =========================================
   추가 컴포넌트 및 유틸리티 클래스 (인라인 스타일 대체)
========================================= */

/* 타이포그래피 & 여백 유틸리티 */
.text-center { text-align: center; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.color-primary { color: var(--primary); }
.color-muted { color: var(--text-muted); }

/* 섹션 타이틀 요소 */
.section-num { color: var(--primary); font-weight: 800; font-size: 1.2rem; display: block; margin-bottom: 10px; }
.section-title-lg { font-size: 2.2rem; font-weight: 800; color: var(--text-main); }
.widget-title { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 12px; }

/* 버튼 유틸리티 */
.btn-lg {font-size: 1.05rem;padding: 9px 28px;}
.btn-block { display: block; width: 100%; text-align: center; }
.btn-margin-right { margin-right: 12px; }

/* 다크 패널 내부 요소 */
.panel-date { font-size: 0.85rem; color: var(--text-muted); }
.empty-state { padding: 40px; text-align: center; color: var(--text-muted); }
.panel-footer-link { text-align: center; padding: 15px; border-top: 1px solid var(--border-dark); }
.link-primary { color: var(--primary); font-weight: bold; text-decoration: none; transition: opacity 0.2s; }
.link-primary:hover { opacity: 0.8; }

/* 마진 비교 카드 (자체 마진 8%) */
.margin-compare-box { background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid var(--border-light); margin-top: 15px; }
.margin-label { font-size: 0.85rem; color: #666; margin-bottom: 5px; }
.margin-label.highlight { color: var(--primary); font-weight: bold; }
.margin-row { display: flex; gap: 5px; }
.margin-row.original { margin-bottom: 15px; opacity: 0.7; }
.margin-item {flex: 1;background: #fff;border: 1px solid #ccc;text-align: center;padding: 5px;border-radius: 4px;font-size: 0.84em;}
.margin-item.highlight { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; padding: 10px; font-weight: bold; }

/* JSON 탭 버튼 */
.json-tabs { display: flex; gap: 10px; margin: 10px 0; }
.tab-btn {padding: 6px 12px;border: none;border-radius: 4px;font-size: 0.83rem;cursor: pointer;font-weight: 600;transition: background 0.2s;}
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-btn.inactive { background: #e2e8f0; color: var(--text-main); }

/* 동적 렌더링용 요금제 카드 스타일 */
.price-card-inner { border-radius: 12px; padding:30px 20px; background: #fff; position: relative; transition: transform 0.2s; }
.price-card-inner.basic { border: 2px solid var(--primary); box-shadow: 0 10px 30px rgba(0,102,255,0.1); }
.price-card-inner.normal { border: 1px solid var(--border-light); }
.price-badge { position: absolute; top: -12px; right: 20px; background: var(--primary); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; }
.price-name { font-size: 1.2rem; color: var(--text-main); margin-bottom: 10px; font-weight: 700; }
.price-amount {font-size: 1.8rem;font-weight: 800;color: var(--text-main);margin-bottom: 24px;}
.price-amount span { font-size: 1rem; color: var(--text-muted); font-weight: 500; }
.price-list {list-style: none;margin-bottom: 32px;font-size: 0.8rem;}
.price-list li { margin-bottom: 12px; color: #555; position: relative; padding-left: 20px; }
.price-list li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; }

/* 동적 렌더링용 위젯 스타일 */
.widget-preview-box { width: 100%; max-width: 360px; background: #16161e; color: #e0e0e0; border-radius: 12px; overflow: hidden; border: 1px solid #2b2b36; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.w-head { background: #1f1f2e; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: bold; border-bottom: 1px solid #2b2b36; }
.w-head.center { justify-content: center; color: var(--accent-red); }
.w-league { color: #a4b0be; }
.w-live-badge { color: var(--accent-red); display: flex; align-items: center; gap: 6px; }
.w-dot { width: 6px; height: 6px; background: var(--accent-red); border-radius: 50%; animation: blinker 1.5s linear infinite; }
.w-body { padding: 24px 16px; text-align: center; background: #1a1a24; }
.w-matchup { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.w-team { width: 42%; font-size: 16px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-team.home { text-align: right; }
.w-team.away { text-align: left; }
.w-vs { width: 16%; font-size: 11px; color: #747d8c; }
.w-score-txt { font-size: 42px; font-weight: 900; color: #f1c40f; letter-spacing: 8px; }
.w-foot { padding: 16px; border-top: 1px solid #2b2b36; background: #16161e; }
.w-foot-title { font-size: 11px; color: #a4b0be; margin-bottom: 8px; display: flex; justify-content: space-between; }
.w-bar-container { width: 100%; height: 22px; background: #2f3542; border-radius: 4px; display: flex; overflow: hidden; font-size: 11px; font-weight: bold; line-height: 22px; text-align: center; }
.w-bar-h { background: #3742fa; color: #fff; transition: width 0.4s ease; }
.w-bar-d { background: #747d8c; color: #fff; transition: width 0.4s ease; }
.w-bar-a { background: var(--accent-red); color: #fff; transition: width 0.4s ease; }


/* =========================================
   특징 아이콘 5열 섹션 (SVG 적용)
========================================= */
.features-icon-section {
    padding: 80px 0;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
}

.features-5-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    text-align: center;
}

.feature-icon-box {
    width: 80px;
    height: 80px;
	font-size:3em;
    background: #eff6ff;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 102, 255, 0.1);
}

.features-5-grid h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.features-5-grid p {
    font-size: 0.95rem;
    color: #64748b;
    word-break: keep-all;
}


/* =========================================
   전체 화면 모드 제어 (로그인, 대시보드용)
========================================= */
body.hide-global .header,
body.hide-global .footer { display: none !important; }
body.hide-global .main-content { padding: 0 !important; max-width: 100% !important; margin: 0 !important; flex: 1; display: flex; flex-direction: column; }

/* =========================================
   로그인 (Auth) 박스형 레이아웃
========================================= */
.auth-wrapper { 
    display: flex; 
    max-width: 1000px; 
    margin: 60px auto; 
    background: #fff; 
    border-radius: 16px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    overflow: hidden; 
    min-height: 600px;
    border: 1px solid var(--border-light);
}
.auth-left { flex: 1; background: var(--bg-dark); color: #fff; padding: 50px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-left::before { content: ''; position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,102,255,0.2) 0%, transparent 70%); }
.auth-brand { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; z-index: 1; color: #fff; }
.auth-brand span { color: var(--primary); }
.auth-badge { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 25px; z-index: 1; width: fit-content; }
.auth-left h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.3; margin-bottom: 15px; z-index: 1; }
.auth-left p { font-size: 1rem; color: #a5d6ff; line-height: 1.6; z-index: 1; }

.auth-right { flex: 1; display: flex; flex-direction: column; padding: 40px; background: #fff; position: relative; }
.auth-form-container { width: 100%; max-width: 360px; margin: auto; }
.auth-title { font-size: 2rem; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
.auth-subtitle { font-size: 1rem; color: var(--text-muted); margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
.form-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.form-control { width: 100%; padding: 14px; border: 1px solid var(--border-light); border-radius: 8px; font-size: 1rem; background: #f8fafc; transition: all 0.2s; }
.form-control:focus { border-color: var(--primary); outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(0,102,255,0.1); }

/* =========================================
   클라이언트 대시보드 박스형 레이아웃
========================================= */
.dashboard-wrapper { 
    display: flex; 
    max-width: 1280px; 
    margin: 40px auto 80px; 
    background: #fff; 
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    overflow: hidden; 
    min-height: 750px; 
    border: 1px solid var(--border-light);
}
.dashboard-sidebar { width: 260px; background: var(--bg-dark); color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-logo { padding: 24px; font-size: 1.2rem; font-weight: 800; border-bottom: 1px solid var(--border-dark); }
.sidebar-logo span { color: var(--primary); }
.sidebar-menu { list-style: none; padding: 20px 0; flex: 1; overflow-y: auto; }
.sidebar-menu li a { display: flex; align-items: center; gap: 12px; padding: 14px 24px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; }
.sidebar-menu li a:hover { color: #fff; background: rgba(255,255,255,0.03); }
.sidebar-menu li a.active { color: #fff; background: rgba(0,102,255,0.1); border-right: 3px solid var(--primary); }
.sidebar-footer { padding: 20px; border-top: 1px solid var(--border-dark); display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.user-role { font-size: 0.75rem; color: var(--text-muted); }

.dashboard-main { flex: 1; padding: 40px; overflow-y: auto; }
.dash-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.dash-title-area h2 { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 5px; }
.dash-title-area p { color: var(--text-muted); font-size: 0.95rem; }
.dash-actions { display: flex; gap: 10px; }

.dash-card { background: #fff; border-radius: 12px; border: 1px solid var(--border-light); padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); margin-bottom: 24px; }
.dash-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }

/* 대시보드 내 테이블 */
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.dash-table th { background: #f8fafc; padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-light); }
.dash-table td { padding: 16px; border-bottom: 1px solid var(--border-light); color: var(--text-main); }
.dash-table tr:last-child td { border-bottom: none; }

/* =========================================
   추가된 랜딩 페이지 전용 레이아웃 
========================================= */

/* 1. 히어로 섹션 고정틀 */
.hero-live-panel {
    display: flex;
    flex-direction: column;
}
.fixed-height-list {
    flex: 1;
    min-height: 250px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.fixed-height-list .empty-state {
    margin: auto; /* 텅 빈 상태일 때 정중앙 정렬 */
}

/* 2. 다크 섹션 (스코어보드 & 위젯 2분할) */
.mid-scoreboard-section {
    background: var(--bg-dark);
    padding: 80px 0;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    color: #fff;
}
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}
.scoreboard-area { padding-right: 20px; }
.widget-area { 
    background: #111f38; 
    border: 1px solid var(--border-dark); 
    border-radius: 12px; 
    padding: 30px; 
}
.widget-demo-container { display: flex; justify-content: center; }

/* 중앙 스코어보드 테이블 스타일 */
.mid-table-container {
    background: #111f38;
    border-radius: 12px;
    border: 1px solid var(--border-dark);
    overflow: hidden;
}
.mid-scoreboard-table { width: 100%; border-collapse: collapse; }
.mid-scoreboard-table th {background: #162442;color: var(--text-muted);padding: 8px 15px;font-size: 0.84rem;font-weight: 600;border-bottom: 1px solid var(--border-dark);}
.mid-scoreboard-table td {padding: 5px;border-bottom: 1px solid var(--border-dark);font-size: 0.84rem;}
.mid-scoreboard-table tr:last-child td { border-bottom: none; }
.mid-scoreboard-table tr:hover { background: rgba(255,255,255,0.02); }

/* 3. 요금제 좌우 분할 레이아웃 */
.pricing-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
}
.pricing-info { position: sticky; top: 100px; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}
.btn-light { background: #fff; color: var(--primary); font-weight: bold; }
.btn-light:hover { background: #f0f0f0; }

/* 4. 하단 CTA 푸터 위 배너 */
.bottom-cta-section {
    background: var(--primary) url(bg2.png) no-repeat 100%;
    padding: 60px 0;
    color: #fff;
}
.cta-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-text h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 10px; }
.cta-text p { font-size: 1.1rem; opacity: 0.9; }

/* 5. JSON 샘플 코드 박스 들여쓰기 폰트 지원 */
pre.code-box {
    white-space: pre-wrap; 
    word-break: break-all;
}

/* 6. 모바일 반응형 미디어 쿼리 */
@media (max-width: 992px) {
    .split-layout { grid-template-columns: 1fr; } /* 스코어보드와 위젯 세로 배치 */
    .scoreboard-area { padding-right: 0; margin-bottom: 30px; }
    .pricing-layout { grid-template-columns: 1fr; } /* 요금제 텍스트 상단 배치 */
    .pricing-info { position: static; margin-bottom: 30px; text-align: center; }
    .hero-grid { grid-template-columns: 1fr; }
    .cta-flex { flex-direction: column; text-align: center; gap: 20px; }
}

@media (max-width: 768px) {
    .features-5-grid { grid-template-columns: 1fr 1fr; }
    .spec-grid { grid-template-columns: 1fr; }
    .match-row-dark { grid-template-columns: 1fr !important; gap: 10px; text-align: center; padding: 15px; }
    .match-info-center { flex-direction: column; gap: 5px; }
    .odds-group-inline { justify-content: center !important; margin-top: 10px; }
    .section-header-flex { flex-direction: column; align-items: flex-start; gap: 15px; }
}