/* student-home.css : 학생 첫 화면 두 칸(나의 메타버스 공간 · 내 기록), 2026-11-12 */
#myHome:empty { display: none; }
.mh-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; margin: 4px 0 14px; }
.mh-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 4px 16px rgba(30, 27, 75, .07); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mh-card header { display: flex; align-items: center; gap: 10px; }
.mh-card h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); flex: 1; }
.mh-chip { font-size: 14px; font-weight: 800; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mh-chip { position: relative; }
.mh-star-gained { animation: mh-star-pop .55s ease-out both; }
.mh-star-gain { position: absolute; left: 50%; bottom: calc(100% + 6px); padding: 3px 8px; border-radius: 99px; background: #fff8dd; border: 1px solid #e9c864; color: #855600; font-size: 13px; line-height: 1.3; pointer-events: none; animation: mh-star-rise 1.8s ease-out both; z-index: 2; }
.mh-star-spark { position: absolute; left: 50%; top: 50%; color: #c98505; font-size: 15px; line-height: 1; pointer-events: none; animation: mh-star-spark .85s ease-out both; z-index: 1; }
.mh-gain-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes mh-star-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); box-shadow: 0 0 0 7px #fbbf2425; } }
@keyframes mh-star-rise { 0% { opacity: 0; transform: translate(-50%, 8px); } 20%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes mh-star-spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), -42px) rotate(var(--spark-turn)) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .mh-star-gained, .mh-star-gain { animation: none; } .mh-star-gained { box-shadow: 0 0 0 3px #fbbf2438; } .mh-star-gain { transform: translateX(-50%); } .mh-star-spark { display: none; } }
.mh-lv { font-size: 14px; font-weight: 800; color: #fff; background: #4f46e5; border-radius: 999px; padding: 3px 10px; }
/* 공간 그림 */
.mh-pic { display: block; width: 100%; padding: 0; border: 1px solid #ecdfcf; border-radius: 12px; overflow: hidden; background: #f8eddf; cursor: pointer; aspect-ratio: 3 / 2; }
.mh-pic:hover, .mh-pic:focus-visible { background: #f8eddf; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129, 140, 248, .35); outline: none; }
.mh-pic #mhPic, .mh-pic .personal-room { height: 100%; }
.mh-pic .pr-scene { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; height: 100%; }
.mh-pic canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh-empty { margin: 0; padding: 40px 10px; text-align: center; color: var(--mute); }
.mh-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
/* 내 기록 */
.mh-xp { position: relative; height: 22px; border-radius: 11px; background: #eef2ff; overflow: hidden; }
.mh-xp span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 11px; }
.mh-xp b { position: relative; display: block; text-align: center; font-size: 12.5px; line-height: 22px; color: #1e1b4b; }
.mh-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mh-g { display: grid; grid-template-columns: 10px 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; }
.mh-g i { width: 10px; height: 10px; border-radius: 50%; }
.mh-g .n { font-weight: 700; color: var(--ink); white-space: nowrap; }
.mh-g .b { height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; }
.mh-g .b em { display: block; height: 100%; border-radius: 4px; }
.mh-g .v { font-size: 13px; color: #475569; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mh-g.off .n, .mh-g.off .v { color: #94a3b8; }
@media (max-width: 800px) {
  .mh-grid { grid-template-columns: 1fr; }
}
/* 공간 그림 높이를 줄인다: 16:9로 잘라 벽 위쪽을 조금 덜 보이고, 그리기 상자의 안쪽 여백은 없앤다 */
@media (min-width: 801px) { .mh-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.mh-pic { aspect-ratio: 16 / 9; }
.mh-pic .personal-room, .mh-pic .personal-room.pr-readonly { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mh-pic canvas { object-position: 50% 70%; }
/* 큰 화면에서 그림이 너무 높아지지 않게 */
.mh-pic { max-height: 340px; aspect-ratio: auto; height: min(340px, calc((100vw - 80px) * .5 * 9 / 16)); }
@media (max-width: 800px) { .mh-pic { height: auto; aspect-ratio: 16 / 9; max-height: none; } }

/* 공간 꾸미기 화면: 낮은 노트북 화면(예: 1024x600)에서 위쪽 줄들을 좁혀 방 그림과 도구가 한 화면에 들어오게(2026-11-12) */
@media (min-width: 760px) and (max-height: 820px) {
  body.hn-in[data-hn-sec="room"] .hn-bar { margin: 0 0 6px; padding: 4px 0; }
  body.hn-in[data-hn-sec="room"] .hn-back { font-size: 14px; padding: 5px 12px; border-radius: 10px; }
  body.hn-in[data-hn-sec="room"] .hn-title { font-size: 17px; }
  body.hn-in[data-hn-sec="room"] #app .wrap { padding-top: 6px; }
  body.hn-in[data-hn-sec="room"] #app .top { padding-top: 5px; padding-bottom: 5px; }
  #personalRoomSocial .mh-cover { padding: 5px 10px; }
  #personalRoomSocial .mh-nav { margin-top: 6px; }
  #personalRoom.personal-room, #personalRoom .personal-room { padding-top: 6px; }
}
/* 별 선물 화면의 글자 링크(단원평가 하러 가기)를 단추 모양으로 */
.star-gifts .sg-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid #d6daea; border-radius: 10px; background: #fff; color: #1e1b4b; font-weight: 700; text-decoration: none; }
.star-gifts .sg-link:hover, .star-gifts .sg-link:focus-visible { border-color: #818cf8; background: #eef2ff; color: #3730a3; outline: none; }

/* 휴대폰(600px 아래) 공간 꾸미기: 방 그림이 화면 위쪽에 오도록 위의 줄들을 좁히고, 도구 줄을 두 줄로(2026-11-12) */
@media (max-width: 600px) {
  body.hn-in[data-hn-sec="room"] .hn-bar { gap: 8px; margin: 0 0 6px; padding: 4px 0; }
  body.hn-in[data-hn-sec="room"] .hn-back { font-size: 14px; padding: 6px 10px; }
  body.hn-in[data-hn-sec="room"] .hn-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #personalRoomEntry .personal-room, #personalRoom.personal-room { padding-left: 4px; padding-right: 4px; }
  /* 공간 머리: 기분·방문 수 칩은 친구·프로필 탭에서 보이므로 여기서는 숨긴다 */
  #personalRoomSocial .mh-cover { padding: 6px 8px; gap: 6px 8px; }
  #personalRoomSocial .mh-intro { flex: 1 1 0; }
  #personalRoomSocial .mh-intro h2 { font-size: 15px; }
  #personalRoomSocial .mh-mood, #personalRoomSocial .mh-counters { display: none; }
  #personalRoomSocial .mh-bar-slot { flex: 1 1 100%; }
  #personalRoomSocial .mh-nav { margin-top: 6px; }
  /* 도구 줄: [소품 고르기][방 분위기] / [← → ↑ ↓][작게 크게 뒤집기][치우기] */
  #personalRoom .pr-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
  #personalRoom .pr-tools { display: contents; }
  #personalRoom .pr-pick { order: 1; flex: 1 1 55%; min-width: 0; }
  #personalRoom .pr-theme { order: 2; flex: 1 1 30%; min-width: 0; }
  #personalRoom .pr-tool-group, #personalRoom .pr-remove { order: 3; flex: none; }
  #personalRoom .pr-tool-group .pr-tool, #personalRoom .pr-remove { min-width: 30px; padding-left: 7px; padding-right: 7px; }
}

/* ===== 전 화면 점검(2026-11-12 오후) ===== */
/* 휴대폰 로그인: 로그인 칸을 단원평가 안내보다 위에 */
@media (max-width: 760px) {
  .student-entry.gate .student-entry-login { order: -1; }
}
/* 내 기록 칸의 할 일(누르면 그 화면으로) */
.mh-todo { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.mh-todo button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #e2e5f1; border-radius: 10px; background: #f8f9ff; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mh-todo button:hover, .mh-todo button:focus-visible { border-color: #818cf8; background: #eef2ff; outline: none; filter: none; }
.mh-todo b { margin-left: auto; color: var(--brand); white-space: nowrap; }
.mh-todo .hot b { color: #e11d48; }
/* 메뉴 안에 들어가 있을 때 아래쪽의 다른 메뉴 단추 줄 */
.hn-foot { margin: 22px 0 8px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.hn-foot > p { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--mute); }
.hn-foot > div { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-foot button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; border: 1px solid #d6daea; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.hn-foot button:hover, .hn-foot button:focus-visible { border-color: #818cf8; background: #eef2ff; outline: none; filter: none; }
.hn-foot .hn-foot-home { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.hn-badge-s { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

/* 접근성(2026-11-12 점검): 공간 화면의 작은 글자 12px로, 휴대폰 탭·보기 단추 36px 이상 */
#personalRoom .pr-price, #personalRoom .pr-count, #personalRoomSocial .mh-badge, #personalRoomSocial .mh-sticker small, #personalRoom .pr-dirty { font-size: 12px; }
@media (max-width: 600px) {
  #personalRoomSocial .mh-nav button { min-height: 38px; }
  #personalRoom .pr-view-controls .pr-icon { min-height: 36px; min-width: 36px; }
}
@media (max-width: 600px) {
  #personalRoom .pr-shop button:not(.pr-tile) { min-height: 36px; }
}

/* 소품 놀이 안내(2026-11-12): 방 이름 옆에 작게 */
.mh-hint { margin-right: auto; font-size: 13px; color: #94a3b8; white-space: nowrap; }
@media (max-width: 420px) { .mh-hint { display: none; } }

/* 받은 별 알림(2026-11-13): 선생님 별·처음 별은 가운데 축하 창, 오류 제보 별은 위쪽 짧은 알림 */
.sn-ov { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); animation: sn-fade .2s ease-out; }
.sn-ov.is-out { opacity: 0; transition: opacity .2s; }
.sn-card { position: relative; width: min(420px, 100%); padding: 26px 22px 20px; border-radius: 22px; background: linear-gradient(180deg, #fffbeb, #fff); border: 2px solid #fcd34d; box-shadow: 0 24px 60px rgba(120, 53, 15, .35); text-align: center; animation: sn-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.sn-badge { width: 76px; height: 76px; margin: -62px auto 6px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7cc, #fbbf24); font-size: 40px; box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(217, 119, 6, .45); animation: sn-spin 1.2s ease-out; }
.sn-card h2 { margin: 4px 0 2px; font-size: 22px; color: #78350f; }
.sn-num { margin: 0; font-size: 46px; font-weight: 900; line-height: 1.15; color: #d97706; text-shadow: 0 2px 0 #fff7cc; }
.sn-list { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 6px; text-align: left; }
.sn-list li { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: #fef3c7; font-size: 15px; }
.sn-list li b { flex: none; color: #92400e; }
.sn-list li span { color: #44403c; overflow-wrap: anywhere; }
.sn-help { margin: 6px 0 12px; font-size: 13px; color: #78716c; }
.sn-ok { min-height: 46px; padding: 0 28px; border: 0; border-radius: 14px; background: #f59e0b; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #b45309; }
.sn-ok:hover { filter: brightness(1.06); }
.sn-ok:focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; }
.sn-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.sn-spark { position: absolute; left: 0; top: 0; color: #f59e0b; font-size: 18px; transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: sn-fly 1.5s var(--d, 0s) ease-out forwards; }
.sn-spark:nth-child(3n) { color: #fbbf24; } .sn-spark:nth-child(4n) { color: #f472b6; } .sn-spark:nth-child(5n) { color: #60a5fa; }
.sn-toast { position: fixed; left: 50%; top: 16px; z-index: 1001; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fffbeb; border: 2px solid #fcd34d; box-shadow: 0 10px 28px rgba(120, 53, 15, .25); font-size: 15px; color: #78350f; animation: sn-drop .35s ease-out; max-width: calc(100vw - 24px); }
.sn-toast.is-out { opacity: 0; transform: translate(-50%, -10px); transition: .35s; }
.sn-toast-star { font-size: 22px; animation: sn-spin 1s ease-out; }
@keyframes sn-fade { from { opacity: 0; } }
@keyframes sn-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sn-spin { 0% { transform: rotate(-200deg) scale(.3); } 70% { transform: rotate(15deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
@keyframes sn-fly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)) rotate(160deg); } }
@keyframes sn-drop { from { opacity: 0; transform: translate(-50%, -14px); } }
@media (prefers-reduced-motion: reduce) { .sn-ov, .sn-card, .sn-badge, .sn-toast, .sn-toast-star { animation: none; } }

/* ===== 첫 화면 정리(2026-11-13, 사용자 요청: 뽑기·전체 메뉴가 잘 보이게, 덩어리마다 제각각인 모양 통일) ===== */
/* 첫 줄: 내 공간 | 메뉴 */
.mh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
.mh-menu-slot { min-width: 0; display: flex; }
.mh-menu-slot .hn-menu { flex: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hn-student .hn-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hn-student .hn-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hn-student .hn-tile.hn-big { min-height: 92px; padding: 12px 12px; gap: 10px; border-width: 2px; border-radius: 18px; font-size: 18px; align-items: center; }
.hn-student .hn-big .hn-ic { font-size: 34px; }
.hn-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hn-sub { font-size: 13px; font-weight: 600; color: #64748b; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-big.f-gift { background: linear-gradient(135deg, #fff7d6, #ffe7a3); border-color: #f5c542; color: #7a4a00; }
.hn-big.f-gift .hn-sub { color: #9a6200; }
.hn-big.f-gift:hover, .hn-big.f-gift:focus-visible { border-color: #e2a400; box-shadow: 0 8px 22px rgba(226, 164, 0, .3); }
.hn-big.f-gift .hn-ic { animation: hn-wiggle 2.8s ease-in-out infinite; }
.hn-big.f-room { background: linear-gradient(135deg, #f3edff, #e4d8ff); border-color: #b9a3f5; color: #4c1d95; }
.hn-big.f-room .hn-sub { color: #6d28d9; }
.hn-big.f-review { background: linear-gradient(135deg, #e9f8ee, #cdeed8); border-color: #86cfa0; color: #14532d; }
.hn-big.f-review .hn-sub { color: #15803d; }
.hn-big.f-hw { background: linear-gradient(135deg, #fff1f2, #ffdfe3); border-color: #f5a3b0; color: #881337; }
.hn-big.f-hw .hn-sub { color: #be123c; }
.hn-student .hn-tile.hn-small { min-height: 46px; padding: 6px 10px; gap: 6px; border-width: 1.5px; border-radius: 12px; font-size: 14.5px; font-weight: 700; border-style: solid; }
.hn-student .hn-small .hn-ic { font-size: 19px; }
.hn-student .hn-small .hn-badge { top: -6px; right: -6px; min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; padding: 0 5px; }
@keyframes hn-wiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg) scale(1.08); } 95% { transform: rotate(10deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hn-big.f-gift .hn-ic { animation: none; } }
/* 내 기록: 메뉴 아래 한 줄 카드 */
.mh-rec.mh-wide { margin: 0 0 14px; }
.mh-rec.mh-wide .mh-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
.mh-rec.mh-wide .mh-todo { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.mh-rec.mh-wide .mh-todo li { flex: 1 1 200px; }
/* 첫 화면 덩어리 겉모양 통일: 흰 카드, 같은 둥근 모서리·선·그림자 */
#questHome > *, #streakHome > *, #missionHome > *, #sum > .status, #reviewHome { border-radius: 16px !important; border: 1px solid var(--line, #e5e7eb) !important; box-shadow: 0 4px 16px rgba(30, 27, 75, .07) !important; margin-bottom: 14px; }
#questHome > *, #streakHome > *, #missionHome > * { background: #fff !important; }
#reviewHome { background: linear-gradient(135deg, #f6fbf7, #eaf6ee) !important; }
@media (max-width: 900px) {
  .mh-grid { grid-template-columns: 1fr; }
  .hn-student .hn-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-rec.mh-wide .mh-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hn-student .hn-tile.hn-big { min-height: 82px; padding: 10px 12px; font-size: 16px; }
  .hn-student .hn-big .hn-ic { font-size: 30px; }
  .hn-student .hn-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-rec.mh-wide .mh-games { grid-template-columns: 1fr; }
}

.hn-big.f-assess { background: linear-gradient(135deg, #eef2ff, #dbe3ff); border-color: #a5b4fc; color: #312e81; }
.hn-big.f-assess .hn-sub { color: #4338ca; }
.hn-big.f-games { background: linear-gradient(135deg, #e0f7fa, #c5eef5); border-color: #7dd3e0; color: #134e4a; }
.hn-big.f-games .hn-sub { color: #0f766e; }
.hn-student .hn-small .hn-sub { display: block; font-size: 11.5px; }
@media (max-width: 1150px) and (min-width: 901px) { .hn-student .hn-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hn-student .hn-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hn-sub { white-space: normal; } }