@charset "utf-8";
/* ============================================================
   SPORTS SKIN OVERLAY
   기존 default.css 뒤에 로드되는 오버레이 파일입니다.
   :root 변수(--portal-primary 등)는 그대로 두고,
   타이포그래피·카드 디테일만 스포츠 톤으로 덧입힙니다.

   적용 방법:
   1) 이 파일을 theme 폴더의 /css/sports-skin.css 로 업로드
   2) theme.config.php 에서 add_stylesheet() 로 default.css 다음 순번으로 큐잉
      예) add_stylesheet(G5_THEME_URL.'/css/sports-skin.css', '', '', $priority);
      (default.css 보다 뒤에 로드되어야 override가 먹습니다)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

/* ── 제목류: 스포츠 스코어보드 느낌의 압축 서체 ── */
#portal_header .logo a,
.site_hero_title,
.gallery_section h3,
.half_board h3,
.group_page_title,
.bsk_view_tit,
.bsk_write_title {
    font-family: 'Oswald', -apple-system, sans-serif;
    letter-spacing: -0.2px;
}

/* ── 숫자류(통계/랭킹/포인트): 모노스페이스로 스코어보드 느낌 ── */
.hero_stat_value,
.ol_stat_val,
.pa_hit,
.visit_val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

/* ── 탭 게시판 네비: 활성 탭을 좀 더 또렷하게 ── */
.tab_nav button.active {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.2px;
}

/* ── 히어로 배너: 그라운드 나이트 톤으로 살짝 보정 ── */
.site_hero {
    background: linear-gradient(135deg, #0E2A1F 0%, #12352A 55%, #163a2e 100%);
}
.hero_stat_value { color: var(--portal-primary); }

/* ── 가이드 바로가기: 필드 느낌의 초록 톤 유지 + 아이콘 강조 ── */
.guide_bar { background: #eefaf1; border-color: #bdeccd; }

/* ── 위젯 타이틀 뱃지: LIVE 스타일 뱃지 추가용 클래스 ──
   (게시판 skin 쪽 최신글 제목 앞에 <span class="live-badge">LIVE</span> 식으로
   붙이고 싶을 때 사용, 강제 적용 아님) */
.live-badge {
    display: inline-block;
    background: #e0473f;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    margin-right: 4px;
    vertical-align: middle;
}

/* ── 갤러리/카드 호버 시 살짝 더 스포티한 그림자 ── */
.bsk_gall_item:hover,
.group_board_section:hover {
    box-shadow: 0 6px 18px rgba(18, 53, 42, 0.14);
}

/* ── 다크모드에서도 로고/히어로 톤 유지 ── */
html[data-theme="dark"] .site_hero {
    background: linear-gradient(135deg, #0a1f16 0%, #0E2A1F 55%, #0f2a22 100%);
}

/* ============================================================
   정적 안내 블록 (portal-info-blocks.php 전용 스타일)
   기존 --portal-primary / --portal-border / --portal-surface 등
   테마 변수를 그대로 사용해 색은 자동으로 맞춰집니다.
   ============================================================ */

/* 1. 상단 안내 히어로 */
.sf_hero {
    background: linear-gradient(135deg, #0E2A1F, #12352A);
    color: #fff;
    border-radius: 10px;
    padding: 30px 32px;
    margin-bottom: 18px;
}
.sf_hero h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    color: var(--portal-primary);
    margin: 0 0 12px;
}
.sf_hero p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #d8e6dd;
    margin: 0 0 14px;
}
.sf_hero_links { display: flex; gap: 18px; flex-wrap: wrap; }
.sf_hero_links a {
    font-size: 13px;
    font-weight: 700;
    color: #F4A93B;
    border-bottom: 1px solid rgba(244,169,59,.4);
    padding-bottom: 2px;
    text-decoration: none;
}

/* 2. 6칸 바로가기 카드 */
.sf_grid6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.sf_qcard {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 6px;
    padding: 16px;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}
.sf_qcard:hover { box-shadow: 0 6px 16px rgba(18,53,42,.1); transform: translateY(-2px); }
.sf_qcard strong { display: block; font-size: 15px; color: var(--portal-text); margin-bottom: 3px; }
.sf_qcard em { display: block; font-size: 12px; color: var(--portal-text-sub); font-style: normal; line-height: 1.5; }
.sf_ic {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.sf_ic_g1 { background: #E6F4EB; }
.sf_ic_g2 { background: #FDECD8; }
.sf_ic_g3 { background: #FCE7E5; }
.sf_ic_g4 { background: #E7EEF8; }
.sf_ic_g5 { background: #F1E9FB; }
.sf_ic_g6 { background: #FFF3D6; }

/* 3~6 공용 패널 */
.sf_panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 6px;
    padding: 26px 28px;
    margin-bottom: 18px;
}
.sf_panel h2 {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 19px;
    color: var(--portal-text);
    margin: 0 0 22px;
}
.sf_panel h2.sf_left { text-align: left; margin-bottom: 6px; }
.sf_desc, .sf_sub { font-size: 13px; color: var(--portal-text-sub); line-height: 1.7; margin: 0 0 4px; }
.sf_sub { text-align: center; margin-bottom: 20px; }

/* 3. 운영이유 4칸 */
.sf_why4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center; }
.sf_num {
    display: block; width: 36px; height: 36px; margin: 0 auto 10px;
    border-radius: 50%; background: var(--portal-primary); color: #fff;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
    line-height: 36px;
}
.sf_why4 h4 { font-size: 14.5px; margin: 0 0 6px; color: var(--portal-text); }
.sf_why4 p { font-size: 12px; color: var(--portal-text-sub); line-height: 1.6; margin: 0; }

/* 4. 확인할 수 있는 내용 4칸 */
.sf_check4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf_check4 > div { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--portal-border); border-radius: 6px; }
.sf_ic_sm { flex-shrink: 0; font-size: 16px; width: 34px; height: 34px; border-radius: 6px; background: var(--portal-surface-alt); display: flex; align-items: center; justify-content: center; }
.sf_check4 h4 { font-size: 14px; margin: 0 0 4px; color: var(--portal-text); }
.sf_check4 p { font-size: 12px; color: var(--portal-text-sub); line-height: 1.55; margin: 0; }

/* 5. 이용 안내 스텝 */
.sf_strip {
    background: #0E2A1F; color: #fff; border-radius: 6px;
    padding: 10px 18px; font-weight: 700; font-size: 14px;
    margin: 18px 0 14px;
}
.sf_steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sf_steps li { display: flex; gap: 10px; font-size: 13px; color: var(--portal-text); line-height: 1.6; }
.sf_steps li span {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--portal-primary); color: #fff;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* 6. FAQ 2단 */
.sf_faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf_faq2 > div { border: 1px solid var(--portal-border); border-radius: 6px; padding: 18px; }
.sf_tag {
    display: inline-block; background: var(--portal-surface-alt); color: var(--portal-primary);
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.sf_faq2 h4 { font-size: 14px; margin: 0 0 6px; color: var(--portal-text); }
.sf_faq2 p { font-size: 12.5px; color: var(--portal-text-sub); line-height: 1.6; margin: 0; }

/* 반응형 */
@media (max-width: 900px) {
    .sf_grid6 { grid-template-columns: 1fr 1fr; }
    .sf_why4 { grid-template-columns: 1fr 1fr; }
    .sf_check4, .sf_faq2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .sf_grid6 { grid-template-columns: 1fr; }
    .sf_hero { padding: 20px; }
}