/* ====== 공통 ====== */
.ex-section {
  background: #fff;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  overflow: clip;
}

.ex-section__inner {
  width: min(1500px, 94vw);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) 0;
}

.ex-section__img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

/* ====== /1x/s1/ex_03.png 전용 ====== */
.ex-section--wide .ex-section__inner {
  max-width: 1920px;
  /* ✅ 이미지 최대폭 1920px */
  width: 100%;
}

.ex-section--wide .ex-section__img {
  max-width: 1920px;
  /* ✅ 이미지 자체도 1920px 제한 */
  margin: 0 auto;
  /* 가운데 정렬 */
}

@media (max-width: 768px) {
  .ex-section {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .ex-section__inner {
    width: 94vw;
    padding: 16px 0;
  }
}

.ex-section {
  /* 배경/레이아웃 여백(필요 없으면 지워도 됨) */
  background: #fff;
  /* 상단 둥근 모서리 쓰는 레이아웃이면 유지 */
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  overflow: clip;
}

.ex-section__inner {
  /* 가운데 정렬 + 최대 폭 컨테이너 */
  width: min(1200px, 94vw);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) 0;
}

.ex-section__img {
  display: block;
  width: 100%;
  height: auto;
  /* 비율 유지 */
  /* 선명도 */
  image-rendering: auto;
}

/* ====== 작은 화면 최적화 ====== */
@media (max-width: 768px) {
  .ex-section {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .ex-section__inner {
    width: 94vw;
    /* 여백 살짝 두고 꽉 차게 */
    padding: 16px 0;
    /* 모바일은 여백 축소 */
  }
}

.notice-section {
  text-align: center;
  margin: 60px 0;
  font-family: 'Noto Sans KR', sans-serif;
}

.notice-icon {
  position: relative;
  display: inline-block;
}

.notice-line {
  display: block;
  width: 30px;
  height: 3px;
  background: #00e0ff;
  /* 하늘색 라인 */
  margin: 0 auto 12px;
  border-radius: 3px;
}

.notice-title {
  font-size: 22px;
  font-weight: 700;
  margin: 10px 0 8px;
}

.notice-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}


/* ====== CONFIG ====== */
:root {
  --ex-max: 1200px;
  --ex-gap: clamp(16px, 3vw, 28px);
  --ex-radius: 18px;
  --ex-card-bg: #f3f3f3;
  --ex-btn-on: #00ffff;
  /* ✅ hover/active 색 */
}

/* ====== 섹션 레이아웃 ====== */
.ex-grid {
  background: #fff;
  padding: clamp(28px, 5vw, 60px) 0;
}

.ex-grid__inner {
  width: min(var(--ex-max), 92vw);
  margin: 0 auto;
}

/* ====== 3→2→1 그리드 ====== */
.ex-grid__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ex-gap);
  margin: 0 0 clamp(28px, 5vw, 46px);
  padding: 0;
}

/* 카드 (이미지 자리) */
.ex-card {
  position: relative;
  aspect-ratio: 1/1;
  /* 정사각형 */
  background: var(--ex-card-bg);
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #111;
  font-size: clamp(14px, 1.3vw, 16px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  overflow: hidden;
}

.ex-card span {
  opacity: .8;
}

/* 실제 이미지를 쓸 때 */
.ex-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ====== CTA 버튼 ====== */
.ex-cta {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  justify-content: center;
  align-items: center;
}

/* 기본: 옅은 회색 pill */
.btn-pill {
  --bd: #e9e9e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #f6f6f6;
  border: 1px solid var(--bd);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .03);
  color: #111;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .08s ease, box-shadow .2s ease, color .2s ease;
}

/* ✅ hover / focus / active에서 #00ffff */
.btn-pill:hover,
.btn-pill:active {
  background: var(--ex-btn-on);
  border-color: var(--ex-btn-on);
  color: #000;
}

.btn-pill:focus-visible {
  outline: 2px solid var(--ex-btn-on);
  outline-offset: 3px;
}

/* 눌렀을 때 살짝 눌림 */
.btn-pill:active {
  transform: translateY(1px);
}

/* ====== 반응형 ====== */
@media (max-width: 1024px) {
  .ex-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ex-grid__list {
    grid-template-columns: 1fr;
  }

  .btn-pill {
    min-width: 46%;
    height: 44px;
    font-weight: 700;
  }

  .ex-cta {
    gap: 14px;
    flex-wrap: wrap;
  }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .btn-pill {
    transition: none;
  }
}