@charset "utf-8";

/* 메인 히어로 영역 */
.main-contents > .hero {position: relative; overflow: hidden;}
.main-contents > .hero > .hero-inner {display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch;}

.hero-copy {display: flex;grid-column: 1 / 6;flex-direction: column;justify-content: flex-start;min-height: 420px;padding: 50px;background-color: #f5f5f3;border-radius: 16px;}
.hero-kicker{font-size: 14px; font-weight: 500; color: #67b4e7; margin-bottom: 10px; letter-spacing: 0.02em;}
.hero h1.hero-title {width: 410px; height: 88px; font-family: 'NanumSquareNeo', sans-serif; font-weight: 800; margin: 0; font-size: 48px; line-height: 60px; letter-spacing: -0.02em; color: #1b4965; background: url(../img/main-hero-title.png) no-repeat 0 0;}
.hero p.hero-desc {max-width: 720px; margin: 36px 0 0; font-size: 15px; line-height: 26px; color: #9f9f9f; font-weight: 300;}
.main-hero-button{width: max-content;height: 46px;padding: 0 44px 0 20px;margin-top: 40px;font-size: 18px;font-weight: 500;color: #fff;background: url(../img/right-arrow.png) no-repeat right 12px center;background-color: #1c4966;border-radius: 23px;}

.hero-panel {position: relative; grid-column: 6 / 13; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: url(../img/hero-panel2.png) no-repeat center; background-size: cover;}
.hero-panel-title {margin: 0; font-size: 20px; font-weight: 800; color: #0f172a;}
.hero-panel-grid {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px;}
.hero-mini {border-radius: 18px;}
.hero-mini .label {display: block; font-size: 13px; font-weight: 500; color: var(--muted);}
.hero-mini .value {display: block; font-size: 24px; line-height: 1.15; font-weight: 900; color: #0f172a;}
.hero-mini .sub {margin-top: 6px; font-size: 14px; color: #475569;}
.hsv_overview{padding: 20px; margin-top: auto; margin-left: 250px; background-color: rgba(255, 255,255, 0.9); border-radius: 16px;}
.hsv_overview > h5{font-family: 'NanumSquareNeo', sans-serif;font-size: 24px;line-height: 1;font-weight: 800;color: #00a5ce;}
.hsv_overview > p{font-size: 18px;}
.hero p.sub-title{line-height: 55px;letter-spacing: -0.02em;font-family: 'NanumSquareNeo', sans-serif;font-size: 35px;margin-top: 24px;font-weight: 800;}


/* 메인 콘텐츠 영역 */
.main-contents .btn-primary {background: var(--primary); color: #fff;}
.btn-primary:hover { background: var(--primary-deep); }
.main-contents .btn-secondary {color: #1b4965; border-color: #3d6fb0;}
.btn-secondary:hover { background: #f8fafc; }

.main-contents .section {padding-top: 42px; padding-bottom: 42px;}
.section-head {display: flex; grid-column: 1/4; justify-content: space-between; gap: 16px; margin-bottom: 20px;}
.section-kicker {display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: 13px; font-weight: 800; margin-bottom: 12px;}
.section-desc {margin: 10px 0 0; color: #64748b; font-size: 16px;}
.section-link {display: block; width: 36px; height: 36px; background: url(../img/plus.png) no-repeat center; border: 1px solid #fff; border-radius: 100%;}

.feature-grid,
.notice-layout,
.case-grid,
.stats-grid,
.banner-grid, 
.flow-check-layout {
  display: grid;
  gap: 16px;
}
.case-grid {grid-template-columns: repeat(1, minmax(0, 1fr));}
.stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
.banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* 메인 히어로 영역 밑 바로가기 */
.m-quick-menu > .card{position: relative;border: none;}
.m-quick-menu > .card::after{content: ''; position: absolute; right: 16px; bottom: 16px; width: 35px; height: 35px; background: url(../img/plus.png) no-repeat center; background-color: rgba(255, 255, 255, 0.25); border-radius: 8px;}
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card {position: relative; padding: 24px 64px 24px 24px;}
.feature-card:nth-child(1)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  ), url(../img/feature-card1_2.jpg) no-repeat center/cover;
  opacity: 0.15;
  z-index: 1;
}
.feature-card:nth-child(2)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  ), url(../img/feature-card2_2.jpg) no-repeat center/cover;
  opacity: 0.15;
  z-index: 1;
}
.feature-card:nth-child(3)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  ), url(../img/feature-card3_2.jpg) no-repeat center/cover;
  opacity: 0.15;
  z-index: 1;
}
.feature-card:nth-child(4)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.1) 40%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  ), url(../img/feature-card4_2.jpg) no-repeat center/cover;
  opacity: 0.15;
  z-index: 1;
}
.feature-card > * {position: relative; z-index: 2;}
.feature-card:nth-child(1){background-color: #62b6cb;}
.feature-card:nth-child(2){background-color: #5fa8d3;}
.feature-card:nth-child(3){background-color: #1b4965;}
.feature-card:nth-child(4){background-color: #355070;}
.feature-card:nth-child(1) h3{padding-left: 32px; background: url(../img/feature-card1.png) no-repeat left center;}
.feature-card:nth-child(2) h3{padding-left: 32px; background: url(../img/feature-card2.png) no-repeat left center;}
.feature-card:nth-child(3) h3{padding-left: 32px; background: url(../img/feature-card3.png) no-repeat left center;}
.feature-card:nth-child(4) h3{padding-left: 32px; background: url(../img/feature-card4.png) no-repeat left center;}
.feature-card h3 {margin: 0 0 8px;font-size: 20px;font-weight: 500;color: #fff;}
.feature-card p {margin: 0;color: rgba(255, 255, 255, 0.9);font-size: 16px;line-height: 26px;font-weight: 300;}


/* 사업 참여 핵심 요건 */
.key-point-layout{display: grid;gap: 20px;grid-template-columns: repeat(12, 1fr);}    
.key-point-layout > .case-grid{grid-column: 4/13;grid-template-columns: repeat(4, minmax(0, 1fr));}
.kicker{display: block;margin-bottom: 8px;font-size: 15px;font-weight: 500;color: #63b6cc;}
.requirements-card {position: relative;overflow: hidden;color: #fff;height: 360px;display: flex;flex-direction: column;padding: 24px;border: none;}
.requirements-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.4) 40%,
    rgba(0,0,0,0.2) 70%,
    rgba(0,0,0,0.1) 100%
  );
  z-index: 1;
}
.requirements-card > * {position: relative; z-index: 2;}
.requirements-card:nth-child(1){background: url(../img/requirements-card1.jpg) no-repeat center; background-size: cover;}
.requirements-card:nth-child(2){background: url(../img/requirements-card2.jpg) no-repeat center; background-size: cover;}
.requirements-card:nth-child(3){background: url(../img/requirements-card3.jpg) no-repeat center; background-size: cover;}
.requirements-card:nth-child(4){background: url(../img/requirements-card4.jpg) no-repeat center; background-size: cover;}
.card.requirements-card > .content-top > h3{margin: 12px 0 0 0;color: #fff;line-height: 1.5;font-size: 20px;}
.card.requirements-card > p{margin-top: auto;font-size: 16px;line-height: 26px;color: rgba(255, 255, 255, 0.9);} 


/* 사업 일정 안내 + 공지사항 */
.notice-layout {grid-template-columns: repeat(12, 1fr);}
.notice-layout > .card.schedule-card{grid-column: 1 / 5; height: 400px;border: none;background-color: #d9e9ed;}
.notice-layout > .card.schedule-card > .section-head > .section-title{color: #305a64;}
.schedule-item{display: flex;flex-direction: column;padding: 16px 0;}
.schedule-item > .badge{width: max-content;padding: 0;color: #488898;background-color: transparent;font-size: 16px;}
.schedule-item > .schedule-content-bottom{display: flex; justify-content: space-between; align-items: center; margin-top: 6px;}
.schedule-item > .schedule-content-bottom > strong{
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  color: #274a53;
  }
.schedule-item > .schedule-content-bottom > span{
  font-size: 16px;
  line-height: 26px;
  color: #63748b;
  }
.notice-layout > .card.board-card{display: flex; flex-direction: column; grid-column: 5 / 13; position: relative; border: none; background: url(../img/main-notice-bg.jpg) no-repeat center; background-size: cover;}
.notice-layout > .card.board-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27,73,101,0.9) 0%,
    rgba(27,73,101,0.4) 40%,
    rgba(27,73,101,0.3) 70%,
    rgba(27,73,101,0) 100%
  );
  z-index: 1;
}
.notice-layout > .card.board-card > * {position: relative; z-index: 2;}
.notice-layout > .card.board-card > .section-head > .section-title{color: #fff;}
.notice-list{gap: 8px;margin-top: auto;margin-left: 270px;}
.notice-item{padding: 14px 18px;background-color: #fff;border-radius: 6px;}
.notice-list, .schedule-list {display: flex; flex-direction: column;}
.notice-item{display: flex; justify-content: space-between; align-items: center;}
.schedule-item + .schedule-item {border-top: 1px solid #c8dfe5;}
.notice-item strong, .schedule-item strong {font-size: 17px;color: #0f172a;font-weight: 400;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.notice-item span, .schedule-item span {font-size: 15px;color: #94a3b8;white-space: nowrap;}


/* 사업 참여 흐름 + 참여 전 확인사항 */
.flow-check-layout {grid-template-columns: repeat(2, 1fr);gap: 30px; align-items: stretch;}
.flow-check-layout .case-grid, .flow-check-layout .stats-grid {flex: 1; /* 남은 높이를 카드가 꽉 채우도록 함 */}
.flow-check-layout > div {display: flex; flex-direction: column;}
.flow-wrap > .case-grid.flow-grid{gap: 0;}
.flow-wrap > .case-grid > .card{display: flex;align-items: center;gap: 16px;padding: 24px 0;border: none;background: transparent;box-shadow: none; border-radius: 0;}
.flow-wrap > .case-grid > .card + .card{border-top: 1px solid #eeeeee;}
.flow-wrap > .case-grid > .card > .badge {flex: 0 0 auto;width: 32px;height: 32px; color: #fff; background-color: #121212;}
.flow-wrap > .case-grid > .card > h3 {flex: 0 0 120px;width: 120px;min-width: 120px;margin: 0;font-size: 22px;}
.flow-wrap > .case-grid > .card > p {flex: 1 1 auto;min-width: 0;font-size: 16px;}
.flow-card, .stat-card {height: 100%; /* 카드들이 동일한 높이를 가지도록 강제 */}
.stat-card {display: flex;flex-direction: column;position: relative;overflow: hidden;background: #041c31;}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  filter: grayscale(1);
  z-index: 0;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.2) 40%,
    rgba(0,0,0,0.1) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}
.stat-card:nth-child(1)::before{background: url(../img/stat-card1.jpg) no-repeat; background-size: cover;}
.stat-card:nth-child(2)::before{background: url(../img/stat-card2.jpg) no-repeat; background-size: cover;}
.stat-card:nth-child(3)::before{background: url(../img/stat-card3.jpg) no-repeat; background-size: cover;}
.stat-card:nth-child(4)::before{background: url(../img/stat-card4.jpg) no-repeat; background-size: cover;}
.stat-card > * {position: relative; z-index: 2;}
.stat-card .value {display: block; width: max-content; font-size: 34px; font-weight: 500; color: #fff; line-height: 1.1; margin-bottom: 8px;}
.stat-card .label {display: block;font-size: 18px;font-weight: 500;color: #fff;margin-bottom: 6px;}
.flow-card, .stat-card p {font-size: 16px;color: #64748b;}
.stat-card p{margin-top: auto;color: rgba(255, 255, 255, 0.9);}

/* 팝업 */
.popup_wrap {position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5);}
.popup_inner {position: relative; width: 500px; background: #fff; border-radius: 20px; overflow: hidden;}

.popup_slider {overflow: hidden;}
.popup_track {display: flex; transition: transform 0.5s ease;}
.popup_slide {flex: 0 0 100%;}
.popup_slide img {width: 100%; display: block;}
.popup_controls {display: flex; justify-content: center; align-items: center; gap: 12px; padding: 20px;}
.popup_pagination {display: flex; gap: 8px;}
.popup_pagination button {width: 20px; height: 4px; border: 0; background: #ccc; cursor: pointer;}
.popup_pagination button.active {background: #000;}
.popup_close {position: absolute; top: 20px; right: 20px;
    z-index: 2;
    width: 36px;
    height: 36px;
    background: url(../img/popup_close.png) no-repeat center;
    background-color: #fff;
    border: 1px solid #c7c7c7;
    border-radius: 100%;
    cursor: pointer;
}
.popup_bottom {padding: 0 20px 20px;}
.popup_prev, .popup_next{width: 24px; height: 24px; border: 0; cursor: pointer;}
.popup_prev{background: url(../img/popup_left.png) no-repeat center;}
.popup_next{background: url(../img/popup_right.png) no-repeat center;}