*{box-sizing:border-box}html,
body{margin:0;width:100%;height:100%;overflow:hidden;font-family:'SamsungOne','One UI',-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}body{background:#131620;display:flex;justify-content:center;align-items:center}.phone{width:min(100vw,450px);height:min(100dvh,calc(100vw * 2.333333));position:relative;overflow:hidden;background:#111;border-radius:0;box-shadow:0 0 45px #0007}.wallpaper{position:absolute;inset:0;background-image:url('assets/wallpaper.jpg');background-size:cover;background-position:center;filter:brightness(.85)}.screen{position:absolute;inset:0;overflow:hidden;transition:opacity .25s,transform .35s}.hidden{opacity:0!important;pointer-events:none!important;visibility:hidden}.status{position:absolute;top:0;left:0;width:100%;height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;z-index:12;font-size:13px;font-weight:650;color:white;text-shadow:0 1px 3px #0005}.status-right{display:flex;align-items:center;gap:5px}.status svg{width:17px;height:17px}.navline{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:105px;height:4px;border-radius:5px;background:#fff9;z-index:22;cursor:pointer}.wake{position:absolute;inset:0;background:#05070b;z-index:40;display:flex;justify-content:center;align-items:center;color:#fff8;cursor:pointer;transition:opacity .3s}.wake p{position:absolute;bottom:12%;font-size:13px;letter-spacing:.05em}.wake-clock{font-size:48px;font-weight:300}.lock{z-index:20;color:#fff;text-shadow:0 1px 5px #15152440;cursor:pointer}.lock .shade{position:absolute;inset:0;background:linear-gradient(to bottom,#14152d20,transparent 40%,#13152b33)}.lock-clock{position:absolute;top:12%;width:100%;text-align:center;line-height:1}.bigtime{font-size:clamp(66px,22vw,108px);letter-spacing:-.075em;font-weight:650;padding-right:.07em}.lock-date{font-size:17px;font-weight:650;margin-top:5px}.lock-icons{position:absolute;bottom:54px;left:8%;right:8%;display:flex;justify-content:space-between}.round-btn{width:48px;height:48px;border-radius:50%;background:#373a4b80;backdrop-filter:blur(10px);display:grid;place-items:center;border:1px solid #fff4}.lock-hint{position:absolute;bottom:26px;text-align:center;width:100%;font-size:12px;opacity:.85}.pin{z-index:30;background:linear-gradient(#c5d2dfb5,#a7a9d6c7);backdrop-filter:blur(28px);color:#fff;text-align:center}.pin-top{position:absolute;top:12%;width:100%;font-size:20px;font-weight:600}.pin-dots{position:absolute;top:22%;width:100%;display:flex;gap:15px;justify-content:center}.dot{width:14px;height:14px;border:1.5px solid #fff;border-radius:50%}.dot.filled{background:white}.pin-error{position:absolute;top:27%;width:100%;font-size:13px;color:#fff}.keypad{position:absolute;top:34%;bottom:12%;left:11%;right:11%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);align-items:center;justify-items:center}.key{width:74px;height:68px;border:0;color:#fff;background:transparent;border-radius:50%;font-size:30px;font-weight:350;cursor:pointer}.key:active{background:#fff3}.key small{display:block;font-size:9px;letter-spacing:2px;line-height:10px}.pin-cancel{position:absolute;bottom:6%;left:8%;background:none;border:0;color:white;font-size:15px}.pin-delete{position:absolute;bottom:6%;right:8%;background:none;border:0;color:white;font-size:15px}.home{z-index:10;color:#fff}.home .wallpaper{filter:brightness(.83)}.home-status{z-index:15}.music{position:absolute;top:17%;left:6%;width:88%;height:18%;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#38394bcb,#272b41ee);box-shadow:0 5px 20px #0002;backdrop-filter:blur(12px);padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
/* 뮤직바 앨범 사진 */
.music::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.45)
    ),
    var(--music-cover, none);

  background-size: cover;
  background-position: center;

  pointer-events: none;
}

  .music-top{display:flex;justify-content:space-between;
    align-items:center;font-weight:700;font-size:11px}
    .music-song{font-size:12px;font-weight:650;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis
    }.progress{width:100%;accent-color:#e63e4c;height:5px;cursor:pointer}.times{display:flex;justify-content:space-between;font-size:10px;color:#ddd}.player-controls{display:flex;align-items:center;justify-content:space-around}.music button{border:0;background:transparent;color:white;font-size:19px;cursor:pointer;min-width:34px;min-height:32px}.music button:active{transform:scale(.92)}.music button.on{color:#ff7479}.player-controls .play{background:#ffffff24;border-radius:50%;width:42px;height:42px}.apps-row{position:absolute;bottom:25.5%;left:5%;right:5%;display:flex;justify-content:space-around}.app-button{display:flex;flex-direction:column;align-items:center;gap:7px;background:transparent;color:#fff;border:0;cursor:pointer;padding:0;min-width:0;width:27%;font-size:12px;text-shadow:0 1px 4px #0006}.app-button:active .appicon{transform:scale(.89)}.appicon{width:min(16.1vw,67px);height:min(16.1vw,67px);max-width:67px;max-height:67px;display:block;border-radius:25%;object-fit:cover;transition:transform .15s;box-shadow:0 1px 5px #0003}.dock{position:absolute;left:4%;right:4%;bottom:7.2%;display:flex;align-items:center;justify-content:space-between;gap:6px}.dock button{background:transparent;border:0;padding:0;cursor:pointer;flex:1;display:flex;justify-content:center}.dock .appicon{width:min(16vw,67px);height:min(16vw,67px)}.appview{z-index:25;background:#f6f7fb;color:#17191e;transform:translateY(105%);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}.appview.open{transform:translateY(0);opacity:1;pointer-events:auto}.appbar{padding:55px 22px 19px;display:flex;gap:20px;align-items:center;font-weight:750;font-size:22px;border-bottom:1px solid #e8e8ec}.back{border:0;background:transparent;font-size:25px;cursor:pointer}.appbody{padding:25px;color:#5d5d6a;line-height:1.8;font-size:15px}.power{display:none}.badge{display:inline-block;background:#e9eaf2;color:#595b73;border-radius:12px;font-size:12px;padding:4px 10px;margin-top:12px}@media(min-width:600px){.phone{border-radius:27px;border:5px solid #24252b;height:min(92dvh,1000px);width:calc(min(92dvh,1000px)*.428571)}.power{display:block;position:absolute;left:calc(50% + min(92dvh,1000px)*.214285 + 6px);top:30%;height:62px;width:5px;border:0;border-radius:4px;background:#555;cursor:pointer}}@media(max-height:660px){.music{top:12%;height:22%}.apps-row{bottom:27%}.bigtime{font-size:70px}}

/* v2: proportional compact mobile layout */
.phone{width:min(100vw,355px,calc(100dvh * 355 / 770));height:min(100dvh,770px,calc(100vw * 770 / 355));aspect-ratio:355/770}
.appicon,.dock .appicon{width:clamp(39px,13.8vw,50px);height:clamp(39px,13.8vw,50px);max-width:50px;max-height:50px;border-radius:24%;box-shadow:none}
.app-button{gap:6px;font-size:11px}
.apps-row{left:7%;right:7%;bottom:24.5%}
.dock{left:5%;right:5%;bottom:6.5%;gap:3px}
.keypad{left:50%;right:auto;width:min(80%,290px);transform:translateX(-50%);grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center}
.key{width:64px;height:64px;min-width:0;padding:0;display:grid;place-items:center;text-align:center}
@media(min-width:600px){.phone{width:min(355px,calc(92dvh * 355 / 770));height:min(770px,92dvh);border-radius:24px;border:4px solid #24252b}.power{display:none}}

/* V3: 21:9 responsive canvas. The phone itself, not the browser window, is the layout reference. */
html,body{width:100%;height:100%;height:100dvh}
body{padding:0;margin:0;overflow:hidden}
.phone{
 container-type:size;aspect-ratio:3/7;
 width:min(100vw,calc(100dvh * 3 / 7));
 height:min(100dvh,calc(100vw * 7 / 3));
 max-width:none;max-height:none;
 border:0;border-radius:0;flex:none;
}
.appicon,.dock .appicon{
 width:clamp(43px,13.8cqw,74px);height:clamp(43px,13.8cqw,74px);
 max-width:none;max-height:none;border-radius:25%;
}
.apps-row{bottom:24.5%;left:5%;right:5%;gap:8px;justify-content:space-around}
.app-button{font-size:clamp(11px,3.1cqw,15px);gap:7px}
.dock{bottom:6%;left:3%;right:3%;gap:4px}
.keypad{left:0;right:0;width:100%;padding:0 11%;top:34%;bottom:12%;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.key{width:clamp(56px,19cqw,82px);height:clamp(55px,18cqw,80px)}
.music{top:15%;height:19%;left:5%;width:90%;padding:clamp(12px,3.3cqw,20px);border-radius:clamp(18px,5cqw,30px)}
.music-song{font-size:clamp(11px,3cqw,15px)}
.music button{font-size:clamp(18px,5cqw,25px)}
.music .player-controls .play{width:clamp(39px,11cqw,54px);height:clamp(39px,11cqw,54px)}
.bigtime{font-size:clamp(64px,22cqw,120px)}
.pin-top{top:13%}
@media(min-width:600px){.phone{border:0;border-radius:clamp(20px,3vw,38px);width:min(100vw,calc(100dvh * 3 / 7));height:min(100dvh,calc(100vw * 7 / 3))}.power{display:none}}
@media(max-height:660px){.music{top:15%;height:19%}.apps-row{bottom:24.5%}.bigtime{font-size:clamp(64px,22cqw,120px)}}

/* V4 fixes: real centered keypad + clean music buttons */
.keypad{transform:none;left:0;right:0;width:100%;padding:0 11%;}
.pin-cancel,.pin-delete{display:none!important}
.music .player-controls{gap:4px;justify-content:space-between}
.music .player-controls button{display:grid;place-items:center;padding:0;line-height:0;flex:none}
.music .player-controls svg{display:block;width:20px;height:20px;fill:currentColor}
.music .player-controls .play{display:grid;place-items:center;width:clamp(39px,11cqw,54px);height:clamp(39px,11cqw,54px);border-radius:50%;background:#ffffff28}
.music .player-controls .play svg{width:23px;height:23px}
.music .player-controls .play .pause-mark{display:none}
.music .player-controls .play.is-playing .play-mark{display:none}
.music .player-controls .play.is-playing .pause-mark{display:block}
.music .player-controls button:focus-visible{outline:2px solid white;outline-offset:3px}
.music .progress{display:block;width:100%;appearance:none;-webkit-appearance:none;height:5px;border-radius:99px;border:none;margin:0;outline:0;cursor:pointer;background:linear-gradient(to right,#e74656 0%,#a8a7a8 0%)}
.music .progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#ed4253;border:3px solid #fff;box-shadow:0 0 4px #0004}
.music .progress::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#ed4253;border:3px solid #fff}

/* v5 cleanup: center keypad and hide unneeded controls */
.keypad{transform:none!important;left:0;right:0;width:100%;padding:0 11%;margin:0}
.pin-cancel,.pin-delete{display:none!important}
.music{background:rgba(13,15,27,.88);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:none}
.music::before{display:none}
/* 뮤직바 버튼 3개 중앙 정렬 */
.music .player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
}
/* 뮤직바 버튼 정렬 */
.music .player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

.music .player-controls svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* 기본 상태: 재생 아이콘 표시 */
.music .pause-mark {
  display: none;
}

/* 재생 중: 일시정지 아이콘 표시 */
.music .play.is-playing .play-mark {
  display: none;
}

.music .play.is-playing .pause-mark {
  display: block;
}

/* ======================================
   WEVERSE APP
====================================== */

.wv-app {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #f5f6f8;
  color: #101010;
  display: none;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont,
    "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.wv-app.open {
  display: block;
}

.wv-app [hidden] {
  display: none !important;
}

.wv-app button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wv-page {
  position: absolute;
  inset: 0;
  background: #f5f6f8;
  overflow: hidden;
}

/* HOME HEADER */

.wv-home-header {
  height: 12%;
  padding: 9% 5% 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wv-logo {
  display: flex;
  align-items: center;
  width: 95px;
  height: 32px;
  flex-shrink: 0;
}

.wv-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.wv-header-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 29px;
}

.wv-gem {
  color: #39d5c8;
  text-shadow: 2px 2px #9664d9;
}

.wv-bell {
  color: black;
}

/* HOME FEED TABS */

.wv-feed-tabs {
  display: flex;
  gap: 6%;
  align-items: center;
  padding: 7px 5% 15px;
  background: white;
  overflow: hidden;
  white-space: nowrap;
}

.wv-feed-tabs span {
  font-size: clamp(13px, 4.4cqw, 20px);
  font-weight: 750;
  color: #505050;
}

.wv-feed-tabs .selected {
  color: #111;
  border-bottom: 3px solid #111;
  padding-bottom: 7px;
}

.wv-party {
  font-style: italic;
  font-weight: 900 !important;
}

/* HOME CONTENT */

.wv-feed-scroll {
  position: absolute;
  top: 20%;
  bottom: 10%;
  width: 100%;
  overflow-y: auto;
  padding: 0 3% 20px;
  scrollbar-width: none;
}

.wv-feed-scroll h2 {
  margin: 12px 2% 20px;
  font-size: clamp(20px, 6cqw, 28px);
}

.wv-feed-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px #00000008;
}

/* 메인 피드 이미지: 나중에 교체 가능 */

.wv-feed-photo {
  width: 100%;
  aspect-ratio: 1.15;
  background-color: #90bed7;
 background-image: url("assets/weverse/태현위버스.jpg");
 background-position: 50% 50%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wv-feed-photo span {
  font-size: 13px;
  color: #ffffffa0;
  letter-spacing: 3px;
}

.wv-feed-info {
  padding: 20px 17px 25px;
}

.wv-artist-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: clamp(12px, 3.6cqw, 16px);
}

.wv-group-avatar {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: #051018;
  color: white;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.wv-verified {
  color: #19c8ce;
  font-size: 19px;
  margin-left: 3px;
}

.wv-artist-row p {
  font-size: 12px;
  color: #999;
  margin: 4px 0 0;
}

.wv-feed-caption {
  font-size: clamp(13px, 3.7cqw, 17px);
  line-height: 1.55;
  margin-top: 22px;
}

/* DM HEADER */

.wv-dm-header {
  height: 12%;
  background: #f5f6f8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 4%;
}

.wv-dm-header strong {
  font-size: clamp(19px, 5.5cqw, 26px);
}

.wv-dm-actions {
  position: absolute;
  right: 5%;
  display: flex;
  gap: 17px;
  font-size: 27px;
  align-items: center;
}

/* DM FILTERS */

.wv-filter-tabs {
  display: flex;
  gap: 10px;
  padding: 0 5% 20px;
}

.wv-filter-tabs button {
  border: 1px solid #dce0e6;
  background: white;
  border-radius: 25px;
  padding: 9px 19px;
  color: black;
  font-size: 14px;
  font-weight: 750;
}

.wv-filter-tabs button.active {
  background: #111;
  border-color: #111;
  color: white;
}

/* DM LIST */

.wv-dm-scroll {
  position: absolute;
  top: 20%;
  bottom: 10%;
  width: 100%;
  padding: 0 3%;
  overflow-y: auto;
}

.wv-message-card {
  background: white;
  border-radius: 26px;
  padding: 25px 17px 18px;
  box-shadow: 0 2px 8px #00000008;
}

.wv-message-card h2 {
  margin: -5px 0 25px;
  font-size: clamp(17px, 4.5cqw, 21px);
  font-weight: 750;
  position: relative;
  left: 5px;
}

.wv-dm-person {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 13px;
  border: 0;
  background: none;
  padding: 0 0 5px;
  text-align: left;
  color: #111;
}

.wv-avatar-wrap {
  width: 49px;
  height: 49px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
  background: #dad8f3;
  display: grid;
  place-items: center;
}

.wv-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 2;
}

.wv-avatar-fallback {
  font-weight: 800;
  color: #5945a7;
}



/* DM 프사 오른쪽 아래 별 장식 */
.wv-star {
  position: absolute;
  z-index: 3;

  /* 프사에 걸치는 위치 */
  bottom: -6px;
  right: -6px;

  /* 테두리 없는 순백색 동그라미 */
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #ffffff;
  border: none;

  /* 흰 동그라미 바깥의 연한 회색 그림자 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);

  /* 작은 🌟 이모지 중앙 정렬 */
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}



.wv-person-info {
  flex: 1;
  min-width: 0;
}

.wv-person-name {
  display: flex;
  align-items: center;
  font-size: clamp(13px, 4cqw, 17px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wv-person-preview {
  font-size: 14px;
  margin-top: 5px;
  color: #232323;
}

.wv-person-date {
  font-size: 12px;
  color: #9da0a8;
  align-self: flex-start;
  padding-top: 5px;
}

/* =====================================
   WEVERSE BOTTOM NAVIGATION
===================================== */

/* 전체 흰색 캡슐 */
.wv-bottom-nav {
  position: absolute;
  bottom: 3.5%;
  left: 4%;
  right: 4%;
  height: 55px;

  display: flex;
  align-items: center;
  padding: 4px;

  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #eeeeee;
  border-radius: 999px;

  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.07);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  z-index: 8;
}

/* 메뉴 5개 공통 */
.wv-nav-item {
  flex: 1;
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 3px 0;
  margin: 0;

  border: none;
  border-radius: 999px;
  background: transparent;

  color: #111;
  cursor: pointer;
}

/* 선택된 메뉴 */
.wv-nav-item.active {
  background: #f0f0f0;
  color: #111;
}

/* 메뉴 글씨 */
.wv-nav-item span {
  font-size: clamp(10px, 3.3cqw, 14px);
  line-height: 1.15;
  font-weight: 650;
  white-space: nowrap;
}

/* SVG 공통 */
.wv-nav-item .wv-icon {
  display: block;
  width: 29px;
  height: 29px;
  flex-shrink: 0;

  fill: none;
  stroke: #111;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================
   홈
===================== */

.wv-nav-item .wv-home-outline,
.wv-nav-item .wv-home-filled {
  width: 26px;
  height: 26px;
}

/* 선택하지 않은 홈 */
.wv-nav-item .wv-home-outline {
  display: block;
}

/* 선택한 홈은 기본적으로 숨김 */
.wv-nav-item .wv-home-filled {
  display: none;
}

/* 홈 선택 시 아이콘 교체 */
.wv-nav-item.active .wv-home-outline {
  display: none;
}

.wv-nav-item.active .wv-home-filled {
  display: block;
}

/* =====================
   커뮤니티
===================== */

.wv-nav-item .wv-community-icon {
  width: 25px;
  height: 25px;
  stroke-width: 2.8;
}

/* =====================
   Shop
===================== */

.wv-nav-item .wv-shop-icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.6;
}

/* =====================
   DM
===================== */

/* 기본: 테두리 DM */
.wv-nav-item .wv-dm-outline {
  display: block;
  width: 26px;
  height: 26px;
}

/* 기본: 검은 DM 숨김 */
.wv-nav-item .wv-dm-filled {
  display: none;
  width: 25px;
  height: 25px;
  fill: #111;
  stroke: none;
}

/* DM 선택 시 아이콘 교체 */
.wv-nav-item.active .wv-dm-outline {
  display: none;
}

.wv-nav-item.active .wv-dm-filled {
  display: block;
}

/* =====================
   더보기
===================== */

.wv-nav-item .wv-more-icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #111;
  stroke-width: 2.7;
}

/* 아직 클릭하지 않는 메뉴 */
.wv-nav-item.disabled {
  cursor: default;
}


/* =========================
   위버스 채팅방 상단바
========================= */

.wv-chat-header {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4% 4% 0;
  background: white;
  border-bottom: 1px solid #f3f3f3;
  gap: 10px;
}

.wv-chat-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* 뒤로가기: 프사 크기랑 맞추기 */
.wv-chat-back {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: #111;
  flex-shrink: 0;
}

/* 프사 */
.wv-chat-small-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #e9e2fc;
  color: #8562ae;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* 이름 + 인증마크 묶기 */
.wv-chat-name-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* 이름 */
.wv-chat-title {
  font-size: clamp(14px, 4.5cqw, 19px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 이름 옆 인증마크 */
.wv-chat-name-wrap .wv-verified {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 0;
}

/* 우측 아이콘 묶음 */
.wv-chat-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 검색 / 더보기 버튼 */
.wv-chat-search,
.wv-chat-more {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: #111;
  flex-shrink: 0;
}

.wv-chat-small-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #e9e2fc;
  color: #8562ae;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.wv-chat-title {
  flex: 1;
  min-width: 0;
  font-size: clamp(14px, 4.5cqw, 19px);
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wv-chat-header .wv-verified {
  flex-shrink: 0;
}

.wv-chat-messages {
  position: absolute;
  top: 10%;
  bottom: 13%;
  left: 0;
  right: 0;
  padding: 18px 5% 24px;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}


.wv-chat-artist-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 650;
  color: #737373;
  margin: 18px 0 8px;
}

.wv-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 5px 0;
}

.wv-bubble-row.artist {
  justify-content: flex-start;
  padding-left: 35px;
}

.wv-bubble-row.me {
  justify-content: flex-end;
}

.wv-bubble {
  max-width: 82%;
  padding: 12px 15px;
  font-size: clamp(14px, 4cqw, 18px);
  line-height: 1.5;
  color: #111;
  overflow-wrap: anywhere;
}

.wv-bubble-row.artist .wv-bubble {
  background: #baf3f5;
  border-radius: 5px 23px 23px 23px;
}

.wv-bubble-row.me .wv-bubble {
  background: #f0f1f5;
  border-radius: 23px 5px 23px 23px;
}

.wv-bubble-time {
  font-size: 10px;
  color: #999;
  flex-shrink: 0;
  padding-bottom: 3px;
}

/* CHAT INPUT */

.wv-chat-compose {
  position: absolute;
  bottom: 5%;
  left: 4%;
  right: 4%;
  height: 42px;
  border: 1px solid #ddd;
  border-radius: 28px;
  display: flex;
  align-items: center;
  background: white;
}

.wv-chat-compose input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 17px;
  background: transparent;
  font-size: 12px;
  color: #111;
  user-select: text;
}

.wv-chat-compose input::placeholder {
  color: #aaa;
}

.wv-chat-compose button {
  width: 29px;
  height: 29px;
  margin-right: 7px;
  border: 0;
  border-radius: 50%;
  background: #1ec9ce;
  color: white;
  font-size: 19px;
}

/* SYSTEM HOME BAR */

.wv-system-home {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
}

.wv-system-home span {
  width: 95px;
  height: 4px;
  border-radius: 10px;
  background: #5558;
}

/* 채팅방에서는 메뉴 숨기기 */

.wv-app.chat-open .wv-bottom-nav {
  display: none;
}

/* 작은 화면 대응 */

@media (max-height: 660px) {
  .wv-bottom-nav {
    height: 60px;
  }

  .wv-feed-scroll {
    top: 23%;
  }

  .wv-chat-compose {
    bottom: 6%;
  }
}

/* ====================================
   위버스 채팅방 헤더 최종 정렬
==================================== */

/* 전체 헤더 */
.wv-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10%;
  padding: 4% 2% 0;
  gap: 4px;
}

/* 왼쪽: 화살표 / 프사 / 이름 / 인증 */
.wv-chat-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

/* 오른쪽: 돋보기 / 점 세 개 */
.wv-chat-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* 버튼들의 중심을 동일하게 */
.wv-chat-header .wv-chat-back,
.wv-chat-header .wv-chat-search,
.wv-chat-header .wv-chat-more {
  display: grid;
  place-items: center;
  width: 28px;
  height: 30px;
  min-width: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  flex-shrink: 0;
  line-height: 1;
}

/* 뒤로가기: 두께 얇게 */
.wv-chat-header .wv-chat-back svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #111;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 돋보기: 손잡이 오른쪽 아래 ↘ */
.wv-chat-header .wv-chat-search {
  transform: none;
}

.wv-chat-header .wv-chat-search svg {
  display: block;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #111;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
}

/* 점 세 개: 조금 작게 */
.wv-chat-header .wv-chat-more {
  font-size: 24px;
  font-weight: 400;
}

/* 프사 */
.wv-chat-header .wv-chat-small-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

/* 이름 + 인증배지 */
.wv-chat-name-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* 이름: 공간 확보 */
.wv-chat-name-wrap .wv-chat-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(13px, 3.8cqw, 16px);
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 이름 바로 옆 인증배지 */
.wv-chat-name-wrap .wv-verified {
  display: block;
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  object-fit: contain;
}


/* 돋보기: 오른쪽 아래 방향 고정 */
.wv-chat-header .wv-chat-search {
  transform: none !important;
}

.wv-chat-header .wv-chat-search svg {
  transform: none !important;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #111;
  stroke-width: 2.3;
  stroke-linecap: round;
}


/* ==============================
   채팅방 헤더 아이콘 크기 최종 조절
============================== */

/* 프사: 25px 유지 */
.wv-chat-header .wv-chat-small-avatar {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  font-size: 12px;
}

/* 화살표/프사/이름 간격 */
.wv-chat-left {
  gap: 7px;
}

/* 뒤로가기: 프사와 비슷한 크기로 축소 */
.wv-chat-header .wv-chat-back svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

/* 돋보기: 방향 유지하고 크기만 축소 */
.wv-chat-header .wv-chat-search {
  transform: none !important;
}

.wv-chat-header .wv-chat-search svg {
  width: 22px;
  height: 22px;
  transform: none !important;
  stroke-width: 2.1;
}

/* 오른쪽 두 버튼을 같은 높이로 */
.wv-chat-header .wv-chat-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 점 세 개 SVG */
.wv-chat-header .wv-chat-more svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: #111;
  stroke: none;
}

/* 메시지 전송 버튼만 숨기기 */
.wv-chat-compose button[type="submit"] {
  display: none;
}



/* ====================================
   위버스 하단 메뉴 크기 / 간격 조절판
==================================== */

.wv-bottom-nav {
  /* 탭끼리 좌우 간격 */
  --tab-space: 8px;

  /* 모든 아이콘의 기준 크기 */
  --icon-size: 21px;

  /* 아이콘과 글씨 사이 간격 */
  --icon-text-space: 5px;

  /* 글씨 크기 */
  --tab-font-size: 8px;

  gap: var(--tab-space);
}

/* 메뉴별 동일한 너비와 정렬 */
.wv-bottom-nav .wv-nav-item {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: var(--icon-text-space);
}

/* 다섯 아이콘 모두 크기 통일 */
.wv-bottom-nav .wv-nav-item .wv-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
}

/* 아이콘의 실제 모양만 개별 미세조절 */
.wv-bottom-nav .wv-home-outline,
.wv-bottom-nav .wv-home-filled {
  transform: scale(1);
}

.wv-bottom-nav .wv-community-icon {
  transform: scale(1);
}

.wv-bottom-nav .wv-shop-icon {
  transform: scaleX(1.08);
}

.wv-bottom-nav .wv-dm-outline,
.wv-bottom-nav .wv-dm-filled {
  transform: scale(1);
}

.wv-bottom-nav .wv-more-icon {
  transform: scale(1);
}

/* 글씨 전체 크기 통일 */
.wv-bottom-nav .wv-nav-item span {
  font-size: var(--tab-font-size);
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
  text-align: center;
}

/* 선택 상태의 아이콘 전환 유지 */
.wv-bottom-nav .wv-nav-item.active .wv-home-outline,
.wv-bottom-nav .wv-nav-item.active .wv-dm-outline {
  display: none;
}

.wv-bottom-nav .wv-nav-item.active .wv-home-filled,
.wv-bottom-nav .wv-nav-item.active .wv-dm-filled {
  display: block;
}

/* 미선택 상태의 아이콘 전환 유지 */
.wv-bottom-nav .wv-nav-item:not(.active) .wv-home-filled,
.wv-bottom-nav .wv-nav-item:not(.active) .wv-dm-filled {
  display: none;
}

.wv-bottom-nav .wv-nav-item:not(.active) .wv-home-outline,
.wv-bottom-nav .wv-nav-item:not(.active) .wv-dm-outline {
  display: block;
}


/* ======================================
   WEVERSE HOME / DM 상단 디테일
====================================== */


/* ============================
   ① 위버스 홈 상단 정렬
============================ */

#wvHome .wv-home-header {
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
}

/* 위버스 로고 */
#wvHome .wv-logo {
  display: flex;
  align-items: center;
  width: 110px;
  height: 40px;
  flex-shrink: 0;
}

/* 반짝이 / 종 가로 정렬 */
#wvHome .wv-header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  line-height: 0;
}

/* SVG 공통 중앙 정렬 */
#wvHome .wv-header-actions span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 32px;
}

/* 반짝이 크기 */
#wvHome .wv-gem svg {
  display: block;
  width: 25px;
  height: 25px;
}

/* 알림 종 크기 + 수평 중심 맞추기 */
#wvHome .wv-bell svg {
  display: block;
  width: 34px;
  height: 34px;
  transform: translateY(-4px);
}


/* ============================
   ② My Feed / Discover 등 정렬
============================ */

/* 탭 영역 */
#wvHome .wv-feed-tabs {
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 5%;
  background: white;
}

/* 네 글씨 높이 통일 */
#wvHome .wv-feed-tabs span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0;
  margin: 0;

  line-height: 1;
  white-space: nowrap;
}

/* 선택된 My Feed */
#wvHome .wv-feed-tabs .selected {
  color: #111;
  border-bottom: none;
  padding-bottom: 0;
}

/* My Feed 밑줄 */
#wvHome .wv-feed-tabs .selected::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;

  height: 2px;
  background: #111;
}

/* Party 글씨 */
#wvHome .wv-feed-tabs .wv-party {
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
}

/* Party 위 빨간 점 */
#wvHome .wv-feed-tabs .wv-party::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 15px;

  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fb666b;
}


/* ============================
   ③ Weverse DM 제목 / 아이콘
============================ */

#wvDM .wv-dm-header {
  position: relative;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
}

/* Weverse DM 글씨 크기 축소 */
#wvDM .wv-dm-header strong {
  font-size: clamp(15px, 4.6cqw, 19px);
  font-weight: 800;
  line-height: 1.2;
}

/* 오른쪽 친구추가 / 점 세 개 */
#wvDM .wv-dm-actions {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  gap: 12px;
  font-size: initial;
}

/* 아이콘 영역 */
#wvDM .wv-dm-actions span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
}

/* SVG 공통 */
#wvDM .wv-dm-actions svg {
  display: block;
  width: 26px;
  height: 26px;
  color: #111;
}

/* 친구추가 아이콘 */
#wvDM .wv-dm-add-icon svg {
  fill: none;
}

/* 세로 점 세 개 */
#wvDM .wv-dm-more-icon svg {
  width: 23px;
  height: 23px;
  fill: #111;
  stroke: none;
}

/* 전체 / 태현 탭 삭제 후
   메시지 카드 위쪽 여백 조정 */
#wvDM .wv-dm-scroll {
  top: calc(12% + 16px);
}
/* 홈 상단 영역을 12% + 8%로 정확히 배치 */
#wvHome .wv-home-header {
  height: 12%;
}

#wvHome .wv-feed-tabs {
  height: 8%;
}

/* 아티스트 소식은 탭이 끝난 다음부터 */
#wvHome .wv-feed-scroll {
  top: 20%;
}


/* ====================================
   WEVERSE HOME 디테일 조절
   다른 화면에는 적용되지 않음
==================================== */

/* ① My Feed / Discover / Party / Spot */

/* Party 위 빨간 점 제거 */
#wvHome .wv-party::after {
  display: none !important;
}


/* ② 반짝이 / 알림 종 */
#wvHome .wv-header-actions {
  display: flex;
  align-items: center;

  /* 반짝이와 종 사이 간격 */
  gap: 4px;

  /* 두 아이콘을 함께 오른쪽으로 이동 */
  transform: translateX(5px); }

#wvHome .wv-header-actions > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* 반짝이 */
#wvHome .wv-gem svg {
  display: block;
  width: 23px;
  height: 23px;
}

/* 알림 종
   SVG 내부 여백 때문에 반짝이보다 크게 지정 */
#wvHome .wv-bell svg {
  display: block;
  width: 27px;
  height: 27px;
  transform: translateY(-1px);
}


/* ③ 아티스트 소식 제목 */
#wvHome .wv-feed-scroll h2 {
  font-size: clamp(15px, 3.9cqw, 19px);
  font-weight: 800;
  margin: 8px 2% 12px;
}


/* ④ 메인 이미지 영역 확대 */
#wvHome .wv-feed-photo {
  aspect-ratio: 1.02;
}


/* ⑤ 이미지 아래 흰색 정보 영역 */
#wvHome .wv-feed-info {
  padding: 15px 15px 20px;
}


/* ⑥ TXT 프로필과 이름 */
#wvHome .wv-artist-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* TXT 검은 프로필 원 */
#wvHome .wv-group-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  font-size: 10px;
}

/* TOMORROW X TOGETHER 글씨 */
#wvHome .wv-artist-row strong {
  display: inline-block;
  vertical-align: middle;
  font-size: clamp(12px, 3.2cqw, 16px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

/* 이름 옆 인증 배지 */
#wvHome .wv-artist-row .wv-verified {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: middle;
  object-fit: contain;
}

/* 날짜 */
#wvHome .wv-artist-row p {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #999;
}


/* ⑦ 게시글 설명 */
#wvHome .wv-feed-caption {
  font-size: clamp(11px, 3cqw, 14px);
  line-height: 1.5;
  margin-top: 16px;
}


/* ==================================
   위버스 홈 화면 전체 간격 조절
================================== */

#wvHome {
  /* 탭 + 아티스트 소식 + 이미지 함께 위로 */
  --home-up: 22px;
}

/* ① My Feed / Discover / Party / Spot 전체 이동 */
#wvHome .wv-feed-tabs {
  position: relative;
  top: calc(-1 * var(--home-up));
}

/* ② 아티스트 소식 + 피드 전체 함께 이동 */
#wvHome .wv-feed-scroll {
  top: calc(20% - var(--home-up));

  /* 하단 메뉴 바로 위까지 공간 활용 */
  bottom: 9%;
}

/* ③ 파란 이미지 영역 더 길게 */
#wvHome .wv-feed-photo {
  aspect-ratio: 0.90;
}

/* ④ 이미지와 TXT 정보 사이 여백 */
#wvHome .wv-feed-info {
  padding-top: 22px;
}


/* ==================================
   Weverse DM 오른쪽 아이콘 디테일
================================== */

/* 사람 추가 ↔ 점 세 개 간격 */
#wvDM .wv-dm-actions {
  gap: 4px;
}

/* 두 아이콘의 정렬 영역 */
#wvDM .wv-dm-actions > span {
  width: 24px;
  height: 26px;
  display: grid;
  place-items: center;
}

/* 사람 추가 아이콘 크기 */
#wvDM .wv-dm-actions .wv-dm-add-icon svg {
  width: 24px;
  height: 24px;
}

/* 점 세 개 크기 */
#wvDM .wv-dm-actions .wv-dm-more-icon svg {
  width: 21px;
  height: 21px;
}


/* ==================================
   위버스 프로필 사진 조절판
================================== */

/* DM 목록 프사 */
#wvDM .wv-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;

  /* 사진 안에서 보여줄 위치 */
  object-position: 50% 50%;
}

/* 채팅방 프사 전체 */
#wvChat img.wv-chat-photo {
  display: block;
  border-radius: 50%;
  object-fit: cover;

  /* 사진 안에서 보여줄 위치 */
  object-position: 50% 50%;

  flex-shrink: 0;
}

/* 채팅방 맨 위 프사 크기 */
#wvChat .wv-chat-header img.wv-chat-photo {
  width: 25px;
  height: 25px;
}

/* 채팅 메시지 왼쪽 프사 크기 */
#wvChat .wv-chat-artist-name img.wv-chat-photo {
  width: 27px;
  height: 27px;
}


/* 위버스 홈 피드 사진 위치 조절 */
#wvHome .wv-feed-photo {
  background-image: url("assets/weverse/태현위버스.jpg");
  background-size: cover;

  /* 첫 번째: 좌우 / 두 번째: 위아래 */
  background-position: 50% 30%;
}

/* =====================================
   위버스 홈 프사 내부 사진 조절
===================================== */

/* 동그라미 틀은 기존 36px 유지 */
#wvHome .wv-group-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/* 동그라미 안의 사진 */
/* 위버스 원형 프사 내부 사진 */
#wvHome .wv-avatar-photo {
  position: absolute;

  top: 50%;
  left: 50%;

  /* 원본 가로세로 비율 유지 */
  width: auto;
  height: 200%;

  max-width: none;

  /* 사진 자체를 강제로 자르지 않기 */
  object-fit: contain;

  /* 사진 위치 */
  transform: translate(
    calc(-50% + -10px),
    calc(-50% + 10px)
  );
}
/* ==================================
   DM 아티스트 프로필 자동 표시
================================== */

/* 기존 HTML에 넣었던 프사 중복 표시 방지 */
#wvChat .wv-chat-artist-name img.wv-chat-photo {
  display: none;
}

/* 아티스트 이름 앞에 프사 자동 생성 */
#wvChat .wv-chat-artist-name::before {
  content: "";

  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: block;

  border-radius: 50%;

  /* 사용할 프사 */
  background-image: url("assets/weverse/디엠프사.jpg");
  background-size: cover;

  /* 프사 안에서 사진 위치 조절 */
  background-position: 50% 50%;
}


/* ==================================
   DM 날짜 구분선 / 날짜 사이 여백
================================== */

/* 날짜 공통 */
#wvChatMessages > .wv-chat-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  margin: 36px 0 30px;
  padding: 0;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: #999;

  white-space: nowrap;
  text-align: center;
}

/* 날짜 왼쪽 선 */
#wvChatMessages > .wv-chat-date::before {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e5e9;
}

/* 날짜 오른쪽 선 */
#wvChatMessages > .wv-chat-date::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e5e9;
}

/* 맨 처음 날짜 */
#wvChatMessages > .wv-chat-date:first-child {
  margin-top: 8px;
}

/* 두 번째 날짜부터: 이전 대화와 거리 확보 */
#wvChatMessages > .wv-chat-date:not(:first-child) {
  margin-top: 65px;
  margin-bottom: 34px;
}


/* ==================================
   위버스 DM 말풍선 / 입력창 미세조정
================================== */

/* ① 말풍선 크기 + 글씨 살짝 축소 */
#wvChat .wv-bubble-row .wv-bubble {
  font-size: clamp(13px, 3.75cqw, 17px);
  padding: 8px 13px 12px;
  line-height: 1.45;
}

/* ③ 메시지 입력창 세로 높이만 축소 */
#wvChat .wv-chat-compose {
  height: 34px;
}


/* ==================================
   DM 날짜 / 프로필 / 메시지 간격 조절
================================== */

/* 날짜 공통: 날짜와 다음 내용 사이 */
#wvChatMessages > .wv-chat-date {
  margin-bottom: 11px;
}

/* 두 번째 날짜부터: 이전 말풍선과의 거리 */
#wvChatMessages > .wv-chat-date:not(:first-child) {
  margin-top: 20px;
  margin-bottom: 12px;
}

/* 맨 처음 날짜 위치 */
#wvChatMessages > .wv-chat-date:first-child {
  margin-top: 3px;
  margin-bottom: 12px;
}

/* 날짜 다음 프사·닉네임 간격 */
#wvChatMessages > .wv-chat-artist-name {
  margin: 8px 0 6px;
}

/* 말풍선끼리의 세로 간격 */
#wvChatMessages > .wv-bubble-row {
  margin-top: 3px;
  margin-bottom: 3px;
}

/* 태현 메시지 다음에 내 답장이 오면 자동으로 간격 추가 */
#wvChatMessages > .wv-bubble-row.artist + .wv-bubble-row.me {
  margin-top: 18px;
}


/* ==================================
   위버스 하단 홈 아이콘 PNG 교체
================================== */

/* 홈 이미지 크기 */
#wvBottomNav .wv-nav-item .wv-home-image {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  object-fit: contain;
}

/* 기본: 홈원본 표시 */
#wvBottomNav .wv-nav-item .wv-home-outline {
  display: block;
}

#wvBottomNav .wv-nav-item .wv-home-filled {
  display: none;
}

/* 홈 선택: 홈클릭 표시 */
#wvBottomNav .wv-nav-item.active .wv-home-outline {
  display: none;
}

#wvBottomNav .wv-nav-item.active .wv-home-filled {
  display: block;
}


/* DM 마지막 메시지와 입력창 사이 간격 축소 */
#wvChatMessages {
  bottom: calc(5% + 38px + 8px);
  padding-bottom: 6px;
}


/* =====================================
   WEVERSE DM 목록 최종 조절판
===================================== */

/* ① 프사 / 이름 / 메시지 / 시간 전체 배치 */
#wvDM .wv-dm-person {
  display: grid;

  grid-template-columns: 49px minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;

  /* 프사 ↔ 글씨 / 글씨 ↔ 시간 가로 간격 */
  column-gap: 11px;

  /* 닉네임 ↔ 메시지 세로 간격 */
  row-gap: 2px;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  position: relative;
  align-items: center;
  padding: 0 0 5px;

  /* 목록 전체 위아래 위치 유지 */
  transform: translateY(-10px);
}


/* ② 프사 위치와 크기 */
#wvDM .wv-dm-person .wv-avatar-wrap {
  grid-column: 1;
  grid-row: 1 / 3;

  width: 49px;
  height: 49px;

  align-self: center;
  justify-self: start;
}


/* ③ 이름과 메시지를 그리드에 배치 */
#wvDM .wv-dm-person .wv-person-info {
  display: contents;
}


/* ④ 닉네임 + 인증배지 */
#wvDM .wv-dm-person .wv-person-name {
  grid-column: 2;
  grid-row: 1;

  display: flex;
  align-items: center;
  gap: 3px;

  min-width: 0;
  overflow: hidden;
  white-space: nowrap;

  /* 닉네임 글씨 조절 */
  font-size: 13px;
  font-weight: 800;
  line-height: 19px;
  letter-spacing: -0.3px;
}

/* 닉네임이 길어지면 말줄임 */
#wvDM .wv-name-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 이름 옆 인증배지 */
#wvDM .wv-person-name .wv-verified {
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  object-fit: contain;
}


/* ⑤ 마지막 메시지: 최대 두 줄 */
#wvDM .wv-dm-person .wv-person-preview {
  grid-column: 2;
  grid-row: 2;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;

  /* 마지막 메시지 글씨 조절 */
  font-size: 12px;
  line-height: 17px;
  letter-spacing: -0.4px;

  max-height: 34px;

  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;

  color: #222;
}


/* ⑥ 날짜 / 시간: 닉네임과 수평 정렬 */
#wvDM .wv-dm-person .wv-person-date {
  grid-column: 3;
  grid-row: 1;

  position: static;
  top: auto;
  right: auto;
  transform: translateY(-2px);

  align-self: center;
  justify-self: end;

  margin: 0;
  padding: 0;

  font-size: 11px;
  line-height: 19px;
  color: #999;
  white-space: nowrap;
}


/* ⑦ 가로 스크롤 방지 */
#wvDM .wv-dm-scroll {
  overflow-x: hidden;
}


/* ==================================
   위버스 DM 인증배지 크기 / 위치 조절
================================== */

/* ① DM 목록 인증배지 */
#wvDM .wv-person-name .wv-verified {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  object-fit: contain;

  /* 배지만 아래로 2px */
  transform: translateY(2px);
}

/* ② 채팅방 상단 인증배지 */
#wvChat .wv-chat-name-wrap .wv-verified {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  object-fit: contain;

  /* 배지만 아래로 2px */
  transform: translateY(2px);
}

/* 삼성 인터넷 / 플레이스토어 클릭 완전 차단 */
.dock button:disabled {
  cursor: default !important;
  pointer-events: none;
  opacity: 1;
}

/* ============================================
   GALAXY 공통 홈 인디케이터
   모든 화면에서 크기 통일
============================================ */

:root {
  --system-bar-width: 105px;
  --system-bar-height: 4px;
}


/* 메인 / 잠금화면 / 일반 앱 / 위버스 / 인스타 */

.navline,
#homeLine,
#appHome,
.wv-system-home span,
.ig-exit span {

  width: var(--system-bar-width) !important;
  height: var(--system-bar-height) !important;

  border-radius: 999px !important;

  /* 배경에 따라 밝고 어둡게 자동 조절 */
  background: #c0c0c0 !important;
  mix-blend-mode: difference;

  box-shadow: none !important;
}

/* =====================================
   WEVERSE 배경 흰색 통일
===================================== */

/* 1. 위버스 메인 홈 */
#wvHome,
#wvHome .wv-feed-scroll {
  background: #fff !important;
}

/* 2. DM 목록 화면 */
#wvDM,
#wvDM .wv-dm-scroll {
  background: #fff !important;
}

/* 3. DM 채팅 화면 */
#wvChat,
#wvChatMessages {
  background: #fff !important;
}


/* =====================================
   홈 화면 하단 독바 클릭 애니메이션
===================================== */

/* 누르는 동안 아이콘 축소 */
.dock button:active .appicon {
  transform: scale(0.89);
}

/* 부드럽게 원래 크기로 복귀 */
.dock .appicon {
  transition: transform 0.15s ease;
}

/* 잠금화면 전화 / 카메라 SVG */
.lock-icons .round-btn svg {
  width: 24px;
  height: 24px;

  fill: none;
  stroke: #fff;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 뮤직바 사진 영역 */
.music {
  overflow: hidden;
  isolation: isolate;
}

/* 음악 컨트롤을 사진 위로 */
.music > :not(.music-cover-img) {
  position: relative;
  z-index: 2;
}

/* 기존 가상 배경 제거 */
.music::before,
.music::after {
  display: none !important;
}

/* =====================================
   GALAXY STATUS BAR
===================================== */

/* 상태바 전체 */
.home-status {
  height: 35px;

  padding-left: 21px;
  padding-right: 21px;

  font-size: 14px;
  font-weight: 650;

  color: white;
}

/* 오른쪽 상태 아이콘 영역 */
.home-status .status-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* =====================================
   상태바 PNG 자유 조절
===================================== */

.home-status .status-icons {

  /* 이미지 전체 크기 */
  width: 72px;

  /* 원본 비율 유지 */
  height: auto;

  display: block;
  object-fit: contain;

  /* 위치 조정 */
  transform: translate(11px, 0px);
}

/* =====================================
   MOBILE FULL WIDTH DISPLAY
   모바일에서 원본 비율 유지
===================================== */

@media (max-width: 599px), (pointer: coarse) {

  html,
  body {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    display: block !important;
    min-height: 100dvh;
    padding: 0;
    margin: 0;
  }

  /* 모바일 휴대폰 화면 */
  #phone.phone {
    width: 100% !important;

    /* 기존 3:7 비율 유지 */
    height: calc(100vw * 7 / 3) !important;
    min-height: calc(100vw * 7 / 3) !important;

    max-width: none !important;
    max-height: none !important;

    aspect-ratio: auto;

    margin: 0 auto;

    border: 0 !important;
    border-radius: 0 !important;

    flex: none;
  }

}

/* =====================================
   MOBILE DISPLAY SIZE
   모바일 화면 미세 축소
===================================== */

@media (max-width: 599px) {

  html,
  body {
    width: 100%;
    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    display: block !important;
    min-height: 100dvh;
  }

  #phone.phone {

    /* 여기서 휴대폰 크기 조절 */
    --mobile-phone-width: 80vw;

    width: var(--mobile-phone-width) !important;

    /* 기존 가로세로 비율 유지 */
    height: calc(var(--mobile-phone-width) * 7 / 3) !important;
    min-height: calc(var(--mobile-phone-width) * 7 / 3) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 auto !important;

    border: 0 !important;
    border-radius: 0 !important;
  }

}