/* 😊 쿠키 표정 20가지 */

/* 표정에 쓰는 작은 그림(눈물·별 등)이 삐져나오지 않게 */
.쿠키몸 .눈, .쿠키몸 .입 { transition: all 0.2s; }

/* 1. 기본 😊 — 그냥 그대로 */

/* 2. 활짝웃음 😄 */
.표정-활짝웃음 .입 {
  top: 46px;
  width: 26px;
  height: 14px;
  background: #3a2214;
  border: none;
  border-radius: 0 0 26px 26px;
}

/* 3. 이빨웃음 😁 */
.표정-이빨웃음 .입 {
  top: 46px;
  width: 28px;
  height: 14px;
  background: #3a2214;
  border: none;
  border-radius: 6px;
}
.표정-이빨웃음 .입::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 24px;
  height: 4px;
  background: #ffffff;
  border-radius: 2px;
}

/* 4. 윙크 😉 */
.표정-윙크 .왼눈 {
  height: 4px;
  top: 34px;
  border-radius: 4px;
}

/* 5. 눈감음 😌 */
.표정-눈감음 .눈 {
  height: 5px;
  top: 34px;
  border-radius: 6px 6px 0 0;
}

/* 6. 하트눈 😍 */
.표정-하트눈 .눈 { background: transparent; }
.표정-하트눈 .눈::after {
  content: "♥";
  position: absolute;
  left: -3px;
  top: -6px;
  font-size: 18px;
  color: #e0567a;
}

/* 7. 반짝눈 🤩 */
.표정-반짝눈 .눈 { background: transparent; }
.표정-반짝눈 .눈::after {
  content: "★";
  position: absolute;
  left: -3px;
  top: -4px;
  font-size: 17px;
  color: #ffc93d;
}

/* 8. 화남 😠 */
.표정-화남 .왼눈 { transform: rotate(20deg); height: 14px; }
.표정-화남 .오른눈 { transform: rotate(-20deg); height: 14px; }
.표정-화남 .입 {
  top: 52px;
  width: 20px;
  height: 8px;
  border-bottom: none;
  border-top: 4px solid #3a2214;
  border-radius: 20px 20px 0 0;
}

/* 9. 울음 😭 */
.표정-울음 .눈 { height: 6px; top: 32px; border-radius: 6px 6px 0 0; }
.표정-울음 .눈::after {
  content: "💧";
  position: absolute;
  left: -2px;
  top: 8px;
  font-size: 13px;
}
.표정-울음 .입 {
  top: 48px;
  width: 18px;
  height: 14px;
  background: #3a2214;
  border: none;
  border-radius: 50%;
}

/* 10. 슬픔 🥺 */
.표정-슬픔 .눈 { height: 18px; width: 14px; }
.표정-슬픔 .입 {
  top: 52px;
  width: 14px;
  height: 6px;
  border-bottom: none;
  border-top: 4px solid #3a2214;
  border-radius: 14px 14px 0 0;
}

/* 11. 놀람 😲 */
.표정-놀람 .눈 { width: 16px; height: 20px; top: 24px; }
.표정-놀람 .입 {
  top: 48px;
  width: 16px;
  height: 16px;
  background: #3a2214;
  border: none;
  border-radius: 50%;
}

/* 12. 어지러움 😵 */
.표정-어지러움 .눈 { background: transparent; }
.표정-어지러움 .눈::after {
  content: "✕";
  position: absolute;
  left: -2px;
  top: -3px;
  font-size: 16px;
  font-weight: bold;
  color: #3a2214;
}
.표정-어지러움 .입 {
  top: 50px;
  width: 18px;
  height: 8px;
  border-bottom: 4px solid #3a2214;
  border-radius: 0 0 4px 4px;
}

/* 13. 졸림 😴 */
.표정-졸림 .눈 { height: 5px; top: 34px; border-radius: 6px 6px 0 0; }
.표정-졸림 .입 {
  top: 48px;
  width: 12px;
  height: 12px;
  background: #3a2214;
  border: none;
  border-radius: 50%;
}
.표정-졸림 .머리::after {
  content: "💤";
  position: absolute;
  right: -14px;
  top: -6px;
  font-size: 16px;
}

/* 14. 메롱 😜 */
.표정-메롱 .왼눈 { height: 4px; top: 34px; border-radius: 4px; }
.표정-메롱 .입 {
  top: 46px;
  width: 22px;
  height: 10px;
  background: #3a2214;
  border: none;
  border-radius: 0 0 20px 20px;
}
.표정-메롱 .입::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 12px;
  height: 10px;
  background: #ff8fa8;
  border-radius: 0 0 10px 10px;
}

/* 15. 뿌듯 😏 */
.표정-뿌듯 .왼눈 { height: 6px; top: 33px; border-radius: 6px 6px 0 0; }
.표정-뿌듯 .오른눈 { height: 6px; top: 33px; border-radius: 6px 6px 0 0; }
.표정-뿌듯 .입 {
  top: 48px;
  width: 20px;
  height: 8px;
  transform: translateX(-50%) rotate(-12deg);
  border-radius: 0 0 20px 20px;
}

/* 16. 무표정 😐 */
.표정-무표정 .입 {
  top: 52px;
  width: 20px;
  height: 0;
  border-bottom: 4px solid #3a2214;
  border-radius: 0;
}

/* 17. 웃참 🤭 */
.표정-웃참 .눈 { height: 6px; top: 33px; border-radius: 6px 6px 0 0; }
.표정-웃참 .볼 { width: 16px; height: 11px; opacity: 1; }
.표정-웃참 .입 { width: 12px; top: 50px; }

/* 18. 신남 🥳 */
.표정-신남 .눈 { height: 18px; }
.표정-신남 .입 {
  top: 44px;
  width: 28px;
  height: 18px;
  background: #3a2214;
  border: none;
  border-radius: 0 0 28px 28px;
}
.표정-신남 .머리::after {
  content: "✨";
  position: absolute;
  right: -12px;
  top: -10px;
  font-size: 16px;
}

/* 19. 결심 😤 */
.표정-결심 .왼눈 { transform: rotate(18deg); height: 12px; }
.표정-결심 .오른눈 { transform: rotate(-18deg); height: 12px; }
.표정-결심 .입 {
  top: 50px;
  width: 16px;
  height: 8px;
  background: #3a2214;
  border: none;
  border-radius: 4px;
}
.표정-결심 .머리::after {
  content: "💨";
  position: absolute;
  left: -14px;
  top: 34px;
  font-size: 15px;
}

/* 20. 사랑스러움 🥰 */
.표정-사랑스러움 .눈 { height: 6px; top: 33px; border-radius: 6px 6px 0 0; }
.표정-사랑스러움 .볼 { opacity: 1; background: #ff6f96; }
.표정-사랑스러움 .머리::after {
  content: "💕";
  position: absolute;
  right: -14px;
  top: -4px;
  font-size: 16px;
}

/* 표정 고르는 버튼 */
.표정칸 {
  font-size: 26px;
  background: #fff3e0;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 6px 8px;
  cursor: pointer;
  min-width: 44px;
}

.표정칸.고름 { border-color: #b5477a; background: #ffe0f0; transform: scale(1.08); }