@charset "utf-8";

/* 배경: cover 유지 + 오버레이 추가를 위한 position */
#wrap {
  float: left;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url(../images/bg_domain.png) center top no-repeat;
  background-size: cover;
  transition: all 0.5s;
  position: relative; /* ★ 오버레이용 */
}

/* ★ 배경 오버레이: 배경을 어둡게 해서 전경 가독성 확보 */
#wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* 기본 45% 어둡게 */
  z-index: 0;
}

/* 전경을 오버레이 위로 올림 */
.domain_wrap,
.domain_btn_wrap,
.domain_logo,
.domain_title,
.domain_text,
.domain_text2 {
  position: relative;
  z-index: 1;
}

/*-------------------------------------------------------------------------------------*
 *  domain
 *-------------------------------------------------------------------------------------*/
.domain_wrap { float:left; width:100%; position:relative; text-align:center; padding:30px 0; }

.domain_logo { float:left; width:100%; padding:0 20px; }
.domain_logo a { display:inline-block; position:relative; }
.domain_logo a img { width:100%; max-width:350px; transition:all 0.5s; }

/* 제목: 기존 톤 유지 + 가독성 강화를 위한 text-shadow 강화 */
.domain_title {
  float:left; width:100%; margin:30px 0 0 0; padding:0 20px;
  font-family:'EsaManru'; font-weight:700; font-size:66px; color:#ffffff;
  letter-spacing:-6pt;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.9); /* ★ 강화 */
  transition:all 0.5s;
  position: relative;
}
.domain_title span.fff { color:#ff00a9; }

/* 보조 텍스트: 그림자 강화 */
.domain_text {
  float:left; width:100%; margin:30px 0 0 0; padding:0 20px;
  font-family:'EsaManru'; font-weight:700; font-size:30px; line-height:1.5; color:#ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.85); /* ★ 강화 */
  transition:all 0.5s;
}
.domain_text span { font-weight:700; color:#00ffea; }
.domain_text p { word-break: keep-all; }

/* 메인 카피: 그림자 강화 */
.domain_text2 {
  float:left; width:100%; margin:40px 0 0 0; padding:0 20px;
  font-family:'EsaManru'; font-weight:700; font-size:80px; line-height:1.2; color:#ffffff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.65), 0 0 1px rgba(0,0,0,0.9); /* ★ 강화 */
  transition:all 0.5s;
}
.domain_text2 span { font-weight:700; color:#00f6ff; }

/* 버튼 그룹 */
.domain_btn_wrap {
  float:left; width:100%; text-align:center; margin:40px 0 0 0; padding:0 20px;
  display: flex; flex-direction: column;
}
.domain_btn_wrap ul { float:left; display:flex; justify-content:center; flex-wrap:wrap; }

/* 각 버튼 카드: 배경 이미지는 유지하되, 반투명 + 블러 + 그림자 추가해 배경과 분리 */
.domain_btn_wrap li {
  float: left;
    width: 420px;
    height: 265px;
    /* 사각형 배경 제거: 오직 PNG만 */
    background: url(../images/bg_domain_btn.png) center top / 100% no-repeat;
    transition: all 0.5s;

    /* 추가된 배경 효과 제거 */
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}

/* 버튼 내부 레이아웃 */
.domain_btn_wrap li a {
  width:100%; height:100%; padding:0 0 25px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:all 0.5s;
}

/* 버튼 텍스트: 대비 강화 위해 text-shadow 보강 */
.btn_text1 {
  font-family:'EsaManru'; font-weight:700; font-size:24px; line-height:1.2; color:#f91cff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 1px rgba(0,0,0,0.85); /* ★ 강화 */
  transition:all 0.5s;
}
.btn_text2 {
  font-family:'EsaManru'; font-weight:700; font-size:36px; line-height:1.2; color:#ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 1px rgba(0,0,0,0.9); /* ★ 강화 */
  transition:all 0.5s;
}
.btn_img { margin:5px 0 0 0; }

/* 약간의 리듬 */
.domain_btn_wrap li:nth-child(2) { animation-delay:0.5s; }
.domain_btn_wrap li:nth-child(4) { animation-delay:0.5s; }

/* 타이틀 waviy 애니메이션 유지 */
.domain_title span {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));
}

/* 호버 시 더 분리감 주기 */
.domain_btn_wrap li:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.5);
}

/*-------------------------------------------------------------------------------------*
 *  반응형
 *-------------------------------------------------------------------------------------*/
@media screen and (max-width:1280px) {
  .domain_title { font-size:50px; letter-spacing:-5pt; }
  .domain_text  { font-size:24px; }
  .domain_text2 { font-size:54px; }
}

@media screen and (max-width:768px) {
  /* 모바일에서는 배경 오버레이를 더 진하게 */
  #wrap::before { background: rgba(0, 0, 0, 0.6); } /* ★ 모바일 가독성 업 */
  .domain_title { font-size:36px; letter-spacing:-3pt; }
  .domain_text2 { font-size:36px; }
}

@media screen and (max-width:600px) {
  .domain_logo a img { width:300px; }
  .btn_text1 { font-weight:500; font-size:16px; }
  .btn_text2 { font-size:28px; }
  .domain_btn_wrap { padding:0 10px; }
  .domain_btn_wrap li { width:100%; height:58vw; }
  .domain_btn_wrap li a { padding:0; }
  .domain_text2 span { display:block; }
}