/* ==================================================
   한글탐험대 STEP 6-5
   사용자 홈 이모지 컬렉션
   ================================================== */

.emojiCollectionSection{
  width:100%;
  margin:0 0 22px;
  padding:18px;
  box-sizing:border-box;
  border:4px solid #e6d7ff;
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #fff4d7 48%,
      #f5efff 100%
    );
  box-shadow:
    0 8px 18px rgba(89,56,130,.14);
}

.emojiCollectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.emojiCollectionTitleWrap{
  min-width:0;
}

.emojiCollectionTitle{
  margin:0;
  color:#4a2878;
  font-size:24px;
  font-weight:1000;
  line-height:1.25;
}

.emojiCollectionSubtitle{
  margin:5px 0 0;
  color:#735e88;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}

.emojiCollectionBadge{
  flex:0 0 auto;
  padding:8px 12px;
  border:2px solid #d8baff;
  border-radius:999px;
  background:#fff;
  color:#6837a8;
  font-size:14px;
  font-weight:1000;
  white-space:nowrap;
}

.emojiCollectionCard{
  position:relative;
  overflow:hidden;
  padding:18px 14px 16px;
  border:3px solid #e7d5ff;
  border-radius:22px;
  background:rgba(255,255,255,.94);
}

.emojiCollectionCard::before{
  content:"";
  position:absolute;
  top:-50px;
  right:-45px;
  width:135px;
  height:135px;
  border-radius:50%;
  background:rgba(255,220,94,.18);
  pointer-events:none;
}

.emojiCollectionInfo{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:13px;
  text-align:center;
}

.emojiCollectionMainEmoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:17px;
  background:#fff6d7;
  font-size:34px;
  box-shadow:
    inset 0 0 0 2px #ffe69a,
    0 4px 9px rgba(90,50,10,.1);
}

.emojiCollectionName{
  margin:0;
  color:#352141;
  font-size:22px;
  font-weight:1000;
}

.emojiCollectionMessage{
  margin:4px 0 0;
  color:#77627c;
  font-size:14px;
  font-weight:800;
}

.emojiPicture{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-height:175px;
  padding:12px 5px;
  border:2px dashed #e2d1ef;
  border-radius:18px;
  background:
    radial-gradient(
      circle at center,
      #fff 0%,
      #fffdf4 75%,
      #fff7dd 100%
    );
}

.emojiPictureRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:31px;
}

.emojiPictureCell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  font-size:25px;
  line-height:1;
  transform:translateZ(0);
  transition:
    transform .25s ease,
    filter .25s ease,
    opacity .25s ease;
}

.emojiPictureCell.empty{
  opacity:.42;
  filter:grayscale(.15);
  font-size:19px;
}

.emojiPictureCell.filled{
  opacity:1;
  filter:
    drop-shadow(0 3px 2px rgba(81,28,100,.18));
}

.emojiPictureCell.newlyFilled{
  z-index:3;
  animation:
    emojiCollectionDrop .75s cubic-bezier(.2,1.5,.5,1),
    emojiCollectionGlow 1.1s ease .15s;
}

.emojiPictureCell.newlyFilled::after{
  content:"✨";
  position:absolute;
  top:-15px;
  right:-13px;
  font-size:17px;
  animation:emojiCollectionSparkle .9s ease forwards;
}

@keyframes emojiCollectionDrop{
  0%{
    opacity:0;
    transform:
      translateY(-72px)
      scale(.25)
      rotate(-25deg);
  }

  65%{
    opacity:1;
    transform:
      translateY(4px)
      scale(1.28)
      rotate(8deg);
  }

  100%{
    opacity:1;
    transform:
      translateY(0)
      scale(1)
      rotate(0);
  }
}

@keyframes emojiCollectionGlow{
  0%,100%{
    filter:
      drop-shadow(0 3px 2px rgba(81,28,100,.18));
  }

  45%{
    filter:
      drop-shadow(0 0 9px #ffe15c)
      drop-shadow(0 0 13px #ffb93e);
  }
}

@keyframes emojiCollectionSparkle{
  0%{
    opacity:0;
    transform:scale(.25) rotate(-25deg);
  }

  35%{
    opacity:1;
    transform:scale(1.25) rotate(8deg);
  }

  100%{
    opacity:0;
    transform:
      translateY(-17px)
      scale(.6)
      rotate(24deg);
  }
}

.emojiCollectionProgressArea{
  position:relative;
  z-index:1;
  margin-top:14px;
}

.emojiCollectionProgressText{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:#493d4d;
  font-size:14px;
  font-weight:1000;
}

.emojiCollectionProgressCount{
  color:#6c36aa;
  font-size:16px;
}

.emojiCollectionProgressTrack{
  height:17px;
  overflow:hidden;
  border:2px solid #e9ddf3;
  border-radius:999px;
  background:#f0edf2;
}

.emojiCollectionProgressFill{
  height:100%;
  min-width:0;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #8e53da,
      #b16aed,
      #f08cd7
    );
  box-shadow:
    inset 0 -2px 0 rgba(60,20,80,.12);
  transition:width .65s ease;
}

.emojiCollectionCheer{
  min-height:22px;
  margin:10px 0 0;
  color:#6c4972;
  font-size:14px;
  font-weight:900;
  line-height:1.45;
  text-align:center;
}

.emojiCollectionStages{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.emojiCollectionStage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:70px;
  padding:8px 5px;
  border:2px solid #ece3f1;
  border-radius:15px;
  background:#f8f6fa;
  opacity:.62;
  text-align:center;
}

.emojiCollectionStage.active{
  border-color:#b276ec;
  background:#f5eaff;
  opacity:1;
  box-shadow:0 4px 9px rgba(102,44,150,.12);
}

.emojiCollectionStage.completed{
  border-color:#ffd359;
  background:#fff8d8;
  opacity:1;
}

.emojiCollectionStageEmoji{
  font-size:27px;
}

.emojiCollectionStageName{
  margin-top:3px;
  color:#514558;
  font-size:12px;
  font-weight:1000;
}

.emojiCollectionStageState{
  margin-top:2px;
  color:#8a7893;
  font-size:10px;
  font-weight:900;
}

.emojiCollectionLoading,
.emojiCollectionError{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:170px;
  padding:18px;
  border:3px dashed #ded0e8;
  border-radius:18px;
  background:#fff;
  color:#684778;
  font-size:16px;
  font-weight:1000;
  line-height:1.5;
  text-align:center;
}

.emojiCollectionError{
  border-color:#ffc8c8;
  background:#fff2f2;
  color:#c44646;
}

.collectionCelebrationOverlay{
  position:fixed;
  z-index:99999;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(33,19,46,.58);
  backdrop-filter:blur(5px);
  animation:collectionOverlayIn .25s ease;
}

.collectionCelebrationOverlay[hidden]{
  display:none;
}

.collectionCelebrationModal{
  position:relative;
  width:min(430px,100%);
  overflow:hidden;
  padding:27px 20px 22px;
  border:5px solid #ffdc67;
  border-radius:30px;
  background:
    linear-gradient(
      150deg,
      #fffef5,
      #fff2c2 58%,
      #f6e9ff
    );
  box-shadow:
    0 20px 55px rgba(30,10,50,.35);
  text-align:center;
  animation:
    collectionModalPop .55s
    cubic-bezier(.2,1.35,.4,1);
}

.collectionCelebrationModal::before,
.collectionCelebrationModal::after{
  content:"✨";
  position:absolute;
  top:25px;
  font-size:32px;
  animation:celebrationSideSparkle 1.4s ease infinite;
}

.collectionCelebrationModal::before{
  left:20px;
}

.collectionCelebrationModal::after{
  right:20px;
  animation-delay:.35s;
}

.collectionCelebrationEmoji{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100px;
  font-size:80px;
  filter:
    drop-shadow(0 8px 5px rgba(77,32,40,.18));
  animation:celebrationEmojiBounce 1s ease infinite;
}

.collectionCelebrationTitle{
  margin:3px 0 0;
  color:#663388;
  font-size:31px;
  font-weight:1000;
}

.collectionCelebrationMessage{
  margin:10px 0 0;
  color:#503d53;
  font-size:19px;
  font-weight:1000;
  line-height:1.45;
}

.collectionCelebrationReward{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  margin-top:14px;
  padding:8px 16px;
  border:3px solid #ffcf43;
  border-radius:999px;
  background:#fff;
  color:#7f5910;
  font-size:17px;
  font-weight:1000;
}

.collectionCelebrationNext{
  margin:13px 0 0;
  color:#754b84;
  font-size:16px;
  font-weight:900;
}

.collectionCelebrationButton{
  width:100%;
  margin-top:18px;
  padding:13px 15px;
  border:0;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      #8852d8,
      #bd6eea
    );
  color:#fff;
  font-size:18px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:
    0 5px 0 #6133a2;
}

.collectionCelebrationButton:active{
  transform:translateY(3px);
  box-shadow:
    0 2px 0 #6133a2;
}

.collectionConfetti{
  position:fixed;
  z-index:100000;
  top:-40px;
  width:14px;
  height:20px;
  border-radius:4px;
  pointer-events:none;
  animation:collectionConfettiFall linear forwards;
}

@keyframes collectionOverlayIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes collectionModalPop{
  0%{
    opacity:0;
    transform:
      translateY(25px)
      scale(.45)
      rotate(-3deg);
  }

  70%{
    opacity:1;
    transform:
      translateY(-4px)
      scale(1.06)
      rotate(1deg);
  }

  100%{
    transform:
      translateY(0)
      scale(1)
      rotate(0);
  }
}

@keyframes celebrationEmojiBounce{
  0%,100%{
    transform:
      translateY(0)
      scale(1);
  }

  50%{
    transform:
      translateY(-10px)
      scale(1.08);
  }
}

@keyframes celebrationSideSparkle{
  0%,100%{
    opacity:.35;
    transform:scale(.7) rotate(-15deg);
  }

  50%{
    opacity:1;
    transform:scale(1.25) rotate(15deg);
  }
}

@keyframes collectionConfettiFall{
  0%{
    opacity:1;
    transform:
      translate3d(0,-30px,0)
      rotate(0);
  }

  100%{
    opacity:0;
    transform:
      translate3d(
        var(--confetti-x),
        110vh,
        0
      )
      rotate(var(--confetti-rotate));
  }
}

@media(max-width:540px){
  .emojiCollectionSection{
    padding:14px;
    border-radius:20px;
  }

  .emojiCollectionHeader{
    align-items:flex-start;
  }

  .emojiCollectionTitle{
    font-size:21px;
  }

  .emojiCollectionBadge{
    padding:7px 9px;
    font-size:12px;
  }

  .emojiCollectionCard{
    padding:15px 9px;
  }

  .emojiPicture{
    min-height:160px;
  }

  .emojiPictureCell{
    width:28px;
    height:28px;
    font-size:23px;
  }

  .emojiPictureCell.empty{
    font-size:17px;
  }

  .emojiCollectionStages{
    gap:5px;
  }

  .emojiCollectionStage{
    min-height:65px;
    padding:6px 3px;
  }
}

@media(
  prefers-reduced-motion:reduce
){
  .emojiPictureCell,
  .emojiCollectionProgressFill,
  .collectionCelebrationOverlay,
  .collectionCelebrationModal,
  .collectionCelebrationEmoji,
  .collectionConfetti{
    animation:none !important;
    transition:none !important;
  }
}


/* ==================================================
   한글탐험대 STEP 8-3
   새싹숲 전체 420개 진행도
   ================================================== */

.worldMissionProgressBox{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  padding:14px 16px;
  border:3px solid #bfe5a1;
  border-radius:19px;
  background:
    linear-gradient(
      145deg,
      #f8fff1 0%,
      #edffdc 55%,
      #fffbdc 100%
    );
  box-shadow:
    0 5px 12px rgba(72,120,35,.11);
}

.worldMissionProgressTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.worldMissionProgressTitle{
  color:#356b22;
  font-size:17px;
  font-weight:1000;
  line-height:1.35;
}

.worldMissionProgressCount{
  flex:0 0 auto;
  color:#573a1e;
  font-size:16px;
  font-weight:1000;
  white-space:nowrap;
}

.worldMissionProgressTrack{
  height:18px;
  margin-top:10px;
  overflow:hidden;
  border:2px solid #cce6b6;
  border-radius:999px;
  background:#e5eedf;
}

.worldMissionProgressFill{
  width:0;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #7fc94d,
      #a7dc4d,
      #ffd65a
    );
  box-shadow:
    inset 0 -2px 0 rgba(45,95,20,.12);
  transition:width .7s ease;
}

.worldMissionProgressMessage{
  margin-top:8px;
  color:#587044;
  font-size:13px;
  font-weight:900;
  line-height:1.4;
  text-align:center;
}

@media(max-width:540px){
  .worldMissionProgressBox{
    padding:12px;
  }

  .worldMissionProgressTop{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .worldMissionProgressTitle{
    font-size:16px;
  }

  .worldMissionProgressCount{
    font-size:14px;
  }
}

/* ===== STEP 9-3A DASHBOARD COLLECTION START ===== */

#emojiCollectionHost{
  width:100%;
  margin:0;
}

.dashboardRight .emojiCollectionSection{
  width:100%;
  max-width:none;
  margin:0;
  box-sizing:border-box;
}

.dashboardRight .emojiCollectionCard{
  width:100%;
  box-sizing:border-box;
}

.dashboardRight .emojiPicture{
  min-height:250px;
}

.dashboardRight .emojiCollectionStages{
  width:100%;
}

@media(min-width:821px){
  .dashboardRight .emojiCollectionSection{
    height:100%;
  }

  .dashboardRight .emojiCollectionCard{
    min-height:560px;
  }
}

@media(max-width:820px){
  .dashboardRight .emojiPicture{
    min-height:0;
  }
}

/* ===== STEP 9-3A DASHBOARD COLLECTION END ===== */

/* ===== STEP 9-3A-2 COLLECTION HEIGHT START ===== */

.dashboardRight{
  display:flex;
  flex-direction:column;
}

#emojiCollectionHost{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.dashboardRight
.emojiCollectionSection{
  flex:1 1 auto;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.dashboardRight
.emojiCollectionCard{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/*
 * 그림 영역이 남은 공간을 사용하고
 * 컬렉션 단계 버튼은 카드 하단에 붙습니다.
 */
.dashboardRight
.emojiPicture{
  flex:1 1 auto;
}

.dashboardRight
.emojiCollectionStages{
  margin-top:auto;
}

@media(max-width:820px){
  #emojiCollectionHost,
  .dashboardRight
  .emojiCollectionSection,
  .dashboardRight
  .emojiCollectionCard{
    flex:none;
    height:auto;
  }

  .dashboardRight
  .emojiPicture{
    flex:none;
  }

  .dashboardRight
  .emojiCollectionStages{
    margin-top:0;
  }
}

/* ===== STEP 9-3A-2 COLLECTION HEIGHT END ===== */

/* STEP 11-5A EMOJI PICTURE CENTER START */

.emojiPicture{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:250px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.emojiPictureRow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* STEP 11-5A EMOJI PICTURE CENTER END */

/* ===== RAINBOW VEHICLE ACTUAL SLOT CSS START ===== */

/*
 * 실제 DOM:
 *
 * .emojiPicture
 *   .emojiPictureRow
 *     .emojiPictureCell
 */

.emojiPicture[
  data-collection-code="rainbow_car"
],
.emojiPicture[
  data-collection-code="rainbow_bus"
],
.emojiPicture[
  data-collection-code="rainbow_train"
]{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:240px;
  padding:28px 14px;
  box-sizing:border-box;
}

.emojiPicture[
  data-collection-code="rainbow_car"
] .emojiPictureRow,
.emojiPicture[
  data-collection-code="rainbow_bus"
] .emojiPictureRow,
.emojiPicture[
  data-collection-code="rainbow_train"
] .emojiPictureRow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
}

/*
 * 자동차:
 * 첫 번째 4칸을 위쪽 차창처럼 보이게 합니다.
 */
.emojiPicture[
  data-collection-code="rainbow_car"
] .emojiPictureRow:nth-child(1){
  transform:translateY(3px);
}

/*
 * 자동차의 마지막 두 줄은 차체가 되도록 넓게 배치합니다.
 */
.emojiPicture[
  data-collection-code="rainbow_car"
] .emojiPictureRow:nth-child(2),
.emojiPicture[
  data-collection-code="rainbow_car"
] .emojiPictureRow:nth-child(3){
  gap:9px;
}

/*
 * 버스는 긴 직사각형 모양입니다.
 */
.emojiPicture[
  data-collection-code="rainbow_bus"
] .emojiPictureRow{
  gap:8px;
}

/*
 * 기차 마지막 줄의 2개 원은 바퀴처럼 좌우로 벌립니다.
 */
.emojiPicture[
  data-collection-code="rainbow_train"
] .emojiPictureRow:nth-child(3){
  justify-content:space-between;
  width:132px;
}

/*
 * 원 크기와 기존 스티커 표시는 유지합니다.
 */
.emojiPicture[
  data-collection-code="rainbow_car"
] .emojiPictureCell,
.emojiPicture[
  data-collection-code="rainbow_bus"
] .emojiPictureCell,
.emojiPicture[
  data-collection-code="rainbow_train"
] .emojiPictureCell{
  flex:0 0 auto;
}

/*
 * 작은 화면에서도 형태가 유지되도록 조정합니다.
 */
@media(max-width:760px){

  .emojiPicture[
    data-collection-code="rainbow_car"
  ],
  .emojiPicture[
    data-collection-code="rainbow_bus"
  ],
  .emojiPicture[
    data-collection-code="rainbow_train"
  ]{
    gap:7px;
    min-height:190px;
    padding:22px 6px;
  }

  .emojiPicture[
    data-collection-code="rainbow_car"
  ] .emojiPictureRow,
  .emojiPicture[
    data-collection-code="rainbow_bus"
  ] .emojiPictureRow,
  .emojiPicture[
    data-collection-code="rainbow_train"
  ] .emojiPictureRow{
    gap:5px;
  }

  .emojiPicture[
    data-collection-code="rainbow_train"
  ] .emojiPictureRow:nth-child(3){
    width:100px;
  }
}

/* ===== RAINBOW VEHICLE ACTUAL SLOT CSS END ===== */