@charset "utf-8";

/*
 * Sports 메인 스타일 (루트 사이트용)
 * - default.css 의 float 레이아웃(#aside_left / #container / #aside_right)을 깨지 않음
 * - 레이아웃 폭은 default.css 에서 조정
 */

:root {
    --sp-bg: #ffffff;
    --sp-panel: #ffffff;
    --sp-border: #d9e0ea;
    --sp-text: #222222;
    --sp-muted: #778399;
    --sp-accent: #2f6fed;
    --sp-accent-2: #00a87a;
    --sp-danger: #e53935;
    --sp-soft: #f5f7fb;
    --sp-head: #eef2f8;
}

.sp-container--root {
    max-width: none;
    margin: 0;
    padding: 10px 0 30px;
    color: var(--sp-text);
}

/* 메인/게시판 공통: 우측 aside 제거 후 중앙이 남은 폭 전체 사용 */
#container_wr.sp-index-wrap {
    display: flex;
    align-items: flex-start;
    width: 1440px;
}
#container_wr.sp-index-wrap #aside_left {
    float: none;
    width: 350px;
    flex: 0 0 350px;
    margin: 0 10px 0 0;
}
#container_wr.sp-index-wrap #container.sp-index-container {
    float: none !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* 게시판 등 서브페이지 타이틀: 옛 배너 이미지 제거, Sports 톤 */
#container_title.sp-page-title {
    margin: 0 0 16px;
    width: 100%;
    min-height: 0;
    height: auto;
    line-height: 1.4;
    text-align: left;
    color: #111;
    background: #eef2f8;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    text-shadow: none;
    padding: 14px 18px;
    box-sizing: border-box;
}
#container_title.sp-page-title span {
    margin: 0;
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1.4;
}

.sp-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    margin: 0 0 18px;
}

.sp-banner {
    background: linear-gradient(135deg, #e8f3ff 0%, #e6faf3 100%);
    border: 1px solid #c5dcf5;
    border-radius: 14px;
    padding: 24px;
    min-height: 150px;
}
.sp-banner-kicker { color: #1f7a63; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.sp-banner h2 { margin: 8px 0 10px; font-size: 24px; color: #17324f; }
.sp-banner p { margin: 0 0 16px; color: #4a5d73; line-height: 1.6; }
.sp-banner-btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--sp-accent-2);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.sp-banner-btn:hover { background: #00c090; color: #fff; }

.sp-quicknav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sp-quicknav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 54px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    text-decoration: none;
    font-weight: 600;
}
.sp-quicknav a:hover {
    border-color: var(--sp-accent);
    color: var(--sp-accent);
    background: #f7faff;
}

.sp-section-title {
    margin: 8px 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.sp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sp-main { min-width: 0; }

/* 좌측 로그인 박스 톤 정리 */
#aside_left #aside {
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}
.sp-aside-notice {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.sp-aside-notice .sp-latest {
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}
.sp-aside-notice .sp-latest-table {
    table-layout: fixed;
    width: 100%;
}
.sp-aside-notice .sp-latest-table th,
.sp-aside-notice .sp-latest-table td {
    padding: 8px 8px;
    font-size: 12px;
    vertical-align: middle;
}
.sp-aside-notice .sp-subject {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-aside-notice .sp-col-date,
.sp-aside-notice .sp-date {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
    padding-left: 2px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-size: 11px;
    letter-spacing: -0.02em;
}

/* 접속자집계: 공지와 겹치지 않게 + 좌측 폭 맞춤 */
#aside_left #visit {
    width: 100%;
    margin: 12px 0 0;
    box-sizing: border-box;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    clear: both;
}
#aside_left #visit h2 {
    font-size: 14px;
    padding: 12px 10px;
    margin: 0;
    position: relative;
    top: auto;
}
/* 원래 스킨의 위로 튀어나온 아이콘 제거 → 제목 옆으로 */
#aside_left #visit h2 i {
    position: static !important;
    display: inline-block;
    top: auto !important;
    left: auto !important;
    width: auto;
    line-height: 1;
    margin: 0 6px 0 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: #16b3d6 !important;
    font-size: 14px;
    vertical-align: middle;
}
#aside_left #visit dl {
    padding: 8px 10px 12px;
    margin: 0 8px 10px;
}
#aside_left #visit dt {
    width: 28%;
    font-size: 12px;
    padding: 0 2px;
}
#aside_left #visit dd {
    width: 22%;
    font-size: 12px;
    padding: 0 2px;
}
#aside_left #visit .btn_admin {
    top: 8px;
    right: 8px;
}

@media (max-width: 1200px) {
    .sp-hero { grid-template-columns: 1fr; }
    .sp-quicknav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-grid-2 { grid-template-columns: 1fr; }
}

/* 모바일 메인/게시판 */
.sp-container--mobile {
    max-width: none;
    margin: 0;
    padding: 12px 12px 24px;
    box-sizing: border-box;
}
#container .sp-hero {
    margin: 10px 12px 14px;
}
.sp-mobile-page-title {
    margin: 0 12px 12px;
    padding: 12px 14px;
    background: #eef2f8;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    box-sizing: border-box;
}
.sp-mobile-page-title p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}
#container .sp-banner {
    padding: 18px 16px;
    min-height: 0;
}
#container .sp-banner h2 {
    font-size: 20px;
}
#container .sp-quicknav a {
    min-height: 48px;
    font-size: 14px;
}