/* ===== 🏆 트로피 · 🏅 레벨업 · 배지 효과 · 👤 프로필 · 🏆 랭킹 · 길드 · 명언 ===== */

/* ── 책상 위 트로피 (프로필 · 랭킹) ── */
.obj-trophy .obj-fallback { display: block; }
.trophy { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; }
.tr-cup { font-size: clamp(34px, 4.4vw, 60px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); animation: trophyShine 3.2s ease-in-out infinite; }
@keyframes trophyShine { 50% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)) drop-shadow(0 0 12px rgba(255, 214, 102, .8)); transform: translateY(-2px); } }
.tr-lv { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #3f2f24; color: #ffd166; font-size: clamp(10px, .9vw, 12px); font-weight: 900; white-space: nowrap; }
.tr-badge { position: absolute; right: -6%; top: 6%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: linear-gradient(135deg, #ffe48a, #c7880f); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .obj-trophy { grid-area: trophy; display: block !important; }
  .trophy { aspect-ratio: 16 / 10; max-height: 120px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .table-stage { grid-template-areas: "sticky sticky sticky sticky sticky sticky" "buddy buddy buddy buddy buddy buddy" "menu menu menu notebook notebook notebook" "diary diary radio radio trophy trophy" "lamp lamp lamp lamp lamp lamp"; }
  .obj-lamp .obj-fallback { max-height: 90px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .table-stage { grid-template-columns: .9fr 1fr .55fr .55fr .55fr .55fr; grid-template-areas: "menu notebook sticky sticky sticky sticky" "menu notebook buddy buddy buddy buddy" "menu notebook diary radio trophy lamp"; }
}

/* ── 레벨업 축하 (잠깐 보였다 사라짐) ── */
.levelup { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(8, 6, 14, .55); opacity: 0; transition: opacity .35s; cursor: pointer; }
.levelup.in { opacity: 1; } .levelup.out { opacity: 0; }
.lu-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 30px 18px; border-radius: 28px; background: linear-gradient(180deg, #2a2140, #171225); color: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 2px rgba(255, 214, 102, .45); transform: scale(.7); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); overflow: hidden; max-width: min(92vw, 640px); }
.levelup.in .lu-card { transform: scale(1); }
.lu-rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255, 214, 102, .14) 0 8deg, transparent 8deg 22deg); animation: luSpin 14s linear infinite; pointer-events: none; }
@keyframes luSpin { to { transform: rotate(360deg); } }
.lu-kicker { position: relative; font: 900 clamp(26px, 5vw, 40px)/1 Georgia, serif; letter-spacing: .08em; background: linear-gradient(90deg, #ffd166, #ff7eb3, #7cf0c8, #ffd166); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: luText 2.4s linear infinite; }
@keyframes luText { to { background-position: 300% 0; } }
.lu-badges { position: relative; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lu-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: luPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.lu-badge:nth-child(2) { animation-delay: .15s; } .lu-badge:nth-child(3) { animation-delay: .3s; }
@keyframes luPop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.lu-badge b { font-size: 15px; } .lu-badge em { font-style: normal; font-size: 12.5px; color: #ffd166; font-weight: 800; }
.lu-more { position: relative; font-size: 13px; color: rgba(255, 255, 255, .75); }
.lu-profile { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.lu-profile .buddy { width: 64px; height: auto; overflow: visible; }
.lu-profile b { display: block; font-size: 16px; color: #ffd166; } .lu-profile em { font-style: normal; font-size: 12.5px; opacity: .85; }
.lu-hint { position: relative; font-size: 11.5px; opacity: .55; }

/* ── 배지 그림 효과 (레벨이 오를수록) ── */
.badge-art { overflow: visible; display: block; }
.badge-art .bg-rays { transform-box: view-box; transform-origin: 60px 56px; animation: luSpin 16s linear infinite; }
.badge-art .bg-sweep { animation: bgSweep 3.2s ease-in-out infinite; }
@keyframes bgSweep { 0%, 55% { transform: translateX(-10px) rotate(20deg); } 100% { transform: translateX(120px) rotate(20deg); } }
.badge-art .bg-spark, .buddy .bg-spark { transform-box: fill-box; transform-origin: center; animation: bgTwinkle 2.4s ease-in-out infinite; }
@keyframes bgTwinkle { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
.badge-art.lv8, .badge-art.lv9 { filter: drop-shadow(0 0 6px rgba(200, 160, 255, .65)); animation: bgGlow 2.6s ease-in-out infinite; }
.badge-art.lv10 { filter: drop-shadow(0 0 10px rgba(255, 210, 120, .9)); animation: bgGlow 2s ease-in-out infinite; }
@keyframes bgGlow { 50% { filter: drop-shadow(0 0 14px rgba(255, 220, 140, .95)); } }
.badge-art .bg-orbit { transform-box: view-box; transform-origin: 60px 56px; animation: luSpin 6s linear infinite; }
.buddy.glowing .bd-aura { transform-box: fill-box; transform-origin: center; animation: auraPulse 2.6s ease-in-out infinite; }
@keyframes auraPulse { 50% { transform: scale(1.06); opacity: .8; } }
.buddy .bd-tassel { transform-box: fill-box; transform-origin: top; animation: tassel 2s ease-in-out infinite; }
@keyframes tassel { 50% { transform: rotate(12deg); } }

/* ── 👤 프로필 ── */
.modal.profile-modal, .modal.rank-modal { width: min(96vw, 940px); }
.modal.profile-modal .modal-actions, .modal.rank-modal .modal-actions { display: none; }
.pf { display: flex; flex-direction: column; gap: 16px; }
.pf-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-sec-head h3 { font-size: 15px; font-weight: 900; }
.pf-head { display: grid; grid-template-columns: auto 1fr 1.1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, #ffd166 18%, var(--surface-2)), var(--surface-2)); }
.pf-avatar { width: 110px; } .pf-avatar .buddy { width: 100%; height: auto; overflow: visible; }
.pf-name { font-size: 22px; font-weight: 900; padding: 0; background: none; border: 0; color: var(--text); text-align: left; }
.pf-name span { font-size: 14px; opacity: .55; }
.pf-title { font-size: 14px; margin-top: 2px; } .pf-title b { color: #e0a21c; }
.pf-xp { height: 10px; border-radius: 999px; background: var(--surface-3, rgba(255, 255, 255, .08)); overflow: hidden; margin-top: 8px; }
.pf-xp i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #ff7eb3); transition: width .6s; }
.pf-xp-note { margin-top: 4px; font-size: 12px; }
.pf-edit { display: flex; gap: 6px; } .pf-edit input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border-2); background: var(--surface); color: var(--text); font: inherit; }
.pf-res { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px dashed var(--border-2); }
.pf-res-label { font-size: 12.5px; font-weight: 800; color: var(--text-2); display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.pf-likes { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #ff5f8f 18%, transparent); color: #ff5f8f; }
.pf-res-text { font-size: 15.5px; font-weight: 800; padding: 0; background: none; border: 0; color: var(--text); text-align: left; line-height: 1.4; }
.pf-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pf-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border-top: 4px solid var(--c, #5b8cff); }
.pf-tile.study { --c: #5b8cff; } .pf-tile.rest { --c: #3ccf91; } .pf-tile.sleep { --c: #8b7cf6; } .pf-tile.task { --c: #2fd3e0; } .pf-tile.tube { --c: #ff5a5f; }
.pf-tile span { font-size: 12.5px; color: var(--text-2); font-weight: 700; } .pf-tile b { font-size: 19px; font-weight: 900; } .pf-tile em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.pf-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pf-row2 > section { min-width: 0; }
.pf-show, .pf-cookie, .pf-album { padding: 14px; border-radius: 20px; background: var(--surface-2); }
.pf-show-list { display: flex; gap: 12px; justify-content: space-around; flex-wrap: wrap; }
.pf-show-item { display: flex; flex-direction: column; align-items: center; gap: 2px; } .pf-show-item b { font-size: 13px; } .pf-show-item em { font-style: normal; font-size: 11.5px; color: #e0a21c; font-weight: 800; }
.pf-video { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: var(--surface); margin-bottom: 6px; }
.pf-video img { width: 84px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; flex: none; }
.pf-video-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pf-video-text em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 700; } .pf-video-text b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-group h4 { font-size: 13.5px; margin: 6px 0; color: var(--text-2); }
.pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.pf-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 16px; background: var(--surface); text-align: center; }
.pf-badge.locked { opacity: .75; }
.pf-badge b { font-size: 13px; } .pf-badge em { font-style: normal; font-size: 11.5px; color: #e0a21c; font-weight: 800; }
.pf-badge.locked em { color: var(--muted); }
.pf-prog { width: 90%; height: 6px; border-radius: 999px; background: var(--surface-3, rgba(255, 255, 255, .08)); overflow: hidden; margin-top: 4px; }
.pf-prog i { display: block; height: 100%; background: linear-gradient(90deg, #7cf0c8, #5b8cff); border-radius: 999px; }
.pf-prog.max { height: auto; background: none; font-size: 11.5px; font-weight: 900; color: #ff7eb3; }
.pf-prog-label { font-size: 10.5px; color: var(--muted); }
.pf-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pf-foot .grow { flex: 1; }
@media (max-width: 760px) {
  .pf-head { grid-template-columns: auto 1fr; } .pf-res { grid-column: 1 / -1; }
  .pf-avatar { width: 84px; }
  .pf-tiles { grid-template-columns: repeat(2, 1fr); } .pf-tile.tube { grid-column: 1 / -1; }
  .pf-row2 { grid-template-columns: 1fr; }
  .pf-badges { grid-template-columns: repeat(2, 1fr); }
}

/* ── 🏆 랭킹 · 길드 · 명언 ── */
.rk { display: flex; flex-direction: column; gap: 12px; }
.rk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rk-tabs button { padding: 10px; border-radius: 12px; font-weight: 800; background: var(--surface-2); color: var(--text-2); border: 1.5px solid var(--border); }
.rk-tabs button.on { background: color-mix(in srgb, #ffd166 22%, var(--surface-2)); color: var(--text); border-color: #e0a21c; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rk-chips .grow { flex: 1; }
.chip.emoji { font-size: 18px; padding: 4px 9px; }
.rk-note { margin: 0; }
.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); }
.rk-list li.top { background: linear-gradient(90deg, color-mix(in srgb, #ffd166 20%, var(--surface-2)), var(--surface-2)); }
.rk-list li.me { box-shadow: 0 0 0 2px #5b8cff inset; }
.rk-rank { width: 30px; text-align: center; font-weight: 900; font-size: 16px; flex: none; }
.rk-av { width: 40px; flex: none; } .rk-av .buddy { width: 100%; height: auto; overflow: visible; }
.rk-emoji { width: 40px; text-align: center; font-size: 26px; flex: none; }
.rk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-list.quotes .rk-name b { white-space: normal; }
.rk-name em { font-style: normal; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-val { font-weight: 900; font-size: 15px; white-space: nowrap; }
.rk-like { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border); font-weight: 800; font-size: 13px; color: var(--text-2); }
.rk-like.on { border-color: #ff5f8f; color: #ff5f8f; background: color-mix(in srgb, #ff5f8f 12%, var(--surface)); }
.rk-like.mine { opacity: .8; }
.rk-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.rk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.rk-form input { padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border-2); background: var(--surface); color: var(--text); font: inherit; }
.rk-form.quote { flex-direction: row; flex-wrap: wrap; } .rk-form.quote input:first-child { flex: 2 1 260px; } .rk-form.quote input:nth-child(2) { flex: 1 1 140px; }
.rk-warn { color: #ff7a5a; font-size: 12.5px; font-weight: 700; margin: 0; }
.rk-offline { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--surface-2); }
.rk-me { display: flex; align-items: center; gap: 12px; } .rk-me .buddy { width: 70px; height: auto; overflow: visible; } .rk-me b { display: block; font-size: 17px; } .rk-me em { font-style: normal; font-size: 13px; color: var(--muted); }
.rk-loading { text-align: center; padding: 30px; }
@media (max-width: 600px) { .rk-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .badge-art *, .badge-art, .lu-rays, .lu-kicker, .tr-cup { animation: none !important; } }

/* ── 설정: 🎮 게임 · 📺 유튜브 보기 ── */
.game-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.game-buddy { width: 56px; flex: none; } .game-buddy .buddy { width: 100%; height: auto; overflow: visible; }
.game-id { flex: 1; min-width: 100px; display: flex; flex-direction: column; } .game-id b { font-size: 15px; } .game-id em { font-style: normal; font-size: 12px; color: var(--muted); }
.tube-ch { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tube-ch img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #ff5a5f; }
.tube-ch span { flex: 1; display: flex; flex-direction: column; } .tube-ch b { font-size: 15px; } .tube-ch em { font-style: normal; font-size: 12px; color: var(--muted); }
.tube-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tube-types .kind { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.tube-types .kind em { color: var(--muted); }
.tube-types .kind.on { border-color: #ff5a5f; background: color-mix(in srgb, #ff5a5f 14%, var(--surface-2)); }
.tube-lists { display: grid; grid-template-columns: 1fr; gap: 4px; }
.tube-list { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1.5px solid var(--border); font-size: 13.5px; cursor: pointer; }
.tube-list.on { border-color: #ff5a5f; }
.tube-list input { accent-color: #ff5a5f; width: 16px; height: 16px; }
.tube-quick { margin-top: 6px; }

/* 휴대폰 세로: 기록 · 설정 · 프로필 · 조명을 한 줄에 넷, 그림 크기는 상한 */
@media (max-width: 760px) {
  .table-stage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas:
    "sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky"
    "buddy buddy buddy buddy buddy buddy buddy buddy buddy buddy buddy buddy"
    "menu menu menu menu menu menu notebook notebook notebook notebook notebook notebook"
    "diary diary diary radio radio radio trophy trophy trophy lamp lamp lamp"; gap: 30px 8px; }
  .obj-diary .obj-label em, .obj-radio .obj-label em, .obj-trophy .obj-label em, .obj-lamp .obj-label em { display: none; }
  .obj-diary .obj-label, .obj-radio .obj-label, .obj-trophy .obj-label, .obj-lamp .obj-label { font-size: 11.5px; padding: 4px 8px; white-space: nowrap; }
}

/* 휴대폰: 물건 칸이 내용물 때문에 화면보다 넓어지지 않게 */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .table-stage > .obj { min-width: 0; }
  .nb-stack .nb-art { max-width: 100%; }
}
/* 휴대폰: 그림이 들어온 할 일 책자의 최소 높이(150px)가 폭을 밀어내지 않게 */
@media (max-width: 760px), (max-height: 560px) and (orientation: landscape) {
  .table-stage .obj-notebook.has-art .nb-stack { min-height: 0; }
}