@charset "utf-8";

/* 스킵 내비게이션  */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 140px; text-align: center;}
#skip a:active,
#skip a:focus {top: 0;}

/* 공통 */
.container {max-width: 1400px; margin: 0 auto;}

@media all and (max-width:1400px) {
    .container {max-width: 96%;}
}

/* 기본 섹션 스타일 */
#main section {padding-block: 60px;padding-inline: 64px;}

/* 태블릿 */
@media (max-width: 1199px) {
  #main section {padding-block: 30px;padding-inline: 32px;}
}
/* 모바일 */
@media (max-width: 767px) {
  #main section {padding-block: 30px;padding-inline: 10px;}
}

/* 섹션별 커스터마이징 */
#main .section01 {padding-top: 80px;padding-bottom: 60px;}
#main .section04 {padding-bottom: 100px;}

/* 태블릿 */
@media (max-width: 1199px) {
    #main .section01 {padding-top: 30px;}
}


/* header */
header {position: relative;z-index: 100;}
header #util {height: 40px; line-height: 40px; text-align: right; border-bottom: 1px solid #33333311;}
header #util .member_link a {display: inline-block; margin-left: 35px; position: relative;}
header #util .member_link a::before {display: block; position: absolute; content: ""; left: -20px; top: 50%; transform: translateY(-50%); background-size: auto;}
header #util .member_link a:nth-of-type(1):before {background: url(../../images/home/util_login.png) no-repeat center;width: 16px; height: 15px;}
header #util .member_link a:nth-of-type(2):before {background: url(../../images/home/util_join.png) no-repeat center;width: 16px; height: 16px;}

header #gnb {height: 100px; border-bottom: 1px solid #33333311; position: relative;}

header #gnb .gnb_wrap  {display: flex;align-items: center;justify-content: space-between;width: 100%;}
header #gnb .gnb_wrap nav { display: flex;gap: 30px;align-items: center;}
header #gnb .gnb_wrap nav > ul {display: flex;gap: 60px;}
header #gnb .gnb_wrap nav > ul > li > a {font-size: 1.25rem; /* 20px */ font-weight: 500; color: #333;}
header #gnb .gnb_wrap nav li {position: relative;}
header #gnb .gnb_wrap nav li > ul {position: absolute;top: 63px;left: 0;background: white;border: 1px solid #ddd;opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;z-index: 100;}
header #gnb .gnb_wrap nav li:nth-of-type(1) > ul {left: -35px;}
header #gnb .gnb_wrap nav li:nth-of-type(2) > ul {left: -15px;}
header #gnb .gnb_wrap nav li:nth-of-type(3) > ul {left: -24px;}
header #gnb .gnb_wrap nav li:nth-of-type(4) > ul {left: -24px;}
header #gnb .gnb_wrap nav li:hover > ul {opacity: 1;visibility: visible;transform: translateY(0);}
header #gnb .gnb_wrap nav li ul li {white-space: nowrap;}
header #gnb .gnb_wrap nav li ul li a { font-size: 1rem; /* 16px */display: block; padding: 10px 50px 10px  22px;text-align: left;}
header #gnb .gnb_wrap nav li ul li:hover a { background: #f6fafd; color: #035a9c;}
header #gnb .gnb_wrap .hamburger {  display: flex;flex-direction: column;gap: 5px;cursor: pointer;margin-left: 20px;}
header #gnb .gnb_wrap .hamburger div {width: 25px;height: 3px;background: #333;}

/* 모바일 메뉴 */
    .mobile-menu {position: fixed;top: 0;right: -342px;width: 300px;height: 100%;background: white;box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);padding: 20px;transition: right 0.3s ease;z-index: 200;overflow-y: auto;}
    .mobile-menu.active {right: 0;}
    .mobile-menu .close-btn {font-size: 24px;font-weight: bold;text-align: right;cursor: pointer;margin-bottom: 20px;}
    .mobile-menu ul {list-style: none;}
    .mobile-menu > ul > li {margin-bottom: 10px;}
    .mobile-menu .depth1 > a {display: block;padding: 15px 20px;font-weight: bold; background-color: #ffffff; cursor: pointer;font-size: 1.125rem; /* 18px */border-bottom: 1px solid #d1dbe271; position: relative;}
    .mobile-menu .depth1 > a::before {position: absolute; display: block; content: ""; width: 5px; height: 5px; background-color: #035a9c; top: 50%; transform: translateY(-50%); left: 5px;}
    .mobile-menu .depth2 {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;background: #fafafa;}
    .mobile-menu .depth2 a {display: block;padding: 10px 20px;font-size: 1rem;border-top: 1px solid #eee;}
    .mobile-menu .depth2.open {max-height: 500px; /* 충분히 큰 값 */}
    .overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5);display: none;z-index: 100;}
    .overlay.active {display: block;}

    @media (max-width: 1200px) {
        header #gnb {height: 66px;}
        header #gnb .gnb_wrap h1 img {width: 260px;}
        header #gnb .gnb_wrap nav > ul {display: none;}
    }


/* main */

    /* 공통 */
    .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 24px;}
    .section-title {font-size: 1.5rem;font-weight: 700;color: #222;}
    .section-more {font-size: 1rem;color: #666;text-decoration: none;transition: color 0.2s ease;}
    .section-more:hover {color: #333; font-weight: 500;}

    @media (max-width: 1000px) {
        .section-title {font-size: 1.25rem;}
    }

    /* 대회일정 */
    .schedule-wrap {display: flex;gap: 40px;align-items: flex-start;}
    .schedule-wrap .calendar-wrap {flex: 1;min-width: 280px; width: 100%;}
    .schedule-wrap .calendar-wrap img {width: 100%;border-radius: 8px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    .schedule-wrap .info-wrap {flex: 1.2;}
    .schedule-wrap .btn-group {display: flex;gap: 12px;margin-bottom: 24px;}
    .schedule-wrap .btn-action {padding: 22px 20px 22px 75px;background: #0055aa;color: #fff;text-decoration: none;border-radius: 4px;font-weight: 600;font-size: 1.25rem /* 20px */;transition: background-color 0.3s; display: block; width: 32%;position: relative;}
    .schedule-wrap .btn-action:nth-of-type(1) {background-color: #06BBE5;}
    .schedule-wrap .btn-action:nth-of-type(2) {background-color: #2C4EAF;}
    .schedule-wrap .btn-action:nth-of-type(3) {background-color: #6D6D6D;}
    .schedule-wrap .btn-action::before {position: absolute; display: block; content: ""; width: 40px; height: 40px; top: 50%; transform: translateY(-50%); left: 25px;}
    .schedule-wrap .btn-action:nth-of-type(1):before {background: url(../images/home/btn_icon01.png) no-repeat center;}
    .schedule-wrap .btn-action:nth-of-type(2):before {background: url(../images/home/btn_icon02.png) no-repeat center;}
    .schedule-wrap .btn-action:nth-of-type(3):before {background: url(../images/home/btn_icon03.png) no-repeat center;}
    .schedule-wrap .btn-action:hover {background: #003d80;}
    .schedule-wrap .schedule-list {display: flex;flex-direction: column;gap: 16px;}
    .schedule-wrap .schedule-item {display: flex;gap: 16px;background: #f9f9f9;padding: 10px 16px;border-radius: 6px;align-items: start;}
    .schedule-wrap .d-day {color: #fff;font-weight: bold;padding: 2px 12px;border-radius: 6px;font-size: 14px;white-space: nowrap; min-width: 35px; text-align: center;}
    .schedule-wrap .d-day.dday-active {background-color: #034EA2;}
    .schedule-wrap .d-day.dday-ended, .schedule-wrap .d-day.dday-ing  {background-color: #6D6D6D;}
    .schedule-wrap .schedule-info {width: 100%;}
    .schedule-wrap .schedule-info .title {font-size: 16px;font-weight: 600;margin-bottom: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 75%;}
    .schedule-wrap .schedule-info .date,.schedule-info .place {font-size: 14px;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 75%;}
    
    @media (max-width: 1400px) {
    .schedule-wrap .btn-action {font-size: 1.125rem; padding: 22px 20px 22px 55px;}
    .schedule-wrap .btn-action::before {width: 30px; height: 30px; left: 20px;}
     .schedule-wrap .btn-action:nth-of-type(1):before,  .schedule-wrap .btn-action:nth-of-type(2):before,  .schedule-wrap .btn-action:nth-of-type(3):before  {background-size: 100%;}
    }

    @media (max-width: 991px) {
        .schedule-wrap {flex-direction: column;}
        .schedule-wrap .info-wrap {width: 100%;}
        .btn-group {flex-wrap: wrap;gap: 8px; justify-content: space-between;}
        .schedule-wrap .btn-action {width: 24%; padding: 22px 0px 22px 55px;}
    }
    @media (max-width: 751px) {
         .btn-group {flex-wrap: wrap;gap: 8px; justify-content: none;}
        .schedule-wrap .btn-action {width: 100%; padding: 22px 0px 22px 55px;}
      }
    @media (max-width: 460px) {
        .schedule-wrap .btn-action {font-size: 1rem;}
         .schedule-wrap .schedule-item {flex-direction: column;}
         .schedule-wrap .schedule-info .title {max-width: 90%;}
    }

        /* 달력 */
        .calendar-container {padding: 20px;border-radius: 12px;border: 1px solid #eee;font-family: sans-serif;box-shadow: 0 2px 6px rgba(0,0,0,0.05);}
        .calendar-header {display: flex;justify-content: space-between;font-size: 20px;font-weight: bold;margin-bottom: 10px;padding: 0px 27px;}
        .calendar-weekdays, .calendar-days {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;}
        .calendar-weekdays div {font-size: 12px;font-weight: 600;color: #555;padding-bottom: 6px;}
        .day {padding: 18px 8px;margin: 2px;border-radius: 6px;font-size: 13px;color: #222;cursor: pointer;}
        .day.inactive {color: #ccc;}
        .day.active {background: #1d86e2;color: #fff;}

   @media (max-width: 460px) {
        .calendar-header {padding: 0 10px;}
        .day {padding: 10px 8px;}
   }

    /* 공지사항 */
    .notice-popup {display: flex;gap: 40px;}

    .notice-box {flex: 2;}
    .notice-title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}
    .notice-title h2 {font-size: 20px;font-weight: bold;}
    .notice-title .btn-more {font-size: 14px;color: #666;text-decoration: none;}
    .notice-list {list-style: none;padding: 0;margin: 0;}
    .notice-list li {display: flex;justify-content: space-between;padding: 20px 30px;border-radius: 20px; background: #F1F9FB; margin-bottom: 30px;}
    .notice-list a {color: #333;text-decoration: none;font-size: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 75%;}
    .notice-list .label {display: block; background: #06BBE5; color: #fff ;font-weight: 600;margin-right: 4px; margin-bottom: 16px; width: 90px; text-align: center; padding-left: 15px; border-radius: 20px; position: relative;}
    .notice-list .label::before {position: absolute; display: block; content: ""; width: 15px; height: 16px; background: url(../images/home/notice_icon.png) no-repeat center; top: 50%; transform: translateY(-50%); left: 15px;}
    .notice-list .title {font-weight: 700;color: #333; font-size: 1.125rem;}
    .notice-list .date {color: #999;font-size: 13px;white-space: nowrap;}

    /* 팝업존 */
    .popup-box {flex: 1;min-width: 300px;}
    .popup-slider img {width: 100%;height: auto;border-radius: 8px;object-fit: cover;}

    @media (max-width: 1400px) {
         .notice-list li {margin-bottom: 12px; padding: 15px 30px;}
    }
    @media (max-width: 1200px) {
        .notice-list li {margin-bottom: 15px; padding: 15px 20px;}
        .notice-list .label {margin-bottom: 10px;}
        .notice-list .title {font-size: 1rem;}
    }

    @media (max-width: 992px) {
        .notice-popup {flex-direction: column;}
        .popup-box {width: 100%;}
    }

    /* 포토갤러리 */
    .gallery {padding: 0;}
    .gallery-list {display: flex;flex-wrap: wrap;gap: 24px;list-style: none;padding: 0;margin: 0;}
    .gallery-item {width: calc(25% - 18px); /* 4개 한줄, 24px 간격 반영 */background: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 6px rgba(0,0,0,0.06);transition: transform 0.3s ease;}
    .gallery-item:hover {transform: translateY(-4px);}
    .gallery-item .thumb {width: 100%; aspect-ratio: 4 / 3;overflow: hidden;}
    .gallery-item .thumb img {width: 100%;height: 100%;object-fit: cover;display: block;}
    .gallery-item .info {padding: 12px 16px;}
    .gallery-item .info .title {font-size: 16px;font-weight: 600;margin-bottom: 6px;color: #333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .gallery-item .info .date {font-size: 13px;color: #999;}

    @media (max-width: 1080px) {
    .gallery-item {width: calc(50% - 12px); /* 2개 한줄 */}
    }

    @media (max-width: 480px) {
    .gallery-item {width: 100%; /* 1개 한줄 */}
    }


    /* 후원사 슬라이더 */
    .sponsor-slider a {display: block;transition: transform 0.3s ease; margin-right: 10px;}
    .sponsor-slider img {max-height: 60px;object-fit: contain;margin: 0 auto;filter: grayscale(100%);opacity: 0.8;transition: all 0.3s ease;border: 1px solid #ccc; width: 100%;}
    .sponsor-slider a:hover img {filter: none;opacity: 1;border: 1px solid #ccc;}

/* footer */
footer {background-color: #f9f9f9;padding: 30px 10px;font-size: 1rem;color: #666;}
.footer-inner {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-start;}
.footer-info {flex: 1 1 60%; min-width: 250px;}
.footer-links {margin-bottom: 20px;}
.footer-links a {color: #444;text-decoration: none;margin: 0 5px; font-weight: 500;}
.footer-links a:first-child {margin: 0 5px 0 0;}
.footer-links span {color: #ccc;}
.footer-desc p {margin: 3px 0;}

.footer-dropdowns {flex: 1 1 8%;min-width: 200px;text-align: right;display: flex;flex-direction: column;gap: 8px;}
.footer-dropdowns select {width: 100%;max-width: 240px;padding: 5px;font-size: 1rem;}

.snsicon {display: inline-block;height: 30px;width: 30px;}
.snsicon a {display: block;width: 30px;height: 30px;}
.snsicon a img {width: 100%;}


@media (max-width: 960px) {
    footer {font-size: 0.875rem;}
    .footer-inner {flex-direction: column;align-items: center;text-align: center;}
    .footer-info, .footer-dropdowns {flex: 1 1 100%;text-align: center;}
    .footer-info {margin-bottom: 20px;}
    .footer-dropdowns select {max-width: 100%;}
    .footer-links {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;}
}

/* ===== X TOP BUTTON ===== */
.x-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #222;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 9999; 
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.x-top-btn::after {
  content: "↑"; 
  font-size: 20px;
  display: block;
  text-align: center;
  line-height: 48px;
}

.x-top-btn.x-show {
  opacity: 0.85;
  visibility: visible;
}

.x-top-btn:hover {
  opacity: 1;
  background: #000;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .x-top-btn {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .x-top-btn::after {
    font-size: 18px;
    line-height: 44px;
  }
}