/* ==========================================================================
   ¼­ºêÆäÀÌÁö Àü¿ë ½ºÅ¸ÀÏ
   ========================================================================== */


h3.title1 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom:10px;
}

h3.title1 i {
	color: #004ea2;
}

.record-content-box { margin-bottom:50px; }

.notice-box { margin-bottom:30px; }

.no-data-msg { margin:auto; padding:10px; text-align:center; color:#7f7f7f; }

hr { margin: 30px 0; }

/* 1. ¼­ºê ºñÁÖ¾ó (°íÁ¤ 470px À̹ÌÁö ¿µ¿ª) */
.sub-visual {
    position: relative;
    width: 100%;
    height: 470px;
    background: url('../img/main/main_img01.jpg') no-repeat center center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 60px; /* Çì´õ À§Ä¡¿¡ ¸ÂÃá »ó´Ü ¿©¹é */
}

/* ¾îµÎ¿î ¿À¹ö·¹ÀÌ·Î ÅؽºÆ® °¡µ¶¼º È®º¸ */
.sub-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 25, 47, 0.55);
}

.sub-visual-text {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.sub-visual-text h2 {
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sub-visual-text p {
    font-size: 1.05rem;
    font-weight: 300;
    opacity: 0.9;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. ¼­ºêÆäÀÌÁö ŸÀÌƲ ¹× °æ·Î(Breadcrumb) Çì´õ */
.sub-page-header {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 40px;
    border-bottom: 2px solid #e2e8f0;
}

/* ³×ºñ°ÔÀÌ¼Ç °æ·Î (HOME > ´ëºÐ·ù > ¼ÒºÐ·ù) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem; /* 14px */
    color: #64748b;
    margin-bottom: 12px;
}

.breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #004ea2;
}

.breadcrumb i {
    font-size: 0.7rem;
    color: #cbd5e1;
}

.breadcrumb .current {
    color: #004ea2;
    font-weight: 600;
}

/* ´ëÇü ¸Þ´º ŸÀÌƲ */
.sub-page-title {
    font-size: 2.375rem; /* 38px ´ëÇü ŸÀÌƲ */
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

/* ŸÀÌƲ ÇÏ´Ü Çùȸ ºí·ç Æ÷ÀÎÆ® ¶óÀÎ */
.sub-page-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -26px; /* border-bottom ¶óÀÎ À§Ä¡¿Í °áÇÕ */
    width: 100px;
    height: 4px;
    background-color: #004ea2;
    border-radius: 2px;
}

/* 3. º»¹® ÄÁÅÙÃ÷ ¿µ¿ª ±âº» ¿©¹é */
.sub-page-body {
    min-height: 400px; /* ¼­ºêÆäÀÌÁö ±âº» ÃÖ¼Ò ³ôÀÌ */
    padding-top: 10px;
}

/* ¹ÝÀÀÇü ¸ð¹ÙÀÏ ¸ðµå */
@media (max-width: 768px) {
    .sub-visual {
        height: 340px; /* ¸ð¹ÙÀÏ¿¡¼­´Â ³ôÀ̸¦ ÁÙ¿© ´ä´äÇÔ ÇØ¼Ò */
    }

    .sub-visual-text h2 {
        font-size: 1.625rem;
    }

    .sub-page-title {
        font-size: 1.75rem; /* 28px */
    }
}



/* ==========================================================================
   ȸÀå Àλ縻 (intro01.asp) Àü¿ë ½ºÅ¸ÀÏ
   ========================================================================== */

.greeting-wrapper {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    padding-top: 10px;
}

/* 1. ÇÁ·ÎÇÊ Ä«µå ¿µ¿ª (ÁÂÃø) */
.president-profile {
    flex-shrink: 0;
    width: 300px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.profile-img-box {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #cbd5e1;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

.profile-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.profile-info .association {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 4px;
}

.profile-info .name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.profile-info .name span {
    font-size: 1.1rem;
    font-weight: 500;
    color: #334155;
}

/* 2. Àλ縻 ÅؽºÆ® ¿µ¿ª (¿ìÃø) */
.greeting-content {
    flex-grow: 1;
}

.greeting-headline {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px dashed #cbd5e1;
}

.greeting-headline .quote-icon {
    font-size: 2.2rem;
    color: #004ea2;
    opacity: 0.2;
    margin-bottom: 10px;
    display: block;
}

.greeting-headline h2 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.45;
    color: #1e293b;
    font-weight: 400;
    letter-spacing: -1px;
}

.greeting-headline h2 strong {
    font-weight: 800;
    color: #004ea2; /* Çùȸ ºí·ç Æ÷ÀÎÆ® */
}

.greeting-text p {
    font-size: 1.05rem; /* 16.8px °¡µ¶¼º ³ôÀº Å©±â */
    line-height: 1.85;
    color: #334155;
    margin-bottom: 22px;
    word-break: keep-all; /* ÇÑ±Û ´Ü¾î ²÷±è ¹æÁö */
    letter-spacing: -0.3px;
}

.greeting-text p.closing {
    font-weight: 700;
    color: #0f172a;
    margin-top: 30px;
}

/* 3. ¼­¸í ¿µ¿ª */
.greeting-signature {
    margin-top: 45px;
    padding-top: 25px;
    border-top: 0px solid #0f172a;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.greeting-signature .date {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.greeting-signature .sign-name {
    font-size: 1.25rem;
    color: #0f172a;
    letter-spacing: -0.5px;
}

.greeting-signature .sign-name strong {
    font-weight: 600;
    margin-right: 8px;
}

.greeting-signature .sign-name .seal-text {
    font-weight: 800;
    color: #004ea2;
}

/* ¹ÝÀÀÇü ¸ð¹ÙÀÏ ¸ðµå */
@media (max-width: 992px) {
    .greeting-wrapper {
        flex-direction: column;
        gap: 35px;
    }

    .president-profile {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .profile-img-box {
        height: 360px;
    }

    .greeting-headline h2 {
        font-size: 1.4rem;
    }

    .greeting-text p {
        font-size: 0.975rem;
    }

    .greeting-signature {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* ==========================================================================
   ³¡    ---------- ȸÀå Àλ縻 (intro01.asp) Àü¿ë ½ºÅ¸ÀÏ
   ========================================================================== */



 /* ==========================================================================
   Á¶Á÷µµ (intro02.asp) Àü¿ë ½ºÅ¸ÀÏ
 ========================================================================== */

.org-chart-wrap {
    width: 100%;
    text-align: center;
    padding: 10px 0 30px;
}

.org-chart-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
}
 /*  ³¡...    Á¶Á÷µµ (intro02.asp) Àü¿ë ½ºÅ¸ÀÏ */




 /* ==========================================================================
   ¿À½Ã´Â ±æ (intro03.asp) Àü¿ë ½ºÅ¸ÀÏ
   ========================================================================== */

/* 1. Ä«Ä«¿À Áöµµ ¿µ¿ª */
.map-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

#map, #map2, #map3 {
    width: 100%;
    height: 450px;
}

/* Áöµµ ¿ìÃø ÇÏ´Ü Äü ¹öÆ° */
.map-quick-btn {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.map-quick-btn a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-kakao-map {
    background-color: #fee500;
    color: #191919;
}

.btn-kakao-map:hover {
    background-color: #fada00;
}

.btn-kakao-route {
    background-color: #004ea2;
    color: #ffffff;
}

.btn-kakao-route:hover {
    background-color: #003875;
}

/* 2. ±âº» Á¤º¸ Ä«µå ±×¸®µå */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.info-card .card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(0, 78, 162, 0.1);
    color: #004ea2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-card .card-text h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.info-card .card-text p {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    word-break: keep-all;
}

/* 3. ´ëÁß±³Åë ¾È³» ¼½¼Ç */
.transport-section {
    padding-top: 10px;
	margin-bottom: 50px;
}

.transport-section .section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.transport-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transport-item {
    display: flex;
    align-items: flex-start;
    padding: 20px 24px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    gap: 24px;
}

.transport-badge {
    flex-shrink: 0;
    width: 120px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.transport-badge.subway {
    background-color: #f1f5f9;
    color: #2563eb;
}

.transport-badge.bus {
    background-color: #f1f5f9;
    color: #16a34a;
}

.transport-badge.car {
    background-color: #f1f5f9;
    color: #475569;
}

.transport-desc {
    flex-grow: 1;
}

.transport-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.transport-desc ul li {
    position: relative;
    padding-left: 12px;
    font-size: 0.975rem;
    color: #334155;
    line-height: 1.6;
}

.transport-desc ul li::before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
    color: #004ea2;
    font-weight: bold;
}

.transport-desc ul li strong {
    color: #0f172a;
}

/* ³¡. ----    ¿À½Ã´Â ±æ (intro03.asp) Àü¿ë ½ºÅ¸ÀÏ */





/* ==========================================================================
   ´ëȸÁ¤º¸ »ó´Ü Çì´õ & ¹öÆ° ¿µ¿ª ½ºÅ¸ÀÏ (¼öÁ¤º»)
   ========================================================================== */

/* 1. »ó´Ü ÄÁÅ×ÀÌ³Ê (Å׵θ® ¹× ±×¸²ÀÚ Á¦°Å) */
.comp-top-header {
    background-color: transparent;
    padding: 10px 0 30px 0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 35px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}




/* 2. ´ëȸ¸í ¹× ±â°£ (°¡¿îµ¥ Á¤·Ä & ±ÛÀÚ Å©±â È®´ë) */
.comp-title-area {
    text-align: center;
    margin-bottom: 28px;
}

.comp-main-title {
    font-size: 2.1rem; /* ±ÛÀÚ Å©±â È®´ë */
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.8px;
    line-height: 1.3;
    display: inline-block;
}

.comp-period {
    font-size: 1.35rem; /* ´ëȸ¸í¿¡ ¸ÂÃç ³¯Â¥ Å©±âµµ Á¶Á¤ */
    font-weight: 600;
    color: #475569;
    margin-left: 8px;
    vertical-align: middle;
}

/* 3. ¹öÆ° ³»ºñ°ÔÀÌ¼Ç ¹Ù (ÁÂ/¿ì ºÐ¸®) */
.comp-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ¹öÆ° °øÅë (³ôÀÌ ¹× ³Êºñ È®´ë) */
.btn-comp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px; /* ³ôÀÌ(»óÇÏ 13px) ¹× ³Êºñ(Á¿ì 22px) Å°¿ò */
    font-size: 0.95rem;  /* ±ÛÀÚ Å©±â Å°¿ò */
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.2;
    min-width: 110px;    /* ÃÖ¼Ò ³Êºñ È®º¸ */
}

/* ÁÂÃø ¹öÆ° (Á¤º¸/±â·Ï ±×·ì) */
.btn-comp.info {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-comp.info:hover {
    background-color: #004ea2;
    border-color: #004ea2;
    color: #ffffff;
}

/* ¿ìÃø Ãß÷ ¹öÆ° (¿¬ÇÑ ºí·ç °­Á¶) */
.btn-comp.action {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.btn-comp.action:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* ¸ÞÀÎ Âü°¡½Åû ¹öÆ° (Çùȸ ´ëÇ¥ Ä÷¯ °­Á¶) */
.btn-comp.primary {
    background-color: #004ea2;
    border: 1px solid #004ea2;
    color: #ffffff;
}

.btn-comp.primary:hover {
    background-color: #003875;
    border-color: #003875;
    box-shadow: 0 4px 12px rgba(0, 78, 162, 0.3);
}

/* 4. ¹ÝÀÀÇü ·¹À̾ƿô Á¶À² */
@media (max-width: 992px) {

}


/* ³¡.  ´ëȸÁ¤º¸ »ó´Ü Çì´õ & ¹öÆ° ¿µ¿ª ½ºÅ¸ÀÏ  ========================================================================== */



/* ==========================================================================
   ´ëȸÁ¤º¸ (competition.asp) - Âü°¡ÆÀ ¼½¼Ç ½ºÅ¸ÀÏ
   ========================================================================== */

.comp-section {
    margin-bottom: 50px;
}

/* 1. ¼ÒŸÀÌƲ Çì´õ */
.comp-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #a2b0d3;
    margin-bottom: 20px;
}

.comp-section-title h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
}

.comp-section-title h3 i {
    color: #004ea2; /* Çùȸ ´ëÇ¥ ºí·ç Ä÷¯ */
    font-size: 1.15rem;
}

.comp-section-title .team-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #004ea2;
    background-color: #eff6ff;
    padding: 3px 10px;
    border-radius: 12px;
    margin-left: 6px;
}

/* 2. Âü°¡ÆÀ ¹ÝÀÀÇü ¿ÀÅä ±×¸®µå (ÆÀ ¼ö¿¡ ±¸¾Ö¹ÞÁö ¾ÊÀ½) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* 3. ÆÀ Ä«µå °³º° ½ºÅ¸ÀÏ */
.team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.team-item:hover {
    border-color: #004ea2;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 78, 162, 0.1);
}

/* ÆÀ ¸íĪ ¸µÅ© */
.team-item .team-name {
    font-size: 0.975rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    padding-right: 10px;
    transition: color 0.2s ease;
}

.team-item .team-name:hover {
    color: #004ea2;
}

/* ¼±¼ö¸í´Ü ¾ÆÀÌÄÜ ¹öÆ° */
.team-item .btn-roster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.95rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.team-item .btn-roster:hover,
.btn-roster.active {
    background-color: #004ea2;     color: #ffffff;
}

/* ³¡...   ´ëȸÁ¤º¸ (competition.asp) - Âü°¡ÆÀ ¼½¼Ç ½ºÅ¸ÀÏ   ========================================================================== */



/* ==========================================================================
   ´ëȸÁ¤º¸ (competition.asp) - °æ±âÀÏÁ¤ ¼½¼Ç ½ºÅ¸ÀÏ
   ========================================================================== */

/* 1. ¹ÝÀÀÇü Ä«µå ±×¸®µå ·¹À̾ƿô (±âº» PC 3¿­) */
.schedule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
}

/* 2. ³¯Â¥º° ÀÏÁ¤ Ä«µå */
.schedule-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.schedule-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Ä«µå »ó´Ü ³¯Â¥ Çì´õ */
.schedule-card-header {
    background-color: #0f172a;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-card-header i {
    color: #38bdf8;
}

/* Ä«µå º»¹® ¹× Å×À̺í */
.schedule-card-body {
    padding: 0;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.schedule-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 10px 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.schedule-table td {
    padding: 10px 6px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    vertical-align: middle;
    color: #334155;
}

.schedule-table tr:last-child td {
    border-bottom: none;
}

.schedule-table .stadium {
    font-weight: 600;
    color: #1e293b;
    word-break: keep-all;
    line-height: 1.3;
}

.schedule-table .time {
    font-weight: 700;
    color: #64748b;
}

/* 3. °æ±â ´ëÁø ¹× Á¡¼ö/°á°ú ½ºÅ¸ÀÏ */
.match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.85rem;
}

/* ÁøÇà Àü °æ±â (VS) */
.match-teams.upcoming .team {
    font-weight: 600;
    color: #1e293b;
}

.match-teams.upcoming .vs {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Á¾·áµÈ °æ±â (Á¡¼ö ¹× ½Â/ÆÐ) */
.match-teams.ended .team {
    font-weight: 600;
    color: #64748b;
}

.match-teams.ended .team.win {
    color: #0f172a;
    font-weight: 800;
}

.match-teams.ended .score {
    font-weight: 800;
    color: #004ea2;
    background-color: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ½Â/ÆÐ ¹èÁö */
.badge-win {
    display: inline-block;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ef4444; /* ½Â¸® ·¹µå Æ÷ÀÎÆ® */
    background-color: #fef2f2;
    padding: 1px 4px;
    border-radius: 3px;
    margin: 0 2px;
}

.badge-lose {
    display: inline-block;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    background-color: #f1f5f9;
    padding: 1px 4px;
    border-radius: 3px;
    margin: 0 2px;
}


/* ==========================================================================
   ´ëȸÁ¤º¸ (competition.asp) - ´ëÁøÇ¥ ¼½¼Ç ½ºÅ¸ÀÏ
   ========================================================================== */

.bracket-wrap {
    width: 100%;
    text-align: center;
	padding: 24px;
    /*
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;

	*/
}

.bracket-wrap img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 8px;
}



/* ==========================================================================
   ÆÀ ·Î±×ÀÎ ÆäÀÌÁö ½ºÅ¸ÀÏ
   ========================================================================== */

.login-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 15px;
}

/* ·Î±×ÀÎ Ä«µå ÄÁÅ×ÀÌ³Ê */
.login-card {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    padding: 36px 32px;
    box-sizing: border-box;
}

/* 1. Çì´õ ¿µ¿ª */
.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: #f1f5f9;
    color: #004ea2;
    border-radius: 50%;
    font-size: 1.4rem;
    margin-bottom: 14px;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.login-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
}

/* 2. Æû ±×·ì ¹× Input */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.form-control {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    font-size: 0.925rem;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-control::placeholder {
    color: #94a3b8;
}

/* Focus »óÅÂ */
.form-control:focus {
    background-color: #ffffff;
    border-color: #004ea2;
    box-shadow: 0 0 0 3px rgba(0, 78, 162, 0.12);
}

.form-control:focus + .input-icon,
.input-icon-wrap:focus-within .input-icon {
    color: #004ea2;
}

/* 3. ·Î±×ÀÎ ¹öÆ° */
.btn-login2 {
    width: 100%;
    height: 48px;
    margin-top: 6px;
    background-color: #0f172a;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-login2:hover {
    background-color: #004ea2;
}

.btn-login2:active {
    transform: scale(0.99);
}

/* 4. ÇÏ´Ü ¾È³»¹® */
.login-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.help-text {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.help-text i {
    color: #94a3b8;
}





/* ==========================================================================
   ´ëÁøÃß÷ ½ºÅ¸ÀÏ (Lottery Draw UI - ¼ýÀÚ Á¦°Å ¹öÀü)
   ========================================================================== */

.lottery-section {

    margin: 0 auto;
    padding: 20px 15px;
}

/* 1. ¾È³» ¹Ú½º */
.lottery-notice-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #004ea2;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 25px;
}

.notice-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notice-title i {
    color: #004ea2;
}

.notice-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.6;
}

.badge-taken-sample {
    display: inline-block;
    padding: 2px 8px;
    background-color: #e2e8f0;
    color: #64748b;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* 2. Ãß÷ ¹ÝÀÀÇü ±×¸®µå */
.lottery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 35px;
}

.lottery-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Ãß÷ Ä«µå µðÀÚÀÎ */
.ball-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 105px;
    background-color: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    text-align: center;
    box-sizing: border-box;
}

/* ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ */
.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f1f5f9;
    color: #004ea2;
    border-radius: 50%;
    font-size: 1.2rem;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.status-txt {
    font-size: 0.825rem;
    font-weight: 700;
    color: #004ea2;
}

/* HOVER »óÅ (¼±Åà °¡´É) */
.lottery-item:not(.taken):hover .ball-card {
    border-color: #004ea2;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 78, 162, 0.12);
}

.lottery-item:not(.taken):hover .card-icon {
    background-color: #004ea2;
    color: #ffffff;
}

/* CHECKED »óÅ (¼±ÅõÊ) */
.lottery-item input[type="radio"]:checked + .ball-card {
    background-color: #004ea2;
    border-color: #004ea2;
    box-shadow: 0 8px 16px rgba(0, 78, 162, 0.25);
    transform: translateY(-3px);
}

.lottery-item input[type="radio"]:checked + .ball-card .card-icon {
    background-color: #ffffff;
    color: #004ea2;
}

.lottery-item input[type="radio"]:checked + .ball-card .status-txt {
    color: #ffffff;
}

/* TAKEN »óÅ (ÀÌ¹Ì ´Ù¸¥ ÆÀÀÌ ¿Ï·áÇÑ À§Ä¡) */
.lottery-item.taken .ball-card {
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.85;
}

.lottery-item.taken .card-icon {
    background-color: #e2e8f0;
    color: #94a3b8;
}

.lottery-item.taken .team-name {
    font-size: 0.825rem;
    font-weight: 700;
    color: #1e293b;
    word-break: keep-all;
    line-height: 1.2;
}

/* 3. ÇÏ´Ü ¹öÆ° ¿µ¿ª */
.lottery-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-lottery {
    flex: 1;
    max-width: 220px;
    height: 52px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-lottery.submit {
    background-color: #004ea2;
    color: #ffffff;
}

.btn-lottery.submit:hover {
    background-color: #003875;
}

.btn-lottery.cancel {
    background-color: #64748b;
    color: #ffffff;
}

.btn-lottery.cancel:hover {
    background-color: #475569;
}



/* ------------------------------------------------------------------------------------------------- ¹Ìµð¾î Äõ¸®  ¹ÝÀÀÇü ¸ð¹ÙÀÏ ¸ðµå */
@media (max-width: 992px) {
    .info-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

	.comp-main-title {
        font-size: 1.75rem;
    }

    .comp-period {
        display: block; /* ¸ð¹ÙÀÏ/ÅÂºí¸´¿¡¼­´Â ³¯Â¥¸¦ ´ÙÀ½ ÁÙ·Î ÀÚ¿¬½º·´°Ô À̵¿ */
        margin-left: 0;
        margin-top: 6px;
        font-size: 1.15rem;
    }

    .comp-nav-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-group {
        width: 100%;
    }

    .btn-group.left-group,
    .btn-group.right-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 8px;
    }

    .btn-comp {
        padding: 12px 10px;
        font-size: 0.9rem;
        min-width: auto;
    }
}

@media (max-width: 768px) {

	.lottery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .ball-card {
        height: 95px;
        padding: 6px;
    }

    .card-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .lottery-btn-wrap {
        width: 100%;
    }

    .btn-lottery {
        max-width: none;
    }


    #map {
        height: 300px;
    }

    .info-card-grid {
        grid-template-columns: 1fr;
    }

    .transport-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .transport-badge {
        width: auto;
    }

	.team-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 8px;
    }

    .team-item {
        padding: 10px 12px;
    }

    .team-item .team-name {
        font-size: 0.9rem;
    }

    .team-item .btn-roster {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

	.schedule-grid {
        grid-template-columns: 1fr; /* ¸ð¹ÙÀÏ 1¿­ */
    }

    .schedule-table {
        font-size: 0.825rem;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 10px 4px;
    }


	.bracket-wrap {
        padding: 12px;
    }

}






/* ==========================================================================
   ºÎº° ÆÀ ¸ñ·Ï Àü¿ë CSS (°¡·Î 4°³ ¹èÄ¡ ÃÖÀûÈ­)
   ========================================================================== */

/* 1. »ó´Ü ºÎº° ÅÇ ¸µÅ© ¹Ù */
.team-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.team-filter-bar .btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.team-filter-bar .btn-filter:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.team-filter-bar .btn-filter.active {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.2);
}

/* 2. º»¹® ÄÁÅ×ÀÌ³Ê ¹× ¼½¼Ç ŸÀÌƲ */
.team-content-container {
    width: 100%;
}

.team-category-section {
    margin-bottom: 35px;
}

.comp-section-title.sm {
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0f172a;
}

.comp-section-title.sm h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.comp-section-title.sm h4 i {
    color: #004ea2;
}

/* 3. ÆÀ Ä«µå ±×¸®µå (PC ±âº» 4¿­ ¹èÄ¡) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* °¡·Î 4°³ °íÁ¤ */
    gap: 12px; /* 4°³ ¹èÄ¡¸¦ À§ÇØ °£°ÝÀ» 12px·Î Ãà¼Ò */
}

/* 4. ÆÀ Ä«µå °³º° ½ºÅ¸ÀÏ (4¿­ ¹èÄ¡ ÃÖÀûÈ­) */
.team-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px; /* ³»ºÎ ¿ä¼Ò °£°Ý Ãà¼Ò */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 15px; /* Ä«µå ¿©¹é Ãà¼Ò */
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.team-card:hover {
    border-color: #004ea2;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 78, 162, 0.08);
}

/* ÁÂÃø ÆĶõ»ö Æ÷ÀÎÆ® ¶óÀÎ */
.team-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #cbd5e1;
    transition: background-color 0.2s ease;
}

.team-card:hover::before {
    background-color: #004ea2;
}

/* 5. ¿¥ºí·³ À̹ÌÁö ¿µ¿ª (54px·Î ´ÙÀ̾îÆ®) */
.team-emblem-wrap {
    width: 65px;
    height: 65px;
    min-width: 54px;
    /* border-radius: 50%;
    border: 1px solid #e2e8f0; */
    background-color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
}

.team-emblem-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 6. ÆÀ Á¤º¸ ÅؽºÆ® ¿µ¿ª */
.team-info {
    flex: 1;
    min-width: 0; /* ¸»ÁÙÀÓÇ¥(...) Á¤»ó µ¿ÀÛ¿ë */
}

.team-name {
    font-size: 1rem; /* 4¿­¿¡ ¸ÂÃç ÆùÆ® »çÀÌÁî Á¶Á¤ */
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-meta {
    list-style: none;
    font-size: 0.9rem; /* ÅؽºÆ® Å©±â Ãà¼Ò */
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    margin: 0;
}

.team-meta li {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.team-meta li i {
    width: 12px;
    color: #64748b;
    font-size: 0.75rem;
    text-align: center;
}

.team-meta span.label {
    color: #64748b;
}

.team-meta span.val {
    font-weight: 700;
    color: #1e293b;
}


/* ==========================================================================
   ¼­ºêÆäÀÌÁö ´ë½Ãº¸µå ¸Þ´º Ä«µå CSS
   ========================================================================== */

/* Ä«µå ±×¸®µå ÄÁÅ×ÀÌ³Ê (ÀÚµ¿ ¹ÝÀÀÇü ¹èÄ¡) */
.quick-menu-grid {
    display: grid;
    /* ÃÖ¼Ò 300px Å©±â¸¦ À¯ÁöÇϸç, È­¸é ³Êºñ¿¡ µû¶ó ÀÚµ¿À¸·Î ÁÙ ¹Ù²Þ */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

/* ¸Þ´º Ä«µå ±âº» ½ºÅ¸ÀÏ */
.quick-menu-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 20px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

/* Hover ½Ã Ä«µå ½ºÅ¸ÀÏ º¯È­ */
.quick-menu-card:hover {
    border-color: #004ea2;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 78, 162, 0.08);
}

/* ÁÂÃø ¾ÆÀÌÄÜ ¹Ú½º */
.quick-menu-card .menu-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background-color: #f0f6ff;
    color: #004ea2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all 0.25s ease;
}

.quick-menu-card:hover .menu-icon {
    background-color: #004ea2;
    color: #ffffff;
}

/* ÅؽºÆ® ÄÁÅÙÆ® ¿µ¿ª */
.quick-menu-card .menu-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ¸Þ´º Á¦¸ñ & È­»ìÇ¥ */
.quick-menu-card .menu-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    transition: color 0.2s ease;
}

.quick-menu-card:hover .menu-title {
    color: #004ea2;
}

/* È­»ìÇ¥ ¾ÆÀÌÄÜ ¹× Hover ¾Ö´Ï¸ÞÀÌ¼Ç */
.quick-menu-card .arrow-icon {
    font-size: 0.85rem;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.quick-menu-card:hover .arrow-icon {
    color: #004ea2;
    transform: translateX(4px); /* ¿À¸¥ÂÊÀ¸·Î »ì¦ À̵¿ */
}

/* ¸Þ´º ¼³¸í ±Û */
.quick-menu-card .menu-desc {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
    word-break: keep-all; /* ´Ü¾î ´ÜÀ§ ÁÙ¹Ù²Þ */
}

/* °­Á¶/Âü°í»çÇ× ÅؽºÆ® */
.quick-menu-card .sub-note {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: #e11d48; /* ÀºÀºÇÑ ºÓÀº»ö °­Á¶ */
    font-weight: 500;
}

/* ¹ÝÀÀÇü ´ëÀÀ (¸ð¹ÙÀÏ È­¸é) */
@media (max-width: 576px) {
    .quick-menu-grid {
        grid-template-columns: 1fr; /* ¸ð¹ÙÀÏ¿¡¼­´Â 1ÁÙ¿¡ 1°³¾¿ */
        gap: 12px;
    }

    .quick-menu-card {
        padding: 16px;
        gap: 14px;
    }

    .quick-menu-card .menu-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.15rem;
    }

    .quick-menu-card .menu-title {
        font-size: 1rem;
    }
}



/* ==========================================================================
   ¹ÝÀÀÇü ºê·¹ÀÌÅ©Æ÷ÀÎÆ® (È­¸é Å©±âº° ¿­ °³¼ö Á¶Àý)
   ========================================================================== */
@media (max-width: 1200px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr); /* 1200px ÀÌÇÏ: 3¿­ */
    }
}

@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* 992px ÀÌÇÏ: 2¿­ */
    }
}

@media (max-width: 576px) {
    .team-filter-bar .btn-filter {
        flex: 1 1 calc(33.333% - 6px);
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .team-grid {
        grid-template-columns: 1fr; /* ¸ð¹ÙÀÏ: 1¿­ */
    }
}