/* Apply 섹션 - 현대적이고 미니멀한 디자인 */

.section-apply {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  color: #111827;
  position: relative;
}

.apply-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* 전체화면폭 - 벽에 붙이기 */
.apply-template-grid .apply-details {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.apply-title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  margin: 0 auto 80px;
  line-height: 1.2;
  text-align: center;
  color: #0f172a;
  letter-spacing: -0.04em;
  padding: 120px min(5vw, 80px) 0;
  position: relative;
}

.apply-title::after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #2c5aa0, transparent);
  border-radius: 0;
}

.apply-details {
  width: 100%;
  padding: 0 min(5vw, 80px) 100px;
}

.apply-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

/* 기본 항목 스타일 - 미니멀하고 현대적 */
.apply-details li {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.apply-item-content {
  position: relative;
  z-index: 2;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 리스트 항목 오버레이 공통 스타일 */
.apply-details li .apply-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 리스트 상단 오버레이 */
.apply-details li .apply-overlay-top {
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 리스트 하단 오버레이 */
.apply-details li .apply-overlay-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 리스트 좌측 오버레이 */
.apply-details li .apply-overlay-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 리스트 우측 오버레이 */
.apply-details li .apply-overlay-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 배경 이미지가 있는 경우 오버레이 항상 표시 */
.apply-show-overlay .apply-details li.has-bg-image .apply-overlay {
  opacity: 1;
}

/* 일반 아이템은 오버레이 없음 (배경 이미지가 있는 경우만 표시) */

/* 오버레이 숨김 설정 */
.apply-hide-overlay .apply-overlay {
  display: none !important;
}

/* 배경 이미지가 있는 경우 - 전체화면폭 */
.apply-details li.has-bg-image {
  position: relative;
  margin-left: calc(-1 * min(5vw, 80px));
  margin-right: calc(-1 * min(5vw, 80px));
  width: calc(100% + 2 * min(5vw, 80px));
  max-width: 100vw;
  border-bottom: none !important;
  border-top: none !important;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);
  z-index: 1;
  overflow: hidden;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 배경 이미지 어두운 오버레이 (많이 줄임, 테두리 보이도록) */
.apply-details li.has-bg-image::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apply-details li.has-bg-image::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apply-details li.has-bg-image .apply-item-content {
  padding: 40px min(5vw, 80px);
}

.apply-details li.has-bg-image .apply-label,
.apply-details li.has-bg-image span {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 배경 이미지가 있을 때 링크 색상 - 밝은 파란색 (폰트 테두리) */
.apply-details li.has-bg-image span a,
.apply-details li.has-bg-image .apply-link {
  color: #60a5fa;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.7),
    -1px -1px 0 rgba(96, 165, 250, 0.4),
    1px -1px 0 rgba(96, 165, 250, 0.4),
    -1px 1px 0 rgba(96, 165, 250, 0.4),
    1px 1px 0 rgba(96, 165, 250, 0.4);
}

.apply-details li.has-bg-image span a:hover,
.apply-details li.has-bg-image .apply-link:hover {
  color: #93c5fd;
  transform: translateY(-1px);
  text-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.8),
    -1px -1px 0 rgba(147, 197, 253, 0.6),
    1px -1px 0 rgba(147, 197, 253, 0.6),
    -1px 1px 0 rgba(147, 197, 253, 0.6),
    1px 1px 0 rgba(147, 197, 253, 0.6);
}

.apply-details li.has-bg-image .apply-label i {
  color: #ffffff;
}

.apply-details li:last-child {
  border-bottom: none;
}

/* 배경 이미지 카드 앞뒤 카드의 border 제거 (간격 없애기) */
.apply-details li.has-bg-image + li {
  border-top: none;
}

/* 호버 효과 - 심플하고 세련된 스타일 */
.apply-details li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 배경 이미지 없는 항목 - 미묘한 배경색 변화 */
.apply-details li:not(.has-bg-image):hover {
  background-color: rgba(248, 250, 252, 0.6);
}

/* 배경 이미지가 있는 항목 - 호버 시 테두리 표시 (중복 제거, 위에서 이미 정의됨) */

.apply-details li.has-bg-image:hover {
  transform: none;
  border-color: #e2e8f0;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4), 0 0 0 rgba(0, 0, 0, 0);
}

/* 배경 이미지가 있는 항목 - 호버 시 오버레이 약간 강화 */
.apply-details li.has-bg-image:hover::before {
  background: rgba(0, 0, 0, 0.12);
}

.apply-details li.has-bg-image:hover::after {
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 100%);
}

/* 라벨 스타일 */
.apply-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* 정렬 옵션 - 라벨 */
.apply-align-left .apply-label {
  justify-content: flex-start;
  text-align: left;
}

.apply-align-center .apply-label {
  justify-content: center;
  text-align: center;
}

.apply-align-right .apply-label {
  justify-content: flex-end;
  text-align: right;
}

.apply-label i {
  color: #2c5aa0;
  font-size: clamp(22px, 2.8vw, 28px);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* 내용 스타일 */
.apply-details li span {
  font-size: clamp(18px, 2.5vw, 26px);
  line-height: 1.5;
  color: #475569;
  letter-spacing: -0.01em;
  max-width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* 줄바꿈 간격 조정 - br 태그 다음 span의 간격 줄이기 */
.apply-details li br + span {
  margin-top: 0;
}

/* br 태그 높이 조정 - 줄바꿈 간격 줄이기 */
.apply-details li br {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0.3;
  height: 0.5em;
  content: "";
}

/* 정렬 옵션 - 내용 */
.apply-align-left .apply-details li span {
  text-align: left;
}

.apply-align-center .apply-details li span {
  text-align: center;
}

.apply-align-right .apply-details li span {
  text-align: right;
}

/* 내부 목록 스타일 */
.apply-details li span ul {
  margin: 12px 0 0 0;
  padding: 0;
  padding-left: 24px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apply-details li span ul li {
  padding: 0;
  border: none;
  position: relative;
  padding-left: 20px;
}

.apply-details li span ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #64748b;
  font-weight: 600;
}


/* 링크 스타일 - 심플하지만 감각적 (폰트 테두리) */
.apply-details li span a,
.apply-link {
  color: #2c5aa0;
  text-decoration: none;
  font-weight: 500;
  text-shadow: 
    -1px -1px 0 rgba(44, 90, 160, 0.3),
    1px -1px 0 rgba(44, 90, 160, 0.3),
    -1px 1px 0 rgba(44, 90, 160, 0.3),
    1px 1px 0 rgba(44, 90, 160, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
}

.apply-details li span a:hover,
.apply-link:hover {
  color: #1e40af;
  text-shadow: 
    -1px -1px 0 rgba(30, 64, 175, 0.5),
    1px -1px 0 rgba(30, 64, 175, 0.5),
    -1px 1px 0 rgba(30, 64, 175, 0.5),
    1px 1px 0 rgba(30, 64, 175, 0.5);
  transform: translateY(-1px);
}


/* 강조 텍스트 */
.apply-details li span strong {
  font-weight: 600;
  color: #0f172a;
}

/* 라벨이 없는 항목 (내용만 있는 경우) */
.apply-details li > span:only-child {
  font-size: clamp(18px, 2.5vw, 26px);
  line-height: 1.5;
  color: #64748b;
  padding: 0;
}

/* ===== 그리드 템플릿 스타일 ===== */
.apply-template-grid .apply-details {
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.apply-grid-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.apply-grid {
  display: grid;
  grid-template-columns: repeat(var(--items-per-row-pc, 3), 1fr);
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.apply-grid-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 1px solid transparent;
  background: #ffffff;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 250px;
  justify-content: center;
  overflow: hidden;
}

/* 배경 이미지 그리드 아이템 사이 간격 제거 */
.apply-grid-item.has-bg-image {
  border: none !important;
  margin: 0 !important;
  z-index: 1;
}

/* 배경 이미지 그리드 아이템 앞뒤의 border 제거 */
.apply-grid-item.has-bg-image + .apply-grid-item {
  border-left: none !important;
}

.apply-grid-item:has(+ .apply-grid-item.has-bg-image) {
  border-right: none !important;
}

/* 배경 이미지 그리드 아이템이 연속으로 있을 때 간격 제거 */
.apply-grid-item.has-bg-image + .apply-grid-item.has-bg-image {
  margin-left: 0 !important;
  border-left: none !important;
}

.apply-grid-item-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4면 오버레이 공통 스타일 */
.apply-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 상단 오버레이 */
.apply-overlay-top {
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 하단 오버레이 */
.apply-overlay-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 좌측 오버레이 */
.apply-overlay-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 우측 오버레이 */
.apply-overlay-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 50%, transparent 100%);
}

/* 배경 이미지가 있는 경우 오버레이 항상 표시 */
.apply-show-overlay .apply-grid-item.has-bg-image .apply-overlay {
  opacity: 1;
}

/* 일반 그리드 아이템은 오버레이 없음 (배경 이미지가 있는 경우만 표시) */

/* 오버레이 숨김 설정 */
.apply-hide-overlay .apply-overlay {
  display: none !important;
}

/* 배경 이미지가 있는 그리드 아이템 */
.apply-grid-item.has-bg-image {
  position: relative;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
  border: 1px solid transparent;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 배경 이미지 어두운 오버레이 (많이 줄임, 테두리 보이도록) */
.apply-grid-item.has-bg-image::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apply-grid-item.has-bg-image::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.apply-grid-item.has-bg-image .apply-grid-item-content {
  padding: 40px 32px;
}

.apply-grid-item.has-bg-image .apply-label,
.apply-grid-item.has-bg-image span {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.apply-grid-item.has-bg-image .apply-label i {
  color: #ffffff;
}

/* 배경 이미지가 있을 때 그리드 아이템 링크 색상 - 밝은 파란색 (폰트 테두리) */
.apply-grid-item.has-bg-image span a,
.apply-grid-item.has-bg-image .apply-link {
  color: #60a5fa;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.7),
    -1px -1px 0 rgba(96, 165, 250, 0.4),
    1px -1px 0 rgba(96, 165, 250, 0.4),
    -1px 1px 0 rgba(96, 165, 250, 0.4),
    1px 1px 0 rgba(96, 165, 250, 0.4);
}

.apply-grid-item.has-bg-image span a:hover,
.apply-grid-item.has-bg-image .apply-link:hover {
  color: #93c5fd;
  transform: translateY(-1px);
  text-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.8),
    -1px -1px 0 rgba(147, 197, 253, 0.6),
    1px -1px 0 rgba(147, 197, 253, 0.6),
    -1px 1px 0 rgba(147, 197, 253, 0.6),
    1px 1px 0 rgba(147, 197, 253, 0.6);
}

.apply-grid-item span a,
.apply-grid-item .apply-link {
  color: #2c5aa0;
  text-decoration: none;
  font-weight: 500;
  text-shadow: 
    -1px -1px 0 rgba(44, 90, 160, 0.3),
    1px -1px 0 rgba(44, 90, 160, 0.3),
    -1px 1px 0 rgba(44, 90, 160, 0.3),
    1px 1px 0 rgba(44, 90, 160, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
}

.apply-grid-item span a:hover,
.apply-grid-item .apply-link:hover {
  color: #1e40af;
  text-shadow: 
    -1px -1px 0 rgba(30, 64, 175, 0.5),
    1px -1px 0 rgba(30, 64, 175, 0.5),
    -1px 1px 0 rgba(30, 64, 175, 0.5),
    1px 1px 0 rgba(30, 64, 175, 0.5);
  transform: translateY(-1px);
}


/* 높이 설정 (PC) */
.apply-grid-wrapper.has-custom-height-pc .apply-grid-item {
  height: var(--item-height-pc, auto);
  min-height: var(--item-height-pc, auto);
}

/* 정렬 옵션 - 그리드 라벨 */
.apply-template-grid.apply-align-left .apply-grid-item .apply-label {
  justify-content: flex-start;
  text-align: left;
}

.apply-template-grid.apply-align-center .apply-grid-item .apply-label {
  justify-content: center;
  text-align: center;
}

.apply-template-grid.apply-align-right .apply-grid-item .apply-label {
  justify-content: flex-end;
  text-align: right;
}

/* 정렬 옵션 - 그리드 내용 */
.apply-template-grid.apply-align-left .apply-grid-item span {
  text-align: left;
}

.apply-template-grid.apply-align-center .apply-grid-item span {
  text-align: center;
}

.apply-template-grid.apply-align-right .apply-grid-item span {
  text-align: right;
}

/* 그리드 아이템 호버 효과 - 심플하고 세련된 스타일 */
.apply-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 배경 이미지 없는 그리드 아이템 - 미묘한 배경색 변화 */
.apply-grid-item:not(.has-bg-image):hover {
  background-color: rgba(248, 250, 252, 0.6);
}

/* 배경 이미지가 있는 그리드 아이템 - 호버 시 테두리 표시 */
.apply-grid-item.has-bg-image:hover {
  transform: none;
  border-color: #e2e8f0;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4), 0 0 0 rgba(0, 0, 0, 0);
}

/* 배경 이미지가 있는 그리드 아이템 - 호버 시 오버레이 약간 강화 */
.apply-grid-item.has-bg-image:hover::before {
  background: rgba(0, 0, 0, 0.12);
}

.apply-grid-item.has-bg-image:hover::after {
  background: 
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 100%);
}

.apply-grid-item .apply-label {
  margin-bottom: 4px;
}

.apply-grid-item span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(18px, 2.5vw, 26px);
  line-height: 1.5;
  color: #475569;
  margin: 0;
  padding: 0;
}

/* 그리드 레이아웃 줄바꿈 간격 조정 */
.apply-grid-item br + span {
  margin-top: 0;
}

.apply-grid-item br {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0.3;
  height: 0.5em;
  content: "";
}

/* ===== 반응형 스타일 (768px 기준) ===== */
@media (max-width: 768px) {
  .section-apply {
    padding: 0;
  }

  .apply-title {
    font-size: clamp(32px, 7vw, 50px);
    margin-bottom: 60px;
    padding: 80px 24px 0;
  }

  .apply-title::after {
    width: 40px;
    height: 2px;
    bottom: -20px;
  }

  .apply-details {
    padding: 0 24px 80px;
  }

  .apply-details li {
    min-height: 180px;
  }

  .apply-item-content {
    padding: 24px 0;
    gap: 10px;
  }

  /* 모바일 배경 이미지 - 전체화면폭 */
  .apply-details li.has-bg-image {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    max-width: 100vw;
    min-height: 250px;
  }

  .apply-details li.has-bg-image .apply-item-content {
    padding: 32px 24px;
  }

  /* 모바일 리스트 오버레이 크기 조정 */
  .apply-details li .apply-overlay-top,
  .apply-details li .apply-overlay-bottom {
    height: 80px;
  }

  .apply-details li .apply-overlay-left,
  .apply-details li .apply-overlay-right {
    width: 60px;
  }

  /* 모바일 호버 효과 - 심플하고 세련된 스타일 */
  .apply-details li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 모바일 배경 이미지 없는 항목 - 미묘한 배경색 변화 */
  .apply-details li:not(.has-bg-image):hover {
    background-color: rgba(248, 250, 252, 0.6);
  }

  /* 모바일 배경 이미지가 있는 항목 - 오버레이 강화 */
  .apply-details li.has-bg-image:hover::before {
    background: rgba(0, 0, 0, 0.35);
  }

  .apply-label {
    font-size: clamp(18px, 5vw, 22px);
    gap: 10px;
  }

  .apply-label i {
    font-size: clamp(20px, 5.5vw, 24px);
    width: 24px;
  }

  .apply-details li span {
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.5;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  
  /* 모바일 줄바꿈 간격 조정 */
  .apply-details li br + span {
    margin-top: 0;
  }
  
  .apply-details li br {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0.3;
    height: 0.5em;
    content: "";
  }

  .apply-details li span ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    gap: 6px;
  }

  .apply-details li span ul li {
    padding-left: 16px;
  }


  .apply-details li > span:only-child {
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.5;
  }

  /* 그리드 템플릿 모바일 */
  .apply-template-grid .apply-details {
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .apply-grid {
    grid-template-columns: repeat(var(--items-per-row-mobile, 2), 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  /* 높이 설정 (모바일) */
  .apply-grid-wrapper.has-custom-height-mobile .apply-grid-item {
    height: var(--item-height-mobile, auto);
    min-height: var(--item-height-mobile, auto);
  }

  .apply-grid-item {
    min-height: 200px;
  }

  .apply-grid-item-content {
    padding: 24px 20px;
    gap: 10px;
  }

  .apply-grid-item.has-bg-image .apply-grid-item-content {
    padding: 32px 20px;
  }

  /* 모바일 오버레이 크기 조정 */
  .apply-overlay-top,
  .apply-overlay-bottom {
    height: 80px;
  }

  .apply-overlay-left,
  .apply-overlay-right {
    width: 60px;
  }

  .apply-grid-item .apply-label {
    font-size: clamp(18px, 5vw, 22px);
    gap: 10px;
  }

  .apply-grid-item .apply-label i {
    font-size: clamp(20px, 5.5vw, 24px);
    width: 24px;
  }

  .apply-grid-item span {
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }
  
  /* 모바일 그리드 줄바꿈 간격 조정 */
  .apply-grid-item br + span {
    margin-top: 0;
  }
  
  .apply-grid-item br {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0.3;
    height: 0.5em;
    content: "";
  }

  /* 모바일 그리드 아이템 호버 효과 - 심플하고 세련된 스타일 */
  .apply-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 모바일 배경 이미지 없는 그리드 아이템 - 미묘한 배경색 변화 */
  .apply-grid-item:not(.has-bg-image):hover {
    background-color: rgba(248, 250, 252, 0.6);
  }

  /* 모바일 배경 이미지가 있는 그리드 아이템 - 오버레이 강화 */
  .apply-grid-item.has-bg-image:hover::before {
    background: rgba(0, 0, 0, 0.35);
  }
}