.elementor-7173 .elementor-element.elementor-element-5664e9db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-7173 .elementor-element.elementor-element-5664e9db{--content-width:100%;}}/* Start custom CSS */@charset "utf-8";
@font-face {
  font-family: 'NEXON Lv2 Gothic';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body { user-select: none; }

.carousel {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* 라디오 버튼 숨기기 */
input[name=selectCharacter] { display: none; }
article { display: none; width: inherit; height: inherit; }

/* ✅ 체크된 캐릭터만 보여주기 (8명) */
input#achu:checked ~ .profile-achu,
input#acli:checked ~ .profile-acli,
input#bon:checked ~ .profile-bon,
input#case9:checked ~ .profile-case9,
input#pond8:checked ~ .profile-pond8,
input#potg:checked ~ .profile-potg,
input#seoharu:checked ~ .profile-seoharu,
input#soy:checked ~ .profile-soy {
  display: flex;
}

/* 공통: 캐릭터 소개 디자인 */
article.profile {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.35s;
  position: relative;
  font-family: 'NEXON Lv2 Gothic';
  --accent: #ffffff; /* 기본값 */
}

.character {
  position: absolute;
  right: -20px;
  transition: all 0.35s;
  width: auto;
  height: 100%;
  max-width: 55vw;
  object-fit: contain;
  bottom: 0;
}

/* ✅ 배경 이미지 (필요하면 너가 해당 png로 교체) */
.profile-achu   { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-acli   { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-bon    { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-case9  { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-pond8  { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-potg   { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-seoharu{ background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }
.profile-soy    { background-image: url(https://aimeet.kr/wp-content/uploads/2025/01/dania-introduce-background.png); }

/* ✅ 캐릭터별 포인트 컬러(이미지 톤에 맞춘 추천값) */
.profile-achu    { --accent: #3F5BFF; }  /* 블루 계열 포인트 */
.profile-acli    { --accent: #F1C04A; }  /* 옐로/라이트 포인트 */
.profile-bon     { --accent: #6B5BFF; }  /* 퍼플/바이올렛 */
.profile-case9   { --accent: #2B2E3A; }  /* 다크/차콜 */
.profile-pond8   { --accent: #2A74FF; }  /* 청량 블루 */
.profile-potg    { --accent: #C49A3A; }  /* 웨스턴 골드/브라운 */
.profile-seoharu { --accent: #FF7FA8; }  /* 핑크 */
.profile-soy     { --accent: #FF5D76; }  /* 코랄/핑크레드 */

/* 설명 영역 */
.content {
  width: 360px;
  position: absolute;
  left: 220px;
  top: 50%;
  transform: translateY(-50%);
}

.content .info-simple {
  width: inherit;
  color: white;
  text-align: right;
  line-height: 1.2;
  font-family: 'WarhavenB';
  margin-bottom: 20px;
}

.content .info-simple > h2:nth-of-type(1) {
  color: white;
  font-size: 36px;
  font-weight: 300;
}

.content .info-simple > h2:nth-of-type(2) {
  color: white;
  font-size: 100px;
  font-weight: 600;
}

.content .info-simple > p {
  font-size: 26px;
  margin: 30px 0;
}

/* ✅ 한방에 통일: special word는 현재 프로필의 --accent 사용 */
.content .info-simple > p > .special-word {
  font-weight: 600;
  color: var(--accent);
}

/* 디테일 */
.content .info-detail {
  width: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content .info-detail li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content .info-detail .label {
  font-size: 22px;
  display: inline-flex;
  width: 140px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  font-weight: 500;

  /* ✅ 라벨 배경도 accent로 통일 */
  background-color: var(--accent);
  color: #fff;
}

.content .info-detail .value {
  font-size: 24px;
}

/* 캐릭터 선택 창 */
.btn-selectCharacter {
  position: absolute;
  width: 100%;
  bottom: 40px;
}

.btn-selectCharacter .innerContainer {
  display: flex;
  gap: 20px;
  width: max-content;
  margin: 0 auto;
}

.btn-selectCharacter label {
  display: inline-block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: all 0.35s;
}

.btn-selectCharacter label img {
  display: block;
  width: 120px;
  filter: grayscale(100%);
  transition: all 0.35s;
}

.btn-selectCharacter label:hover { transform: scale(1.02); }
.btn-selectCharacter label:active { transform: scale(0.98); }

/* ✅ 선택된 것만 흑백 해제 (8명) */
input#achu:checked ~ .btn-selectCharacter label:nth-child(1) img { filter: grayscale(0%); }
input#acli:checked ~ .btn-selectCharacter label:nth-child(2) img { filter: grayscale(0%); }
input#bon:checked ~ .btn-selectCharacter label:nth-child(3) img { filter: grayscale(0%); }
input#case9:checked ~ .btn-selectCharacter label:nth-child(4) img { filter: grayscale(0%); }
input#pond8:checked ~ .btn-selectCharacter label:nth-child(5) img { filter: grayscale(0%); }
input#potg:checked ~ .btn-selectCharacter label:nth-child(6) img { filter: grayscale(0%); }
input#seoharu:checked ~ .btn-selectCharacter label:nth-child(7) img { filter: grayscale(0%); }
input#soy:checked ~ .btn-selectCharacter label:nth-child(8) img { filter: grayscale(0%); }/* End custom CSS */