/*
 * STEP 9-4
 * 홈 대시보드 전용 최종 레이아웃
 *
 * 이 파일은 기존 모듈 CSS보다 나중에 로드되어
 * 위치와 크기만 제어합니다.
 */

*{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  background:#eef7ff;
}

body .wrap{
  width:min(
    1480px,
    calc(100% - 32px)
  ) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:22px 0 !important;
}

body .mainBox.dashboardShell{
  width:100%;
  max-width:none;
  padding:28px !important;
  display:block !important;
  background:#fff8e8;
  border-radius:30px;
  box-shadow:
    0 6px 24px rgba(0,0,0,.12);
}

body .dashboardHeader{
  margin:0 0 20px;
}

body .dashboardHeader .badge{
  margin-bottom:8px;
}

body .dashboardHeader h1{
  margin:0;
}


/* ========================================
 * 학습 메뉴
 * ======================================== */

body .menuSection{
  width:100%;
  margin:0 0 24px !important;
  padding:20px;
  border:2px solid #eed7ae;
  border-radius:24px;
  background:
    rgba(255,255,255,.66);
}

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

body .menuSectionHeader h2{
  margin:0;
  color:#35240e;
  font-size:26px;
  font-weight:1000;
}

body .menuSectionHeader p{
  margin:0;
  color:#806949;
  font-size:14px;
  font-weight:800;
}

body .menuGrid{
  width:100%;
  display:grid !important;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:12px;
}

body .menuGrid .menuBtn{
  position:relative;
  width:100% !important;
  min-width:0;
  min-height:92px;
  margin:0 !important;
  padding:14px 16px !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center;
  gap:13px;
  text-align:left;
  font-size:20px !important;
  line-height:1.25;
}

body .menuGrid .menuBtn > span:first-child{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  font-size:25px !important;
}


/* ========================================
 * 좌우 대시보드
 * ======================================== */

body .dashboardTop{
  width:100%;
  display:grid !important;
  grid-template-columns:
    minmax(360px,440px)
    minmax(0,1fr);
  gap:24px;
  align-items:stretch !important;
}

body .dashboardLeft,
body .dashboardRight{
  min-width:0;
  height:100%;
}

body .dashboardLeft{
  display:flex !important;
  flex-direction:column;
}

body .dashboardRight{
  display:flex !important;
  flex-direction:column;
}


/* ========================================
 * 왼쪽 사용자·보상
 * ======================================== */

body #learnerStatusHost{
  width:100%;
  flex:0 0 auto;
}

body #rewardSummaryHost{
  width:100%;
  min-height:0;
  margin:12px 0 0 !important;
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
  gap:10px;
}

body #rewardSummaryHost
.rewardSummaryStarCard,
body #rewardSummaryHost
.rewardSummaryStickerCard{
  flex:0 0 auto;
}

body #rewardSummaryHost
.rewardSummaryAttendanceCard{
  min-height:0;
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
}

body #rewardSummaryHost
.rewardAttendanceNext{
  margin-top:auto !important;
}


/* ========================================
 * 오른쪽 탐험 그림
 * ======================================== */

body #emojiCollectionHost{
  width:100%;
  min-height:0;
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
}

body #emojiCollectionHost
.emojiCollectionSection{
  width:100% !important;
  max-width:none !important;
  min-height:0;
  height:100%;
  margin:0 !important;
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
}

body #emojiCollectionHost
.emojiCollectionCard{
  width:100% !important;
  min-height:0;
  flex:1 1 auto;
  display:flex !important;
  flex-direction:column;
}

body #emojiCollectionHost
.emojiPicture{
  min-height:260px;
  flex:1 1 auto;
}

body #emojiCollectionHost
.emojiCollectionStages{
  margin-top:auto !important;
}


/*
 * 좌우 하단선을 정확히 맞춥니다.
 *
 * dashboardTop의 행 높이는 더 높은 오른쪽 영역을
 * 기준으로 정해지고 왼쪽이 같은 높이까지 늘어납니다.
 */
@media(min-width:901px){
  body .dashboardLeft,
  body .dashboardRight{
    align-self:stretch;
  }

  body #rewardSummaryHost,
  body #emojiCollectionHost{
    height:100%;
  }
}


/* ========================================
 * 메인 이미지
 * ======================================== */

body .heroSection{
  width:100%;
  margin-top:24px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #eed7ae;
  border-radius:24px;
  background:#fffdf8;
  overflow:hidden;
}

body .heroSection .mainImg{
  width:100% !important;
  max-width:1050px !important;
  max-height:520px;
  object-fit:contain;
  display:block;
  border-radius:22px;
}


/* ========================================
 * 잠긴 월드 메뉴
 * ======================================== */

body .menuGrid
.menuBtn.worldMenuVisibleLocked{
  opacity:.66 !important;
  filter:grayscale(.32);
  cursor:not-allowed !important;
}

body .menuGrid
.menuBtn.worldMenuVisibleLocked:hover{
  transform:none !important;
}

body .worldMenuAllVisibleLock{
  width:auto !important;
  height:auto !important;
  flex:0 0 auto !important;
  margin-left:auto;
  padding:6px 9px !important;
  border:1px solid #d2d2d2;
  border-radius:999px !important;
  background:
    rgba(255,255,255,.94) !important;
  color:#666 !important;
  font-size:11px !important;
  font-weight:900;
  white-space:nowrap;
}


/* ========================================
 * 태블릿
 * ======================================== */

@media(max-width:1180px){
  body .menuGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body .dashboardTop{
    grid-template-columns:
      minmax(330px,400px)
      minmax(0,1fr);
    gap:18px;
  }
}


/* ========================================
 * 모바일 1열
 * ======================================== */

@media(max-width:900px){
  body .wrap{
    width:min(
      100% - 18px,
      720px
    ) !important;
    padding:10px 0 !important;
  }

  body .mainBox.dashboardShell{
    padding:16px !important;
    border-radius:22px;
  }

  body .dashboardHeader{
    margin-bottom:15px;
  }

  body .menuSection{
    margin-bottom:18px !important;
    padding:14px;
  }

  body .menuSectionHeader{
    display:block;
  }

  body .menuSectionHeader p{
    margin-top:4px;
  }

  body .menuGrid{
    grid-template-columns:1fr;
    gap:9px;
  }

  body .menuGrid .menuBtn{
    min-height:62px;
    font-size:18px !important;
  }

  body .dashboardTop{
    grid-template-columns:1fr;
    gap:18px;
  }

  body .dashboardLeft,
  body .dashboardRight{
    height:auto;
  }

  body #rewardSummaryHost{
    height:auto;
    flex:none;
  }

  body #rewardSummaryHost
  .rewardSummaryAttendanceCard{
    flex:none;
  }

  body #rewardSummaryHost
  .rewardAttendanceNext{
    margin-top:10px !important;
  }

  body #emojiCollectionHost{
    height:auto;
    flex:none;
  }

  body #emojiCollectionHost
  .emojiCollectionSection,
  body #emojiCollectionHost
  .emojiCollectionCard{
    height:auto;
    flex:none;
  }

  body #emojiCollectionHost
  .emojiPicture{
    min-height:0;
    flex:none;
  }

  body #emojiCollectionHost
  .emojiCollectionStages{
    margin-top:0 !important;
  }

  body .heroSection{
    margin-top:18px;
    padding:10px;
  }
}


@media(max-width:480px){
  body .wrap{
    width:100% !important;
    padding:0 !important;
  }

  body .mainBox.dashboardShell{
    padding:12px !important;
    border-radius:0;
  }

  body .menuSection{
    padding:11px;
  }

  body .menuGrid .menuBtn{
    padding:11px 12px !important;
    font-size:16px !important;
  }

  body .menuGrid .menuBtn
  > span:first-child{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    font-size:20px !important;
  }
}

/* ===== STEP 9-4D LOCK BADGE START ===== */

body .menuGrid .menuBtn{
  position:relative !important;
  display:flex !important;
  visibility:visible !important;
  padding-right:108px !important;
}

/*
 * 현재 탐험·다음 탐험 배지와 동일하게
 * 버튼 오른쪽 가운데에 잠금 배지를 배치합니다.
 */
body .menuGrid
.worldMenuAllVisibleLock{
  position:absolute !important;
  top:50% !important;
  right:14px !important;
  bottom:auto !important;
  left:auto !important;

  width:auto !important;
  height:auto !important;
  min-width:66px;

  margin:0 !important;
  padding:7px 11px !important;

  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  transform:translateY(-50%) !important;

  border:1px solid #d4d4d4 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;

  color:#666 !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap;
  z-index:10;
}

body .menuGrid
.menuBtn.worldMenuVisibleLocked{
  opacity:.68 !important;
  cursor:not-allowed !important;
}

body .menuGrid
.menuBtn.worldMenuVisibleLocked:hover{
  transform:none !important;
}

@media(max-width:900px){
  body .menuGrid .menuBtn{
    padding-right:96px !important;
  }

  body .menuGrid
  .worldMenuAllVisibleLock{
    right:10px !important;
    min-width:60px;
    padding:6px 9px !important;
    font-size:11px !important;
  }
}

/* ===== STEP 9-4D LOCK BADGE END ===== */


/* ===== STEP 9-6 FINAL WORLD MENU START ===== */


/* ----------------------------------------------
 * 메뉴 로딩 중에는 숨기고 완성 후 한 번에 표시
 * ---------------------------------------------- */

body .menuGrid{
  visibility:hidden;
}

body .menuGrid.worldMenuReady{
  visibility:visible;
}


/* ----------------------------------------------
 * 메뉴 그리드
 * ---------------------------------------------- */

body .menuGrid{
  display:grid !important;
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}


/* ----------------------------------------------
 * 메뉴 카드
 * ---------------------------------------------- */

body .menuGrid .menuBtn{
  position:relative !important;

  width:100% !important;
  min-width:0 !important;
  min-height:94px !important;

  margin:0 !important;

  padding:
    13px
    86px
    13px
    13px !important;

  display:flex !important;
  align-items:center !important;
  gap:11px !important;

  overflow:hidden !important;

  font-size:17px !important;
  font-weight:1000 !important;
  line-height:1.13 !important;
  letter-spacing:-.5px !important;

  white-space:normal !important;
  word-break:keep-all !important;
}


/* ----------------------------------------------
 * 메뉴 아이콘 통일
 * ---------------------------------------------- */

body .menuGrid
.menuBtn > span:first-child{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;

  flex:0 0 46px !important;

  margin:0 !important;
  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:12px !important;
  background:#fff !important;

  color:#111 !important;
  font-size:21px !important;
  font-weight:1000 !important;
  line-height:1 !important;
}


/* ----------------------------------------------
 * 월드명
 * world-menu.js가 API 데이터를 기준으로 생성
 * ---------------------------------------------- */

body .menuGrid
.worldMenuName{
  position:absolute !important;

  left:70px !important;
  bottom:10px !important;

  width:auto !important;
  height:auto !important;
  max-width:
    calc(100% - 165px) !important;

  margin:0 !important;
  padding:0 !important;

  display:block !important;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:inherit !important;
  opacity:.82 !important;

  font-size:10px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}


/*
 * 월드 메뉴 6개는 월드명이 들어갈 공간 확보
 */
body .menuGrid
.menuBtn.worldMenuButton{
  padding-bottom:30px !important;
}


/* ----------------------------------------------
 * 기존 world-menu.css의 상태 배지 위치 통일
 * ---------------------------------------------- */

body .menuGrid
.menuBtn.worldMenuButton::after{
  top:50% !important;
  right:11px !important;
  bottom:auto !important;
  left:auto !important;

  min-width:62px !important;

  transform:translateY(-50%) !important;

  padding:7px 8px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:10px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}


/*
 * 현재 월드
 */
body .menuGrid
.menuBtn.worldMenuButton.worldCurrent::after{
  content:"현재 탐험" !important;
}


/*
 * 바로 다음 월드
 */
body .menuGrid
.menuBtn.worldMenuButton.worldLocked.worldNext::after{
  content:"다음 탐험" !important;
}


/*
 * 이후 잠긴 월드
 */
body .menuGrid
.menuBtn.worldMenuButton.worldLocked:not(.worldNext)::after{
  content:"🔒 잠김" !important;
}


/*
 * 기존 world-menu.css의 별도 자물쇠 ::before를 제거해
 * 중복 자물쇠가 나타나지 않도록 합니다.
 */
body .menuGrid
.menuBtn.worldMenuButton.worldLocked::before{
  display:none !important;
  content:none !important;
}


/* ----------------------------------------------
 * 잠긴 메뉴 표시와 클릭 안내 유지
 * ---------------------------------------------- */

body .menuGrid
.menuBtn.worldMenuButton.worldLocked{
  display:flex !important;
  visibility:visible !important;

  opacity:.72 !important;
  filter:grayscale(.18);

  cursor:not-allowed !important;
}

body .menuGrid
.menuBtn.worldMenuButton.worldLocked:hover{
  transform:none !important;
}


/*
 * 과거 보조 패치 요소는 전부 숨김
 */
body .menuGrid
.worldMenuAllVisibleLock,
body .menuGrid
.step94eMenuText,
body .menuGrid
.step94fMenuText,
body .menuGrid
.step94fStatusBadge,
body .menuGrid
.step94iMenuText,
body .menuGrid
.step94iStatusBadge,
body .menuGrid
.step94jMenuText,
body .menuGrid
.step94jStatusBadge{
  display:none !important;
}


/* ----------------------------------------------
 * 단어 게임·게시판
 * ---------------------------------------------- */

body .menuGrid
.menuBtn:not(.worldMenuButton){
  min-height:94px !important;
}


/* ----------------------------------------------
 * 태블릿
 * ---------------------------------------------- */

@media(max-width:1180px){

  body .menuGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  body .menuGrid .menuBtn{
    font-size:17px !important;
  }
}


/* ----------------------------------------------
 * 모바일
 * ---------------------------------------------- */

@media(max-width:900px){

  body .menuGrid{
    grid-template-columns:1fr !important;
  }

  body .menuGrid .menuBtn{
    min-height:78px !important;

    padding:
      11px
      86px
      11px
      11px !important;

    font-size:16px !important;
  }

  body .menuGrid
  .menuBtn > span:first-child{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;

    flex-basis:42px !important;

    font-size:19px !important;
  }

  body .menuGrid
  .menuBtn.worldMenuButton{
    padding-bottom:27px !important;
  }

  body .menuGrid
  .worldMenuName{
    left:64px !important;
    bottom:8px !important;

    max-width:
      calc(100% - 155px) !important;

    font-size:9px !important;
  }

  body .menuGrid
  .menuBtn.worldMenuButton::after{
    right:9px !important;
    min-width:58px !important;

    padding:6px 7px !important;

    font-size:9px !important;
  }
}


/* ===== STEP 9-6 FINAL WORLD MENU END ===== */