@charset "UTF-8";
/* =========================================================================
   파트너십 제휴 혜택 (support-criteria) — 디테일 통일 개선
   - HTML(Tailwind 클래스)은 그대로 두고, #screen2 스코프로 시각 파편화만 정리
   - tailwind-build.css 이후에 로드
   - 통일 기준: 라운드 16px / 카드 그림자 1단계 / 섹션 간격 규격화
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. 디자인 토큰 (이 페이지 전용)
   ------------------------------------------------------------------------- */
#screen2 {
  --r-card: 16px;          /* 카드 라운드 통일 (rounded-2xl/xl/3xl → 16px) */
  --r-pill: 9999px;        /* 알약/배지 */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
  --shadow-card-hover: 0 6px 16px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
  --border-card: #e7ebf0; /* slate-200 계열 살짝 정리 */
  --gap-section: 3.5rem;  /* 섹션 사이 표준 간격 */
}

/* -------------------------------------------------------------------------
   1. 라운드 통일 : 2xl/xl/3xl 를 16px 로 (full 은 유지)
   ------------------------------------------------------------------------- */
#screen2 .rounded-2xl,
#screen2 .rounded-xl,
#screen2 .rounded-3xl {
  border-radius: var(--r-card) !important;
}
/* 배지·알약·아이콘 원형은 그대로 유지 (rounded-full 은 건드리지 않음) */

/* -------------------------------------------------------------------------
   2. 그림자 통일 : 카드 그림자를 한 단계로 (xs/sm/md 혼용 정리)
   hover 는 살짝 떠오르는 한 종류로 통일
   ------------------------------------------------------------------------- */
#screen2 .shadow-xs,
#screen2 .shadow-sm,
#screen2 .shadow-md {
  box-shadow: var(--shadow-card) !important;
}
#screen2 .group:hover .group-hover\:shadow-lg,
#screen2 .hover\:shadow-lg:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

/* -------------------------------------------------------------------------
   3. 카드 보더/전환 통일 : 경계선 색과 hover 전환을 매끄럽게
   ------------------------------------------------------------------------- */
#screen2 [class*="border-slate-200"],
#screen2 [class*="border-slate-100"] {
  border-color: var(--border-card) !important;
}
#screen2 .transition-all,
#screen2 [class*="transition"] {
  transition-duration: .2s !important;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}
/* 카드 hover 시 살짝 떠오르는 미세 모션 (그림 카드/솔루션 카드 공통) */
#screen2 .group:hover > .rounded-2xl,
#screen2 .group:hover > div[class*="rounded"] {
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   4. 섹션 간 여백 규격화 (mb-10/12/14/16 혼용 → 표준화)
   ------------------------------------------------------------------------- */
#screen2 .mb-16 { margin-bottom: 4rem !important; }
#screen2 .mb-14 { margin-bottom: var(--gap-section) !important; }
#screen2 .mb-12 { margin-bottom: var(--gap-section) !important; }
#screen2 .mb-10 { margin-bottom: 2.5rem !important; }
/* 섹션 내부 항목 간격 (space-y-12 / space-y-14 통일) */
#screen2 .space-y-12 > * + *,
#screen2 .space-y-14 > * + * {
  margin-top: var(--gap-section) !important;
}

/* -------------------------------------------------------------------------
   5. 무상/선택 지원 상단 안내 박스 : 정렬·패딩 미세 정리
   ------------------------------------------------------------------------- */
#screen2 [class*="bg-blue-50"][class*="rounded-2xl"],
#screen2 [class*="bg-orange-50"][class*="rounded-2xl"] {
  padding: 1.25rem 1.5rem !important;
}
/* 배지(알약) 세로 정렬·자간 미세 조정 */
#screen2 [class*="rounded-full"][class*="text-xs"] {
  letter-spacing: .01em;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   6. 강의 포스터 카드 : 캡션 여백·정렬 통일
   ------------------------------------------------------------------------- */
#screen2 .aspect-\[386\/254\] { border-radius: var(--r-card) !important; }
#screen2 .group .mt-3,
#screen2 .group .mt-2 { line-height: 1.45; }

/* -------------------------------------------------------------------------
   7. 하단 CTA 버튼 : 그림자·전환 통일, hover 상승감
   ------------------------------------------------------------------------- */
#screen2 a[class*="bg-slate-900"],
#screen2 button[class*="bg-slate-900"] {
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
#screen2 a[class*="bg-slate-900"]:hover,
#screen2 button[class*="bg-slate-900"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover) !important;
}

/* -------------------------------------------------------------------------
   8. 타이포 미세 정리 : 섹션 제목 자간·행간 안정화
   ------------------------------------------------------------------------- */
#screen2 h2, #screen2 h3 {
  letter-spacing: -.01em;
  word-break: keep-all;
}
#screen2 p { word-break: keep-all; }

/* -------------------------------------------------------------------------
   9. 모바일 미세 보정 (639px 이하)
   ------------------------------------------------------------------------- */
@media screen and (max-width: 639px) {
  #screen2 { --gap-section: 2.5rem; }
  /* 상단 안내 박스 : 배지가 제목 아래로 자연스럽게 */
  #screen2 [class*="bg-blue-50"][class*="rounded-2xl"],
  #screen2 [class*="bg-orange-50"][class*="rounded-2xl"] {
    padding: 1.1rem 1.15rem !important;
  }
  /* 카드 그리드 간격 살짝 축소 */
  #screen2 .gap-4 { gap: .85rem !important; }
}

/* 3개 카드 : 배경을 아이콘 색 계열로 "연하게" 채움 (색 반전, 연한 버전) */
#screen2 .grid.md\:grid-cols-3 > div {
  border: 1px solid transparent !important;
}
/* 1) 부모ON — orange 연한 톤 배경 */
#screen2 .grid.md\:grid-cols-3 > div:nth-child(1) {
  background: #ffedd5 !important;      /* orange-100, 연한 주황 */
  border-color: #fdba74 !important;    /* orange-300 */
}
/* 2) ECS — indigo 연한 톤 배경 */
#screen2 .grid.md\:grid-cols-3 > div:nth-child(2) {
  background: #e0e7ff !important;      /* indigo-100, 연한 보라 */
  border-color: #a5b4fc !important;    /* indigo-300 */
}
/* 3) 라이브 — rose 연한 톤 배경 */
#screen2 .grid.md\:grid-cols-3 > div:nth-child(3) {
  background: #ffe4e6 !important;      /* rose-100, 연한 핑크 */
  border-color: #fda4af !important;    /* rose-300 */
}

/* 아이콘 박스 : 진한 브랜드 색 배경 + 흰 아이콘 (연한 카드 위 포인트) */
#screen2 .grid.md\:grid-cols-3 > div .w-11.h-11 { color: #fff !important; }
#screen2 .grid.md\:grid-cols-3 > div:nth-child(1) .w-11.h-11 { background: #f97316 !important; }
#screen2 .grid.md\:grid-cols-3 > div:nth-child(2) .w-11.h-11 { background: #6366f1 !important; }
#screen2 .grid.md\:grid-cols-3 > div:nth-child(3) .w-11.h-11 { background: #f43f5e !important; }

/* 텍스트는 원래 브랜드 색 유지 (연한 배경 위에서 잘 읽힘) — 별도 오버라이드 없음 */

/* hover : 살짝 떠오름 */
#screen2 .grid.md\:grid-cols-3 > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(15,23,42,.12) !important;
}
/* -------------------------------------------------------------------------
   10. 3개 카드(부모ON·ECS·라이브) : 아이콘 옆 라벨+제목 가로 배치 + 여백 축소
   ------------------------------------------------------------------------- */
/* 양끝 벌어짐(justify-between) 해제 + 패딩 축소 */
#screen2 .grid.md\:grid-cols-3 > div {
  justify-content: flex-start !important;
  padding: 20px !important;
}
/* 상단 블록을 그리드로 : 왼쪽 아이콘 / 오른쪽 라벨·제목 */
#screen2 .grid.md\:grid-cols-3 > div > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: start;
}
/* 아이콘 : 라벨+제목 두 줄 높이 차지, 아래 여백 제거 */
#screen2 .grid.md\:grid-cols-3 > div .w-11.h-11 {
  margin-bottom: 0 !important;
  grid-row: 1 / span 2;
  align-self: start;
}
/* 금액 라벨 : 아이콘 오른쪽 첫 줄 */
#screen2 .grid.md\:grid-cols-3 > div .w-11.h-11 + span {
  grid-column: 2;
  margin-bottom: 2px !important;
}
/* 제목 : 아이콘 오른쪽 둘째 줄 */
#screen2 .grid.md\:grid-cols-3 > div h4 {
  grid-column: 2;
  margin-bottom: 0 !important;
}
/* 설명문 : 전체 폭으로 아래에 */
#screen2 .grid.md\:grid-cols-3 > div h4 + p {
  grid-column: 1 / -1;
  margin-top: 12px !important;
}
/* 하단 "✓ ...지급" : 위로 당기고 구분선 여백 축소 */
#screen2 .grid.md\:grid-cols-3 > div > div:last-child {
  margin-top: 12px !important;
  padding-top: 12px !important;
}

/* -------------------------------------------------------------------------
   11. 행사형솔루션 : PC 기존 2+1 배치 / 모바일 검정 배너 + 4개(2×2)
   ------------------------------------------------------------------------- */
/* 기본(PC, 640px+) : 모바일 전용 요소 숨김 */
#screen2 .expedition-mo { display: none; }
#screen2 .expedition-pc { display: block; }

/* 모바일(639px 이하) : PC 블록 숨김, 모바일 전용 노출 */
@media screen and (max-width: 639px) {
  #screen2 .expedition-pc { display: none; }
  #screen2 .expedition-mo { display: block; }
  #screen2 .expedition-hero.expedition-mo { display: block; }
}

/* 모바일 배너 기본 틀 (이미지 로드 전/실패 시 대비 검정 배경) */
#screen2 .expedition-hero > div {
  background-color: #1f2937;
  position: relative;
  overflow: hidden;
  min-height: 130px;
  padding: 28px 20px;
  box-shadow: 0 8px 22px rgba(15,23,42,.22);
}
#screen2 .expedition-badge {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fde68a; margin-bottom: 6px;
}
#screen2 .expedition-title {
  position: relative; z-index: 1;
  color: #fff; font-size: 22px; font-weight: 900; letter-spacing: -.02em;
}

/* -------------------------------------------------------------------------
   12. 내맘대로 원정대 : PC / 모바일 이미지 적용
   ------------------------------------------------------------------------- */
/* PC 검정 박스 → PC 이미지 */
#screen2 .expedition-pc .bg-slate-900 {
  background-color: #1f2937 !important;
  background-image: url('https://mediafiles.mydongsim.com/mediafile/dongsimLab/E/a_pc.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* PC 박스 안 텍스트 숨김 (이미지에 문구 포함) */
#screen2 .expedition-pc .bg-slate-900 > span { display: none; }

/* 모바일 배너 → 모바일 이미지 (이미지 비율에 맞춰 높이 자동) */
#screen2 .expedition-hero > div {
  background-image: url('https://mediafiles.mydongsim.com/mediafile/dongsimLab/E/a_mobile.png') !important;
  background-size: contain !important;      /* 이미지 전체가 잘리지 않게 */
  background-position: center !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 386 / 254 !important;       /* 이미지 비율로 높이 결정 */
  min-height: 0 !important;                 /* 기존 고정 높이 해제 */
  padding: 0 !important;                    /* 여백 제거 (이미지 꽉 차게) */
}
/* 모바일 배너 안 배지·제목·장식 숨김 (이미지에 문구 포함) */
#screen2 .expedition-hero .expedition-badge,
#screen2 .expedition-hero .expedition-title { display: none; }
#screen2 .expedition-hero > div::before,
#screen2 .expedition-hero > div::after { display: none; }

/* -------------------------------------------------------------------------
   13. 파트너기관 월간 운영 지원 : #546A93 카드 스타일
   ------------------------------------------------------------------------- */
/* 카드 배경을 남색으로 (이 영역은 "총 9회"·"원 운영 솔루션"을 가진 유일한 카드) */
#screen2 .bg-white:has(> .flex .text-amber-800) {
  background: #546A93 !important;
  border-color: #546A93 !important;
}

/* -------------------------------------------------------------------------
   13. 파트너기관 월간 운영 지원 : #546A93 카드 스타일
   ------------------------------------------------------------------------- */
/* 카드 배경 남색 */
#screen2 .monthly-support {
  background: #546A93 !important;
  border-color: #546A93 !important;
}
/* 제목·설명 : 남색 배경 위에서 읽히게 밝은 색 */
#screen2 .monthly-support h3 { color: #fff !important; }
#screen2 .monthly-support p { color: rgba(255,255,255,.85) !important; }
/* 상단 배지 : 반투명 흰 배경 + 밝은 글씨 */
#screen2 .monthly-support .bg-amber-50 {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
#screen2 .monthly-support .bg-amber-50 i { color: #fde68a !important; }
/* 우측 "총 9회" 박스 : 남색 위에서 살짝 밝은 톤 */
#screen2 .monthly-support .bg-amber-50\/70 {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
}
#screen2 .monthly-support .bg-amber-50\/70 .text-amber-800,
#screen2 .monthly-support .bg-amber-50\/70 .text-slate-900 { color: #fff !important; }
#screen2 .monthly-support .bg-amber-50\/70 .text-amber-700 { color: #fde68a !important; }