/* 🧑👧 주인공 두 명 + ✨ 새 트레미 (버추얼 소녀) — 전부 CSS! */

.주인공고르기 {
  background: rgba(255, 255, 255, 0.92); color: #12204a;
  border: 6px solid #7ee0ff; border-radius: 22px;
  padding: 12px; max-width: 380px; margin: 12px auto;
}

.고르기제목 { font-size: 20px; font-weight: bold; margin: 0 0 8px; }

.주인공들 { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.주인공고름 {
  background: #f3f7ff; color: #12204a;
  border: 5px solid #b9d4ff; border-radius: 18px;
  padding: 10px 12px; box-shadow: 0 5px 0 #9ab6e8;
  font-size: 17px;
}

.주인공고름.뽑힘 { border-color: #ffb300; background: #fff6dd; box-shadow: 0 5px 0 #c88f00; }

/* ✏️ 이름 바꾸는 칸 */
.이름줄 { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.이름적기 {
  font-family: inherit; font-size: 18px; font-weight: bold;
  color: #12204a; text-align: center;
  width: 150px; padding: 8px;
  border: 4px solid #7ee0ff; border-radius: 12px;
}

.이름버튼 { background: #2c9e5b !important; box-shadow: 0 4px 0 #1a6b3c !important; }

/* 공통 아이 몸체 */
.아이 {
  position: relative; width: 110px; height: 150px; margin: 0 auto 6px;
  animation: 아이통통 2.2s ease-in-out infinite;
}

@keyframes 아이통통 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.아이 .얼굴 {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 70px;
  background: linear-gradient(#ffe6cf, #f7cda6);
  border: 4px solid #b98a5e; border-radius: 50%; z-index: 3;
}

.아이 .눈알 { position: absolute; top: 28px; width: 11px; height: 13px; background: #2b1a08; border-radius: 50%; animation: 아이깜빡 5s infinite; }
.아이 .왼눈알 { left: 14px; }
.아이 .오른눈알 { right: 14px; }

@keyframes 아이깜빡 { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }

.아이 .볼 { position: absolute; top: 42px; width: 14px; height: 8px; background: #ff9ec0; border-radius: 50%; opacity: 0.8; }
.아이 .왼볼2 { left: 6px; }
.아이 .오른볼2 { right: 6px; }

.아이 .웃음 {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 12px; border-bottom: 4px solid #b06e2d; border-radius: 0 0 20px 20px;
}

.아이 .팔 { position: absolute; top: 92px; width: 14px; height: 40px; border-radius: 10px; z-index: 1; }
.아이 .왼팔2 { left: 8px; transform: rotate(16deg); }
.아이 .오른팔2 { right: 8px; transform: rotate(-16deg); }

.아이 .다리 { position: absolute; bottom: 0; width: 16px; height: 26px; background: #4a5a7a; border: 3px solid #2b3a55; border-radius: 6px 6px 10px 10px; }
.아이 .왼다리2 { left: 30px; }
.아이 .오른다리2 { right: 30px; }

.아이 .신발 { position: absolute; bottom: -4px; width: 24px; height: 12px; background: #ffffff; border: 3px solid #6b7a95; border-radius: 999px; }
.아이 .왼신 { left: 24px; }
.아이 .오른신 { right: 24px; }

/* 🧑 남자아이 */
.남자아이 .머리털 {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 40px; background: #3b2a18;
  border-radius: 40px 40px 10px 10px; z-index: 4;
  clip-path: polygon(0 100%, 0 40%, 14% 10%, 40% 32%, 62% 6%, 88% 34%, 100% 40%, 100% 100%);
}

.남자아이 .모자챙2 {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 20px; background: #2f6fd0;
  border: 3px solid #1a4f8a; border-radius: 40px 40px 6px 6px; z-index: 5;
}

.남자아이 .카메라 { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); font-size: 24px; z-index: 5; }

.남자아이 .몸통 {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 58px;
  background: linear-gradient(#4fa8f5, #2f6fd0);
  border: 4px solid #1a4f8a; border-radius: 16px 16px 12px 12px; z-index: 2;
}

.남자아이 .팔 { background: #ffe6cf; border: 3px solid #b98a5e; }

/* 👧 여자아이 */
.여자아이 .긴머리 {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 116px;
  background: linear-gradient(#6b3f2a, #4a2a18);
  border-radius: 50% 50% 40% 40%; z-index: 1;
}

.여자아이 .앞머리2 {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 34px; background: #5c3623;
  border-radius: 40px 40px 8px 8px; z-index: 4;
}

.여자아이 .리본 {
  position: absolute; top: 0; right: 8px; font-size: 24px; z-index: 5;
  animation: 리본흔들 1.8s ease-in-out infinite;
}

@keyframes 리본흔들 { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

.여자아이 .원피스 {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 62px;
  background: linear-gradient(#ff9ec0, #e0356b);
  border: 4px solid #b52f5a; border-radius: 14px 14px 40px 40px; z-index: 2;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.여자아이 .치마단 {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 16px; background: #ffd93d;
  border: 3px solid #a37b00; border-radius: 999px; z-index: 3;
}

.여자아이 .팔 { background: #ffe6cf; border: 3px solid #b98a5e; }
.여자아이 .가방 { position: absolute; top: 96px; right: -2px; font-size: 22px; z-index: 5; }

/* ==========================================================
   ✨ 새 트레미 — 폰에서 나온 버추얼 소녀 (SD 비율)
   ========================================================== */

.새트레미 { width: 170px !important; height: 210px !important; }

/* 길고 풍성한 머리 (뒤) */
.새트레미 .뒷머리 {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 150px; height: 168px;
  background: linear-gradient(#a9ecff, #4fc9f5 60%, #2f8fd0);
  border-radius: 50% 50% 44% 44%; z-index: 1;
}

.새트레미 .머리끝 {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 40px;
  background: linear-gradient(#4fc9f5, #2f8fd0);
  clip-path: polygon(0 0, 100% 0, 88% 70%, 74% 20%, 58% 90%, 42% 20%, 26% 70%, 12% 20%);
}

/* 옆으로 흘러내린 머리 두 갈래 */
.새트레미 .옆머리 {
  position: absolute; top: 40px; width: 26px; height: 120px;
  background: linear-gradient(#a9ecff, #3fb5ea);
  border-radius: 18px 18px 40% 40%; z-index: 4;
}

.새트레미 .왼옆머리 { left: 2px; transform: rotate(4deg); }
.새트레미 .오른옆머리 { right: 2px; transform: rotate(-4deg); }

/* 큰 얼굴 (SD 비율!) */
.새트레미 .새얼굴 {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 104px;
  background: linear-gradient(#ffffff, #e6f8ff);
  border: 4px solid #4fc9f5; border-radius: 50% 50% 48% 48%; z-index: 3;
}

/* 앞머리 */
.새트레미 .새앞머리 {
  position: absolute; top: -8px; left: -4px; width: 120px; height: 46px;
  background: linear-gradient(#7fdcff, #35b6ec);
  border-radius: 50% 50% 30% 30%; z-index: 5;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 78% 96%, 62% 46%, 44% 96%, 26% 46%, 0 78%);
}

/* 크고 반짝이는 만화풍 눈 */
.새트레미 .큰눈 {
  position: absolute; top: 40px; width: 30px; height: 36px;
  background: linear-gradient(#3fd0ff, #1c5fa8);
  border: 3px solid #16324f; border-radius: 50%; z-index: 4;
  animation: 트레미깜빡 5s infinite;
}

.새트레미 .왼큰눈 { left: 12px; }
.새트레미 .오른큰눈 { right: 12px; }

@keyframes 트레미깜빡 { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

.새트레미 .큰반짝 { position: absolute; top: 5px; left: 5px; width: 11px; height: 11px; background: #fff; border-radius: 50%; }
.새트레미 .작은반짝 { position: absolute; bottom: 6px; right: 6px; width: 6px; height: 6px; background: #fff; border-radius: 50%; opacity: 0.9; }

.새트레미 .속눈썹 { position: absolute; top: 32px; width: 34px; height: 5px; background: #16324f; border-radius: 999px; z-index: 5; }
.새트레미 .왼속눈썹 { left: 10px; transform: rotate(-10deg); }
.새트레미 .오른속눈썹 { right: 10px; transform: rotate(10deg); }

.새트레미 .새볼 { position: absolute; top: 74px; width: 20px; height: 11px; background: #ff9ec0; border-radius: 50%; opacity: 0.85; z-index: 4; }
.새트레미 .왼새볼 { left: 8px; }
.새트레미 .오른새볼 { right: 8px; }

/* 밝고 활발한 웃는 입 */
.새트레미 .웃는입 {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 16px; background: #ff6b8a;
  border: 3px solid #16324f; border-radius: 4px 4px 20px 20px; z-index: 5;
}

/* 머리 장식 · 헤드셋 */
.새트레미 .별핀2 { position: absolute; top: 4px; right: 10px; font-size: 24px; z-index: 6; animation: 핀반짝 1.6s infinite; }

@keyframes 핀반짝 { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.25); opacity: 1; } }

.새트레미 .헤드셋 {
  position: absolute; top: 30px; width: 22px; height: 30px;
  background: #ffffff; border: 3px solid #2f6fd0; border-radius: 8px; z-index: 6;
}

.새트레미 .왼헤드셋 { left: -6px; }
.새트레미 .오른헤드셋 { right: -6px; }

/* 귀여운 현대식 옷 (후드 + 치마) */
.새트레미 .후드옷 {
  position: absolute; top: 126px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 62px;
  background: linear-gradient(#ffffff, #d6f2ff);
  border: 4px solid #4fc9f5; border-radius: 20px 20px 12px 12px; z-index: 3;
}

.새트레미 .옷별 { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 20px; color: #2f6fd0; }
.새트레미 .후드끈 { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background: #ffd93d; border-radius: 999px; }

.새트레미 .치마 {
  position: absolute; top: 176px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 26px;
  background: repeating-linear-gradient(90deg, #4fa8f5 0 12px, #7ee0ff 12px 24px);
  border: 4px solid #2f6fd0; border-radius: 6px 6px 18px 18px; z-index: 3;
}

.새트레미 .새팔 {
  position: absolute; top: 132px; width: 16px; height: 48px;
  background: #eafaff; border: 3px solid #4fc9f5; border-radius: 12px; z-index: 2;
}

.새트레미 .왼새팔 { left: 22px; transform: rotate(18deg); animation: 손흔들 1.6s ease-in-out infinite; transform-origin: top center; }
.새트레미 .오른새팔 { right: 22px; transform: rotate(-18deg); }

@keyframes 손흔들 { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }

/* 홀로그램 받침 */
.새트레미 .홀로받침 {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 26px;
  background: radial-gradient(#62e6ff, transparent 70%);
  border-radius: 50%; animation: 빛깜빡 1.6s infinite;
}

.새트레미 .반짝조각 { position: absolute; font-size: 16px; animation: 조각둥실 2.6s ease-in-out infinite; }
.새트레미 .조각1 { top: 30px; left: -8px; }
.새트레미 .조각2 { top: 120px; right: -6px; animation-delay: 1.3s; }

@keyframes 조각둥실 {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-12px); opacity: 1; }
}