@charset "utf-8";

/* =========================================
   Main Index Page Styles (Figma Node 172:1222)
   Integrated with theme/unid/css structure
   Sections: #section01 ~ #section05
   ========================================= */

/* Main Container */
.main-index {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Pretendard', sans-serif;
}

/* Common utilities */
.main-index .df { display: flex; flex-wrap: wrap; }
.main-index .slide-wr { position: relative; width: 100%;}
.main-index .full { width: 100%; height: 100%; position: absolute; top:0; left:0; pointer-events: none; }
.main-index .full > * { pointer-events: auto; }

/* ----------------------------------------------------------------
   Section 01: Hero (Figma Node 118:339)
   Full viewport height with left-aligned text overlay
   ---------------------------------------------------------------- */
.main-index #section01 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    max-height: 1060px;
}

.main-index #section01 .main__bg {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Left overlay container - solid background */
.main-index #section01 .left_con {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(400px, 43.5%, 851px);
    height: 100%;
    background: #010E55cc;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.main-index #section01 .text_con {
    width: clamp(250px, 15.1vw, 296px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.6vw, 32px);
    color: #fff;
}

/* Label with line */
.main-index #section01 .label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-index #section01 .label .line {
    width: 48px;
    height: 1px;
    background-color: #fff;
}

.main-index #section01 .label span {
    font-size: clamp(14px, 0.8vw, 16px);
    letter-spacing: 1.25px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Title */
.main-index #section01 .tit {
    font-family: 'Gmarket Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 4.9vw, 96px);
    line-height: 1;
}

/* Description text */
.main-index #section01 .txt {
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.22;
    font-weight: 300;
}

/* Button */
.main-index #section01 .btn-more {
    width: 100%;
    height: clamp(48px, 2.9vw, 56px);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    color: #13027e;
    font-size: clamp(16px, 0.9vw, 18px);
    font-weight: 700;
    transition: background-color 0.3s;
    margin-top: clamp(10px, 1vw, 20px);
}

.main-index #section01 .btn-more:hover {
    background-color: rgba(255, 255, 255, 0.9);
}
.main-index #section01 .slide-wr .visual-slide img{height:100%;width:100%;object-fit: cover;min-height: 700px;}
.main-index #section01 .slide-wr{position:relative;max-height: 100vh;}
.main-index #section01 .slide-wr .visual-slide{overflow:hidden;position:relative;height: 100%;}
.main-index #section01 .slick-slide{display:block;float:left;height: 100%;}
/* Responsive #section01 */
@media screen and (max-width: 1024px) {
    .main-index #section01 .left_con {
        width: 100%;
        background: linear-gradient(180deg, rgba(19, 2, 126, 0.9) 0%, rgba(19, 2, 126, 0.6) 100%);
        padding: 0 40px;
    }
    .main-index #section01 .text_con {
        width: 100%;
        max-width: 500px;
        text-align: center;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .main-index #section01 .left_con { padding: 0 20px; }
}


/* ----------------------------------------------------------------
   Section 02: Featured Story (Figma Node 118:67)
   Two-column layout with stats and featured content
   ---------------------------------------------------------------- */
.main-index #section02 {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(60px, 5.2vw, 100px) 20px;
    box-sizing: border-box;
}

.main-index #section02 .featured_story_con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 64px;
    align-items: center;
}

/* Left text column */
.main-index #section02 .left_con {
    width: 568px;
    flex-shrink: 0;
}

.main-index #section02 .label {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: 28px;
}

.main-index #section02 .label span {
    font-size: 20px;
    font-weight: 700;
    color: #13027E;
    line-height: 20px;
}

.main-index #section02 .label-bar {
    width: 64px;
    height: 4px;
    background-color: #002138;
}

.main-index #section02 .tit {
    font-size: 24px;
    font-weight: 500;
    line-height: 2rem;
    color: #000;
    margin: 28px 0;
    letter-spacing: -1px;
}

.main-index #section02 .txt {
    font-size: 18px;
    line-height: 25px;
    color: #4B5563;
}

/* Stats row */
.main-index #section02 .stats_wr {
    display: flex;
    gap: 40px;
    margin-top: 28px;
}

.main-index #section02 .stat-item {
    display: flex;
    flex-direction: column;
}

.main-index #section02 .stat-val {
    font-size: 40px;
    font-weight: 700;
    color: #101828;
    line-height: 40px;
}

.main-index #section02 .stat-lbl {
    font-size: 16px;
    color: #6B7280;
    margin-top: 4px;
    line-height: 20px;
}

/* Right content column */
.main-index #section02 .right_con {
    width: 608px;
    flex-shrink: 0;
}

.main-index #section02 .feature-main .img-con {
    width: 100%;
    height: 760px;
    position: relative;
    /* border-radius: 20px; */
    margin-bottom: 90px;
}

.main-index #section02 .feature-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-index #section02 .quote-overlay {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 320px;
    background-color: #13027E;
    padding: 32px;
    /* border-radius: 12px; */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.main-index #section02 .quote-overlay p {
    font-size: 18px;
    font-weight: 500;
    line-height: 29.5px;
    color: #ffffff;
    margin-bottom: 16px;
}

.main-index #section02 .quote-overlay span {
    font-size: 14px;
    color: #E5E7EB;
    font-weight: 700;
    display: block;
    line-height: 20px;
}

/* Feature List (3 cards) */
.main-index #section02 .feature-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: clamp(40px, 4.2vw, 80px);
}

.main-index .list-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-index .list-item .img {
    overflow: hidden;
}

.main-index .list-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.main-index .list-item:hover .img img { 
    transform: scale(1.05); 
}

.main-index .list-item .cat {
    font-size: 12px;
    font-weight: 700;
    color: #13027e;
    letter-spacing: 1px;
}

.main-index .list-item .tit {
    font-size: clamp(18px, 1vw, 20px);
    font-weight: 700;
    margin-bottom: 10px;
}

.main-index .list-item .txt {
    font-size: clamp(14px, 0.8vw, 16px);
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

.main-index .list-item .date {
    font-size: 14px;
    color: #888;
}

/* Responsive #section02 */
@media screen and (max-width: 1280px) {
    .main-index #section02 .left_con,
    .main-index #section02 .right_con { 
        width: 100%;
        
    }
    .main-index #section02 .featured_story_con {
        gap: 40px;
    }
}

@media screen and (max-width: 1024px) {
    .main-index #section02 .left_con,
    .main-index #section02 .right_con { 
        width: 100%;
        max-width: 100%;
    }
    .main-index #section02 .feature-list { 
        flex-direction: column; 
    }
    .main-index #section02 .stats_wr {
        gap: 40px;
    }
}


/* ----------------------------------------------------------------
   Section 03: Sports Community (Figma Node 118:136)
   Top: Text + 4 stat cards grid | Bottom: 5 sport image cards
   ---------------------------------------------------------------- */
.main-index #section03 {
    padding: 80px 0;
}

.main-index #section03 .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Top Row: Text + Stats Grid */
.main-index #section03 .top-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 64px;
    align-items: center;
    flex-direction: row;
}

.main-index #section03 .left_con {
    width: 50%;
    flex-shrink: 0;
}

.main-index #section03 .text_wr {
    max-width: 100%;
}

.main-index #section03 .text_wr .label {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 24px;
}

.main-index #section03 .text_wr .label span {
    font-size: 14px;
    font-weight: 500;
    color: #13027E;
    line-height: 16.5px;
    letter-spacing: 1.2px;
    font-family: 'Gmarket Sans';
}

.main-index #section03 .text_wr .line {
    width: 64px;
    height: 4px;
    background-color: #13027E;
}

.main-index #section03 .text_wr .tit {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 48px;
    color: #101828;
    margin-bottom: 24px;
    letter-spacing: -0.96px;
}

.main-index #section03 .text_wr .txt {
    font-size: 20px;
    font-weight: 400;
    color: #4A5565;
    line-height: 29.25px;
    letter-spacing: -0.3px;
    margin-bottom: 24px;
}

.main-index #section03 .btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 256px;
    height: 56px;
    background-color: #13027E;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s;
    letter-spacing: -0.3px;
}

.main-index #section03 .btn-join:hover {
    background-color: #0e015e;
}

/* Stats Container (2 Columns) */
.main-index #section03 .right_con {
    flex: 1;
}

.main-index #section03 .stats-container {
    display: flex;
    gap: 16px;
    height: 100%;
}

.main-index #section03 .stats-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

/* Right Column Stagger (Figma y=32) */
.main-index #section03 .stats-col:nth-child(2) {
    margin-top: 32px;
}

.main-index #section03 .stat-card {
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 296px; /* Fixed height per card */
    box-sizing: border-box;
}

/* Card Color Variants */
.main-index #section03 .stat-card.blue {
    background-color: #13027E;
}

.main-index #section03 .stat-card.light {
    background-color: #F8FAFC; /* Light Gray */
}

.main-index #section03 .stat-card.dark {
    background-color: #1F2937;
}

/* Card Content Styles */
.main-index #section03 .stat-card .number {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    margin-bottom: 30px;
    letter-spacing: -1.2px;
}

.main-index #section03 .stat-card.blue .number {
    color: rgba(255,255,255,0.2);
}

.main-index #section03 .stat-card.light .number {
    color: rgba(0,0,0,0.1);
}

.main-index #section03 .stat-card.dark .number {
    color: rgba(255,255,255,0.1);
}

.main-index #section03 .stat-card .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 30px;
    flex-grow: 1; /* Push bottom content down if needed, or just spacers? */
    /* Based on Figma: spaced from top. Just margin is fine if content fits. */
}

.main-index #section03 .stat-card .icon img {
    width: 100%;
    height: 100%;
}

.main-index #section03 .stat-card .value {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 8px;
    letter-spacing: -0.6px;
}

.main-index #section03 .stat-card.blue .value {
    color: #fff;
}

.main-index #section03 .stat-card.light .value {
    color: #101828;
}

.main-index #section03 .stat-card.dark .value {
    color: #fff;
}

.main-index #section03 .stat-card .text-title {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: 30px;
    font-weight: 500; /* Medium per user request */
    line-height: 36px;
    margin-bottom: 8px;
    letter-spacing: -0.6px;
}

.main-index #section03 .stat-card.light .text-title {
    color: #101828;
}

.main-index #section03 .stat-card.dark .text-title {
    color: #fff;
}

.main-index #section03 .stat-card .label-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.3px;
}

.main-index #section03 .stat-card.blue .label-text {
    color: #fff;
}

.main-index #section03 .stat-card.light .label-text {
    color: #4A5565;
}

.main-index #section03 .stat-card.dark .label-text {
    color: #fff;
}

.main-index #section03 .stat-card .desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 8px;
    letter-spacing: -0.3px;
}

.main-index #section03 .stat-card.light .desc {
    color: #6B7280;
}

.main-index #section03 .stat-card.dark .desc {
    color: #9CA3AF;
}

/* Bottom Row: Sport Image Cards */
.main-index #section03 .bottom-row {
    width: 100%;
}

.main-index #section03 .sport-cards {
    display: flex;
    gap: 16px;
    padding-bottom: 10px;
}

.main-index #section03 .sport-cards::-webkit-scrollbar { 
    height: 6px; 
}

.main-index #section03 .sport-cards::-webkit-scrollbar-thumb { 
    background: #ccc; 
    border-radius: 3px; 
}

.main-index #section03 .sport-card {
    position: relative;
    width: calc(100% /5 - 16px);
    height: 324px;
    flex-shrink: 0;
    overflow: hidden;
}

.main-index #section03 .sport-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-index #section03 .sport-card .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-end;
}

.main-index #section03 .sport-card .overlay .name {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: clamp(18px,2vw,26px);
    font-weight: 700;
    line-height: 36px;
    color: #fff;
    letter-spacing: -0.72px;
}

.main-index #section03 .sport-card .overlay .count {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 20px;
    letter-spacing: -0.3px;
}

/* Responsive #section03 */
@media screen and (max-width: 1024px) {
    .main-index #section03 .container { 
        flex-direction: column; 
        gap: 40px; 
    }
    .main-index #section03 .left_con, 
    .main-index #section03 .right_con { 
        width: 100%; 
    }
}


/* ----------------------------------------------------------------
   Section 04: Notices & Gallery
   Layout: 2 Columns, Gap 64px
   ---------------------------------------------------------------- */
.main-index #section04 {
    padding: 80px 0;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.main-index #section04 .container {
    display: flex !important;
    flex-direction: row !important;
    gap: 64px;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.main-index #section04 .left_con,
.main-index #section04 .right_con {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Header (Icon + Title + Sub) */
.main-index #section04 .sec-header {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 56px;
    margin-bottom: 32px;
}

.main-index #section04 .sec-header .icon-box {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.main-index #section04 .sec-header .icon-box img {
    width: 100%;
    height: 100%;
}

.main-index #section04 .sec-header .header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-index #section04 .sec-header .tit {
    font-family: 'Gmarket Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    color: #101828;
    margin-bottom: 4px;
    letter-spacing: -0.4px;
}

.main-index #section04 .sec-header .sub {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4A5565;
    letter-spacing: -0.28px;
}

/* List Wrappers */
.main-index #section04 .notice-list-wrap {
    flex-grow: 1;
    margin-bottom: 32px;
}

.main-index #section04 .gallery-grid-wrap {
    flex-grow: 1;
    margin-bottom: 32px;
}

/* Buttons */
.main-index #section04 .btn-full {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    text-decoration: none;
    cursor: pointer;
}

.main-index #section04 .btn-full span {
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.3px;
}

.main-index #section04 .btn-full.white {
    background-color: #fff;
    border: 1px solid #EAECF0;
    color: #475467;
}

.main-index #section04 .btn-full.blue {
    background-color: #13027E;
    color: #fff;
}

/* Legacy Overrides for Skin Styles if needed */
.main-index #section04 .notice-skin-wrap ul {
    padding: 0;
    margin: 0;
}

/* Responsive #section04 */
@media screen and (max-width: 768px) {
    .main-index #section04 .container { 
        flex-direction: column !important; 
        gap: 60px;
    }
}


/* ----------------------------------------------------------------
   Section 05: Sponsors (Figma Node 118:324)
   Horizontal logo grid
   ---------------------------------------------------------------- */
.main-index #section05 {
    border-top: 1px solid #eee;
    padding: clamp(40px, 2.6vw, 50px) 0;
}

.main-index #section05 .partner-wr {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 20px;
}

.main-index #section05 .partner-list {
    display: flex;
    gap: 16px; /* 1280 - (200*6) = 80 / 5 gaps = 16px */
    justify-content: space-between;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.main-index #section05 .partner-list li {
    width: calc(100% / 6 - 16px);
    height: 84px;
    border: 1px solid #E4E4E4;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.3s;
}

.main-index #section05 .partner-list li:hover { 
    border-color: #13027E; /* Highlight on hover optional */
}

.main-index #section05 .partner-list img {
    height: 48px; /* Fixed height per Figma */
    max-width: 90%;
    object-fit: contain;
    display: block;
}

/* Responsive adjustment for Section 05 */
@media screen and (max-width: 1280px) {
    .main-index #section05 .partner-list {
        justify-content: center; /* Center on smaller screens if they wrap */
    }
}

/* ----------------------------------------------------------------
   Footer (Figma Node 118:398)
   ---------------------------------------------------------------- */
#footer {
    width: 100%;
    background-color: #F9FAFB;
    border-top: 1px solid #DADADA;
    padding: 50px 0 30px;
    font-family: 'Pretendard', sans-serif;
    margin-top: 0;
}

.footer-wrap {
    width: 100%;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Top: Logos */
.ft-top {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: flex-start; /* Changed from center to flex-start */
    padding-bottom: 30px;
    width: 100%;
    border-bottom: 2px dotted #4FB8FF;
}

.ft-logo-main {
    height: 60px;
    object-fit: contain;
}

.ft-logo-sub {
    height: 40px;
    object-fit: contain;
}

/* Mid: Social & Info */
.ft-mid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Changed from center to space-between */
    gap: 60px;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

/* Social Icons */
.ft-social {
    display: flex;
    gap: 12px;
}

.ft-social img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: 0.3s;
}

.ft-social img:hover {
    transform: scale(1.1);
}

/* Info Text */
.ft-info {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.info-item {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.info-item img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Bottom: Copyright & Links */
.ft-btm {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #000;
    padding-top: 20px; /* Separator spacing */
}

.ft-btm .copyright {
    margin: 0; /* Reset default p margin */
}

.ft-links {
    display: flex;
    gap: 24px;
}

.ft-links a {
    color: #555 !important;
    text-decoration: none;
    font-weight: 500;
}

.ft-links a:hover {
    text-decoration: underline;
    color: #000 !important;
}

/* Responsive Footer */
@media screen and (max-width: 1024px) {
    .ft-mid {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .ft-info {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }
    .ft-btm {
        flex-direction: column;
        gap: 15px;
    }
}